feat(projects): enhance project status display with capitalization and badge variants

Author: zerox9dev

src/components/projects/project-detail-page.module.css

@@ -32,7 +32,7 @@
 
 .statsGrid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-top: 8px;
 }

src/components/projects/project-detail-page.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useParams, Link } from "react-router-dom";
-import { ArrowLeft, Clock, DollarSign, Calendar, Plus, Pencil, Trash2 } from "lucide-react";
+import { ArrowLeft, Clock, DollarSign, Calendar, Plus, Pencil, Trash2, CheckCircle2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -21,6 +21,24 @@ function formatDuration(seconds: number): string {
   return "0m";
 }
 
+function capitalizeStatus(status: string): string {
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}
+
+function getStatusBadgeVariant(status: string): "default" | "secondary" | "destructive" | "outline" {
+  switch (status) {
+    case "active":
+      return "default";
+    case "completed":
+      return "outline";
+    case "cancelled":
+      return "destructive";
+    case "paused":
+    default:
+      return "secondary";
+  }
+}
+
 export function ProjectDetailPage() {
   const { id } = useParams<{ id: string }>();
   const { projects, sessions, clients, getClientById, addSession, updateSession, deleteSession } = useAppData();
@@ -49,6 +67,16 @@ export function ProjectDetailPage() {
     return project.fixed_budget || 0;
   }, [project, totalSeconds]);
 
+  const totalPaidEarned = useMemo(() => {
+    if (!project) return 0;
+    if (project.billing_type === "hourly" && project.rate) {
+      return projectSessions
+        .filter((s) => s.payment_status === "paid")
+        .reduce((sum, s) => sum + ((s.duration_seconds / 3600) * project.rate!), 0);
+    }
+    return project.fixed_budget || 0;
+  }, [project, projectSessions]);
+
   if (!project) {
     return (
       <div className={sh.page}>
@@ -71,7 +99,7 @@ export function ProjectDetailPage() {
         <div>
           <h1 className={s.projectName}>{project.name}</h1>
           <p className={s.meta}>
-            {client?.name || "—"} · <Badge variant="secondary">{project.status}</Badge> · {project.billing_type === "hourly" ? `$${project.rate}/hr` : `$${project.fixed_budget} fixed`}
+            {client?.name || "—"} · <Badge variant={getStatusBadgeVariant(project.status)}>{capitalizeStatus(project.status)}</Badge> · {project.billing_type === "hourly" ? `$${project.rate}/hr` : `$${project.fixed_budget} fixed`}
           </p>
         </div>
         <div className={s.headerActions}>
@@ -103,6 +131,15 @@ export function ProjectDetailPage() {
             </div>
           </CardContent>
         </Card>
+        <Card>
+          <CardContent className={s.statCard}>
+            <CheckCircle2 className={s.statIcon} style={{ color: "var(--green-500)" }} />
+            <div>
+              <p className={s.statValue}>${totalPaidEarned.toFixed(0)}</p>
+              <p className={s.statLabel}>{t("invoices.paid")}</p>
+            </div>
+          </CardContent>
+        </Card>
         <Card>
           <CardContent className={s.statCard}>
             <Calendar className={s.statIcon} style={{ color: "var(--violet-400)" }} />

src/components/projects/projects-page.tsx

@@ -1,6 +1,24 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Plus, Pencil, Trash2 } from "lucide-react";
+
+function capitalizeStatus(status: string): string {
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}
+
+function getStatusBadgeVariant(status: string): "default" | "secondary" | "destructive" | "outline" {
+  switch (status) {
+    case "active":
+      return "default";
+    case "completed":
+      return "outline";
+    case "cancelled":
+      return "destructive";
+    case "paused":
+    default:
+      return "secondary";
+  }
+}
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Dialog } from "@/components/ui/dialog";
@@ -49,6 +67,7 @@ export function ProjectsPage() {
               <th>{t("projects.rate")}</th>
               <th>{t("reports.totalTime")}</th>
               <th>{t("reports.earnings")}</th>
+              <th>{t("invoices.paid")}</th>
               <th></th>
             </tr>
           </thead>
@@ -61,16 +80,22 @@ export function ProjectsPage() {
               const earned = project.billing_type === "hourly"
                 ? (totalSeconds / 3600) * (project.rate || 0)
                 : (project.fixed_budget || 0);
+              const paidEarned = project.billing_type === "hourly"
+                ? projectSessions
+                    .filter((s) => s.payment_status === "paid")
+                    .reduce((sum, s) => sum + ((s.duration_seconds / 3600) * (project.rate || 0)), 0)
+                : (project.fixed_budget || 0);
 
               return (
                 <tr key={project.id} onClick={() => navigate(`/app/projects/${project.id}`)} style={{ cursor: "pointer" }}>
                   <td className={s.nameCell}>{project.name}</td>
                   <td className={s.mutedCell}>{client?.name || "—"}</td>
-                  <td><Badge variant="secondary">{project.status}</Badge></td>
+                  <td><Badge variant={getStatusBadgeVariant(project.status)}>{capitalizeStatus(project.status)}</Badge></td>
                   <td className={s.mutedCell}>{project.billing_type}</td>
                   <td className={s.mutedCell}>{project.rate ? `$${project.rate}/hr` : "—"}</td>
                   <td className={s.mutedCell}>{hours}h</td>
                   <td className={s.mutedCell}>{currencySymbol}{earned.toFixed(0)}</td>
+                  <td className={s.mutedCell}>{currencySymbol}{paidEarned.toFixed(0)}</td>
                   <td className={s.actionsCell}>
                     <button className={s.actionBtn} onClick={(e) => { e.stopPropagation(); setEditingId(project.id); }}><Pencil style={{ width: 14, height: 14 }} /></button>
                     <button className={s.actionBtn} onClick={(e) => { e.stopPropagation(); deleteProject(project.id); }}><Trash2 style={{ width: 14, height: 14 }} /></button>

src/components/ui/badge.module.css

@@ -13,8 +13,9 @@
 }
 
 .default {
-  background: var(--black);
-  color: var(--white);
+  background: var(--emerald-50);
+  border-color: var(--emerald-200);
+  color: var(--emerald-700);
 }
 
 .secondary {