@mshuja288/aksuicore 0.4.1 → 0.4.2

package/dist/aksui.css

@@ -1222,7 +1222,8 @@ button.side-rail-add:hover {
 }
 
 .side-rail-columns,
-.side-rail-download {
+.side-rail-download,
+.side-rail-bulk {
   display: grid;
   gap: 8px;
 }
@@ -1350,6 +1351,79 @@ button.side-rail-download-format:disabled {
   cursor: default;
 }
 
+button.side-rail-bulk-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--aks-border, #d7dde5);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+button.side-rail-bulk-toggle svg {
+  width: 18px;
+  height: 18px;
+}
+
+button.side-rail-bulk-toggle:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+button.side-rail-bulk-toggle:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.side-rail-bulk-panel {
+  display: grid;
+  gap: 10px;
+  padding: 8px;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background: #faf9f7;
+}
+
+label.side-rail-bulk-mode,
+label.side-rail-bulk-file {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--aks-brand);
+}
+
+button.side-rail-bulk-submit {
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: var(--aks-radius);
+  background: var(--aks-accent, #c45c26);
+  color: #fff;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+button.side-rail-bulk-submit:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.side-rail-bulk-report {
+  font-size: 12px;
+  color: var(--aks-brand);
+}
+
+.side-rail-bulk-errors {
+  margin: 6px 0 0;
+  padding-left: 18px;
+}
+
 .side-rail-filters {
   display: grid;
   gap: 12px;

package/dist/index.cjs

@@ -869,6 +869,11 @@ var EXPORT_FORMAT_OPTIONS = [
   { format: "xlsx", label: "Excel" },
   { format: "json", label: "JSON" }
 ];
+var BULK_IMPORT_MODE_OPTIONS = [
+  { mode: "insert", label: "Insert" },
+  { mode: "update", label: "Update" },
+  { mode: "upsert", label: "Upsert" }
+];
 function defaultVisibleKeys(columns) {
   return columns.filter((column) => column.defaultVisible !== false).map((column) => column.key);
 }
@@ -945,6 +950,13 @@ function PreviewIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "2.4", fill: "none", stroke: "currentColor", strokeWidth: "1.6" })
   ] });
 }
+function UploadIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 16.5V7.3", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 10.8 10 7.2l3.5 3.6", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4.5h12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
+  ] });
+}
 function DownloadIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3.5v8.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
@@ -994,7 +1006,11 @@ function RecordWorkspace({
   canDelete,
   onDownload,
   canDownload = true,
+  canExport,
   downloadBusy = false,
+  onBulkImport,
+  canImport = true,
+  importBusy = false,
   showColumnPicker = true,
   columnPrefsKey,
   visibleColumnKeys,
@@ -1017,6 +1033,11 @@ function RecordWorkspace({
   const [sideOpen, setSideOpen] = react.useState(false);
   const [toolsDrawerOpen, setToolsDrawerOpen] = react.useState(false);
   const [downloadOpen, setDownloadOpen] = react.useState(false);
+  const [bulkOpen, setBulkOpen] = react.useState(false);
+  const [bulkMode, setBulkMode] = react.useState("upsert");
+  const [bulkFile, setBulkFile] = react.useState(null);
+  const [bulkReport, setBulkReport] = react.useState(null);
+  const bulkFileInputRef = react.useRef(null);
   const [columnsOpen, setColumnsOpen] = react.useState(false);
   const [previewEnabled, setPreviewEnabled] = react.useState(false);
   const [previewKey, setPreviewKey] = react.useState(null);
@@ -1111,7 +1132,9 @@ function RecordWorkspace({
   const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
   const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
   const showAdd = canAdd && Boolean(onAdd);
-  const showDownload = Boolean(onDownload) && canDownload;
+  const exportAllowed = (canExport ?? true) && canDownload;
+  const showDownload = Boolean(onDownload) && exportAllowed;
+  const showBulkImport = Boolean(onBulkImport) && canImport;
   const showFilters = filterableColumns.length > 0;
   const showColumns = showColumnPicker && columns.length > 0;
   const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
@@ -1156,6 +1179,29 @@ function RecordWorkspace({
     onDownload(format, exportColumns);
     setDownloadOpen(false);
   }
+  async function submitBulkImport() {
+    if (!onBulkImport || importBusy || !bulkFile) {
+      return;
+    }
+    setBulkReport(null);
+    try {
+      const report = await onBulkImport(bulkMode, bulkFile);
+      setBulkReport(report);
+      if (report.applied) {
+        setBulkFile(null);
+        if (bulkFileInputRef.current) {
+          bulkFileInputRef.current.value = "";
+        }
+      }
+    } catch {
+      setBulkReport({
+        totalRows: 0,
+        failed: 1,
+        applied: false,
+        errors: [{ row: 0, code: "ImportFailed", message: "Import request failed." }]
+      });
+    }
+  }
   function cellText(column, item) {
     const raw = column.display ? column.display(item) : column.value(item);
     return raw === null || raw === void 0 || raw === "" ? "\u2014" : String(raw);
@@ -1276,6 +1322,21 @@ function RecordWorkspace({
             children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {})
           }
         ) : null,
+        showBulkImport ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Bulk entry",
+            "aria-label": "Bulk entry",
+            disabled: importBusy,
+            onClick: () => {
+              setSideOpen(true);
+              setBulkOpen(true);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, {})
+          }
+        ) : null,
         showFilters ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -1400,6 +1461,77 @@ function RecordWorkspace({
           option.format
         )) }) : null
       ] }) : null,
+      showBulkImport ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-bulk", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-bulk-toggle",
+            "aria-expanded": bulkOpen,
+            disabled: importBusy,
+            onClick: () => setBulkOpen((open) => !open),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: importBusy ? "Importing\u2026" : "Bulk entry" })
+            ]
+          }
+        ),
+        bulkOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-bulk-panel", role: "group", "aria-label": "Bulk entry", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "side-rail-bulk-mode", children: [
+            "Mode",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select,
+              {
+                value: bulkMode,
+                options: BULK_IMPORT_MODE_OPTIONS.map((option) => ({ value: option.mode, label: option.label })),
+                onChange: (value) => setBulkMode(value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "side-rail-bulk-file", children: [
+            "File",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: bulkFileInputRef,
+                type: "file",
+                accept: ".csv,.xlsx,.json",
+                disabled: importBusy,
+                onChange: (event) => {
+                  setBulkFile(event.target.files?.[0] ?? null);
+                  setBulkReport(null);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "side-rail-bulk-submit",
+              disabled: importBusy || !bulkFile,
+              onClick: () => void submitBulkImport(),
+              children: importBusy ? "Importing\u2026" : "Import"
+            }
+          ),
+          bulkReport ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-bulk-report", role: "status", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: bulkReport.applied ? `Applied ${bulkReport.totalRows} row(s).` : `${bulkReport.failed} error(s) in ${bulkReport.totalRows} row(s).` }),
+            bulkReport.errors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "side-rail-bulk-errors", children: [
+              bulkReport.errors.slice(0, 8).map((error, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                "Row ",
+                error.row,
+                ": ",
+                error.message
+              ] }, `${error.row}-${error.code}-${index}`)),
+              bulkReport.errors.length > 8 ? /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                "\u2026and ",
+                bulkReport.errors.length - 8,
+                " more"
+              ] }) : null
+            ] }) : null
+          ] }) : null
+        ] }) : null
+      ] }) : null,
       showFilters ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-filters", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-panel-head", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Filters" }),