@mshuja288/aksuicore 0.4.1 → 0.4.3

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mshuja288/aksuicore",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Shared UI components and templates for Ikssam applications",
   "license": "UNLICENSED",
-  "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/patterns/RecordWorkspace.tsx

@@ -65,12 +65,34 @@ export type ExportColumnRef = {
   header: string;
 };
 
+export type BulkImportMode = "insert" | "update" | "upsert";
+
+export type BulkImportError = {
+  row: number;
+  field?: string | null;
+  code: string;
+  message: string;
+};
+
+export type BulkImportResult = {
+  totalRows: number;
+  failed: number;
+  applied: boolean;
+  errors: BulkImportError[];
+};
+
 const EXPORT_FORMAT_OPTIONS: { format: ExportDownloadFormat; label: string }[] = [
   { format: "csv", label: "CSV" },
   { format: "xlsx", label: "Excel" },
   { format: "json", label: "JSON" },
 ];
 
+const BULK_IMPORT_MODE_OPTIONS: { mode: BulkImportMode; label: string }[] = [
+  { mode: "insert", label: "Insert" },
+  { mode: "update", label: "Update" },
+  { mode: "upsert", label: "Upsert" },
+];
+
 type SortDirection = "asc" | "desc";
 type SortState = { key: string; direction: SortDirection };
 type DetailLine = { label: string; value: string };
@@ -80,6 +102,48 @@ function defaultVisibleKeys<T>(columns: TableColumn<T>[]) {
   return columns.filter((column) => column.defaultVisible !== false).map((column) => column.key);
 }
 
+/** Shared across all RecordWorkspace tables (preview + side rail). */
+const WORKSPACE_CHROME_KEY = "aksui.workspace.chrome";
+
+type WorkspaceChrome = {
+  previewEnabled: boolean;
+  sideOpen: boolean;
+};
+
+function readWorkspaceChrome(): WorkspaceChrome {
+  if (typeof window === "undefined") {
+    return { previewEnabled: false, sideOpen: false };
+  }
+  try {
+    const raw = window.localStorage.getItem(WORKSPACE_CHROME_KEY);
+    if (!raw) {
+      return { previewEnabled: false, sideOpen: false };
+    }
+    const parsed = JSON.parse(raw) as Partial<WorkspaceChrome>;
+    return {
+      previewEnabled: Boolean(parsed.previewEnabled),
+      sideOpen: Boolean(parsed.sideOpen),
+    };
+  } catch {
+    return { previewEnabled: false, sideOpen: false };
+  }
+}
+
+function writeWorkspaceChrome(chrome: WorkspaceChrome) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(WORKSPACE_CHROME_KEY, JSON.stringify(chrome));
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
+function filtersPrefsKey(columnPrefsKey: string | undefined) {
+  return columnPrefsKey ? `${columnPrefsKey}.filters` : undefined;
+}
+
 function readStoredColumnKeys(prefsKey: string | undefined, fallback: string[], allowed: Set<string>) {
   if (!prefsKey || typeof window === "undefined") {
     return fallback;
@@ -111,6 +175,48 @@ function writeStoredColumnKeys(prefsKey: string | undefined, keys: string[]) {
   }
 }
 
+function readStoredFilters(prefsKey: string | undefined, allowed: Set<string>): Record<string, string> {
+  if (!prefsKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const raw = window.localStorage.getItem(prefsKey);
+    if (!raw) {
+      return {};
+    }
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return {};
+    }
+    const next: Record<string, string> = {};
+    for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
+      if (allowed.has(key) && typeof value === "string" && value.trim()) {
+        next[key] = value;
+      }
+    }
+    return next;
+  } catch {
+    return {};
+  }
+}
+
+function writeStoredFilters(prefsKey: string | undefined, filters: Record<string, string>) {
+  if (!prefsKey || typeof window === "undefined") {
+    return;
+  }
+  try {
+    const trimmed: Record<string, string> = {};
+    for (const [key, value] of Object.entries(filters)) {
+      if (value.trim()) {
+        trimmed[key] = value;
+      }
+    }
+    window.localStorage.setItem(prefsKey, JSON.stringify(trimmed));
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
 function compareColumnValues<T>(column: TableColumn<T>, left: T, right: T) {
   const leftRaw = column.display ? column.display(left) : column.value(left);
   const rightRaw = column.display ? column.display(right) : column.value(right);
@@ -194,6 +300,16 @@ function PreviewIcon() {
   );
 }
 
+function UploadIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M10 16.5V7.3" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <path d="M6.5 10.8 10 7.2l3.5 3.6" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 4.5h12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  );
+}
+
 function DownloadIcon() {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true">
@@ -258,7 +374,11 @@ export function RecordWorkspace<T>({
   canDelete,
   onDownload,
   canDownload = true,
+  canExport,
   downloadBusy = false,
+  onBulkImport,
+  canImport = true,
+  importBusy = false,
   showColumnPicker = true,
   columnPrefsKey,
   visibleColumnKeys,
@@ -285,11 +405,20 @@ export function RecordWorkspace<T>({
    * Second argument lists currently visible columns (exportKey ?? key).
    */
   onDownload?: (format: ExportDownloadFormat, columns: ExportColumnRef[]) => void;
+  /** Alias for `canDownload` (RBAC). When set, export requires this and `canDownload` to be true. */
+  canExport?: boolean;
   canDownload?: boolean;
   downloadBusy?: boolean;
+  onBulkImport?: (mode: BulkImportMode, file: File) => Promise<BulkImportResult>;
+  canImport?: boolean;
+  importBusy?: boolean;
   /** Column checklist in the side rail. Default true. */
   showColumnPicker?: boolean;
-  /** Persist visible column keys in localStorage under this key. */
+  /**
+   * Persist visible column keys in localStorage under this key.
+   * Also persists filter values at `${columnPrefsKey}.filters`.
+   * Preview + side-rail open/collapsed use a shared key across all tables (`aksui.workspace.chrome`).
+   */
   columnPrefsKey?: string;
   /** Controlled visible column keys. */
   visibleColumnKeys?: string[];
@@ -309,13 +438,21 @@ export function RecordWorkspace<T>({
   const [internalVisibleKeys, setInternalVisibleKeys] = useState<string[]>(() =>
     readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys),
   );
-  const [filters, setFilters] = useState<Record<string, string>>({});
+  const filterStorageKey = filtersPrefsKey(columnPrefsKey);
+  const [filters, setFilters] = useState<Record<string, string>>(() =>
+    readStoredFilters(filterStorageKey, allowedKeys),
+  );
   const [sort, setSort] = useState<SortState | null>(null);
-  const [sideOpen, setSideOpen] = useState(false);
+  const [sideOpen, setSideOpen] = useState(() => readWorkspaceChrome().sideOpen);
   const [toolsDrawerOpen, setToolsDrawerOpen] = useState(false);
   const [downloadOpen, setDownloadOpen] = useState(false);
+  const [bulkOpen, setBulkOpen] = useState(false);
+  const [bulkMode, setBulkMode] = useState<BulkImportMode>("upsert");
+  const [bulkFile, setBulkFile] = useState<File | null>(null);
+  const [bulkReport, setBulkReport] = useState<BulkImportResult | null>(null);
+  const bulkFileInputRef = useRef<HTMLInputElement | null>(null);
   const [columnsOpen, setColumnsOpen] = useState(false);
-  const [previewEnabled, setPreviewEnabled] = useState(false);
+  const [previewEnabled, setPreviewEnabled] = useState(() => readWorkspaceChrome().previewEnabled);
   const [previewKey, setPreviewKey] = useState<string | number | null>(null);
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
   const [pageSize, setPageSize] = useState("15");
@@ -337,6 +474,10 @@ export function RecordWorkspace<T>({
     setInternalVisibleKeys(readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys));
   }, [allowedKeys, columnPrefsKey, fallbackKeys, isControlled]);
 
+  useEffect(() => {
+    setFilters(readStoredFilters(filtersPrefsKey(columnPrefsKey), allowedKeys));
+  }, [allowedKeys, columnPrefsKey]);
+
   const resolvedVisibleKeys = useMemo(() => {
     const source = isControlled ? visibleColumnKeys! : internalVisibleKeys;
     const filtered = source.filter((key) => allowedKeys.has(key));
@@ -425,7 +566,9 @@ export function RecordWorkspace<T>({
   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;
@@ -478,6 +621,30 @@ export function RecordWorkspace<T>({
     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: TableColumn<T>, item: T) {
     const raw = column.display ? column.display(item) : column.value(item);
     return raw === null || raw === undefined || raw === "" ? "—" : String(raw);
@@ -493,15 +660,25 @@ export function RecordWorkspace<T>({
   const previewTitle = previewItem && visibleColumns[0] ? cellText(visibleColumns[0], previewItem) : null;
 
   function changeFilter(key: string, value: string) {
-    setFilters((current) => ({ ...current, [key]: value }));
+    setFilters((current) => {
+      const next = { ...current, [key]: value };
+      writeStoredFilters(filterStorageKey, next);
+      return next;
+    });
     setPage(1);
   }
 
   function clearFilters() {
     setFilters({});
+    writeStoredFilters(filterStorageKey, {});
     setPage(1);
   }
 
+  function setSideOpenValue(open: boolean) {
+    setSideOpen(open);
+    writeWorkspaceChrome({ previewEnabled, sideOpen: open });
+  }
+
   function toggleSort(column: TableColumn<T>) {
     if (column.sortable === false) {
       return;
@@ -520,6 +697,7 @@ export function RecordWorkspace<T>({
 
   function setPreviewEnabledValue(enabled: boolean) {
     setPreviewEnabled(enabled);
+    writeWorkspaceChrome({ previewEnabled: enabled, sideOpen });
     setTooltip(null);
     if (!enabled) {
       setPreviewKey(null);
@@ -591,7 +769,7 @@ export function RecordWorkspace<T>({
               title="Columns"
               aria-label="Columns"
               onClick={() => {
-                setSideOpen(true);
+                setSideOpenValue(true);
                 setColumnsOpen(true);
               }}
             >
@@ -607,20 +785,35 @@ export function RecordWorkspace<T>({
               aria-label="Download"
               disabled={downloadBusy}
               onClick={() => {
-                setSideOpen(true);
+                setSideOpenValue(true);
                 setDownloadOpen(true);
               }}
             >
               <DownloadIcon />
             </button>
           ) : null}
+          {showBulkImport ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Bulk entry"
+              aria-label="Bulk entry"
+              disabled={importBusy}
+              onClick={() => {
+                setSideOpenValue(true);
+                setBulkOpen(true);
+              }}
+            >
+              <UploadIcon />
+            </button>
+          ) : null}
           {showFilters ? (
             <button
               type="button"
               className="ghost side-rail-icon"
               title="Show filters"
               aria-label="Show filters"
-              onClick={() => setSideOpen(true)}
+              onClick={() => setSideOpenValue(true)}
             >
               <FilterIcon />
               {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
@@ -742,6 +935,75 @@ export function RecordWorkspace<T>({
           </div>
         ) : null}
 
+        {showBulkImport ? (
+          <div className="side-rail-bulk">
+            <button
+              type="button"
+              className="ghost side-rail-bulk-toggle"
+              aria-expanded={bulkOpen}
+              disabled={importBusy}
+              onClick={() => setBulkOpen((open) => !open)}
+            >
+              <UploadIcon />
+              <span>{importBusy ? "Importing…" : "Bulk entry"}</span>
+            </button>
+            {bulkOpen ? (
+              <div className="side-rail-bulk-panel" role="group" aria-label="Bulk entry">
+                <label className="side-rail-bulk-mode">
+                  Mode
+                  <Select
+                    value={bulkMode}
+                    options={BULK_IMPORT_MODE_OPTIONS.map((option) => ({ value: option.mode, label: option.label }))}
+                    onChange={(value) => setBulkMode(value as BulkImportMode)}
+                  />
+                </label>
+                <label className="side-rail-bulk-file">
+                  File
+                  <input
+                    ref={bulkFileInputRef}
+                    type="file"
+                    accept=".csv,.xlsx,.json"
+                    disabled={importBusy}
+                    onChange={(event) => {
+                      setBulkFile(event.target.files?.[0] ?? null);
+                      setBulkReport(null);
+                    }}
+                  />
+                </label>
+                <button
+                  type="button"
+                  className="side-rail-bulk-submit"
+                  disabled={importBusy || !bulkFile}
+                  onClick={() => void submitBulkImport()}
+                >
+                  {importBusy ? "Importing…" : "Import"}
+                </button>
+                {bulkReport ? (
+                  <div className="side-rail-bulk-report" role="status">
+                    <p>
+                      {bulkReport.applied
+                        ? `Applied ${bulkReport.totalRows} row(s).`
+                        : `${bulkReport.failed} error(s) in ${bulkReport.totalRows} row(s).`}
+                    </p>
+                    {bulkReport.errors.length > 0 ? (
+                      <ul className="side-rail-bulk-errors">
+                        {bulkReport.errors.slice(0, 8).map((error, index) => (
+                          <li key={`${error.row}-${error.code}-${index}`}>
+                            Row {error.row}: {error.message}
+                          </li>
+                        ))}
+                        {bulkReport.errors.length > 8 ? (
+                          <li>…and {bulkReport.errors.length - 8} more</li>
+                        ) : null}
+                      </ul>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
         {showFilters ? (
           <div className="side-rail-filters">
             <div className="filter-panel-head">
@@ -1002,7 +1264,7 @@ export function RecordWorkspace<T>({
             className="ghost side-rail-toggle"
             aria-expanded={sideOpen}
             title={sideOpen ? "Collapse" : "Expand"}
-            onClick={() => setSideOpen((open) => !open)}
+            onClick={() => setSideOpenValue(!sideOpen)}
           >
             <ChevronIcon open={sideOpen} />
             {sideOpen ? <span>Collapse</span> : null}

package/src/patterns/index.ts

@@ -5,4 +5,7 @@ export {
   type TableColumn,
   type ExportDownloadFormat,
   type ExportColumnRef,
+  type BulkImportMode,
+  type BulkImportError,
+  type BulkImportResult,
 } from "./RecordWorkspace";

package/src/theme/patterns.css

@@ -405,7 +405,8 @@ button.side-rail-add:hover {
 }
 
 .side-rail-columns,
-.side-rail-download {
+.side-rail-download,
+.side-rail-bulk {
   display: grid;
   gap: 8px;
 }
@@ -533,6 +534,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;