@solidxai/core-ui 0.1.13-beta.4 → 0.1.13-beta.5

package/dist/components/core/tree/SolidTreeView.tsx

@@ -27,19 +27,24 @@ import CompactImage from '../../../resources/images/layout/images/compact.png';
 import CozyImage from '../../../resources/images/layout/images/cozy.png';
 import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
-import { getFilterObjectFromLocalStorage, hasStoredFilterPredicates, setFilterObjectToLocalStorage } from "../common/globalSearchPersistence";
+import { getFilterObjectFromLocalStorage, hasStoredFilterPredicates, hasStoredSearchUiState, setFilterObjectToLocalStorage } from "../common/globalSearchPersistence";
 import { SolidBeforeTreeNodeLoad } from "../../../types";
 import { getExtensionFunction } from "../../../helpers/registry";
 import { SolidTreeLoad, SolidTreeUiEventResponse } from "../../../types/solid-core";
+import { getMediaTypeFromUrl } from "../../../helpers/mediaType";
 import { useRouter } from "../../../hooks/useRouter";
 import { normalizeSolidListTreeKanbanActionPath } from "../../../helpers/routePaths";
 import { usePathname } from "../../../hooks/usePathname";
 import { useHandleListCustomButtonClick } from "../../../components/common/useHandleListCustomButtonClick";
-import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuSeparator, SolidDropdownMenuTrigger, SolidIcon, SolidSelect } from "../../shad-cn-ui";
+import { isButtonVisibleInCurrentEnv } from "../../../helpers/buttonEnvironment";
+import { SolidButton, SolidConfirmDialog, SolidDialog, SolidDialogBody, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuSeparator, SolidDropdownMenuTrigger, SolidIcon, SolidSelect } from "../../shad-cn-ui";
 import { SolidHeaderRequestStatus } from "../../common/SolidHeaderRequestStatus";
+import { SolidLightbox } from "../../shad-cn-ui/SolidLightbox";
+import type { SolidLightboxSlide } from "../../shad-cn-ui/SolidLightbox";
 import { storeCurrentModelViewContext } from "../../../helpers/modelViewPersistence";
 import { getRelationDisplayText } from "../../../helpers/relationDisplay";
 import { Column as SolidTreeColumn, SolidTreeNode as TreeNode, SolidTreeSelectionKeys, SolidTreeTable } from "./SolidTreeTable";
+import { SolidListViewHeaderButton } from "../list/SolidListViewHeaderButton";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -160,6 +165,8 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
   const [isDeleteRecordsDialogVisible, setDeleteRecordsDialogVisible] = useState(false);
   const [isRecoverDialogVisible, setRecoverDialogVisible] = useState(false);
   const [showArchived, setShowArchived] = useState(false);
+  const [openLightbox, setOpenLightbox] = useState(false);
+  const [lightboxUrls, setLightboxUrls] = useState<any[]>([]);
 
 
   const [createButtonUrl, setCreateButtonUrl] = useState<string>();
@@ -178,6 +185,25 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
   const [size, setSize] = useState<string | any>(sizeOptions[1].value);
   const [viewModes, setViewModes] = useState<any>([]);
+  const lightboxSlides: SolidLightboxSlide[] = Array.isArray(lightboxUrls)
+    ? lightboxUrls
+      .map((item: any) => {
+        const src = item?.src || item?.downloadUrl || "";
+        if (!src) {
+          return null;
+        }
+
+        const mediaType = getMediaTypeFromUrl(src);
+        const slide: SolidLightboxSlide = { src };
+
+        if (mediaType !== "image") {
+          slide.type = mediaType;
+        }
+
+        return slide;
+      })
+      .filter((slide): slide is SolidLightboxSlide => !!slide)
+    : [];
 
   const headerRequestStatusLabel = treeLoading ? "Loading..." : null;
 
@@ -604,6 +630,18 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     groupPath
       .map((item) => buildImplicitFilterCondition(item));
 
+  const getGroupNodeKey = (groupPath: GroupPathItem[] = []) =>
+    groupPath.reduce(
+      (parentKey, item) => `${parentKey}-g-${encodeURIComponent(JSON.stringify({
+        ruleIndex: item.ruleIndex,
+        fieldName: item.fieldName,
+        filterField: item.filterField,
+        value: item.value,
+        dateGranularity: item.dateGranularity ?? null,
+      }))}`,
+      "root",
+    );
+
   const mergeFiltersWithImplicit = (implicitFilters: any[]) => {
     const baseFilters = latestFiltersRef.current;
     const hasBaseFilters = baseFilters && Object.keys(baseFilters).length > 0;
@@ -759,7 +797,8 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
     const queryString = qs.stringify(queryData, { encodeValuesOnly: true });
 
-    const response = await triggerGetSolidEntities(queryString).unwrap();
+    const request = triggerGetSolidEntities(queryString);
+    const response = await request.unwrap().finally(() => request.unsubscribe());
     return { queryData, queryString, response };
   };
 
@@ -825,7 +864,8 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
 
 
-    const response = await triggerGetSolidEntities(queryString).unwrap();
+    const request = triggerGetSolidEntities(queryString);
+    const response = await request.unwrap().finally(() => request.unsubscribe());
     return { queryData, queryString, response };
   };
 
@@ -835,7 +875,6 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     groupMetaRows: any[],
     ruleIndex: number,
     parentPath: GroupPathItem[],
-    parentKey: string
   ): TreeNode[] => {
     const rule = activeGroupingRules[ruleIndex];
     if (!rule?.fieldName) return [];
@@ -844,7 +883,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     const filterField = getResolvedGroupField(fieldName);
     // const dateGranularity = dateTimeImplicitFilter(rule);
     const dateGranularity = getDateGranularity(rule);
-    return (groupMetaRows || []).map((groupMeta, index) => {
+    return (groupMetaRows || []).map((groupMeta) => {
       const rawGroupLabel = groupMeta?.groupName;
       const normalizedGroupLabel =
         rawGroupLabel === "[object Object]"
@@ -860,7 +899,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       ];
 
       return {
-        key: `${parentKey}-g-${ruleIndex}-${index}`,
+        key: getGroupNodeKey(groupPath),
         data: {
           __treeMeta: {
             nodeType: "group",
@@ -915,12 +954,60 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     });
   };
 
+  const fetchNodeChildren = async (node: TreeNode,offset: number,limit: number,): Promise<{ children: TreeNode[]; total: number }> => {
+    const meta = (node.data as TreeRowData)?.__treeMeta;
+    if (!meta || meta.nodeType !== "group") {
+      return { children: [], total: 0 };
+    }
+
+    const nodeKey = String(node.key);
+    const nextRuleIndex = meta.ruleIndex + 1;
+
+    if (nextRuleIndex < activeGroupingRules.length) {
+      const { response } = await runGroupedQuery(
+        nextRuleIndex,
+        meta.groupPath || [],
+        offset,
+        limit
+      );
+
+      return {
+        children: buildGroupNodes(
+          response?.groupMeta || [],
+          nextRuleIndex,
+          meta.groupPath || [],
+        ),
+        total: response?.meta.totalRecords ?? 0,
+      };
+    }
+
+    const { response } = await runLeafQuery(meta.groupPath || [], offset, limit);
+    return {
+      children: buildRecordNodes(response?.records || [], nodeKey, meta.groupPath || []),
+      total: response?.meta.totalRecords ?? 0,
+    };
+  };
+
+  const mergeNodesWithCurrentState = (freshNodes: TreeNode[], currentNodes: TreeNode[]) => {
+    const currentNodesByKey = new Map(
+      currentNodes.map((node) => [String(node.key), node]),
+    );
+
+    return freshNodes.map((node) => {
+      const currentNode = currentNodesByKey.get(String(node.key));
+      return currentNode?.children?.length
+        ? { ...node, children: currentNode.children }
+        : node;
+    });
+  };
+
   // ─── Root group load / paginate ───────────────────────────────────────────
 
-  const loadRootGroups = async (offset = 0) => {
+  const loadRootGroups = async (offset = 0, affectedGroupPaths: GroupPathItem[][] = []) => {
     if (!solidTreeViewMetaData || activeGroupingRules.length === 0) {
       setTreeNodes([]);
       setExpandedKeys({});
+      setPaginationMap({});
 
       const queryObject = getFilterObjectFromLocalStorage();
       if (queryObject) {
@@ -936,13 +1023,46 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     setTreeLoading(true);
     try {
       const { response } = await runGroupedQuery(0, [], offset, limit);
-      const rootNodes = buildGroupNodes(response?.groupMeta || [], 0, [], "root");
-      setTreeNodes(rootNodes);
-      setExpandedKeys({});
-      setSelectedNodeKeys({});
-      // Collapse expanded keys since data changed
+      const rootNodes = buildGroupNodes(response?.groupMeta || [], 0, []);
       const total = response?.meta.totalRecords ?? 0;
-      setPagination("root", { offset, total: total, limit });
+      const rootPaginationEntry: PaginationEntry = { offset, total, limit };
+
+      let nextTreeNodes = affectedGroupPaths.length > 0
+        ? mergeNodesWithCurrentState(rootNodes, treeNodes)
+        : rootNodes;
+      const nextPaginationMap: Record<string, PaginationEntry> = affectedGroupPaths.length > 0
+        ? { ...paginationMap, root: rootPaginationEntry }
+        : { root: rootPaginationEntry };
+      const refreshedNodeKeys = new Set<string>();
+
+      for (const groupPath of affectedGroupPaths) {
+        for (let depth = 0; depth < groupPath.length; depth += 1) {
+          const nodeKey = getGroupNodeKey(groupPath.slice(0, depth + 1));
+          if (refreshedNodeKeys.has(nodeKey)) continue;
+
+          const node = findNodeByKey(nextTreeNodes, nodeKey);
+          if (!node) break;
+
+          const pagination = getPagination(nodeKey);
+          const { children, total: childTotal } = await fetchNodeChildren(
+            node,
+            pagination.offset,
+            pagination.limit,
+          );
+          const nextChildren = depth < groupPath.length - 1
+            ? mergeNodesWithCurrentState(children, node.children || [])
+            : children;
+
+          nextTreeNodes = updateNodeChildren(nextTreeNodes, nodeKey, nextChildren);
+          nextPaginationMap[nodeKey] = { ...pagination, total: childTotal };
+          refreshedNodeKeys.add(nodeKey);
+        }
+      }
+
+      setTreeNodes(nextTreeNodes);
+      setSelectedNodeKeys({});
+      setPaginationMap(nextPaginationMap);
+      if (affectedGroupPaths.length === 0) setExpandedKeys({});
 
       if (latestFilterPredicatesRef.current && latestFilterPredicatesRef.current.persistFilter) {
         let queryData: any = {
@@ -966,7 +1086,6 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       }
 
     } catch (error: any) {
-      setTreeNodes([]);
       dispatch(showToast({ severity: "error", summary: "Failed to load tree", detail: error?.data?.message || error?.message || "Unable to load grouped data", life: 4000 }));
     } finally {
       setTreeLoading(false);
@@ -990,33 +1109,10 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
     const nodeKey = String(node.key);
     const limit = getPagination(nodeKey).limit || globalLimit || DEFAULT_PAGE_SIZE;
-    const nextRuleIndex = meta.ruleIndex + 1;
 
     setTreeLoading(true);
     try {
-      let children: TreeNode[] = [];
-      let total = 0;
-
-      if (nextRuleIndex < activeGroupingRules.length) {
-
-        const { response } = await runGroupedQuery(
-          nextRuleIndex,
-          meta.groupPath || [],
-          offset,
-          limit
-        );
-        children = buildGroupNodes(
-          response?.groupMeta || [],
-          nextRuleIndex,
-          meta.groupPath || [],
-          nodeKey
-        );
-        total = response?.meta.totalRecords ?? 0;
-      } else {
-        const { response } = await runLeafQuery(meta.groupPath || [], offset, limit);
-        children = buildRecordNodes(response?.records || [], nodeKey, meta.groupPath || []);
-        total = response?.meta.totalRecords ?? 0;
-      }
+      const { children, total } = await fetchNodeChildren(node, offset, limit);
 
       setTreeNodes((prev) => updateNodeChildren(prev, nodeKey, children));
       setPagination(node.key as string, { offset, total: total, limit });
@@ -1213,6 +1309,9 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
   // handle bulk deletion
   const deleteBulk = async () => {
     const deleteList = selectedRecords.map((element: any) => element.id);
+    const affectedGroupPaths = selectedRecords
+      .map((record: TreeRowData) => record?.__treeMeta?.groupPath)
+      .filter((groupPath): groupPath is GroupPathItem[] => Array.isArray(groupPath));
     if (deleteList.length === 0) {
       setDeleteRecordsDialogVisible(false);
       return;
@@ -1222,7 +1321,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       await deleteManySolidEntities(deleteList).unwrap();
       dispatch(showToast({ severity: 'success', summary: 'Deleted', detail: ERROR_MESSAGES.RECORD_DELETE, life: 3000 }));
       setDeleteRecordsDialogVisible(false);
-      await loadRootGroups(getPagination("root").offset);
+      await loadRootGroups(getPagination("root").offset, affectedGroupPaths);
     } catch (error: any) {
       dispatch(showToast({ severity: 'error', summary: 'Delete Failed', detail: error?.data?.message, life: 4000 }));
     }
@@ -1238,6 +1337,9 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
   const recoverAll = async () => {
     const recoverList = selectedRecoverRecords.map((element: any) => element.id);
+    const affectedGroupPaths = selectedRecoverRecords
+      .map((record: TreeRowData) => record?.__treeMeta?.groupPath)
+      .filter((groupPath): groupPath is GroupPathItem[] => Array.isArray(groupPath));
     if (recoverList.length === 0) {
       setRecoverDialogVisible(false);
       return;
@@ -1252,7 +1354,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
         detail: response?.data?.message || "Records recovered successfully.",
         life: 3000,
       }));
-      await loadRootGroups(getPagination("root").offset);
+      await loadRootGroups(getPagination("root").offset, affectedGroupPaths);
     } catch (error: any) {
       dispatch(showToast({
         severity: "error",
@@ -1292,8 +1394,8 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
         solidListViewMetaData: solidTreeViewMetaData,
         fieldMetadata,
         column,
-        setLightboxUrls: () => { },
-        setOpenLightbox: () => { },
+        setLightboxUrls,
+        setOpenLightbox,
       });
 
       if (!React.isValidElement(listColumn)) return null;
@@ -1490,9 +1592,19 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
 
   const handleCustomButtonClick = useHandleListCustomButtonClick();
+  const shouldShowMobileSearchElement = showGlobalSearchElement || hasStoredSearchUiState(filterPredicates) || hasStoredSearchUiState(getFilterObjectFromLocalStorage());
+
+  const visibleHeaderButtons = useMemo(
+    () =>
+      (solidTreeViewLayout?.attrs?.headerButtons ?? []).filter(
+        (button: any) => isButtonVisibleInCurrentEnv(button?.attrs),
+      ),
+    [solidTreeViewLayout?.attrs?.headerButtons],
+  );
 
   const [selectedSolidViewData, setSelectedSolidViewData] = useState<any>();
   const [deleteEntity, setDeleteEntity] = useState(false);
+  const entityDisplayName =  solidTreeViewMetaData?.data?.solidView?.model?.displayName || params?.modelName;
   const openRowForEdit = (rowData: any, viewMode: "edit" | "view") => {
     storeCurrentModelViewContext();
 
@@ -1537,13 +1649,16 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
         throw new Error(ERROR_MESSAGES.NO_ENTITY_SELECTED);
       }
 
+      const affectedGroupPath = selectedSolidViewData?.__treeMeta?.groupPath;
       const response: any = await deleteSolidSingleEntiry(selectedSolidViewData.id);
-
       if (response?.data?.statusCode === 200) {
         setDeleteEntity(false);
         setSelectedSolidViewData(undefined);
         dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.DELETED, detail: ERROR_MESSAGES.ENTITY_DELETE, life: 3000 }));
-        await loadRootGroups(getPagination("root").offset);
+        await loadRootGroups(
+          getPagination("root").offset,
+          Array.isArray(affectedGroupPath) ? [affectedGroupPath] : [],
+        );
       } else {
         dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.DELETE_FAIELD, detail: response?.error?.data?.error, sticky: true }));
       }
@@ -1563,7 +1678,10 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
         detail: response?.data?.message || "Record recovered successfully.",
         life: 3000,
       }));
-      await loadRootGroups(getPagination("root").offset);
+      await loadRootGroups(
+        getPagination("root").offset,
+        Array.isArray(record?.__treeMeta?.groupPath) ? [record.__treeMeta.groupPath] : [],
+      );
     } catch (error: any) {
       dispatch(showToast({
         severity: "error",
@@ -1768,6 +1886,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
                       ref={solidGlobalSearchElementRef}
                       viewData={solidTreeViewMetaData}
                       handleApplyCustomFilter={handleApplyCustomFilter}
+                      filterPredicates={filterPredicates}
                     />
                   </div>
                 )}
@@ -1789,6 +1908,22 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
                   </div>
                 )}
 
+                <div className="solid-header-buttons-wrapper hidden items-center lg:flex">
+                  {visibleHeaderButtons
+                    ?.filter((button: any) => button?.attrs?.actionInContextMenu !== true)
+                    ?.map((button: any, index: number) => (
+                      <SolidListViewHeaderButton
+                        key={index}
+                        button={button}
+                        params={params}
+                        solidListViewMetaData={solidTreeViewMetaData}
+                        handleCustomButtonClick={handleCustomButtonClick}
+                        selectedRecords={selectedRecords}
+                        filters={filters}
+                      />
+                    ))}
+                </div>
+
                 {actionsAllowed.includes(`${permissionExpression(params.modelName, "create")}`) &&
                   solidTreeViewMetaData?.data?.solidView?.layout?.attrs.create !== false && (
                     <SolidCreateButton
@@ -1858,7 +1993,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
             </div>
 
             {solidTreeViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
-              showGlobalSearchElement && (
+              shouldShowMobileSearchElement && (
                 <div className="flex lg:hidden">
                   <SolidGlobalSearchElement
                     viewType="tree"
@@ -1867,6 +2002,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
                     ref={solidGlobalSearchElementRef}
                     viewData={solidTreeViewMetaData}
                     handleApplyCustomFilter={handleApplyCustomFilter}
+                    filterPredicates={filterPredicates}
                   />
                 </div>
               )}
@@ -2050,53 +2186,37 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
         </div>
       </div>
 
-      <SolidDialog
+      <SolidConfirmDialog
         open={deleteEntity}
-        onOpenChange={(open) => {
-          if (!open) setDeleteEntity(false);
-        }}
-        contentClassName="solid-confirm-dialog solid-tree-confirm-dialog"
-        showHeader={false}
-      >
-        <SolidDialogHeader>
-          <SolidDialogTitle>
-            Delete {solidTreeViewMetaData?.data?.solidView?.model?.displayName || params?.modelName}
-          </SolidDialogTitle>
-        </SolidDialogHeader>
-        <SolidDialogSeparator />
-        <SolidDialogBody>
-          <SolidDialogDescription className="m-0">
-            {`Are you sure you want to delete this ${solidTreeViewMetaData?.data?.solidView?.model?.displayName || params?.modelName}?`}
-          </SolidDialogDescription>
-        </SolidDialogBody>
-        <SolidDialogFooter>
-          <SolidButton label="Cancel" size="sm" variant="outline" onClick={() => setDeleteEntity(false)} />
-          <SolidButton label="Delete" size="sm" severity="danger" onClick={handleDeleteEntity} />
-        </SolidDialogFooter>
-      </SolidDialog>
-
-      <SolidDialog
+        onCancel={() => setDeleteEntity(false)}
+        onConfirm={handleDeleteEntity}
+        className="solid-shadcn-confirm-dialog solid-delete-confirm-dialog"
+        headerClassName="solid-shadcn-dialog-head"
+        bodyClassName="solid-shadcn-dialog-body"
+        footerClassName="solid-shadcn-dialog-actions"
+        separatorClassName="solid-shadcn-dialog-sep"
+        showSeparator
+        title={`Delete ${entityDisplayName}`}
+        message={<p className="solid-shadcn-dialog-text">{`Are you sure you want to delete this ${entityDisplayName}?`}</p>}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+      />
+
+      <SolidConfirmDialog
         open={isDeleteRecordsDialogVisible}
-        onOpenChange={(open) => {
-          if (!open) setDeleteRecordsDialogVisible(false);
-        }}
-        contentClassName="solid-confirm-dialog solid-tree-confirm-dialog"
-        showHeader={false}
-      >
-        <SolidDialogHeader>
-          <SolidDialogTitle>Confirm Delete</SolidDialogTitle>
-        </SolidDialogHeader>
-        <SolidDialogSeparator />
-        <SolidDialogBody>
-          <SolidDialogDescription className="m-0">
-            Are you sure you want to delete the selected records?
-          </SolidDialogDescription>
-        </SolidDialogBody>
-        <SolidDialogFooter>
-          <SolidButton label="Cancel" size="sm" variant="outline" onClick={onDeleteClose} />
-          <SolidButton label="Delete" size="sm" severity="danger" onClick={deleteBulk} />
-        </SolidDialogFooter>
-      </SolidDialog>
+        onCancel={onDeleteClose}
+        onConfirm={deleteBulk}
+        className="solid-shadcn-confirm-dialog solid-delete-confirm-dialog"
+        headerClassName="solid-shadcn-dialog-head"
+        bodyClassName="solid-shadcn-dialog-body"
+        footerClassName="solid-shadcn-dialog-actions"
+        separatorClassName="solid-shadcn-dialog-sep"
+        showSeparator
+        title="Delete Records"
+        message={<p className="solid-shadcn-dialog-text">Are you sure you want to delete the selected records?</p>}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+      />
 
       <SolidDialog
         open={isRecoverDialogVisible}
@@ -2121,6 +2241,14 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
         </SolidDialogFooter>
       </SolidDialog>
 
+      {openLightbox && (
+        <SolidLightbox
+          open={openLightbox}
+          slides={lightboxSlides}
+          onClose={() => setOpenLightbox(false)}
+        />
+      )}
+
     </div>
   );
 });

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GenerateApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,YAAY,EAAoC,MAAM,iCAAiC,CAAC;AAiCtG,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CAkIjG"}
+{"version":3,"file":"GenerateApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,YAAY,EAAoC,MAAM,iCAAiC,CAAC;AAiCtG,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CAmIjG"}

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.js

@@ -152,6 +152,6 @@ export function GenerateApiKeyModal(_a) {
                                             formik.setFieldValue("expiryOption", value);
                                             if (value !== "custom")
                                                 setCustomDate(null);
-                                        } }), formik.values.expiryOption === "custom" && (_jsx(SolidDatePicker, { selected: customDate, onChange: function (date) { return setCustomDate(date); }, minDate: new Date(), placeholderText: "Select expiry date", dateFormat: "dd/MM/yyyy" })), formik.values.expiryOption !== "custom" ? (_jsx("p", { className: "solid-api-key-dialog-hint m-0", children: "Choose how long this key should remain valid." })) : null, expiryError && _jsx(SolidMessage, { severity: "error", text: expiryError })] })] }) }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { className: "solid-api-key-dialog-footer", children: [_jsx(SolidButton, { variant: "outline", type: "button", onClick: handleClose, disabled: isLoading, children: "Cancel" }), _jsx(SolidButton, { type: "submit", form: "generate-api-key-form", loading: isLoading, children: "Generate Key" })] })] }));
+                                        }, native: false }), formik.values.expiryOption === "custom" && (_jsx(SolidDatePicker, { selected: customDate, onChange: function (date) { return setCustomDate(date); }, minDate: new Date(), placeholderText: "Select expiry date", dateFormat: "dd/MM/yyyy" })), formik.values.expiryOption !== "custom" ? (_jsx("p", { className: "solid-api-key-dialog-hint m-0", children: "Choose how long this key should remain valid." })) : null, expiryError && _jsx(SolidMessage, { severity: "error", text: expiryError })] })] }) }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { className: "solid-api-key-dialog-footer", children: [_jsx(SolidButton, { variant: "outline", type: "button", onClick: handleClose, disabled: isLoading, children: "Cancel" }), _jsx(SolidButton, { type: "submit", form: "generate-api-key-form", loading: isLoading, children: "Generate Key" })] })] }));
 }
 //# sourceMappingURL=GenerateApiKeyModal.js.map

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenerateApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useFormik } from \"formik\";\nimport * as Yup from \"yup\";\nimport {\n  SolidButton,\n  SolidDatePicker,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogDescription,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n  SolidInput,\n  SolidMessage,\n  SolidSelect,\n} from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport { type ApiKeyRecord, useGenerateApiKeyForUserMutation } from \"../../../../redux/api/apiKeyApi\";\n\nconst EXPIRY_OPTIONS = [\n  { label: \"30 days\", value: \"30d\" },\n  { label: \"60 days\", value: \"60d\" },\n  { label: \"90 days\", value: \"90d\" },\n  { label: \"Never\", value: \"never\" },\n  { label: \"Custom date\", value: \"custom\" },\n];\n\nfunction addDays(days: number): string {\n  const d = new Date();\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nfunction resolveExpiresAt(expiryOption: string, customDate: Date | null): string | undefined {\n  switch (expiryOption) {\n    case \"30d\":\n      return addDays(30);\n    case \"60d\":\n      return addDays(60);\n    case \"90d\":\n      return addDays(90);\n    case \"never\":\n      return undefined;\n    case \"custom\":\n      return customDate ? customDate.toISOString() : undefined;\n    default:\n      return undefined;\n  }\n}\n\ninterface GenerateApiKeyModalProps {\n  open: boolean;\n  onClose: () => void;\n  onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;\n  userId?: number;\n}\n\nexport function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps) {\n  const dispatch = useDispatch();\n  const [generateApiKeyForUser, { isLoading }] = useGenerateApiKeyForUserMutation();\n  const [customDate, setCustomDate] = useState<Date | null>(null);\n\n  const formik = useFormik({\n    initialValues: {\n      name: \"\",\n      expiryOption: \"30d\",\n    },\n    validationSchema: Yup.object({\n      name: Yup.string()\n        .trim()\n        .min(2, \"Name must be at least 2 characters\")\n        .max(64, \"Name must be 64 characters or fewer\")\n        .required(\"Key name is required\"),\n      expiryOption: Yup.string().required(\"Expiry is required\"),\n    }),\n    onSubmit: async (values, helpers) => {\n      if (values.expiryOption === \"custom\" && !customDate) {\n        helpers.setFieldError(\"expiryOption\", \"Please select a custom expiry date\");\n        return;\n      }\n\n      const expiresAt = resolveExpiresAt(values.expiryOption, customDate);\n\n      try {\n        const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };\n        const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();\n\n        onCreated(response.data.apiKey, values.name.trim(), response.data.record);\n        handleClose();\n      } catch (err: any) {\n        const detail = err?.data?.message || \"Failed to generate API key. Please try again.\";\n        dispatch(showToast({ severity: \"error\", summary: \"Error\", detail }));\n      }\n    },\n  });\n\n  const handleClose = () => {\n    formik.resetForm();\n    setCustomDate(null);\n    onClose();\n  };\n\n  // Reset form when modal opens\n  useEffect(() => {\n    if (open) {\n      formik.resetForm();\n      setCustomDate(null);\n    }\n  }, [open]);\n\n  const nameError =\n    formik.touched.name && formik.errors.name ? String(formik.errors.name) : \"\";\n  const expiryError =\n    formik.touched.expiryOption && formik.errors.expiryOption\n      ? String(formik.errors.expiryOption)\n      : \"\";\n\n  return (\n    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }} className=\"solid-api-key-dialog\">\n      <SolidDialogHeader className=\"solid-api-key-dialog-header\">\n        <SolidDialogTitle>Generate API Key</SolidDialogTitle>\n        <SolidDialogDescription>\n          Create a named key for this user. The raw key will be shown only once after generation.\n        </SolidDialogDescription>\n      </SolidDialogHeader>\n      <SolidDialogSeparator />\n      <SolidDialogBody className=\"solid-api-key-dialog-body\">\n        <form id=\"generate-api-key-form\" onSubmit={formik.handleSubmit}>\n          <div className=\"solid-api-key-dialog-fields\">\n            <div className=\"solid-api-key-dialog-field\">\n              <label htmlFor=\"api-key-name\" className=\"form-field-label\">\n                Key Name <span style={{ color: \"var(--solid-danger-color, #ef4444)\" }}>*</span>\n              </label>\n              <SolidInput\n                id=\"api-key-name\"\n                name=\"name\"\n                autoComplete=\"off\"\n                placeholder=\"e.g. CI/CD pipeline, Mobile app\"\n                value={formik.values.name}\n                onChange={formik.handleChange}\n                onBlur={formik.handleBlur}\n              />\n              {nameError && <SolidMessage severity=\"error\" text={nameError} />}\n            </div>\n\n            <div className=\"solid-api-key-dialog-field\">\n              <label htmlFor=\"api-key-expiry\" className=\"form-field-label\">\n                Expires\n              </label>\n              <SolidSelect\n                value={formik.values.expiryOption}\n                options={EXPIRY_OPTIONS}\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                onChange={({ value }) => {\n                  formik.setFieldValue(\"expiryOption\", value);\n                  if (value !== \"custom\") setCustomDate(null);\n                }}\n              />\n              {formik.values.expiryOption === \"custom\" && (\n                <SolidDatePicker\n                  selected={customDate}\n                  onChange={(date: Date | null) => setCustomDate(date)}\n                  minDate={new Date()}\n                  placeholderText=\"Select expiry date\"\n                  dateFormat=\"dd/MM/yyyy\"\n                />\n              )}\n              {formik.values.expiryOption !== \"custom\" ? (\n                <p className=\"solid-api-key-dialog-hint m-0\">Choose how long this key should remain valid.</p>\n              ) : null}\n              {expiryError && <SolidMessage severity=\"error\" text={expiryError} />}\n            </div>\n          </div>\n        </form>\n      </SolidDialogBody>\n      <SolidDialogSeparator />\n      <SolidDialogFooter className=\"solid-api-key-dialog-footer\">\n        <SolidButton variant=\"outline\" type=\"button\" onClick={handleClose} disabled={isLoading}>\n          Cancel\n        </SolidButton>\n        <SolidButton type=\"submit\" form=\"generate-api-key-form\" loading={isLoading}>\n          Generate Key\n        </SolidButton>\n      </SolidDialogFooter>\n    </SolidDialog>\n  );\n}\n"]}
+{"version":3,"file":"GenerateApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useFormik } from \"formik\";\nimport * as Yup from \"yup\";\nimport {\n  SolidButton,\n  SolidDatePicker,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogDescription,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n  SolidInput,\n  SolidMessage,\n  SolidSelect,\n} from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport { type ApiKeyRecord, useGenerateApiKeyForUserMutation } from \"../../../../redux/api/apiKeyApi\";\n\nconst EXPIRY_OPTIONS = [\n  { label: \"30 days\", value: \"30d\" },\n  { label: \"60 days\", value: \"60d\" },\n  { label: \"90 days\", value: \"90d\" },\n  { label: \"Never\", value: \"never\" },\n  { label: \"Custom date\", value: \"custom\" },\n];\n\nfunction addDays(days: number): string {\n  const d = new Date();\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nfunction resolveExpiresAt(expiryOption: string, customDate: Date | null): string | undefined {\n  switch (expiryOption) {\n    case \"30d\":\n      return addDays(30);\n    case \"60d\":\n      return addDays(60);\n    case \"90d\":\n      return addDays(90);\n    case \"never\":\n      return undefined;\n    case \"custom\":\n      return customDate ? customDate.toISOString() : undefined;\n    default:\n      return undefined;\n  }\n}\n\ninterface GenerateApiKeyModalProps {\n  open: boolean;\n  onClose: () => void;\n  onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;\n  userId?: number;\n}\n\nexport function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps) {\n  const dispatch = useDispatch();\n  const [generateApiKeyForUser, { isLoading }] = useGenerateApiKeyForUserMutation();\n  const [customDate, setCustomDate] = useState<Date | null>(null);\n\n  const formik = useFormik({\n    initialValues: {\n      name: \"\",\n      expiryOption: \"30d\",\n    },\n    validationSchema: Yup.object({\n      name: Yup.string()\n        .trim()\n        .min(2, \"Name must be at least 2 characters\")\n        .max(64, \"Name must be 64 characters or fewer\")\n        .required(\"Key name is required\"),\n      expiryOption: Yup.string().required(\"Expiry is required\"),\n    }),\n    onSubmit: async (values, helpers) => {\n      if (values.expiryOption === \"custom\" && !customDate) {\n        helpers.setFieldError(\"expiryOption\", \"Please select a custom expiry date\");\n        return;\n      }\n\n      const expiresAt = resolveExpiresAt(values.expiryOption, customDate);\n\n      try {\n        const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };\n        const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();\n\n        onCreated(response.data.apiKey, values.name.trim(), response.data.record);\n        handleClose();\n      } catch (err: any) {\n        const detail = err?.data?.message || \"Failed to generate API key. Please try again.\";\n        dispatch(showToast({ severity: \"error\", summary: \"Error\", detail }));\n      }\n    },\n  });\n\n  const handleClose = () => {\n    formik.resetForm();\n    setCustomDate(null);\n    onClose();\n  };\n\n  // Reset form when modal opens\n  useEffect(() => {\n    if (open) {\n      formik.resetForm();\n      setCustomDate(null);\n    }\n  }, [open]);\n\n  const nameError =\n    formik.touched.name && formik.errors.name ? String(formik.errors.name) : \"\";\n  const expiryError =\n    formik.touched.expiryOption && formik.errors.expiryOption\n      ? String(formik.errors.expiryOption)\n      : \"\";\n\n  return (\n    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }} className=\"solid-api-key-dialog\">\n      <SolidDialogHeader className=\"solid-api-key-dialog-header\">\n        <SolidDialogTitle>Generate API Key</SolidDialogTitle>\n        <SolidDialogDescription>\n          Create a named key for this user. The raw key will be shown only once after generation.\n        </SolidDialogDescription>\n      </SolidDialogHeader>\n      <SolidDialogSeparator />\n      <SolidDialogBody className=\"solid-api-key-dialog-body\">\n        <form id=\"generate-api-key-form\" onSubmit={formik.handleSubmit}>\n          <div className=\"solid-api-key-dialog-fields\">\n            <div className=\"solid-api-key-dialog-field\">\n              <label htmlFor=\"api-key-name\" className=\"form-field-label\">\n                Key Name <span style={{ color: \"var(--solid-danger-color, #ef4444)\" }}>*</span>\n              </label>\n              <SolidInput\n                id=\"api-key-name\"\n                name=\"name\"\n                autoComplete=\"off\"\n                placeholder=\"e.g. CI/CD pipeline, Mobile app\"\n                value={formik.values.name}\n                onChange={formik.handleChange}\n                onBlur={formik.handleBlur}\n              />\n              {nameError && <SolidMessage severity=\"error\" text={nameError} />}\n            </div>\n\n            <div className=\"solid-api-key-dialog-field\">\n              <label htmlFor=\"api-key-expiry\" className=\"form-field-label\">\n                Expires\n              </label>\n              <SolidSelect\n                value={formik.values.expiryOption}\n                options={EXPIRY_OPTIONS}\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                onChange={({ value }) => {\n                  formik.setFieldValue(\"expiryOption\", value);\n                  if (value !== \"custom\") setCustomDate(null);\n                }}\n                native={false}\n              />\n              {formik.values.expiryOption === \"custom\" && (\n                <SolidDatePicker\n                  selected={customDate}\n                  onChange={(date: Date | null) => setCustomDate(date)}\n                  minDate={new Date()}\n                  placeholderText=\"Select expiry date\"\n                  dateFormat=\"dd/MM/yyyy\"\n                />\n              )}\n              {formik.values.expiryOption !== \"custom\" ? (\n                <p className=\"solid-api-key-dialog-hint m-0\">Choose how long this key should remain valid.</p>\n              ) : null}\n              {expiryError && <SolidMessage severity=\"error\" text={expiryError} />}\n            </div>\n          </div>\n        </form>\n      </SolidDialogBody>\n      <SolidDialogSeparator />\n      <SolidDialogFooter className=\"solid-api-key-dialog-footer\">\n        <SolidButton variant=\"outline\" type=\"button\" onClick={handleClose} disabled={isLoading}>\n          Cancel\n        </SolidButton>\n        <SolidButton type=\"submit\" form=\"generate-api-key-form\" loading={isLoading}>\n          Generate Key\n        </SolidButton>\n      </SolidDialogFooter>\n    </SolidDialog>\n  );\n}\n"]}

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx

@@ -158,6 +158,7 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
                   formik.setFieldValue("expiryOption", value);
                   if (value !== "custom") setCustomDate(null);
                 }}
+                native={false}
               />
               {formik.values.expiryOption === "custom" && (
                 <SolidDatePicker