@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

package/dist/components/core/kanban/SolidKanbanViewConfigure.tsx

@@ -1,152 +1,269 @@
+import { permissionExpression } from "../../../helpers/permissions";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
-import { Accordion, AccordionTab } from 'primereact/accordion';
-import { Button } from 'primereact/button';
-import { Divider } from 'primereact/divider';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { RadioButton } from 'primereact/radiobutton';
-import { useEffect, useRef, useState } from 'react'
-
-export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllowed, setLayoutDialogVisible, viewModes, setShowSaveFilterPopup }: any) => {
-    const op = useRef(null);
-    const customizeLayout = useRef<OverlayPanel | null>(null);
+import { useSearchParams } from "../../../hooks/useSearchParams";
+import { useEffect, useState } from "react";
+import { SolidExport } from "../../../components/common/SolidExport";
+import { SolidGenericImport } from "../common/SolidGenericImport/SolidGenericImport";
+import {
+    SolidDropdownMenu,
+    SolidDropdownMenuContent,
+    SolidDropdownMenuItem,
+    SolidDropdownMenuLabel,
+    SolidDropdownMenuRadioGroup,
+    SolidDropdownMenuRadioItem,
+    SolidDropdownMenuSeparator,
+    SolidDropdownMenuSub,
+    SolidDropdownMenuSubContent,
+    SolidDropdownMenuSubTrigger,
+    SolidDropdownMenuTrigger,
+    SolidDialog,
+    SolidDialogBody,
+    SolidDialogClose,
+    SolidDialogDescription,
+    SolidDialogHeader,
+    SolidDialogSeparator,
+    SolidDialogTitle,
+    SolidIcon,
+} from "../../shad-cn-ui";
+
+const normalizeViewModes = (viewModes: any[] = []) => {
+    return viewModes
+        .map((option: any) => {
+            if (!option) return null;
+
+            if (typeof option === "string") {
+                return {
+                    type: option,
+                    label: option.charAt(0).toUpperCase() + option.slice(1),
+                };
+            }
+
+            const type = option.type || option.value;
+            if (!type) return null;
+
+            return {
+                ...option,
+                type,
+                label: option.label || (type.charAt(0).toUpperCase() + type.slice(1)),
+            };
+        })
+        .filter(Boolean);
+};
+
+export const SolidKanbanViewConfigure = ({
+    solidKanbanViewMetaData,
+    modelName,
+    actionsAllowed,
+    setLayoutDialogVisible,
+    viewModes,
+    setShowSaveFilterPopup,
+    filters,
+    handleRefreshView,
+}: any) => {
     const pathname = usePathname();
     const router = useRouter();
+    const searchParams = useSearchParams();
     const [view, setView] = useState<string>("");
+    const [isCogMenuOpen, setIsCogMenuOpen] = useState(false);
+    const [openImportDialog, setOpenImportDialog] = useState(false);
+    const [exportView, setExportView] = useState(false);
 
-    const handleViewChange = (newView: string) => {
-        if (view === newView) return; // Prevent unnecessary updates
-        const pathSegments = pathname.split('/').filter(Boolean);
-        pathSegments[pathSegments.length - 1] = newView; // Replace the last part with new view
-        const newPath = '/' + pathSegments.join('/');
-        router.push(newPath);
-    };
+    const visibleViewModes = normalizeViewModes(Array.isArray(viewModes) ? viewModes : []);
+    const showSwitchType = visibleViewModes.length > 1;
+    const layoutAttrs = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs ?? {};
 
     useEffect(() => {
-        if (typeof pathname === 'string') {
-            const pathSegments = pathname.split('/').filter(Boolean);
+        if (typeof pathname === "string") {
+            const pathSegments = pathname.split("/").filter(Boolean);
             if (pathSegments.length > 0) {
                 setView(pathSegments[pathSegments.length - 1]);
             }
         }
-    }, [])
+    }, [pathname]);
 
+    const handleViewChange = (newViewType: string) => {
+        if (view === newViewType) return;
 
-    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (
-                customizeLayout.current &&
-                !customizeLayout.current.getElement()?.contains(event.target as Node)
-            ) {
-                setIsOverlayOpen(false);
-            }
+        const nextView = visibleViewModes.find((option: any) => option.type === newViewType);
+        const pathSegments = pathname.split("/").filter(Boolean);
+        pathSegments[pathSegments.length - 1] = newViewType;
+        const nextSearchParams = new URLSearchParams(searchParams.toString());
+        const currentQuery = {
+            menuItemId: searchParams.get("menuItemId"),
+            menuItemName: searchParams.get("menuItemName"),
+            actionId: searchParams.get("actionId"),
+            actionName: searchParams.get("actionName"),
         };
 
-        if (isOverlayOpen) {
-            document.addEventListener("click", handleClickOutside);
-        } else {
-            document.removeEventListener("click", handleClickOutside);
-        }
-
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [isOverlayOpen])
+        const queryFields = {
+            menuItemId: nextView?.menuItemId ?? currentQuery.menuItemId,
+            menuItemName: nextView?.menuItemName ?? currentQuery.menuItemName,
+            actionId: nextView?.actionId ?? currentQuery.actionId,
+            actionName: nextView?.actionName ?? currentQuery.actionName,
+        };
 
+        Object.entries(queryFields).forEach(([key, value]) => {
+            if (value) {
+                nextSearchParams.set(key, value);
+            } else {
+                nextSearchParams.delete(key);
+            }
+        });
 
+        const newPath = "/" + pathSegments.join("/");
+        const nextQueryString = nextSearchParams.toString();
+        router.push(nextQueryString ? `${newPath}?${nextQueryString}` : newPath);
+    };
 
+    const clearLocalstorageCache = () => {
+        const currentPageUrl = window.location.pathname;
+        localStorage.removeItem(currentPageUrl);
+        window.location.reload();
+    };
 
+    const canImport =
+        Boolean(modelName) &&
+        actionsAllowed.includes(`${permissionExpression(modelName, "create")}`) &&
+        actionsAllowed.includes(`${permissionExpression("importTransaction", "create")}`);
 
+    const canExport =
+        Boolean(modelName) &&
+        actionsAllowed.includes(`${permissionExpression(modelName, "findMany")}`) &&
+        actionsAllowed.includes(`${permissionExpression("exportTransaction", "create")}`);
 
+    const canCustomizeLayout = actionsAllowed.includes(`${permissionExpression("userViewMetadata", "create")}`);
+    const canSaveCustomFilter = actionsAllowed.includes(`${permissionExpression("savedFilters", "create")}`);
 
     return (
         <div className="position-relative">
-            <Button
-                type="button"
-                size="small"
-                icon="pi pi-cog"
-                severity="secondary"
-                outlined
-                className='solid-icon-button'
-                // @ts-ignore
-                onClick={(e) => op.current.toggle(e)}
-            />
-            <OverlayPanel ref={op}>
-                <div className="p-2">
-                    <div className="flex flex-column">
-                        <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2 text-base" />
-                        <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2 text-base" />
-                        <Button
-                            text
-                            type="button"
-                            className="w-8rem text-left text-base gap-2 purple-200"
-                            label="Layout"
-                            size="small"
-                            iconPos="left"
-                            severity="contrast"
-                            icon={'pi pi-objects-column'}
-                            onClick={() => setLayoutDialogVisible(true)}
-                        />
-                    </div>
-                </div>
-                <Divider className="m-0" />
-                <div className="p-2 relative flex flex-column gap-1">
-                    <Button
-                        icon='pi pi-sliders-h'
-                        label="Customize Layout"
-                        severity={isOverlayOpen ? undefined : "secondary"}
-                        size="small"
-                        text={isOverlayOpen ? false : true}
-                        className="text-left gap-2 w-full text-base"
-                        // @ts-ignore
-                        onClick={(e) => {
-                            customizeLayout.current?.toggle(e);
-                            setIsOverlayOpen((prev) => !prev); // ✅ Ensure state updates when toggled
-                        }}
+            <SolidDropdownMenu open={isCogMenuOpen} onOpenChange={setIsCogMenuOpen}>
+                <SolidDropdownMenuTrigger asChild>
+                    <button
+                        type="button"
+                        className="solid-icon-button solid-header-cog-trigger"
+                        aria-label="Open kanban options"
                     >
-                        <i className="pi pi-chevron-right text-sm"></i>
-                    </Button>
-                    <Button text icon='pi pi-save' label="Save Custom Filter" size="small" severity="secondary" className="text-left gap-2 text-base" onClick={() => setShowSaveFilterPopup(true)} />
-                    <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}
-                        onShow={() => setIsOverlayOpen(true)}
-                        onHide={() => {
-                            setTimeout(() => setIsOverlayOpen(false), 50); // ✅ Ensure state updates
+                        <SolidIcon name="si-cog" aria-hidden />
+                    </button>
+                </SolidDropdownMenuTrigger>
+                <SolidDropdownMenuContent className="listview-cogwheel-panel">
+                    {canImport && (
+                        <SolidDropdownMenuItem
+                            className="solid-header-dropdown-item"
+                            onSelect={() => {
+                                setOpenImportDialog(true);
+                                setIsCogMenuOpen(false);
+                            }}
+                        >
+                            <SolidIcon name="si-download" className="solid-header-action-button-icon" aria-hidden />
+                            <span className="solid-header-action-button-label">Import</span>
+                        </SolidDropdownMenuItem>
+                    )}
+
+                    {canExport && (
+                        <SolidDropdownMenuItem
+                            className="solid-header-dropdown-item"
+                            onSelect={() => {
+                                setExportView(true);
+                                setIsCogMenuOpen(false);
+                            }}
+                        >
+                            <SolidIcon name="si-upload" className="solid-header-action-button-icon" aria-hidden />
+                            <span className="solid-header-action-button-label">Export</span>
+                        </SolidDropdownMenuItem>
+                    )}
+
+                    {(canCustomizeLayout || canSaveCustomFilter) && <SolidDropdownMenuSeparator />}
+
+                    {canCustomizeLayout && (
+                        <SolidDropdownMenuSub>
+                            <SolidDropdownMenuSubTrigger className="solid-header-dropdown-item">
+                                <SolidIcon name="si-sliders-h" className="solid-header-action-button-icon" aria-hidden />
+                                <span className="solid-header-action-button-label">Customize Layout</span>
+                            </SolidDropdownMenuSubTrigger>
+                            <SolidDropdownMenuSubContent className="customize-layout-panel">
+                                {showSwitchType && (
+                                    <>
+                                        <SolidDropdownMenuLabel>Switch Type</SolidDropdownMenuLabel>
+                                        <SolidDropdownMenuRadioGroup value={view} onValueChange={handleViewChange}>
+                                            {visibleViewModes.map((option: any) => (
+                                                <SolidDropdownMenuRadioItem key={option.type} value={option.type}>
+                                                    {option.label}
+                                                </SolidDropdownMenuRadioItem>
+                                            ))}
+                                        </SolidDropdownMenuRadioGroup>
+                                        <SolidDropdownMenuSeparator />
+                                    </>
+                                )}
+                                <SolidDropdownMenuItem
+                                    onSelect={() => {
+                                        setLayoutDialogVisible(true);
+                                        setIsCogMenuOpen(false);
+                                    }}
+                                >
+                                    <SolidIcon name="si-code" className="solid-header-action-button-icon" aria-hidden />
+                                    <span className="solid-header-action-button-label">Layout Editor</span>
+                                </SolidDropdownMenuItem>
+                            </SolidDropdownMenuSubContent>
+                        </SolidDropdownMenuSub>
+                    )}
+
+                    {canSaveCustomFilter && (
+                        <SolidDropdownMenuItem
+                            className="solid-header-dropdown-item"
+                            onSelect={() => {
+                                setShowSaveFilterPopup(true);
+                                setIsCogMenuOpen(false);
+                            }}
+                        >
+                            <SolidIcon name="si-save" className="solid-header-action-button-icon" aria-hidden />
+                            <span className="solid-header-action-button-label">Save Custom Filter</span>
+                        </SolidDropdownMenuItem>
+                    )}
+
+                    <SolidDropdownMenuItem
+                        className="solid-header-dropdown-item"
+                        onSelect={() => {
+                            clearLocalstorageCache();
+                            setIsCogMenuOpen(false);
                         }}
                     >
+                        <SolidIcon name="si-trash" className="solid-header-action-button-icon" aria-hidden />
+                        <span className="solid-header-action-button-label">Clear cache</span>
+                    </SolidDropdownMenuItem>
+                </SolidDropdownMenuContent>
+            </SolidDropdownMenu>
 
-                        <div className="solid-layout-accordion">
-                            <Accordion expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[0]}>
-                                {viewModes && viewModes.length > 0 &&
-                                    <AccordionTab header="Switch Type">
-                                        <div className="flex flex-column gap-1 p-1">
-                                            {viewModes.map((option: any) => (
-                                                <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
-                                                    <RadioButton
-                                                        inputId={option.value}
-                                                        name="views"
-                                                        value={option.value}
-                                                        // onChange={(e) => router}
-                                                        onChange={() => handleViewChange(option.value)}
-                                                        checked={option.value === view}
-                                                    />
-                                                    <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
-                                                        {option.label}
-                                                        {/* <Image
-                                                        src={option.image}
-                                                        alt={option.value}
-                                                        fill
-                                                        className='relative row-spacing-img'
-                                                    /> */}
-                                                    </label>
-                                                </div>
-                                            ))}
-                                        </div>
-                                    </AccordionTab>
-                                }
-                            </Accordion>
-                        </div>
-                    </OverlayPanel>
-                </div>
-            </OverlayPanel>
+            <SolidDialog
+                open={exportView}
+                onOpenChange={setExportView}
+                className="solid-kanban-export-dialog"
+                style={{ width: "min(960px, calc(100vw - 32px))" }}
+            >
+                <SolidDialogHeader className="solid-export-dialog-header">
+                    <div>
+                        <SolidDialogTitle>Export</SolidDialogTitle>
+                        <SolidDialogDescription className="solid-filter-dialog-subtitle m-0">
+                            Choose the file format, refine the field set, and save reusable export templates.
+                        </SolidDialogDescription>
+                    </div>
+                    <SolidDialogClose />
+                </SolidDialogHeader>
+                <SolidDialogSeparator />
+                <SolidDialogBody className="solid-kanban-export-dialog-body">
+                    <SolidExport listViewMetaData={solidKanbanViewMetaData} filters={filters} />
+                </SolidDialogBody>
+            </SolidDialog>
+
+            {openImportDialog && (
+                <SolidGenericImport
+                    openImportDialog={openImportDialog}
+                    setOpenImportDialog={setOpenImportDialog}
+                    listViewMetaData={solidKanbanViewMetaData}
+                    handleFetchUpdatedRecords={handleRefreshView}
+                />
+            )}
         </div>
-    )
-}
+    );
+};

package/dist/components/core/list/ListViewRowActionPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListViewRowActionPopup.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/ListViewRowActionPopup.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,gBAAiB,GAAG,4CAgCtD,CAAA"}
+{"version":3,"file":"ListViewRowActionPopup.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/ListViewRowActionPopup.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,gBAAiB,GAAG,4CAoCtD,CAAA"}

package/dist/components/core/list/ListViewRowActionPopup.js

@@ -10,8 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from "primereact/button";
+import { Check, X } from "lucide-react";
 import { getExtensionComponent } from "../../../helpers/registry";
+import { SolidButton } from "../../shad-cn-ui";
 export var ListViewRowActionPopup = function (_a) {
     //Note if there is not custom component the need a api call to server 
     // GenerateModuleCode  is my custom compoennt that will trigger code generation 
@@ -27,6 +28,6 @@ export var ListViewRowActionPopup = function (_a) {
     return (_jsx("div", { children: ((_c = context === null || context === void 0 ? void 0 : context.rowAction) === null || _c === void 0 ? void 0 : _c.action) ?
             DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps))
             :
-                _jsxs(_Fragment, { children: [_jsx("h1", { children: context === null || context === void 0 ? void 0 : context.modelName }), _jsx("h1", { children: context === null || context === void 0 ? void 0 : context.moduleName }), _jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Confirm", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: triggerServerAction }), _jsx(Button, { label: "Cancel", icon: "pi pi-times", className: 'small-button', onClick: function () { return context.closeCustomRowActionPopup(); } })] })] }) }));
+                _jsxs(_Fragment, { children: [_jsx("h1", { children: context === null || context === void 0 ? void 0 : context.modelName }), _jsx("h1", { children: context === null || context === void 0 ? void 0 : context.moduleName }), _jsxs("div", { className: "flex justify-content-center", children: [_jsx(SolidButton, { className: 'small-button', variant: "destructive", autoFocus: true, onClick: triggerServerAction, leftIcon: _jsx(Check, { size: 14 }), children: "Confirm" }), _jsx(SolidButton, { className: 'small-button', variant: "outline", onClick: function () { return context.closeCustomRowActionPopup(); }, leftIcon: _jsx(X, { size: 14 }), children: "Cancel" })] })] }) }));
 };
 //# sourceMappingURL=ListViewRowActionPopup.js.map

package/dist/components/core/list/ListViewRowActionPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListViewRowActionPopup.js","sourceRoot":"","sources":["../../../../src/components/core/list/ListViewRowActionPopup.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,EAAgB;IAEnD,sEAAsE;IACtE,gFAAgF;IAChF,oGAAoG;;QAJ/D,OAAO,aAAA;IAM5C,IAAM,mBAAmB,GAAG;IAE5B,CAAC,CAAA;IAED,IAAI,aAAa,GAAG,qBAAqB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,0CAAE,MAAM,CAAC,CAAC;IACtE,IAAM,WAAW,GAAG;QAChB,OAAO,EAAE,OAAO;KACnB,CAAA;IAED,OAAO,CACH,wBAEQ,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,0CAAE,MAAM,EAAC,CAAC;YACxB,aAAa,IAAI,KAAC,aAAa,eAAK,WAAW,EAAI;YACnD,CAAC;gBACD,8BACI,uBAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,GAAM,EAC7B,uBAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,GAAM,EAC9B,eAAK,SAAS,EAAC,6BAA6B,aACxC,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,cAAc,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,QAAC,OAAO,EAAE,mBAAmB,GAAI,EAChI,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,yBAAyB,EAAE,EAAnC,CAAmC,GAAI,IACvH,IACP,GAET,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["\nimport { Button } from \"primereact/button\"\nimport { getExtensionComponent } from \"../../../helpers/registry\";\n\n\nexport const ListViewRowActionPopup = ({ context }: any) => {\n\n    //Note if there is not custom component the need a api call to server \n    // GenerateModuleCode  is my custom compoennt that will trigger code generation \n    //Render dynamic lsit action contains code for dynamically rendering compoennt or retunr a fall back\n\n    const triggerServerAction = () => {\n\n    }\n\n    let DynamicWidget = getExtensionComponent(context?.rowAction?.action);\n    const widgetProps = {\n        context: context\n    }\n\n    return (\n        <div>\n            {\n                context?.rowAction?.action ?\n                    DynamicWidget && <DynamicWidget {...widgetProps} />\n                    :\n                    <>\n                        <h1>{context?.modelName}</h1>\n                        <h1>{context?.moduleName}</h1>\n                        <div className=\"flex justify-content-center\">\n                            <Button label=\"Confirm\" icon=\"pi pi-check\" className='small-button' severity=\"danger\" autoFocus onClick={triggerServerAction} />\n                            <Button label=\"Cancel\" icon=\"pi pi-times\" className='small-button' onClick={() => context.closeCustomRowActionPopup()} />\n                        </div>\n                    </>\n            }\n        </div>\n    )\n}\n\n\n"]}
+{"version":3,"file":"ListViewRowActionPopup.js","sourceRoot":"","sources":["../../../../src/components/core/list/ListViewRowActionPopup.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,EAAgB;IAEnD,sEAAsE;IACtE,gFAAgF;IAChF,oGAAoG;;QAJ/D,OAAO,aAAA;IAM5C,IAAM,mBAAmB,GAAG;IAE5B,CAAC,CAAA;IAED,IAAI,aAAa,GAAG,qBAAqB,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,0CAAE,MAAM,CAAC,CAAC;IACtE,IAAM,WAAW,GAAG;QAChB,OAAO,EAAE,OAAO;KACnB,CAAA;IAED,OAAO,CACH,wBAEQ,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,0CAAE,MAAM,EAAC,CAAC;YACxB,aAAa,IAAI,KAAC,aAAa,eAAK,WAAW,EAAI;YACnD,CAAC;gBACD,8BACI,uBAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,GAAM,EAC7B,uBAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,GAAM,EAC9B,eAAK,SAAS,EAAC,6BAA6B,aACxC,KAAC,WAAW,IAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAC,aAAa,EAAC,SAAS,QAAC,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,wBAEnH,EACd,KAAC,WAAW,IAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,yBAAyB,EAAE,EAAnC,CAAmC,EAAE,QAAQ,EAAE,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,uBAEvH,IACZ,IACP,GAET,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { Check, X } from \"lucide-react\";\nimport { getExtensionComponent } from \"../../../helpers/registry\";\nimport { SolidButton } from \"../../shad-cn-ui\";\n\n\nexport const ListViewRowActionPopup = ({ context }: any) => {\n\n    //Note if there is not custom component the need a api call to server \n    // GenerateModuleCode  is my custom compoennt that will trigger code generation \n    //Render dynamic lsit action contains code for dynamically rendering compoennt or retunr a fall back\n\n    const triggerServerAction = () => {\n\n    }\n\n    let DynamicWidget = getExtensionComponent(context?.rowAction?.action);\n    const widgetProps = {\n        context: context\n    }\n\n    return (\n        <div>\n            {\n                context?.rowAction?.action ?\n                    DynamicWidget && <DynamicWidget {...widgetProps} />\n                    :\n                    <>\n                        <h1>{context?.modelName}</h1>\n                        <h1>{context?.moduleName}</h1>\n                        <div className=\"flex justify-content-center\">\n                            <SolidButton className='small-button' variant=\"destructive\" autoFocus onClick={triggerServerAction} leftIcon={<Check size={14} />}>\n                                Confirm\n                            </SolidButton>\n                            <SolidButton className='small-button' variant=\"outline\" onClick={() => context.closeCustomRowActionPopup()} leftIcon={<X size={14} />}>\n                                Cancel\n                            </SolidButton>\n                        </div>\n                    </>\n            }\n        </div>\n    )\n}\n\n"]}

package/dist/components/core/list/ListViewRowActionPopup.tsx

@@ -1,6 +1,6 @@
-
-import { Button } from "primereact/button"
+import { Check, X } from "lucide-react";
 import { getExtensionComponent } from "../../../helpers/registry";
+import { SolidButton } from "../../shad-cn-ui";
 
 
 export const ListViewRowActionPopup = ({ context }: any) => {
@@ -28,8 +28,12 @@ export const ListViewRowActionPopup = ({ context }: any) => {
                         <h1>{context?.modelName}</h1>
                         <h1>{context?.moduleName}</h1>
                         <div className="flex justify-content-center">
-                            <Button label="Confirm" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={triggerServerAction} />
-                            <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => context.closeCustomRowActionPopup()} />
+                            <SolidButton className='small-button' variant="destructive" autoFocus onClick={triggerServerAction} leftIcon={<Check size={14} />}>
+                                Confirm
+                            </SolidButton>
+                            <SolidButton className='small-button' variant="outline" onClick={() => context.closeCustomRowActionPopup()} leftIcon={<X size={14} />}>
+                                Cancel
+                            </SolidButton>
                         </div>
                     </>
             }
@@ -37,4 +41,3 @@ export const ListViewRowActionPopup = ({ context }: any) => {
     )
 }
 
-

package/dist/components/core/list/PLAN.md

@@ -43,10 +43,30 @@
 
 ## Phase 4: Filters + Search
 - [ ] Keep predicate model unchanged (`custom_filter_predicate`, `search_predicate`, `saved_filter_predicate`, `predefined_search_predicate`, grouping/aggregation).
-- [ ] Migrate `SolidGlobalSearchElement` dialogs/popovers to shadcn.
-- [ ] Migrate `FilterComponent` rule builder UI to shadcn controls.
+- [ ] Migrate `SolidGlobalSearchElement` shell off PrimeReact first.
+  Current reality:
+  `FilterComponent` already uses `SolidButton`, `SolidAutocomplete`, `SolidInput`, and `SolidSelect`, but the search shell still depends on Prime `Dialog`, `Button`, `Divider`, and `InputText`.
+- [ ] Replace `SolidGlobalSearchElement` dialog stack with internal dialog/popover primitives.
+  Targets:
+  custom filter dialog, grouping dialog, saved-filter edit dialog, save-filter dialog, delete-confirm dialog.
+- [ ] Replace `SolidGlobalSearchElement` toolbar/search-entry controls with internal primitives.
+  Targets:
+  search input, saved-filter actions, predefined-search actions, clear/apply buttons, overlay list actions.
+- [ ] Remove Prime button usage inside saved-filter list/actions.
+- [ ] Migrate `FilterComponent` container shell off Prime `Fieldset`.
+  Keep existing predicate/rule state shape and `transformFilterRules(...)` contract unchanged.
+- [ ] Replace remaining Prime icon class usage in filter flow with non-Prime icons.
+- [ ] Audit `SolidFilterFields` and list filter input widgets for hidden Prime event-shape coupling.
 - [ ] Preserve saved filter URL behavior (`savedQuery`) and local cache behavior.
 - [ ] Confirm relation filter hydration still works.
+- [ ] Preserve `clearFilter()` and imperative `SolidListViewHandle.applyFilter(...)` behavior unchanged.
+
+## Phase 4A: Recommended Execution Order For Filters
+- [ ] 1) Introduce/standardize a reusable internal dialog primitive if missing.
+- [ ] 2) Convert `SolidGlobalSearchElement` dialogs without changing filter logic.
+- [ ] 3) Convert search-entry row, chip/actions, and saved-filter action buttons.
+- [ ] 4) Replace `FilterComponent` Prime `Fieldset` shell.
+- [ ] 5) Verify `transformFiltersToRules`, `transformRulesToFilters`, `mergeAllDiffFilters`, and relation hydration parity.
 
 ## Phase 5: Configure Menu + Column Selector
 - [ ] Replace cog overlay/context menu with shadcn dropdown/popover.

package/dist/components/core/list/SolidColumnSelector/SolidListColumnSelector.d.ts

@@ -1,2 +1,2 @@
-export declare const SolidListColumnSelector: ({ listViewMetaData, customizeLayout }: any) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const SolidListColumnSelector: ({ listViewMetaData, onClose }: any) => import("react/jsx-runtime").JSX.Element | undefined;
 //# sourceMappingURL=SolidListColumnSelector.d.ts.map

package/dist/components/core/list/SolidColumnSelector/SolidListColumnSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidListColumnSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/SolidColumnSelector/SolidListColumnSelector.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,uBAAuB,0CAA2C,GAAG,wDA0MjF,CAAA"}
+{"version":3,"file":"SolidListColumnSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/SolidColumnSelector/SolidListColumnSelector.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,uBAAuB,kCAAmC,GAAG,wDAuMzE,CAAA"}

package/dist/components/core/list/SolidColumnSelector/SolidListColumnSelector.js

@@ -56,8 +56,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Checkbox } from 'primereact/checkbox';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { createSolidEntityApi } from '../../../../redux/api/solidEntityApi';
@@ -67,8 +65,7 @@ import { ERROR_MESSAGES } from '../../../../constants/error-messages';
 import { showToast } from '../../../../redux/features/toastSlice';
 export var SolidListColumnSelector = function (_a) {
     var _b, _c;
-    var listViewMetaData = _a.listViewMetaData, customizeLayout = _a.customizeLayout;
-    console.log("listViewMetaData column selector", listViewMetaData);
+    var listViewMetaData = _a.listViewMetaData, onClose = _a.onClose;
     var dispatch = useDispatch();
     var _d = useState(false), isDragging = _d[0], setIsDragging = _d[1];
     var entityApi = createSolidEntityApi('userViewMetadata');
@@ -193,14 +190,12 @@ export var SolidListColumnSelector = function (_a) {
         reordered.splice(result.destination.index, 0, moved);
         setFields(reordered);
     };
-    return (_jsx(_Fragment, { children: _jsxs("form", { onSubmit: formik.handleSubmit, className: "flex flex-column gap-1 px-2", children: [_jsx(DragDropContext, { onDragEnd: onDragEnd, onDragStart: function () { return setIsDragging(true); }, children: _jsx(Droppable, { droppableId: "columns", children: function (provided) { return (_jsxs("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "flex flex-column cogwheel-column-filter px-1 ".concat(isDragging ? styles.SolidColumnDragContextActive : ''), style: { maxHeight: 400, overflowY: 'auto' }, children: [fields.map(function (column, index) { return (_jsx(Draggable, { draggableId: column.key, index: index, children: function (provided, snapshot) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "flex align-items-center justify-content-between gap-3 px-3 py-2 ".concat(snapshot.isDragging ? styles.SolidColumnDraggedActiveElement : ''), style: __assign({}, provided.draggableProps.style), children: [_jsxs("div", { className: 'flex align-items-center gap-1', children: [_jsx(Checkbox, { inputId: column.key, name: "selectedColumns", value: column, onChange: function () {
+    return (_jsx(_Fragment, { children: _jsxs("form", { onSubmit: formik.handleSubmit, className: "flex flex-column gap-1 px-0", children: [_jsx(DragDropContext, { onDragEnd: onDragEnd, onDragStart: function () { return setIsDragging(true); }, children: _jsx(Droppable, { droppableId: "columns", children: function (provided) { return (_jsxs("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "flex flex-column cogwheel-column-filter px-0 ".concat(isDragging ? styles.SolidColumnDragContextActive : ''), style: { maxHeight: 400, overflowY: 'auto' }, children: [fields.map(function (column, index) { return (_jsx(Draggable, { draggableId: column.key, index: index, children: function (provided, snapshot) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "flex align-items-center justify-content-between gap-3 px-2 py-2 ".concat(snapshot.isDragging ? styles.SolidColumnDraggedActiveElement : ''), style: __assign({}, provided.draggableProps.style), children: [_jsxs("label", { htmlFor: column.key, className: 'solid-column-selector-item-main', children: [_jsx("input", { id: column.key, type: "checkbox", name: "selectedColumns", className: "solid-column-selector-checkbox", checked: formik.values.selectedColumns.some(function (item) { return item.key === column.key; }), onChange: function () {
                                                             var isChecked = formik.values.selectedColumns.some(function (item) { return item.key === column.key; });
                                                             formik.setFieldValue("selectedColumns", isChecked
                                                                 ? formik.values.selectedColumns.filter(function (item) { return item.key !== column.key; })
                                                                 : __spreadArray(__spreadArray([], formik.values.selectedColumns, true), [column], false));
-                                                        }, checked: formik.values.selectedColumns.some(function (item) { return item.key === column.key; }), className: "text-base flex align-items-center" }), _jsx("label", { htmlFor: column.key, className: "ml-2 text-base", children: column.name })] }), _jsx(DragActive, { active: snapshot.isDragging })] }))); } }, column.key)); }), provided.placeholder] }))); } }) }), _jsxs("div", { className: "p-3 flex gap-2", children: [_jsx(Button, { type: 'submit', label: "Apply", size: "small" }), _jsx(Button, { type: 'button', outlined: true, label: "Cancel", size: "small", 
-                            // @ts-ignore
-                            onClick: function (e) { return customizeLayout.current.hide(e); } })] })] }) }));
+                                                        } }), _jsx("span", { className: "solid-column-selector-label", children: column.name })] }), _jsx(DragActive, { active: snapshot.isDragging })] }))); } }, column.key)); }), provided.placeholder] }))); } }) }), _jsxs("div", { className: "solid-column-selector-actions", children: [_jsx("button", { type: 'submit', className: "solid-compact-action-button solid-compact-action-button-primary", children: "Apply" }), _jsx("button", { type: 'button', className: "solid-compact-action-button", onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); }, children: "Cancel" })] })] }) }));
 };
 var DragActive = function (_a) {
     var active = _a.active;