@rebasepro/app 0.17.3 → 0.18.0

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

@@ -1,234 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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-semibold" : ""}>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-semibold" : ""}>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-semibold" : ""}>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-semibold" : ""}>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-semibold" : ""}>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-semibold" : ""}>हिन्दी</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-semibold" : ""}>Português</Typography>
-                    {i18n.language === "pt" && <CheckIcon size={iconSize.small}/>}
-                </div>
-            </MenuItem>
-        </Menu>
-    );
-}