@appcorp/fusion-storybook 0.4.39 → 0.4.40

package/base-modules/bulk-operations/page.js

@@ -0,0 +1,144 @@
+/**
+ * Bulk Operations Page Component
+ *
+ * Thin wrapper around GenericModulePage. All handlers, header actions, and row
+ * actions live in context.tsx — this file only owns:
+ *   - tableBodyCols  (static, module-level constant)
+ *   - bulkOperationsConfig (memoised on locale + drawer change only)
+ *   - permission guard
+ *
+ * Exported utilities: `BulkOperationsPage`
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { COMPONENT_TYPE } from "@appcorp/shadcn/components/enhanced-table";
+import { createGenericModulePage, } from "@react-pakistan/util-functions/factory/generic-component-factory";
+import { useBulkOperationsModule, BulkOperationsProvider, BULK_OPERATIONS_ACTION_TYPES } from "./context";
+import { BulkOperationsFilter } from "./filter";
+import { BulkOperationsView } from "./view";
+import { resolveRbacPermissions } from "../../utils/resolve-rbac-permissions";
+import { RbacNoAccess } from "../../components/rbac-no-access";
+// ============================================================================
+// TABLE COLUMN CONFIGURATION (static — no runtime deps)
+// ============================================================================
+const tableBodyCols = [
+    { componentType: COMPONENT_TYPE.ID, key: "jobId" },
+    { componentType: COMPONENT_TYPE.TEXT, key: "type" },
+    { componentType: COMPONENT_TYPE.TEXT, key: "status" },
+    {
+        componentType: COMPONENT_TYPE.TEXT,
+        key: "progress",
+        textFormatter: (_value, row) => {
+            var _a, _b;
+            const job = row;
+            return `${(_a = job.processed) !== null && _a !== void 0 ? _a : 0} / ${(_b = job.total) !== null && _b !== void 0 ? _b : 0}`;
+        },
+    },
+    {
+        componentType: COMPONENT_TYPE.CREATED_UPDATED_AT,
+        key: "createdAt",
+    },
+    { componentType: COMPONENT_TYPE.ACTIONS },
+];
+// ============================================================================
+// COMPONENT INSTANCES (memoized — no runtime deps)
+// ============================================================================
+const createComponentInstances = () => ({
+    filter: _jsx(BulkOperationsFilter, {}),
+    view: _jsx(BulkOperationsView, {}),
+});
+const createBulkOperationsConfig = ({ cancelLabel, dispatch, drawerFilterDescription, drawerFilterTitle, drawerViewDescription, drawerViewTitle, labelActions, labelId, labelProgress, labelState, labelStatus, labelType, saveLabel, searchPlaceholder, tableDescription, tableTitle, components, }) => {
+    return {
+        moduleName: "bulk-operations",
+        tableColumns: [
+            { label: labelId, width: "20%" },
+            { label: labelType, width: "22%" },
+            { label: labelStatus, width: "12%" },
+            { label: labelProgress, width: "12%" },
+            { label: labelState, width: "20%" },
+            { label: labelActions, width: "14%" },
+        ],
+        cancelLabel,
+        drawerFilterDescription,
+        drawerFilterTitle,
+        drawerFormDescription: "",
+        drawerFormTitle: "",
+        drawerMoreActionsDescription: "",
+        drawerMoreActionsTitle: "",
+        drawerViewDescription,
+        drawerViewTitle,
+        filterContent: components.filter,
+        formContent: null,
+        moreActionsContent: null,
+        saveLabel,
+        searchPlaceholder,
+        tableDescription,
+        tableTitle,
+        viewContent: components.view,
+        onClearFilters: () => {
+            dispatch({
+                type: BULK_OPERATIONS_ACTION_TYPES.SET_FILTERS,
+                payload: { filters: { filterType: "", filterStatus: "" } },
+            });
+            dispatch({
+                type: BULK_OPERATIONS_ACTION_TYPES.SET_CURRENT_PAGE,
+                payload: { currentPage: 1 },
+            });
+        },
+    };
+};
+// ============================================================================
+// STABLE PAGE COMPONENT (created once, outside render)
+// ============================================================================
+const GenericBulkOperationsPage = createGenericModulePage();
+const BulkOperationsPageInner = (props) => {
+    const context = useBulkOperationsModule();
+    const components = useMemo(() => createComponentInstances(), []);
+    const bulkOperationsConfig = useMemo(() => createBulkOperationsConfig({
+        dispatch: context.dispatch,
+        cancelLabel: props.cancelLabel,
+        drawerViewTitle: props.drawerViewTitle,
+        drawerViewDescription: props.drawerViewDescription,
+        drawerFilterTitle: props.drawerFilterTitle,
+        drawerFilterDescription: props.drawerFilterDescription,
+        labelActions: props.labelActions,
+        labelId: props.labelId,
+        labelProgress: props.labelProgress,
+        labelState: props.labelState,
+        labelStatus: props.labelStatus,
+        labelType: props.labelType,
+        saveLabel: props.saveLabel,
+        searchPlaceholder: props.searchPlaceholder,
+        tableDescription: props.tableDescription,
+        tableTitle: props.tableTitle,
+        components,
+    }), [
+        context.dispatch,
+        props.cancelLabel,
+        props.drawerViewTitle,
+        props.drawerViewDescription,
+        props.drawerFilterTitle,
+        props.drawerFilterDescription,
+        props.labelActions,
+        props.labelId,
+        props.labelProgress,
+        props.labelState,
+        props.labelStatus,
+        props.labelType,
+        props.saveLabel,
+        props.searchPlaceholder,
+        props.tableDescription,
+        props.tableTitle,
+        components,
+    ]);
+    const hasPermission = resolveRbacPermissions({
+        userRole: props.userRole,
+        moduleName: "Bulk Operations",
+    });
+    if (!hasPermission) {
+        return _jsx(RbacNoAccess, { moduleName: "Bulk Operations" });
+    }
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericBulkOperationsPage, { overrideConfig: bulkOperationsConfig, context: context, tableBodyCols: tableBodyCols }) }));
+};
+export const BulkOperationsPage = (props) => (_jsx(BulkOperationsProvider, { children: _jsx(BulkOperationsPageInner, Object.assign({}, props)) }));

package/base-modules/bulk-operations/view.d.ts

@@ -0,0 +1 @@
+export declare const BulkOperationsView: () => import("react").JSX.Element | null;

package/base-modules/bulk-operations/view.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Bulk Operations View
+ *
+ * Read-only details view for a single bulk job record. The row data is spread
+ * into top-level module state (SET_FORM_DATA) when the row's View action fires.
+ */
+import { useTranslations } from "next-intl";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@appcorp/shadcn/components/ui/card";
+import { Badge } from "@appcorp/shadcn/components/ui/badge";
+import { Separator } from "@appcorp/shadcn/components/ui/separator";
+import { CheckCircle2, ClipboardList, Clock, Layers, ListChecks, XCircle, } from "lucide-react";
+import { DATE_FORMATS, formatDate, } from "@react-pakistan/util-functions/general/format-date";
+import { useBulkOperationsContext } from "./context";
+const STATUS_VARIANT = {
+    completed: "default",
+    running: "secondary",
+    queued: "outline",
+    failed: "destructive",
+};
+export const BulkOperationsView = () => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { state } = useBulkOperationsContext();
+    const { createdAt, jobId, processed, results, status, total, type, updatedAt, webhookUrl, } = state;
+    const t = useTranslations("bulkOperations");
+    if (!jobId)
+        return null;
+    const fmt = (v) => v ? formatDate(v, DATE_FORMATS.LOCALE_DATE) : "—";
+    const jobResults = (results !== null && results !== void 0 ? results : null);
+    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("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) => {
+                                        var _a;
+                                        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));
+                                    }), jobResults.errors.length > 5 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: t("viewErrorsMore", { count: jobResults.errors.length - 5 }) })) : null] })) : null] })] })) : null] }));
+};

package/constants.d.ts

@@ -13,6 +13,9 @@ export declare const ATTENDANCE_API_ROUTES: {
     readonly BULK: "/api/v1/attendance/bulk";
     readonly BULK_STATUS: (jobId: string) => string;
 };
+export declare const BULK_OPERATIONS_API_ROUTES: {
+    readonly LIST: "/api/v1/bulk-operations";
+};
 export declare const ADMISSION_API_ROUTES: {
     readonly UNIT: "/api/v1/admission";
     readonly BULK: "/api/v1/admission/bulk";
@@ -119,6 +122,7 @@ export declare const DASHBOARD_ROUTES: {
     AI_ASSISTANT: string;
     AI_ATTENDANCE: string;
     ATTENDANCE: string;
+    BULK_OPERATIONS: string;
     CLASS: string;
     COMMUNICATION: string;
     COURSE: string;

package/constants.js

@@ -16,6 +16,9 @@ export const ATTENDANCE_API_ROUTES = {
     BULK: "/api/v1/attendance/bulk",
     BULK_STATUS: (jobId) => `/api/v1/attendance/bulk/${jobId}`,
 };
+export const BULK_OPERATIONS_API_ROUTES = {
+    LIST: "/api/v1/bulk-operations",
+};
 export const ADMISSION_API_ROUTES = {
     UNIT: "/api/v1/admission",
     BULK: "/api/v1/admission/bulk",
@@ -140,6 +143,7 @@ export const DASHBOARD_ROUTES = {
     AI_ASSISTANT: "/tools/ai-assistant",
     AI_ATTENDANCE: "/tools/ai-attendance",
     ATTENDANCE: "/operational-tracking/attendance",
+    BULK_OPERATIONS: "/apps/bulk-operations",
     CLASS: "/academic-structure/class",
     COMMUNICATION: "/communication",
     COURSE: "/academic-operations/course",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/fusion-storybook",
-  "version": "0.4.39",
+  "version": "0.4.40",
   "scripts": {
     "build-storybook": "storybook build",
     "build:next": "next build",