[FE-11] Build Check-in / Check-out page — borrow assets with due dates and return flow

[yusuftomilola]

Overview

A dedicated page for managing temporary asset borrowing. Users can check out an asset (set a return date), and check it back in (record condition on return). Also shows active checkouts and overdue items. Depends on BE-30.

Context

• Route: frontend/app/(dashboard)/checkouts/page.tsx (needs to be created)
• API endpoints (from BE-30): POST /assets/:id/checkout, POST /assets/:id/checkin, GET /assets/checkouts/active, GET /assets/checkouts/overdue
• Add "Checkouts" to the sidebar navigation

Acceptance Criteria

• Create frontend/app/(dashboard)/checkouts/page.tsx with two tabs: "Active Checkouts" and "Overdue"
• Active Checkouts tab: table of all checked-out assets with columns: Asset Name, Asset ID, Checked Out By, Checked Out Date, Expected Return Date, action button
• Overdue tab: same table filtered to assets past their return date, with a warning colour on the return date
• "Check In" button on each row opens a modal: condition selector (AssetCondition dropdown), optional notes, confirm button — calls POST /assets/:id/checkin
• "Check Out" CTA on this page opens a modal: asset search/select, expected return date picker, purpose note field — calls POST /assets/:id/checkout
• Overdue rows highlighted in red/amber
• Create React Query hooks: useActiveCheckouts(), useOverdueCheckouts(), useCheckoutAsset(), useCheckinAsset()

[dot-enny]

@dot-enny has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi, i think i can handle this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @dot-enny to this issue.

[TheShnider]

@TheShnider has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi. I have reviewed this issue and would like to work on it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @TheShnider to this issue.

[chisomvictorcv-sketch]

@chisomvictorcv-sketch has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Good day I am a full stack developer with over 6 years of experience and I have good practical knowledge on this kindly assign this to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @chisomvictorcv-sketch to this issue.

[yugomania]

@yugomania has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

pls i can solve this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @yugomania to this issue.

[SHEROSE0]

@SHEROSE0 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello Maintainer,
I’m interested in working on this issue if it can be assigned to me. I’ve reviewed the description and I understand the requirements clearly. I’m confident I can complete it efficiently and reliably.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SHEROSE0 to this issue.

[devwums]

@devwums has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I have reviewed this issue and its acceptance criteria carefully. The requirements are clear and well-scoped (large complexity). I have hands-on experience with React, exception handling and can implement this following the patterns and conventions already in the codebase. I will deliver complete, tested code that satisfies every acceptance criterion without requiring follow-up corrections. I can start immediately and am happy to discuss approach details with the maintainer beforehand.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @devwums to this issue.

[drips-wave]

Congratulations, @devwums! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @devwums: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @devwums as part of the Stellar Wave Program's 6th Wave 🥳

😎 @devwums: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.