@appcorp/fusion-storybook 0.4.42 → 0.4.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/base-modules/bulk-operations/page.js +2 -2
  2. package/base-modules/bulk-operations/view.js +33 -3
  3. package/package.json +1 -1
  4. package/tsconfig.build.tsbuildinfo +1 -1
  5. package/types/bulk-operations.d.ts +20 -0
package/base-modules/bulk-operations/page.js CHANGED
@@ -65,8 +65,8 @@ const createBulkOperationsConfig = ({ cancelLabel, dispatch, drawerFilterDescrip
65
65
  { label: labelType, width: "40%" },
66
66
  { label: labelStatus, width: "10%" },
67
67
  { label: labelProgress, width: "10%" },
68
- { label: labelExpiresIn, width: "20%" },
69
- { label: labelState, width: "10%" },
68
+ { label: labelExpiresIn, width: "10%" },
69
+ { label: labelState, width: "20%" },
70
70
  { label: labelActions, width: "5%" },
71
71
  ],
72
72
  cancelLabel,
package/base-modules/bulk-operations/view.js CHANGED
@@ -6,11 +6,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
6
  * Read-only details view for a single bulk job record. The row data is spread
7
7
  * into top-level module state (SET_FORM_DATA) when the row's View action fires.
8
8
  */
9
+ import { useMemo } from "react";
9
10
  import { useTranslations } from "next-intl";
11
+ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@appcorp/shadcn/components/ui/accordion";
10
12
  import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@appcorp/shadcn/components/ui/card";
11
13
  import { Badge } from "@appcorp/shadcn/components/ui/badge";
12
14
  import { Separator } from "@appcorp/shadcn/components/ui/separator";
13
- import { CheckCircle2, ClipboardList, Clock, Layers, ListChecks, Timer, XCircle, } from "lucide-react";
15
+ import { CheckCircle2, ClipboardList, Clock, FileText, Layers, ListChecks, Timer, XCircle, } from "lucide-react";
14
16
  import { DATE_FORMATS, formatDate, } from "@react-pakistan/util-functions/general/format-date";
15
17
  import { formatSecs } from "@react-pakistan/util-functions/general/format-secs";
16
18
  import { useBulkOperationsContext } from "./context";
@@ -20,17 +22,45 @@ const STATUS_VARIANT = {
20
22
  queued: "outline",
21
23
  failed: "destructive",
22
24
  };
25
+ const ITEM_STATUS_VARIANT = {
26
+ error: "destructive",
27
+ skipped: "outline",
28
+ success: "default",
29
+ };
30
+ const ITEM_BORDER_COLOR = {
31
+ error: "border-l-red-500",
32
+ skipped: "border-l-amber-500",
33
+ success: "border-l-green-500",
34
+ };
35
+ const ITEM_STATUS_I18N = {
36
+ error: "viewItemStatusError",
37
+ skipped: "viewItemStatusSkipped",
38
+ success: "viewItemStatusSuccess",
39
+ };
23
40
  export const BulkOperationsView = () => {
24
41
  var _a, _b, _c, _d, _e, _f, _g;
25
42
  const { state } = useBulkOperationsContext();
26
43
  const { createdAt, jobId, processed, results, status, total, ttlSeconds, type, updatedAt, webhookUrl, } = state;
27
44
  const t = useTranslations("bulkOperations");
45
+ const jobResults = (results !== null && results !== void 0 ? results : null);
46
+ const sortedItems = useMemo(() => {
47
+ const res = (results !== null && results !== void 0 ? results : null);
48
+ if (!(res === null || res === void 0 ? void 0 : res.items))
49
+ return [];
50
+ return [...res.items].sort((a, b) => {
51
+ var _a, _b;
52
+ const order = { error: 0, skipped: 1, success: 2 };
53
+ return ((_a = order[a.status]) !== null && _a !== void 0 ? _a : 3) - ((_b = order[b.status]) !== null && _b !== void 0 ? _b : 3);
54
+ });
55
+ }, [results]);
28
56
  if (!jobId)
29
57
  return null;
30
58
  const fmt = (v) => v ? formatDate(v, DATE_FORMATS.LOCALE_DATE) : "—";
31
- const jobResults = (results !== null && results !== void 0 ? results : null);
32
59
  return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ClipboardList, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("viewSectionJobDetails") })] }), _jsx(CardDescription, { children: t("viewSectionJobDescription") })] }), _jsx(Separator, {}), _jsx(CardContent, { className: "pt-6", children: _jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldJobId") }), _jsx("p", { className: "font-mono text-right text-sm break-all", children: jobId })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldType") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Layers, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-right text-sm", children: type })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldStatus") }), _jsx(Badge, { variant: (_a = STATUS_VARIANT[status !== null && status !== void 0 ? status : "queued"]) !== null && _a !== void 0 ? _a : "secondary", children: status || "—" })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldExpiresIn") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Timer, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-right text-sm", children: ttlSeconds != null ? formatSecs(ttlSeconds) : "—" })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldProgress") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ListChecks, { className: "text-muted-foreground h-4 w-4" }), _jsxs("p", { className: "text-right text-sm", children: [processed !== null && processed !== void 0 ? processed : 0, " / ", total !== null && total !== void 0 ? total : 0] })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldCreated") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-right text-sm", children: fmt(createdAt) })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldUpdated") }), _jsx("p", { className: "text-right text-sm", children: fmt(updatedAt) })] }), webhookUrl ? (_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldWebhook") }), _jsx("p", { className: "text-right text-sm break-all", children: webhookUrl })] })) : null] }) })] }), jobResults ? (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ListChecks, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("viewSectionResults") })] }), _jsx(CardDescription, { children: t("viewSectionResultsDescription") })] }), _jsx(Separator, {}), _jsxs(CardContent, { className: "pt-6", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldTotal") }), _jsx("p", { className: "text-right text-sm", children: (_b = jobResults.total) !== null && _b !== void 0 ? _b : 0 })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "text-green-600 h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldCreated") })] }), _jsx("p", { className: "text-right text-sm", children: (_c = jobResults.created) !== null && _c !== void 0 ? _c : 0 })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "text-blue-600 h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldUpdated") })] }), _jsx("p", { className: "text-right text-sm", children: (_d = jobResults.updated) !== null && _d !== void 0 ? _d : 0 })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldSkipped") }), _jsx("p", { className: "text-right text-sm", children: (_e = jobResults.skipped) !== null && _e !== void 0 ? _e : 0 })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(XCircle, { className: "text-red-600 h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldErrors") })] }), _jsx("p", { className: "text-right text-sm", children: (_g = (_f = jobResults.errors) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0 })] })] }), jobResults.errors && jobResults.errors.length > 0 ? (_jsxs("div", { className: "mt-4 space-y-2", children: [jobResults.errors.slice(0, 5).map((err, i) => {
33
60
  var _a;
34
61
  return (_jsxs("div", { className: "bg-destructive/10 text-destructive rounded-md px-3 py-2 text-xs", children: [_jsxs("span", { className: "font-medium", children: ["Row ", (_a = err.row) !== null && _a !== void 0 ? _a : "?", err.studentProfileId ? ` • ${err.studentProfileId}` : "", ":"] }), " ", err.error] }, i));
35
- }), jobResults.errors.length > 5 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: t("viewErrorsMore", { count: jobResults.errors.length - 5 }) })) : null] })) : null] })] })) : null] }));
62
+ }), jobResults.errors.length > 5 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: t("viewErrorsMore", { count: jobResults.errors.length - 5 }) })) : null] })) : null] })] })) : null, sortedItems.length > 0 ? (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("viewSectionItemResults") })] }), _jsx(CardDescription, { children: t("viewSectionItemResultsDescription") })] }), _jsx(Separator, {}), _jsx(CardContent, { className: "pt-6", children: _jsx(Accordion, { type: "multiple", className: "w-full", children: sortedItems.map((item) => {
63
+ var _a, _b, _c;
64
+ return (_jsxs(AccordionItem, { value: item.computerNumber, className: `border-l-4 ${(_a = ITEM_BORDER_COLOR[item.status]) !== null && _a !== void 0 ? _a : ""}`, children: [_jsx(AccordionTrigger, { className: "py-3 hover:no-underline", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "text-sm font-medium", children: [t("viewItemComputerNumber"), " ", item.computerNumber] }), _jsx(Badge, { variant: (_b = ITEM_STATUS_VARIANT[item.status]) !== null && _b !== void 0 ? _b : "secondary", children: t((_c = ITEM_STATUS_I18N[item.status]) !== null && _c !== void 0 ? _c : item.status) })] }) }), _jsx(AccordionContent, { className: "pb-4", children: _jsxs("div", { className: "space-y-4 pl-1", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: item.reason }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "rounded-md bg-muted/50 p-2 text-center", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: t("viewItemPendingMarkedPaid") }), _jsx("p", { className: "text-sm font-medium", children: item.pendingMarkedPaid })] }), _jsxs("div", { className: "rounded-md bg-muted/50 p-2 text-center", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: t("viewItemPaidAtUpdated") }), _jsx("p", { className: "text-sm font-medium", children: item.paidAtUpdated })] }), _jsxs("div", { className: "rounded-md bg-muted/50 p-2 text-center", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: t("viewItemSameDaySkipped") }), _jsx("p", { className: "text-sm font-medium", children: item.sameDaySkipped })] })] }), item.fees && item.fees.length > 0 ? (_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: t("viewItemFees") }), _jsx("div", { className: "overflow-x-auto rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b bg-muted/50 text-left", children: [_jsx("th", { className: "px-3 py-2 text-xs font-medium text-muted-foreground", children: t("viewItemFeeId") }), _jsx("th", { className: "px-3 py-2 text-xs font-medium text-muted-foreground", children: t("viewItemFeeDueDate") }), _jsx("th", { className: "px-3 py-2 text-xs font-medium text-muted-foreground", children: t("viewItemFeeAmount") }), _jsx("th", { className: "px-3 py-2 text-xs font-medium text-muted-foreground", children: t("viewItemFeeFine") }), _jsx("th", { className: "px-3 py-2 text-xs font-medium text-muted-foreground", children: t("viewItemFeeAction") })] }) }), _jsx("tbody", { children: item.fees.map((fee) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "px-3 py-2 font-mono text-xs", children: fee.feeId }), _jsx("td", { className: "px-3 py-2", children: fee.dueDate }), _jsx("td", { className: "px-3 py-2", children: fee.amount }), _jsx("td", { className: "px-3 py-2", children: fee.fine }), _jsx("td", { className: "px-3 py-2", children: fee.action })] }, fee.feeId))) })] }) })] })) : null] }) })] }, item.computerNumber));
65
+ }) }) })] })) : null] }));
36
66
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appcorp/fusion-storybook",
3
- "version": "0.4.42",
3
+ "version": "0.4.45",
4
4
  "scripts": {
5
5
  "build-storybook": "storybook build",
6
6
  "build:next": "next build",