@juv/codego-react-ui 3.1.0 → 3.1.2

package/dist/index.js

@@ -1997,6 +1997,60 @@ function MetricRow({ items, divided = true, className }) {
 // src/components/ui/data-grid.tsx
 import * as React24 from "react";
 import { createPortal as createPortal2 } from "react-dom";
+
+// src/components/tools/decryptPayload.ts
+import CryptoJS from "crypto-js";
+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 CryptoJS.enc.Base64.parse(secretKey.slice("base64:".length));
+  }
+  return CryptoJS.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 = CryptoJS.HmacSHA256(parsed.iv + parsed.value, key).toString();
+  if (expectedMac !== parsed.mac) {
+    throw new Error("Invalid payload MAC (wrong key or tampered payload).");
+  }
+  const iv = CryptoJS.enc.Base64.parse(parsed.iv);
+  const ciphertext = CryptoJS.enc.Base64.parse(parsed.value);
+  const cipherParams = CryptoJS.lib.CipherParams.create({ ciphertext });
+  const decrypted = CryptoJS.AES.decrypt(cipherParams, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  const plaintext = decrypted.toString(CryptoJS.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
 import axios from "axios";
 import { ChevronUp, ChevronDown as ChevronDown4, ChevronsUpDown, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight7, Search as Search4, Settings2, Check as Check5, Eye, Pencil, Trash, Loader2, X as X7 } from "lucide-react";
 
@@ -4730,7 +4784,7 @@ Input.displayName = "Input";
 
 // src/components/ui/data-grid.tsx
 import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs27 } from "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);
@@ -4744,25 +4798,26 @@ function useServerDataGrid({ url, params }) {
     setError(null);
     axios.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 rawLastPage = res.last_page;
+      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 = res.pagination ?? {
-        first_page_url: res.first_page_url ?? `${url}?page=1`,
-        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
+      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: 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,
+        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())
           }))
@@ -5023,9 +5078,9 @@ function DataGrid({
   const [viewItem, setViewItem] = React24.useState(null);
   const [editItem, setEditItem] = React24.useState(null);
   const [deleteItem, setDeleteItem] = React24.useState(null);
-  const [tableData, setTableData] = React24.useState(data);
+  const [tableData, setTableData] = React24.useState(data ?? []);
   React24.useEffect(() => {
-    setTableData(data);
+    setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? (typeof rowKey === "string" ? rowKey : "id");
   const autoFields = React24.useMemo(() => {
@@ -5070,7 +5125,7 @@ function DataGrid({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, []);
-  let processed = data.filter(
+  let processed = (data ?? []).filter(
     (row) => Object.entries(filters).every(([k, v]) => {
       if (!v) return true;
       const cell = String(row[k] ?? "").toLowerCase();
@@ -5268,7 +5323,16 @@ function DataGrid({
     serverPagination && (() => {
       const { pagination, currentPage: cp, goToPage } = serverPagination;
       const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
-      const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+      const pills = [];
+      if (totalServerPages <= 7) {
+        for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+      } else if (cp <= 4) {
+        pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+      } else if (cp >= totalServerPages - 3) {
+        pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+      } else {
+        pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+      }
       return /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
         /* @__PURE__ */ jsxs27("span", { className: "text-xs text-muted-foreground", children: [
           pagination.total,
@@ -5287,18 +5351,20 @@ function DataGrid({
               children: /* @__PURE__ */ jsx28(ChevronLeft5, { className: "h-4 w-4" })
             }
           ),
-          pageLinks.map((p) => /* @__PURE__ */ jsx28(
-            "button",
-            {
-              onClick: () => goToPage(p),
-              className: cn(
-                "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-              ),
-              children: p
-            },
-            p
-          )),
+          pills.map(
+            (p, i) => p < 0 ? /* @__PURE__ */ jsx28("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ jsx28(
+              "button",
+              {
+                onClick: () => goToPage(p),
+                className: cn(
+                  "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                  p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                ),
+                children: p
+              },
+              p
+            )
+          ),
           /* @__PURE__ */ jsx28(
             "button",
             {
@@ -9382,7 +9448,7 @@ import { createPortal as createPortal4 } from "react-dom";
 import axios2 from "axios";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight9, Search as Search5, Trash2 as Trash23, ChevronsUpDown as ChevronsUpDown2, ChevronUp as ChevronUp2, ChevronDown as ChevronDown7, X as X13, Eye as Eye2, Pencil as Pencil2, Trash as Trash3, Loader2 as Loader22 } from "lucide-react";
 import { Fragment as Fragment15, jsx as jsx55, jsxs as jsxs48 } from "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);
@@ -9398,25 +9464,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 rawLastPage = res.last_page;
+      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 = res.pagination ?? {
-        first_page_url: res.first_page_url ?? `${url}?page=1`,
-        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
+      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: 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,
+        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())
           }))
@@ -9755,9 +9822,9 @@ function Table({
   const [viewItem, setViewItem] = React44.useState(null);
   const [editItem, setEditItem] = React44.useState(null);
   const [deleteItem, setDeleteItem] = React44.useState(null);
-  const [tableData, setTableData] = React44.useState(data);
+  const [tableData, setTableData] = React44.useState(data ?? []);
   React44.useEffect(() => {
-    setTableData(data);
+    setTableData(data ?? []);
   }, [data]);
   const actionIdKey = defaultActions?.idKey ?? idKey;
   const autoFields = React44.useMemo(() => {
@@ -10080,7 +10147,16 @@ function Table({
       serverPagination && (() => {
         const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
         const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
-        const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
+        const pills = [];
+        if (totalServerPages <= 7) {
+          for (let i = 1; i <= totalServerPages; i++) pills.push(i);
+        } else if (cp <= 4) {
+          pills.push(1, 2, 3, 4, 5, -1, totalServerPages);
+        } else if (cp >= totalServerPages - 3) {
+          pills.push(1, -1, totalServerPages - 4, totalServerPages - 3, totalServerPages - 2, totalServerPages - 1, totalServerPages);
+        } else {
+          pills.push(1, -1, cp - 1, cp, cp + 1, -2, totalServerPages);
+        }
         return /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ jsxs48("span", { className: "text-xs text-muted-foreground", children: [
             pagination2.total,
@@ -10099,18 +10175,20 @@ function Table({
                 children: /* @__PURE__ */ jsx55(ChevronLeft6, { className: "h-4 w-4" })
               }
             ),
-            pageLinks.map((p) => /* @__PURE__ */ jsx55(
-              "button",
-              {
-                onClick: () => goToPage(p),
-                className: cn(
-                  "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
-                  p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-                ),
-                children: p
-              },
-              p
-            )),
+            pills.map(
+              (p, i) => p < 0 ? /* @__PURE__ */ jsx55("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }, p - i) : /* @__PURE__ */ jsx55(
+                "button",
+                {
+                  onClick: () => goToPage(p),
+                  className: cn(
+                    "flex h-8 w-8 items-center justify-center rounded-lg border text-xs font-medium transition-colors",
+                    p === cp ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ),
+                  children: p
+                },
+                p
+              )
+            ),
             /* @__PURE__ */ jsx55(
               "button",
               {

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -31,8 +31,9 @@
     "@types/leaflet": "^1.9.21",
     "@types/leaflet.markercluster": "^1.5.6",
     "@vitejs/plugin-react": "^5.0.4",
-    "axios": "^1.13.6",
+    "axios": ">=1",
     "clsx": "^2.1.1",
+    "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",