@rebasepro/app 0.0.1-canary.4829d6e

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

@@ -0,0 +1,234 @@
+import React, { useState, useMemo, useCallback } from "react";
+import { TaskFilters } from "./TaskFilters";
+import { TaskTable } from "./TaskTable";
+
+/* ── Types ──────────────────────────────────────────────────── */
+
+interface TaskEntity {
+    id: string;
+    values: {
+        title: string;
+        status: string;
+        resolution: string | null;
+        dueDate: string | null;
+        stageId: string | null;
+        description: string | null;
+        notes: string | null;
+        clientId: string | null;
+        client?: { name?: string } | null;
+        priority?: string | null;
+        createdAt: string | null;
+    };
+}
+
+type QuickFilter = "all" | "overdue";
+
+const PENDING_PAGE_SIZE = 50;
+
+function isDueDateOverdue(dateStr: string | null): boolean {
+    if (!dateStr) return false;
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return false;
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    return d < today;
+}
+
+export interface TasksViewProps {
+    loading: boolean;
+    tasks: TaskEntity[];
+    togglingIds: Set<string>;
+    onToggleTask: (taskId: string, currentStatus: string) => void;
+    onOpenTask: (taskId: string) => void;
+    onOpenClient: (clientId: string) => void;
+    clientsMap: Map<string, { name: string; picture?: string }>;
+    pipelineStages: any[];
+    recentlyToggledIds: Set<string>;
+    completedTasks: TaskEntity[];
+    completedLoaded: boolean;
+    loadingCompleted: boolean;
+    completedHasMore: boolean;
+    onExpandCompleted: () => void;
+    onLoadMoreCompleted: () => void;
+}
+
+/* ── Component ──────────────────────────────────────────────── */
+
+export function TasksView({
+    loading,
+    tasks,
+    togglingIds,
+    onToggleTask,
+    onOpenTask,
+    onOpenClient,
+    clientsMap,
+    pipelineStages,
+    recentlyToggledIds,
+    completedTasks,
+    completedLoaded,
+    loadingCompleted,
+    completedHasMore,
+    onExpandCompleted,
+    onLoadMoreCompleted
+}: TasksViewProps) {
+    const stageLabels: Record<string, string> = useMemo(
+        () => Object.fromEntries(
+            pipelineStages.map(s => [s.values?.stageKey, s.values?.label])
+        ),
+        [pipelineStages]
+    );
+
+    const stageFilterOrder: string[] = useMemo(
+        () => pipelineStages.map(s => s.values?.stageKey).filter(Boolean),
+        [pipelineStages]
+    );
+
+    // ── Filtering state ──
+    const [quickFilter, setQuickFilter] = useState<QuickFilter>("all");
+    const [stageFilter, setStageFilter] = useState<string | null>(null);
+    const [clientFilter, setClientFilter] = useState<string | null>(null);
+    const [searchText, setSearchText] = useState<string>("");
+    const [visiblePendingCount, setVisiblePendingCount] = useState(PENDING_PAGE_SIZE);
+
+    /* ── Derived data ── */
+    const overdueTasks = useMemo(
+        () => tasks.filter(t =>
+            t.values?.status === "pending" &&
+            !recentlyToggledIds.has(t.id) &&
+            isDueDateOverdue(t.values?.dueDate)
+        ),
+        [tasks, recentlyToggledIds]
+    );
+
+    // Unique client IDs in current pending tasks
+    const activeClientIds = useMemo(() => {
+        const ids = new Set<string>();
+        tasks.forEach(t => {
+            if (t.values?.clientId) ids.add(t.values.clientId);
+        });
+        return Array.from(ids).sort((a, b) => {
+            const na = clientsMap.get(a)?.name || "";
+            const nb = clientsMap.get(b)?.name || "";
+            return na.localeCompare(nb);
+        });
+    }, [tasks, clientsMap]);
+
+    // Stage counts for badge display
+    const stageCounts = useMemo(() => {
+        const counts: Record<string, number> = {};
+        tasks.forEach(t => {
+            if (t.values?.status === "pending" && t.values?.stageId) {
+                counts[t.values.stageId] = (counts[t.values.stageId] || 0) + 1;
+            }
+        });
+        return counts;
+    }, [tasks]);
+
+    // Apply filters to pending tasks
+    const filteredPendingTasks = useMemo(() => {
+        let filtered = tasks.filter(t =>
+            t.values?.status === "pending" ||
+            (t.values?.status === "completed" && recentlyToggledIds.has(t.id))
+        );
+
+        if (quickFilter === "overdue") {
+            filtered = filtered.filter(t =>
+                isDueDateOverdue(t.values?.dueDate) ||
+                recentlyToggledIds.has(t.id)
+            );
+        }
+
+        if (stageFilter) {
+            filtered = filtered.filter(t =>
+                t.values?.stageId === stageFilter ||
+                recentlyToggledIds.has(t.id)
+            );
+        }
+
+        if (clientFilter) {
+            filtered = filtered.filter(t =>
+                t.values?.clientId === clientFilter ||
+                recentlyToggledIds.has(t.id)
+            );
+        }
+
+        if (searchText.trim()) {
+            const q = searchText.trim().toLowerCase();
+            filtered = filtered.filter(t => {
+                const title = (t.values?.title || "").toLowerCase();
+                const desc = (t.values?.description || "").toLowerCase();
+                const clientName = t.values?.clientId
+                    ? (clientsMap.get(t.values.clientId)?.name || "").toLowerCase()
+                    : "";
+                return title.includes(q) || desc.includes(q) || clientName.includes(q);
+            });
+        }
+
+        return filtered;
+    }, [tasks, recentlyToggledIds, quickFilter, stageFilter, clientFilter, searchText, clientsMap]);
+
+    const visiblePendingTasks = useMemo(() =>
+        filteredPendingTasks.slice(0, visiblePendingCount),
+        [filteredPendingTasks, visiblePendingCount]
+    );
+    const hasMorePending = filteredPendingTasks.length > visiblePendingCount;
+    const pendingCount = filteredPendingTasks.length;
+
+    const handleClearAllFilters = useCallback(() => {
+        setQuickFilter("all");
+        setStageFilter(null);
+        setClientFilter(null);
+        setSearchText("");
+    }, []);
+
+    const hasActiveFilter = quickFilter !== "all" || stageFilter !== null || clientFilter !== null || searchText !== "";
+
+    return (
+        <div className="flex flex-col h-full bg-white dark:bg-surface-900">
+            <div className="flex flex-col gap-4 overflow-y-auto flex-1">
+                <TaskFilters
+                    quickFilter={quickFilter}
+                    onQuickFilterChange={setQuickFilter}
+                    stageFilter={stageFilter}
+                    onStageFilterChange={setStageFilter}
+                    clientFilter={clientFilter}
+                    onClientFilterChange={setClientFilter}
+                    searchText={searchText}
+                    onSearchTextChange={setSearchText}
+                    hasActiveFilter={hasActiveFilter}
+                    onClearAllFilters={handleClearAllFilters}
+                    overdueTasks={overdueTasks}
+                    pendingTasks={tasks.filter(t => t.values?.status === "pending" && !recentlyToggledIds.has(t.id))}
+                    stageLabels={stageLabels}
+                    stageFilterOrder={stageFilterOrder}
+                    stageCounts={stageCounts}
+                    activeClientIds={activeClientIds}
+                    clientsMap={clientsMap}
+                />
+
+                <TaskTable
+                    tasks={tasks}
+                    loading={loading}
+                    pendingTasks={filteredPendingTasks}
+                    visiblePendingTasks={visiblePendingTasks}
+                    hasMorePending={hasMorePending}
+                    onLoadMorePending={() => setVisiblePendingCount(prev => prev + PENDING_PAGE_SIZE)}
+                    pendingCount={pendingCount}
+                    togglingIds={togglingIds}
+                    onToggleTask={onToggleTask}
+                    onOpenTask={onOpenTask}
+                    onOpenClient={onOpenClient}
+                    clientsMap={clientsMap}
+                    stageLabels={stageLabels}
+                    recentlyToggledIds={recentlyToggledIds}
+                    completedTasks={completedTasks}
+                    completedLoaded={completedLoaded}
+                    loadingCompleted={loadingCompleted}
+                    completedHasMore={completedHasMore}
+                    onExpandCompleted={onExpandCompleted}
+                    onLoadMoreCompleted={onLoadMoreCompleted}
+                />
+            </div>
+        </div>
+    );
+}

package/src/components/ErrorTooltip.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Tooltip, TooltipProps } from "@rebasepro/ui";
+
+export function ErrorTooltip(props: TooltipProps) {
+    return (
+        <Tooltip {...props}
+            className={props.className}
+            tooltipClassName={"text-red-500! bg-red-50"}>
+            {props.children}
+        </Tooltip>
+    );
+}

package/src/components/ErrorView.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { ErrorTooltip } from "./ErrorTooltip";
+import { AlertTriangleIcon, Button, Typography, iconSize } from "@rebasepro/ui";
+
+/**
+ * @group Components
+ */
+export interface ErrorViewProps {
+    title?: string;
+    error: Error | React.ReactElement | string,
+    tooltip?: string,
+    onRetry?: () => void;
+}
+
+/**
+ * Generic error view. Displayed for example when an unexpected value comes
+ * from the driver in a collection view.
+ * @param title
+ * @param error
+ * @param tooltip
+ * @param onRetry
+
+ * @group Components
+ */
+export function ErrorView({
+    title,
+    error,
+    tooltip,
+    onRetry
+}: ErrorViewProps): React.ReactElement {
+    const message = error instanceof Error ? error.message : error;
+    // Extract error code from ApiError instances (e.g. PG error codes like "42P01")
+    const errorCode = error instanceof Error && "code" in error
+        ? (error as Error & { code?: string }).code
+        : undefined;
+
+    const body = (
+        <div className="flex flex-col m-2">
+            <div className="flex items-start gap-2.5">
+                <AlertTriangleIcon
+                    size={iconSize.smallest}
+                    className="shrink-0 text-red-500 dark:text-red-400 mt-0.5"
+                />
+                <div className="flex-1 min-w-0">
+                    {title && (
+                        <Typography
+                            variant="body2"
+                            color="primary"
+                            className="font-semibold mb-0.5"
+                        >
+                            {title}
+                        </Typography>
+                    )}
+                    <Typography
+                        variant="body2"
+                        color="secondary"
+                        className="leading-relaxed"
+                    >
+                        {message}
+                    </Typography>
+                    {errorCode && (
+                        <span
+                            className="inline-block mt-1 px-1.5 py-0.5 text-[10px] font-mono rounded bg-surface-200 dark:bg-surface-700 text-text-secondary"
+                        >
+                            {errorCode}
+                        </span>
+                    )}
+                    {onRetry && (
+                        <div className="mt-3">
+                            <Button
+                                variant="outlined"
+                                color="neutral"
+                                size="small"
+                                onClick={onRetry}
+                                className="font-semibold"
+                            >
+                                Try again
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    if (tooltip) {
+        return (
+            <ErrorTooltip title={tooltip}>
+                {body}
+            </ErrorTooltip>
+        );
+    }
+    return body;
+}

package/src/components/LanguageToggle.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { CheckIcon, IconButton, iconSize, LanguagesIcon, Menu, MenuItem, Typography } from "@rebasepro/ui";
+import { useTranslation } from "../hooks";
+
+export function LanguageToggle() {
+    const { i18n } = useTranslation();
+
+    return (
+        <Menu
+            trigger={<IconButton
+                color="inherit"
+                aria-label="Change language">
+                <LanguagesIcon size={iconSize.small}/>
+            </IconButton>}>
+            <MenuItem onClick={() => i18n.changeLanguage("en")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    <Typography variant="body2" className={i18n.language === "en" ? "font-bold" : ""}>English</Typography>
+                    {i18n.language === "en" && <CheckIcon size={iconSize.small}/>}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("es")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    <Typography variant="body2" className={i18n.language === "es" ? "font-bold" : ""}>Español</Typography>
+                    {i18n.language === "es" && <CheckIcon size={iconSize.small}/>}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("de")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    <Typography variant="body2" className={i18n.language === "de" ? "font-bold" : ""}>Deutsch</Typography>
+                    {i18n.language === "de" && <CheckIcon size={iconSize.small}/>}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("fr")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    <Typography variant="body2" className={i18n.language === "fr" ? "font-bold" : ""}>Français</Typography>
+                    {i18n.language === "fr" && <CheckIcon size={iconSize.small}/>}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("it")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    <Typography variant="body2" className={i18n.language === "it" ? "font-bold" : ""}>Italiano</Typography>
+                    {i18n.language === "it" && <CheckIcon size={iconSize.small}/>}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("hi")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    <Typography variant="body2" className={i18n.language === "hi" ? "font-bold" : ""}>हिन्दी</Typography>
+                    {i18n.language === "hi" && <CheckIcon size={iconSize.small}/>}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("pt")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    <Typography variant="body2" className={i18n.language === "pt" ? "font-bold" : ""}>Português</Typography>
+                    {i18n.language === "pt" && <CheckIcon size={iconSize.small}/>}
+                </div>
+            </MenuItem>
+        </Menu>
+    );
+}