@mshuja288/aksuicore 0.4.1 → 0.4.2

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mshuja288/aksuicore",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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 };
@@ -194,6 +216,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 +290,11 @@ export function RecordWorkspace<T>({
   canDelete,
   onDownload,
   canDownload = true,
+  canExport,
   downloadBusy = false,
+  onBulkImport,
+  canImport = true,
+  importBusy = false,
   showColumnPicker = true,
   columnPrefsKey,
   visibleColumnKeys,
@@ -285,8 +321,13 @@ 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. */
@@ -314,6 +355,11 @@ export function RecordWorkspace<T>({
   const [sideOpen, setSideOpen] = useState(false);
   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 [previewKey, setPreviewKey] = useState<string | number | null>(null);
@@ -425,7 +471,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 +526,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);
@@ -614,6 +686,21 @@ export function RecordWorkspace<T>({
               <DownloadIcon />
             </button>
           ) : null}
+          {showBulkImport ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Bulk entry"
+              aria-label="Bulk entry"
+              disabled={importBusy}
+              onClick={() => {
+                setSideOpen(true);
+                setBulkOpen(true);
+              }}
+            >
+              <UploadIcon />
+            </button>
+          ) : null}
           {showFilters ? (
             <button
               type="button"
@@ -742,6 +829,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">

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;