refactor(freelancer): extract inline logic/components from service, portfolio, and application pages

[Josue19-08]

🔧 Title:

refactor(freelancer): extract inline logic/components from service, portfolio, and application pages

📘 Description

Six pages under src/app/app/freelancer/ mix data-fetching, business logic, and large inline JSX:

• freelancer/applications/page.tsx — ~90-line hand-built application card list with inline date formatting; an ApplicationCard component already exists and is used elsewhere but not reused here.
• freelancer/portfolio/page.tsx — a full drag-and-drop reorder implementation (drag handlers + an array-rebuild reduce), move-up/down, and toggle-public logic, all inline.
• freelancer/services/page.tsx — a full inline ServiceCard component (~85 lines) plus delete-modal state and toast logic.
• freelancer/services/new/page.tsx — inline validateForm(), a local FormField component, and a category as any cast.
• freelancer/services/[id]/page.tsx — inline OrderCard (~100 lines) and ServiceActions (~65 lines) components, orders typed any[], hardcoded fake stats.
• freelancer/services/[id]/edit/page.tsx — duplicates validateForm() and FormField verbatim from services/new/page.tsx.

✅ Acceptance Criteria

• freelancer/applications/page.tsx reuses the existing ApplicationCard component instead of a hand-built list
• usePortfolioReorder hook created, owning the drag-and-drop state/handlers currently inline in freelancer/portfolio/page.tsx
• ServiceCard, OrderCard, and ServiceActions extracted into their own component files under src/components/
• services/new/page.tsx and services/[id]/edit/page.tsx share one validateForm() and one FormField (or reuse the client-side pattern of externalizing validation to a *.data.ts file, matching @/data/client-offer.data) instead of duplicating both
• No any remains in this set (orders: any[], category as any x2) — replace with real types from src/types/
• npx tsc --noEmit, npx eslint, npx vitest run, and npm run build all stay clean

🔧 Context AI

• https://github.com/OFFER-HUB/OFFER-HUB-Frontend/tree/main/docs
• Reference pattern: src/app/app/freelancer/portfolio/[id]/edit/page.tsx (thin orchestrator, form fully delegated to PortfolioForm)

📋 Additional Notes

Part of the frontend architecture cleanup milestone, not a Tranche 2 paid deliverable.

[Okorie2000-code]

Hi Maintainer, I’ve reviewed the issue and I’m confident I can deliver a solid solution. Kindly assign it to me.

[rupesh-kumar-sah]

Hi maintainers,

I would like to resolve this issue. Here is my proposed execution plan:

• Implementation: Build refactor(freelancer): extract inline logic/components from service, portfolio, and application pages with responsive React/Next.js components and clean state management.
• Testing: Add component unit tests verifying user interactions and rendering states.

I am ready to start immediately—please feel free to assign this to me!