@deenruv/admin-dashboard 1.0.0

package/dist/pages/extensions/Extensions.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, PageBlock, Switch, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, usePluginStore, } from '@deenruv/react-ui-devkit';
+import { BarChart3, Box, Check, ChevronDown, Code2, Cog, Download, FileCode, Filter, Grid3X3, Info, LayoutDashboard, List, MessageSquare, Puzzle, RefreshCw, Search, Settings, Table, X, } from 'lucide-react';
+import { Separator } from '@radix-ui/react-dropdown-menu';
+const getCategoryIcon = (category) => {
+    switch (category) {
+        case 'visualization':
+            return _jsx(BarChart3, { className: "size-4" });
+        case 'forms':
+            return _jsx(FileCode, { className: "size-4" });
+        case 'security':
+            return _jsx(Cog, { className: "size-4" });
+        case 'integration':
+            return _jsx(RefreshCw, { className: "size-4" });
+        case 'ui':
+            return _jsx(Puzzle, { className: "size-4" });
+        case 'data':
+            return _jsx(Table, { className: "size-4" });
+        case 'communication':
+            return _jsx(MessageSquare, { className: "size-4" });
+        default:
+            return _jsx(Box, { className: "size-4" });
+    }
+};
+const getStatusBadge = (status) => {
+    switch (status) {
+        case 'active':
+            return _jsx(Badge, { className: "bg-green-500 hover:bg-green-600", children: "Active" });
+        case 'inactive':
+            return (_jsx(Badge, { variant: "outline", className: "text-muted-foreground", children: "Inactive" }));
+        default:
+            return _jsx(Badge, { variant: "outline", children: "Unknown" });
+    }
+};
+export const Extensions = () => {
+    const { plugins: _plugins, changePluginStatus } = usePluginStore();
+    const [searchTerm, setSearchTerm] = useState('');
+    const [categoryFilter, setCategoryFilter] = useState('all');
+    const [statusFilter, setStatusFilter] = useState('all');
+    const [view, setView] = useState('grid');
+    const plugins = useMemo(() => _plugins.map((plugin) => ({
+        ...plugin,
+        description: 'No description provided',
+        category: 'unknown',
+        author: 'Unknown',
+    })), [_plugins]);
+    const filteredPlugins = plugins.filter((plugin) => {
+        const matchesSearch = plugin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            plugin.description.toLowerCase().includes(searchTerm.toLowerCase());
+        const matchesCategory = categoryFilter === 'all' || plugin.category === categoryFilter;
+        const matchesStatus = statusFilter === 'all' || plugin.status === statusFilter;
+        return matchesSearch && matchesCategory && matchesStatus;
+    });
+    const totalPlugins = plugins.length;
+    const activePlugins = plugins.filter((p) => p).length;
+    const totalWidgets = plugins.reduce((sum, plugin) => sum + (plugin.widgets?.length || 0), 0);
+    const totalComponents = plugins.reduce((sum, plugin) => sum + (plugin.components?.length || 0), 0);
+    const categories = ['all', ...new Set(plugins.map((p) => p.category))];
+    return (_jsx(PageBlock, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex flex-col gap-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Extensions Dashboard" }), _jsx("p", { className: "text-muted-foreground mt-1", children: "Manage and monitor your installed plugins" })] }), _jsxs(Button, { children: [_jsx(Download, { className: "mr-2 size-4" }), "Install New Extension"] })] }) }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [_jsx(CardTitle, { className: "text-sm font-medium", children: "Total Extensions" }), _jsx(Puzzle, { className: "text-muted-foreground size-4" })] }), _jsxs(CardContent, { children: [_jsx("div", { className: "text-2xl font-bold", children: totalPlugins }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [activePlugins, " active, ", totalPlugins - activePlugins, " inactive"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [_jsx(CardTitle, { className: "text-sm font-medium", children: "Total Widgets" }), _jsx(Grid3X3, { className: "text-muted-foreground size-4" })] }), _jsxs(CardContent, { children: [_jsx("div", { className: "text-2xl font-bold", children: totalWidgets }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Across ", plugins.filter((p) => (p.widgets?.length || 0) > 0).length, " extensions"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [_jsx(CardTitle, { className: "text-sm font-medium", children: "Total Components" }), _jsx(Code2, { className: "text-muted-foreground size-4" })] }), _jsxs(CardContent, { children: [_jsx("div", { className: "text-2xl font-bold", children: totalComponents }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Across ", plugins.filter((p) => (p.components?.length || 0) > 0).length, " extensions"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [_jsx(CardTitle, { className: "text-sm font-medium", children: "Categories" }), _jsx(LayoutDashboard, { className: "text-muted-foreground size-4" })] }), _jsxs(CardContent, { children: [_jsx("div", { className: "text-2xl font-bold", children: categories.length - 1 }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Different extension types" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex flex-1 items-center space-x-2", children: [_jsx(Input, { placeholder: "Search extensions...", className: "max-w-sm", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), startAdornment: _jsx(Search, { className: "text-muted-foreground size-4" }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "ml-auto", children: [_jsx(Filter, { className: "mr-2 size-4" }), "Filter", _jsx(ChevronDown, { className: "ml-2 size-4" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-[200px]", children: [_jsx(DropdownMenuLabel, { children: "Filter by Category" }), _jsx(DropdownMenuSeparator, {}), categories.map((category) => (_jsxs(DropdownMenuItem, { onClick: () => setCategoryFilter(category), className: "flex items-center justify-between", children: [_jsx("span", { className: "capitalize", children: category === 'all' ? 'All Categories' : category }), categoryFilter === category && _jsx(Check, { className: "size-4" })] }, category))), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Filter by Status" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => setStatusFilter('all'), className: "flex items-center justify-between", children: ["All Statuses", statusFilter === 'all' && _jsx(Check, { className: "size-4" })] }), _jsxs(DropdownMenuItem, { onClick: () => setStatusFilter('active'), className: "flex items-center justify-between", children: ["Active", statusFilter === 'active' && _jsx(Check, { className: "size-4" })] }), _jsxs(DropdownMenuItem, { onClick: () => setStatusFilter('inactive'), className: "flex items-center justify-between", children: ["Inactive", statusFilter === 'inactive' && _jsx(Check, { className: "size-4" })] }), _jsxs(DropdownMenuItem, { onClick: () => setStatusFilter('beta'), className: "flex items-center justify-between", children: ["Beta", statusFilter === 'beta' && _jsx(Check, { className: "size-4" })] })] })] })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Button, { variant: view === 'grid' ? 'default' : 'outline', size: "icon", onClick: () => setView('grid'), className: "size-8", children: _jsx(Grid3X3, { className: "size-4" }) }), _jsx(Button, { variant: view === 'list' ? 'default' : 'outline', size: "icon", onClick: () => setView('list'), className: "size-8", children: _jsx(List, { className: "size-4" }) })] })] }), (categoryFilter !== 'all' || statusFilter !== 'all' || searchTerm) && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [categoryFilter !== 'all' && (_jsxs(Badge, { variant: "secondary", className: "flex items-center gap-1", children: ["Category: ", _jsx("span", { className: "capitalize", children: categoryFilter }), _jsx(Button, { variant: "ghost", size: "icon", className: "ml-1 size-4 p-0", onClick: () => setCategoryFilter('all'), children: _jsx(X, { className: "size-3" }) })] })), statusFilter !== 'all' && (_jsxs(Badge, { variant: "secondary", className: "flex items-center gap-1", children: ["Status: ", _jsx("span", { className: "capitalize", children: statusFilter }), _jsx(Button, { variant: "ghost", size: "icon", className: "ml-1 size-4 p-0", onClick: () => setStatusFilter('all'), children: _jsx(X, { className: "size-3" }) })] })), searchTerm && (_jsxs(Badge, { variant: "secondary", className: "flex items-center gap-1", children: ["Search: ", searchTerm, _jsx(Button, { variant: "ghost", size: "icon", className: "ml-1 size-4 p-0", onClick: () => setSearchTerm(''), children: _jsx(X, { className: "size-3" }) })] })), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: () => {
+                                setCategoryFilter('all');
+                                setStatusFilter('all');
+                                setSearchTerm('');
+                            }, children: "Clear all" })] })), filteredPlugins.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center", children: [_jsx(Info, { className: "text-muted-foreground size-10" }), _jsx("h3", { className: "mt-4 text-lg font-semibold", children: "No extensions found" }), _jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: "Try adjusting your search or filter criteria" }), _jsx(Button, { variant: "outline", className: "mt-4", onClick: () => {
+                                setCategoryFilter('all');
+                                setStatusFilter('all');
+                                setSearchTerm('');
+                            }, children: "Reset filters" })] })) : view === 'grid' ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredPlugins.map((plugin) => (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "bg-primary/10 rounded-md p-2", children: getCategoryIcon(plugin.category) }), _jsx(CardTitle, { className: "text-lg", children: plugin.name })] }), getStatusBadge(plugin.status)] }), _jsx(CardDescription, { className: "mt-2", children: plugin.description })] }), _jsxs(CardContent, { className: "pb-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Version:" }), _jsx("span", { children: plugin.version })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Author:" }), _jsx("span", { children: plugin.author })] })] }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "grid grid-cols-4 gap-2 text-center text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tables?.length }), _jsx("div", { className: "text-muted-foreground text-xs", children: "Tables" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tabs?.length }), _jsx("div", { className: "text-muted-foreground text-xs", children: "Tabs" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.components?.length }), _jsx("div", { className: "text-muted-foreground text-xs", children: "Components" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.widgets?.length }), _jsx("div", { className: "text-muted-foreground text-xs", children: "Widgets" })] })] })] }), _jsxs(CardFooter, { className: "flex justify-between pt-2", children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Info, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "View details" })] }) }), _jsx("div", { className: "flex gap-2", children: _jsxs(Switch, { checked: plugin.status === 'active', onCheckedChange: (checked) => {
+                                                changePluginStatus(plugin.name, checked ? 'active' : 'inactive');
+                                            }, className: "h-6 w-11", children: [_jsx("span", { className: "sr-only", children: "Toggle plugin status" }), _jsx("span", { className: "bg-primary absolute left-0 top-0 size-6 rounded-full transition-transform duration-200 ease-in-out" })] }) })] })] }, plugin.name))) })) : (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "grid grid-cols-12 gap-4 p-4 font-medium", children: [_jsx("div", { className: "col-span-4", children: "Name" }), _jsx("div", { className: "col-span-3", children: "Author" }), _jsx("div", { className: "col-span-1 text-center", children: "Version" }), _jsx("div", { className: "col-span-1 text-center", children: "Status" }), _jsx("div", { className: "col-span-3 text-right", children: "Actions" })] }), _jsx(Separator, {}), filteredPlugins.map((plugin, index) => (_jsxs("div", { children: [_jsxs("div", { className: "grid grid-cols-12 items-center gap-4 p-4", children: [_jsx("div", { className: "col-span-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary/10 rounded-md p-2", children: getCategoryIcon(plugin.category) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.name }), _jsx("div", { className: "text-muted-foreground text-xs", children: plugin.description })] })] }) }), _jsx("div", { className: "col-span-3", children: plugin.author }), _jsx("div", { className: "col-span-1 text-center", children: plugin.version }), _jsx("div", { className: "col-span-1 text-center", children: getStatusBadge(plugin.status) }), _jsxs("div", { className: "col-span-3 flex justify-end gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Settings, { className: "mr-2 size-3" }), "Configure"] }), _jsxs(Switch, { checked: plugin.status === 'active', onCheckedChange: (checked) => {
+                                                        changePluginStatus(plugin.name, checked ? 'active' : 'inactive');
+                                                    }, className: "h-6 w-11", children: [_jsx("span", { className: "sr-only", children: "Toggle plugin status" }), _jsx("span", { className: "bg-primary absolute left-0 top-0 size-6 rounded-full transition-transform duration-200 ease-in-out" })] })] })] }), index < filteredPlugins.length - 1 && _jsx(Separator, {})] }, plugin.name)))] }))] }) }));
+};

package/dist/pages/extensions/index.js

@@ -0,0 +1 @@
+export * from './Extensions.js';

package/dist/pages/facets/Detail.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation, useTranslation, } from '@deenruv/react-ui-devkit';
+import { FacetsDetailView } from "./_components/FacetDetailView.js";
+import { useCallback } from 'react';
+const CreateFacetMutation = getMutation('createFacet');
+const EditFacetMutation = getMutation('updateFacet');
+const DeleteFacetMutation = getMutation('deleteFacet');
+export const FacetsDetailPage = () => {
+    const { id } = useParams();
+    const { t } = useTranslation(['common', 'facets']);
+    const [update] = useMutation(EditFacetMutation);
+    const [create] = useMutation(CreateFacetMutation);
+    const [remove] = useMutation(DeleteFacetMutation);
+    const { stringValidator, translationsValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.code?.validatedValue) {
+            throw new Error('Code is required.');
+        }
+        const inputData = {
+            code: data.code.validatedValue,
+            isPrivate: data.isPrivate?.value || data.isPrivate?.initialValue,
+            translations: data.translations?.validatedValue,
+            values: data.values?.validatedValue,
+            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+        };
+        if (id) {
+            return update({ input: { id, ...inputData } });
+        }
+        else {
+            return create({ input: inputData });
+        }
+    }, [id, update, create]);
+    const onDeleteHandler = useCallback(() => {
+        if (!id) {
+            throw new Error('Could not find the id.');
+        }
+        return remove({ input: { id } });
+    }, [remove, id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "facets-detail-view", main: {
+                name: 'facet',
+                label: 'Facet',
+                component: _jsx(FacetsDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateFacetInput',
+                    keys: ['code', 'translations', 'isPrivate'],
+                    config: {
+                        code: stringValidator(t('facets:requiredError')),
+                        translations: translationsValidator,
+                        isPrivate: { initialValue: false },
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            } }) }));
+};

package/dist/pages/facets/List.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { Routes, apiClient, DetailList, deepMerge, ListBadge, TableLabel, ListLocations, useTranslation, EntityChannelManagementBulkAction, } from '@deenruv/react-ui-devkit';
+const tableId = 'facets-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        facets: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response.facets;
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteFacets } = await apiClient('mutation')({
+            deleteFacets: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteFacets.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const FacetsListPage = () => {
+    const { t } = useTranslation('facets');
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'name', operator: 'StringOperators' },
+            { key: 'code', operator: 'StringOperators' },
+            { key: 'isPrivate', operator: 'BooleanOperators' },
+        ], detailLinkColumn: "code", searchFields: ['name', 'code'], hideColumns: ['customFields', 'translations'], entityName: 'Facet', additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], additionalColumns: [
+            {
+                accessorKey: 'isPrivate',
+                header: () => _jsx(TableLabel, { children: t('table.isPrivate') }),
+                cell: ({ row }) => row.original.isPrivate ? (_jsx(ListBadge, { className: "flex items-center justify-center border-orange-200 bg-orange-200 text-orange-800", children: t('visibility.private') })) : (_jsx(ListBadge, { className: "flex items-center justify-center border-green-200 bg-green-200 text-green-800", children: t('visibility.public') })),
+            },
+        ], route: Routes['facets'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateFacet], deletePermissions: [Permission.DeleteFacet] }));
+};

package/dist/pages/facets/_components/AddFacetValueDialog.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogHeader, DialogTitle, DialogTrigger, Input, Dialog, DialogContent, Label, DialogFooter, apiClient, useSettings, useGFFLP, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
+export const AddFacetValueDialog = ({ facetId, onFacetValueChange, open, setOpen, facetValueId, }) => {
+    const editMode = useMemo(() => !!facetValueId, [facetValueId]);
+    const { t } = useTranslation('facets');
+    const { translationsLanguage: languageCode } = useSettings(({ translationsLanguage }) => ({ translationsLanguage }));
+    const { state, setField } = useGFFLP('FacetValue', 'name', 'code', 'customFields')({
+        name: {
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('requiredError')];
+            },
+        },
+        code: {
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('requiredError')];
+            },
+        },
+    });
+    const fetchFacetValue = useCallback(() => facetValueId &&
+        apiClient('query')({
+            facetValues: [
+                { options: { filter: { id: { eq: facetValueId } } } },
+                { items: { code: true, translations: { languageCode: true, name: true } } },
+            ],
+        }).then((resp) => {
+            setField('code', resp.facetValues.items[0].code);
+            setField('name', resp.facetValues.items[0].translations.find((t) => t.languageCode === languageCode)?.name || '');
+            if ('customFields' in resp.facetValues.items[0])
+                setField('customFields', resp.facetValues.items[0].customFields);
+        }), [facetValueId, t, languageCode]);
+    useEffect(() => {
+        fetchFacetValue();
+    }, [fetchFacetValue, facetValueId]);
+    useEffect(() => {
+        if (editMode || !state.name?.value)
+            return;
+        const facetCode = state.name?.value.toLowerCase().replace(/\s+/g, '-');
+        if (facetCode)
+            setField('code', facetCode);
+    }, [state, editMode, setField]);
+    useEffect(() => {
+        console.log('ST', state);
+    }, [state]);
+    const resetValues = useCallback(() => {
+        onFacetValueChange();
+        setOpen(false);
+        setField('name', '');
+        setField('code', '');
+    }, [onFacetValueChange, setField]);
+    const saveFacetValue = useCallback(() => apiClient('mutation')({
+        createFacetValues: [
+            {
+                input: [
+                    {
+                        facetId,
+                        code: state.code.value,
+                        translations: [{ languageCode, name: state.name?.value }],
+                        ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                    },
+                ],
+            },
+            { id: true },
+        ],
+    })
+        .then(() => {
+        toast.message(t('addValueModal.success'));
+        resetValues();
+    })
+        .catch((err) => toast.message(t('addValueModal.error') + ': ' + err)), [state, languageCode, facetId, resetValues, t]);
+    const updateFacetValue = useCallback(() => {
+        if (!facetValueId)
+            return;
+        apiClient('mutation')({
+            updateFacetValues: [
+                {
+                    input: [
+                        {
+                            id: facetValueId,
+                            code: state.code.value,
+                            translations: [{ languageCode, name: state.name?.value }],
+                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                        },
+                    ],
+                },
+                { id: true },
+            ],
+        })
+            .then(() => {
+            toast.message(t('addValueModal.editSuccess'));
+            resetValues();
+        })
+            .catch((err) => toast.message(t('addValueModal.error') + ': ' + err));
+    }, [state, languageCode, facetId, resetValues, t]);
+    return (_jsxs(Dialog, { open: open, onOpenChange: resetValues, children: [_jsx(DialogTrigger, { children: _jsx(Button, { onClick: () => {
+                        setOpen(true);
+                    }, children: "Create" }) }), _jsxs(DialogContent, { className: "sm:max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editMode ? t('addValueModal.editTitle') : t('addValueModal.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: t('addValueModal.nameLabel') }), _jsx(Input, { className: "mt-1", value: state.name?.value, onChange: (e) => setField('name', e.target.value) })] }), _jsxs("div", { children: [_jsx(Label, { children: t('addValueModal.codeLabel') }), _jsx(Input, { className: "mt-1", value: state.code?.value, onChange: (e) => setField('code', e.target.value) })] }), _jsx(EntityCustomFields, { entityName: "facetValue", id: facetValueId, hideButton: true, initialValues: state && 'customFields' in state
+                                    ? { customFields: state.customFields?.validatedValue }
+                                    : { customFields: {} }, onChange: (cf) => {
+                                    setField('customFields', cf);
+                                }, additionalData: {} })] }), _jsx(DialogFooter, { className: "mt-2", children: _jsx(Button, { onClick: editMode ? updateFacetValue : saveFacetValue, children: editMode ? t('addValueModal.editButton') : t('addValueModal.button') }) })] })] }));
+};

package/dist/pages/facets/_components/ColorSample.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@deenruv/react-ui-devkit';
+import { CircleOff } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import pkg from 'react-color';
+const { CirclePicker } = pkg;
+export const ColorSample = ({ color, setColor, small }) => {
+    const [openColorPicker, setOpenColorPicker] = useState(false);
+    const handleColorPicked = useCallback((e) => {
+        if (e) {
+            setColor?.(e.hex);
+        }
+        else
+            setColor?.(undefined);
+        setOpenColorPicker(false);
+    }, [setColor]);
+    return (_jsxs("div", { children: [!color || color === '---' ? (_jsx(CircleOff, { ...(setColor && { onClick: () => setOpenColorPicker(true) }), size: small ? 18 : 28 })) : (_jsx("div", { className: cn('border-gray h-6 w-6 rounded-full border border-solid', small && 'h-[18px] w-[18px]'), style: { backgroundColor: color }, ...(setColor && { onClick: () => setOpenColorPicker(true) }) })), openColorPicker && (_jsxs("div", { className: "absolute mt-2 rounded bg-white p-2 shadow dark:bg-gray-900", children: [_jsxs("div", { className: "mb-3 flex cursor-pointer gap-3", onClick: () => handleColorPicked(undefined), children: [_jsx(CircleOff, { size: small ? 24 : 28 }), " No color"] }), _jsx(CirclePicker, { color: color, onChangeComplete: handleColorPicked })] }))] }));
+};

package/dist/pages/facets/_components/FacetDetailView.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Input, Label, Switch, apiClient, DetailList, deepMerge, useDetailView, useSettings, setInArrayBy, DetailViewMarker, CustomCard, CardIcons, ListLocations, EntityCustomFields, useTranslation, EntityChannelManagementBulkAction, } from '@deenruv/react-ui-devkit';
+import { AddFacetValueDialog } from './AddFacetValueDialog.js';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'facet-values-list';
+const { selector } = ListLocations[tableId];
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteFacetValues } = await apiClient('mutation')({
+            deleteFacetValues: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteFacetValues.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+const STOCK_LOCATION_FORM_KEYS = [
+    'CreateFacetInput',
+    'translations',
+    'values',
+    'code',
+    'isPrivate',
+    'customFields',
+];
+export const FacetsDetailView = () => {
+    const { form, fetchEntity, entity, additionalData, setAdditionalData, id } = useDetailView('facets-detail-view', ...STOCK_LOCATION_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    const editMode = useMemo(() => !!id, [id]);
+    const { t } = useTranslation(['common', 'facets']);
+    const [facetValueIdInModal, setFacetValueIdInModal] = useState(null);
+    const [open, setOpen] = useState(false);
+    const { translationsLanguage: currentTranslationLng } = useSettings();
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
+    const setTranslationField = useCallback((field, e) => {
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+            [field]: e,
+            languageCode: currentTranslationLng,
+        }));
+    }, [currentTranslationLng, translations]);
+    const fetchFacetValues = useCallback(async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+        // if (!id) return Promise.resolve([]);
+        const response = await apiClient('query')({
+            ['facetValues']: [
+                {
+                    options: {
+                        take: perPage,
+                        skip: (page - 1) * perPage,
+                        filterOperator: filterOperator,
+                        sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                        ...(filter && { filter: { ...filter, facetId: { eq: id } } }),
+                    },
+                },
+                { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+            ],
+        });
+        return response['facetValues'];
+    }, [id]);
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('translations', res.translations);
+            setField('code', res.code);
+            setField('isPrivate', res.isPrivate);
+            if ('customFields' in res)
+                setField('customFields', res.customFields);
+        })();
+    }, []);
+    useEffect(() => {
+        if (!editMode && currentTranslationValue?.name) {
+            setField('code', currentTranslationValue.name.toLowerCase().replace(/\s+/g, '-'));
+        }
+    }, [currentTranslationValue?.name, editMode]);
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('facets:details.basicInfo'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex gap-8 p-0 pt-2", children: [_jsx("div", { className: "basis-full md:basis-1/2 xl:basis-1/3", children: _jsx(Input, { label: t('facets:table.name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e.target.value), errors: state.translations?.errors, required: true }) }), _jsx("div", { className: "basis-full md:basis-1/2 xl:basis-1/3", children: _jsx(Input, { label: t('facets:table.code'), value: state.code?.value, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) }), _jsxs("div", { className: "basis-full md:basis-1/2 xl:basis-1/3", children: [_jsx(Label, { children: t('facets:table.isPrivate') }), _jsxs("div", { className: "mt-2 flex gap-3", children: [_jsx(Switch, { checked: state.isPrivate?.value, onCheckedChange: (e) => setField('isPrivate', e) }), _jsx("p", { children: state.isPrivate?.value ? t('facets:table.isPrivate') : t('facets:table.public') })] })] })] }) }), _jsx(DetailViewMarker, { position: 'facets-detail-view' }), _jsx(EntityCustomFields, { entityName: "facet", id: id, hideButton: true, onChange: (customFields, translations) => {
+                        setField('customFields', customFields);
+                        if (translations)
+                            setField('translations', translations);
+                    }, initialValues: entity && 'customFields' in entity
+                        ? { customFields: entity.customFields, translations: entity.translations }
+                        : { customFields: {} } }), entity && editMode && (_jsx(CustomCard, { title: t('facets:details.facetValues'), icon: _jsx(CardIcons.tag, {}), color: "teal", upperRight: _jsx(AddFacetValueDialog, { open: open, setOpen: setOpen, facetId: entity.id, facetValueId: facetValueIdInModal, onFacetValueChange: () => {
+                            setAdditionalData({ ...additionalData, refetchList: true });
+                            setFacetValueIdInModal(null);
+                        } }), children: _jsx(DetailList, { entityName: "FacetValue", hideColumns: ['customFields', 'createdAt', 'updatedAt'], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], fetch: fetchFacetValues, onRemove: onRemove, route: {
+                            edit: (id) => {
+                                setFacetValueIdInModal(id);
+                                setOpen(true);
+                            },
+                            create: () => {
+                                setFacetValueIdInModal(null);
+                                setOpen(true);
+                            },
+                        }, searchFields: ['name'], tableId: tableId, noPaddings: true, createPermissions: [Permission.CreateFacet], deletePermissions: [Permission.DeleteFacet] }) }))] }) }));
+};

package/dist/pages/facets/index.js

@@ -0,0 +1,2 @@
+export * from './List.js';
+export * from './Detail.js';

package/dist/pages/global-settings/GlobalSettingsComponent.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageCode } from '@deenruv/admin-types';
+import { Switch, MultipleSelector, Input, useDetailView, useSettings, CustomCard, CardIcons, EntityCustomFields, } from '@deenruv/react-ui-devkit';
+import { t } from 'i18next';
+import { useEffect, useMemo } from 'react';
+export const GlobalSettingsComponent = () => {
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { form, fetchEntity, entity } = useDetailView('globalSettings-detail-view', 'UpdateGlobalSettingsInput', 'availableLanguages', 'outOfStockThreshold', 'trackInventory', 'customFields');
+    const { base: { state, setField }, } = form;
+    const options = useMemo(() => Object.values(LanguageCode).map((el) => ({ label: `${t(`languageCode.${el}`)} (${el})`, value: el })), [t]);
+    useEffect(() => {
+        const init = async () => {
+            const data = await fetchEntity();
+            if (data) {
+                setField('availableLanguages', data.availableLanguages);
+                setField('outOfStockThreshold', data.outOfStockThreshold);
+                setField('trackInventory', data.trackInventory);
+                if ('customFields' in data)
+                    setField('customFields', data.customFields);
+            }
+        };
+        init();
+    }, [contentLng]);
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4", children: [_jsx(CustomCard, { title: t('globalSettings:available-languages.label'), description: t('globalSettings:available-languages.description'), icon: _jsx(CardIcons.options, {}), color: "green", children: _jsx(MultipleSelector, { options: options, value: state.availableLanguages?.value?.map((el) => ({
+                        label: t(`languageCode.${el}`),
+                        value: el,
+                    })), placeholder: t('globalSettings:available-languages.placeholder'), onChange: (val) => setField('availableLanguages', val.map((el) => el.value)) }) }), _jsx(CustomCard, { title: t('globalSettings:stock-threshold.label'), description: t('globalSettings:stock-threshold.description'), icon: _jsx(CardIcons.options, {}), color: "teal", children: _jsx(Input, { value: state.outOfStockThreshold?.value ?? undefined, type: "number", onChange: (e) => setField('outOfStockThreshold', Number(e.target.value)), required: true }) }), _jsx(CustomCard, { title: t('globalSettings:track-inventory.label'), description: t('globalSettings:track-inventory.description'), icon: _jsx(CardIcons.options, {}), color: "cyan", children: _jsx(Switch, { checked: state.trackInventory?.value ?? undefined, onCheckedChange: (val) => setField('trackInventory', val) }) }), _jsx(EntityCustomFields, { id: entity?.id, entityName: "globalSettings", hideButton: true, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} }, onChange: (cf) => {
+                    setField('customFields', cf);
+                }, additionalData: {} })] }));
+};

package/dist/pages/global-settings/index.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $, Permission, scalars, typedGql } from '@deenruv/admin-types';
+import { useTranslation, createDeenruvForm, DetailView, useMutation, useSettings } from '@deenruv/react-ui-devkit';
+import { toast } from 'sonner';
+import { GlobalSettingsComponent } from './GlobalSettingsComponent.js';
+const GlobalSettingsMutation = typedGql('mutation', { scalars })({
+    updateGlobalSettings: [
+        { input: $('input', 'UpdateGlobalSettingsInput!') },
+        {
+            __typename: true,
+            '...on GlobalSettings': {
+                availableLanguages: true,
+                outOfStockThreshold: true,
+                trackInventory: true,
+            },
+            '...on ChannelDefaultLanguageError': {
+                message: true,
+            },
+        },
+    ],
+});
+export const GlobalSettings = () => {
+    const { t } = useTranslation(['common', 'globalSettings']);
+    const [update] = useMutation(GlobalSettingsMutation);
+    const setAvailableLanguages = useSettings((p) => p.setAvailableLanguages);
+    return (_jsx(DetailView, { id: null, locationId: "globalSettings-detail-view", topActions: { texts: { submitButton: t('common:save') } }, permissions: {
+            create: Permission.UpdateGlobalSettings,
+            delete: Permission.UpdateGlobalSettings,
+            edit: Permission.UpdateGlobalSettings,
+        }, main: {
+            component: _jsx(GlobalSettingsComponent, {}),
+            name: t('globalSettings:title'),
+            label: t('globalSettings:title'),
+            form: createDeenruvForm({
+                key: 'UpdateGlobalSettingsInput',
+                keys: ['availableLanguages', 'outOfStockThreshold', 'trackInventory'],
+                config: {
+                    availableLanguages: {
+                        validate: (value) => { },
+                    },
+                    outOfStockThreshold: {
+                        validate: (value) => { },
+                    },
+                    trackInventory: {
+                        validate: (value) => { },
+                    },
+                },
+                onSubmitted: async (state) => {
+                    const res = await update({
+                        input: {
+                            availableLanguages: state.availableLanguages?.value,
+                            outOfStockThreshold: state.outOfStockThreshold?.value,
+                            trackInventory: state.trackInventory?.value,
+                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                        },
+                    });
+                    if (res.updateGlobalSettings.__typename === 'GlobalSettings') {
+                        setAvailableLanguages(res?.updateGlobalSettings.availableLanguages || []);
+                        toast.success(t('common:toasts.success.update'));
+                        return res.updateGlobalSettings;
+                    }
+                    if (res.updateGlobalSettings.__typename === 'ChannelDefaultLanguageError') {
+                        toast.error(res.updateGlobalSettings.message);
+                        return state;
+                    }
+                    toast.error(t('common:toasts.error.mutation'));
+                    return state;
+                },
+            }),
+        } }));
+};

package/dist/pages/index.js

@@ -0,0 +1,25 @@
+export * from './products/index.js';
+export * from './collections/index.js';
+export * from './admins/index.js';
+export * from './facets/index.js';
+export * from './zones/index.js';
+export * from './tax-categories/index.js';
+export * from './tax-rates/index.js';
+export * from './stock-locations/index.js';
+export * from './shipping-methods/index.js';
+export * from './sellers/index.js';
+export * from './roles/index.js';
+export * from './promotions/index.js';
+export * from './payment-methods/index.js';
+export * from './orders/index.js';
+export * from './dashboard/index.js';
+export * from './assets/index.js';
+export * from './customers/index.js';
+export * from './customer-groups/index.js';
+export * from './channels/index.js';
+export * from './countries/index.js';
+export * from './status/index.js';
+export * from './global-settings/index.js';
+export * from './extensions/index.js';
+export * from './product-variants/index.js';
+// NOTE: do not export Custom404, LoginScreen and Root from here

package/dist/pages/orders/Detail.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { OrderSummary, RealizationCard, CustomerSelectCard, AddressCard, ShippingMethod, TaxSummary, OrderHistory, ProductsCard, TopActions, Payments, SurchargeCard, } from "./_components";
+import { useTranslation, useOrder, ORDER_STATE, EntityCustomFields, LoadingMask, DetailViewMarker, } from '@deenruv/react-ui-devkit';
+import { PromotionsList } from "./_components/PromotionsList.js";
+export const OrdersDetailPage = () => {
+    const { id } = useParams();
+    const { t } = useTranslation('orders');
+    const { order, mode, fetchOrder, loading } = useOrder();
+    useEffect(() => {
+        if (id)
+            fetchOrder(id);
+    }, [id]);
+    if (loading)
+        return _jsx(LoadingMask, {});
+    if (!order || !mode) {
+        return (_jsx("div", { className: "flex min-h-[80vh] w-full items-center justify-center", children: t('toasts.orderLoadingError', { value: id }) }));
+    }
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1440px] flex-col gap-4 2xl:px-8", children: [_jsx(TopActions, {}), _jsx(OrderSummary, {}), _jsx(RealizationCard, {}), order.state !== ORDER_STATE.DRAFT && _jsx(Payments, {}), _jsxs("div", { className: "grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: [_jsx(CustomerSelectCard, {}), _jsx(AddressCard, { type: "billing" }), _jsx(AddressCard, { type: "shipping" }), _jsx(ShippingMethod, {})] }), _jsx(ProductsCard, {}), _jsx(TaxSummary, {}), _jsx(EntityCustomFields, { entityName: "order", id: id }), mode === 'update' && _jsx(SurchargeCard, {}), order.state !== ORDER_STATE.DRAFT && _jsx(PromotionsList, {}), _jsx(DetailViewMarker, { position: "order-detail-view" }), order.state !== ORDER_STATE.DRAFT && _jsx(OrderHistory, {})] }) }));
+};