@cryptlex/web-components 1.3.3 → 1.3.5

package/dist/components/data-table/table-content.es.js

@@ -1,14 +1,15 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { Table as d, TableHeader as p, TableRow as c, TableCell as a, TableBody as u, TableFooter as g } from "../ui/table.es.js";
-import { flexRender as i } from "@tanstack/react-table";
-function h({
-  table: o,
-  isFetching: r,
-  columns: m
+import { jsxs as a, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { Table as g, TableHeader as p, TableRow as c, TableCell as s, TableBody as h, TableFooter as u } from "../ui/table.es.js";
+import { flexRender as d } from "@tanstack/react-table";
+import { Info as f } from "lucide-react";
+function y({
+  table: r,
+  columns: i,
+  dataQuery: o
 }) {
-  return /* @__PURE__ */ n(d, { className: "relative h-full w-full", children: [
-    /* @__PURE__ */ e(p, { className: "sticky top-0 z-10", children: o.getHeaderGroups().map((s, l) => /* @__PURE__ */ e(c, { className: "border-b", children: s.headers.map((t) => /* @__PURE__ */ n(
-      a,
+  return /* @__PURE__ */ a(g, { className: "relative h-full w-full", children: [
+    /* @__PURE__ */ e(p, { className: "sticky top-0 z-10", children: r.getHeaderGroups().map((n, l) => /* @__PURE__ */ e(c, { className: "border-b", children: n.headers.map((t) => /* @__PURE__ */ a(
+      s,
       {
         className: `
                   px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap 
@@ -17,7 +18,7 @@ function h({
                 `,
         onClick: t.column.getToggleSortingHandler(),
         children: [
-          t.isPlaceholder ? null : i(t.column.columnDef.header, t.getContext()),
+          t.isPlaceholder ? null : d(t.column.columnDef.header, t.getContext()),
           {
             asc: "↑",
             desc: "↓"
@@ -26,21 +27,24 @@ function h({
       },
       t.id
     )) }, l)) }),
-    /* @__PURE__ */ e(u, { className: "flex-1 overflow-y-auto", children: o.getRowModel().rows.length ? o.getRowModel().rows.map((s) => /* @__PURE__ */ e(c, { "data-state": s.getIsSelected() && "selected", children: s.getVisibleCells().map((l) => /* @__PURE__ */ e(
-      a,
+    /* @__PURE__ */ e(h, { className: "flex-1 overflow-y-auto", children: r.getRowModel().rows.length ? r.getRowModel().rows.map((n) => /* @__PURE__ */ e(c, { "data-state": n.getIsSelected() && "selected", children: n.getVisibleCells().map((l) => /* @__PURE__ */ e(
+      s,
       {
         className: `
                     px-4 py-2 text-left text-sm whitespace-nowrap 
                     ${l.column.id === "actions" ? "sticky right-0 bg-card text-center shadow-2xl" : ""}
                   `,
-        children: i(l.column.columnDef.cell, l.getContext())
+        children: d(l.column.columnDef.cell, l.getContext())
       },
       l.id
-    )) }, s.id)) : /* @__PURE__ */ e(c, { children: !r && /* @__PURE__ */ e(a, { colSpan: m.length, className: "px-4 py-2 text-center text-sm", children: "No results." }) }) }),
-    r && /* @__PURE__ */ e(g, { className: "absolute inset-0 z-20 flex justify-center items-center bg-card/80" })
+    )) }, n.id)) : /* @__PURE__ */ e(c, { className: "h-[55vh] hover:bg-transparent cursor-not-allowed", children: !o.isFetching && o.isError ? /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(s, { colSpan: i.length, className: "border-none  ", children: /* @__PURE__ */ a("span", { className: "flex  gap-3 justify-center align-middle items-center ", children: [
+      /* @__PURE__ */ e(f, {}),
+      " You don't have the required permissions. Please contact your admin."
+    ] }) }) }) : /* @__PURE__ */ e(s, { colSpan: i.length, children: /* @__PURE__ */ e("span", { className: "flex gap-3 justify-center align-middle items-center ", children: "No result found." }) }) }) }),
+    o.isFetching && /* @__PURE__ */ e(u, { className: "absolute inset-0 z-20 flex justify-center items-center bg-card/80" })
   ] });
 }
 export {
-  h as TableContent
+  y as TableContent
 };
 //# sourceMappingURL=table-content.es.js.map

package/dist/components/data-table/table-content.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import {\n  Table as CxTable,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport { ColumnDef, Table, flexRender } from '@tanstack/react-table';\n\nexport function TableContent<TData, TValue>({\n  table,\n  isFetching,\n  columns,\n}: {\n  table: Table<TData>;\n  isFetching: boolean;\n  columns: ColumnDef<TData, TValue>[];\n}) {\n  return (\n    <CxTable className=\"relative h-full w-full\">\n      <TableHeader className=\"sticky top-0 z-10\">\n        {table.getHeaderGroups().map((headerGroup, index) => (\n          <TableRow key={index} className=\"border-b\">\n            {headerGroup.headers.map((header) => (\n              <TableCell\n                key={header.id}\n                className={`\n                  px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap \n                  bg-card \n                  ${header.id === 'actions' ? 'sticky right-0 z-50 bg-card' : ''}\n                `}\n                onClick={header.column.getToggleSortingHandler()}\n              >\n                {header.isPlaceholder\n                  ? null\n                  : flexRender(header.column.columnDef.header, header.getContext())}\n                {{\n                  asc: '↑',\n                  desc: '↓',\n                }[header.column.getIsSorted() as string] ?? null}\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableHeader>\n      <TableBody className=\"flex-1 overflow-y-auto\">\n        {table.getRowModel().rows.length ? (\n          table.getRowModel().rows.map((row) => (\n            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>\n              {row.getVisibleCells().map((cell) => (\n                <TableCell\n                  key={cell.id}\n                  className={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap \n                    ${cell.column.id === 'actions' ? 'sticky right-0 bg-card text-center shadow-2xl' : ''}\n                  `}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </TableCell>\n              ))}\n            </TableRow>\n          ))\n        ) : (\n          <TableRow>\n            {!isFetching && (\n              <TableCell colSpan={columns.length} className=\"px-4 py-2 text-center text-sm\">\n                No results.\n              </TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n      {/* Loader positioned to cover entire table viewport */}\n      {isFetching && (\n        <TableFooter className=\"absolute inset-0 z-20 flex justify-center items-center bg-card/80\" />\n      )}\n    </CxTable>\n  );\n}\n"],"names":["TableContent","table","isFetching","columns","jsxs","CxTable","jsx","TableHeader","headerGroup","index","TableRow","header","TableCell","flexRender","TableBody","row","cell","TableFooter"],"mappings":";;;AAUO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AACF,GAIG;AAEC,SAAA,gBAAAC,EAACC,GAAQ,EAAA,WAAU,0BACjB,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,WAAU,qBACpB,YAAM,gBAAgB,EAAE,IAAI,CAACC,GAAaC,MACzC,gBAAAH,EAACI,KAAqB,WAAU,YAC7B,YAAY,QAAQ,IAAI,CAACC,MACxB,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA;AAAA,oBAGPD,EAAO,OAAO,YAAY,gCAAgC,EAAE;AAAA;AAAA,QAEhE,SAASA,EAAO,OAAO,wBAAwB;AAAA,QAE9C,UAAA;AAAA,UAAOA,EAAA,gBACJ,OACAE,EAAWF,EAAO,OAAO,UAAU,QAAQA,EAAO,YAAY;AAAA,UACjE;AAAA,YACC,KAAK;AAAA,YACL,MAAM;AAAA,UACN,EAAAA,EAAO,OAAO,YAAA,CAAuB,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAdvCA,EAAO;AAAA,IAAA,CAgBf,EAAA,GAnBYF,CAoBf,CACD,GACH;AAAA,IACC,gBAAAH,EAAAQ,GAAA,EAAU,WAAU,0BAClB,UAAMb,EAAA,YAAA,EAAc,KAAK,SACxBA,EAAM,YAAY,EAAE,KAAK,IAAI,CAACc,MAC3B,gBAAAT,EAAAI,GAAA,EAAsB,cAAYK,EAAI,cAAc,KAAK,YACvD,UAAAA,EAAI,gBAAgB,EAAE,IAAI,CAACC,MAC1B,gBAAAV;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA,sBAEPI,EAAK,OAAO,OAAO,YAAY,kDAAkD,EAAE;AAAA;AAAA,QAGtF,YAAWA,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,MAAA;AAAA,MANpDA,EAAK;AAAA,IAAA,CAQb,EAXY,GAAAD,EAAI,EAYnB,CACD,sBAEAL,GACE,EAAA,UAAA,CAACR,KACC,gBAAAI,EAAAM,GAAA,EAAU,SAAST,EAAQ,QAAQ,WAAU,iCAAgC,UAAA,cAAA,CAE9E,EAEJ,CAAA,GAEJ;AAAA,IAECD,KACC,gBAAAI,EAACW,GAAY,EAAA,WAAU,oEAAoE,CAAA;AAAA,EAAA,GAE/F;AAEJ;"}
+{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import {\n  Table as CxTable,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { ColumnDef, Table, flexRender } from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\n\nexport function TableContent<TData, TValue>({\n  table,\n  columns,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  columns: ColumnDef<TData, TValue>[];\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  return (\n    <CxTable className=\"relative h-full w-full\">\n      <TableHeader className=\"sticky top-0 z-10\">\n        {table.getHeaderGroups().map((headerGroup, index) => (\n          <TableRow key={index} className=\"border-b\">\n            {headerGroup.headers.map((header) => (\n              <TableCell\n                key={header.id}\n                className={`\n                  px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap \n                  bg-card \n                  ${header.id === 'actions' ? 'sticky right-0 z-50 bg-card' : ''}\n                `}\n                onClick={header.column.getToggleSortingHandler()}\n              >\n                {header.isPlaceholder\n                  ? null\n                  : flexRender(header.column.columnDef.header, header.getContext())}\n                {{\n                  asc: '↑',\n                  desc: '↓',\n                }[header.column.getIsSorted() as string] ?? null}\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableHeader>\n      <TableBody className=\"flex-1 overflow-y-auto\">\n        {table.getRowModel().rows.length ? (\n          table.getRowModel().rows.map((row) => (\n            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>\n              {row.getVisibleCells().map((cell) => (\n                <TableCell\n                  key={cell.id}\n                  className={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap \n                    ${\n                      cell.column.id === 'actions'\n                        ? 'sticky right-0 bg-card text-center shadow-2xl'\n                        : ''\n                    }\n                  `}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </TableCell>\n              ))}\n            </TableRow>\n          ))\n        ) : (\n          <TableRow className=\"h-[55vh] hover:bg-transparent cursor-not-allowed\">\n            {!dataQuery.isFetching && dataQuery.isError ? (\n              <>\n                <TableCell colSpan={columns.length} className=\"border-none  \">\n                  <span className=\"flex  gap-3 justify-center align-middle items-center \">\n                    <Info /> You don't have the required permissions. Please contact your admin.\n                  </span>\n                </TableCell>\n              </>\n            ) : (\n              <TableCell colSpan={columns.length}>\n                <span className=\"flex gap-3 justify-center align-middle items-center \">\n                  No result found.\n                </span>\n              </TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n      {/* Loader positioned to cover entire table viewport */}\n      {dataQuery.isFetching && (\n        <TableFooter className=\"absolute inset-0 z-20 flex justify-center items-center bg-card/80\" />\n      )}\n    </CxTable>\n  );\n}\n"],"names":["TableContent","table","columns","dataQuery","jsxs","CxTable","jsx","TableHeader","headerGroup","index","TableRow","header","TableCell","flexRender","TableBody","row","cell","Fragment","Info","TableFooter"],"mappings":";;;;AAYO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAIG;AAEC,SAAA,gBAAAC,EAACC,GAAQ,EAAA,WAAU,0BACjB,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,WAAU,qBACpB,YAAM,gBAAgB,EAAE,IAAI,CAACC,GAAaC,MACzC,gBAAAH,EAACI,KAAqB,WAAU,YAC7B,YAAY,QAAQ,IAAI,CAACC,MACxB,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA;AAAA,oBAGPD,EAAO,OAAO,YAAY,gCAAgC,EAAE;AAAA;AAAA,QAEhE,SAASA,EAAO,OAAO,wBAAwB;AAAA,QAE9C,UAAA;AAAA,UAAOA,EAAA,gBACJ,OACAE,EAAWF,EAAO,OAAO,UAAU,QAAQA,EAAO,YAAY;AAAA,UACjE;AAAA,YACC,KAAK;AAAA,YACL,MAAM;AAAA,UACN,EAAAA,EAAO,OAAO,YAAA,CAAuB,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAdvCA,EAAO;AAAA,IAAA,CAgBf,EAAA,GAnBYF,CAoBf,CACD,GACH;AAAA,IACC,gBAAAH,EAAAQ,GAAA,EAAU,WAAU,0BAClB,UAAMb,EAAA,YAAA,EAAc,KAAK,SACxBA,EAAM,YAAY,EAAE,KAAK,IAAI,CAACc,MAC3B,gBAAAT,EAAAI,GAAA,EAAsB,cAAYK,EAAI,cAAc,KAAK,YACvD,UAAAA,EAAI,gBAAgB,EAAE,IAAI,CAACC,MAC1B,gBAAAV;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA,sBAGPI,EAAK,OAAO,OAAO,YACf,kDACA,EACN;AAAA;AAAA,QAGD,YAAWA,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,MAAA;AAAA,MAVpDA,EAAK;AAAA,IAAA,CAYb,EAfY,GAAAD,EAAI,EAgBnB,CACD,IAED,gBAAAT,EAACI,GAAS,EAAA,WAAU,oDACjB,UAAA,CAACP,EAAU,cAAcA,EAAU,UAClC,gBAAAG,EAAAW,GAAA,EACE,UAAC,gBAAAX,EAAAM,GAAA,EAAU,SAASV,EAAQ,QAAQ,WAAU,iBAC5C,UAAA,gBAAAE,EAAC,QAAK,EAAA,WAAU,yDACd,UAAA;AAAA,MAAA,gBAAAE,EAACY,GAAK,EAAA;AAAA,MAAE;AAAA,IAAA,GACV,EACF,CAAA,EAAA,CACF,IAEA,gBAAAZ,EAACM,KAAU,SAASV,EAAQ,QAC1B,UAAA,gBAAAI,EAAC,UAAK,WAAU,wDAAuD,UAEvE,oBAAA,EAAA,CACF,EAEJ,CAAA,GAEJ;AAAA,IAECH,EAAU,cACR,gBAAAG,EAAAa,GAAA,EAAY,WAAU,oEAAoE,CAAA;AAAA,EAAA,GAE/F;AAEJ;"}

package/dist/components/data-table/table-utils/createTableFetchFn.es.js

@@ -1,19 +1,18 @@
-import { merge as u } from "lodash";
-import { ctxClient as m } from "./fetch.es.js";
-function f(e, a) {
-  return async (t, o, c, i) => {
-    const r = {
+import { merge as d } from "lodash-es";
+function f(e, n, a) {
+  return async (t, o, u, s) => {
+    const c = {
       params: {
         query: {
           page: t.pageIndex + 1,
           limit: t.pageSize,
           sort: p(o[0]),
-          query: c,
-          ...i
+          query: u,
+          ...s
         }
       }
-    }, s = u(r, a);
-    return console.log(s), m.GET(e, r).then((n) => ({ total: parseInt(n.response.headers.get("Pagination-Count") || "0"), data: n.data }));
+    }, i = d(c, a);
+    return e.GET(n, i).then((r) => ({ total: parseInt(r.response.headers.get("Pagination-Count") || "0"), data: r.data }));
   };
 }
 function p(e) {

package/dist/components/data-table/table-utils/createTableFetchFn.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTableFetchFn.es.js","sources":["../../../../lib/components/data-table/table-utils/createTableFetchFn.ts"],"sourcesContent":["import { merge } from 'lodash';\nimport { ParamsOption } from 'openapi-fetch';\nimport { ctxClient } from './fetch';\nimport { type TableFetchFn } from './types';\ninterface Params {\n  query: Record<string, string | number | boolean | Record<string, string | number | boolean>>;\n}\n\nexport function createTableFetchFn<_any, Return>(\n  path: Parameters<typeof ctxClient.GET>[0],\n  params: ParamsOption<any>,\n): TableFetchFn<Return> {\n  return async (pagination, sorting, searching, filtering) => {\n    // TODO merge with params\n    const ab: { params: Params } = {\n      params: {\n        query: {\n          page: pagination.pageIndex + 1,\n          limit: pagination.pageSize,\n          sort: generateSortParam(sorting[0]),\n          query: searching,\n          ...filtering,\n        },\n      },\n    };\n    // deep merge using lodash\n    //TODO: Fix type error here when pathParams is used in the GET\n    const pathParams = merge(ab, params);\n    console.log(pathParams);\n    return ctxClient.GET(path, ab).then((value) => {\n      const rowCount = parseInt(value.response.headers.get('Pagination-Count') || '0');\n      return { total: rowCount, data: value.data };\n    });\n  };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n  if (sort) {\n    if (sort.desc) {\n      return `-${sort.id}`;\n    } else {\n      return `+${sort.id}`;\n    }\n  } else {\n    return '-createdAt';\n  }\n}\n"],"names":["createTableFetchFn","path","params","pagination","sorting","searching","filtering","ab","generateSortParam","pathParams","merge","ctxClient","value","sort"],"mappings":";;AAQgB,SAAAA,EACdC,GACAC,GACsB;AACtB,SAAO,OAAOC,GAAYC,GAASC,GAAWC,MAAc;AAE1D,UAAMC,IAAyB;AAAA,MAC7B,QAAQ;AAAA,QACN,OAAO;AAAA,UACL,MAAMJ,EAAW,YAAY;AAAA,UAC7B,OAAOA,EAAW;AAAA,UAClB,MAAMK,EAAkBJ,EAAQ,CAAC,CAAC;AAAA,UAClC,OAAOC;AAAA,UACP,GAAGC;AAAA,QAAA;AAAA,MACL;AAAA,IAEJ,GAGMG,IAAaC,EAAMH,GAAIL,CAAM;AACnC,mBAAQ,IAAIO,CAAU,GACfE,EAAU,IAAIV,GAAMM,CAAE,EAAE,KAAK,CAACK,OAE5B,EAAE,OADQ,SAASA,EAAM,SAAS,QAAQ,IAAI,kBAAkB,KAAK,GAAG,GACrD,MAAMA,EAAM,KAAK,EAC5C;AAAA,EACH;AACF;AAEA,SAASJ,EAAkBK,GAAyD;AAClF,SAAIA,IACEA,EAAK,OACA,IAAIA,EAAK,EAAE,KAEX,IAAIA,EAAK,EAAE,KAGb;AAEX;"}
+{"version":3,"file":"createTableFetchFn.es.js","sources":["../../../../lib/components/data-table/table-utils/createTableFetchFn.ts"],"sourcesContent":["import type { paths } from '@cryptlex/web-api-types';\nimport { merge } from 'lodash-es';\nimport createClient, { ParamsOption } from 'openapi-fetch';\nimport { type TableFetchFn } from './types';\n\ninterface Params {\n  query: Record<string, string | number | boolean | Record<string, string | number | boolean>>;\n}\n\ntype Client = ReturnType<typeof createClient<paths>>;\n\n// Helper type to extract valid GET paths\ntype GetPaths = {\n  [P in keyof paths]: paths[P] extends { get: any } ? P : never;\n}[keyof paths];\n\nexport function createTableFetchFn<_any, Return>(\n  ctxclient: Client,\n  path: GetPaths,\n  // TODO: Use generic type instead\n  params?: ParamsOption<any>,\n): TableFetchFn<Return> {\n  return async (pagination, sorting, searching, filtering) => {\n    const ab: { params: Params } = {\n      params: {\n        query: {\n          page: pagination.pageIndex + 1,\n          limit: pagination.pageSize,\n          sort: generateSortParam(sorting[0]),\n          query: searching,\n          ...filtering,\n        },\n      },\n    };\n\n    const pathParams = merge(ab, params) as { params: Params };\n\n    return ctxclient.GET(path, pathParams).then((value) => {\n      const rowCount = parseInt(value.response.headers.get('Pagination-Count') || '0');\n      return { total: rowCount, data: value.data };\n    });\n  };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n  if (sort) {\n    if (sort.desc) {\n      return `-${sort.id}`;\n    } else {\n      return `+${sort.id}`;\n    }\n  } else {\n    return '-createdAt';\n  }\n}\n"],"names":["createTableFetchFn","ctxclient","path","params","pagination","sorting","searching","filtering","ab","generateSortParam","pathParams","merge","value","sort"],"mappings":";AAgBgB,SAAAA,EACdC,GACAC,GAEAC,GACsB;AACtB,SAAO,OAAOC,GAAYC,GAASC,GAAWC,MAAc;AAC1D,UAAMC,IAAyB;AAAA,MAC7B,QAAQ;AAAA,QACN,OAAO;AAAA,UACL,MAAMJ,EAAW,YAAY;AAAA,UAC7B,OAAOA,EAAW;AAAA,UAClB,MAAMK,EAAkBJ,EAAQ,CAAC,CAAC;AAAA,UAClC,OAAOC;AAAA,UACP,GAAGC;AAAA,QAAA;AAAA,MACL;AAAA,IAEJ,GAEMG,IAAaC,EAAMH,GAAIL,CAAM;AAEnC,WAAOF,EAAU,IAAIC,GAAMQ,CAAU,EAAE,KAAK,CAACE,OAEpC,EAAE,OADQ,SAASA,EAAM,SAAS,QAAQ,IAAI,kBAAkB,KAAK,GAAG,GACrD,MAAMA,EAAM,KAAK,EAC5C;AAAA,EACH;AACF;AAEA,SAASH,EAAkBI,GAAyD;AAClF,SAAIA,IACEA,EAAK,OACA,IAAIA,EAAK,EAAE,KAEX,IAAIA,EAAK,EAAE,KAGb;AAEX;"}

package/dist/components/data-table/table-utils/types.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.es.js","sources":["../../../../lib/components/data-table/table-utils/types.ts"],"sourcesContent":["import { components } from '@cryptlex/web-api-types';\nimport { PaginationState, SortingState } from '@tanstack/react-table';\n// export type RoutePath = RoutePaths<typeof routeTree>;\nexport type fieldsToDisplay = {\n  display: string;\n  accessor: string;\n};\n[];\nexport enum DYNAMIC_INPUT_TARGET {\n  USER,\n  ORGANIZATION,\n  RESELLER,\n}\nexport type VisibilityState<T> = {\n  [K in keyof T]?: boolean;\n};\nexport type TableActions = {\n  /** True if reading this resource is allowed. */\n  read: boolean;\n\n  /** True if creation of resource from dashboard is allowed. */\n  create: boolean;\n\n  /** True if the resource can be updated */\n  update: boolean;\n\n  /** True if the resource can be deleted */\n  delete: boolean;\n\n  /** True if the resource can be exported */\n  export: boolean;\n\n  /** True if the resource can be linked to tags. */\n  tag: boolean;\n\n  /** True if searching is supported. Search is defined by the `query` QueryParameter in the Web API */\n  search: boolean;\n\n  /** True if selection using checkboxes is allowed */\n  selection: boolean;\n\n  /** True if the resource has support for segments */\n  segments: boolean;\n};\n\nexport type JwtDecode = {\n  aud: string;\n  email: string;\n  exp: number;\n  iat: number;\n  jti: string;\n  region: string;\n  role: string;\n  role_type: string;\n  scope: string[];\n  sub: string;\n  teat: number;\n  tenantid: string;\n  token_usage: string;\n  sadmin?: string;\n};\n\nexport type Portals = 'customer-portal' | 'system-portal' | 'reseller-portal' | 'admin-portal';\nexport type MetadataDto = components['schemas']['MetadataDto'];\n\nexport type TableFetchFn<TData> = (\n  p: PaginationState,\n  s: SortingState,\n  q: string,\n  f: any,\n) => Promise<{\n  total: number;\n  data: TData[] | undefined;\n}>;\n/*** Type for hide some of the columns based on the dto of the particular page\n ** `id`, `updatedAt` are by default hidden\n */\nexport type DefaultVisibilityState<T> = {\n  [K in keyof T]?: boolean;\n};\n"],"names":["DYNAMIC_INPUT_TARGET","DYNAMIC_INPUT_TARGET2"],"mappings":"AAQY,IAAAA,sBAAAA,OACVA,EAAAC,EAAA,OAAA,CAAA,IAAA,QACAD,EAAAC,EAAA,eAAA,CAAA,IAAA,gBACAD,EAAAC,EAAA,WAAA,CAAA,IAAA,YAHUD,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"types.es.js","sources":["../../../../lib/components/data-table/table-utils/types.ts"],"sourcesContent":["import { components } from '@cryptlex/web-api-types';\nimport { PaginationState, SortingState } from '@tanstack/react-table';\n// export type RoutePath = RoutePaths<typeof routeTree>;\nexport type fieldsToDisplay = {\n  display: string;\n  accessor: string;\n};\n[];\nexport enum DYNAMIC_INPUT_TARGET {\n  USER,\n  ORGANIZATION,\n  RESELLER,\n}\nexport type VisibilityState<T> = {\n  [K in keyof T]?: boolean;\n};\nexport type TableActions = {\n  /** True if reading this resource is allowed. */\n  read: boolean;\n\n  /** True if creation of resource from dashboard is allowed. */\n  create: boolean;\n\n  /** True if the resource can be updated */\n  update: boolean;\n\n  /** True if the resource can be deleted */\n  delete: boolean;\n\n  /** True if the resource can be exported */\n  export: boolean;\n\n  /** True if the resource can be linked to tags. */\n  tag: boolean;\n\n  /** True if searching is supported. Search is defined by the `query` QueryParameter in the Web API */\n  search: boolean;\n\n  /** True if selection using checkboxes is allowed */\n  selection: boolean;\n\n  /** True if the resource has support for segments */\n  segments: boolean;\n};\n\nexport type MetadataDto = components['schemas']['MetadataDto'];\n\nexport type TableFetchFn<TData> = (\n  p: PaginationState,\n  s: SortingState,\n  q: string,\n  f: any,\n) => Promise<{\n  total: number;\n  data: TData[] | undefined;\n}>;\n/*** Type for hide some of the columns based on the dto of the particular page\n ** `id`, `updatedAt` are by default hidden\n */\nexport type DefaultVisibilityState<T> = {\n  [K in keyof T]?: boolean;\n};\n"],"names":["DYNAMIC_INPUT_TARGET","DYNAMIC_INPUT_TARGET2"],"mappings":"AAQY,IAAAA,sBAAAA,OACVA,EAAAC,EAAA,OAAA,CAAA,IAAA,QACAD,EAAAC,EAAA,eAAA,CAAA,IAAA,gBACAD,EAAAC,EAAA,WAAA,CAAA,IAAA,YAHUD,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/key-value-card/key-value-card.es.js

@@ -0,0 +1,85 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { Badge as c } from "../ui/badge.es.js";
+import "../ui/accordion.es.js";
+import "../ui/avatar.es.js";
+import "../ui/breadcrumb.es.js";
+import "../ui/button.es.js";
+import "../ui/calendar.es.js";
+import { Card as l, CardHeader as d, CardTitle as f, CardContent as h } from "../ui/card.es.js";
+import "../ui/chart.es.js";
+import "../ui/checkbox.es.js";
+import "@radix-ui/react-collapsible";
+import "../ui/command.es.js";
+import { CopyButton as u } from "../ui/copy-button.es.js";
+import "../ui/dialog.es.js";
+import "../ui/drawer.es.js";
+import "../ui/dropdown-menu.es.js";
+import "../ui/form.es.js";
+import "../ui/input.es.js";
+import "../ui/input-otp.es.js";
+import "../ui/label.es.js";
+import { Link as x } from "@tanstack/react-router";
+import "lucide-react";
+import "../ui/mutli-select.es.js";
+import "../ui/navigation-menu.es.js";
+import "../ui/pagination.es.js";
+import "../ui/password-input.es.js";
+import "../ui/popover.es.js";
+import "../ui/radio-group.es.js";
+import "react";
+import "../ui/select.es.js";
+import "../ui/separator.es.js";
+import "../ui/sheet.es.js";
+import "../ui/sidebar.es.js";
+import { Skeleton as y } from "../ui/skeleton.es.js";
+import "sonner";
+import "../ui/table.es.js";
+import "../ui/tabs.es.js";
+import "../ui/tooltip.es.js";
+import { FormatDate as w } from "../data-table/table-utils/date.es.js";
+const ir = ({ data: e, label: s, fields: n }) => {
+  const a = (p, r) => {
+    if (p.transform)
+      return p.transform(r);
+    switch (p.type) {
+      case "link":
+        return /* @__PURE__ */ t(x, { to: r, children: r });
+      case "copyButton":
+        return /* @__PURE__ */ t(u, { value: r });
+      case "date":
+        return /* @__PURE__ */ t("span", { children: w(r) });
+      case "yesno":
+        return /* @__PURE__ */ t("span", { children: r ? "Yes" : "No" });
+      case "badge":
+        return /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: Array.isArray(r) ? r.map((o, i) => /* @__PURE__ */ t(c, { variant: "secondary", children: typeof o == "object" ? (o == null ? void 0 : o.name) || (o == null ? void 0 : o.id) : o }, i)) : r });
+      case "boolean":
+        return /* @__PURE__ */ t("span", { children: r.toString() });
+      default:
+        return /* @__PURE__ */ t("span", { children: r ?? "-" });
+    }
+  };
+  return /* @__PURE__ */ m(l, { children: [
+    /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(f, { children: s }) }),
+    /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: e ? n.map((p) => {
+      const r = p.accessor ? p.accessor.split(".").reduce(
+        (o, i) => o && i in o ? o[i] : void 0,
+        e
+      ) : null;
+      return /* @__PURE__ */ m(
+        "div",
+        {
+          className: "flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0",
+          children: [
+            /* @__PURE__ */ t("p", { className: "text-sm flex w-full justify-start col-span-1", children: p.display }),
+            /* @__PURE__ */ t("div", { className: "text-sm flex w-full justify-start text-wrap", children: a(p, r) })
+          ]
+        },
+        p.display
+      );
+    }) : n.map((p, r) => /* @__PURE__ */ t(y, { className: "h-12 w-full" }, r)) }) })
+  ] });
+};
+export {
+  ir as KeyValueCard
+};
+//# sourceMappingURL=key-value-card.es.js.map

package/dist/components/key-value-card/key-value-card.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-card.es.js","sources":["../../../lib/components/key-value-card/key-value-card.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CopyButton,\n  FormatDate,\n  Skeleton,\n} from '@/index';\nimport { Link } from '@tanstack/react-router';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n  ? {\n      [K in keyof T]: K extends string | number\n        ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`\n        : never;\n    }[keyof T]\n  : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n  display: string;\n  accessor: NestedKeyOf<T>;\n  type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n  transform?: (value: any) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n  data: T; // Ensure data is of type T\n  label: string;\n  fields: DisplayField<T>[];\n  className?: string;\n}\n\nexport const KeyValueCard = <T extends {}>({ data, label, fields }: KeyValueCardProps<T>) => {\n  const renderValue = (field: DisplayField<T>, value: any) => {\n    if (field.transform) {\n      return field.transform(value);\n    }\n    switch (field.type) {\n      case 'link':\n        return <Link to={value}>{value}</Link>;\n      case 'copyButton':\n        return <CopyButton value={value} />;\n      case 'date':\n        return <span>{FormatDate(value)}</span>;\n      case 'yesno':\n        return <span>{value ? 'Yes' : 'No'}</span>;\n      case 'badge':\n        return (\n          <div className=\"flex flex-wrap gap-1\">\n            {Array.isArray(value)\n              ? value.map((item, index) => (\n                  <Badge key={index} variant=\"secondary\">\n                    {typeof item === 'object' ? item?.name || item?.id : item}\n                  </Badge>\n                ))\n              : value}\n          </div>\n        );\n\n      case 'boolean':\n        return <span>{value.toString()}</span>;\n      default:\n        return <span>{value ?? '-'}</span>;\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{label}</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-2\">\n          {data\n            ? fields.map((field) => {\n                // TODO: improve this\n                const value = field.accessor\n                  ? field.accessor\n                      .split('.')\n                      .reduce(\n                        (obj, key) => (obj && key in obj ? obj[key] : undefined),\n                        data as Record<string, any>,\n                      )\n                  : null;\n\n                return (\n                  <div\n                    key={field.display}\n                    className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n                  >\n                    <p className=\"text-sm flex w-full justify-start col-span-1\">{field.display}</p>\n                    <div className=\"text-sm flex w-full justify-start text-wrap\">\n                      {renderValue(field, value)}\n                    </div>\n                  </div>\n                );\n              })\n            : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};"],"names":["KeyValueCard","data","label","fields","renderValue","field","value","jsx","Link","CopyButton","FormatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,MAAMA,KAAe,CAAe,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,QAAmC;AACrF,QAAAC,IAAc,CAACC,GAAwBC,MAAe;AAC1D,QAAID,EAAM;AACD,aAAAA,EAAM,UAAUC,CAAK;AAE9B,YAAQD,EAAM,MAAM;AAAA,MAClB,KAAK;AACH,eAAQ,gBAAAE,EAAAC,GAAA,EAAK,IAAIF,GAAQ,UAAMA,GAAA;AAAA,MACjC,KAAK;AACI,eAAA,gBAAAC,EAACE,KAAW,OAAAH,GAAc;AAAA,MACnC,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAWG,EAAAJ,CAAK,GAAE;AAAA,MAClC,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAQD,IAAA,QAAQ,MAAK;AAAA,MACrC,KAAK;AACH,eACG,gBAAAC,EAAA,OAAA,EAAI,WAAU,wBACZ,UAAM,MAAA,QAAQD,CAAK,IAChBA,EAAM,IAAI,CAACK,GAAMC,MACf,gBAAAL,EAACM,GAAkB,EAAA,SAAQ,aACxB,UAAA,OAAOF,KAAS,YAAWA,KAAA,gBAAAA,EAAM,UAAQA,KAAA,gBAAAA,EAAM,MAAKA,EAD3C,GAAAC,CAEZ,CACD,IACDN,GACN;AAAA,MAGJ,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAMD,EAAA,SAAA,GAAW;AAAA,MACjC;AACS,eAAA,gBAAAC,EAAC,QAAM,EAAA,UAAAD,KAAS,IAAI,CAAA;AAAA,IAAA;AAAA,EAEjC;AAEA,2BACGQ,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAP,EAACQ,GACC,EAAA,UAAA,gBAAAR,EAACS,GAAW,EAAA,UAAAd,EAAM,CAAA,GACpB;AAAA,IACA,gBAAAK,EAACU,GACC,EAAA,UAAA,gBAAAV,EAAC,OAAI,EAAA,WAAU,uBACZ,UACGN,IAAAE,EAAO,IAAI,CAACE,MAAU;AAEpB,YAAMC,IAAQD,EAAM,WAChBA,EAAM,SACH,MAAM,GAAG,EACT;AAAA,QACC,CAACa,GAAKC,MAASD,KAAOC,KAAOD,IAAMA,EAAIC,CAAG,IAAI;AAAA,QAC9ClB;AAAA,MAAA,IAEJ;AAGF,aAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAb,EAAC,KAAE,EAAA,WAAU,gDAAgD,UAAAF,EAAM,SAAQ;AAAA,8BAC1E,OAAI,EAAA,WAAU,+CACZ,UAAYD,EAAAC,GAAOC,CAAK,EAC3B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QANKD,EAAM;AAAA,MAOb;AAAA,IAEH,CAAA,IACDF,EAAO,IAAI,CAACkB,GAAGT,MAAW,gBAAAL,EAAAe,GAAA,EAAqB,WAAU,cAAA,GAAjBV,CAA+B,CAAE,EAC/E,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/sidebar/app-layout.es.js

@@ -1,33 +1,34 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { SideBar as p } from "./sidebar.es.js";
-import { SidebarProvider as l, SidebarTrigger as c } from "../ui/sidebar.es.js";
+import { SidebarProvider as c, SidebarTrigger as a } from "../ui/sidebar.es.js";
 import "../ui/accordion.es.js";
-import { Avatar as a, AvatarImage as n, AvatarFallback as d } from "../ui/avatar.es.js";
+import { Avatar as l, AvatarImage as n, AvatarFallback as d } from "../ui/avatar.es.js";
 import "../ui/badge.es.js";
 import "../ui/breadcrumb.es.js";
-import { Button as s } from "../ui/button.es.js";
+import { Button as h } from "../ui/button.es.js";
 import "../ui/calendar.es.js";
 import "../ui/card.es.js";
 import "../ui/chart.es.js";
 import "../ui/checkbox.es.js";
 import "@radix-ui/react-collapsible";
 import "../ui/command.es.js";
+import { LogOut as f } from "lucide-react";
+import "react";
 import "../ui/dialog.es.js";
 import "../ui/drawer.es.js";
-import { DropdownMenu as h, DropdownMenuTrigger as f, DropdownMenuContent as g, DropdownMenuItem as v } from "../ui/dropdown-menu.es.js";
+import { DropdownMenu as s, DropdownMenuTrigger as v, DropdownMenuContent as g, DropdownMenuItem as N } from "../ui/dropdown-menu.es.js";
 import "../ui/form.es.js";
 import "../ui/input.es.js";
 import "../ui/input-otp.es.js";
 import "../ui/label.es.js";
 import { logout as x } from "../../utils/index.es.js";
-import { LogOut as N } from "lucide-react";
+import { Outlet as w } from "@tanstack/react-router";
 import "../ui/mutli-select.es.js";
 import "../ui/navigation-menu.es.js";
 import "../ui/pagination.es.js";
 import "../ui/password-input.es.js";
 import "../ui/popover.es.js";
 import "../ui/radio-group.es.js";
-import "react";
 import "../ui/select.es.js";
 import "../ui/separator.es.js";
 import "../ui/sheet.es.js";
@@ -35,30 +36,16 @@ import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
 import "../ui/tooltip.es.js";
-import "@tanstack/react-query";
-import "cmdk";
-import "use-debounce";
-import { Outlet as w } from "@tanstack/react-router";
-function lr({ data: e, user: o }) {
+function mr({ data: e, user: o }) {
   var i, m;
   return /* @__PURE__ */ t("div", { className: "h-screen", children: [
-    /* @__PURE__ */ t(l, { children: [
+    /* @__PURE__ */ t(c, { children: [
       /* @__PURE__ */ r(p, { data: e }),
       /* @__PURE__ */ t("div", { className: "flex flex-col h-screen w-full overflow-auto", children: [
         /* @__PURE__ */ t("header", { className: "h-[7vh] sticky top-0 bg-card flex items-center justify-between p-4 pl-0 border-b  z-10", children: [
-          /* @__PURE__ */ t("div", { className: "flex gap-1 items-center", children: [
-            /* @__PURE__ */ r(c, {}),
-            /* @__PURE__ */ r(
-              "img",
-              {
-                src: "https://assets.cryptlex.com/images/logos/cryptlex-logo.svg",
-                alt: "logo",
-                className: "m-0"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ t(h, { children: [
-            /* @__PURE__ */ r(f, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "cursor-pointer", children: /* @__PURE__ */ t(a, { className: "justify-center  items-center", children: [
+          /* @__PURE__ */ r("div", { className: "flex gap-1 items-center", children: /* @__PURE__ */ r(a, {}) }),
+          /* @__PURE__ */ t(s, { children: [
+            /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "cursor-pointer", children: /* @__PURE__ */ t(l, { className: "justify-center  items-center", children: [
               /* @__PURE__ */ r(
                 n,
                 {
@@ -71,7 +58,7 @@ function lr({ data: e, user: o }) {
                 (m = o == null ? void 0 : o.lastName) == null ? void 0 : m.charAt(0)
               ] })
             ] }) }) }),
-            /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(s, { icon: N, onClick: () => x(), children: "Log Out" }) }) })
+            /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(h, { icon: f, onClick: () => x(), children: "Log Out" }) }) })
           ] })
         ] }),
         /* @__PURE__ */ r("div", { className: "flex-1 overflow-auto p-4", children: /* @__PURE__ */ r(w, {}) })
@@ -81,6 +68,6 @@ function lr({ data: e, user: o }) {
   ] });
 }
 export {
-  lr as AppLayout
+  mr as AppLayout
 };
 //# sourceMappingURL=app-layout.es.js.map

package/dist/components/sidebar/app-layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout.es.js","sources":["../../../lib/components/sidebar/app-layout.tsx"],"sourcesContent":["import type { NavItem } from '@/components/sidebar/nav-main';\nimport { SideBar } from '@/components/sidebar/sidebar';\nimport { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  logout,\n} from '@/index';\nimport { Outlet } from '@tanstack/react-router';\nimport { LogOut } from 'lucide-react';\n\nexport interface AppLayoutProps {\n  data: NavItem[]; // Navigation items\n  user?: {\n    firstName?: string;\n    lastName?: string;\n    logoUrl?: string;\n  }; // Optional user information\n}\n\nexport function AppLayout({ data, user }: AppLayoutProps) {\n  return (\n    <div className=\"h-screen\">\n      <SidebarProvider>\n        {/* Sidebar */}\n        <SideBar data={data} />\n\n        {/* Main Content */}\n        <div className=\"flex flex-col h-screen w-full overflow-auto\">\n          {/* Header */}\n          <header className=\"h-[7vh] sticky top-0 bg-card flex items-center justify-between p-4 pl-0 border-b  z-10\">\n            {/* Sidebar Trigger */}\n            <div className=\"flex gap-1 items-center\">\n              <SidebarTrigger />\n              {/* //TODO: Will be replaced with dynamic url */}\n              <img\n                src=\"https://assets.cryptlex.com/images/logos/cryptlex-logo.svg\"\n                alt=\"logo\"\n                className=\"m-0\"\n              />\n            </div>\n\n            {/* User Dropdown */}\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <div className=\"cursor-pointer\">\n                  {/* //TODO: Image url to be replaced by the dynamic url from /account/config */}\n                  <Avatar className=\"justify-center  items-center\">\n                    <AvatarImage\n                      src={user?.logoUrl ?? 'https://app.dev.cryptlex.com/favicon.ico'}\n                      alt=\"icon\"\n                    />\n                    <AvatarFallback className=\"uppercase\">\n                      {user?.firstName?.charAt(0)}\n                      {user?.lastName?.charAt(0)}\n                    </AvatarFallback>\n                  </Avatar>\n                </div>\n              </DropdownMenuTrigger>\n\n              <DropdownMenuContent>\n                <DropdownMenuItem>\n                  <Button icon={LogOut} onClick={() => logout()}>\n                    Log Out\n                  </Button>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </header>\n\n          {/* Scrollable Content */}\n          <div className=\"flex-1 overflow-auto p-4\">\n            <Outlet />\n          </div>\n        </div>\n      </SidebarProvider>{' '}\n    </div>\n  );\n}\n"],"names":["AppLayout","data","user","jsxs","SidebarProvider","jsx","SideBar","SidebarTrigger","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","_a","_b","DropdownMenuContent","DropdownMenuItem","Button","LogOut","logout","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BO,SAASA,GAAU,EAAE,MAAAC,GAAM,MAAAC,KAAwB;;AAEtD,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAEC,EAAA,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAQ,MAAAL,GAAY;AAAA,MAGrB,gBAAAE,EAAC,OAAI,EAAA,WAAU,+CAEb,UAAA;AAAA,QAAC,gBAAAA,EAAA,UAAA,EAAO,WAAU,0FAEhB,UAAA;AAAA,UAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,gBAAAE,EAACE,GAAe,EAAA;AAAA,YAEhB,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAI;AAAA,gBACJ,KAAI;AAAA,gBACJ,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ,GACF;AAAA,4BAGCG,GACC,EAAA,UAAA;AAAA,YAAC,gBAAAH,EAAAI,GAAA,EAAoB,SAAO,IAC1B,UAAC,gBAAAJ,EAAA,OAAA,EAAI,WAAU,kBAEb,UAAA,gBAAAF,EAACO,GAAO,EAAA,WAAU,gCAChB,UAAA;AAAA,cAAA,gBAAAL;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBACC,MAAKT,KAAA,gBAAAA,EAAM,YAAW;AAAA,kBACtB,KAAI;AAAA,gBAAA;AAAA,cACN;AAAA,cACA,gBAAAC,EAACS,GAAe,EAAA,WAAU,aACvB,UAAA;AAAA,iBAAMC,IAAAX,KAAA,gBAAAA,EAAA,cAAA,gBAAAW,EAAW,OAAO;AAAA,iBACxBC,IAAAZ,KAAA,gBAAAA,EAAM,aAAN,gBAAAY,EAAgB,OAAO;AAAA,cAAC,EAC3B,CAAA;AAAA,YAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,YAEC,gBAAAT,EAAAU,GAAA,EACC,UAAC,gBAAAV,EAAAW,GAAA,EACC,4BAACC,GAAO,EAAA,MAAMC,GAAQ,SAAS,MAAMC,EAAA,GAAU,UAAA,UAAA,CAE/C,GACF,EACF,CAAA;AAAA,UAAA,EACF,CAAA;AAAA,QAAA,GACF;AAAA,0BAGC,OAAI,EAAA,WAAU,4BACb,UAAA,gBAAAd,EAACe,KAAO,EACV,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA,GACF;AAAA,IAAmB;AAAA,EAAA,GACrB;AAEJ;"}
+{"version":3,"file":"app-layout.es.js","sources":["../../../lib/components/sidebar/app-layout.tsx"],"sourcesContent":["import type { NavItem } from '@/components/sidebar/nav-main';\nimport { SideBar } from '@/components/sidebar/sidebar';\nimport { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  logout,\n} from '@/index';\nimport { Outlet } from '@tanstack/react-router';\nimport { LogOut } from 'lucide-react';\n\nexport interface AppLayoutProps {\n  data: NavItem[]; // Navigation items\n  user?: {\n    firstName?: string;\n    lastName?: string;\n    logoUrl?: string;\n  }; // Optional user information\n}\n\nexport function AppLayout({ data, user }: AppLayoutProps) {\n  return (\n    <div className=\"h-screen\">\n      <SidebarProvider>\n        {/* Sidebar */}\n        <SideBar data={data} />\n\n        {/* Main Content */}\n        <div className=\"flex flex-col h-screen w-full overflow-auto\">\n          {/* Header */}\n          <header className=\"h-[7vh] sticky top-0 bg-card flex items-center justify-between p-4 pl-0 border-b  z-10\">\n            {/* Sidebar Trigger */}\n            <div className=\"flex gap-1 items-center\">\n              <SidebarTrigger />\n              {/* //TODO: Improve position for this and  Will be replaced with dynamic url */}\n              {/* <img\n                src=\"https://assets.cryptlex.com/images/logos/cryptlex-logo.svg\"\n                alt=\"logo\"\n                className=\"m-0\"\n              /> */}\n            </div>\n\n            {/* User Dropdown */}\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <div className=\"cursor-pointer\">\n                  {/* //TODO: Image url to be replaced by the dynamic url from /account/config */}\n                  <Avatar className=\"justify-center  items-center\">\n                    <AvatarImage\n                      src={user?.logoUrl ?? 'https://app.dev.cryptlex.com/favicon.ico'}\n                      alt=\"icon\"\n                    />\n                    <AvatarFallback className=\"uppercase\">\n                      {user?.firstName?.charAt(0)}\n                      {user?.lastName?.charAt(0)}\n                    </AvatarFallback>\n                  </Avatar>\n                </div>\n              </DropdownMenuTrigger>\n\n              <DropdownMenuContent>\n                <DropdownMenuItem>\n                  <Button icon={LogOut} onClick={() => logout()}>\n                    Log Out\n                  </Button>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </header>\n\n          {/* Scrollable Content */}\n          <div className=\"flex-1 overflow-auto p-4\">\n            <Outlet />\n          </div>\n        </div>\n      </SidebarProvider>{' '}\n    </div>\n  );\n}\n"],"names":["AppLayout","data","user","jsxs","SidebarProvider","jsx","SideBar","SidebarTrigger","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","_a","_b","DropdownMenuContent","DropdownMenuItem","Button","LogOut","logout","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BO,SAASA,GAAU,EAAE,MAAAC,GAAM,MAAAC,KAAwB;;AAEtD,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAEC,EAAA,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAQ,MAAAL,GAAY;AAAA,MAGrB,gBAAAE,EAAC,OAAI,EAAA,WAAU,+CAEb,UAAA;AAAA,QAAC,gBAAAA,EAAA,UAAA,EAAO,WAAU,0FAEhB,UAAA;AAAA,UAAA,gBAAAE,EAAC,OAAI,EAAA,WAAU,2BACb,UAAA,gBAAAA,EAACE,IAAe,CAAA,GAOlB;AAAA,4BAGCC,GACC,EAAA,UAAA;AAAA,YAAC,gBAAAH,EAAAI,GAAA,EAAoB,SAAO,IAC1B,UAAC,gBAAAJ,EAAA,OAAA,EAAI,WAAU,kBAEb,UAAA,gBAAAF,EAACO,GAAO,EAAA,WAAU,gCAChB,UAAA;AAAA,cAAA,gBAAAL;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBACC,MAAKT,KAAA,gBAAAA,EAAM,YAAW;AAAA,kBACtB,KAAI;AAAA,gBAAA;AAAA,cACN;AAAA,cACA,gBAAAC,EAACS,GAAe,EAAA,WAAU,aACvB,UAAA;AAAA,iBAAMC,IAAAX,KAAA,gBAAAA,EAAA,cAAA,gBAAAW,EAAW,OAAO;AAAA,iBACxBC,IAAAZ,KAAA,gBAAAA,EAAM,aAAN,gBAAAY,EAAgB,OAAO;AAAA,cAAC,EAC3B,CAAA;AAAA,YAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,YAEC,gBAAAT,EAAAU,GAAA,EACC,UAAC,gBAAAV,EAAAW,GAAA,EACC,4BAACC,GAAO,EAAA,MAAMC,GAAQ,SAAS,MAAMC,EAAA,GAAU,UAAA,UAAA,CAE/C,GACF,EACF,CAAA;AAAA,UAAA,EACF,CAAA;AAAA,QAAA,GACF;AAAA,0BAGC,OAAI,EAAA,WAAU,4BACb,UAAA,gBAAAd,EAACe,KAAO,EACV,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA,GACF;AAAA,IAAmB;AAAA,EAAA,GACrB;AAEJ;"}

package/dist/components/sidebar/nav-main.es.js

@@ -1,76 +1,78 @@
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
-import { Collapsible as u, CollapsibleTrigger as b, CollapsibleContent as p } from "../ui/collapsible.es.js";
-import { useSidebar as g, SidebarGroup as S, SidebarMenu as f, SidebarMenuItem as o, SidebarMenuButton as i, SidebarMenuSub as C, SidebarMenuSubItem as m, SidebarMenuSubButton as N } from "../ui/sidebar.es.js";
-import { Link as t } from "@tanstack/react-router";
-import { ChevronRight as v } from "lucide-react";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { Collapsible as p, CollapsibleTrigger as u, CollapsibleContent as b } from "../ui/collapsible.es.js";
+import { useSidebar as g, SidebarGroup as f, SidebarMenu as S, SidebarMenuItem as o, SidebarMenuButton as i, SidebarMenuSub as C, SidebarMenuSubItem as N, SidebarMenuSubButton as v } from "../ui/sidebar.es.js";
+import { Link as c } from "@tanstack/react-router";
+import { ChevronRight as x } from "lucide-react";
 import { useState as M } from "react";
-function T({ items: c }) {
-  const { setOpen: d } = g(), [a, s] = M(null), h = (e) => {
-    s((n) => n === e ? null : e);
+function P({ items: d }) {
+  const { setOpen: s } = g(), [a, t] = M(null), h = (l) => {
+    t((n) => n === l ? null : l);
   };
-  return /* @__PURE__ */ l(S, { children: /* @__PURE__ */ l(f, { children: c.map(
-    (e) => e.chidren && e.chidren.length > 0 ? /* @__PURE__ */ l(
-      u,
+  return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(S, { className: "flex gap-2 ", children: d.map(
+    (l) => l.children && l.display && l.children.length > 0 ? /* @__PURE__ */ e(
+      p,
       {
         asChild: !0,
-        open: a === e.label,
+        open: a === l.label,
         className: "group/collapsible",
         children: /* @__PURE__ */ r(o, { children: [
-          /* @__PURE__ */ l(b, { asChild: !0, children: /* @__PURE__ */ r(
+          /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ r(
             i,
             {
-              tooltip: e.label,
+              tooltip: l.label,
               onClick: () => {
-                d(!0), h(e.label);
+                s(!0), h(l.label);
               },
               className: "hover:bg-neutral-5",
               children: [
-                e.icon && /* @__PURE__ */ l(e.icon, {}),
-                /* @__PURE__ */ l("span", { children: e.label }),
-                /* @__PURE__ */ l(
-                  v,
+                l.icon && /* @__PURE__ */ e(l.icon, {}),
+                /* @__PURE__ */ e("span", { children: l.label }),
+                /* @__PURE__ */ e(
+                  x,
                   {
-                    className: `ml-auto transition-transform duration-200 ${a === e.label ? "rotate-90" : ""}`
+                    className: `ml-auto transition-transform duration-200 ${a === l.label ? "rotate-90" : ""}`
                   }
                 )
               ]
             }
           ) }),
-          /* @__PURE__ */ l(p, { children: /* @__PURE__ */ l(C, { children: e.chidren.map((n) => /* @__PURE__ */ l(m, { children: /* @__PURE__ */ l(N, { asChild: !0, children: /* @__PURE__ */ r(
-            t,
-            {
-              activeProps: {
-                className: "bg-neutral-4 font-bold"
-              },
-              className: "text-neutral-10 no-underline  hover:bg-neutral-5",
-              to: n.path,
-              children: [
-                n.icon && /* @__PURE__ */ l(n.icon, {}),
-                /* @__PURE__ */ l("span", { children: n.label })
-              ]
-            }
-          ) }) }, n.label)) }) })
+          /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(C, { children: l.children.map(
+            (n) => n.display && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ r(
+              c,
+              {
+                activeProps: {
+                  className: "bg-neutral-4 font-bold"
+                },
+                className: "text-neutral-10 no-underline  hover:bg-neutral-5",
+                to: n.path,
+                children: [
+                  n.icon && /* @__PURE__ */ e(n.icon, {}),
+                  /* @__PURE__ */ e("span", { children: n.label })
+                ]
+              }
+            ) }) }, n.label)
+          ) }) })
         ] })
       },
-      e.label
-    ) : /* @__PURE__ */ l(o, { children: /* @__PURE__ */ l(i, { asChild: !0, tooltip: e.label, children: /* @__PURE__ */ r(
-      t,
+      l.label
+    ) : l.display && /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(i, { asChild: !0, tooltip: l.label, children: /* @__PURE__ */ r(
+      c,
       {
         activeProps: {
           className: "bg-neutral-4 font-bold"
           // Add active styling here
         },
         className: "no-underline text-neutral-10 flex items-center hover:bg-neutral-5",
-        to: e.path,
+        to: l.path,
         children: [
-          e.icon && /* @__PURE__ */ l(e.icon, {}),
-          /* @__PURE__ */ l("span", { children: e.label })
+          l.icon && /* @__PURE__ */ e(l.icon, {}),
+          /* @__PURE__ */ e("span", { children: l.label })
         ]
       }
-    ) }) }, e.label)
+    ) }) }, l.label)
   ) }) });
 }
 export {
-  T as NavMain
+  P as NavMain
 };
 //# sourceMappingURL=nav-main.es.js.map

package/dist/components/sidebar/nav-main.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-main.es.js","sources":["../../../lib/components/sidebar/nav-main.tsx"],"sourcesContent":["import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  useSidebar,\n} from '@/components/ui/sidebar';\nimport { Link } from '@tanstack/react-router';\nimport { ChevronRight, type LucideIcon } from 'lucide-react';\nimport { useState } from 'react';\n\nexport type NavItem = {\n  path: string;\n  label: string;\n  display: boolean;\n  icon: LucideIcon;\n  chidren?: { path: string; label: string; icon: LucideIcon; display: boolean }[];\n};\n\nexport function NavMain({ items }: { items: NavItem[] }) {\n  const { setOpen } = useSidebar();\n  const [openItem, setOpenItem] = useState<string | null>(null); // Tracks the currently open item\n\n  const handleToggle = (title: string) => {\n    setOpenItem((prev) => (prev === title ? null : title)); // Toggle the open state\n  };\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) =>\n          item.chidren && item.chidren.length > 0 ? (\n            <Collapsible\n              key={item.label}\n              asChild\n              open={openItem === item.label}\n              className=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuButton\n                    tooltip={item.label}\n                    onClick={() => {\n                      setOpen(true);\n                      handleToggle(item.label);\n                    }}\n                    className=\"hover:bg-neutral-5\"\n                  >\n                    {item.icon && <item.icon />}\n                    <span>{item.label}</span>\n                    <ChevronRight\n                      className={`ml-auto transition-transform duration-200 ${\n                        openItem === item.label ? 'rotate-90' : ''\n                      }`}\n                    />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.chidren.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.label}>\n                        <SidebarMenuSubButton asChild>\n                          <Link\n                            activeProps={{\n                              className: 'bg-neutral-4 font-bold',\n                            }}\n                            className=\"text-neutral-10 no-underline  hover:bg-neutral-5\"\n                            to={subItem.path}\n                          >\n                            {subItem.icon && <subItem.icon />}\n                            <span>{subItem.label}</span>\n                          </Link>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ) : (\n            <SidebarMenuItem key={item.label}>\n              <SidebarMenuButton asChild tooltip={item.label}>\n                <Link\n                  activeProps={{\n                    className: 'bg-neutral-4 font-bold', // Add active styling here\n                  }}\n                  className=\"no-underline text-neutral-10 flex items-center hover:bg-neutral-5\"\n                  to={item.path}\n                >\n                  {item.icon && <item.icon />}\n                  <span>{item.label}</span>\n                </Link>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ),\n        )}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n"],"names":["NavMain","items","setOpen","useSidebar","openItem","setOpenItem","useState","handleToggle","title","prev","jsx","SidebarGroup","SidebarMenu","item","Collapsible","SidebarMenuItem","CollapsibleTrigger","jsxs","SidebarMenuButton","ChevronRight","CollapsibleContent","SidebarMenuSub","subItem","SidebarMenuSubItem","SidebarMenuSubButton","Link"],"mappings":";;;;;;AAuBgB,SAAAA,EAAQ,EAAE,OAAAC,KAA+B;AACjD,QAAA,EAAE,SAAAC,EAAQ,IAAIC,EAAW,GACzB,CAACC,GAAUC,CAAW,IAAIC,EAAwB,IAAI,GAEtDC,IAAe,CAACC,MAAkB;AACtC,IAAAH,EAAY,CAACI,MAAUA,MAASD,IAAQ,OAAOA,CAAM;AAAA,EACvD;AAEA,SACG,gBAAAE,EAAAC,GAAA,EACC,UAAC,gBAAAD,EAAAE,GAAA,EACE,UAAMX,EAAA;AAAA,IAAI,CAACY,MACVA,EAAK,WAAWA,EAAK,QAAQ,SAAS,IACpC,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QAEC,SAAO;AAAA,QACP,MAAMV,MAAaS,EAAK;AAAA,QACxB,WAAU;AAAA,QAEV,4BAACE,GACC,EAAA,UAAA;AAAA,UAAC,gBAAAL,EAAAM,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,SAASL,EAAK;AAAA,cACd,SAAS,MAAM;AACb,gBAAAX,EAAQ,EAAI,GACZK,EAAaM,EAAK,KAAK;AAAA,cACzB;AAAA,cACA,WAAU;AAAA,cAET,UAAA;AAAA,gBAAAA,EAAK,QAAQ,gBAAAH,EAACG,EAAK,MAAL,CAAA,CAAU;AAAA,gBACzB,gBAAAH,EAAC,QAAM,EAAA,UAAAG,EAAK,MAAM,CAAA;AAAA,gBAClB,gBAAAH;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,WAAW,6CACTf,MAAaS,EAAK,QAAQ,cAAc,EAC1C;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,gBAAAH,EAAAU,GAAA,EACC,UAAC,gBAAAV,EAAAW,GAAA,EACE,YAAK,QAAQ,IAAI,CAACC,MAChB,gBAAAZ,EAAAa,GAAA,EACC,UAAC,gBAAAb,EAAAc,GAAA,EAAqB,SAAO,IAC3B,UAAA,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,aAAa;AAAA,gBACX,WAAW;AAAA,cACb;AAAA,cACA,WAAU;AAAA,cACV,IAAIH,EAAQ;AAAA,cAEX,UAAA;AAAA,gBAAAA,EAAQ,QAAQ,gBAAAZ,EAACY,EAAQ,MAAR,CAAA,CAAa;AAAA,gBAC/B,gBAAAZ,EAAC,QAAM,EAAA,UAAAY,EAAQ,MAAM,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,aAEzB,EAZuB,GAAAA,EAAQ,KAajC,CACD,EACH,CAAA,EACF,CAAA;AAAA,QAAA,EACF,CAAA;AAAA,MAAA;AAAA,MA5CKT,EAAK;AAAA,IA6CZ,sBAECE,GACC,EAAA,UAAA,gBAAAL,EAACQ,KAAkB,SAAO,IAAC,SAASL,EAAK,OACvC,UAAA,gBAAAI;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,UACX,WAAW;AAAA;AAAA,QACb;AAAA,QACA,WAAU;AAAA,QACV,IAAIZ,EAAK;AAAA,QAER,UAAA;AAAA,UAAAA,EAAK,QAAQ,gBAAAH,EAACG,EAAK,MAAL,CAAA,CAAU;AAAA,UACzB,gBAAAH,EAAC,QAAM,EAAA,UAAAG,EAAK,MAAM,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEtB,EAZoB,GAAAA,EAAK,KAa3B;AAAA,KAGN,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"nav-main.es.js","sources":["../../../lib/components/sidebar/nav-main.tsx"],"sourcesContent":["import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  useSidebar,\n} from '@/components/ui/sidebar';\nimport { Link } from '@tanstack/react-router';\nimport { ChevronRight, type LucideIcon } from 'lucide-react';\nimport { useState } from 'react';\n\nexport type NavItem = {\n  path: string;\n  label: string;\n  display: boolean;\n  icon: LucideIcon;\n  children?: { path: string; label: string; icon: LucideIcon; display: boolean }[];\n};\n\nexport function NavMain({ items }: { items: NavItem[] }) {\n  const { setOpen } = useSidebar();\n  const [openItem, setOpenItem] = useState<string | null>(null); // Tracks the currently open item\n\n  const handleToggle = (title: string) => {\n    setOpenItem((prev) => (prev === title ? null : title)); // Toggle the open state\n  };\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu className=\"flex gap-2 \">\n        {items.map((item) =>\n          item.children && item.display && item.children.length > 0 ? (\n            <Collapsible\n              key={item.label}\n              asChild\n              open={openItem === item.label}\n              className=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuButton\n                    tooltip={item.label}\n                    onClick={() => {\n                      setOpen(true);\n                      handleToggle(item.label);\n                    }}\n                    className=\"hover:bg-neutral-5\"\n                  >\n                    {item.icon && <item.icon />}\n                    <span>{item.label}</span>\n                    <ChevronRight\n                      className={`ml-auto transition-transform duration-200 ${\n                        openItem === item.label ? 'rotate-90' : ''\n                      }`}\n                    />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.children.map(\n                      (subItem) =>\n                        subItem.display && (\n                          <SidebarMenuSubItem key={subItem.label}>\n                            <SidebarMenuSubButton asChild>\n                              <Link\n                                activeProps={{\n                                  className: 'bg-neutral-4 font-bold',\n                                }}\n                                className=\"text-neutral-10 no-underline  hover:bg-neutral-5\"\n                                to={subItem.path}\n                              >\n                                {subItem.icon && <subItem.icon />}\n                                <span>{subItem.label}</span>\n                              </Link>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ),\n                    )}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ) : (\n            item.display && (\n              <SidebarMenuItem key={item.label}>\n                <SidebarMenuButton asChild tooltip={item.label}>\n                  <Link\n                    activeProps={{\n                      className: 'bg-neutral-4 font-bold', // Add active styling here\n                    }}\n                    className=\"no-underline text-neutral-10 flex items-center hover:bg-neutral-5\"\n                    to={item.path}\n                  >\n                    {item.icon && <item.icon />}\n                    <span>{item.label}</span>\n                  </Link>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            )\n          ),\n        )}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n"],"names":["NavMain","items","setOpen","useSidebar","openItem","setOpenItem","useState","handleToggle","title","prev","SidebarGroup","jsx","SidebarMenu","item","Collapsible","SidebarMenuItem","CollapsibleTrigger","jsxs","SidebarMenuButton","ChevronRight","CollapsibleContent","SidebarMenuSub","subItem","SidebarMenuSubItem","SidebarMenuSubButton","Link"],"mappings":";;;;;;AAuBgB,SAAAA,EAAQ,EAAE,OAAAC,KAA+B;AACjD,QAAA,EAAE,SAAAC,EAAQ,IAAIC,EAAW,GACzB,CAACC,GAAUC,CAAW,IAAIC,EAAwB,IAAI,GAEtDC,IAAe,CAACC,MAAkB;AACtC,IAAAH,EAAY,CAACI,MAAUA,MAASD,IAAQ,OAAOA,CAAM;AAAA,EACvD;AAEA,2BACGE,GACC,EAAA,UAAA,gBAAAC,EAACC,GAAY,EAAA,WAAU,eACpB,UAAMX,EAAA;AAAA,IAAI,CAACY,MACVA,EAAK,YAAYA,EAAK,WAAWA,EAAK,SAAS,SAAS,IACtD,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QAEC,SAAO;AAAA,QACP,MAAMV,MAAaS,EAAK;AAAA,QACxB,WAAU;AAAA,QAEV,4BAACE,GACC,EAAA,UAAA;AAAA,UAAC,gBAAAJ,EAAAK,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,SAASL,EAAK;AAAA,cACd,SAAS,MAAM;AACb,gBAAAX,EAAQ,EAAI,GACZK,EAAaM,EAAK,KAAK;AAAA,cACzB;AAAA,cACA,WAAU;AAAA,cAET,UAAA;AAAA,gBAAAA,EAAK,QAAQ,gBAAAF,EAACE,EAAK,MAAL,CAAA,CAAU;AAAA,gBACzB,gBAAAF,EAAC,QAAM,EAAA,UAAAE,EAAK,MAAM,CAAA;AAAA,gBAClB,gBAAAF;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,WAAW,6CACTf,MAAaS,EAAK,QAAQ,cAAc,EAC1C;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,gBAAAF,EAAAS,GAAA,EACC,UAAC,gBAAAT,EAAAU,GAAA,EACE,YAAK,SAAS;AAAA,YACb,CAACC,MACCA,EAAQ,6BACLC,GACC,EAAA,UAAA,gBAAAZ,EAACa,GAAqB,EAAA,SAAO,IAC3B,UAAA,gBAAAP;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACC,aAAa;AAAA,kBACX,WAAW;AAAA,gBACb;AAAA,gBACA,WAAU;AAAA,gBACV,IAAIH,EAAQ;AAAA,gBAEX,UAAA;AAAA,kBAAAA,EAAQ,QAAQ,gBAAAX,EAACW,EAAQ,MAAR,CAAA,CAAa;AAAA,kBAC/B,gBAAAX,EAAC,QAAM,EAAA,UAAAW,EAAQ,MAAM,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEzB,EAZuB,GAAAA,EAAQ,KAajC;AAAA,aAGR,EACF,CAAA;AAAA,QAAA,EACF,CAAA;AAAA,MAAA;AAAA,MA/CKT,EAAK;AAAA,IAAA,IAkDZA,EAAK,WACF,gBAAAF,EAAAI,GAAA,EACC,UAAC,gBAAAJ,EAAAO,GAAA,EAAkB,SAAO,IAAC,SAASL,EAAK,OACvC,UAAA,gBAAAI;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,UACX,WAAW;AAAA;AAAA,QACb;AAAA,QACA,WAAU;AAAA,QACV,IAAIZ,EAAK;AAAA,QAER,UAAA;AAAA,UAAAA,EAAK,QAAQ,gBAAAF,EAACE,EAAK,MAAL,CAAA,CAAU;AAAA,UACzB,gBAAAF,EAAC,QAAM,EAAA,UAAAE,EAAK,MAAM,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEtB,EAZoB,GAAAA,EAAK,KAa3B;AAAA,KAIR,EACF,CAAA;AAEJ;"}

package/dist/components/static-data-table/data-table.es.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { Table as s, TableHeader as x, TableRow as p, TableCell as a, TableBody as f } from "../ui/table.es.js";
-import { Badge as g } from "lucide-react";
+import { Badge as s } from "../ui/badge.es.js";
+import { Table as x, TableHeader as f, TableRow as p, TableCell as a, TableBody as g } from "../ui/table.es.js";
 import { getResourceDisplayName as u, getValueFromData as v } from "../data-table/table-utils/constants.es.js";
 function b({ accessors: d, data: m, affectedData: t }) {
-  return /* @__PURE__ */ e("div", { className: "relative overflow-hidden border max-h-[50vh]", children: /* @__PURE__ */ e("div", { className: "overflow-y-auto max-h-[50vh]", children: /* @__PURE__ */ n(s, { children: [
-    /* @__PURE__ */ e(x, { className: "text-left align-middle uppercase sticky top-0 z-10 bg-card", children: /* @__PURE__ */ n(p, { children: [
+  return /* @__PURE__ */ e("div", { className: "relative overflow-hidden border max-h-[50vh]", children: /* @__PURE__ */ e("div", { className: "overflow-y-auto max-h-[50vh]", children: /* @__PURE__ */ n(x, { children: [
+    /* @__PURE__ */ e(f, { className: "text-left align-middle uppercase sticky top-0 z-10 bg-card", children: /* @__PURE__ */ n(p, { children: [
       d.map((r) => /* @__PURE__ */ e(
         a,
         {
@@ -15,10 +15,10 @@ function b({ accessors: d, data: m, affectedData: t }) {
       )),
       t && /* @__PURE__ */ e(a, { className: "px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card", children: "Affected" })
     ] }) }),
-    /* @__PURE__ */ e(f, { children: m.map((r, o) => /* @__PURE__ */ n(p, { children: [
+    /* @__PURE__ */ e(g, { children: m.map((r, o) => /* @__PURE__ */ n(p, { children: [
       d.map((l) => {
         const c = r[l];
-        return Array.isArray(c) ? /* @__PURE__ */ e(a, { className: "flex gap-4", children: c.map((i, h) => /* @__PURE__ */ e(g, { children: (i == null ? void 0 : i.name) || i }, h)) }, String(l)) : /* @__PURE__ */ e(a, { children: v(r, l) }, String(l));
+        return Array.isArray(c) ? /* @__PURE__ */ e(a, { className: "flex gap-4", children: c.map((i, h) => /* @__PURE__ */ e(s, { children: (i == null ? void 0 : i.name) || i }, h)) }, String(l)) : /* @__PURE__ */ e(a, { children: v(r, l) }, String(l));
       }),
       t && /* @__PURE__ */ e(a, { children: t.includes(r) ? /* @__PURE__ */ e("span", { className: "text-success-10", children: "✔" }) : /* @__PURE__ */ e("span", { className: "text-destructive", children: "✖" }) })
     ] }, o)) })

package/dist/components/static-data-table/data-table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/static-data-table/data-table.tsx"],"sourcesContent":["import { getResourceDisplayName, getValueFromData } from '@/components/data-table';\nimport { Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table';\nimport { Badge } from 'lucide-react';\n\nexport interface StaticDataTableProps<T> {\n  accessors: (keyof T)[];\n  data: T[];\n  affectedData?: T[];\n}\n\nexport function StaticDataTable<T>({ accessors, data, affectedData }: StaticDataTableProps<T>) {\n  return (\n    <div className=\"relative overflow-hidden border max-h-[50vh]\">\n      <div className=\"overflow-y-auto max-h-[50vh]\">\n        <Table>\n          <TableHeader className=\"text-left align-middle uppercase sticky top-0 z-10 bg-card\">\n            <TableRow>\n              {accessors.map((accessor) => (\n                <TableCell\n                  key={String(accessor)}\n                  className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\"\n                >\n                  {getResourceDisplayName(String(accessor), 'admin-portal')}\n                </TableCell>\n              ))}\n              {affectedData && (\n                <TableCell className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\">\n                  Affected\n                </TableCell>\n              )}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {data.map((item, index) => (\n              <TableRow key={index}>\n                {accessors.map((accessor) => {\n                  const value = item[accessor];\n                  // Handle arrays (e.g., userGroups) with badges\n                  if (Array.isArray(value)) {\n                    return (\n                      <TableCell key={String(accessor)} className=\"flex gap-4\">\n                        {value.map((subItem, subIndex) => (\n                          <Badge key={subIndex}>{subItem?.name || subItem}</Badge>\n                        ))}\n                      </TableCell>\n                    );\n                  }\n                  // Handle other data types\n                  return (\n                    <TableCell key={String(accessor)}>{getValueFromData(item, accessor)}</TableCell>\n                  );\n                })}\n                {affectedData && (\n                  <TableCell>\n                    {affectedData.includes(item) ? (\n                      <span className=\"text-success-10\">✔</span>\n                    ) : (\n                      <span className=\"text-destructive\">✖</span>\n                    )}\n                  </TableCell>\n                )}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n"],"names":["StaticDataTable","accessors","data","affectedData","jsx","jsxs","Table","TableHeader","TableRow","accessor","TableCell","getResourceDisplayName","TableBody","item","index","value","subItem","subIndex","Badge","getValueFromData"],"mappings":";;;;AAUO,SAASA,EAAmB,EAAE,WAAAC,GAAW,MAAAC,GAAM,cAAAC,KAAyC;AAE3F,SAAA,gBAAAC,EAAC,SAAI,WAAU,gDACb,4BAAC,OAAI,EAAA,WAAU,gCACb,UAAA,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAY,EAAA,WAAU,8DACrB,UAAA,gBAAAF,EAACG,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MACd,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAuBC,EAAA,OAAOF,CAAQ,GAAG,cAAc;AAAA,QAAA;AAAA,QAHnD,OAAOA,CAAQ;AAAA,MAAA,CAKvB;AAAA,MACAN,KACC,gBAAAC,EAACM,GAAU,EAAA,WAAU,oFAAmF,UAExG,WAAA,CAAA;AAAA,IAAA,EAAA,CAEJ,EACF,CAAA;AAAA,IACA,gBAAAN,EAACQ,KACE,UAAKV,EAAA,IAAI,CAACW,GAAMC,wBACdN,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MAAa;AACrB,cAAAM,IAAQF,EAAKJ,CAAQ;AAEvB,eAAA,MAAM,QAAQM,CAAK,sBAElBL,GAAiC,EAAA,WAAU,cACzC,UAAMK,EAAA,IAAI,CAACC,GAASC,wBAClBC,GAAsB,EAAA,WAAAF,KAAA,gBAAAA,EAAS,SAAQA,EAA5B,GAAAC,CAAoC,CACjD,EAHa,GAAA,OAAOR,CAAQ,CAI/B,IAKF,gBAAAL,EAACM,KAAkC,UAAiBS,EAAAN,GAAMJ,CAAQ,EAAlD,GAAA,OAAOA,CAAQ,CAAqC;AAAA,MAAA,CAEvE;AAAA,MACAN,KACE,gBAAAC,EAAAM,GAAA,EACE,YAAa,SAASG,CAAI,IACxB,gBAAAT,EAAA,QAAA,EAAK,WAAU,mBAAkB,eAAC,IAEnC,gBAAAA,EAAC,UAAK,WAAU,oBAAmB,cAAC,CAAA,EAExC,CAAA;AAAA,IAAA,EAzBW,GAAAU,CA2Bf,CACD,EACH,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;"}
+{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/static-data-table/data-table.tsx"],"sourcesContent":["import { getResourceDisplayName, getValueFromData } from '@/components/data-table';\nimport { Badge } from '@/components/ui/badge';\nimport { Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table';\n\n\nexport interface StaticDataTableProps<T> {\n  accessors: (keyof T)[];\n  data: T[];\n  affectedData?: T[];\n}\n\nexport function StaticDataTable<T>({ accessors, data, affectedData }: StaticDataTableProps<T>) {\n  return (\n    <div className=\"relative overflow-hidden border max-h-[50vh]\">\n      <div className=\"overflow-y-auto max-h-[50vh]\">\n        <Table>\n          <TableHeader className=\"text-left align-middle uppercase sticky top-0 z-10 bg-card\">\n            <TableRow>\n              {accessors.map((accessor) => (\n                <TableCell\n                  key={String(accessor)}\n                  className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\"\n                >\n                  {getResourceDisplayName(String(accessor), 'admin-portal')}\n                </TableCell>\n              ))}\n              {affectedData && (\n                <TableCell className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\">\n                  Affected\n                </TableCell>\n              )}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {data.map((item, index) => (\n              <TableRow key={index}>\n                {accessors.map((accessor) => {\n                  const value = item[accessor];\n                  // Handle arrays (e.g., userGroups) with badges\n                  if (Array.isArray(value)) {\n                    return (\n                      <TableCell key={String(accessor)} className=\"flex gap-4\">\n                        {value.map((subItem, subIndex) => (\n                          <Badge key={subIndex}>{subItem?.name || subItem}</Badge>\n                        ))}\n                      </TableCell>\n                    );\n                  }\n                  // Handle other data types\n                  return (\n                    <TableCell key={String(accessor)}>{getValueFromData(item, accessor)}</TableCell>\n                  );\n                })}\n                {affectedData && (\n                  <TableCell>\n                    {affectedData.includes(item) ? (\n                      <span className=\"text-success-10\">✔</span>\n                    ) : (\n                      <span className=\"text-destructive\">✖</span>\n                    )}\n                  </TableCell>\n                )}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n"],"names":["StaticDataTable","accessors","data","affectedData","jsx","jsxs","Table","TableHeader","TableRow","accessor","TableCell","getResourceDisplayName","TableBody","item","index","value","subItem","subIndex","Badge","getValueFromData"],"mappings":";;;;AAWO,SAASA,EAAmB,EAAE,WAAAC,GAAW,MAAAC,GAAM,cAAAC,KAAyC;AAE3F,SAAA,gBAAAC,EAAC,SAAI,WAAU,gDACb,4BAAC,OAAI,EAAA,WAAU,gCACb,UAAA,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAY,EAAA,WAAU,8DACrB,UAAA,gBAAAF,EAACG,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MACd,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAuBC,EAAA,OAAOF,CAAQ,GAAG,cAAc;AAAA,QAAA;AAAA,QAHnD,OAAOA,CAAQ;AAAA,MAAA,CAKvB;AAAA,MACAN,KACC,gBAAAC,EAACM,GAAU,EAAA,WAAU,oFAAmF,UAExG,WAAA,CAAA;AAAA,IAAA,EAAA,CAEJ,EACF,CAAA;AAAA,IACA,gBAAAN,EAACQ,KACE,UAAKV,EAAA,IAAI,CAACW,GAAMC,wBACdN,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MAAa;AACrB,cAAAM,IAAQF,EAAKJ,CAAQ;AAEvB,eAAA,MAAM,QAAQM,CAAK,sBAElBL,GAAiC,EAAA,WAAU,cACzC,UAAMK,EAAA,IAAI,CAACC,GAASC,wBAClBC,GAAsB,EAAA,WAAAF,KAAA,gBAAAA,EAAS,SAAQA,EAA5B,GAAAC,CAAoC,CACjD,EAHa,GAAA,OAAOR,CAAQ,CAI/B,IAKF,gBAAAL,EAACM,KAAkC,UAAiBS,EAAAN,GAAMJ,CAAQ,EAAlD,GAAA,OAAOA,CAAQ,CAAqC;AAAA,MAAA,CAEvE;AAAA,MACAN,KACE,gBAAAC,EAAAM,GAAA,EACE,YAAa,SAASG,CAAI,IACxB,gBAAAT,EAAA,QAAA,EAAK,WAAU,mBAAkB,eAAC,IAEnC,gBAAAA,EAAC,UAAK,WAAU,oBAAmB,cAAC,CAAA,EAExC,CAAA;AAAA,IAAA,EAzBW,GAAAU,CA2Bf,CACD,EACH,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;"}