From b1615d72ba10b2e313aef41ddc0d6d7f506c00a5 Mon Sep 17 00:00:00 2001 From: Poyraz Avsever Date: Fri, 8 May 2026 14:12:45 +0300 Subject: [PATCH] feat: implement freelance dashboard pages for time tracking, client CRM, and proposals --- app/(dashboard)/freelance/clients/page.tsx | 199 ++++++++++++++++++ app/(dashboard)/freelance/proposals/page.tsx | 124 +++++++++++ .../freelance/time-tracking/page.tsx | 150 +++++++++++++ 3 files changed, 473 insertions(+) create mode 100644 app/(dashboard)/freelance/clients/page.tsx create mode 100644 app/(dashboard)/freelance/proposals/page.tsx create mode 100644 app/(dashboard)/freelance/time-tracking/page.tsx diff --git a/app/(dashboard)/freelance/clients/page.tsx b/app/(dashboard)/freelance/clients/page.tsx new file mode 100644 index 0000000..5985c12 --- /dev/null +++ b/app/(dashboard)/freelance/clients/page.tsx @@ -0,0 +1,199 @@ +"use client"; + +import { Plus, Search, Filter, Brain, Building2, Mail, Phone, MoreHorizontal, ShieldCheck, AlertCircle, ArrowUpRight } from "lucide-react"; + +// Mock Data +const clients = [ + { + id: 1, + name: "Acme Corp", + contact: "Alice Johnson", + email: "alice@acme.co", + status: "Active", + ltv: "$45,000", + activeProjects: 2, + aiSentiment: "Excellent", + aiInsight: "Client engagement is at an all-time high. AI suggests pitching the Q4 Marketing Retainer this week." + }, + { + id: 2, + name: "Globex Industries", + contact: "Mark Smith", + email: "msmith@globex.com", + status: "At Risk", + ltv: "$12,500", + activeProjects: 1, + aiSentiment: "Frustrated", + aiInsight: "Sentiment analysis on recent emails indicates frustration with turnaround times. Schedule a sync ASAP." + }, + { + id: 3, + name: "Soylent Corp", + contact: "John Doe", + email: "john.d@soylent.net", + status: "Onboarding", + ltv: "$0", + activeProjects: 1, + aiSentiment: "Neutral", + aiInsight: "Awaiting signed NDA. Send an automated reminder tomorrow at 10 AM." + }, + { + id: 4, + name: "Initech", + contact: "Bill Lumbergh", + email: "bill@initech.com", + status: "Active", + ltv: "$110,000", + activeProjects: 3, + aiSentiment: "Good", + aiInsight: "Consistent payment history. No immediate actions required." + } +]; + +export default function ClientsCRMPage() { + return ( +
+ + {/* Top Header */} +
+

+ Freelance / Clients CRM +

+
+
+ + +
+ +
+
+ + {/* AI CRM Intelligence */} +
+
+
+ +
+
+

+ AI Client Intelligence +

+

+ You have a high probability (85%) of closing an upsell with Acme Corp this month. Their usage of the current product has doubled. Shall I draft a customized proposal highlighting scale benefits? +

+
+
+ +
+ + {/* KPI Cards */} +
+
+

Total Active Clients

+
14
+
+
+

Pipeline LTV

+
+
$167k
+ +12% +
+
+
+

Average Client Health

+
+
92/100
+ Excellent +
+
+
+ + {/* Clients List */} +
+
+
Client
+
Status / LTV
+
AI Relationship Insight
+
Actions
+
+ +
+ {clients.map((client) => ( +
+ + {/* Client Details */} +
+
+ +
+
+
+ {client.name} +
+
+ {client.contact} +
+
+
+ + {/* Status / LTV */} +
+ + {client.status} + + {client.ltv} LTV +
+ + {/* AI Insight */} +
+
+
+
+ + + Sentiment: {client.aiSentiment} + +
+

+ {client.aiInsight} +

+
+
+ + {/* Actions */} +
+ + +
+ +
+ ))} +
+
+ +
+ ); +} diff --git a/app/(dashboard)/freelance/proposals/page.tsx b/app/(dashboard)/freelance/proposals/page.tsx new file mode 100644 index 0000000..a0dd80e --- /dev/null +++ b/app/(dashboard)/freelance/proposals/page.tsx @@ -0,0 +1,124 @@ +"use client"; + +import { Plus, Brain, FileText, CheckCircle2, Clock, AlertCircle, Eye, PenTool } from "lucide-react"; + +// Mock Data +const columns = [ + { + title: "Drafting", + color: "text-muted-foreground", + items: [ + { id: 1, client: "Stark Industries", title: "Enterprise Dashboard Redesign", value: "$18,500", date: "May 25", status: "Draft" } + ] + }, + { + title: "In Review", + color: "text-blue-400", + items: [ + { id: 2, client: "Wayne Enterprises", title: "Mobile App V2 Contract", value: "$32,000", date: "May 10", status: "Review" } + ] + }, + { + title: "Sent / Negotiating", + color: "text-orange-400", + items: [ + { id: 3, client: "Acme Corp", title: "Q3 Marketing Retainer", value: "$4,500/mo", date: "May 05", status: "Sent" }, + { id: 4, client: "Globex", title: "SEO Audit Proposal", value: "$2,800", date: "May 02", status: "Viewed 3x" } + ] + }, + { + title: "Signed / Won", + color: "text-emerald-400", + items: [ + { id: 5, client: "Soylent Corp", title: "Brand Identity Guidelines", value: "$15,000", date: "Apr 28", status: "Signed" } + ] + } +]; + +export default function ProposalsPage() { + return ( +
+ + {/* Top Header */} +
+

+ Freelance / Proposals & Contracts +

+
+ +
+
+ + {/* AI Conversion Optimizer */} +
+
+
+ +
+
+

+ AI Conversion Optimizer +

+

+ Globex has viewed the "SEO Audit Proposal" 3 times in the last 24 hours. AI indicates high intent. Additionally, historical data shows proposals sent with an interactive pricing table have an 85% higher win rate in your niche. +

+
+
+
+ + +
+
+ + {/* Kanban Board */} +
+ {columns.map((col, idx) => ( +
+ {/* Column Header */} +
+

{col.title}

+ {col.items.length} +
+ + {/* Column Cards */} +
+ {col.items.map((item) => ( +
+
+ {item.client} + +
+

{item.title}

+ +
+ {item.value} +
+ + {item.status === 'Signed' ? : + item.status.includes('Viewed') ? : + } + {item.status} + +
+
+
+ ))} +
+ +
+ ))} +
+ +
+ ); +} diff --git a/app/(dashboard)/freelance/time-tracking/page.tsx b/app/(dashboard)/freelance/time-tracking/page.tsx new file mode 100644 index 0000000..fa5285e --- /dev/null +++ b/app/(dashboard)/freelance/time-tracking/page.tsx @@ -0,0 +1,150 @@ +"use client"; + +import { Play, Pause, Brain, Clock, Plus, Tag, ArrowUpRight, DollarSign, Activity } from "lucide-react"; +import { Area, AreaChart, ResponsiveContainer, XAxis, Tooltip, CartesianGrid } from "recharts"; + +// Mock Data +const timeData = [ + { day: "Mon", billable: 5, nonBillable: 1 }, + { day: "Tue", billable: 6.5, nonBillable: 0.5 }, + { day: "Wed", billable: 4, nonBillable: 2 }, + { day: "Thu", billable: 7, nonBillable: 1 }, + { day: "Fri", billable: 5.5, nonBillable: 1.5 }, +]; + +const timeLogs = [ + { id: 1, task: "Database Schema Design", project: "Stark Enterprise App", duration: "02:45:00", date: "Today", billable: true }, + { id: 2, client: "Acme Corp", task: "Weekly Sync & Planning", project: "Retainer", duration: "01:00:00", date: "Today", billable: true }, + { id: 3, task: "Invoice Generation & Emails", project: "Admin", duration: "00:45:00", date: "Yesterday", billable: false }, + { id: 4, task: "Frontend Component Refactor", project: "Stark Enterprise App", duration: "04:15:00", date: "Yesterday", billable: true }, +]; + +export default function TimeTrackingPage() { + return ( +
+ + {/* Top Header */} +
+

+ Freelance / Time Tracking +

+
+ + {/* Active Timer & AI Insights Row */} +
+ + {/* Active Timer Widget */} +
+
+ + + + + Tracking +
+ +
+ 01:24:56 +
+ +
+ Stark Enterprise App
+ API Route Optimization +
+ +
+ + +
+
+ + {/* AI Invoice Suggester */} +
+
+ +

AI Invoice Suggester

+
+

+ You have logged 14.5 unbilled hours for Stark Industries this week. Based on your hourly rate of $120/hr, the unbilled amount is $1,740. AI suggests generating an invoice today as their accounting cycle ends on the 15th. +

+
+ + +
+
+ +
+ +
+ + {/* Weekly Chart */} +
+
+

This Week

+ 28h 00m +
+
+ + + + + + + + + + + + + + +
+
+ + {/* Time Logs */} +
+
+

Recent Time Logs

+ +
+
+ {timeLogs.map((log) => ( +
+
+
+
+
{log.task}
+
+ {log.project} + {log.date} +
+
+
+
+
{log.duration}
+ +
+
+ ))} +
+
+ +
+ +
+ ); +}