task-j1

src/features/crm/dashboard/components/dashboard-hot-projects.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import type { CrmDashboardHotProjectRow } from '../api/types';
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value);
+}
+
+export function DashboardHotProjects({ rows }: { rows: CrmDashboardHotProjectRow[] }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Top Hot Opportunities</CardTitle>
+        <CardDescription>Production hot projects from enquiries, ranked by commercial value.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Project</TableHead>
+              <TableHead>Customer</TableHead>
+              <TableHead className='text-right'>Value</TableHead>
+              <TableHead>Assigned Sales</TableHead>
+              <TableHead className='text-right'>Probability</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className='text-muted-foreground text-center'>
+                  No hot opportunities match the current filters.
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow key={row.enquiryId}>
+                  <TableCell>
+                    <div className='font-medium'>{row.projectName}</div>
+                    <div className='text-muted-foreground text-xs'>{row.enquiryCode}</div>
+                  </TableCell>
+                  <TableCell>{row.customerName}</TableCell>
+                  <TableCell className='text-right'>{formatNumber(row.value)}</TableCell>
+                  <TableCell>{row.assignedSalesName ?? '-'}</TableCell>
+                  <TableCell className='text-right'>{row.probability ?? 0}%</TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}