@rebasepro/app 0.17.3 → 0.18.1

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

@@ -1,131 +0,0 @@
-import React from "react";
-import {
-    Typography,
-    cls,
-    Card,
-    Skeleton,
-    UsersIcon,
-    DollarSignIcon,
-    AlertTriangleIcon,
-    TrendingUpIcon
-} from "@rebasepro/ui";
-
-/* ── 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">
-                        <TrendingUpIcon 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"
-                    )}>
-                        <AlertTriangleIcon 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

@@ -1,288 +0,0 @@
-import React from "react";
-import {
-    Typography,
-    cls,
-    Card,
-    Button,
-    Skeleton,
-    Tooltip,
-    Select,
-    SelectItem,
-    UsersIcon,
-    ChevronRightIcon,
-    SettingsIcon
-} from "@rebasepro/ui";
-
-/* ── 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={<ChevronRightIcon 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">
-                        <SettingsIcon 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">
-                                            <ChevronRightIcon 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">
-                                            <ChevronRightIcon 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

@@ -1,213 +0,0 @@
-import React from "react";
-import {
-    Typography,
-    Card,
-    Skeleton,
-    Separator,
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    CircleDotIcon,
-    ArrowRightLeftIcon,
-    MailIcon,
-    FileTextIcon,
-    PenLineIcon,
-    VideoIcon,
-    MessageCircleIcon,
-    StickyNoteIcon,
-    ListPlusIcon,
-    CheckCircle2Icon,
-    WrenchIcon,
-    PinIcon
-} from "@rebasepro/ui";
-
-/* ── Activity type → icon mapping ─────────────────── */
-const ACTIVITY_ICONS: Record<string, React.ReactNode> = {
-    incoming:          <CircleDotIcon className="h-4 w-4 text-blue-500" />,
-    status_changed:    <ArrowRightLeftIcon className="h-4 w-4 text-violet-500" />,
-    email_sent:        <MailIcon className="h-4 w-4 text-sky-500" />,
-    agreements_sent:   <FileTextIcon className="h-4 w-4 text-amber-500" />,
-    agreements_signed: <PenLineIcon className="h-4 w-4 text-emerald-500" />,
-    zoom_setup:        <VideoIcon className="h-4 w-4 text-blue-600" />,
-    whatsapp_setup:    <MessageCircleIcon className="h-4 w-4 text-green-500" />,
-    note:              <StickyNoteIcon className="h-4 w-4 text-yellow-500" />,
-    task_created:      <ListPlusIcon className="h-4 w-4 text-teal-500" />,
-    task_completed:    <CheckCircle2Icon className="h-4 w-4 text-emerald-500" />,
-    manual_action:     <WrenchIcon 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] ?? <PinIcon 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>
-        </>
-    );
-}