feat: build Lead Workspace page with KPIs, source grid, lead cards, and sidebar widgets

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/leads/followup-widget.tsx

@@ -0,0 +1,64 @@
+import { Button } from '@/components/base/buttons/button';
+import { cx } from '@/utils/cx';
+import { formatShortDate } from '@/lib/format';
+import type { FollowUp } from '@/types/entities';
+
+interface FollowupWidgetProps {
+    overdue: FollowUp[];
+    upcoming: FollowUp[];
+}
+
+export const FollowupWidget = ({ overdue, upcoming }: FollowupWidgetProps) => {
+    const items = [...overdue, ...upcoming].slice(0, 4);
+
+    if (items.length === 0) {
+        return null;
+    }
+
+    return (
+        <div>
+            <h3 className="mb-3 text-sm font-bold text-primary">Upcoming Follow-ups</h3>
+            <div className="space-y-2">
+                {items.map((item) => {
+                    const isOverdue = overdue.some((o) => o.id === item.id);
+
+                    return (
+                        <div
+                            key={item.id}
+                            className={cx(
+                                'rounded-lg border-l-2 p-3',
+                                isOverdue
+                                    ? 'border-l-error-solid bg-error-primary'
+                                    : 'border-l-brand-solid bg-secondary',
+                            )}
+                        >
+                            <p
+                                className={cx(
+                                    'text-xs font-semibold',
+                                    isOverdue ? 'text-error-primary' : 'text-brand-secondary',
+                                )}
+                            >
+                                {item.scheduledAt
+                                    ? formatShortDate(item.scheduledAt)
+                                    : 'No date'}
+                                {isOverdue && ' — Overdue'}
+                            </p>
+                            <p className="mt-0.5 text-xs font-medium text-primary">
+                                {item.description ?? item.followUpType ?? 'Follow-up'}
+                            </p>
+                            {(item.patientName || item.patientPhone) && (
+                                <p className="mt-0.5 text-xs text-tertiary">
+                                    {item.patientName}
+                                    {item.patientPhone && ` · ${item.patientPhone}`}
+                                </p>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+            <Button className="mt-3 w-full" size="sm" color="secondary">
+                Open Full Schedule
+            </Button>
+        </div>
+    );
+};