feat: rebuild the UI on Tailwind v4 + shadcn/ui
Migrates Tailwind v3 -> v4 (CSS-first, theme tokens for brand, workflow states and charts) and adds 23 shadcn/ui components on Radix. - lib/workflow.ts is now the single source of truth for state name, colour, icon and available actions; "Financial Review" is the canonical served name, with "Finance Review" kept as an alias so those rows stop falling through to the unstyled fallback and dropping out of every count - record view: TanStack Table with server-side sort/paginate, company column with initials avatar, page totals, density and a URL-synced query state - dashboard: one cached analytics fetch shared by tiles and charts, donut + aging + vendor spend, click-to-filter - detail view: rebuilt against the live detailview payload — restores the PO number and payment terms that the old key heuristics silently dropped, parses match_summary into a 3-way-match checklist, and separates the department's and reviewer's own words from AI-generated content - form modal on Radix Dialog (focus trap, scroll lock, escape handling)
This commit is contained in:
Bhanu Prakash Sai Potteri
parent
dc2e281347
commit
f5bc1fa119
25
components.json
Normal file
25
components.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "radix-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
6584
package-lock.json
generated
6584
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
@ -10,20 +10,33 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/geist": "^5.3.0",
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"@tanstack/react-query": "^5.60.5",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"lucide-react": "^0.441.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"nuqs": "^2.9.2",
|
||||
"radix-ui": "^1.6.7",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.0"
|
||||
"react-router-dom": "^6.26.0",
|
||||
"recharts": "^3.10.1",
|
||||
"shadcn": "^4.16.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^26.1.2",
|
||||
"@types/react": "^18.3.5",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.41",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"tailwindcss": "^4.3.3",
|
||||
"typescript": "~5.5.4",
|
||||
"vite": "^5.4.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -1,240 +1,344 @@
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Suspense, lazy, useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Loader2, CheckCircle2, XCircle, PauseCircle, MessageSquare } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ChevronRight, Loader2, Sparkles } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import DynamicHeader from "./DynamicHeader";
|
||||
import DashboardStats from "./DashboardStats";
|
||||
import ScreenRenderer from "./ScreenRenderer";
|
||||
import { TableSkeleton } from "./Skeleton";
|
||||
import DetailViewPanel from "./DetailViewPanel";
|
||||
import FormModal from "./FormModal";
|
||||
import { getHeaderConfig, getScreen, getInstance, type LayoutElement, type NavItem } from "../api/viewService";
|
||||
import { WORKFLOW_ID, ACTIVITY_IDS, STATE_IDS, SCREEN_UUIDS, RDBMS_RV_SCREEN_UUID, RDBMS_DV_SCREEN_UUID } from "../config";
|
||||
import RecordViewTable from "./RecordViewTable";
|
||||
import FormModal from "./FormModal";
|
||||
import CommandPalette from "./CommandPalette";
|
||||
import StatusBadge from "./StatusBadge";
|
||||
import { TableSkeleton } from "./Skeleton";
|
||||
import { getScreen, getInstance, type LayoutElement } from "@/api/viewService";
|
||||
import { useHeaderConfig } from "@/hooks/useHeaderConfig";
|
||||
import { useSidebar } from "@/hooks/useSidebar";
|
||||
import { actionsForStateId, stateById } from "@/lib/workflow";
|
||||
import {
|
||||
RDBMS_DV_SCREEN_UUID,
|
||||
RDBMS_RV_SCREEN_UUID,
|
||||
SCREEN_UUIDS,
|
||||
STATE_IDS,
|
||||
WORKFLOW_ID,
|
||||
} from "@/config";
|
||||
|
||||
// Keys + values are UUIDs (source_uuid from tbl_appconfig_rv_screens / dv_screens / screens).
|
||||
const RDBMS_SCREENS: Record<string, string> = {
|
||||
[RDBMS_RV_SCREEN_UUID]: RDBMS_RV_SCREEN_UUID, // Purchase Orders (Vendor Data) rv_screen
|
||||
};
|
||||
// recharts is heavy — keep it out of the initial bundle so the queue paints
|
||||
// first, then swap the charts in over a same-size placeholder.
|
||||
const DashboardCharts = lazy(() => import("./DashboardCharts"));
|
||||
|
||||
/** rv_screens rendered directly rather than through a screen layout. */
|
||||
const RDBMS_SCREEN_LABELS: Record<string, string> = {
|
||||
[RDBMS_RV_SCREEN_UUID]: "Purchase Orders",
|
||||
};
|
||||
|
||||
// RDBMS list screen → DV screen (both are dv/rv screen source_uuids).
|
||||
const RDBMS_DETAIL_SCREENS: Record<string, string> = {
|
||||
[RDBMS_RV_SCREEN_UUID]: RDBMS_DV_SCREEN_UUID,
|
||||
};
|
||||
|
||||
// List screen → detail screen (tbl_appconfig_screens source_uuid).
|
||||
const SCREEN_TO_DETAIL_SCREEN: Record<string, string> = {
|
||||
[SCREEN_UUIDS.MY_INVOICES]: SCREEN_UUIDS.INVOICE_DETAIL,
|
||||
/** List screen → detail screen. */
|
||||
const SCREEN_TO_DETAIL: Record<string, string> = {
|
||||
[SCREEN_UUIDS.MY_INVOICES]: SCREEN_UUIDS.INVOICE_DETAIL,
|
||||
[SCREEN_UUIDS.PENDING_CLARIFICATIONS]: SCREEN_UUIDS.CLARIFICATION_DETAIL,
|
||||
[SCREEN_UUIDS.FINANCE_REVIEW]: SCREEN_UUIDS.FINANCE_REVIEW_DETAIL,
|
||||
[SCREEN_UUIDS.ALL_INVOICES]: SCREEN_UUIDS.INVOICE_DETAIL,
|
||||
[SCREEN_UUIDS.FINANCE_REVIEW]: SCREEN_UUIDS.FINANCE_REVIEW_DETAIL,
|
||||
[SCREEN_UUIDS.ALL_INVOICES]: SCREEN_UUIDS.INVOICE_DETAIL,
|
||||
};
|
||||
|
||||
const ACTIVITY_META: Record<string, { label: string; icon: React.ReactNode; style: "primary" | "danger" | "ghost" }> = {
|
||||
[ACTIVITY_IDS.PROVIDE_CLARIFICATION]: { label: "Provide Clarification", icon: <MessageSquare size={14} />, style: "primary" },
|
||||
[ACTIVITY_IDS.APPROVE_PAYMENT]: { label: "Approve", icon: <CheckCircle2 size={14} />, style: "primary" },
|
||||
[ACTIVITY_IDS.REJECT_PAYMENT]: { label: "Reject", icon: <XCircle size={14} />, style: "danger" },
|
||||
[ACTIVITY_IDS.HOLD_PAYMENT]: { label: "Hold", icon: <PauseCircle size={14} />, style: "ghost" },
|
||||
};
|
||||
|
||||
const BTN_STYLES: Record<string, string> = {
|
||||
primary: "text-white shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 hover:scale-[1.02]",
|
||||
danger: "text-red-600 dark:text-red-400 bg-white dark:bg-zinc-900 border border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-950/30",
|
||||
ghost: "text-slate-600 dark:text-zinc-300 bg-white dark:bg-zinc-900 border border-slate-200 dark:border-zinc-700 hover:bg-slate-50 dark:hover:bg-zinc-800",
|
||||
};
|
||||
const detailScreenFor = (screenId: string | null) =>
|
||||
(screenId ? SCREEN_TO_DETAIL[screenId] ?? RDBMS_DETAIL_SCREENS[screenId] : null) ??
|
||||
SCREEN_UUIDS.INVOICE_DETAIL;
|
||||
|
||||
export default function AppShell() {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
const screenIdParam = params.screenId ?? null;
|
||||
const instanceIdParam = params.instanceId;
|
||||
const instanceIdParam = params.instanceId ?? null;
|
||||
|
||||
const sidebar = useSidebar();
|
||||
const { navItems, isSuccess: navReady } = useHeaderConfig();
|
||||
|
||||
const [activeScreenId, setActiveScreenId] = useState<string | null>(screenIdParam);
|
||||
const [layout, setLayout] = useState<LayoutElement[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [ready, setReady] = useState(false);
|
||||
const [detailTitle, setDetailTitle] = useState<string | null>(null);
|
||||
const [commandOpen, setCommandOpen] = useState(false);
|
||||
const [formModal, setFormModal] = useState<{
|
||||
activityId: string;
|
||||
instanceId: string;
|
||||
title: string;
|
||||
} | null>(null);
|
||||
|
||||
const [detailInstanceId, setDetailInstanceId] = useState<string | null>(instanceIdParam || null);
|
||||
const [detailViewId, setDetailViewId] = useState<string | null>(null);
|
||||
const [detailScreenLayout, setDetailScreenLayout] = useState<LayoutElement[] | null>(null);
|
||||
const isRdbms = !!activeScreenId && activeScreenId === RDBMS_RV_SCREEN_UUID;
|
||||
const detailViewId = instanceIdParam ? detailScreenFor(screenIdParam ?? activeScreenId) : null;
|
||||
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [formModal, setFormModal] = useState<{ activityId: string; instanceId: string; title: string } | null>(null);
|
||||
const [instanceState, setInstanceState] = useState<string | null>(null);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [navItems, setNavItems] = useState<NavItem[]>([]);
|
||||
|
||||
// Init
|
||||
// Land on the first nav item when no screen is in the URL.
|
||||
useEffect(() => {
|
||||
if (!screenIdParam && !instanceIdParam) {
|
||||
getHeaderConfig("desktop").then((cfg) => {
|
||||
const items = cfg.components?.nav?.items ?? [];
|
||||
setNavItems(items);
|
||||
if (items.length > 0) handleNavigate(items[0].screen_uuid);
|
||||
}).catch(console.error).finally(() => setReady(true));
|
||||
} else {
|
||||
setReady(true);
|
||||
if (instanceIdParam && screenIdParam) {
|
||||
setDetailInstanceId(instanceIdParam);
|
||||
setDetailViewId(SCREEN_TO_DETAIL_SCREEN[screenIdParam] ?? RDBMS_DETAIL_SCREENS[screenIdParam] ?? SCREEN_UUIDS.INVOICE_DETAIL);
|
||||
}
|
||||
if (!screenIdParam && !instanceIdParam && navReady && navItems.length > 0) {
|
||||
handleNavigate(navItems[0].screen_uuid);
|
||||
}
|
||||
}, []);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [navReady, navItems.length, screenIdParam, instanceIdParam]);
|
||||
|
||||
// Sync detail state with URL params on browser back/forward
|
||||
// Keep local screen state in step with browser back/forward.
|
||||
useEffect(() => {
|
||||
if (!params.instanceId && detailInstanceId) {
|
||||
setDetailInstanceId(null);
|
||||
setDetailViewId(null);
|
||||
setDetailScreenLayout(null);
|
||||
setInstanceState(null);
|
||||
} else if (params.instanceId && params.instanceId !== detailInstanceId) {
|
||||
setDetailInstanceId(params.instanceId);
|
||||
const sid = params.screenId ?? activeScreenId;
|
||||
if (sid) setDetailViewId(SCREEN_TO_DETAIL_SCREEN[sid] ?? RDBMS_DETAIL_SCREENS[sid] ?? SCREEN_UUIDS.INVOICE_DETAIL);
|
||||
}
|
||||
}, [params.instanceId]);
|
||||
if (screenIdParam && screenIdParam !== activeScreenId) setActiveScreenId(screenIdParam);
|
||||
if (!instanceIdParam) setDetailTitle(null);
|
||||
}, [screenIdParam, instanceIdParam, activeScreenId]);
|
||||
|
||||
// Load screen layout (skip for RDBMS screens — rendered directly)
|
||||
useEffect(() => {
|
||||
if (!activeScreenId || detailInstanceId) return;
|
||||
if (RDBMS_SCREENS[activeScreenId]) { setLoading(false); return; }
|
||||
setLoading(true);
|
||||
getScreen(activeScreenId)
|
||||
.then((s) => setLayout(s.layout ?? []))
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
}, [activeScreenId, detailInstanceId]);
|
||||
// ── Screen layout ─────────────────────────────────────────────────────────
|
||||
const screenQuery = useQuery({
|
||||
queryKey: ["screen", activeScreenId],
|
||||
enabled: !!activeScreenId && !isRdbms && !instanceIdParam,
|
||||
staleTime: 5 * 60_000,
|
||||
queryFn: async () => (await getScreen(activeScreenId!)).layout ?? ([] as LayoutElement[]),
|
||||
});
|
||||
|
||||
// Load detail screen
|
||||
useEffect(() => {
|
||||
if (!detailViewId) return;
|
||||
getScreen(detailViewId)
|
||||
.then((s) => setDetailScreenLayout(s.layout ?? []))
|
||||
.catch(() => setDetailScreenLayout(null));
|
||||
}, [detailViewId]);
|
||||
const detailScreenQuery = useQuery({
|
||||
queryKey: ["screen", detailViewId],
|
||||
enabled: !!detailViewId,
|
||||
staleTime: 5 * 60_000,
|
||||
queryFn: async () => (await getScreen(detailViewId!)).layout ?? ([] as LayoutElement[]),
|
||||
});
|
||||
|
||||
// Load instance state
|
||||
useEffect(() => {
|
||||
if (!detailInstanceId) return;
|
||||
getInstance(WORKFLOW_ID, detailInstanceId)
|
||||
.then((inst) => setInstanceState(inst.current_state_id))
|
||||
.catch(() => {});
|
||||
}, [detailInstanceId]);
|
||||
// ── Instance state ────────────────────────────────────────────────────────
|
||||
// The old code faked "wait for the AI" with a setTimeout(2500) that bumped a
|
||||
// refresh key twice. This polls while the instance is mid-analysis and stops
|
||||
// as soon as it settles.
|
||||
const instanceQuery = useQuery({
|
||||
queryKey: ["instance", instanceIdParam],
|
||||
enabled: !!instanceIdParam,
|
||||
queryFn: () => getInstance(WORKFLOW_ID, instanceIdParam!),
|
||||
refetchInterval: (q) => {
|
||||
const stateId = (q.state.data as any)?.current_state_id;
|
||||
return stateId === STATE_IDS.AI_ANALYSIS ? 3000 : false;
|
||||
},
|
||||
});
|
||||
|
||||
const handleNavigate = useCallback((id: string) => {
|
||||
setActiveScreenId(id); setDetailInstanceId(null); setDetailViewId(null);
|
||||
setDetailScreenLayout(null); setInstanceState(null);
|
||||
if (RDBMS_SCREENS[id]) setLayout([]);
|
||||
navigate(`/screen/${id}`);
|
||||
}, [navigate]);
|
||||
const instanceStateId: string | null =
|
||||
(instanceQuery.data as any)?.current_state_id ?? null;
|
||||
const instanceState = stateById(instanceStateId);
|
||||
const analysing = instanceStateId === STATE_IDS.AI_ANALYSIS;
|
||||
const actions = actionsForStateId(instanceStateId);
|
||||
|
||||
const handleRowClick = useCallback((instanceId: string) => {
|
||||
const dvScreenId = activeScreenId ? (SCREEN_TO_DETAIL_SCREEN[activeScreenId] ?? SCREEN_UUIDS.INVOICE_DETAIL) : SCREEN_UUIDS.INVOICE_DETAIL;
|
||||
setDetailInstanceId(instanceId);
|
||||
setDetailViewId(dvScreenId);
|
||||
navigate(`/screen/${activeScreenId}/detail/${instanceId}`);
|
||||
}, [activeScreenId, navigate]);
|
||||
|
||||
const handleBack = () => {
|
||||
setDetailInstanceId(null); setDetailViewId(null); setDetailScreenLayout(null);
|
||||
setInstanceState(null);
|
||||
navigate(`/screen/${activeScreenId}`);
|
||||
};
|
||||
|
||||
const handleFormSuccess = () => {
|
||||
setFormModal(null);
|
||||
if (detailInstanceId) {
|
||||
const v = detailViewId; setDetailViewId(null); setTimeout(() => setDetailViewId(v), 50);
|
||||
}
|
||||
};
|
||||
|
||||
const actions = (() => {
|
||||
if (!instanceState) return [];
|
||||
if (instanceState === STATE_IDS.AWAITING_CLARIFICATION) return [ACTIVITY_IDS.PROVIDE_CLARIFICATION];
|
||||
if (instanceState === STATE_IDS.FINANCE_REVIEW) return [ACTIVITY_IDS.APPROVE_PAYMENT, ACTIVITY_IDS.REJECT_PAYMENT, ACTIVITY_IDS.HOLD_PAYMENT];
|
||||
return [];
|
||||
})();
|
||||
|
||||
if (!ready) return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-zinc-950 flex justify-center items-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 size={22} className="animate-spin text-violet-500" />
|
||||
<span className="text-[12px] text-slate-400 dark:text-zinc-600">Loading…</span>
|
||||
</div>
|
||||
</div>
|
||||
const handleNavigate = useCallback(
|
||||
(id: string) => {
|
||||
setActiveScreenId(id);
|
||||
setDetailTitle(null);
|
||||
navigate(`/screen/${id}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50/60 dark:bg-zinc-950">
|
||||
<DynamicHeader activeScreenId={activeScreenId} onNavigate={handleNavigate} onSidebarChange={setSidebarOpen} />
|
||||
const handleRowClick = useCallback(
|
||||
(instanceId: string) => navigate(`/screen/${activeScreenId}/detail/${instanceId}`),
|
||||
[activeScreenId, navigate],
|
||||
);
|
||||
|
||||
<main className={`transition-all duration-200 py-6 px-7 ${sidebarOpen ? "ml-60" : "ml-0"}`}>
|
||||
<div className="w-full max-w-7xl mx-auto">
|
||||
{detailInstanceId && detailViewId ? (
|
||||
const handleBack = () => navigate(`/screen/${activeScreenId}`);
|
||||
|
||||
const screenLabel =
|
||||
navItems.find((n) => n.screen_uuid === activeScreenId)?.label ??
|
||||
(activeScreenId ? RDBMS_SCREEN_LABELS[activeScreenId] : undefined) ??
|
||||
"Invoices";
|
||||
|
||||
if (!navReady && !screenIdParam && !instanceIdParam) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="size-5 animate-spin text-primary" aria-hidden />
|
||||
<span className="text-sm text-muted-foreground">Loading…</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const showDetail = !!instanceIdParam && !!detailViewId;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Must be the first focusable element, and must move focus (not just
|
||||
scroll) to satisfy WCAG 2.4.1. */}
|
||||
<a href="#main" className="skip-link">
|
||||
Skip to content
|
||||
</a>
|
||||
|
||||
<DynamicHeader
|
||||
activeScreenId={activeScreenId}
|
||||
onNavigate={handleNavigate}
|
||||
sidebar={sidebar}
|
||||
/>
|
||||
|
||||
<main
|
||||
id="main"
|
||||
tabIndex={-1}
|
||||
className={cn(
|
||||
"px-4 py-5 transition-[margin] duration-200 sm:px-6",
|
||||
// No margin on mobile — the sidebar is an overlay there.
|
||||
sidebar.isMobile ? "ml-0" : sidebar.open ? "ml-60" : "ml-14",
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-[1400px]">
|
||||
{showDetail ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-1.5 text-[13px]">
|
||||
{/* Breadcrumb — shows the invoice number once the detail view
|
||||
reports it, instead of the raw instance UUID. */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1 text-base">
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="text-slate-400 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 transition-colors font-medium"
|
||||
className="rounded font-medium text-muted-foreground transition-colors hover:text-primary"
|
||||
>
|
||||
{navItems.find(n => n.screen_uuid === activeScreenId)?.label ?? (activeScreenId ? RDBMS_SCREEN_LABELS[activeScreenId] : undefined) ?? "Invoices"}
|
||||
{screenLabel}
|
||||
</button>
|
||||
<span className="text-slate-300 dark:text-zinc-700">/</span>
|
||||
<span className="text-slate-700 dark:text-zinc-200 font-medium truncate max-w-xs">
|
||||
{detailInstanceId}
|
||||
<ChevronRight className="size-3.5 shrink-0 text-muted-foreground/50" aria-hidden />
|
||||
<span className="truncate font-medium text-foreground" aria-current="page">
|
||||
{detailTitle ?? (
|
||||
<span className="font-mono text-sm text-muted-foreground">
|
||||
{instanceIdParam.slice(0, 8)}…
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</nav>
|
||||
{actions.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
{actions.map((id) => {
|
||||
const m = ACTIVITY_META[id];
|
||||
if (!m) return null;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => setFormModal({ activityId: id, instanceId: detailInstanceId, title: m.label })}
|
||||
className={`h-8 px-3.5 text-[12px] font-semibold rounded-xl transition-all flex items-center gap-1.5 ${BTN_STYLES[m.style]}`}
|
||||
style={m.style === "primary" ? { background: "linear-gradient(135deg, #7c3aed, #a855f7)" } : {}}
|
||||
>
|
||||
{m.icon}{m.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{analysing && (
|
||||
<span className="flex items-center gap-1.5 rounded-full border border-state-analysis/25 bg-state-analysis/10 px-2.5 py-1 text-xs font-semibold text-state-analysis">
|
||||
<Sparkles className="size-3 animate-pulse" aria-hidden />
|
||||
AI analysing…
|
||||
</span>
|
||||
)}
|
||||
{instanceState && !analysing && actions.length === 0 && (
|
||||
<StatusBadge value={instanceState.name} />
|
||||
)}
|
||||
{actions.map((a) => (
|
||||
<Button
|
||||
key={a.activityId}
|
||||
size="sm"
|
||||
variant={
|
||||
a.style === "danger"
|
||||
? "destructive"
|
||||
: a.style === "ghost"
|
||||
? "outline"
|
||||
: "default"
|
||||
}
|
||||
className="h-8 gap-1.5"
|
||||
onClick={() =>
|
||||
setFormModal({
|
||||
activityId: a.activityId,
|
||||
instanceId: instanceIdParam,
|
||||
title: a.label,
|
||||
})
|
||||
}
|
||||
>
|
||||
<a.icon className="size-3.5" aria-hidden />
|
||||
{a.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{detailScreenLayout ? <ScreenRenderer layout={detailScreenLayout} instanceId={detailInstanceId} /> : <DetailViewPanel viewId={detailViewId} instanceId={detailInstanceId} />}
|
||||
{detailScreenQuery.data && detailScreenQuery.data.length > 0 ? (
|
||||
<ScreenRenderer
|
||||
layout={detailScreenQuery.data}
|
||||
instanceId={instanceIdParam}
|
||||
onTitle={setDetailTitle}
|
||||
/>
|
||||
) : (
|
||||
<DetailViewPanel
|
||||
viewId={detailViewId}
|
||||
instanceId={instanceIdParam}
|
||||
onTitle={setDetailTitle}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : loading ? (
|
||||
<><DashboardStats /><TableSkeleton rows={6} cols={6} /></>
|
||||
) : activeScreenId && RDBMS_SCREENS[activeScreenId] ? (
|
||||
) : isRdbms ? (
|
||||
<RecordViewTable
|
||||
key={`rdbms-${activeScreenId}`}
|
||||
viewId={RDBMS_SCREENS[activeScreenId]}
|
||||
onRowClick={RDBMS_DETAIL_SCREENS[activeScreenId] ? (pkValue) => {
|
||||
setDetailInstanceId(pkValue);
|
||||
setDetailViewId(RDBMS_DETAIL_SCREENS[activeScreenId]);
|
||||
navigate(`/screen/${activeScreenId}/detail/${pkValue}`);
|
||||
} : undefined}
|
||||
viewId={activeScreenId!}
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
) : layout.length > 0 ? (
|
||||
<><DashboardStats key={`stats-${activeScreenId}-${refreshKey}`} /><ScreenRenderer key={`screen-${activeScreenId}-${refreshKey}`} layout={layout} onRowClick={handleRowClick} onRefresh={() => { setRefreshKey((k) => k + 1); setTimeout(() => setRefreshKey((k) => k + 1), 2500); }} /></>
|
||||
) : screenQuery.isPending ? (
|
||||
<>
|
||||
<StatsPlaceholder />
|
||||
<TableSkeleton rows={6} cols={6} />
|
||||
</>
|
||||
) : screenQuery.data && screenQuery.data.length > 0 ? (
|
||||
<>
|
||||
<DashboardStats />
|
||||
<Suspense fallback={<ChartsPlaceholder />}>
|
||||
<DashboardCharts />
|
||||
</Suspense>
|
||||
<ScreenRenderer
|
||||
key={`screen-${activeScreenId}`}
|
||||
layout={screenQuery.data}
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-20 text-sm text-slate-400 dark:text-zinc-600">Select a screen from the navigation</div>
|
||||
<div className="py-20 text-center text-base text-muted-foreground">
|
||||
Select a screen from the navigation.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{formModal && <FormModal activityId={formModal.activityId} instanceId={formModal.instanceId} title={formModal.title} onClose={() => setFormModal(null)} onSuccess={handleFormSuccess} />}
|
||||
<CommandPalette
|
||||
open={commandOpen}
|
||||
onOpenChange={setCommandOpen}
|
||||
onNavigate={handleNavigate}
|
||||
/>
|
||||
|
||||
{formModal && (
|
||||
<FormModal
|
||||
activityId={formModal.activityId}
|
||||
instanceId={formModal.instanceId}
|
||||
title={formModal.title}
|
||||
onClose={() => setFormModal(null)}
|
||||
onSuccess={() => {
|
||||
setFormModal(null);
|
||||
instanceQuery.refetch();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function fmtAct(id: string): string { return id.replace(/^p2p-act-/, "").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()); }
|
||||
function StatsPlaceholder() {
|
||||
return (
|
||||
<div className="mb-3 grid grid-cols-2 gap-2.5 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-2.5 rounded-xl border border-border bg-card px-3.5 py-3.5"
|
||||
>
|
||||
<Skeleton className="size-9 rounded-lg" />
|
||||
<div className="flex-1">
|
||||
<Skeleton className="h-2.5 w-20" />
|
||||
<Skeleton className="mt-1.5 h-5 w-12" />
|
||||
<Skeleton className="mt-1.5 h-2.5 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Same height as the real charts row, so the lazy chunk arriving doesn't shove
|
||||
* the table down the page. Kept local rather than imported from
|
||||
* DashboardCharts, which would pull recharts back into the main bundle.
|
||||
*/
|
||||
function ChartsPlaceholder() {
|
||||
return (
|
||||
<div className="mb-3 grid gap-3 lg:grid-cols-2">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="rounded-xl border border-border bg-card p-4">
|
||||
<Skeleton className="h-3.5 w-28" />
|
||||
<Skeleton className="mt-1.5 h-2.5 w-40" />
|
||||
<Skeleton className="mt-4 h-[190px] w-full rounded-lg" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
153
src/components/CommandPalette.tsx
Normal file
153
src/components/CommandPalette.tsx
Normal file
@ -0,0 +1,153 @@
|
||||
import { useEffect } from "react";
|
||||
import { useQueryStates } from "nuqs";
|
||||
import { FileText, ListFilter, Moon, Search, Sun, X } from "lucide-react";
|
||||
import {
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
CommandShortcut,
|
||||
} from "@/components/ui/command";
|
||||
import { useTheme } from "@/hooks/ThemeContext";
|
||||
import { useHeaderConfig } from "@/hooks/useHeaderConfig";
|
||||
import { tableParams, tableParamsOptions } from "@/lib/tableParams";
|
||||
import { WORKFLOW_STATES } from "@/lib/workflow";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onNavigate: (screenUuid: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* ⌘K palette — jump between screens and apply status filters without leaving
|
||||
* the keyboard. This is a queue-triage app; reaching for the mouse to change a
|
||||
* filter is the slow path.
|
||||
*/
|
||||
export default function CommandPalette({ open, onOpenChange, onNavigate }: Props) {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const { navItems } = useHeaderConfig();
|
||||
const [params, setParams] = useQueryStates(tableParams, tableParamsOptions);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
onOpenChange(!open);
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [open, onOpenChange]);
|
||||
|
||||
const run = (fn: () => void) => {
|
||||
fn();
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const filtersActive = params.status.length > 0 || !!params.q;
|
||||
|
||||
return (
|
||||
<CommandDialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title="Command palette"
|
||||
description="Jump to a screen or filter the queue"
|
||||
>
|
||||
<CommandInput placeholder="Jump to a screen, or filter by status…" />
|
||||
<CommandList>
|
||||
<CommandEmpty>No matches.</CommandEmpty>
|
||||
|
||||
{navItems.length > 0 && (
|
||||
<CommandGroup heading="Screens">
|
||||
{navItems.map((item) => (
|
||||
<CommandItem
|
||||
key={item.id}
|
||||
value={`screen ${item.label}`}
|
||||
onSelect={() => run(() => onNavigate(item.screen_uuid))}
|
||||
>
|
||||
<FileText className="size-3.5" aria-hidden />
|
||||
{item.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
<CommandSeparator />
|
||||
|
||||
<CommandGroup heading="Filter by status">
|
||||
{WORKFLOW_STATES.map((s) => {
|
||||
const selected = params.status.includes(s.name);
|
||||
return (
|
||||
<CommandItem
|
||||
key={s.key}
|
||||
value={`filter ${s.label}`}
|
||||
onSelect={() =>
|
||||
run(() =>
|
||||
setParams({
|
||||
status: selected
|
||||
? params.status.filter((x) => x !== s.name)
|
||||
: [...params.status, s.name],
|
||||
page: 1,
|
||||
}),
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className={cn("size-2 shrink-0 rounded-full", s.tone.solid)} aria-hidden />
|
||||
{s.label}
|
||||
{selected && <CommandShortcut>active</CommandShortcut>}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
{filtersActive && (
|
||||
<CommandItem
|
||||
value="clear filters"
|
||||
onSelect={() => run(() => setParams({ status: [], q: "", page: 1 }))}
|
||||
>
|
||||
<X className="size-3.5" aria-hidden />
|
||||
Clear all filters
|
||||
</CommandItem>
|
||||
)}
|
||||
</CommandGroup>
|
||||
|
||||
<CommandSeparator />
|
||||
|
||||
<CommandGroup heading="Actions">
|
||||
<CommandItem
|
||||
value="focus search"
|
||||
onSelect={() =>
|
||||
run(() => {
|
||||
// Defer so the dialog has released focus first.
|
||||
requestAnimationFrame(() => {
|
||||
document
|
||||
.querySelector<HTMLInputElement>('input[aria-label="Search records"]')
|
||||
?.focus();
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<Search className="size-3.5" aria-hidden />
|
||||
Search records
|
||||
<CommandShortcut>/</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem value="toggle theme" onSelect={() => run(toggleTheme)}>
|
||||
{theme === "dark" ? (
|
||||
<Sun className="size-3.5" aria-hidden />
|
||||
) : (
|
||||
<Moon className="size-3.5" aria-hidden />
|
||||
)}
|
||||
Switch to {theme === "dark" ? "light" : "dark"} mode
|
||||
</CommandItem>
|
||||
<CommandItem value="filters help" disabled>
|
||||
<ListFilter className="size-3.5" aria-hidden />
|
||||
Tip: tiles on the dashboard also filter the queue
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
);
|
||||
}
|
||||
314
src/components/DashboardCharts.tsx
Normal file
314
src/components/DashboardCharts.tsx
Normal file
@ -0,0 +1,314 @@
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
Cell,
|
||||
LabelList,
|
||||
Pie,
|
||||
PieChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip as RTooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { useQueryStates } from "nuqs";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { tableParams, tableParamsOptions } from "@/lib/tableParams";
|
||||
import { useInvoiceAnalytics, formatCurrency } from "@/hooks/useInvoiceAnalytics";
|
||||
import { CATEGORY_COLORS } from "@/lib/palette";
|
||||
|
||||
const CHART_H = 190;
|
||||
|
||||
/**
|
||||
* Aging ramp: fresh buckets in the calm end of the palette, overdue ones in
|
||||
* warning hues — the chart says "chase these" without a legend.
|
||||
*/
|
||||
const AGING_COLORS = [
|
||||
"var(--chart-5)",
|
||||
"var(--chart-4)",
|
||||
"var(--chart-1)",
|
||||
"var(--state-clarification)",
|
||||
"var(--state-rejected)",
|
||||
];
|
||||
|
||||
/**
|
||||
* Tooltip styled off the theme tokens rather than recharts' defaults, which are
|
||||
* hard-coded light and unreadable in dark mode.
|
||||
*/
|
||||
function ChartTooltip({ active, payload, label, valueFormat }: any) {
|
||||
if (!active || !payload?.length) return null;
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-popover px-3 py-2 text-xs shadow-lg">
|
||||
{label && <div className="mb-1 font-semibold text-popover-foreground">{label}</div>}
|
||||
{payload.map((p: any) => (
|
||||
<div key={p.name} className="flex items-center gap-2 text-muted-foreground">
|
||||
<span
|
||||
className="size-2 shrink-0 rounded-full"
|
||||
style={{ background: p.payload?.color ?? p.color ?? p.fill }}
|
||||
/>
|
||||
<span className="text-popover-foreground">
|
||||
{valueFormat ? valueFormat(p.value, p.payload) : p.value}
|
||||
</span>
|
||||
{p.payload?.label && <span>· {p.payload.label}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Panel({
|
||||
title,
|
||||
subtitle,
|
||||
badge,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
/** Headline figure for the panel, right-aligned against the title. */
|
||||
badge?: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-xl border border-border bg-card p-4 transition-colors hover:border-border/80",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="mb-3 flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-sm font-semibold text-foreground">{title}</h3>
|
||||
{subtitle && <p className="mt-0.5 text-2xs text-muted-foreground">{subtitle}</p>}
|
||||
</div>
|
||||
{badge && (
|
||||
<span className="shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-2xs font-semibold tabular-nums text-muted-foreground">
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const AXIS_TICK = { fontSize: 10, fill: "var(--muted-foreground)" } as const;
|
||||
|
||||
export default function DashboardCharts() {
|
||||
const { data, isPending, isError } = useInvoiceAnalytics();
|
||||
const [, setParams] = useQueryStates(tableParams, tableParamsOptions);
|
||||
|
||||
if (isError) return null;
|
||||
if (isPending) return <ChartsSkeleton />;
|
||||
if (!data) return null;
|
||||
|
||||
const hasAging = data.aging.some((b) => b.count > 0);
|
||||
const hasMix = data.byState.length > 0;
|
||||
const hasVendors = data.topVendors.length > 0;
|
||||
if (!hasAging && !hasMix && !hasVendors) return null;
|
||||
|
||||
const openTotal = data.aging.reduce((n, b) => n + b.count, 0);
|
||||
const overdue = data.aging.filter((b) => b.overdue).reduce((n, b) => n + b.count, 0);
|
||||
const agingData = data.aging.map((b, i) => ({ ...b, color: AGING_COLORS[i] }));
|
||||
|
||||
return (
|
||||
<div className="mb-3 grid animate-fade-in-up gap-3 lg:grid-cols-2">
|
||||
{/* ── Status mix ──────────────────────────────────────────────────── */}
|
||||
{hasMix && (
|
||||
<Panel
|
||||
title="Invoice Pipeline"
|
||||
subtitle="Click a slice or a row to filter the queue"
|
||||
badge={data.capped ? `${data.sampled} sampled` : `${data.total} total`}
|
||||
>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="relative size-[190px] shrink-0">
|
||||
<ResponsiveContainer width="100%" height={CHART_H}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data.byState}
|
||||
dataKey="count"
|
||||
nameKey="label"
|
||||
innerRadius={58}
|
||||
outerRadius={86}
|
||||
paddingAngle={3}
|
||||
cornerRadius={4}
|
||||
strokeWidth={0}
|
||||
onClick={(slice: any) =>
|
||||
setParams({ status: [slice?.payload?.name], page: 1 })
|
||||
}
|
||||
>
|
||||
{data.byState.map((s) => (
|
||||
<Cell key={s.key} fill={s.color} className="cursor-pointer outline-hidden" />
|
||||
))}
|
||||
</Pie>
|
||||
<RTooltip
|
||||
content={
|
||||
<ChartTooltip
|
||||
valueFormat={(v: number, row: any) =>
|
||||
`${v} ${v === 1 ? "invoice" : "invoices"}${
|
||||
row?.amount ? ` · ${formatCurrency(row.amount, true)}` : ""
|
||||
}`
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Centre label — a donut with a hole and nothing in it wastes
|
||||
the most legible spot in the chart. */}
|
||||
<div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span className="text-2xl font-bold tabular-nums leading-none text-foreground">
|
||||
{data.total}
|
||||
</span>
|
||||
<span className="mt-1 text-2xs uppercase tracking-wider text-muted-foreground">
|
||||
invoices
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend doubles as a per-state breakdown with counts and money. */}
|
||||
<ul className="min-w-0 flex-1 space-y-0.5">
|
||||
{data.byState.map((s) => (
|
||||
<li key={s.key}>
|
||||
<button
|
||||
onClick={() => setParams({ status: [s.name], page: 1 })}
|
||||
className="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left transition-colors hover:bg-muted/60"
|
||||
>
|
||||
<span className="size-2.5 shrink-0 rounded-sm" style={{ background: s.color }} />
|
||||
<span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
|
||||
{s.label}
|
||||
</span>
|
||||
<span className="text-xs font-semibold tabular-nums text-foreground">
|
||||
{s.count}
|
||||
</span>
|
||||
{s.amount > 0 && (
|
||||
<span className="w-14 shrink-0 text-right text-2xs tabular-nums text-muted-foreground">
|
||||
{formatCurrency(s.amount, true)}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{/* ── Aging ───────────────────────────────────────────────────────── */}
|
||||
{hasAging && (
|
||||
<Panel
|
||||
title="Open Invoice Aging"
|
||||
subtitle={
|
||||
overdue > 0
|
||||
? `${overdue} of ${openTotal} open past 14 days`
|
||||
: "Open invoices by days since submission"
|
||||
}
|
||||
badge={`${openTotal} open`}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height={CHART_H}>
|
||||
<BarChart data={agingData} margin={{ top: 16, right: 4, bottom: 0, left: -22 }}>
|
||||
<XAxis dataKey="label" tickLine={false} axisLine={false} tick={AXIS_TICK} />
|
||||
<YAxis allowDecimals={false} tickLine={false} axisLine={false} tick={AXIS_TICK} />
|
||||
<RTooltip
|
||||
cursor={{ fill: "var(--accent)", opacity: 0.4 }}
|
||||
content={
|
||||
<ChartTooltip
|
||||
valueFormat={(v: number, row: any) =>
|
||||
`${v} open${row?.amount ? ` · ${formatCurrency(row.amount, true)}` : ""}`
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Bar dataKey="count" radius={[6, 6, 0, 0]} maxBarSize={48}>
|
||||
<LabelList
|
||||
dataKey="count"
|
||||
position="top"
|
||||
fontSize={10}
|
||||
fill="var(--muted-foreground)"
|
||||
formatter={(v: number) => (v > 0 ? v : "")}
|
||||
/>
|
||||
{agingData.map((b) => (
|
||||
<Cell key={b.label} fill={b.color} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{/* ── Top vendors ─────────────────────────────────────────────────── */}
|
||||
{hasVendors && (
|
||||
<Panel
|
||||
title="Vendor Spend"
|
||||
subtitle="Highest billed value across the sampled invoices"
|
||||
badge={`top ${data.topVendors.length}`}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height={CHART_H}>
|
||||
<BarChart
|
||||
data={data.topVendors}
|
||||
margin={{ top: 16, right: 4, bottom: 0, left: -14 }}
|
||||
barCategoryGap="22%"
|
||||
>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tick={AXIS_TICK}
|
||||
interval={0}
|
||||
// Vendor names are long and the panel is half-width — clip to
|
||||
// the first word or two and leave the full name to the tooltip.
|
||||
tickFormatter={(v: string) => (v.length > 12 ? `${v.slice(0, 11)}…` : v)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tick={AXIS_TICK}
|
||||
tickFormatter={(v: number) => formatCurrency(v, true)}
|
||||
/>
|
||||
<RTooltip
|
||||
cursor={{ fill: "var(--accent)", opacity: 0.4 }}
|
||||
content={
|
||||
<ChartTooltip
|
||||
valueFormat={(v: number, row: any) =>
|
||||
`${formatCurrency(v, true)} · ${row?.count} ${
|
||||
row?.count === 1 ? "invoice" : "invoices"
|
||||
}`
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Bar dataKey="amount" radius={[6, 6, 0, 0]} maxBarSize={40}>
|
||||
<LabelList
|
||||
dataKey="amount"
|
||||
position="top"
|
||||
fontSize={10}
|
||||
fill="var(--muted-foreground)"
|
||||
formatter={(v: number) => formatCurrency(v, true)}
|
||||
/>
|
||||
{data.topVendors.map((v, i) => (
|
||||
<Cell key={v.name} fill={CATEGORY_COLORS[i % CATEGORY_COLORS.length]} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Panel>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChartsSkeleton() {
|
||||
return (
|
||||
<div className="mb-3 grid gap-3 lg:grid-cols-2">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="rounded-xl border border-border bg-card p-4">
|
||||
<Skeleton className="h-3.5 w-28" />
|
||||
<Skeleton className="mt-1.5 h-2.5 w-40" />
|
||||
<Skeleton className="mt-4 h-[190px] w-full rounded-lg" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,84 +1,218 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { FileText, AlertCircle, Clock, CheckCircle2 } from "lucide-react";
|
||||
import { getRecordView, getRVScreen } from "../api/viewService";
|
||||
import { StatsSkeleton } from "./Skeleton";
|
||||
import { ALL_INVOICES_RV_SCREEN_UUID, RECORD_VIEW_IDS } from "../config";
|
||||
import { useQueryStates } from "nuqs";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
FileText,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { tableParams, tableParamsOptions } from "@/lib/tableParams";
|
||||
import { useInvoiceAnalytics, formatCurrency, type InvoiceAnalytics } from "@/hooks/useInvoiceAnalytics";
|
||||
import { WORKFLOW_STATES } from "@/lib/workflow";
|
||||
|
||||
const ALL_INVOICES_VIEW = ALL_INVOICES_RV_SCREEN_UUID;
|
||||
interface Tile {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string;
|
||||
/** Secondary line — the money or ratio behind the count. */
|
||||
sub?: string;
|
||||
icon: LucideIcon;
|
||||
/** Tailwind classes for the icon chip. */
|
||||
tone: string;
|
||||
/** State names this tile filters the table down to. Empty = clears filters. */
|
||||
filter: string[];
|
||||
hint: string;
|
||||
/** Fraction of all invoices this tile represents. */
|
||||
share?: number;
|
||||
/** Week-over-week change, as a fraction. */
|
||||
delta?: number | null;
|
||||
}
|
||||
|
||||
interface Stats {
|
||||
total: number;
|
||||
pendingClarification: number;
|
||||
financeReview: number;
|
||||
approved: number;
|
||||
function buildTiles(a: InvoiceAnalytics): Tile[] {
|
||||
const state = (key: string) => WORKFLOW_STATES.find((s) => s.key === key)!;
|
||||
const pct = a.approvalRate === null ? null : Math.round(a.approvalRate * 100);
|
||||
const share = (n: number) => (a.total > 0 ? n / a.total : 0);
|
||||
|
||||
return [
|
||||
{
|
||||
key: "total",
|
||||
label: "Total Invoices",
|
||||
value: String(a.total),
|
||||
sub: a.totalAmount > 0 ? formatCurrency(a.totalAmount, true) + " in value" : undefined,
|
||||
icon: FileText,
|
||||
tone: "bg-primary/10 text-primary",
|
||||
filter: [],
|
||||
hint: "All invoices. Click to clear status filters.",
|
||||
delta: a.momentum.deltaPct,
|
||||
},
|
||||
{
|
||||
key: "clarification",
|
||||
label: "Pending Clarification",
|
||||
value: String(a.counts.clarification),
|
||||
sub: "with departments",
|
||||
icon: AlertCircle,
|
||||
tone: "bg-state-clarification/10 text-state-clarification",
|
||||
filter: [state("clarification").name],
|
||||
hint: "Waiting on a department to answer the AI's question.",
|
||||
share: share(a.counts.clarification),
|
||||
},
|
||||
{
|
||||
key: "review",
|
||||
label: "Finance Review",
|
||||
value: String(a.counts.review),
|
||||
sub: "awaiting decision",
|
||||
icon: Clock,
|
||||
tone: "bg-state-review/10 text-state-review",
|
||||
filter: [state("review").name],
|
||||
hint: "Queued for a finance reviewer to approve, reject or hold.",
|
||||
share: share(a.counts.review),
|
||||
},
|
||||
{
|
||||
key: "approved",
|
||||
label: "Approved",
|
||||
value: String(a.counts.approved),
|
||||
sub:
|
||||
pct !== null
|
||||
? `${pct}% approval rate`
|
||||
: a.approvedAmount > 0
|
||||
? formatCurrency(a.approvedAmount, true)
|
||||
: undefined,
|
||||
icon: CheckCircle2,
|
||||
tone: "bg-state-approved/10 text-state-approved",
|
||||
filter: [state("approved").name],
|
||||
hint: "Approved for payment.",
|
||||
share: share(a.counts.approved),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export default function DashboardStats() {
|
||||
const [stats, setStats] = useState<Stats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { data, isPending, isError } = useInvoiceAnalytics();
|
||||
const [params, setParams] = useQueryStates(tableParams, tableParamsOptions);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const rvScreen = await getRVScreen(ALL_INVOICES_VIEW);
|
||||
const id = rvScreen.rv_template_uid;
|
||||
const rvUid = RECORD_VIEW_IDS.ALL_INVOICES;
|
||||
if (isPending) return <StatsSkeletonRow />;
|
||||
// A failed dashboard shouldn't take the table down with it.
|
||||
if (isError || !data) return null;
|
||||
|
||||
// Step 1: get exact total from pagination
|
||||
const countRes = await getRecordView(id, rvUid, { page: 1, limit: 1 });
|
||||
const total = countRes.pagination?.total_count ?? 0;
|
||||
const tiles = buildTiles(data);
|
||||
|
||||
let pendingClarification = 0, financeReview = 0, approved = 0;
|
||||
|
||||
if (total > 0) {
|
||||
// Step 2: fetch all rows in one call using exact total as limit
|
||||
const allRes = await getRecordView(id, rvUid, { page: 1, limit: total });
|
||||
for (const row of allRes.data ?? []) {
|
||||
const state = String(row.current_state_name ?? "");
|
||||
if (state === "Awaiting Clarification") pendingClarification++;
|
||||
else if (state === "Finance Review") financeReview++;
|
||||
else if (state === "Approved") approved++;
|
||||
}
|
||||
}
|
||||
|
||||
setStats({ total, pendingClarification, financeReview, approved });
|
||||
} catch {
|
||||
setStats({ total: 0, pendingClarification: 0, financeReview: 0, approved: 0 });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
if (loading) return <StatsSkeleton />;
|
||||
if (!stats) return null;
|
||||
|
||||
const cards = [
|
||||
{ label: "Total Invoices", value: stats.total, icon: FileText, color: "text-slate-500 dark:text-zinc-400", bg: "bg-slate-100 dark:bg-zinc-800" },
|
||||
{ label: "Pending Clarification", value: stats.pendingClarification, icon: AlertCircle, color: "text-amber-600 dark:text-amber-400", bg: "bg-amber-50 dark:bg-amber-950/40" },
|
||||
{ label: "Finance Review", value: stats.financeReview, icon: Clock, color: "text-indigo-600 dark:text-indigo-400", bg: "bg-indigo-50 dark:bg-indigo-950/40" },
|
||||
{ label: "Approved", value: stats.approved, icon: CheckCircle2, color: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-50 dark:bg-emerald-950/40" },
|
||||
];
|
||||
const apply = (filter: string[]) => {
|
||||
const same =
|
||||
filter.length === params.status.length && filter.every((f) => params.status.includes(f));
|
||||
// Clicking the active tile again clears it, so tiles behave like toggles.
|
||||
setParams({ status: same ? [] : filter, page: 1 });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
|
||||
{cards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
<div className="mb-3 grid grid-cols-2 gap-2.5 lg:grid-cols-4">
|
||||
{tiles.map((tile, i) => {
|
||||
const Icon = tile.icon;
|
||||
const active =
|
||||
tile.filter.length > 0 &&
|
||||
tile.filter.length === params.status.length &&
|
||||
tile.filter.every((f) => params.status.includes(f));
|
||||
const isClear = tile.filter.length === 0 && params.status.length === 0;
|
||||
const on = active || isClear;
|
||||
|
||||
return (
|
||||
<div key={card.label} className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 px-5 py-4 flex items-center gap-4">
|
||||
<div className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${card.bg}`}>
|
||||
<Icon size={16} className={card.color} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[22px] font-bold tabular-nums text-slate-900 dark:text-zinc-50 leading-none mb-0.5">
|
||||
{card.value}
|
||||
</div>
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500 truncate">{card.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tooltip key={tile.key}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => apply(tile.filter)}
|
||||
aria-pressed={active}
|
||||
style={{ animationDelay: `${i * 40}ms` }}
|
||||
className={cn(
|
||||
"group flex animate-fade-in-up items-start gap-2.5 rounded-xl border",
|
||||
"bg-card px-3.5 py-3.5 text-left",
|
||||
"transition-all duration-150 hover:-translate-y-0.5 hover:shadow-md",
|
||||
on
|
||||
? "border-primary/50 ring-1 ring-primary/20"
|
||||
: "border-border hover:border-primary/30",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex size-9 shrink-0 items-center justify-center rounded-lg",
|
||||
tile.tone,
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" aria-hidden />
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-2xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{tile.label}
|
||||
</div>
|
||||
<div className="mt-0.5 flex items-baseline gap-1.5">
|
||||
<span className="text-xl font-bold tabular-nums leading-none tracking-tight text-foreground">
|
||||
{tile.value}
|
||||
</span>
|
||||
{tile.delta != null ? (
|
||||
<DeltaChip delta={tile.delta} />
|
||||
) : tile.share !== undefined ? (
|
||||
<span className="text-2xs font-medium tabular-nums text-muted-foreground">
|
||||
{Math.round(tile.share * 100)}%
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
{tile.sub && (
|
||||
<div className="mt-1 truncate text-2xs text-muted-foreground/80">
|
||||
{tile.sub}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{tile.hint}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeltaChip({ delta }: { delta: number }) {
|
||||
const up = delta >= 0;
|
||||
const Icon = up ? TrendingUp : TrendingDown;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex shrink-0 items-center gap-0.5 rounded px-1 py-px text-2xs font-semibold tabular-nums",
|
||||
up ? "bg-state-approved/10 text-state-approved" : "bg-state-clarification/10 text-state-clarification",
|
||||
)}
|
||||
title="Submissions this week vs last week"
|
||||
>
|
||||
<Icon className="size-2.5" aria-hidden />
|
||||
{up ? "+" : ""}
|
||||
{Math.round(delta * 100)}%
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSkeletonRow() {
|
||||
return (
|
||||
<div className="mb-3 grid grid-cols-2 gap-2.5 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-2.5 rounded-xl border border-border bg-card px-3.5 py-3.5"
|
||||
>
|
||||
<Skeleton className="size-9 rounded-lg" />
|
||||
<div className="flex-1">
|
||||
<Skeleton className="h-2.5 w-20" />
|
||||
<Skeleton className="mt-1.5 h-5 w-12" />
|
||||
<Skeleton className="mt-1.5 h-2.5 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,251 +1,374 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
LogOut, FileText, HelpCircle, Landmark, List,
|
||||
Settings, PanelLeftClose, PanelLeftOpen, Sun, Moon, ShoppingCart,
|
||||
FileText,
|
||||
HelpCircle,
|
||||
Landmark,
|
||||
List,
|
||||
LogOut,
|
||||
Moon,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
Settings,
|
||||
ShoppingCart,
|
||||
Sun,
|
||||
} from "lucide-react";
|
||||
import { getHeaderConfig, type HeaderConfig, type NavItem } from "../api/viewService";
|
||||
import { useAuthContext } from "../hooks/AuthContext";
|
||||
import { useTheme } from "../hooks/ThemeContext";
|
||||
import { RDBMS_RV_SCREEN_UUID } from "../config";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useAuthContext } from "@/hooks/AuthContext";
|
||||
import { useTheme } from "@/hooks/ThemeContext";
|
||||
import { useHeaderConfig } from "@/hooks/useHeaderConfig";
|
||||
import { RDBMS_RV_SCREEN_UUID } from "@/config";
|
||||
import type { NavItem } from "@/api/viewService";
|
||||
|
||||
const ICON_MAP: Record<string, React.ReactNode> = {
|
||||
receipt_long: <FileText size={16} />,
|
||||
help_outline: <HelpCircle size={16} />,
|
||||
account_balance: <Landmark size={16} />,
|
||||
list_alt: <List size={16} />,
|
||||
inventory_2: <FileText size={16} />,
|
||||
question_mark: <HelpCircle size={16} />,
|
||||
list: <List size={16} />,
|
||||
const ICON_MAP: Record<string, typeof FileText> = {
|
||||
receipt_long: FileText,
|
||||
help_outline: HelpCircle,
|
||||
account_balance: Landmark,
|
||||
list_alt: List,
|
||||
inventory_2: FileText,
|
||||
question_mark: HelpCircle,
|
||||
list: List,
|
||||
};
|
||||
|
||||
const EXTRA_NAV_ITEMS = [
|
||||
{ id: "vendor-data", screen_uuid: RDBMS_RV_SCREEN_UUID, label: "Purchase Orders", icon: <ShoppingCart size={16} /> },
|
||||
/** Screens not present in the served nav config. */
|
||||
const EXTRA_NAV: Array<{ id: string; screen_uuid: string; label: string; icon: typeof FileText }> = [
|
||||
{
|
||||
id: "vendor-data",
|
||||
screen_uuid: RDBMS_RV_SCREEN_UUID,
|
||||
label: "Purchase Orders",
|
||||
icon: ShoppingCart,
|
||||
},
|
||||
];
|
||||
|
||||
interface Props {
|
||||
activeScreenId: string | null;
|
||||
onNavigate: (screenUuid: string) => void;
|
||||
onSidebarChange?: (open: boolean) => void;
|
||||
sidebar: {
|
||||
open: boolean;
|
||||
toggle: () => void;
|
||||
isMobile: boolean;
|
||||
mobileOpen: boolean;
|
||||
setMobileOpen: (v: boolean) => void;
|
||||
};
|
||||
}
|
||||
|
||||
export default function DynamicHeader({ activeScreenId, onNavigate, onSidebarChange }: Props) {
|
||||
export default function DynamicHeader({
|
||||
activeScreenId,
|
||||
onNavigate,
|
||||
sidebar,
|
||||
}: Props) {
|
||||
const { user, logout } = useAuthContext();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [config, setConfig] = useState<HeaderConfig | null>(null);
|
||||
const [profileOpen, setProfileOpen] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const { navItems, isPending } = useHeaderConfig();
|
||||
|
||||
useEffect(() => {
|
||||
getHeaderConfig("desktop").then(setConfig).catch(console.error);
|
||||
}, []);
|
||||
|
||||
const navItems = config?.components?.nav?.items ?? [];
|
||||
const handleLogout = () => { logout(); navigate("/login"); };
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
const initials = (user?.name || "U")
|
||||
.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
|
||||
const roleName = user?.roles?.[0]
|
||||
?.replace(/^p2p_/, "").replace(/_/g, " ") ?? "";
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")
|
||||
.slice(0, 2)
|
||||
.toUpperCase();
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const next = !sidebarOpen;
|
||||
setSidebarOpen(next);
|
||||
onSidebarChange?.(next);
|
||||
};
|
||||
const roleName = user?.roles?.[0]?.replace(/^p2p_/, "").replace(/_/g, " ") ?? "";
|
||||
|
||||
// Collapsed on desktop = icon rail. Previously the sidebar animated to w-0,
|
||||
// which took the entire navigation away instead of condensing it.
|
||||
const railed = !sidebar.open && !sidebar.isMobile;
|
||||
|
||||
const items = [
|
||||
...navItems.map((item: NavItem) => ({
|
||||
id: item.id,
|
||||
screen_uuid: item.screen_uuid,
|
||||
label: item.label,
|
||||
Icon: ICON_MAP[item.icon] ?? FileText,
|
||||
})),
|
||||
...EXTRA_NAV.map((e) => ({
|
||||
id: e.id,
|
||||
screen_uuid: e.screen_uuid,
|
||||
label: e.label,
|
||||
Icon: e.icon,
|
||||
})),
|
||||
];
|
||||
|
||||
const nav = (
|
||||
<SidebarBody
|
||||
items={items}
|
||||
isPending={isPending}
|
||||
railed={railed}
|
||||
activeScreenId={activeScreenId}
|
||||
onNavigate={(id) => {
|
||||
onNavigate(id);
|
||||
sidebar.setMobileOpen(false);
|
||||
}}
|
||||
user={{ name: user?.name, roleName, initials }}
|
||||
onLogout={handleLogout}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Top bar ─────────────────────────────────────────────────────── */}
|
||||
<header className="bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md border-b border-slate-200/70 dark:border-zinc-800/70 sticky top-0 z-50 h-14 flex items-center px-4 justify-between">
|
||||
{/* Left */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-slate-700 dark:hover:text-zinc-200 hover:bg-slate-100 dark:hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
{sidebarOpen ? <PanelLeftClose size={17} /> : <PanelLeftOpen size={17} />}
|
||||
</button>
|
||||
{/* ── Top bar ───────────────────────────────────────────────────────── */}
|
||||
{/* Offset past the sidebar so the two read as one chrome: the sidebar
|
||||
runs full height and owns the brand; the bar starts where it ends. */}
|
||||
<header
|
||||
className={cn(
|
||||
"sticky top-0 z-50 flex h-14 items-center justify-between gap-3 border-b border-border bg-background/85 px-3 backdrop-blur-md transition-[margin] duration-200",
|
||||
sidebar.isMobile ? "ml-0" : sidebar.open ? "ml-60" : "ml-14",
|
||||
)}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="size-8" onClick={sidebar.toggle}>
|
||||
{sidebar.open || sidebar.isMobile ? (
|
||||
<PanelLeftClose className="size-4" aria-hidden />
|
||||
) : (
|
||||
<PanelLeftOpen className="size-4" aria-hidden />
|
||||
)}
|
||||
<span className="sr-only">Toggle navigation</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Toggle navigation</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* Logo — unchanged from original */}
|
||||
<img
|
||||
src={import.meta.env.BASE_URL + "zino.svg"}
|
||||
alt="Zino"
|
||||
className="h-5 w-auto"
|
||||
/>
|
||||
{/* On desktop the sidebar carries the identity; repeating the logo
|
||||
here would double it up. */}
|
||||
{sidebar.isMobile && (
|
||||
<img
|
||||
src={import.meta.env.BASE_URL + "zino.svg"}
|
||||
alt="Zino"
|
||||
className="h-5 w-auto dark:brightness-0 dark:invert"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
title={theme === "dark" ? "Switch to light" : "Switch to dark"}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-colors"
|
||||
>
|
||||
{theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
|
||||
</button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="size-8" onClick={toggleTheme}>
|
||||
{theme === "dark" ? (
|
||||
<Sun className="size-4" aria-hidden />
|
||||
) : (
|
||||
<Moon className="size-4" aria-hidden />
|
||||
)}
|
||||
<span className="sr-only">
|
||||
Switch to {theme === "dark" ? "light" : "dark"} theme
|
||||
</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{theme === "dark" ? "Light mode" : "Dark mode"}</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setProfileOpen(!profileOpen)}
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center ring-2 ring-white dark:ring-zinc-900 shadow-sm hover:ring-violet-200 dark:hover:ring-violet-800 transition-all"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #d946ef)" }}
|
||||
>
|
||||
<span className="text-[11px] font-bold text-white leading-none">{initials}</span>
|
||||
</button>
|
||||
|
||||
{profileOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={() => setProfileOpen(false)} />
|
||||
<div className="absolute right-0 top-full mt-2 w-60 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl shadow-slate-900/10 dark:shadow-black/40 border border-slate-200 dark:border-zinc-700/70 overflow-hidden z-50">
|
||||
<div className="px-4 py-3.5 border-b border-slate-100 dark:border-zinc-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #d946ef)" }}>
|
||||
<span className="text-[13px] font-bold text-white leading-none">{initials}</span>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] font-semibold text-slate-900 dark:text-zinc-100 truncate">{user?.name}</div>
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500 truncate">{user?.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
{roleName && (
|
||||
<div className="mt-2.5">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full capitalize"
|
||||
style={{ background: "rgba(124,58,237,0.1)", color: "#7c3aed", border: "1px solid rgba(124,58,237,0.2)" }}>
|
||||
{roleName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="gradient-brand flex size-8 items-center justify-center rounded-full ring-2 ring-background transition-shadow hover:ring-primary/30">
|
||||
<span className="text-xs font-bold leading-none text-white">{initials}</span>
|
||||
<span className="sr-only">Account menu</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-60">
|
||||
<div className="px-2 py-2">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="gradient-brand flex size-9 shrink-0 items-center justify-center rounded-full">
|
||||
<span className="text-sm font-bold text-white">{initials}</span>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<button className="w-full text-left px-4 py-2.5 text-[13px] text-slate-600 dark:text-zinc-300 hover:bg-slate-50 dark:hover:bg-zinc-800 flex items-center gap-2.5 transition-colors">
|
||||
<Settings size={14} className="text-slate-400 dark:text-zinc-500" /> Settings
|
||||
</button>
|
||||
<div className="h-px bg-slate-100 dark:bg-zinc-800 mx-3 my-0.5" />
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full text-left px-4 py-2.5 text-[13px] text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 flex items-center gap-2.5 transition-colors"
|
||||
>
|
||||
<LogOut size={14} /> Sign out
|
||||
</button>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-base font-semibold text-foreground">{user?.name}</p>
|
||||
<p className="truncate text-xs text-muted-foreground">{user?.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{roleName && (
|
||||
<span className="mt-2 inline-block rounded-full border border-primary/25 bg-primary/10 px-2 py-0.5 text-2xs font-semibold uppercase tracking-wider text-primary">
|
||||
{roleName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem disabled>
|
||||
<Settings className="size-3.5" aria-hidden />
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive" onClick={handleLogout}>
|
||||
<LogOut className="size-3.5" aria-hidden />
|
||||
Sign out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Sidebar ─────────────────────────────────────────────────────── */}
|
||||
<aside
|
||||
className={`fixed top-14 left-0 bottom-0 z-40 flex flex-col transition-all duration-200 ${sidebarOpen ? "w-60" : "w-0 overflow-hidden"}`}
|
||||
style={{
|
||||
background: "linear-gradient(180deg, #faf9ff 0%, #f5f3ff 100%)",
|
||||
}}
|
||||
>
|
||||
{/* Dark mode override via class */}
|
||||
<div className="flex flex-col h-full dark:bg-zinc-950 border-r border-violet-100 dark:border-zinc-800/80">
|
||||
|
||||
{/* App identity strip */}
|
||||
<div className="px-5 pt-5 pb-4 border-b border-violet-100/60 dark:border-zinc-800/60">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
<FileText size={13} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[13px] font-bold text-slate-800 dark:text-zinc-100 leading-none">Invoice Portal</div>
|
||||
<div className="text-[10px] text-slate-400 dark:text-zinc-600 mt-0.5">P2P · Procure-to-Pay</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nav section */}
|
||||
<div className="flex-1 overflow-y-auto px-3 py-3">
|
||||
<div className="text-[10px] font-bold text-slate-400 dark:text-zinc-600 uppercase tracking-widest px-2 mb-2">
|
||||
Navigation
|
||||
</div>
|
||||
<nav className="space-y-0.5">
|
||||
{navItems.map((item: NavItem) => {
|
||||
const active = activeScreenId === item.screen_uuid;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onNavigate(item.screen_uuid)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[13px] font-medium transition-all group ${
|
||||
active
|
||||
? "bg-violet-100 dark:bg-violet-950/50 text-violet-700 dark:text-violet-300"
|
||||
: "text-slate-500 dark:text-zinc-400 hover:bg-white dark:hover:bg-zinc-800/70 hover:text-slate-900 dark:hover:text-zinc-100"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`flex items-center justify-center w-7 h-7 rounded-lg shrink-0 transition-colors ${
|
||||
active
|
||||
? "bg-violet-200/70 dark:bg-violet-900/60 text-violet-600 dark:text-violet-400"
|
||||
: "bg-white dark:bg-zinc-800 text-slate-400 dark:text-zinc-500 shadow-sm group-hover:text-violet-600 dark:group-hover:text-violet-400"
|
||||
}`}
|
||||
>
|
||||
{ICON_MAP[item.icon] ?? <FileText size={16} />}
|
||||
</span>
|
||||
<span className="truncate">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{EXTRA_NAV_ITEMS.map((item) => {
|
||||
const active = activeScreenId === item.screen_uuid;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onNavigate(item.screen_uuid)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[13px] font-medium transition-all group ${
|
||||
active
|
||||
? "bg-violet-100 dark:bg-violet-950/50 text-violet-700 dark:text-violet-300"
|
||||
: "text-slate-500 dark:text-zinc-400 hover:bg-white dark:hover:bg-zinc-800/70 hover:text-slate-900 dark:hover:text-zinc-100"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`flex items-center justify-center w-7 h-7 rounded-lg shrink-0 transition-colors ${
|
||||
active
|
||||
? "bg-violet-200/70 dark:bg-violet-900/60 text-violet-600 dark:text-violet-400"
|
||||
: "bg-white dark:bg-zinc-800 text-slate-400 dark:text-zinc-500 shadow-sm group-hover:text-violet-600 dark:group-hover:text-violet-400"
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="truncate">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Bottom — user card */}
|
||||
<div className="px-3 py-3 border-t border-violet-100/60 dark:border-zinc-800/60">
|
||||
<div className="flex items-center gap-2.5 px-2 py-2 rounded-xl hover:bg-white dark:hover:bg-zinc-800/70 transition-colors cursor-pointer group"
|
||||
onClick={handleLogout}
|
||||
title="Sign out"
|
||||
>
|
||||
<div
|
||||
className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 text-[11px] font-bold text-white"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #d946ef)" }}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[12px] font-semibold text-slate-700 dark:text-zinc-200 truncate leading-none">{user?.name}</div>
|
||||
<div className="text-[10px] text-slate-400 dark:text-zinc-500 truncate mt-0.5 capitalize">{roleName}</div>
|
||||
</div>
|
||||
<LogOut size={13} className="text-slate-300 dark:text-zinc-600 group-hover:text-red-400 transition-colors shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{/* ── Sidebar ───────────────────────────────────────────────────────── */}
|
||||
{sidebar.isMobile ? (
|
||||
<Sheet open={sidebar.mobileOpen} onOpenChange={sidebar.setMobileOpen}>
|
||||
<SheetContent side="left" className="w-64 bg-sidebar p-0">
|
||||
<SheetTitle className="sr-only">Navigation</SheetTitle>
|
||||
{nav}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
) : (
|
||||
<aside
|
||||
className={cn(
|
||||
"fixed inset-y-0 left-0 z-40 flex flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-200",
|
||||
railed ? "w-14" : "w-60",
|
||||
)}
|
||||
>
|
||||
{nav}
|
||||
</aside>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface SidebarBodyProps {
|
||||
items: Array<{ id: string; screen_uuid: string; label: string; Icon: typeof FileText }>;
|
||||
isPending: boolean;
|
||||
railed: boolean;
|
||||
activeScreenId: string | null;
|
||||
onNavigate: (screenUuid: string) => void;
|
||||
user: { name?: string; roleName: string; initials: string };
|
||||
onLogout: () => void;
|
||||
}
|
||||
|
||||
function SidebarBody({
|
||||
items,
|
||||
isPending,
|
||||
railed,
|
||||
activeScreenId,
|
||||
onNavigate,
|
||||
user,
|
||||
onLogout,
|
||||
}: SidebarBodyProps) {
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
{/* App identity — h-14 with a bottom border so it lines up exactly with
|
||||
the top bar and the two read as one continuous frame. */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-14 shrink-0 flex-col items-center justify-center gap-1 border-b border-sidebar-border px-3",
|
||||
railed && "px-0",
|
||||
)}
|
||||
>
|
||||
{/* 43×20 wordmark — fits the 56px rail as-is, so it needs no separate
|
||||
collapsed mark. Inverted in dark mode like the top-bar copy. */}
|
||||
<img
|
||||
src={import.meta.env.BASE_URL + "zino.svg"}
|
||||
alt="Zino"
|
||||
className="h-5 w-auto shrink-0 dark:brightness-0 dark:invert"
|
||||
/>
|
||||
{!railed && (
|
||||
<span className="truncate text-2xs font-medium tracking-wide text-muted-foreground">
|
||||
Procure to Pay
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<nav
|
||||
aria-label="Screens"
|
||||
className="scrollbar-thin min-h-0 flex-1 overflow-y-auto px-2.5 py-4"
|
||||
>
|
||||
{!railed && (
|
||||
<p className="mb-3 px-2 text-2xs font-bold uppercase tracking-widest text-muted-foreground">
|
||||
Navigation
|
||||
</p>
|
||||
)}
|
||||
|
||||
{isPending ? (
|
||||
<div className="space-y-1">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Skeleton key={i} className={cn("h-10", railed ? "mx-auto w-10" : "w-full")} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{items.map(({ id, screen_uuid, label, Icon }) => {
|
||||
const active = activeScreenId === screen_uuid;
|
||||
const button = (
|
||||
<button
|
||||
onClick={() => onNavigate(screen_uuid)}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 rounded-lg px-3 py-3 text-base font-medium transition-colors",
|
||||
railed && "justify-center px-0",
|
||||
active
|
||||
? "bg-primary text-primary-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4 shrink-0" aria-hidden />
|
||||
{!railed && <span className="truncate">{label}</span>}
|
||||
{railed && <span className="sr-only">{label}</span>}
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<li key={id}>
|
||||
{railed ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent side="right">{label}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
button
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* User card */}
|
||||
<Separator className="bg-sidebar-border" />
|
||||
<div className="p-2">
|
||||
<button
|
||||
onClick={onLogout}
|
||||
className={cn(
|
||||
"group flex w-full items-center gap-2.5 rounded-lg px-2 py-2 transition-colors hover:bg-sidebar-accent/50",
|
||||
railed && "justify-center px-0",
|
||||
)}
|
||||
>
|
||||
<div className="gradient-brand flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white">
|
||||
{user.initials}
|
||||
</div>
|
||||
{!railed && (
|
||||
<>
|
||||
<div className="min-w-0 flex-1 text-left">
|
||||
<p className="truncate text-sm font-semibold leading-none text-sidebar-foreground">
|
||||
{user.name}
|
||||
</p>
|
||||
<p className="mt-0.5 truncate text-2xs capitalize text-muted-foreground">
|
||||
{user.roleName}
|
||||
</p>
|
||||
</div>
|
||||
<LogOut
|
||||
className="size-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-destructive"
|
||||
aria-hidden
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<span className="sr-only">Sign out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,20 +1,54 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { X, ArrowRight, AlertCircle, CheckCircle2, ChevronDown } from "lucide-react";
|
||||
import { getFormScreen, startWorkflow, performActivity, uploadFieldFile } from "../api/viewService";
|
||||
import type { FormScreenField, FieldFileContext } from "../api/viewService";
|
||||
import { WORKFLOW_ID } from "../config";
|
||||
import { Skeleton } from "./Skeleton";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { AlertCircle, ArrowRight, CheckCircle2, Loader2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
getFormScreen,
|
||||
performActivity,
|
||||
startWorkflow,
|
||||
uploadFieldFile,
|
||||
type FieldFileContext,
|
||||
type FormScreenField,
|
||||
} from "@/api/viewService";
|
||||
import { WORKFLOW_ID } from "@/config";
|
||||
import OcrUploadField, { resolveOcrConfig } from "./OcrUploadField";
|
||||
|
||||
type FormField = FormScreenField;
|
||||
interface GridItem { i: string; x: number; y: number; w: number; h: number; }
|
||||
interface GridItem {
|
||||
i: string;
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
// Field data types whose value is a file, not a scalar. They skip the
|
||||
// string-based validation and number coercion paths, and their File is uploaded
|
||||
// via /upload before submit so instance data references the blob by metadata.
|
||||
// Field types whose value is a File rather than a scalar. They skip string
|
||||
// validation and number coercion, and their File is uploaded via /upload before
|
||||
// submit so instance data references the blob by metadata.
|
||||
const MEDIA_TYPES = new Set(["ocr", "file", "image"]);
|
||||
|
||||
const isEmpty = (v: any) =>
|
||||
const isEmpty = (v: unknown) =>
|
||||
v == null ||
|
||||
(typeof v === "string" && v.trim() === "") ||
|
||||
(Array.isArray(v) && v.length === 0);
|
||||
@ -28,71 +62,79 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function FormModal({ activityId, instanceId, title, onClose, onSuccess }: Props) {
|
||||
const [fields, setFields] = useState<FormField[]>([]);
|
||||
const [gridConfig, setGridConfig] = useState<GridItem[]>([]);
|
||||
const [formTitle, setFormTitle] = useState(title || "");
|
||||
// Values are strings for scalar fields and a File for media fields.
|
||||
const [formData, setFormData] = useState<Record<string, any>>({});
|
||||
// Identifiers /upload + /ocr-extract need to resolve a field's deployed
|
||||
// config and RBAC server-side. The form screen echoes them; WORKFLOW_ID is
|
||||
// the fallback for older view-service builds that don't.
|
||||
const [wfUuid, setWfUuid] = useState<string>(WORKFLOW_ID);
|
||||
const [versionUuid, setVersionUuid] = useState<string | undefined>(undefined);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [touched, setTouched] = useState<Set<string>>(new Set());
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [succeeded, setSucceeded] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Entrance animation
|
||||
useEffect(() => { requestAnimationFrame(() => setVisible(true)); }, []);
|
||||
const { data, isPending } = useQuery({
|
||||
queryKey: ["form-screen", activityId, instanceId],
|
||||
queryFn: () => getFormScreen(activityId, instanceId) as Promise<any>,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getFormScreen(activityId, instanceId)
|
||||
.then((res: any) => {
|
||||
const f: FormField[] = res.fields ?? res.form_json?.fields ?? [];
|
||||
setFields(f);
|
||||
setGridConfig(res.grid_config ?? []);
|
||||
setFormTitle(res.activity_name || title || "Form");
|
||||
if (res.workflow_uuid) setWfUuid(res.workflow_uuid);
|
||||
setVersionUuid(res.version_uuid || undefined);
|
||||
const pre: Record<string, any> = {};
|
||||
f.forEach((field) => {
|
||||
// Media prefills are already-uploaded metadata arrays, not strings.
|
||||
if (field.value == null) return;
|
||||
pre[field.id] = MEDIA_TYPES.has(field.data_type) ? field.value : String(field.value);
|
||||
});
|
||||
setFormData(pre);
|
||||
})
|
||||
.catch((err: any) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [activityId, instanceId, title]);
|
||||
const fields: FormField[] = data?.fields ?? data?.form_json?.fields ?? [];
|
||||
const gridConfig: GridItem[] = data?.grid_config ?? [];
|
||||
const formTitle = data?.activity_name || title || "Form";
|
||||
|
||||
const animateClose = (callback: () => void) => {
|
||||
setVisible(false);
|
||||
setTimeout(callback, 200);
|
||||
};
|
||||
|
||||
// Base context for the field-scoped file endpoints; each call adds its fieldId.
|
||||
// /upload and /ocr-extract resolve the field's deployed config and RBAC from
|
||||
// these identifiers. The form screen echoes them; WORKFLOW_ID is the fallback
|
||||
// for older view-service builds that don't.
|
||||
const fileCtx: Omit<FieldFileContext, "fieldId"> = {
|
||||
workflowUuid: wfUuid,
|
||||
workflowUuid: data?.workflow_uuid || WORKFLOW_ID,
|
||||
activityId,
|
||||
versionUuid,
|
||||
versionUuid: data?.version_uuid || undefined,
|
||||
instanceId,
|
||||
};
|
||||
|
||||
// Write an OCR result into the fields ocr_config.field_mappings points at.
|
||||
// Returns the number of fields that actually received a value, which the OCR
|
||||
// field reports back to the user ("Filled 9 fields…").
|
||||
// Seed prefills once the schema arrives.
|
||||
useEffect(() => {
|
||||
if (!fields.length) return;
|
||||
const pre: Record<string, any> = {};
|
||||
for (const f of fields) {
|
||||
if (f.value == null) continue;
|
||||
// Media prefills are already-uploaded metadata arrays, not strings.
|
||||
pre[f.id] = MEDIA_TYPES.has(f.data_type) ? f.value : String(f.value);
|
||||
}
|
||||
setFormData(pre);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [data]);
|
||||
|
||||
/** Rows derived from the studio grid layout, so field order matches design. */
|
||||
const rows = useMemo(() => {
|
||||
const sorted = [...fields].sort((a, b) => {
|
||||
const ga = gridConfig.find((g) => g.i === a.uid);
|
||||
const gb = gridConfig.find((g) => g.i === b.uid);
|
||||
if (!ga || !gb) return 0;
|
||||
return ga.y !== gb.y ? ga.y - gb.y : ga.x - gb.x;
|
||||
});
|
||||
const out: FormField[][] = [];
|
||||
let currentY = -1;
|
||||
for (const f of sorted) {
|
||||
const y = gridConfig.find((g) => g.i === f.uid)?.y ?? out.length;
|
||||
if (y !== currentY) {
|
||||
out.push([]);
|
||||
currentY = y;
|
||||
}
|
||||
out[out.length - 1].push(f);
|
||||
}
|
||||
return out;
|
||||
}, [fields, gridConfig]);
|
||||
|
||||
const setValue = (id: string, v: unknown) => {
|
||||
setFormData((p) => ({ ...p, [id]: v }));
|
||||
setTouched((t) => new Set(t).add(id));
|
||||
if (error) setError(null);
|
||||
};
|
||||
|
||||
/** Write an OCR result into the fields ocr_config.field_mappings points at. */
|
||||
const applyExtraction = (ocrField: FormField, extracted: Record<string, unknown>): number => {
|
||||
const mappings = resolveOcrConfig(ocrField).field_mappings ?? [];
|
||||
const next: Record<string, any> = {};
|
||||
for (const m of mappings) {
|
||||
if (!m?.extraction_key || !m?.target_field) continue;
|
||||
const raw = extracted[m.extraction_key];
|
||||
if (raw == null || raw === "") continue; // key absent, or the model found nothing
|
||||
if (raw == null || raw === "") continue; // key absent, or model found nothing
|
||||
const target = fields.find((f) => f.id === m.target_field);
|
||||
const coerced = coerceExtracted(raw, target?.data_type);
|
||||
if (coerced === "") continue;
|
||||
@ -102,12 +144,18 @@ export default function FormModal({ activityId, instanceId, title, onClose, onSu
|
||||
if (filled.length > 0) {
|
||||
setFormData((p) => ({ ...p, ...next }));
|
||||
// Mark them touched so a value the model got wrong still shows validation.
|
||||
setTouched((t) => { const s = new Set(t); filled.forEach((k) => s.add(k)); return s; });
|
||||
setTouched((t) => {
|
||||
const s = new Set(t);
|
||||
filled.forEach((k) => s.add(k));
|
||||
return s;
|
||||
});
|
||||
setError(null);
|
||||
}
|
||||
return filled.length;
|
||||
};
|
||||
|
||||
const isMissing = (f: FormField) => f.mandatory && touched.has(f.id) && isEmpty(formData[f.id]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setTouched(new Set(fields.map((f) => f.id)));
|
||||
@ -118,176 +166,242 @@ export default function FormModal({ activityId, instanceId, title, onClose, onSu
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true); setError(null);
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data: Record<string, unknown> = {};
|
||||
const payload: Record<string, unknown> = {};
|
||||
for (const f of fields) {
|
||||
const v = formData[f.id];
|
||||
if (MEDIA_TYPES.has(f.data_type)) {
|
||||
// Freshly picked Files are uploaded now and submitted as metadata;
|
||||
// an array is already-uploaded metadata from a prefill. Instance data
|
||||
// holds an array either way, matching the platform's file fields.
|
||||
// A freshly picked File is uploaded now and submitted as metadata; an
|
||||
// array is already-uploaded metadata from a prefill.
|
||||
if (v instanceof File) {
|
||||
data[f.id] = [await uploadFieldFile(v, { ...fileCtx, fieldId: f.id })];
|
||||
payload[f.id] = [await uploadFieldFile(v, { ...fileCtx, fieldId: f.id })];
|
||||
} else if (Array.isArray(v)) {
|
||||
data[f.id] = v;
|
||||
payload[f.id] = v;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
const s = v ?? "";
|
||||
data[f.id] = f.data_type === "number" ? (s !== "" ? Number(s) : 0) : String(s);
|
||||
payload[f.id] = f.data_type === "number" ? (s !== "" ? Number(s) : 0) : String(s);
|
||||
}
|
||||
instanceId ? await performActivity(WORKFLOW_ID, instanceId, activityId, data) : await startWorkflow(WORKFLOW_ID, activityId, data);
|
||||
setSuccess(true);
|
||||
setTimeout(() => animateClose(onSuccess), 800);
|
||||
} catch (err: any) { setError(err.message || "Failed"); }
|
||||
finally { setSubmitting(false); }
|
||||
|
||||
if (instanceId) await performActivity(WORKFLOW_ID, instanceId, activityId, payload);
|
||||
else await startWorkflow(WORKFLOW_ID, activityId, payload);
|
||||
|
||||
setSucceeded(true);
|
||||
// The toast outlives the dialog. The old 800ms in-modal overlay vanished
|
||||
// with the modal, leaving no confirmation behind at all.
|
||||
toast.success(`${formTitle} submitted`, {
|
||||
description: instanceId ? "The invoice has been updated." : "A new invoice was created.",
|
||||
});
|
||||
setTimeout(onSuccess, 600);
|
||||
} catch (err: any) {
|
||||
const message = err?.message || "Submission failed";
|
||||
setError(message);
|
||||
toast.error(`${formTitle} failed`, { description: message });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sorted = [...fields].sort((a, b) => {
|
||||
const ga = gridConfig.find((g) => g.i === a.uid), gb = gridConfig.find((g) => g.i === b.uid);
|
||||
if (!ga || !gb) return 0;
|
||||
return ga.y !== gb.y ? ga.y - gb.y : ga.x - gb.x;
|
||||
});
|
||||
|
||||
const rows: FormField[][] = []; let cy = -1;
|
||||
for (const f of sorted) { const g = gridConfig.find((gi) => gi.i === f.uid); const y = g?.y ?? rows.length; if (y !== cy) { rows.push([]); cy = y; } rows[rows.length - 1].push(f); }
|
||||
|
||||
const isMissing = (f: FormField) => f.mandatory && touched.has(f.id) && isEmpty(formData[f.id]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center" onClick={() => animateClose(onClose)}>
|
||||
{/* Backdrop */}
|
||||
<div className={`absolute inset-0 bg-slate-900/50 dark:bg-black/60 backdrop-blur-[2px] transition-opacity duration-200 ${visible ? "opacity-100" : "opacity-0"}`} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
ref={modalRef}
|
||||
className={`relative bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl shadow-slate-900/10 dark:shadow-black/50 border border-slate-200/0 dark:border-zinc-700/60 w-full max-w-xl mx-4 max-h-[90vh] flex flex-col transition-all duration-200 ${visible ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
<Dialog open onOpenChange={(o) => !o && !submitting && onClose()}>
|
||||
{/* Radix supplies the focus trap, Escape handling, aria-modal, scroll lock
|
||||
and focus restore that the hand-rolled overlay never had. */}
|
||||
<DialogContent
|
||||
className="max-h-[90vh] gap-0 overflow-hidden p-0 sm:max-w-xl"
|
||||
onInteractOutside={(e) => submitting && e.preventDefault()}
|
||||
>
|
||||
{/* ── Success overlay ──────────────────────────────────────────── */}
|
||||
{success && (
|
||||
<div className="absolute inset-0 z-10 bg-white/95 dark:bg-zinc-900/95 rounded-2xl flex flex-col items-center justify-center gap-3">
|
||||
<div className="w-12 h-12 rounded-full bg-emerald-50 dark:bg-emerald-950/40 flex items-center justify-center">
|
||||
<CheckCircle2 size={24} className="text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-[14px] font-semibold text-slate-800 dark:text-zinc-100">Submitted successfully</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogHeader className="border-b border-border px-5 py-4 text-left">
|
||||
<DialogTitle className="text-lg">{formTitle}</DialogTitle>
|
||||
<DialogDescription className="text-sm">
|
||||
{instanceId ? "Update the details below." : "Fill in the details to submit."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* ── Header ───────────────────────────────────────────────────── */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-zinc-800">
|
||||
<div>
|
||||
<h2 className="text-[15px] font-semibold text-slate-900 dark:text-zinc-100">{formTitle}</h2>
|
||||
<p className="text-[12px] text-slate-400 dark:text-zinc-500 mt-0.5">
|
||||
{instanceId ? "Update the details below" : "Fill in the details to submit"}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => animateClose(onClose)}
|
||||
className="w-8 h-8 flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-slate-600 dark:hover:text-zinc-200 hover:bg-slate-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Body ─────────────────────────────────────────────────────── */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">
|
||||
{loading ? (
|
||||
<div className="space-y-5">
|
||||
{[0, 1, 2, 3].map((r) => (
|
||||
<div className="scrollbar-thin flex-1 overflow-y-auto px-5 py-4">
|
||||
{isPending ? (
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 4 }).map((_, r) => (
|
||||
<div key={r} className="grid grid-cols-2 gap-4">
|
||||
<div><Skeleton className="h-3 w-20 mb-2" /><Skeleton className="h-10 w-full rounded-lg" /></div>
|
||||
<div><Skeleton className="h-3 w-24 mb-2" /><Skeleton className="h-10 w-full rounded-lg" /></div>
|
||||
{Array.from({ length: 2 }).map((__, c) => (
|
||||
<div key={c}>
|
||||
<Skeleton className="mb-2 h-3 w-20" />
|
||||
<Skeleton className="h-9 w-full rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<form id="act-form" onSubmit={handleSubmit} className="space-y-5">
|
||||
<form id="activity-form" onSubmit={handleSubmit} className="space-y-4">
|
||||
{rows.map((row, ri) => (
|
||||
<div key={ri} className={`grid gap-4 ${row.length > 1 ? "grid-cols-2" : "grid-cols-1"}`}>
|
||||
{row.map((f) => (
|
||||
<div key={f.id}>
|
||||
<label className="block text-[12px] font-medium text-slate-500 dark:text-zinc-400 mb-1.5">
|
||||
{f.name}
|
||||
{f.mandatory && <span className="text-red-400 ml-0.5">*</span>}
|
||||
</label>
|
||||
{MEDIA_TYPES.has(f.data_type) ? (
|
||||
<OcrUploadField
|
||||
field={f}
|
||||
ctx={fileCtx}
|
||||
file={formData[f.id] instanceof File ? formData[f.id] : null}
|
||||
onFileChange={(file) => {
|
||||
setFormData((p) => ({ ...p, [f.id]: file }));
|
||||
setTouched((t) => new Set(t).add(f.id));
|
||||
if (error) setError(null);
|
||||
}}
|
||||
onExtracted={(extracted) => applyExtraction(f, extracted)}
|
||||
hasError={isMissing(f)}
|
||||
/>
|
||||
) : (
|
||||
renderInput(f, formData[f.id] ?? "", (v) => {
|
||||
setFormData((p) => ({ ...p, [f.id]: v }));
|
||||
setTouched((t) => new Set(t).add(f.id));
|
||||
if (error) setError(null);
|
||||
}, isMissing(f))
|
||||
)}
|
||||
{isMissing(f) && (
|
||||
<p className="text-[11px] text-red-500 mt-1 flex items-center gap-1">
|
||||
<AlertCircle size={11} /> Required
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
key={ri}
|
||||
className={cn("grid gap-4", row.length > 1 ? "sm:grid-cols-2" : "grid-cols-1")}
|
||||
>
|
||||
{row.map((f) => {
|
||||
const invalid = isMissing(f);
|
||||
return (
|
||||
<div key={f.id}>
|
||||
<Label htmlFor={f.id} className="mb-1.5 text-sm text-muted-foreground">
|
||||
{f.name}
|
||||
{f.mandatory && (
|
||||
<span className="text-destructive" aria-hidden>
|
||||
*
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
|
||||
{MEDIA_TYPES.has(f.data_type) ? (
|
||||
<OcrUploadField
|
||||
field={f}
|
||||
ctx={fileCtx}
|
||||
file={formData[f.id] instanceof File ? formData[f.id] : null}
|
||||
onFileChange={(file) => setValue(f.id, file)}
|
||||
onExtracted={(extracted) => applyExtraction(f, extracted)}
|
||||
hasError={invalid}
|
||||
/>
|
||||
) : (
|
||||
<FieldInput
|
||||
field={f}
|
||||
value={formData[f.id] ?? ""}
|
||||
onChange={(v) => setValue(f.id, v)}
|
||||
invalid={invalid}
|
||||
/>
|
||||
)}
|
||||
|
||||
{invalid && (
|
||||
<p
|
||||
id={`${f.id}-error`}
|
||||
className="mt-1 flex items-center gap-1 text-xs text-destructive"
|
||||
>
|
||||
<AlertCircle className="size-3" aria-hidden />
|
||||
Required
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</form>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 flex items-start gap-2.5 text-[13px] text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 rounded-xl px-4 py-3 border border-red-100 dark:border-red-900">
|
||||
<AlertCircle size={15} className="shrink-0 mt-0.5" />
|
||||
<div
|
||||
role="alert"
|
||||
className="mt-4 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-base text-destructive"
|
||||
>
|
||||
<AlertCircle className="mt-0.5 size-4 shrink-0" aria-hidden />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Footer ───────────────────────────────────────────────────── */}
|
||||
{!loading && (
|
||||
<div className="px-6 py-4 border-t border-slate-100 dark:border-zinc-800 flex items-center justify-between">
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500">
|
||||
<span className="text-red-400">*</span> Required
|
||||
</div>
|
||||
<div className="flex gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => animateClose(onClose)}
|
||||
className="h-9 px-4 text-[13px] font-medium text-slate-500 dark:text-zinc-400 hover:text-slate-700 dark:hover:text-zinc-200 hover:bg-slate-50 dark:hover:bg-zinc-800 rounded-xl transition-colors"
|
||||
>
|
||||
{/* mx-0/mb-0 cancel DialogFooter's default negative margins, which
|
||||
assume the content keeps its own padding — this dialog is p-0. */}
|
||||
{!isPending && (
|
||||
<DialogFooter className="mx-0 mb-0 items-center border-t border-border px-5 py-3 sm:justify-between">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="text-destructive">*</span> Required
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button type="button" variant="ghost" onClick={onClose} disabled={submitting}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
form="act-form"
|
||||
disabled={submitting}
|
||||
className="h-9 px-5 text-[13px] font-semibold text-white disabled:opacity-50 rounded-xl transition-all flex items-center gap-1.5 shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 hover:scale-[1.02] active:scale-[0.98]"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
</Button>
|
||||
<Button type="submit" form="activity-form" disabled={submitting || succeeded}>
|
||||
{submitting ? (
|
||||
<><div className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Submitting…</>
|
||||
<>
|
||||
<Loader2 className="size-3.5 animate-spin" aria-hidden />
|
||||
Submitting…
|
||||
</>
|
||||
) : succeeded ? (
|
||||
<>
|
||||
<CheckCircle2 className="size-3.5" aria-hidden />
|
||||
Submitted
|
||||
</>
|
||||
) : (
|
||||
<>{instanceId ? "Update" : "Submit"} <ArrowRight size={14} /></>
|
||||
<>
|
||||
{instanceId ? "Update" : "Submit"}
|
||||
<ArrowRight className="size-3.5" aria-hidden />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Inputs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function FieldInput({
|
||||
field,
|
||||
value,
|
||||
onChange,
|
||||
invalid,
|
||||
}: {
|
||||
field: FormField;
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
invalid: boolean;
|
||||
}) {
|
||||
const options = field.properties?.options;
|
||||
const describedBy = invalid ? `${field.id}-error` : undefined;
|
||||
|
||||
if (options && options.length > 0) {
|
||||
return (
|
||||
<Select value={value} onValueChange={onChange}>
|
||||
<SelectTrigger
|
||||
id={field.id}
|
||||
aria-invalid={invalid}
|
||||
aria-describedby={describedBy}
|
||||
className="w-full"
|
||||
>
|
||||
<SelectValue placeholder={`Select ${field.name.toLowerCase()}`} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
const common = {
|
||||
id: field.id,
|
||||
value,
|
||||
"aria-invalid": invalid,
|
||||
"aria-describedby": describedBy,
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
|
||||
onChange(e.target.value),
|
||||
};
|
||||
|
||||
switch (field.data_type) {
|
||||
case "longtext":
|
||||
return <Textarea {...common} rows={3} placeholder={`Enter ${field.name.toLowerCase()}`} />;
|
||||
case "number":
|
||||
return <Input {...common} type="number" step="any" placeholder="0" />;
|
||||
case "date":
|
||||
return <Input {...common} type="date" />;
|
||||
case "email":
|
||||
return <Input {...common} type="email" placeholder="name@company.com" />;
|
||||
case "phone":
|
||||
return <Input {...common} type="tel" placeholder={`Enter ${field.name.toLowerCase()}`} />;
|
||||
default:
|
||||
return <Input {...common} type="text" placeholder={`Enter ${field.name.toLowerCase()}`} />;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// OCR value coercion
|
||||
// ---------------------------------------------------------------------------
|
||||
@ -313,58 +427,3 @@ function coerceExtracted(raw: unknown, dataType?: string): string {
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Input renderer
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function renderInput(f: FormField, value: string, onChange: (v: string) => void, hasError: boolean) {
|
||||
const base = `w-full h-10 border rounded-xl px-3.5 text-[13px] bg-slate-50/50 dark:bg-zinc-800/70 focus:bg-white dark:focus:bg-zinc-800 text-slate-800 dark:text-zinc-100 focus:outline-none focus:ring-2 transition placeholder:text-slate-400 dark:placeholder:text-zinc-600 ${
|
||||
hasError
|
||||
? "border-red-300 dark:border-red-700 focus:ring-red-500/20 focus:border-red-400"
|
||||
: "border-slate-200 dark:border-zinc-700 focus:ring-violet-500/20 focus:border-violet-400 dark:focus:border-violet-500"
|
||||
}`;
|
||||
|
||||
// Select / radio with options
|
||||
const opts = f.properties?.options;
|
||||
if (opts && opts.length > 0) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={`${base} appearance-none pr-9 cursor-pointer`}
|
||||
>
|
||||
<option value="">Select {f.name.toLowerCase()}</option>
|
||||
{opts.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
switch (f.data_type) {
|
||||
case "longtext":
|
||||
return (
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
rows={3}
|
||||
className={`${base} h-auto py-2.5 rounded-xl`}
|
||||
placeholder={`Enter ${f.name.toLowerCase()}`}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
return <input type="number" step="any" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder="0" />;
|
||||
case "date":
|
||||
return <input type="date" value={value} onChange={(e) => onChange(e.target.value)} className={base} />;
|
||||
case "email":
|
||||
return <input type="email" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
|
||||
case "phone":
|
||||
return <input type="tel" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
|
||||
default:
|
||||
return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,10 +16,22 @@
|
||||
// out of the local config is only picker UX (allowed_types / max_size_mb /
|
||||
// placeholder); mirrors renderer-desktop's FFOcrField.
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { FileText, UploadCloud, X, ScanText, CheckCircle2, AlertCircle } from "lucide-react";
|
||||
import { extractOcr } from "../api/viewService";
|
||||
import type { FieldFileContext, FormScreenField, OcrConfig } from "../api/viewService";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
Eye,
|
||||
FileText,
|
||||
Loader2,
|
||||
ScanText,
|
||||
UploadCloud,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { extractOcr } from "@/api/viewService";
|
||||
import type { FieldFileContext, FormScreenField, OcrConfig } from "@/api/viewService";
|
||||
|
||||
// Studio writes the OCR keys either nested under properties.ocr_config or flat
|
||||
// on properties. The nested shape wins when it actually carries a schema.
|
||||
@ -32,16 +44,12 @@ export function resolveOcrConfig(field: FormScreenField): OcrConfig {
|
||||
// allowed_types arrives as a CSV string or an array, holding any of ".pdf",
|
||||
// "pdf", "application/pdf" or "image/*". Normalise to what <input accept> wants.
|
||||
function toAcceptAttr(raw: OcrConfig["allowed_types"]): string {
|
||||
const entries = Array.isArray(raw)
|
||||
? raw
|
||||
: typeof raw === "string"
|
||||
? raw.split(",")
|
||||
: [];
|
||||
const cleaned = entries
|
||||
const entries = Array.isArray(raw) ? raw : typeof raw === "string" ? raw.split(",") : [];
|
||||
return entries
|
||||
.map((e) => e.trim().toLowerCase())
|
||||
.filter(Boolean)
|
||||
.map((e) => (e.includes("/") || e.startsWith(".") ? e : `.${e}`));
|
||||
return cleaned.join(",");
|
||||
.map((e) => (e.includes("/") || e.startsWith(".") ? e : `.${e}`))
|
||||
.join(",");
|
||||
}
|
||||
|
||||
function formatBytes(n: number): string {
|
||||
@ -69,11 +77,33 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function OcrUploadField({
|
||||
field, ctx, file, onFileChange, onExtracted, disabled, hasError,
|
||||
field,
|
||||
ctx,
|
||||
file,
|
||||
onFileChange,
|
||||
onExtracted,
|
||||
disabled,
|
||||
hasError,
|
||||
}: Props) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const [state, setState] = useState<ExtractState>({ status: "idle" });
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
|
||||
// A blob URL lets the reviewer see the document they just picked, side by side
|
||||
// with the fields OCR filled in. This only works for the in-flight File —
|
||||
// once uploaded there is no endpoint that serves it back.
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
if (!file) {
|
||||
setPreviewUrl(null);
|
||||
setShowPreview(false);
|
||||
return;
|
||||
}
|
||||
const url = URL.createObjectURL(file);
|
||||
setPreviewUrl(url);
|
||||
return () => URL.revokeObjectURL(url);
|
||||
}, [file]);
|
||||
|
||||
const config = resolveOcrConfig(field);
|
||||
const accept = toAcceptAttr(config.allowed_types);
|
||||
@ -88,6 +118,10 @@ export default function OcrUploadField({
|
||||
? accept.replace(/\./g, "").replace(/,/g, ", ").toUpperCase()
|
||||
: "PDF or image";
|
||||
|
||||
const isPdf = file?.type === "application/pdf";
|
||||
const isImage = file?.type.startsWith("image/") ?? false;
|
||||
const canPreview = !!previewUrl && (isPdf || isImage);
|
||||
|
||||
const pick = (next: File | null) => {
|
||||
setState({ status: "idle" });
|
||||
if (next && maxSizeMb && next.size > maxSizeMb * 1024 * 1024) {
|
||||
@ -114,6 +148,8 @@ export default function OcrUploadField({
|
||||
return;
|
||||
}
|
||||
setState({ status: "done", applied });
|
||||
// Opening the document next to the filled fields is the verification step.
|
||||
if (canPreview) setShowPreview(true);
|
||||
} catch (err: any) {
|
||||
setState({ status: "error", message: err?.message || "Extraction failed" });
|
||||
}
|
||||
@ -140,101 +176,156 @@ export default function OcrUploadField({
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setDragging(true);
|
||||
}}
|
||||
onDragLeave={() => setDragging(false)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
setDragging(false);
|
||||
if (!disabled) pick(e.dataTransfer.files?.[0] ?? null);
|
||||
}}
|
||||
className={`w-full rounded-xl border border-dashed px-5 py-7 flex flex-col items-center gap-2 transition-colors disabled:opacity-50 ${
|
||||
className={cn(
|
||||
"flex w-full flex-col items-center gap-2 rounded-lg border border-dashed px-5 py-7 transition-colors disabled:opacity-50",
|
||||
dragging
|
||||
? "border-violet-400 bg-violet-50/70 dark:border-violet-500 dark:bg-violet-950/20"
|
||||
? "border-primary bg-accent"
|
||||
: hasError
|
||||
? "border-red-300 bg-red-50/40 dark:border-red-700 dark:bg-red-950/20"
|
||||
: "border-slate-200 bg-slate-50/50 hover:border-violet-300 hover:bg-violet-50/40 dark:border-zinc-700 dark:bg-zinc-800/40 dark:hover:border-violet-600 dark:hover:bg-violet-950/10"
|
||||
}`}
|
||||
? "border-destructive/50 bg-destructive/5"
|
||||
: "border-border bg-muted/40 hover:border-primary/50 hover:bg-accent/50",
|
||||
)}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-white dark:bg-zinc-800 shadow-sm flex items-center justify-center">
|
||||
<UploadCloud size={18} className="text-violet-500" />
|
||||
</div>
|
||||
<div className="text-[13px] font-medium text-slate-700 dark:text-zinc-200">
|
||||
<span className="flex size-10 items-center justify-center rounded-full bg-card shadow-sm">
|
||||
<UploadCloud className="size-4 text-primary" aria-hidden />
|
||||
</span>
|
||||
<span className="text-base font-medium text-foreground">
|
||||
{config.placeholder || field.properties?.placeholder || `Drop ${field.name} here`}
|
||||
</div>
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500">
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
or click to browse · {acceptHint}
|
||||
{maxSizeMb ? ` up to ${maxSizeMb} MB` : ""}
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
/* ── Picked file + extract action ────────────────────────────────── */
|
||||
<div className="rounded-xl border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/60 px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 shrink-0 rounded-lg bg-violet-50 dark:bg-violet-950/40 flex items-center justify-center">
|
||||
<FileText size={16} className="text-violet-500" />
|
||||
<div className="rounded-lg border border-border bg-card">
|
||||
<div className="flex items-center gap-3 p-2.5">
|
||||
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent">
|
||||
<FileText className="size-4 text-primary" aria-hidden />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[13px] font-medium text-slate-800 dark:text-zinc-100 truncate">
|
||||
{file.name}
|
||||
</div>
|
||||
<div className="text-[11px] text-slate-400 dark:text-zinc-500">
|
||||
{formatBytes(file.size)}
|
||||
</div>
|
||||
<p className="truncate text-base font-medium text-foreground">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{formatBytes(file.size)}</p>
|
||||
</div>
|
||||
|
||||
{canExtract && (
|
||||
<button
|
||||
{canPreview && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5"
|
||||
aria-expanded={showPreview}
|
||||
onClick={() => setShowPreview((s) => !s)}
|
||||
>
|
||||
<Eye className="size-3.5" aria-hidden />
|
||||
{showPreview ? "Hide" : "View"}
|
||||
<ChevronDown
|
||||
className={cn("size-3 transition-transform", showPreview && "rotate-180")}
|
||||
aria-hidden
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{canExtract && (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="h-8 shrink-0 gap-1.5"
|
||||
disabled={disabled || state.status === "loading"}
|
||||
onClick={runExtract}
|
||||
className="h-8 px-3 shrink-0 text-[12px] font-semibold text-white rounded-lg flex items-center gap-1.5 disabled:opacity-60 transition-all hover:scale-[1.02] active:scale-[0.98]"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
{state.status === "loading" ? (
|
||||
<>
|
||||
<div className="w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<Loader2 className="size-3.5 animate-spin" aria-hidden />
|
||||
Reading…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ScanText size={13} />
|
||||
<ScanText className="size-3.5" aria-hidden />
|
||||
{state.status === "done" ? "Re-read" : "Read invoice"}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 shrink-0"
|
||||
disabled={disabled || state.status === "loading"}
|
||||
onClick={clear}
|
||||
className="w-7 h-7 shrink-0 flex items-center justify-center text-slate-400 dark:text-zinc-500 hover:text-slate-600 dark:hover:text-zinc-200 hover:bg-slate-100 dark:hover:bg-zinc-700 rounded-lg transition-colors disabled:opacity-40"
|
||||
title="Remove"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
<X className="size-3.5" aria-hidden />
|
||||
<span className="sr-only">Remove file</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{state.status === "done" && (
|
||||
<div className="mt-2.5 flex items-center gap-1.5 text-[11.5px] text-emerald-600 dark:text-emerald-400">
|
||||
<CheckCircle2 size={12} />
|
||||
Filled {state.applied} field{state.applied === 1 ? "" : "s"} from the document — review before submitting.
|
||||
</div>
|
||||
<p className="flex items-center gap-1.5 px-3 pb-2.5 text-xs text-state-approved">
|
||||
<CheckCircle2 className="size-3" aria-hidden />
|
||||
Filled {state.applied} field{state.applied === 1 ? "" : "s"} from the document — check
|
||||
them against the original below.
|
||||
</p>
|
||||
)}
|
||||
{state.status === "error" && (
|
||||
<div className="mt-2.5 flex items-start gap-1.5 text-[11.5px] text-red-600 dark:text-red-400">
|
||||
<AlertCircle size={12} className="shrink-0 mt-0.5" />
|
||||
<p className="flex items-start gap-1.5 px-3 pb-2.5 text-xs text-destructive">
|
||||
<AlertCircle className="mt-px size-3 shrink-0" aria-hidden />
|
||||
{state.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Inline document preview — the browser renders both PDFs and images
|
||||
from a blob URL, so no PDF library is needed for this. */}
|
||||
{showPreview && canPreview && (
|
||||
<div className="border-t border-border p-2.5">
|
||||
{isImage ? (
|
||||
<img
|
||||
src={previewUrl!}
|
||||
alt={`Preview of ${file.name}`}
|
||||
className="max-h-80 w-full rounded-md object-contain"
|
||||
/>
|
||||
) : (
|
||||
<object
|
||||
data={previewUrl!}
|
||||
type="application/pdf"
|
||||
className="h-80 w-full rounded-md"
|
||||
aria-label={`Preview of ${file.name}`}
|
||||
>
|
||||
<p className="p-4 text-sm text-muted-foreground">
|
||||
Your browser can't display this PDF inline.{" "}
|
||||
<a
|
||||
href={previewUrl!}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="font-semibold text-primary hover:underline"
|
||||
>
|
||||
Open it in a new tab
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</object>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state.status === "error" && !file && (
|
||||
<div className="mt-2 flex items-start gap-1.5 text-[11.5px] text-red-600 dark:text-red-400">
|
||||
<AlertCircle size={12} className="shrink-0 mt-0.5" />
|
||||
<p className="mt-2 flex items-start gap-1.5 text-xs text-destructive">
|
||||
<AlertCircle className="mt-px size-3 shrink-0" aria-hidden />
|
||||
{state.message}
|
||||
</div>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,14 +1,22 @@
|
||||
import { useState, ReactNode } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import type { LayoutElement } from "../api/viewService";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import RecordViewTable from "./RecordViewTable";
|
||||
import DetailViewPanel from "./DetailViewPanel";
|
||||
import FormModal from "./FormModal";
|
||||
import { collectStartButtons } from "../lib/startButtons";
|
||||
|
||||
interface Props { layout: LayoutElement[]; instanceId?: string; onRefresh?: () => void; onRowClick?: (instanceId: string) => void; }
|
||||
interface Props {
|
||||
layout: LayoutElement[];
|
||||
instanceId?: string;
|
||||
onRefresh?: () => void;
|
||||
onRowClick?: (instanceId: string) => void;
|
||||
/** Forwarded to any detail view so the shell can title its breadcrumb. */
|
||||
onTitle?: (title: string) => void;
|
||||
}
|
||||
|
||||
export default function ScreenRenderer({ layout, instanceId, onRefresh, onRowClick }: Props) {
|
||||
export default function ScreenRenderer({ layout, instanceId, onRefresh, onRowClick, onTitle }: Props) {
|
||||
const [formModal, setFormModal] = useState<{ activityId: string; instanceId?: string; title?: string } | null>(null);
|
||||
|
||||
// Collect button elements to inject into the next record view's toolbar
|
||||
@ -33,14 +41,14 @@ export default function ScreenRenderer({ layout, instanceId, onRefresh, onRowCli
|
||||
if (!aid) return; // a button with no activity to run is not renderable
|
||||
const label = (cfg.name || "").replace(/^\+\s*/, "");
|
||||
buttons.push(
|
||||
<button
|
||||
<Button
|
||||
key={aid}
|
||||
size="sm"
|
||||
className="h-8 gap-1.5"
|
||||
onClick={() => setFormModal({ activityId: aid, instanceId: cfg.job_template === "perform_activity" ? instanceId : undefined, title: label })}
|
||||
className="h-8 px-3.5 text-[12px] font-semibold text-white rounded-xl inline-flex items-center gap-1.5 transition-all hover:scale-[1.02] active:scale-[0.98] shadow-md shadow-violet-500/20"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
<Plus size={13} strokeWidth={2.5} />{label}
|
||||
</button>
|
||||
<Plus className="size-3.5" strokeWidth={2.5} aria-hidden />{label}
|
||||
</Button>
|
||||
);
|
||||
} else if (cfg.type === "recordsview") {
|
||||
const vid = cfg.view_uuid ?? cfg.view_id;
|
||||
@ -76,7 +84,7 @@ export default function ScreenRenderer({ layout, instanceId, onRefresh, onRowCli
|
||||
);
|
||||
}
|
||||
if (el.type === "dv") {
|
||||
return <div key={i} style={flowStyle(el.style)}><DetailViewPanel viewId={el.viewId} instanceId={instanceId || ""} /></div>;
|
||||
return <div key={i} style={flowStyle(el.style)}><DetailViewPanel viewId={el.viewId} instanceId={instanceId || ""} onTitle={onTitle} /></div>;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
|
||||
@ -1,26 +1,35 @@
|
||||
export function Skeleton({ className = "" }: { className?: string }) {
|
||||
return <div className={`animate-pulse bg-slate-200/70 dark:bg-zinc-800 rounded ${className}`} />;
|
||||
}
|
||||
// Composite loading states. The primitive lives in components/ui/skeleton.
|
||||
//
|
||||
// StatsSkeleton was dropped along with the old DashboardStats — the rebuilt
|
||||
// tiles carry their own skeleton so the two can't drift out of shape.
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export function TableSkeleton({ rows = 5, cols = 6 }: { rows?: number; cols?: number }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 bg-white dark:bg-zinc-900 overflow-hidden shadow-sm">
|
||||
{/* Toolbar skeleton */}
|
||||
<div className="px-5 py-3.5 border-b border-slate-100 dark:border-zinc-800 flex items-center justify-between">
|
||||
<Skeleton className="h-5 w-48" />
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
<div className="rounded-xl border border-border bg-card">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<div className="flex gap-1.5">
|
||||
<Skeleton className="size-8 rounded-md" />
|
||||
<Skeleton className="size-8 rounded-md" />
|
||||
<Skeleton className="h-8 w-44 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-4 py-2.5 border-b border-slate-100 dark:border-zinc-800 bg-slate-50/50 dark:bg-zinc-800/30 flex gap-4">
|
||||
<div className="flex gap-4 border-y border-border bg-muted/50 px-4 py-2.5">
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-3 flex-1" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
{Array.from({ length: rows }).map((_, ri) => (
|
||||
<div key={ri} className="px-4 py-4 border-b border-slate-50 dark:border-zinc-800/60 flex gap-4">
|
||||
<div key={ri} className="flex gap-4 border-b border-border/60 px-4 py-3.5">
|
||||
{Array.from({ length: cols }).map((_, ci) => (
|
||||
<Skeleton key={ci} className={`h-4 flex-1 ${ci === 0 ? "max-w-[80px]" : ""}`} />
|
||||
<Skeleton key={ci} className={ci === 0 ? "h-4 max-w-20 flex-1" : "h-4 flex-1"} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
@ -30,44 +39,51 @@ export function TableSkeleton({ rows = 5, cols = 6 }: { rows?: number; cols?: nu
|
||||
|
||||
export function DetailSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Status bar */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 px-5 py-3 flex gap-4">
|
||||
<Skeleton className="h-6 w-32 rounded-full" />
|
||||
<Skeleton className="h-4 w-20 mt-1" />
|
||||
<Skeleton className="h-4 w-24 mt-1" />
|
||||
<div className="space-y-3">
|
||||
{/* Stepper */}
|
||||
<div className="flex items-center gap-2">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-8 flex-1 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
{/* Detail card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-slate-100 dark:border-zinc-800">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
<div className="grid grid-cols-3">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="px-5 py-4 border-b border-slate-50 dark:border-zinc-800/60">
|
||||
<Skeleton className="h-3 w-20 mb-2" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatsSkeleton() {
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="bg-white dark:bg-zinc-900 rounded-2xl border border-slate-200/80 dark:border-zinc-700/60 p-4">
|
||||
<div className="flex items-start justify-between mb-3.5">
|
||||
<Skeleton className="h-10 w-10 rounded-xl" />
|
||||
<Skeleton className="h-8 w-12" />
|
||||
<div className="grid gap-3 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
|
||||
<div className="space-y-3">
|
||||
<div className="rounded-xl border border-border bg-card px-5 py-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-40" />
|
||||
<Skeleton className="h-3 w-56" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-border bg-card px-5 py-4">
|
||||
<Skeleton className="mb-4 h-2.5 w-24" />
|
||||
<div className="grid gap-x-8 gap-y-4 sm:grid-cols-2">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i}>
|
||||
<Skeleton className="mb-1.5 h-2.5 w-20" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-3 w-24 mb-3" />
|
||||
<Skeleton className="h-1 w-full rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="rounded-xl border border-border bg-card px-5 py-4">
|
||||
<Skeleton className="mb-4 h-2.5 w-20" />
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="flex justify-between border-b border-border/50 py-2">
|
||||
<Skeleton className="h-3.5 w-24" />
|
||||
<Skeleton className="h-3.5 w-16" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
50
src/components/StatusBadge.tsx
Normal file
50
src/components/StatusBadge.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { resolveStatus } from "@/lib/workflow";
|
||||
|
||||
interface Props {
|
||||
value: string | null | undefined;
|
||||
/** `sm` for table cells, `md` for the detail header. */
|
||||
size?: "sm" | "md";
|
||||
/** Show the state icon alongside the dot. Off in dense tables. */
|
||||
withIcon?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The one status pill. Colour, label and icon all come from lib/workflow, so a
|
||||
* state looks identical in a table cell, a detail header and a chart legend.
|
||||
*/
|
||||
export default function StatusBadge({ value, size = "sm", withIcon = false, className }: Props) {
|
||||
const status = resolveStatus(value);
|
||||
if (!status) return null;
|
||||
|
||||
const { label, tone, pulse, icon: Icon } = status;
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex shrink-0 items-center gap-1.5 rounded-full border font-semibold",
|
||||
tone.bg,
|
||||
tone.border,
|
||||
tone.text,
|
||||
size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{withIcon ? (
|
||||
<Icon className={size === "sm" ? "size-3" : "size-3.5"} aria-hidden />
|
||||
) : (
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 shrink-0 rounded-full",
|
||||
tone.solid,
|
||||
// Only the in-progress state pulses, so motion means "working".
|
||||
pulse && "animate-pulse",
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
)}
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
115
src/components/WorkflowStepper.tsx
Normal file
115
src/components/WorkflowStepper.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import { Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { HAPPY_PATH, resolveStatus, stateByName } from "@/lib/workflow";
|
||||
|
||||
interface Props {
|
||||
/** `current_state_name` for the instance. */
|
||||
state: string | null | undefined;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the invoice lifecycle as a stepper.
|
||||
*
|
||||
* The workflow states existed in config.ts all along but were never shown — a
|
||||
* reviewer could see "Finance Review" as a pill without any sense of what came
|
||||
* before it or what is left. Off-path outcomes (Rejected, On Hold) aren't steps,
|
||||
* so when the instance is in one of those the strip renders as a single banner
|
||||
* instead of a misleading progress line.
|
||||
*/
|
||||
export default function WorkflowStepper({ state, className }: Props) {
|
||||
const current = stateByName(state);
|
||||
const status = resolveStatus(state);
|
||||
if (!status) return null;
|
||||
|
||||
// Rejected / On Hold have no position on the happy path.
|
||||
if (!current || current.step === null) {
|
||||
const Icon = status.icon;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-xl border px-4 py-3",
|
||||
status.tone.bg,
|
||||
status.tone.border,
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Icon className={cn("size-4 shrink-0", status.tone.text)} aria-hidden />
|
||||
<span className={cn("text-sm font-semibold", status.tone.text)}>{status.label}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{current?.key === "hold"
|
||||
? "Paused — no further action until it is resumed."
|
||||
: "This invoice is closed."}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const activeStep = current.step;
|
||||
const doneCount = HAPPY_PATH.filter((s) => (s.step as number) < activeStep).length;
|
||||
|
||||
return (
|
||||
<div className={cn("rounded-xl border border-border bg-card px-4 py-3", className)}>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<p className="text-2xs font-bold uppercase tracking-widest text-muted-foreground">
|
||||
Workflow Progress
|
||||
</p>
|
||||
<span className="text-2xs tabular-nums text-muted-foreground">
|
||||
Step {doneCount + 1} of {HAPPY_PATH.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ol className="flex items-center gap-1 overflow-x-auto" aria-label="Invoice progress">
|
||||
{HAPPY_PATH.map((s, i) => {
|
||||
const done = (s.step as number) < activeStep;
|
||||
const active = s.key === current.key;
|
||||
const Icon = s.icon;
|
||||
|
||||
return (
|
||||
<li key={s.key} className="flex min-w-0 flex-1 items-center gap-1">
|
||||
{/* No pill on the active step — the solid dot and the coloured
|
||||
label already mark it, and the ring read as a stray box. */}
|
||||
<div
|
||||
className="flex min-w-0 items-center gap-2 px-1.5 py-1.5"
|
||||
aria-current={active ? "step" : undefined}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"flex size-6 shrink-0 items-center justify-center rounded-full text-2xs font-bold",
|
||||
done && "bg-state-approved/15 text-state-approved",
|
||||
active && cn(s.tone.solid, "text-white shadow-sm"),
|
||||
!done && !active && "bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{done ? (
|
||||
<Check className="size-3.5" strokeWidth={3} aria-hidden />
|
||||
) : (
|
||||
<Icon className="size-3.5" aria-hidden />
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"truncate text-xs font-medium",
|
||||
active ? cn(s.tone.text, "font-semibold") : done ? "text-foreground/70" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{i < HAPPY_PATH.length - 1 && (
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
"h-0.5 min-w-2 flex-1 shrink rounded-full",
|
||||
done ? "bg-state-approved/50" : "bg-border",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/components/ui/badge.tsx
Normal file
49
src/components/ui/badge.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
67
src/components/ui/button.tsx
Normal file
67
src/components/ui/button.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
103
src/components/ui/card.tsx
Normal file
103
src/components/ui/card.tsx
Normal file
@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-(--card-spacing)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
31
src/components/ui/checkbox.tsx
Normal file
31
src/components/ui/checkbox.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import * as React from "react"
|
||||
import { Checkbox as CheckboxPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
|
||||
>
|
||||
<CheckIcon
|
||||
/>
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
195
src/components/ui/command.tsx
Normal file
195
src/components/ui/command.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
} from "@/components/ui/input-group"
|
||||
import { SearchIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function Command({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||
return (
|
||||
<CommandPrimitive
|
||||
data-slot="command"
|
||||
className={cn(
|
||||
"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandDialog({
|
||||
title = "Command Palette",
|
||||
description = "Search for a command to run...",
|
||||
children,
|
||||
className,
|
||||
showCloseButton = false,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Dialog> & {
|
||||
title?: string
|
||||
description?: string
|
||||
className?: string
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<Dialog {...props}>
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
|
||||
className
|
||||
)}
|
||||
showCloseButton={showCloseButton}
|
||||
>
|
||||
{children}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||
return (
|
||||
<div data-slot="command-input-wrapper" className="p-1 pb-0">
|
||||
<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
|
||||
<CommandPrimitive.Input
|
||||
data-slot="command-input"
|
||||
className={cn(
|
||||
"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
<InputGroupAddon>
|
||||
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||
return (
|
||||
<CommandPrimitive.List
|
||||
data-slot="command-list"
|
||||
className={cn(
|
||||
"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandEmpty({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||
return (
|
||||
<CommandPrimitive.Empty
|
||||
data-slot="command-empty"
|
||||
className={cn("py-6 text-center text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||
return (
|
||||
<CommandPrimitive.Group
|
||||
data-slot="command-group"
|
||||
className={cn(
|
||||
"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||
return (
|
||||
<CommandPrimitive.Separator
|
||||
data-slot="command-separator"
|
||||
className={cn("-mx-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||
return (
|
||||
<CommandPrimitive.Item
|
||||
data-slot="command-item"
|
||||
className={cn(
|
||||
"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
|
||||
</CommandPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="command-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
}
|
||||
166
src/components/ui/dialog.tsx
Normal file
166
src/components/ui/dialog.tsx
Normal file
@ -0,0 +1,166 @@
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close data-slot="dialog-close" asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
267
src/components/ui/dropdown-menu.tsx
Normal file
267
src/components/ui/dropdown-menu.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
import * as React from "react"
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon, ChevronRightIcon } from "lucide-react"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
align = "start",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
156
src/components/ui/input-group.tsx
Normal file
156
src/components/ui/input-group.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-group"
|
||||
role="group"
|
||||
className={cn(
|
||||
"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupAddonVariants = cva(
|
||||
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
align: {
|
||||
"inline-start":
|
||||
"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
||||
"inline-end":
|
||||
"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
||||
"block-start":
|
||||
"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
||||
"block-end":
|
||||
"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
align: "inline-start",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupAddon({
|
||||
className,
|
||||
align = "inline-start",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="input-group-addon"
|
||||
data-align={align}
|
||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||
onClick={(e) => {
|
||||
if ((e.target as HTMLElement).closest("button")) {
|
||||
return
|
||||
}
|
||||
e.currentTarget.parentElement?.querySelector("input")?.focus()
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupButtonVariants = cva(
|
||||
"flex items-center gap-2 text-sm shadow-none",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
||||
sm: "",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
||||
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "xs",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupButton({
|
||||
className,
|
||||
type = "button",
|
||||
variant = "ghost",
|
||||
size = "xs",
|
||||
...props
|
||||
}: Omit<React.ComponentProps<typeof Button>, "size"> &
|
||||
VariantProps<typeof inputGroupButtonVariants>) {
|
||||
return (
|
||||
<Button
|
||||
type={type}
|
||||
data-size={size}
|
||||
variant={variant}
|
||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupTextarea({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<Textarea
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupText,
|
||||
InputGroupInput,
|
||||
InputGroupTextarea,
|
||||
}
|
||||
19
src/components/ui/input.tsx
Normal file
19
src/components/ui/input.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
22
src/components/ui/label.tsx
Normal file
22
src/components/ui/label.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import * as React from "react"
|
||||
import { Label as LabelPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
89
src/components/ui/popover.tsx
Normal file
89
src/components/ui/popover.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Popover as PopoverPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Popover({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
||||
}
|
||||
|
||||
function PopoverTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
|
||||
}
|
||||
|
||||
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-header"
|
||||
className={cn("flex flex-col gap-0.5 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-title"
|
||||
className={cn("font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="popover-description"
|
||||
className={cn("text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Popover,
|
||||
PopoverAnchor,
|
||||
PopoverContent,
|
||||
PopoverDescription,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverTrigger,
|
||||
}
|
||||
31
src/components/ui/progress.tsx
Normal file
31
src/components/ui/progress.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Progress as ProgressPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
value,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="size-full flex-1 bg-primary transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Progress }
|
||||
53
src/components/ui/scroll-area.tsx
Normal file
53
src/components/ui/scroll-area.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import * as React from "react"
|
||||
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="relative flex-1 rounded-full bg-border"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
192
src/components/ui/select.tsx
Normal file
192
src/components/ui/select.tsx
Normal file
@ -0,0 +1,192 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Select as SelectPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return (
|
||||
<SelectPrimitive.Group
|
||||
data-slot="select-group"
|
||||
className={cn("scroll-my-1 p-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
data-align-trigger={position === "item-aligned"}
|
||||
className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
data-position={position}
|
||||
className={cn(
|
||||
"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
|
||||
position === "popper" && ""
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
28
src/components/ui/separator.tsx
Normal file
28
src/components/ui/separator.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Separator as SeparatorPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
145
src/components/ui/sheet.tsx
Normal file
145
src/components/ui/sheet.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import * as React from "react"
|
||||
import { Dialog as SheetPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close data-slot="sheet-close" asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-3 right-3"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn(
|
||||
"text-base font-medium text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
13
src/components/ui/skeleton.tsx
Normal file
13
src/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
51
src/components/ui/sonner.tsx
Normal file
51
src/components/ui/sonner.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
"use client"
|
||||
|
||||
// Upstream shadcn wires this to next-themes; this project has its own
|
||||
// ThemeContext (class strategy on <html>), so it reads from that instead.
|
||||
import { useTheme } from "@/hooks/ThemeContext"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: (
|
||||
<CircleCheckIcon className="size-4" />
|
||||
),
|
||||
info: (
|
||||
<InfoIcon className="size-4" />
|
||||
),
|
||||
warning: (
|
||||
<TriangleAlertIcon className="size-4" />
|
||||
),
|
||||
error: (
|
||||
<OctagonXIcon className="size-4" />
|
||||
),
|
||||
loading: (
|
||||
<Loader2Icon className="size-4 animate-spin" />
|
||||
),
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "cn-toast",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
88
src/components/ui/tabs.tsx
Normal file
88
src/components/ui/tabs.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Tabs as TabsPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-horizontal:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List> &
|
||||
VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
||||
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
||||
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 text-sm outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
18
src/components/ui/textarea.tsx
Normal file
18
src/components/ui/textarea.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
87
src/components/ui/toggle-group.tsx
Normal file
87
src/components/ui/toggle-group.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import * as React from "react"
|
||||
import { type VariantProps } from "class-variance-authority"
|
||||
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { toggleVariants } from "@/components/ui/toggle"
|
||||
|
||||
const ToggleGroupContext = React.createContext<
|
||||
VariantProps<typeof toggleVariants> & {
|
||||
spacing?: number
|
||||
orientation?: "horizontal" | "vertical"
|
||||
}
|
||||
>({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
spacing: 2,
|
||||
orientation: "horizontal",
|
||||
})
|
||||
|
||||
function ToggleGroup({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
spacing = 2,
|
||||
orientation = "horizontal",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants> & {
|
||||
spacing?: number
|
||||
orientation?: "horizontal" | "vertical"
|
||||
}) {
|
||||
return (
|
||||
<ToggleGroupPrimitive.Root
|
||||
data-slot="toggle-group"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
data-spacing={spacing}
|
||||
data-orientation={orientation}
|
||||
style={{ "--gap": spacing } as React.CSSProperties}
|
||||
className={cn(
|
||||
"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider
|
||||
value={{ variant, size, spacing, orientation }}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleGroupItem({
|
||||
className,
|
||||
children,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
const context = React.useContext(ToggleGroupContext)
|
||||
|
||||
return (
|
||||
<ToggleGroupPrimitive.Item
|
||||
data-slot="toggle-group-item"
|
||||
data-variant={context.variant || variant}
|
||||
data-size={context.size || size}
|
||||
data-spacing={context.spacing}
|
||||
className={cn(
|
||||
"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
|
||||
toggleVariants({
|
||||
variant: context.variant || variant,
|
||||
size: context.size || size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { ToggleGroup, ToggleGroupItem }
|
||||
47
src/components/ui/toggle.tsx
Normal file
47
src/components/ui/toggle.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Toggle as TogglePrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const toggleVariants = cva(
|
||||
"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline: "border border-input bg-transparent hover:bg-muted",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Toggle({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
return (
|
||||
<TogglePrimitive.Root
|
||||
data-slot="toggle"
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toggle, toggleVariants }
|
||||
55
src/components/ui/tooltip.tsx
Normal file
55
src/components/ui/tooltip.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import * as React from "react"
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
|
||||
@ -21,15 +21,22 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (theme === "dark") {
|
||||
root.classList.add("dark");
|
||||
} else {
|
||||
root.classList.remove("dark");
|
||||
}
|
||||
root.classList.toggle("dark", theme === "dark");
|
||||
localStorage.setItem("p2p_theme", theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));
|
||||
// The colour-transition is opt-in per switch rather than a standing global
|
||||
// rule, so ordinary hovers and mounts don't animate. Skipped entirely when
|
||||
// the user prefers reduced motion.
|
||||
const toggleTheme = () => {
|
||||
const root = document.documentElement;
|
||||
const animate = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
if (animate) {
|
||||
root.classList.add("theming");
|
||||
window.setTimeout(() => root.classList.remove("theming"), 220);
|
||||
}
|
||||
setTheme((t) => (t === "light" ? "dark" : "light"));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
|
||||
19
src/hooks/useHeaderConfig.ts
Normal file
19
src/hooks/useHeaderConfig.ts
Normal file
@ -0,0 +1,19 @@
|
||||
// Header/nav config.
|
||||
//
|
||||
// AppShell and DynamicHeader each called getHeaderConfig() independently on
|
||||
// mount, so every page load fetched the same nav payload twice. One cached
|
||||
// query now serves both.
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getHeaderConfig, type NavItem } from "../api/viewService";
|
||||
|
||||
export function useHeaderConfig() {
|
||||
const query = useQuery({
|
||||
queryKey: ["header-config", "desktop"],
|
||||
staleTime: 5 * 60_000,
|
||||
queryFn: () => getHeaderConfig("desktop"),
|
||||
});
|
||||
|
||||
const navItems: NavItem[] = query.data?.components?.nav?.items ?? [];
|
||||
return { ...query, navItems };
|
||||
}
|
||||
284
src/hooks/useInvoiceAnalytics.ts
Normal file
284
src/hooks/useInvoiceAnalytics.ts
Normal file
@ -0,0 +1,284 @@
|
||||
// Dashboard analytics — one cached fetch shared by the tiles and the charts.
|
||||
//
|
||||
// What this replaces: DashboardStats made two sequential requests, the second
|
||||
// with `limit: <exact total>`, pulling every invoice row down just to count
|
||||
// three states client-side. It also refetched on every screen change because
|
||||
// nothing cached it. This does a single bounded request through react-query
|
||||
// (already provided by ZinoProvider but previously unused by app code), and
|
||||
// derives every tile and chart from that one payload.
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getRVScreen, getRecordView } from "../api/viewService";
|
||||
import { ALL_INVOICES_RV_SCREEN_UUID, RECORD_VIEW_IDS } from "../config";
|
||||
import { WORKFLOW_STATES, stateByName, type StateKey } from "../lib/workflow";
|
||||
|
||||
/**
|
||||
* Upper bound on rows pulled for client-side aggregation. The view-service can
|
||||
* return `tile_values`/`chart_data` computed server-side; when it does we use
|
||||
* those instead (see below). This cap keeps the demo honest if it doesn't.
|
||||
*/
|
||||
const ROW_CAP = 500;
|
||||
|
||||
const AMOUNT_KEYS = ["total_amount", "amount", "net_amount", "gross_amount"];
|
||||
const DATE_KEYS = ["created_at", "invoice_date", "submitted_at"];
|
||||
const VENDOR_KEYS = ["vendor_name", "company_name", "supplier_name", "vendor"];
|
||||
|
||||
export interface AgingBucket {
|
||||
label: string;
|
||||
count: number;
|
||||
amount: number;
|
||||
/** Buckets past this point are the ones worth chasing. */
|
||||
overdue: boolean;
|
||||
}
|
||||
|
||||
export interface TrendPoint {
|
||||
date: string;
|
||||
label: string;
|
||||
count: number;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export interface Momentum {
|
||||
last7: number;
|
||||
prev7: number;
|
||||
/** Change vs the preceding 7 days, or null when there is no baseline. */
|
||||
deltaPct: number | null;
|
||||
}
|
||||
|
||||
export interface VendorTotal {
|
||||
name: string;
|
||||
count: number;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export interface StateSlice {
|
||||
key: StateKey;
|
||||
name: string;
|
||||
label: string;
|
||||
count: number;
|
||||
amount: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface InvoiceAnalytics {
|
||||
total: number;
|
||||
/** Rows actually aggregated — less than `total` if the cap kicked in. */
|
||||
sampled: number;
|
||||
capped: boolean;
|
||||
byState: StateSlice[];
|
||||
counts: Record<StateKey, number>;
|
||||
totalAmount: number;
|
||||
/** Sitting in clarification or review — money not yet resolved. */
|
||||
amountAtRisk: number;
|
||||
approvedAmount: number;
|
||||
/** Approved / (approved + rejected), or null when nothing is decided yet. */
|
||||
approvalRate: number | null;
|
||||
aging: AgingBucket[];
|
||||
/** Biggest vendors by billed value, highest first. */
|
||||
topVendors: VendorTotal[];
|
||||
trend: TrendPoint[];
|
||||
/** Submission volume this week vs last — drives the tile delta chip. */
|
||||
momentum: Momentum;
|
||||
/** Whether the server supplied precomputed tiles for this view. */
|
||||
serverTiles: boolean;
|
||||
}
|
||||
|
||||
function pickKey(row: Record<string, unknown>, candidates: string[]): string | null {
|
||||
for (const k of candidates) if (k in row) return k;
|
||||
return null;
|
||||
}
|
||||
|
||||
function toNumber(v: unknown): number {
|
||||
const n = Number(v);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function daysBetween(from: Date, to: Date): number {
|
||||
return Math.floor((to.getTime() - from.getTime()) / 86_400_000);
|
||||
}
|
||||
|
||||
function buildAging(rows: Record<string, unknown>[], dateKey: string | null, amountKey: string | null): AgingBucket[] {
|
||||
const buckets: AgingBucket[] = [
|
||||
{ label: "0–7d", count: 0, amount: 0, overdue: false },
|
||||
{ label: "8–14d", count: 0, amount: 0, overdue: false },
|
||||
{ label: "15–30d", count: 0, amount: 0, overdue: true },
|
||||
{ label: "31–60d", count: 0, amount: 0, overdue: true },
|
||||
{ label: "60d+", count: 0, amount: 0, overdue: true },
|
||||
];
|
||||
if (!dateKey) return buckets;
|
||||
|
||||
const now = new Date();
|
||||
for (const row of rows) {
|
||||
// Settled invoices aren't aging any more — only open ones matter here.
|
||||
const state = stateByName(String(row.current_state_name ?? ""));
|
||||
if (state?.terminal) continue;
|
||||
|
||||
const raw = row[dateKey];
|
||||
if (!raw) continue;
|
||||
const d = new Date(String(raw));
|
||||
if (Number.isNaN(d.getTime())) continue;
|
||||
|
||||
const age = daysBetween(d, now);
|
||||
const i = age <= 7 ? 0 : age <= 14 ? 1 : age <= 30 ? 2 : age <= 60 ? 3 : 4;
|
||||
buckets[i].count++;
|
||||
buckets[i].amount += amountKey ? toNumber(row[amountKey]) : 0;
|
||||
}
|
||||
return buckets;
|
||||
}
|
||||
|
||||
function buildTrend(
|
||||
rows: Record<string, unknown>[],
|
||||
dateKey: string | null,
|
||||
amountKey: string | null,
|
||||
days = 14,
|
||||
): TrendPoint[] {
|
||||
const points: TrendPoint[] = [];
|
||||
const index = new Map<string, TrendPoint>();
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
for (let i = days - 1; i >= 0; i--) {
|
||||
const d = new Date(today);
|
||||
d.setDate(d.getDate() - i);
|
||||
const iso = d.toISOString().slice(0, 10);
|
||||
const p: TrendPoint = {
|
||||
date: iso,
|
||||
label: d.toLocaleDateString("en-IN", { day: "numeric", month: "short" }),
|
||||
count: 0,
|
||||
amount: 0,
|
||||
};
|
||||
points.push(p);
|
||||
index.set(iso, p);
|
||||
}
|
||||
|
||||
if (!dateKey) return points;
|
||||
|
||||
for (const row of rows) {
|
||||
const raw = row[dateKey];
|
||||
if (!raw) continue;
|
||||
const d = new Date(String(raw));
|
||||
if (Number.isNaN(d.getTime())) continue;
|
||||
const p = index.get(d.toISOString().slice(0, 10));
|
||||
if (!p) continue; // outside the window
|
||||
p.count++;
|
||||
p.amount += amountKey ? toNumber(row[amountKey]) : 0;
|
||||
}
|
||||
return points;
|
||||
}
|
||||
|
||||
function buildTopVendors(
|
||||
rows: Record<string, unknown>[],
|
||||
vendorKey: string | null,
|
||||
amountKey: string | null,
|
||||
limit = 6,
|
||||
): VendorTotal[] {
|
||||
if (!vendorKey) return [];
|
||||
const totals = new Map<string, VendorTotal>();
|
||||
for (const row of rows) {
|
||||
const name = String(row[vendorKey] ?? "").trim();
|
||||
if (!name) continue;
|
||||
const entry = totals.get(name) ?? { name, count: 0, amount: 0 };
|
||||
entry.count++;
|
||||
entry.amount += amountKey ? toNumber(row[amountKey]) : 0;
|
||||
totals.set(name, entry);
|
||||
}
|
||||
// Fall back to volume when the view carries no amount column.
|
||||
const by: keyof VendorTotal = amountKey ? "amount" : "count";
|
||||
return [...totals.values()]
|
||||
.sort((a, b) => (b[by] as number) - (a[by] as number))
|
||||
.slice(0, limit);
|
||||
}
|
||||
|
||||
/** Splits a 14-point trend into this week vs last week. */
|
||||
function buildMomentum(trend: TrendPoint[]): Momentum {
|
||||
const half = Math.floor(trend.length / 2);
|
||||
const sum = (pts: TrendPoint[]) => pts.reduce((n, p) => n + p.count, 0);
|
||||
const prev7 = sum(trend.slice(0, half));
|
||||
const last7 = sum(trend.slice(half));
|
||||
return { last7, prev7, deltaPct: prev7 > 0 ? (last7 - prev7) / prev7 : null };
|
||||
}
|
||||
|
||||
function aggregate(
|
||||
rows: Record<string, unknown>[],
|
||||
total: number,
|
||||
serverTiles: boolean,
|
||||
): InvoiceAnalytics {
|
||||
const sample = rows[0] ?? {};
|
||||
const amountKey = pickKey(sample, AMOUNT_KEYS);
|
||||
const dateKey = pickKey(sample, DATE_KEYS);
|
||||
const vendorKey = pickKey(sample, VENDOR_KEYS);
|
||||
|
||||
const counts = Object.fromEntries(
|
||||
WORKFLOW_STATES.map((s) => [s.key, 0]),
|
||||
) as Record<StateKey, number>;
|
||||
const amounts = Object.fromEntries(
|
||||
WORKFLOW_STATES.map((s) => [s.key, 0]),
|
||||
) as Record<StateKey, number>;
|
||||
|
||||
let totalAmount = 0;
|
||||
|
||||
for (const row of rows) {
|
||||
const amount = amountKey ? toNumber(row[amountKey]) : 0;
|
||||
totalAmount += amount;
|
||||
const state = stateByName(String(row.current_state_name ?? ""));
|
||||
if (!state) continue;
|
||||
counts[state.key]++;
|
||||
amounts[state.key] += amount;
|
||||
}
|
||||
|
||||
const byState: StateSlice[] = WORKFLOW_STATES.map((s) => ({
|
||||
key: s.key,
|
||||
name: s.name,
|
||||
label: s.label,
|
||||
count: counts[s.key],
|
||||
amount: amounts[s.key],
|
||||
color: s.tone.css,
|
||||
})).filter((s) => s.count > 0);
|
||||
|
||||
const decided = counts.approved + counts.rejected;
|
||||
const trend = buildTrend(rows, dateKey, amountKey);
|
||||
|
||||
return {
|
||||
total,
|
||||
sampled: rows.length,
|
||||
capped: total > rows.length,
|
||||
byState,
|
||||
counts,
|
||||
totalAmount,
|
||||
amountAtRisk: amounts.clarification + amounts.review,
|
||||
approvedAmount: amounts.approved,
|
||||
approvalRate: decided > 0 ? counts.approved / decided : null,
|
||||
aging: buildAging(rows, dateKey, amountKey),
|
||||
topVendors: buildTopVendors(rows, vendorKey, amountKey),
|
||||
trend,
|
||||
momentum: buildMomentum(trend),
|
||||
serverTiles,
|
||||
};
|
||||
}
|
||||
|
||||
export function useInvoiceAnalytics() {
|
||||
return useQuery<InvoiceAnalytics>({
|
||||
queryKey: ["invoice-analytics", ALL_INVOICES_RV_SCREEN_UUID],
|
||||
staleTime: 60_000,
|
||||
queryFn: async () => {
|
||||
const rvScreen = await getRVScreen(ALL_INVOICES_RV_SCREEN_UUID);
|
||||
const res = await getRecordView(
|
||||
rvScreen.rv_template_uid,
|
||||
RECORD_VIEW_IDS.ALL_INVOICES,
|
||||
{ page: 1, limit: ROW_CAP },
|
||||
);
|
||||
const rows = Array.isArray(res.data) ? res.data : [];
|
||||
const total = res.pagination?.total_count ?? rows.length;
|
||||
return aggregate(rows, total, (res.tile_values?.length ?? 0) > 0);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function formatCurrency(n: number, compact = false): string {
|
||||
return n.toLocaleString("en-IN", {
|
||||
style: "currency",
|
||||
currency: "INR",
|
||||
maximumFractionDigits: 0,
|
||||
...(compact ? { notation: "compact", compactDisplay: "short" } : {}),
|
||||
});
|
||||
}
|
||||
65
src/hooks/useRecordView.ts
Normal file
65
src/hooks/useRecordView.ts
Normal file
@ -0,0 +1,65 @@
|
||||
// Record-view data access.
|
||||
//
|
||||
// Replaces the hand-rolled useEffect/useState fetching in RecordViewTable: no
|
||||
// caching, no request dedupe, and a `dataLoading` flag that flashed an overlay
|
||||
// on every keystroke-triggered refetch. react-query gives caching and
|
||||
// `isPlaceholderData` (previous page stays on screen while the next loads).
|
||||
|
||||
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
getRVScreen,
|
||||
getRecordView,
|
||||
type RecordViewField,
|
||||
type SearchQuery,
|
||||
} from "../api/viewService";
|
||||
import { startWorkflowButtons, type StartButton } from "../lib/startButtons";
|
||||
|
||||
export interface RecordViewData {
|
||||
fields: RecordViewField[];
|
||||
rows: Record<string, unknown>[];
|
||||
pagination: { page: number; limit: number; total_count: number; total_pages: number };
|
||||
}
|
||||
|
||||
/** rv_screen metadata: the template id to query and any workflow-launch buttons. */
|
||||
export function useRVScreen(viewId: number | string) {
|
||||
return useQuery({
|
||||
queryKey: ["rv-screen", String(viewId)],
|
||||
staleTime: 5 * 60_000, // screen config is effectively static
|
||||
queryFn: async () => {
|
||||
const rv = await getRVScreen(viewId);
|
||||
return {
|
||||
templateId: rv.rv_template_uid,
|
||||
startButtons: startWorkflowButtons(rv.layout) as StartButton[],
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRecordViewData(
|
||||
templateId: string | undefined,
|
||||
viewId: number | string,
|
||||
query: SearchQuery,
|
||||
) {
|
||||
return useQuery<RecordViewData>({
|
||||
queryKey: ["record-view", templateId, String(viewId), query],
|
||||
enabled: !!templateId,
|
||||
placeholderData: keepPreviousData,
|
||||
queryFn: async () => {
|
||||
const res = await getRecordView(templateId!, String(viewId), query);
|
||||
const rows = Array.isArray(res.data) ? res.data : [];
|
||||
const limit = query.limit ?? 10;
|
||||
return {
|
||||
fields: (res.config?.fields ?? []).filter((f) => f.field_key !== ""),
|
||||
rows,
|
||||
// RDBMS-backed views return every row without a pagination envelope.
|
||||
pagination:
|
||||
res.pagination ?? {
|
||||
page: query.page ?? 1,
|
||||
limit,
|
||||
total_count: rows.length,
|
||||
total_pages: Math.max(1, Math.ceil(rows.length / limit)),
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
48
src/hooks/useSidebar.ts
Normal file
48
src/hooks/useSidebar.ts
Normal file
@ -0,0 +1,48 @@
|
||||
// Sidebar open/collapsed state.
|
||||
//
|
||||
// This used to live in two places: DynamicHeader owned it and pushed changes up
|
||||
// to AppShell through an onSidebarChange callback, while AppShell kept its own
|
||||
// copy to offset the main content. Neither survived a reload. One hook, one
|
||||
// value, persisted.
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
const KEY = "p2p_sidebar_open";
|
||||
/** Below this the sidebar becomes an overlay drawer rather than a rail. */
|
||||
export const MOBILE_BREAKPOINT = 1024;
|
||||
|
||||
function readStored(): boolean {
|
||||
const stored = localStorage.getItem(KEY);
|
||||
return stored === null ? true : stored === "true";
|
||||
}
|
||||
|
||||
export function useSidebar() {
|
||||
const [open, setOpenState] = useState(readStored);
|
||||
const [isMobile, setIsMobile] = useState(
|
||||
() => typeof window !== "undefined" && window.innerWidth < MOBILE_BREAKPOINT,
|
||||
);
|
||||
/** Separate from `open` — the mobile drawer shouldn't persist. */
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
||||
const onChange = () => {
|
||||
setIsMobile(mq.matches);
|
||||
if (!mq.matches) setMobileOpen(false);
|
||||
};
|
||||
mq.addEventListener("change", onChange);
|
||||
return () => mq.removeEventListener("change", onChange);
|
||||
}, []);
|
||||
|
||||
const setOpen = useCallback((next: boolean) => {
|
||||
setOpenState(next);
|
||||
localStorage.setItem(KEY, String(next));
|
||||
}, []);
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
if (isMobile) setMobileOpen((o) => !o);
|
||||
else setOpen(!open);
|
||||
}, [isMobile, open, setOpen]);
|
||||
|
||||
return { open, setOpen, toggle, isMobile, mobileOpen, setMobileOpen };
|
||||
}
|
||||
356
src/index.css
356
src/index.css
@ -1,47 +1,333 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
/* Tailwind v4 dropped `darkMode: 'class'` from config — the class strategy is
|
||||
declared here instead. ThemeContext toggles `.dark` on <html>. */
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Raw palette
|
||||
Kept as plain custom properties so they can be re-declared under .dark;
|
||||
@theme below maps them into Tailwind's utility namespaces.
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
/* Faintly tinted rather than pure white — white cards need something to lift
|
||||
off, and the table now relies on card-vs-page contrast, not zebra rows. */
|
||||
--background: hsl(210 40% 98%);
|
||||
--foreground: hsl(217 33% 17%);
|
||||
|
||||
--card: hsl(0 0% 100%);
|
||||
--card-foreground: hsl(217 33% 17%);
|
||||
|
||||
--popover: hsl(0 0% 100%);
|
||||
--popover-foreground: hsl(217 33% 17%);
|
||||
|
||||
/* Brand — violet-600. Deep enough to clear WCAG AA on white for body text
|
||||
and CTAs; lighter violets are reserved for fills, chips and rings. */
|
||||
--primary: hsl(263 83% 58%);
|
||||
--primary-foreground: hsl(0 0% 100%);
|
||||
|
||||
--secondary: hsl(210 40% 96%);
|
||||
--secondary-foreground: hsl(217 33% 17%);
|
||||
|
||||
--muted: hsl(210 40% 96%);
|
||||
--muted-foreground: hsl(215 16% 47%);
|
||||
|
||||
--accent: hsl(251 91% 95%);
|
||||
--accent-foreground: hsl(263 83% 58%);
|
||||
|
||||
--destructive: hsl(0 84% 60%);
|
||||
--destructive-foreground: hsl(0 0% 100%);
|
||||
|
||||
--border: hsl(214 32% 91%);
|
||||
--input: hsl(214 32% 91%);
|
||||
--ring: hsl(263 83% 58%);
|
||||
|
||||
--radius: 0.625rem;
|
||||
|
||||
--sidebar: hsl(250 100% 99%);
|
||||
--sidebar-foreground: hsl(217 33% 17%);
|
||||
--sidebar-accent: hsl(251 91% 95%);
|
||||
--sidebar-accent-foreground: hsl(263 83% 58%);
|
||||
--sidebar-border: hsl(251 91% 95%);
|
||||
|
||||
/* Workflow states — single source of truth for status colour. lib/workflow.ts
|
||||
is the only thing that should map a state name onto these. */
|
||||
--state-submitted: hsl(199 89% 48%);
|
||||
--state-analysis: hsl(258 90% 66%);
|
||||
--state-clarification: hsl(38 92% 50%);
|
||||
--state-review: hsl(239 84% 67%);
|
||||
--state-approved: hsl(160 84% 39%);
|
||||
--state-rejected: hsl(0 84% 60%);
|
||||
--state-hold: hsl(215 20% 65%);
|
||||
|
||||
/* Charts reuse the state hues where a series *is* a state, so a status means
|
||||
the same colour in a table pill and in a donut slice. */
|
||||
--chart-1: hsl(263 83% 58%);
|
||||
--chart-2: hsl(292 84% 61%);
|
||||
--chart-3: hsl(239 84% 67%);
|
||||
--chart-4: hsl(199 89% 48%);
|
||||
--chart-5: hsl(160 84% 39%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: hsl(240 10% 4%);
|
||||
--foreground: hsl(240 5% 96%);
|
||||
|
||||
--card: hsl(240 6% 10%);
|
||||
--card-foreground: hsl(240 5% 96%);
|
||||
|
||||
--popover: hsl(240 6% 10%);
|
||||
--popover-foreground: hsl(240 5% 96%);
|
||||
|
||||
/* Lifted to violet-500 — violet-600 is too dark to read on near-black. */
|
||||
--primary: hsl(258 90% 66%);
|
||||
--primary-foreground: hsl(240 10% 4%);
|
||||
|
||||
--secondary: hsl(240 4% 16%);
|
||||
--secondary-foreground: hsl(240 5% 96%);
|
||||
|
||||
--muted: hsl(240 4% 16%);
|
||||
--muted-foreground: hsl(240 5% 65%);
|
||||
|
||||
--accent: hsl(263 50% 20%);
|
||||
--accent-foreground: hsl(258 90% 80%);
|
||||
|
||||
--destructive: hsl(0 72% 62%);
|
||||
--destructive-foreground: hsl(240 10% 4%);
|
||||
|
||||
--border: hsl(240 5% 20%);
|
||||
--input: hsl(240 5% 26%);
|
||||
--ring: hsl(258 90% 66%);
|
||||
|
||||
--sidebar: hsl(240 10% 4%);
|
||||
--sidebar-foreground: hsl(240 5% 96%);
|
||||
--sidebar-accent: hsl(263 45% 18%);
|
||||
--sidebar-accent-foreground: hsl(258 90% 80%);
|
||||
--sidebar-border: hsl(240 5% 16%);
|
||||
|
||||
--state-submitted: hsl(199 89% 60%);
|
||||
--state-analysis: hsl(258 90% 72%);
|
||||
--state-clarification: hsl(38 92% 60%);
|
||||
--state-review: hsl(239 84% 74%);
|
||||
--state-approved: hsl(160 70% 50%);
|
||||
--state-rejected: hsl(0 84% 68%);
|
||||
--state-hold: hsl(240 5% 55%);
|
||||
|
||||
--chart-1: hsl(258 90% 70%);
|
||||
--chart-2: hsl(292 84% 70%);
|
||||
--chart-3: hsl(239 84% 74%);
|
||||
--chart-4: hsl(199 89% 60%);
|
||||
--chart-5: hsl(160 70% 50%);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Theme — maps the palette into Tailwind namespaces.
|
||||
`inline` so the generated utilities reference var() directly and therefore
|
||||
respond to the .dark re-declarations above.
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
|
||||
--color-state-submitted: var(--state-submitted);
|
||||
--color-state-analysis: var(--state-analysis);
|
||||
--color-state-clarification: var(--state-clarification);
|
||||
--color-state-review: var(--state-review);
|
||||
--color-state-approved: var(--state-approved);
|
||||
--color-state-rejected: var(--state-rejected);
|
||||
--color-state-hold: var(--state-hold);
|
||||
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-2xl: calc(var(--radius) + 8px);
|
||||
|
||||
--font-sans: Inter, system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* Dense application type scale — replaces the ad-hoc text-[10px]…text-[26px]
|
||||
arbitrary values that were scattered through the components. */
|
||||
--text-2xs: 0.625rem;
|
||||
--text-2xs--line-height: 0.875rem;
|
||||
--text-xs: 0.6875rem;
|
||||
--text-xs--line-height: 1rem;
|
||||
--text-sm: 0.75rem;
|
||||
--text-sm--line-height: 1.125rem;
|
||||
--text-base: 0.8125rem;
|
||||
--text-base--line-height: 1.25rem;
|
||||
--text-md: 0.875rem;
|
||||
--text-md--line-height: 1.375rem;
|
||||
--text-lg: 0.9375rem;
|
||||
--text-lg--line-height: 1.5rem;
|
||||
--text-xl: 1.125rem;
|
||||
--text-xl--line-height: 1.625rem;
|
||||
--text-2xl: 1.375rem;
|
||||
--text-2xl--line-height: 1.75rem;
|
||||
--text-3xl: 1.625rem;
|
||||
--text-3xl--line-height: 2rem;
|
||||
--text-4xl: 2rem;
|
||||
--text-4xl--line-height: 2.375rem;
|
||||
--text-5xl: 2.625rem;
|
||||
--text-5xl--line-height: 1.1;
|
||||
|
||||
--animate-fade-in-up: fade-in-up 0.25s ease-out both;
|
||||
--animate-shimmer: shimmer 1.6s infinite;
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------- */
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply antialiased text-slate-800 dark:text-zinc-100 bg-white dark:bg-zinc-950;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
transition-property: background-color, border-color, color;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease;
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
/* Override transition for animations so they still work */
|
||||
.animate-spin, .animate-pulse {
|
||||
transition: none;
|
||||
body {
|
||||
@apply bg-background text-foreground text-base antialiased;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
}
|
||||
|
||||
/* Only the theme switch repaints animates. The previous global `*` transition
|
||||
on background/border/color made every table hover and mount pay for a
|
||||
transition it never needed. ThemeContext adds .theming for ~220ms. */
|
||||
.theming,
|
||||
.theming * {
|
||||
transition:
|
||||
background-color 180ms ease,
|
||||
border-color 180ms ease,
|
||||
color 180ms ease,
|
||||
fill 180ms ease;
|
||||
}
|
||||
|
||||
/* One consistent keyboard focus ring. focus-visible (not focus) so it only
|
||||
appears for keyboard nav; WCAG 2.2 requires a visible indicator. */
|
||||
:focus-visible {
|
||||
@apply outline-hidden ring-2 ring-ring/70 ring-offset-2 ring-offset-background;
|
||||
}
|
||||
|
||||
/* Inside table cells keep the ring inset so it isn't clipped by the cell. */
|
||||
th :focus-visible,
|
||||
td :focus-visible {
|
||||
@apply ring-offset-0;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
/* ---------------------------------------------------------------------------
|
||||
Reduced motion
|
||||
Decorative motion is stripped; functional feedback (focus rings, and colour
|
||||
that communicates state) is preserved.
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.glow-violet {
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
|
||||
}
|
||||
|
||||
.glow-fuchsia {
|
||||
box-shadow: 0 0 20px rgba(217, 70, 239, 0.25);
|
||||
}
|
||||
|
||||
.gradient-brand {
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7, #d946ef);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #7c3aed, #d946ef);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
/* Spinners still need to convey "working", just without the spin. */
|
||||
.animate-spin {
|
||||
animation: none !important;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@utility tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Skip link — first focusable element in the shell, visually hidden until
|
||||
focused. Must move focus, not merely scroll (WCAG 2.4.1). */
|
||||
@utility skip-link {
|
||||
@apply absolute left-4 top-4 z-100 -translate-y-24 rounded-md bg-primary px-4
|
||||
py-2 text-sm font-semibold text-primary-foreground shadow-lg
|
||||
transition-transform focus-visible:translate-y-0;
|
||||
}
|
||||
|
||||
@utility gradient-brand {
|
||||
background-image: linear-gradient(135deg, var(--primary), hsl(292 84% 61%));
|
||||
}
|
||||
|
||||
@utility gradient-text {
|
||||
background-image: linear-gradient(135deg, var(--primary), hsl(292 84% 61%));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@utility scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply rounded-full bg-border;
|
||||
}
|
||||
}
|
||||
|
||||
59
src/lib/format.ts
Normal file
59
src/lib/format.ts
Normal file
@ -0,0 +1,59 @@
|
||||
// Value formatting shared by the record view and the detail view. Previously
|
||||
// each had its own near-identical fmtVal/renderCell pair, which drifted.
|
||||
|
||||
const MONEY_HINTS = ["amount", "tax", "price", "cost", "total", "payment", "value"];
|
||||
|
||||
export const isMoneyField = (key: string) => {
|
||||
const k = key.toLowerCase();
|
||||
return MONEY_HINTS.some((h) => k.includes(h));
|
||||
};
|
||||
|
||||
export function formatCurrency(n: number, compact = false): string {
|
||||
return n.toLocaleString("en-IN", {
|
||||
style: "currency",
|
||||
currency: "INR",
|
||||
maximumFractionDigits: 0,
|
||||
...(compact ? { notation: "compact", compactDisplay: "short" } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
export function formatDate(value: string): string {
|
||||
const d = new Date(value);
|
||||
if (Number.isNaN(d.getTime())) return value;
|
||||
return d.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" });
|
||||
}
|
||||
|
||||
/** Clock time, or null when the value carries no time component. */
|
||||
export function formatTime(value: string): string | null {
|
||||
const d = new Date(value);
|
||||
if (Number.isNaN(d.getTime())) return null;
|
||||
if (!/[T\s]\d{2}:\d{2}/.test(value)) return null;
|
||||
return d.toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
|
||||
/** "3 days ago" / "in 2 days" — for aging and timeline captions. */
|
||||
export function formatRelative(value: string): string | null {
|
||||
const d = new Date(value);
|
||||
if (Number.isNaN(d.getTime())) return null;
|
||||
const diffDays = Math.round((d.getTime() - Date.now()) / 86_400_000);
|
||||
if (diffDays === 0) return "today";
|
||||
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
|
||||
if (Math.abs(diffDays) < 31) return rtf.format(diffDays, "day");
|
||||
return rtf.format(Math.round(diffDays / 30), "month");
|
||||
}
|
||||
|
||||
export function formatLabel(label: string): string {
|
||||
return label.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
/** Plain-text formatting of a view value, honouring its declared data_type. */
|
||||
export function formatValue(value: unknown, dataType: string, fieldKey: string): string {
|
||||
if (value == null || value === "") return "—";
|
||||
if (dataType === "number") {
|
||||
const n = Number(value);
|
||||
if (!Number.isFinite(n)) return String(value);
|
||||
return isMoneyField(fieldKey) ? formatCurrency(n) : n.toLocaleString("en-IN");
|
||||
}
|
||||
if (dataType === "date" || dataType === "datetime") return formatDate(String(value));
|
||||
return String(value);
|
||||
}
|
||||
19
src/lib/palette.ts
Normal file
19
src/lib/palette.ts
Normal file
@ -0,0 +1,19 @@
|
||||
// Categorical colours for things that aren't workflow states — vendor avatars
|
||||
// and vendor bars. Deliberately separate from --chart-* (which reuses the state
|
||||
// hues, magenta included) so arbitrary categories read as distinct without
|
||||
// implying a status.
|
||||
|
||||
export const CATEGORY_COLORS = [
|
||||
"hsl(263 83% 58%)", // violet
|
||||
"hsl(199 89% 48%)", // sky
|
||||
"hsl(160 84% 39%)", // emerald
|
||||
"hsl(38 92% 50%)", // amber
|
||||
"hsl(239 84% 67%)", // indigo
|
||||
"hsl(174 72% 41%)", // teal
|
||||
];
|
||||
|
||||
/** Stable colour for a name — the same vendor keeps its hue across pages. */
|
||||
export function colorForName(name: string): string {
|
||||
const hash = [...name].reduce((n, c) => n + c.charCodeAt(0), 0);
|
||||
return CATEGORY_COLORS[hash % CATEGORY_COLORS.length];
|
||||
}
|
||||
50
src/lib/tableParams.ts
Normal file
50
src/lib/tableParams.ts
Normal file
@ -0,0 +1,50 @@
|
||||
// Shared URL state for the record view.
|
||||
//
|
||||
// Table sort/page/search/filters used to live in component state, so a refresh
|
||||
// or a shared link lost the user's view entirely. These parsers put it in the
|
||||
// query string instead, which also lets the dashboard tiles act as filters —
|
||||
// a tile writes `status`, the table reads it.
|
||||
|
||||
import {
|
||||
parseAsArrayOf,
|
||||
parseAsInteger,
|
||||
parseAsString,
|
||||
parseAsStringLiteral,
|
||||
} from "nuqs";
|
||||
|
||||
export const DENSITIES = ["compact", "regular", "relaxed"] as const;
|
||||
export type Density = (typeof DENSITIES)[number];
|
||||
|
||||
/** Row heights per density — the 40/48/56px convention. */
|
||||
export const DENSITY_ROW: Record<Density, string> = {
|
||||
compact: "h-10",
|
||||
regular: "h-12",
|
||||
relaxed: "h-14",
|
||||
};
|
||||
|
||||
export const DENSITY_CELL: Record<Density, string> = {
|
||||
compact: "py-1.5",
|
||||
regular: "py-3",
|
||||
relaxed: "py-4",
|
||||
};
|
||||
|
||||
export const tableParams = {
|
||||
q: parseAsString.withDefault(""),
|
||||
page: parseAsInteger.withDefault(1),
|
||||
limit: parseAsInteger.withDefault(10),
|
||||
sort: parseAsString.withDefault(""),
|
||||
dir: parseAsStringLiteral(["asc", "desc"] as const).withDefault("desc"),
|
||||
/** Workflow state names, matching `current_state_name`. */
|
||||
status: parseAsArrayOf(parseAsString).withDefault([]),
|
||||
density: parseAsStringLiteral(DENSITIES).withDefault("regular"),
|
||||
};
|
||||
|
||||
/**
|
||||
* Keep the URL short: nuqs omits any value equal to its default, and history
|
||||
* is replaced rather than pushed so filtering doesn't fill the back button.
|
||||
*/
|
||||
export const tableParamsOptions = {
|
||||
history: "replace" as const,
|
||||
clearOnDefault: true,
|
||||
shallow: true,
|
||||
};
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
330
src/lib/workflow.ts
Normal file
330
src/lib/workflow.ts
Normal file
@ -0,0 +1,330 @@
|
||||
// Single source of truth for workflow state presentation.
|
||||
//
|
||||
// Before this, STATUS colour maps were duplicated in RecordViewTable and
|
||||
// DetailViewPanel with different shapes (one used bg/text/dot/dark*, the other
|
||||
// pill/dot/bar), so a state could legitimately render two different colours in
|
||||
// two places. Everything state-shaped now resolves through here.
|
||||
//
|
||||
// Matching is by `current_state_name` because that is what the record- and
|
||||
// detail-view payloads actually carry. STATE_IDS UUIDs are kept alongside for
|
||||
// the places that compare against `current_state_id` (instance payloads).
|
||||
|
||||
import {
|
||||
AlertCircle,
|
||||
Ban,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
FileText,
|
||||
PauseCircle,
|
||||
Sparkles,
|
||||
Truck,
|
||||
XCircle,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { ACTIVITY_IDS, STATE_IDS } from "../config";
|
||||
|
||||
export type StateKey =
|
||||
| "submitted"
|
||||
| "analysis"
|
||||
| "clarification"
|
||||
| "review"
|
||||
| "approved"
|
||||
| "rejected"
|
||||
| "hold";
|
||||
|
||||
export interface StateTone {
|
||||
/** Foreground for the label. */
|
||||
text: string;
|
||||
/** Tinted fill for pills and row accents. */
|
||||
bg: string;
|
||||
/** Hairline for pills. */
|
||||
border: string;
|
||||
/** Solid dot / progress bar. */
|
||||
solid: string;
|
||||
/** Raw CSS colour for non-Tailwind consumers (recharts fills). */
|
||||
css: string;
|
||||
}
|
||||
|
||||
export interface WorkflowState {
|
||||
key: StateKey;
|
||||
/** STATE_IDS uuid — compare against instance.current_state_id. */
|
||||
id: string;
|
||||
/** Canonical `current_state_name` from the view payloads. */
|
||||
name: string;
|
||||
/** Other spellings the payloads use for the same state. */
|
||||
aliases?: string[];
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
tone: StateTone;
|
||||
/** Position on the happy path, or null for off-path outcomes. */
|
||||
step: number | null;
|
||||
terminal: boolean;
|
||||
}
|
||||
|
||||
// Class strings are written out literally rather than composed, so Tailwind's
|
||||
// scanner can see every one of them.
|
||||
const TONES: Record<StateKey, StateTone> = {
|
||||
submitted: {
|
||||
text: "text-state-submitted",
|
||||
bg: "bg-state-submitted/10",
|
||||
border: "border-state-submitted/25",
|
||||
solid: "bg-state-submitted",
|
||||
css: "var(--state-submitted)",
|
||||
},
|
||||
analysis: {
|
||||
text: "text-state-analysis",
|
||||
bg: "bg-state-analysis/10",
|
||||
border: "border-state-analysis/25",
|
||||
solid: "bg-state-analysis",
|
||||
css: "var(--state-analysis)",
|
||||
},
|
||||
clarification: {
|
||||
text: "text-state-clarification",
|
||||
bg: "bg-state-clarification/10",
|
||||
border: "border-state-clarification/25",
|
||||
solid: "bg-state-clarification",
|
||||
css: "var(--state-clarification)",
|
||||
},
|
||||
review: {
|
||||
text: "text-state-review",
|
||||
bg: "bg-state-review/10",
|
||||
border: "border-state-review/25",
|
||||
solid: "bg-state-review",
|
||||
css: "var(--state-review)",
|
||||
},
|
||||
approved: {
|
||||
text: "text-state-approved",
|
||||
bg: "bg-state-approved/10",
|
||||
border: "border-state-approved/25",
|
||||
solid: "bg-state-approved",
|
||||
css: "var(--state-approved)",
|
||||
},
|
||||
rejected: {
|
||||
text: "text-state-rejected",
|
||||
bg: "bg-state-rejected/10",
|
||||
border: "border-state-rejected/25",
|
||||
solid: "bg-state-rejected",
|
||||
css: "var(--state-rejected)",
|
||||
},
|
||||
hold: {
|
||||
text: "text-state-hold",
|
||||
bg: "bg-state-hold/10",
|
||||
border: "border-state-hold/25",
|
||||
solid: "bg-state-hold",
|
||||
css: "var(--state-hold)",
|
||||
},
|
||||
};
|
||||
|
||||
/** Ordered by the happy path — drives the detail-view stepper. */
|
||||
export const WORKFLOW_STATES: WorkflowState[] = [
|
||||
{
|
||||
key: "submitted",
|
||||
id: STATE_IDS.INVOICE_SUBMITTED,
|
||||
name: "Invoice Submitted",
|
||||
label: "Submitted",
|
||||
icon: FileText,
|
||||
tone: TONES.submitted,
|
||||
step: 0,
|
||||
terminal: false,
|
||||
},
|
||||
{
|
||||
key: "analysis",
|
||||
id: STATE_IDS.AI_ANALYSIS,
|
||||
name: "AI Analysis",
|
||||
label: "AI Analysis",
|
||||
icon: Sparkles,
|
||||
tone: TONES.analysis,
|
||||
step: 1,
|
||||
terminal: false,
|
||||
},
|
||||
{
|
||||
key: "clarification",
|
||||
id: STATE_IDS.AWAITING_CLARIFICATION,
|
||||
name: "Awaiting Clarification",
|
||||
label: "Awaiting Clarification",
|
||||
icon: AlertCircle,
|
||||
tone: TONES.clarification,
|
||||
step: 2,
|
||||
terminal: false,
|
||||
},
|
||||
{
|
||||
key: "review",
|
||||
id: STATE_IDS.FINANCE_REVIEW,
|
||||
// The record view serves "Financial Review"; older payloads say
|
||||
// "Finance Review". Both must resolve to this state or the rows fall
|
||||
// through to the unstyled fallback and drop out of every count.
|
||||
name: "Financial Review",
|
||||
aliases: ["Finance Review"],
|
||||
label: "Finance Review",
|
||||
icon: Clock,
|
||||
tone: TONES.review,
|
||||
step: 3,
|
||||
terminal: false,
|
||||
},
|
||||
{
|
||||
key: "approved",
|
||||
id: STATE_IDS.APPROVED,
|
||||
name: "Approved",
|
||||
label: "Approved",
|
||||
icon: CheckCircle2,
|
||||
tone: TONES.approved,
|
||||
step: 4,
|
||||
terminal: true,
|
||||
},
|
||||
{
|
||||
key: "rejected",
|
||||
id: STATE_IDS.REJECTED,
|
||||
name: "Rejected",
|
||||
label: "Rejected",
|
||||
icon: XCircle,
|
||||
tone: TONES.rejected,
|
||||
step: null,
|
||||
terminal: true,
|
||||
},
|
||||
{
|
||||
key: "hold",
|
||||
id: STATE_IDS.ON_HOLD,
|
||||
name: "On Hold",
|
||||
label: "On Hold",
|
||||
icon: PauseCircle,
|
||||
tone: TONES.hold,
|
||||
step: null,
|
||||
terminal: false,
|
||||
},
|
||||
];
|
||||
|
||||
/** The happy path, for the stepper. Excludes off-path outcomes. */
|
||||
export const HAPPY_PATH = WORKFLOW_STATES.filter((s) => s.step !== null).sort(
|
||||
(a, b) => (a.step as number) - (b.step as number),
|
||||
);
|
||||
|
||||
const BY_NAME = new Map(
|
||||
WORKFLOW_STATES.flatMap((s) =>
|
||||
[s.name, ...(s.aliases ?? [])].map((n) => [n.toLowerCase(), s] as const),
|
||||
),
|
||||
);
|
||||
const BY_ID = new Map(WORKFLOW_STATES.map((s) => [s.id, s]));
|
||||
|
||||
// The RDBMS purchase-order views carry a `po_status` with its own vocabulary.
|
||||
// Reusing the invoice tones keeps one colour language across both record types.
|
||||
const PO_STATUSES: Record<string, { label: string; icon: LucideIcon; tone: StateTone }> = {
|
||||
pending: { label: "Pending", icon: Clock, tone: TONES.clarification },
|
||||
delivered: { label: "Delivered", icon: Truck, tone: TONES.submitted },
|
||||
cancelled: { label: "Cancelled", icon: Ban, tone: TONES.rejected },
|
||||
};
|
||||
|
||||
export interface ResolvedStatus {
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
tone: StateTone;
|
||||
/** True for the state whose dot should pulse (work in progress). */
|
||||
pulse: boolean;
|
||||
state?: WorkflowState;
|
||||
}
|
||||
|
||||
const FALLBACK_TONE = TONES.hold;
|
||||
|
||||
/** Resolve any status string — invoice state name or PO status — for display. */
|
||||
export function resolveStatus(value: string | null | undefined): ResolvedStatus | null {
|
||||
if (!value) return null;
|
||||
const key = String(value).trim();
|
||||
if (!key) return null;
|
||||
|
||||
const state = BY_NAME.get(key.toLowerCase());
|
||||
if (state) {
|
||||
return {
|
||||
label: state.label,
|
||||
icon: state.icon,
|
||||
tone: state.tone,
|
||||
pulse: state.key === "analysis",
|
||||
state,
|
||||
};
|
||||
}
|
||||
|
||||
const po = PO_STATUSES[key.toLowerCase()];
|
||||
if (po) return { label: po.label, icon: po.icon, tone: po.tone, pulse: false };
|
||||
|
||||
// Unknown status still renders, just without a colour opinion.
|
||||
return { label: key, icon: FileText, tone: FALLBACK_TONE, pulse: false };
|
||||
}
|
||||
|
||||
export const stateByName = (name: string | null | undefined) =>
|
||||
name ? BY_NAME.get(String(name).trim().toLowerCase()) : undefined;
|
||||
|
||||
export const stateById = (id: string | null | undefined) =>
|
||||
id ? BY_ID.get(id) : undefined;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Actions available in each state
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export type ActionStyle = "primary" | "danger" | "ghost";
|
||||
|
||||
export interface StateAction {
|
||||
activityId: string;
|
||||
label: string;
|
||||
/** Shorter label for the cramped row menu. */
|
||||
shortLabel: string;
|
||||
icon: LucideIcon;
|
||||
style: ActionStyle;
|
||||
/** Requires a confirm step / offers undo, because it ends the invoice. */
|
||||
destructive: boolean;
|
||||
}
|
||||
|
||||
const ACTIONS: Record<string, StateAction> = {
|
||||
clarify: {
|
||||
activityId: ACTIVITY_IDS.PROVIDE_CLARIFICATION,
|
||||
label: "Provide Clarification",
|
||||
shortLabel: "Clarify",
|
||||
icon: AlertCircle,
|
||||
style: "primary",
|
||||
destructive: false,
|
||||
},
|
||||
approve: {
|
||||
activityId: ACTIVITY_IDS.APPROVE_PAYMENT,
|
||||
label: "Approve",
|
||||
shortLabel: "Approve",
|
||||
icon: CheckCircle2,
|
||||
style: "primary",
|
||||
destructive: false,
|
||||
},
|
||||
reject: {
|
||||
activityId: ACTIVITY_IDS.REJECT_PAYMENT,
|
||||
label: "Reject",
|
||||
shortLabel: "Reject",
|
||||
icon: XCircle,
|
||||
style: "danger",
|
||||
destructive: true,
|
||||
},
|
||||
hold: {
|
||||
activityId: ACTIVITY_IDS.HOLD_PAYMENT,
|
||||
label: "Hold",
|
||||
shortLabel: "Hold",
|
||||
icon: PauseCircle,
|
||||
style: "ghost",
|
||||
destructive: false,
|
||||
},
|
||||
};
|
||||
|
||||
const ACTIONS_BY_STATE: Partial<Record<StateKey, StateAction[]>> = {
|
||||
clarification: [ACTIONS.clarify],
|
||||
review: [ACTIONS.approve, ACTIONS.reject, ACTIONS.hold],
|
||||
};
|
||||
|
||||
/**
|
||||
* Actions offered for a state name.
|
||||
*
|
||||
* Replaces a reverse-lookup in RecordViewTable that tried to rebuild a state
|
||||
* name by stripping a `p2p-state-` prefix off each STATE_IDS value. Those
|
||||
* values are UUIDs, so the comparison never matched and the row action menu
|
||||
* never rendered at all.
|
||||
*/
|
||||
export function actionsForStateName(name: string | null | undefined): StateAction[] {
|
||||
const state = stateByName(name);
|
||||
return state ? (ACTIONS_BY_STATE[state.key] ?? []) : [];
|
||||
}
|
||||
|
||||
export function actionsForStateId(id: string | null | undefined): StateAction[] {
|
||||
const state = stateById(id);
|
||||
return state ? (ACTIONS_BY_STATE[state.key] ?? []) : [];
|
||||
}
|
||||
16
src/main.tsx
16
src/main.tsx
@ -1,9 +1,12 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { NuqsAdapter } from 'nuqs/adapters/react-router/v6'
|
||||
import { ZinoProvider } from './zino-sdk'
|
||||
import { AuthProvider } from './hooks/AuthContext'
|
||||
import { ThemeProvider } from './hooks/ThemeContext'
|
||||
import { TooltipProvider } from './components/ui/tooltip'
|
||||
import { Toaster } from './components/ui/sonner'
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
|
||||
@ -14,9 +17,16 @@ createRoot(document.getElementById('root')!).render(
|
||||
<ThemeProvider>
|
||||
<ZinoProvider baseUrl={apiUrl}>
|
||||
<BrowserRouter basename={import.meta.env.BASE_URL}>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
{/* NuqsAdapter must sit inside the router — it reads and writes the
|
||||
router's search params, so table state can live in the URL. */}
|
||||
<NuqsAdapter>
|
||||
<AuthProvider>
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<App />
|
||||
<Toaster />
|
||||
</TooltipProvider>
|
||||
</AuthProvider>
|
||||
</NuqsAdapter>
|
||||
</BrowserRouter>
|
||||
</ZinoProvider>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -1,16 +1,33 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useAuthContext } from "../hooks/AuthContext";
|
||||
import { ShieldCheck, Zap, BarChart3, Bot, ArrowRight } from "lucide-react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { ArrowRight, BarChart3, Bot, Loader2, ShieldCheck, Zap } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useAuthContext } from "@/hooks/AuthContext";
|
||||
import { ORG_ID } from "@/config";
|
||||
|
||||
const HIGHLIGHTS = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Instant Validation",
|
||||
desc: "AI matches invoices against POs and GRNs in seconds",
|
||||
},
|
||||
{ icon: Bot, title: "Smart Routing", desc: "Exceptions auto-route to the right department" },
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Full Audit Trail",
|
||||
desc: "Complete visibility from submission to payment",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Login() {
|
||||
const { login, loading, error, clearError } = useAuthContext();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [orgId] = useState("47");
|
||||
|
||||
const from = (location.state as any)?.from?.pathname || "/";
|
||||
|
||||
@ -18,132 +35,176 @@ export default function Login() {
|
||||
e.preventDefault();
|
||||
clearError();
|
||||
try {
|
||||
await login({ email, password, orgId: orgId || undefined });
|
||||
// Org id comes from config rather than a hardcoded literal in component state.
|
||||
await login({ email, password, orgId: ORG_ID });
|
||||
navigate(from, { replace: true });
|
||||
} catch {}
|
||||
} catch {
|
||||
// AuthContext surfaces the message through `error`.
|
||||
}
|
||||
};
|
||||
|
||||
const inputCls = "w-full h-11 border border-slate-200 dark:border-zinc-700 rounded-lg px-3.5 text-[13px] bg-slate-50 dark:bg-zinc-800/60 text-slate-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-violet-500/20 focus:border-violet-400 dark:focus:border-violet-500 focus:bg-white dark:focus:bg-zinc-800 transition placeholder:text-slate-400 dark:placeholder:text-zinc-600";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex dark:bg-zinc-950">
|
||||
|
||||
{/* ── Left — branding ─────────────────────────────────────────── */}
|
||||
<div className="hidden lg:flex lg:w-[45%] items-center justify-center p-16 relative overflow-hidden"
|
||||
style={{ background: "linear-gradient(145deg, #1e1040 0%, #2d1567 40%, #1a0f3a 70%, #0f0a2e 100%)" }}>
|
||||
{/* Orbs */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-32 -left-32 w-[500px] h-[500px] rounded-full opacity-30"
|
||||
style={{ background: "radial-gradient(circle, #7c3aed 0%, transparent 70%)" }} />
|
||||
<div className="absolute -bottom-20 -right-20 w-96 h-96 rounded-full opacity-20"
|
||||
style={{ background: "radial-gradient(circle, #d946ef 0%, transparent 70%)" }} />
|
||||
<div className="absolute inset-0 opacity-[0.04]"
|
||||
style={{ backgroundImage: "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)", backgroundSize: "40px 40px" }} />
|
||||
<div className="flex min-h-screen bg-background">
|
||||
{/* ── Left — branding ───────────────────────────────────────────────── */}
|
||||
<div className="relative hidden overflow-hidden p-16 lg:flex lg:w-[45%] lg:items-center lg:justify-center">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, #1e1040 0%, #2d1567 40%, #1a0f3a 70%, #0f0a2e 100%)",
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
{/* Decorative orbs + grid */}
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
|
||||
<div
|
||||
className="absolute -left-32 -top-32 size-[500px] rounded-full opacity-30"
|
||||
style={{ background: "radial-gradient(circle, #7c3aed 0%, transparent 70%)" }}
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-20 -right-20 size-96 rounded-full opacity-20"
|
||||
style={{ background: "radial-gradient(circle, #d946ef 0%, transparent 70%)" }}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.04]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
|
||||
backgroundSize: "40px 40px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-10 left-16 z-10">
|
||||
<img src={import.meta.env.BASE_URL + "zino.svg"} alt="Zino" className="h-5 w-auto brightness-0 invert" />
|
||||
</div>
|
||||
<img
|
||||
src={import.meta.env.BASE_URL + "zino.svg"}
|
||||
alt="Zino"
|
||||
className="absolute left-16 top-10 z-10 h-5 w-auto brightness-0 invert"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-lg">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium mb-8 border"
|
||||
style={{ background: "rgba(124,58,237,0.2)", borderColor: "rgba(167,139,250,0.3)", color: "#c4b5fd" }}>
|
||||
<ShieldCheck size={13} />
|
||||
<span className="mb-8 inline-flex items-center gap-2 rounded-full border border-violet-300/30 bg-primary/20 px-3 py-1.5 text-sm font-medium text-violet-200">
|
||||
<ShieldCheck className="size-3.5" aria-hidden />
|
||||
Enterprise-grade procurement automation
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<h1 className="text-[2.6rem] font-bold text-white leading-[1.1] tracking-tight mb-8">
|
||||
<h1 className="mb-8 text-5xl font-bold tracking-tight text-white">
|
||||
Procure-to-Pay
|
||||
<br />
|
||||
<span className="text-transparent bg-clip-text"
|
||||
style={{ backgroundImage: "linear-gradient(135deg, #c4b5fd, #f0abfc, #67e8f9)" }}>
|
||||
<span
|
||||
className="bg-clip-text text-transparent"
|
||||
style={{ backgroundImage: "linear-gradient(135deg, #c4b5fd, #f0abfc, #67e8f9)" }}
|
||||
>
|
||||
Invoice Intelligence
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ icon: <Zap size={15} />, title: "Instant Validation", desc: "AI matches invoices against POs and GRNs in seconds" },
|
||||
{ icon: <Bot size={15} />, title: "Smart Routing", desc: "Exceptions auto-route to the right department" },
|
||||
{ icon: <BarChart3 size={15} />, title: "Full Audit Trail", desc: "Complete visibility from submission to payment" },
|
||||
].map((item) => (
|
||||
<div key={item.title} className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
|
||||
style={{ background: "rgba(124,58,237,0.3)", border: "1px solid rgba(167,139,250,0.25)", color: "#c4b5fd" }}>
|
||||
{item.icon}
|
||||
</div>
|
||||
<ul className="space-y-4">
|
||||
{HIGHLIGHTS.map(({ icon: Icon, title, desc }) => (
|
||||
<li key={title} className="flex items-start gap-3">
|
||||
<span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-violet-300/25 bg-primary/25 text-violet-200">
|
||||
<Icon className="size-3.5" aria-hidden />
|
||||
</span>
|
||||
<div>
|
||||
<div className="text-[13px] font-semibold text-white">{item.title}</div>
|
||||
<div className="text-[12px] mt-0.5" style={{ color: "rgba(167,139,250,0.65)" }}>{item.desc}</div>
|
||||
<p className="text-base font-semibold text-white">{title}</p>
|
||||
<p className="mt-0.5 text-sm text-violet-200/70">{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Right — login form ───────────────────────────────────────── */}
|
||||
<div className="flex-1 flex items-center justify-center bg-white dark:bg-zinc-950 px-8">
|
||||
{/* ── Right — form ──────────────────────────────────────────────────── */}
|
||||
<div className="flex flex-1 items-center justify-center px-6">
|
||||
<div className="w-full max-w-[340px]">
|
||||
<img
|
||||
src={import.meta.env.BASE_URL + "zino.svg"}
|
||||
alt="Zino"
|
||||
className="mb-10 h-5 w-auto dark:invert lg:hidden"
|
||||
/>
|
||||
|
||||
{/* Logo — visible on mobile only */}
|
||||
<img src={import.meta.env.BASE_URL + "zino.svg"} alt="Zino"
|
||||
className="h-5 w-auto mb-10 lg:hidden dark:invert" />
|
||||
|
||||
{/* Heading */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[1.6rem] font-bold text-slate-900 dark:text-zinc-50 tracking-tight leading-none mb-2">
|
||||
Sign in
|
||||
</h2>
|
||||
<p className="text-[13px] text-slate-400 dark:text-zinc-500">
|
||||
Enter your credentials to access the portal
|
||||
<h2 className="text-4xl font-bold tracking-tight text-foreground">Sign in</h2>
|
||||
<p className="mt-1.5 text-base text-muted-foreground">
|
||||
Enter your credentials to access the portal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-slate-600 dark:text-zinc-400 mb-1.5 uppercase tracking-wide">
|
||||
<Label htmlFor="email" className="mb-1.5">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email" required autoComplete="email" autoFocus
|
||||
value={email} onChange={(e) => { setEmail(e.target.value); clearError(); }}
|
||||
className={inputCls} placeholder="you@company.com"
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
value={email}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
clearError();
|
||||
}}
|
||||
aria-invalid={!!error}
|
||||
placeholder="you@company.com"
|
||||
className="h-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-slate-600 dark:text-zinc-400 mb-1.5 uppercase tracking-wide">
|
||||
<Label htmlFor="password" className="mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password" required autoComplete="current-password"
|
||||
value={password} onChange={(e) => { setPassword(e.target.value); clearError(); }}
|
||||
className={inputCls} placeholder="••••••••"
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
clearError();
|
||||
}}
|
||||
aria-invalid={!!error}
|
||||
aria-describedby={error ? "login-error" : undefined}
|
||||
placeholder="••••••••"
|
||||
className="h-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-[12px] text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30 rounded-lg px-3 py-2.5 border border-red-100 dark:border-red-900/60">
|
||||
<p
|
||||
id="login-error"
|
||||
role="alert"
|
||||
className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-sm text-destructive"
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit" disabled={loading}
|
||||
className="w-full h-11 mt-1 disabled:opacity-50 text-white text-[13px] font-semibold rounded-lg transition-all flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.99]"
|
||||
style={{ background: "linear-gradient(135deg, #7c3aed, #a855f7)" }}
|
||||
>
|
||||
{loading ? "Signing in…" : <>Sign in <ArrowRight size={14} /></>}
|
||||
</button>
|
||||
<Button type="submit" disabled={loading} className="h-10 w-full">
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="size-3.5 animate-spin" aria-hidden />
|
||||
Signing in…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Sign in
|
||||
<ArrowRight className="size-3.5" aria-hidden />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-center gap-1.5 mt-10">
|
||||
<span className="text-[11px] text-slate-400 dark:text-zinc-500">Powered by</span>
|
||||
<img src={import.meta.env.BASE_URL + "zino.svg"} alt="Zino"
|
||||
className="h-3.5 w-auto dark:invert" />
|
||||
<div className="mt-10 flex items-center justify-center gap-1.5">
|
||||
<span className="text-xs text-muted-foreground">Powered by</span>
|
||||
<img
|
||||
src={import.meta.env.BASE_URL + "zino.svg"}
|
||||
alt="Zino"
|
||||
className="h-3.5 w-auto dark:invert"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -137,7 +137,7 @@ function renderField(
|
||||
onChange: (value: string) => void,
|
||||
) {
|
||||
const baseClass =
|
||||
"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
|
||||
"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent";
|
||||
|
||||
switch (field.type) {
|
||||
case "paragraph":
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
@ -13,7 +13,11 @@
|
||||
"jsx": "react-jsx",
|
||||
"strict": false,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false
|
||||
"noUnusedParameters": false,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@ -3,5 +3,11 @@
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -9,7 +9,8 @@
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true
|
||||
"strict": true,
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -1,11 +1,16 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
const devTarget = 'https://studio.getzino.in'
|
||||
const proxy = (target: string) => ({ target, changeOrigin: true, secure: false })
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
|
||||
},
|
||||
base: process.env.VITE_BASE_URL ?? '/p2p/',
|
||||
server: {
|
||||
port: 3007,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user