@rebasepro/app 0.0.1-canary.4829d6e

package/src/components/Debug/crm-dashboard/DashboardMetrics.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import {
+    Typography,
+    cls,
+    Card,
+    Skeleton
+} from "@rebasepro/ui";
+import {
+    Users as UsersIcon,
+    DollarSign as DollarSignIcon,
+    AlertTriangle,
+    TrendingUp
+} from "lucide-react";
+
+/* ── Types ────────────────────────────────────────────── */
+
+interface InsightsData {
+    activeClients: number;
+    potentialRevenue: number;
+    contractedRevenue: number;
+    overdueTaskCount: number;
+}
+
+export interface DashboardMetricsProps {
+    loading: boolean;
+    insights: InsightsData | null;
+    totalInPipeline: number;
+    totalRevenue: number;
+}
+
+/* ── Component ────────────────────────────────────────── */
+
+export function DashboardMetrics({
+    loading,
+    insights,
+    totalInPipeline,
+    totalRevenue
+}: DashboardMetricsProps) {
+    return (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            {/* In Pipeline */}
+            <Card className="p-4">
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500">
+                        <UsersIcon className="h-4 w-4" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <Typography variant="caption" color="secondary" className="uppercase tracking-[0.05em] text-[10px]">In Pipeline</Typography>
+                        {loading ? (
+                            <Skeleton className="h-7 w-12 mt-0.5" />
+                        ) : (
+                            <Typography variant="h5" className="tabular-nums mt-0.5">
+                                {totalInPipeline}
+                            </Typography>
+                        )}
+                    </div>
+                </div>
+            </Card>
+
+            {/* Active Clients */}
+            <Card className="p-4">
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500">
+                        <TrendingUp className="h-4 w-4" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <Typography variant="caption" color="secondary" className="uppercase tracking-[0.05em] text-[10px]">Active Clients</Typography>
+                        {loading ? (
+                            <Skeleton className="h-7 w-12 mt-0.5" />
+                        ) : (
+                            <Typography variant="h5" className="tabular-nums mt-0.5">
+                                {insights?.activeClients ?? 0}
+                            </Typography>
+                        )}
+                    </div>
+                </div>
+            </Card>
+
+            {/* Total Revenue */}
+            <Card className="p-4">
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500">
+                        <DollarSignIcon className="h-4 w-4" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <Typography variant="caption" color="secondary" className="uppercase tracking-[0.05em] text-[10px]">Revenue</Typography>
+                        {loading ? (
+                            <Skeleton className="h-7 w-20 mt-0.5" />
+                        ) : (
+                            <div className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2 mt-0.5">
+                                <Typography variant="h5" className="tabular-nums">
+                                    ${totalRevenue.toLocaleString()}
+                                </Typography>
+                                {insights && insights.contractedRevenue > 0 && (
+                                    <Typography variant="caption" color="secondary" className="text-[10px]">
+                                        (${insights.contractedRevenue.toLocaleString()} confirmed)
+                                    </Typography>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </Card>
+
+            {/* Overdue Tasks */}
+            <Card className="p-4">
+                <div className="flex items-center gap-3">
+                    <div className={cls(
+                        "flex items-center justify-center w-5 h-5",
+                        insights && insights.overdueTaskCount > 0
+                            ? "text-red-500"
+                            : "text-surface-400 dark:text-surface-500"
+                    )}>
+                        <AlertTriangle className="h-4 w-4" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <Typography variant="caption" color="secondary" className="uppercase tracking-[0.05em] text-[10px]">Overdue Tasks</Typography>
+                        {loading ? (
+                            <Skeleton className="h-7 w-8 mt-0.5" />
+                        ) : (
+                            <Typography variant="h5" className={cls(
+                                "tabular-nums mt-0.5",
+                                insights && insights.overdueTaskCount > 0 && "text-red-600 dark:text-red-400"
+                            )}>
+                                {insights?.overdueTaskCount ?? 0}
+                            </Typography>
+                        )}
+                    </div>
+                </div>
+            </Card>
+        </div>
+    );
+}

package/src/components/Debug/crm-dashboard/PipelineOverview.tsx

@@ -0,0 +1,290 @@
+import React from "react";
+import {
+    Typography,
+    cls,
+    Card,
+    Button,
+    Skeleton,
+    Tooltip,
+    Select,
+    SelectItem
+} from "@rebasepro/ui";
+import {
+    Users as UsersIcon,
+    ChevronRight,
+    Settings
+} from "lucide-react";
+
+/* ── Types ────────────────────────────────────────────── */
+
+interface PipelineStage {
+    stageKey: string;
+    label: string;
+    shortLabel: string;
+    color: string;
+    icon: string;
+    sortOrder: number;
+    isTerminal: boolean;
+    isLostStage: boolean;
+    count: number;
+}
+
+interface PipelineOption {
+    id: string;
+    name: string;
+    isDefault: boolean;
+    color: string;
+}
+
+export interface PipelineOverviewProps {
+    loading: boolean;
+    insights: {
+        pipelines: PipelineOption[];
+    } | null;
+    selectedPipelineId: string | null;
+    onPipelineChange: (newPipelineId: string) => void;
+    onNavigate: (path: string) => void;
+    sortedStages: PipelineStage[];
+    activeStages: PipelineStage[];
+    closedStages: PipelineStage[];
+    totalInPipeline: number;
+    resolveColor: (colorName: string) => string;
+}
+
+/* ── Component ────────────────────────────────────────── */
+
+export function PipelineOverview({
+    loading,
+    insights,
+    selectedPipelineId,
+    onPipelineChange,
+    onNavigate,
+    sortedStages,
+    activeStages,
+    closedStages,
+    totalInPipeline,
+    resolveColor
+}: PipelineOverviewProps) {
+    const useShortLabels = sortedStages.length > 6;
+    const needsScroll = sortedStages.length > 10;
+
+    return (
+        <Card className="p-4 mb-6">
+            <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-3">
+                    <Typography variant="subtitle1">
+                        Pipeline{!loading && totalInPipeline > 0 ? ` (${totalInPipeline} clients)` : ""}
+                    </Typography>
+
+                    {/* Pipeline selector — using @rebasepro/ui Select */}
+                    {insights && insights.pipelines.length > 1 && (
+                        <Select
+                            value={selectedPipelineId ?? ""}
+                            onValueChange={(v) => onPipelineChange(v as string)}
+                            size="smallest"
+                            renderValue={(v) => {
+                                const selected = insights.pipelines.find(p => p.id === v);
+                                return selected ? selected.name : "Pipeline";
+                            }}
+                            position="popper"
+                        >
+                            {insights.pipelines.map(p => (
+                                <SelectItem key={p.id} value={p.id}>
+                                    {p.name}
+                                </SelectItem>
+                            ))}
+                        </Select>
+                    )}
+                </div>
+                <Button
+                    variant="text"
+                    size="small"
+                    onClick={() => { onNavigate('/c/engagements'); }}
+                    endIcon={<ChevronRight className="h-4 w-4" />}
+                >
+                    View All
+                </Button>
+            </div>
+
+            {loading ? (
+                <Skeleton className="h-20 w-full rounded-lg" />
+            ) : insights && sortedStages.length === 0 ? (
+                /* No stages configured */
+                <div className="flex flex-col items-center justify-center py-8">
+                    <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 mb-3">
+                        <Settings className="h-4 w-4" />
+                    </div>
+                    <Typography variant="body2" color="secondary" className="mb-1">
+                        No pipeline stages configured
+                    </Typography>
+                    <Typography variant="caption" color="disabled" className="mb-4 text-center">
+                        Set up your pipeline stages in Settings → Pipeline Stages
+                    </Typography>
+                    <Button
+                        variant="outlined"
+                        size="small"
+                        onClick={() => onNavigate('/pipeline-builder')}
+                    >
+                        Configure Stages
+                    </Button>
+                </div>
+            ) : insights && totalInPipeline === 0 ? (
+                /* No clients in pipeline */
+                <div className="flex flex-col items-center justify-center py-8">
+                    <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 mb-3">
+                        <UsersIcon className="h-4 w-4" />
+                    </div>
+                    <Typography variant="body2" color="secondary" className="mb-1">
+                        No clients in pipeline yet
+                    </Typography>
+                    <Typography variant="caption" color="disabled" className="mb-4">
+                        Create your first client to get started.
+                    </Typography>
+                </div>
+            ) : insights ? (
+                /* Pipeline bar */
+                <div className="relative">
+                    {needsScroll && (
+                        <>
+                            <div className="absolute left-0 top-0 bottom-0 w-6 bg-gradient-to-r from-white dark:from-surface-900 to-transparent z-10 pointer-events-none rounded-l-lg" />
+                            <div className="absolute right-0 top-0 bottom-0 w-6 bg-gradient-to-l from-white dark:from-surface-900 to-transparent z-10 pointer-events-none rounded-r-lg" />
+                        </>
+                    )}
+                    <div className={cls(
+                        "flex items-stretch gap-0",
+                        needsScroll && "overflow-x-auto"
+                    )}>
+                        {/* Active stages */}
+                        {activeStages.map((stage, idx) => {
+                            const isEmpty = stage.count === 0;
+                            const widthPercent = totalInPipeline > 0
+                                ? Math.max(8, (stage.count / totalInPipeline) * 100)
+                                : 100 / Math.max(activeStages.length, 1);
+                            const stageColor = resolveColor(stage.color);
+                            const displayLabel = useShortLabels ? stage.shortLabel : stage.label;
+
+                            return (
+                                <React.Fragment key={stage.stageKey}>
+                                    {idx > 0 && (
+                                        <div className="flex items-center shrink-0 text-surface-300 dark:text-surface-600 -mx-0.5">
+                                            <ChevronRight className="h-4 w-4" />
+                                        </div>
+                                    )}
+                                    <Tooltip title={`${stage.label} — ${stage.count} client${stage.count !== 1 ? "s" : ""}`}>
+                                        <div
+                                            className={cls(
+                                                "flex flex-col items-center justify-center rounded-lg px-3 py-3 min-w-[72px] transition-colors duration-150 cursor-pointer",
+                                                "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                                                isEmpty
+                                                    ? "bg-surface-50 dark:bg-surface-900/20"
+                                                    : "bg-surface-100/50 dark:bg-surface-900/60"
+                                            )}
+                                            style={{ flex: `${widthPercent} 1 0%` }}
+                                            onClick={() => onNavigate(`/c/engagements?stage=${stage.stageKey}`)}
+                                        >
+                                            <Typography
+                                                variant="h6"
+                                                className={cls(
+                                                    "tabular-nums leading-none font-semibold",
+                                                    isEmpty && "opacity-25"
+                                                )}
+                                            >
+                                                {stage.count}
+                                            </Typography>
+                                            <div className="flex items-center gap-1.5 mt-1.5">
+                                                <span
+                                                    className="w-1.5 h-1.5 rounded-full shrink-0"
+                                                    style={{
+                                                        backgroundColor: stageColor,
+                                                        opacity: isEmpty ? 0.25 : 1
+                                                    }}
+                                                />
+                                                <Typography
+                                                    variant="caption"
+                                                    color="secondary"
+                                                    className={cls(
+                                                        "whitespace-nowrap text-[11px]",
+                                                        isEmpty && "opacity-35"
+                                                    )}
+                                                >
+                                                    {displayLabel}
+                                                </Typography>
+                                            </div>
+                                        </div>
+                                    </Tooltip>
+                                </React.Fragment>
+                            );
+                        })}
+
+                        {/* Separator between active and closed stages */}
+                        {activeStages.length > 0 && closedStages.length > 0 && (
+                            <div className="flex items-center shrink-0 mx-2">
+                                <div className="w-px h-8 bg-surface-200 dark:bg-surface-700" />
+                            </div>
+                        )}
+
+                        {/* Closed / terminal stages — muted styling */}
+                        {closedStages.map((stage, idx) => {
+                            const isEmpty = stage.count === 0;
+                            const stageColor = resolveColor(stage.color);
+                            const displayLabel = useShortLabels ? stage.shortLabel : stage.label;
+
+                            return (
+                                <React.Fragment key={stage.stageKey}>
+                                    {idx > 0 && (
+                                        <div className="flex items-center shrink-0 text-surface-300 dark:text-surface-600 -mx-0.5">
+                                            <ChevronRight className="h-4 w-4" />
+                                        </div>
+                                    )}
+                                    <Tooltip title={`${stage.label} — ${stage.count} client${stage.count !== 1 ? "s" : ""}`}>
+                                        <div
+                                            className={cls(
+                                                "flex flex-col items-center justify-center rounded-lg px-3 py-3 min-w-[72px] transition-colors duration-150 cursor-pointer",
+                                                "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                                                "opacity-60",
+                                                isEmpty
+                                                    ? "bg-surface-50 dark:bg-surface-900/10"
+                                                    : "bg-surface-100/30 dark:bg-surface-900/30"
+                                            )}
+                                            style={{ flex: "0 0 auto" }}
+                                            onClick={() => onNavigate(`/c/engagements?stage=${stage.stageKey}`)}
+                                        >
+                                            <Typography
+                                                variant="h6"
+                                                className={cls(
+                                                    "tabular-nums leading-none font-semibold",
+                                                    isEmpty && "opacity-25"
+                                                )}
+                                            >
+                                                {stage.count}
+                                            </Typography>
+                                            <div className="flex items-center gap-1.5 mt-1.5">
+                                                <span
+                                                    className="w-1.5 h-1.5 rounded-full shrink-0"
+                                                    style={{
+                                                        backgroundColor: stageColor,
+                                                        opacity: isEmpty ? 0.25 : 1
+                                                    }}
+                                                />
+                                                <Typography
+                                                    variant="caption"
+                                                    color="secondary"
+                                                    className={cls(
+                                                        "whitespace-nowrap text-[11px]",
+                                                        isEmpty && "opacity-35"
+                                                    )}
+                                                >
+                                                    {displayLabel}
+                                                </Typography>
+                                            </div>
+                                        </div>
+                                    </Tooltip>
+                                </React.Fragment>
+                            );
+                        })}
+                    </div>
+                </div>
+            ) : null}
+        </Card>
+    );
+}

package/src/components/Debug/crm-dashboard/RecentActivity.tsx

@@ -0,0 +1,215 @@
+import React from "react";
+import {
+    Typography,
+    Card,
+    Skeleton,
+    Separator,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button
+} from "@rebasepro/ui";
+import {
+    CircleDot,
+    ArrowRightLeft,
+    Mail,
+    FileText,
+    PenLine,
+    Video,
+    MessageCircle,
+    StickyNote,
+    ListPlus,
+    CheckCircle2,
+    Wrench,
+    Pin
+} from "lucide-react";
+
+/* ── Activity type → icon mapping ─────────────────── */
+const ACTIVITY_ICONS: Record<string, React.ReactNode> = {
+    incoming:          <CircleDot className="h-4 w-4 text-blue-500" />,
+    status_changed:    <ArrowRightLeft className="h-4 w-4 text-violet-500" />,
+    email_sent:        <Mail className="h-4 w-4 text-sky-500" />,
+    agreements_sent:   <FileText className="h-4 w-4 text-amber-500" />,
+    agreements_signed: <PenLine className="h-4 w-4 text-emerald-500" />,
+    zoom_setup:        <Video className="h-4 w-4 text-blue-600" />,
+    whatsapp_setup:    <MessageCircle className="h-4 w-4 text-green-500" />,
+    note:              <StickyNote className="h-4 w-4 text-yellow-500" />,
+    task_created:      <ListPlus className="h-4 w-4 text-teal-500" />,
+    task_completed:    <CheckCircle2 className="h-4 w-4 text-emerald-500" />,
+    manual_action:     <Wrench className="h-4 w-4 text-orange-500" />
+};
+
+/* ── Relative time helper ──────────────────────────── */
+function relativeTime(dateStr: string): string {
+    const now = Date.now();
+    const then = new Date(dateStr).getTime();
+    const diffSec = Math.round((now - then) / 1000);
+    if (diffSec < 60) return 'just now';
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay < 7) return `${diffDay}d ago`;
+    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+/* ── Types ────────────────────────────────────────────── */
+
+export interface RecentActivityProps {
+    activities: any[];
+    activitiesLoading: boolean;
+    tasksMap: Map<string, any>;
+    onCompleteTask: (activity: any) => void;
+    onViewEmail: (activity: any) => void;
+    onOpenTask: (activity: any) => void;
+    emailViewerOpen: boolean;
+    onEmailViewerOpenChange: (open: boolean) => void;
+    selectedEmail: { to: string; subject: string; body: string; html?: string; mode?: string } | null;
+}
+
+/* ── Component ────────────────────────────────────────── */
+
+export function RecentActivity({
+    activities,
+    activitiesLoading,
+    tasksMap,
+    onCompleteTask,
+    onViewEmail,
+    onOpenTask,
+    emailViewerOpen,
+    onEmailViewerOpenChange,
+    selectedEmail
+}: RecentActivityProps) {
+    return (
+        <>
+            <Card className="p-4 flex-1">
+                <Typography variant="subtitle1" className="mb-3">Recent Activity</Typography>
+
+                {activitiesLoading ? (
+                    <div className="flex flex-col gap-3">
+                        {Array.from({ length: 6 }).map((_, i) => (
+                            <div key={i} className="flex items-center gap-3">
+                                <Skeleton className="h-5 w-5 rounded-full shrink-0" />
+                                <Skeleton className="h-4 flex-1" />
+                            </div>
+                        ))}
+                    </div>
+                ) : activities.length === 0 ? (
+                    <div className="flex flex-col items-center py-6">
+                        <Typography variant="body2" color="secondary">
+                            No recent activity
+                        </Typography>
+                    </div>
+                ) : (
+                    <div className="flex flex-col">
+                        {activities.map((activity: any, idx: number) => {
+                            const actType = activity.values?.type;
+                            const taskId = activity.values?.metadata?.taskId;
+                            const relatedTask = taskId ? tasksMap.get(taskId) : null;
+                            const isTaskActivity = actType === "task_created" || actType === "task_completed";
+                            const isEmailActivity = actType === "email_sent";
+
+                            return (
+                                <React.Fragment key={activity.id}>
+                                    {idx > 0 && <Separator orientation="horizontal" className="my-0" />}
+                                    <div className="flex items-start gap-2.5 py-2.5">
+                                        <span className="shrink-0 mt-0.5 flex items-center">
+                                            {ACTIVITY_ICONS[actType] ?? <Pin className="h-4 w-4 text-surface-400 dark:text-surface-500" />}
+                                        </span>
+                                        <div className="flex-1 min-w-0">
+                                            <Typography variant="body2" className="truncate leading-snug">
+                                                {activity.values?.description || actType || "Activity"}
+                                            </Typography>
+                                            {activity.values?.createdAt && (
+                                                <Typography variant="caption" color="secondary" className="text-[10px]">
+                                                    {relativeTime(activity.values.createdAt)}
+                                                </Typography>
+                                            )}
+                                            {/* Action buttons using @rebasepro/ui Buttons */}
+                                            <div className="flex items-center gap-3 mt-1 flex-wrap">
+                                                {/* Complete Task — only for task_created with a pending task */}
+                                                {isTaskActivity && relatedTask && relatedTask.values?.status !== "completed" && (
+                                                    <Button
+                                                        variant="text"
+                                                        size="small"
+                                                        color="primary"
+                                                        className="text-emerald-600 dark:text-emerald-400 font-medium hover:underline p-0 h-auto min-w-0"
+                                                        onClick={() => onCompleteTask(activity)}
+                                                    >
+                                                        Complete Task
+                                                    </Button>
+                                                )}
+                                                {/* View Sent Email */}
+                                                {isEmailActivity && (
+                                                    <Button
+                                                        variant="text"
+                                                        size="small"
+                                                        color="primary"
+                                                        className="font-medium hover:underline p-0 h-auto min-w-0"
+                                                        onClick={() => onViewEmail(activity)}
+                                                    >
+                                                        View Sent Email
+                                                    </Button>
+                                                )}
+                                                {/* Open task in side panel */}
+                                                {isTaskActivity && taskId && (
+                                                    <Button
+                                                        variant="text"
+                                                        size="small"
+                                                        color="neutral"
+                                                        className="font-medium hover:underline p-0 h-auto min-w-0 text-surface-500 hover:text-surface-700 dark:text-surface-400 dark:hover:text-surface-300"
+                                                        onClick={() => onOpenTask(activity)}
+                                                    >
+                                                        Open Task
+                                                    </Button>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </React.Fragment>
+                            );
+                        })}
+                    </div>
+                )}
+            </Card>
+
+            {/* ── Email Viewer Dialog ── */}
+            <Dialog
+                open={emailViewerOpen}
+                onOpenChange={onEmailViewerOpenChange}
+                maxWidth="xl"
+            >
+                <DialogTitle>{selectedEmail?.subject || "Email"}</DialogTitle>
+                <DialogContent>
+                    {selectedEmail && (
+                        <div className="space-y-3">
+                            <Typography variant="caption" color="secondary">
+                                To: {selectedEmail.to}
+                            </Typography>
+                            {selectedEmail.html ? (
+                                <div
+                                    className="prose prose-sm dark:prose-invert max-w-none text-text-primary dark:text-text-primary-dark"
+                                    dangerouslySetInnerHTML={{ __html: selectedEmail.html }}
+                                />
+                            ) : (
+                                <Typography variant="body2" className="whitespace-pre-wrap">
+                                    {selectedEmail.body}
+                                </Typography>
+                            )}
+                            {selectedEmail.mode === "simulated" && (
+                                <Typography variant="caption" color="secondary" className="italic mt-2 block">
+                                    Simulated — email was not actually sent.
+                                </Typography>
+                            )}
+                        </div>
+                    )}
+                </DialogContent>
+                <DialogActions>
+                    <Button variant="text" onClick={() => onEmailViewerOpenChange(false)}>Close</Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}