@juv/codego-react-ui 3.0.8 → 3.1.1

package/dist/index.cjs

@@ -2127,6 +2127,62 @@ function MetricRow({ items, divided = true, className }) {
 
 // src/components/ui/data-grid.tsx
 var React24 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+
+// src/components/tools/decryptPayload.ts
+var import_crypto_js = __toESM(require("crypto-js"), 1);
+var import_meta = {};
+function getLaravelSecretKey() {
+  const viteKey = import_meta.env["VITE_LARAVEL_KEY"];
+  const legacyKey = globalThis?.process?.env?.REACT_APP_LARAVEL_KEY;
+  const key = viteKey || legacyKey;
+  if (!key) {
+    throw new Error("Missing Laravel decryption key. Set VITE_LARAVEL_KEY in your .env.");
+  }
+  return key;
+}
+function parseLaravelKey(secretKey) {
+  if (secretKey.startsWith("base64:")) {
+    return import_crypto_js.default.enc.Base64.parse(secretKey.slice("base64:".length));
+  }
+  return import_crypto_js.default.enc.Utf8.parse(secretKey);
+}
+function parseLaravelEncryptedPayload(payload) {
+  let jsonStr = payload;
+  try {
+    jsonStr = atob(payload);
+  } catch {
+  }
+  return JSON.parse(jsonStr);
+}
+function decryptLaravelPayload(payload) {
+  const secretKey = getLaravelSecretKey();
+  const parsed = parseLaravelEncryptedPayload(payload);
+  if (parsed.tag) {
+    throw new Error("Unsupported Laravel cipher (AEAD tag present). Expected AES-*-CBC payload.");
+  }
+  const key = parseLaravelKey(secretKey);
+  const expectedMac = import_crypto_js.default.HmacSHA256(parsed.iv + parsed.value, key).toString();
+  if (expectedMac !== parsed.mac) {
+    throw new Error("Invalid payload MAC (wrong key or tampered payload).");
+  }
+  const iv = import_crypto_js.default.enc.Base64.parse(parsed.iv);
+  const ciphertext = import_crypto_js.default.enc.Base64.parse(parsed.value);
+  const cipherParams = import_crypto_js.default.lib.CipherParams.create({ ciphertext });
+  const decrypted = import_crypto_js.default.AES.decrypt(cipherParams, key, {
+    iv,
+    mode: import_crypto_js.default.mode.CBC,
+    padding: import_crypto_js.default.pad.Pkcs7
+  });
+  const plaintext = decrypted.toString(import_crypto_js.default.enc.Utf8);
+  if (!plaintext) {
+    throw new Error("Decryption produced empty plaintext (wrong key/cipher).");
+  }
+  console.log("Decrypted payload:", plaintext);
+  return JSON.parse(plaintext);
+}
+
+// src/components/ui/data-grid.tsx
 var import_axios = __toESM(require("axios"), 1);
 var import_lucide_react15 = require("lucide-react");
 
@@ -4843,7 +4899,7 @@ Input.displayName = "Input";
 
 // src/components/ui/data-grid.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-function useServerDataGrid({ url, params }) {
+function useServerDataGrid({ url, params, encrypt }) {
   const [data, setData] = React24.useState([]);
   const [columns, setColumns] = React24.useState([]);
   const [currentPage, setCurrentPage] = React24.useState(1);
@@ -4857,23 +4913,26 @@ function useServerDataGrid({ url, params }) {
     setError(null);
     import_axios.default.get(url, { params: { ...params, page: currentPage } }).then(({ data: res }) => {
       if (cancelled) return;
-      setData(res.data);
-      const rawTotal = res.total;
-      const rawPerPage = res.per_page;
-      const lastPage = Math.ceil(rawTotal / rawPerPage);
-      const pg = res.pagination ?? {
-        first_page_url: res.first_page_url ?? `${url}?page=1`,
-        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
-        next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
-        prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
+      const payload = encrypt ? decryptLaravelPayload(res) : res;
+      setData(payload.data);
+      const rawTotal = payload.total;
+      const rawPerPage = payload.per_page;
+      const rawLastPage = payload.last_page;
+      const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+      const pg = payload.pagination ?? {
+        first_page_url: payload.first_page_url ?? `${url}?page=1`,
+        last_page_url: payload.last_page_url ?? `${url}?page=${lastPage}`,
+        last_page: lastPage,
+        next_page_url: payload.next_page_url !== void 0 ? payload.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
+        prev_page_url: payload.prev_page_url !== void 0 ? payload.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
         per_page: rawPerPage,
         total: rawTotal,
-        links: res.links ?? []
+        links: payload.links ?? []
       };
       setPagination(pg);
-      if (res.data.length > 0) {
+      if (payload.data.length > 0) {
         setColumns(
-          Object.keys(res.data[0]).map((key) => ({
+          Object.keys(payload.data[0]).map((key) => ({
             key,
             header: key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
           }))
@@ -4902,23 +4961,26 @@ function useServerDataGrid({ url, params }) {
   };
 }
 function DGModalShell({ title, onClose, children, footer }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { background: "rgba(0,0,0,0.5)" },
-      onMouseDown: (e) => {
-        if (e.target === e.currentTarget) onClose();
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-base font-semibold", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { className: "h-4 w-4" }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-      ] })
-    }
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.5)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { className: "h-4 w-4" }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+        ] })
+      }
+    ),
+    document.body
   );
 }
 function DGFieldRenderer({ field, value, onChange }) {
@@ -5232,7 +5294,10 @@ function DataGrid({
       )
     ] })
   } : null;
-  const visibleCols = [
+  const visibleCols = defaultActions?.position === "first" ? [
+    ...actionsCol ? [actionsCol] : [],
+    ...columns.filter((c) => !hiddenCols.includes(String(c.key)))
+  ] : [
     ...columns.filter((c) => !hiddenCols.includes(String(c.key))),
     ...actionsCol ? [actionsCol] : []
   ];
@@ -5372,7 +5437,7 @@ function DataGrid({
     ),
     serverPagination && (() => {
       const { pagination, currentPage: cp, goToPage } = serverPagination;
-      const totalServerPages = Math.ceil(pagination.total / pagination.per_page);
+      const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
       const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
@@ -9483,10 +9548,11 @@ function Stepper({
 
 // src/components/ui/table.tsx
 var React44 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
 var import_axios2 = __toESM(require("axios"), 1);
 var import_lucide_react28 = require("lucide-react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-function useServerTable({ url, params }) {
+function useServerTable({ url, params, encrypt }) {
   const [data, setData] = React44.useState([]);
   const [columns, setColumns] = React44.useState([]);
   const [currentPage, setCurrentPage] = React44.useState(1);
@@ -9502,23 +9568,26 @@ function useServerTable({ url, params }) {
       params: { ...params, page: currentPage }
     }).then(({ data: res }) => {
       if (cancelled) return;
-      setData(res.data);
-      const rawTotal = res.total;
-      const rawPerPage = res.per_page;
-      const lastPage = Math.ceil(rawTotal / rawPerPage);
-      const pg = res.pagination ?? {
-        first_page_url: res.first_page_url ?? `${url}?page=1`,
-        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
-        next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
-        prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
+      const payload = encrypt ? decryptLaravelPayload(res) : res;
+      setData(payload.data);
+      const rawTotal = payload.total;
+      const rawPerPage = payload.per_page;
+      const rawLastPage = payload.last_page;
+      const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+      const pg = payload.pagination ?? {
+        first_page_url: payload.first_page_url ?? `${url}?page=1`,
+        last_page_url: payload.last_page_url ?? `${url}?page=${lastPage}`,
+        last_page: lastPage,
+        next_page_url: payload.next_page_url !== void 0 ? payload.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
+        prev_page_url: payload.prev_page_url !== void 0 ? payload.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
         per_page: rawPerPage,
         total: rawTotal,
-        links: res.links ?? []
+        links: payload.links ?? []
       };
       setPagination(pg);
-      if (res.data.length > 0) {
+      if (payload.data.length > 0) {
         setColumns(
-          Object.keys(res.data[0]).map((key) => ({
+          Object.keys(payload.data[0]).map((key) => ({
             key,
             title: key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
           }))
@@ -9547,23 +9616,26 @@ function useServerTable({ url, params }) {
   };
 }
 function ModalShell({ title, onClose, children, footer }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { background: "rgba(0,0,0,0.5)" },
-      onMouseDown: (e) => {
-        if (e.target === e.currentTarget) onClose();
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: "text-base font-semibold", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react28.X, { className: "h-4 w-4" }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-      ] })
-    }
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.5)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react28.X, { className: "h-4 w-4" }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+        ] })
+      }
+    ),
+    document.body
   );
 }
 function FieldRenderer({ field, value, onChange }) {
@@ -9906,7 +9978,7 @@ function Table({
         )
       ] })
     };
-    return [...columns, actionsCol];
+    return defaultActions.position === "first" ? [actionsCol, ...columns] : [...columns, actionsCol];
   }, [columns, defaultActions]);
   const handleSort = (key) => {
     if (sortKey !== key) {
@@ -10002,9 +10074,9 @@ function Table({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-            filteredData.length,
+            serverPagination ? serverPagination.pagination.total : filteredData.length,
             " ",
-            filteredData.length === 1 ? "row" : "rows",
+            (serverPagination ? serverPagination.pagination.total : filteredData.length) === 1 ? "row" : "rows",
             search && ` \xB7 filtered from ${tableData.length}`
           ] })
         ] })
@@ -10178,7 +10250,7 @@ function Table({
       ] }),
       serverPagination && (() => {
         const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
-        const totalServerPages = Math.ceil(pagination2.total / pagination2.per_page);
+        const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
         const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
         return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [

package/dist/index.d.cts

@@ -344,6 +344,7 @@ interface ServerPaginationLink {
 interface ServerPagination {
     first_page_url: string;
     last_page_url: string;
+    last_page: number;
     next_page_url: string | null;
     prev_page_url: string | null;
     per_page: number;
@@ -360,6 +361,8 @@ interface UseServerTableOptions {
     url: string;
     /** Extra query params merged on every request */
     params?: Record<string, string | number>;
+    /** If true, the response is expected to be a Laravel-encrypted payload and will be decrypted using VITE_LARAVEL_KEY */
+    encrypt?: boolean;
 }
 interface UseServerTableReturn<T> {
     data: T[];
@@ -377,7 +380,7 @@ interface ServerPaginationProp {
     currentPage: number;
     goToPage: (page: number) => void;
 }
-declare function useServerTable<T extends Record<string, any>>({ url, params }: UseServerTableOptions): UseServerTableReturn<T>;
+declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt }: UseServerTableOptions): UseServerTableReturn<T>;
 type ActionFieldType = "input" | "password" | "textarea" | "checkbox" | "toggle" | "select" | "radio" | "slider" | "tag-input" | "otp" | "combobox" | "color-picker" | "date-range" | "rich-text" | "file-upload" | "repeater";
 interface ActionField {
     key: string;
@@ -412,6 +415,8 @@ interface DefaultActionsConfig<T> {
     baseUrl: string;
     /** Row key used as the URL id segment. Defaults to "id". */
     idKey?: keyof T;
+    /** Position of the Actions column. Default "last". */
+    position?: "first" | "last";
     /** Fields rendered in the Edit modal form. Auto-derived from row keys when omitted. */
     editForm?: ActionField[];
     /** Fields rendered in the View modal. Auto-derived from row keys when omitted. */
@@ -462,6 +467,8 @@ interface ServerDataGridProp {
 interface UseServerDataGridOptions {
     url: string;
     params?: Record<string, string | number>;
+    /** If true, the response is expected to be a Laravel-encrypted payload and will be decrypted using VITE_LARAVEL_KEY */
+    encrypt?: boolean;
 }
 interface UseServerDataGridReturn<T> {
     data: T[];
@@ -474,7 +481,7 @@ interface UseServerDataGridReturn<T> {
     goToPage: (page: number) => void;
     reload: () => void;
 }
-declare function useServerDataGrid<T extends Record<string, any>>({ url, params }: UseServerDataGridOptions): UseServerDataGridReturn<T>;
+declare function useServerDataGrid<T extends Record<string, any>>({ url, params, encrypt }: UseServerDataGridOptions): UseServerDataGridReturn<T>;
 type SortDir = "asc" | "desc" | null;
 interface DataGridColumn<T> {
     key: keyof T | string;

package/dist/index.d.ts

@@ -344,6 +344,7 @@ interface ServerPaginationLink {
 interface ServerPagination {
     first_page_url: string;
     last_page_url: string;
+    last_page: number;
     next_page_url: string | null;
     prev_page_url: string | null;
     per_page: number;
@@ -360,6 +361,8 @@ interface UseServerTableOptions {
     url: string;
     /** Extra query params merged on every request */
     params?: Record<string, string | number>;
+    /** If true, the response is expected to be a Laravel-encrypted payload and will be decrypted using VITE_LARAVEL_KEY */
+    encrypt?: boolean;
 }
 interface UseServerTableReturn<T> {
     data: T[];
@@ -377,7 +380,7 @@ interface ServerPaginationProp {
     currentPage: number;
     goToPage: (page: number) => void;
 }
-declare function useServerTable<T extends Record<string, any>>({ url, params }: UseServerTableOptions): UseServerTableReturn<T>;
+declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt }: UseServerTableOptions): UseServerTableReturn<T>;
 type ActionFieldType = "input" | "password" | "textarea" | "checkbox" | "toggle" | "select" | "radio" | "slider" | "tag-input" | "otp" | "combobox" | "color-picker" | "date-range" | "rich-text" | "file-upload" | "repeater";
 interface ActionField {
     key: string;
@@ -412,6 +415,8 @@ interface DefaultActionsConfig<T> {
     baseUrl: string;
     /** Row key used as the URL id segment. Defaults to "id". */
     idKey?: keyof T;
+    /** Position of the Actions column. Default "last". */
+    position?: "first" | "last";
     /** Fields rendered in the Edit modal form. Auto-derived from row keys when omitted. */
     editForm?: ActionField[];
     /** Fields rendered in the View modal. Auto-derived from row keys when omitted. */
@@ -462,6 +467,8 @@ interface ServerDataGridProp {
 interface UseServerDataGridOptions {
     url: string;
     params?: Record<string, string | number>;
+    /** If true, the response is expected to be a Laravel-encrypted payload and will be decrypted using VITE_LARAVEL_KEY */
+    encrypt?: boolean;
 }
 interface UseServerDataGridReturn<T> {
     data: T[];
@@ -474,7 +481,7 @@ interface UseServerDataGridReturn<T> {
     goToPage: (page: number) => void;
     reload: () => void;
 }
-declare function useServerDataGrid<T extends Record<string, any>>({ url, params }: UseServerDataGridOptions): UseServerDataGridReturn<T>;
+declare function useServerDataGrid<T extends Record<string, any>>({ url, params, encrypt }: UseServerDataGridOptions): UseServerDataGridReturn<T>;
 type SortDir = "asc" | "desc" | null;
 interface DataGridColumn<T> {
     key: keyof T | string;