[FE-21] Build Contracts management page — service contracts with SLA and renewal tracking

[yusuftomilola]

Overview

A page to manage service contracts and SLA agreements with vendors. Shows contract status, value, expiry dates, and highlights contracts requiring renewal. Depends on BE-45.

Context

• Route: frontend/app/(dashboard)/contracts/page.tsx
• API endpoints (from BE-45): GET /contracts, POST /contracts, PATCH /contracts/:id, GET /contracts/expiring

Acceptance Criteria

• List view with tabs: All, Active, Expiring Soon, Expired
• Table columns: Contract Title, Vendor, Type (badge), Value, Start Date, End Date, Status (badge), Days Until Expiry, actions
• Expiring contracts (within 30 days) highlighted with a warning colour and a countdown chip (e.g., "Expires in 12 days")
• "New Contract" button: form with title, vendor selector, contractType dropdown, startDate, endDate, value, renewalAlertDays (number input, default 30), notes textarea, document upload (PDF)
• "Upload Document" button per contract row — uploads to S3 via POST /contracts/:id/document
• Clicking a row shows a detail drawer with full contract info and a link to download the uploaded document
• Create React Query hooks: useContracts(), useExpiringContracts(), useCreateContract(), useUpdateContract()

[mekeke111]

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

Hi maintainer I am a full stack developer I can handle this

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

[AbdulmujibOladayo]

@AbdulmujibOladayo 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 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 @AbdulmujibOladayo to this issue.

[soundsng]

@soundsng 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 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 @soundsng to this issue.

[Leothosine]

@Leothosine 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 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 @Leothosine to this issue.

[bellabuks]

@bellabuks 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 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 @bellabuks 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 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.

[Bojest001]

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

Hi maintainer I will to work on this issue

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

[KuchiMercy]

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

Hi kindly assign this issue to me.

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