CRM_ENVIROMENT/Newbie_CRM
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add client portal themes (Cyberpunk etc.), settings page, semantic Tailwind classes
Build & Auto-Repair / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
JCBSComputer
2026-07-01 15:47:44 +02:00
parent ef2e12ec5e
commit 6f622b6329
19 changed files with 832 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/client-portal/dashboard/page.tsx
+20 -20
View File
@@ -60,8 +60,8 @@ export default function ClientDashboard() {
return (
<div>
<h1 className="text-xl font-bold text-white mb-1">Welcome, {name}</h1>
<p className="text-sm text-[#6a6a75] mb-6">Your project overview at a glance</p>
<h1 className="text-xl font-bold text-foreground mb-1">Welcome, {name}</h1>
<p className="text-sm text-muted-foreground mb-6">Your project overview at a glance</p>
{/* Count cards */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
@@ -71,15 +71,15 @@ export default function ClientDashboard() {
<button
key={card.label}
onClick={() => router.push(card.href)}
className="bg-[#0d1117] border border-[#1a1a24] rounded-xl p-5 text-left hover:border-[#1BB0CE]/30 transition-all group"
className="bg-card border border-border rounded-xl p-5 text-left hover:border-primary/30 transition-all group"
>
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: `${card.color}15` }}>
<Icon className="h-5 w-5" style={{ color: card.color }} />
</div>
<span className="text-2xl font-bold text-white">{card.value}</span>
<span className="text-2xl font-bold text-foreground">{card.value}</span>
</div>
<p className="text-sm text-[#8a8a95]">{card.label}</p>
<p className="text-sm text-muted-foreground">{card.label}</p>
</button>
)
})}
@@ -87,24 +87,24 @@ export default function ClientDashboard() {
{/* Financial stats */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
<div className="bg-[#0d1117] border border-[#1a1a24] rounded-xl p-5">
<div className="bg-card border border-border rounded-xl p-5">
<div className="flex items-center gap-2 mb-2">
<DollarSign className="h-4 w-4 text-[#1BB0CE]" />
<span className="text-xs text-[#6a6a75] uppercase tracking-wider">Total Billed</span>
<DollarSign className="h-4 w-4 text-primary" />
<span className="text-xs text-muted-foreground uppercase tracking-wider">Total Billed</span>
</div>
<p className="text-xl font-bold text-white">{formatCurrency(stats.totalBilled)}</p>
<p className="text-xl font-bold text-foreground">{formatCurrency(stats.totalBilled)}</p>
</div>
<div className="bg-[#0d1117] border border-[#1a1a24] rounded-xl p-5">
<div className="bg-card border border-border rounded-xl p-5">
<div className="flex items-center gap-2 mb-2">
<TrendingUp className="h-4 w-4 text-emerald-400" />
<span className="text-xs text-[#6a6a75] uppercase tracking-wider">Total Paid</span>
<span className="text-xs text-muted-foreground uppercase tracking-wider">Total Paid</span>
</div>
<p className="text-xl font-bold text-emerald-400">{formatCurrency(stats.totalPaid)}</p>
</div>
<div className="bg-[#0d1117] border border-[#1a1a24] rounded-xl p-5">
<div className="bg-card border border-border rounded-xl p-5">
<div className="flex items-center gap-2 mb-2">
<AlertTriangle className="h-4 w-4 text-red-400" />
<span className="text-xs text-[#6a6a75] uppercase tracking-wider">Overdue</span>
<span className="text-xs text-muted-foreground uppercase tracking-wider">Overdue</span>
</div>
<p className="text-xl font-bold text-red-400">{formatCurrency(stats.totalOverdue)}</p>
</div>
@@ -112,24 +112,24 @@ export default function ClientDashboard() {
{/* Upcoming Deadlines */}
{stats.upcomingDeadlines.length > 0 && (
<div className="bg-[#0d1117] border border-[#1a1a24] rounded-xl p-5">
<div className="bg-card border border-border rounded-xl p-5">
<div className="flex items-center gap-2 mb-4">
<Calendar className="h-4 w-4 text-[#f59e0b]" />
<span className="text-sm font-semibold text-white">Upcoming Deadlines</span>
<Calendar className="h-4 w-4 text-amber-400" />
<span className="text-sm font-semibold text-foreground">Upcoming Deadlines</span>
</div>
<div className="space-y-3">
{(stats.upcomingDeadlines || []).map((d, i) => (
<div key={`${d.type}-${d.id}-${i}`} className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className={`w-2 h-2 rounded-full ${
d.type === "invoice" ? "bg-[#a855f7]" : "bg-[#1BB0CE]"
d.type === "invoice" ? "bg-purple-400" : "bg-primary"
}`} />
<div>
<p className="text-sm text-white">{d.name}</p>
<p className="text-[11px] text-[#6a6a75] capitalize">{d.type} &middot; {d.status_name?.replace("_", " ")}</p>
<p className="text-sm text-foreground">{d.name}</p>
<p className="text-[11px] text-muted-foreground capitalize">{d.type} &middot; {d.status_name?.replace("_", " ")}</p>
</div>
</div>
<span className="text-xs text-[#6a6a75]">
<span className="text-xs text-muted-foreground">
{new Date(d.date).toLocaleDateString()}
</span>
</div>