@deenruv/admin-dashboard 1.0.0

package/dist/pages/status/_components/FilterToolbar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JobState } from '@deenruv/admin-types';
+import { useTranslation, Checkbox, SimpleSelect, useServer } from '@deenruv/react-ui-devkit';
+export const FilterToolbar = ({ Search, stateFilter, setStateFilter, jobQueueFilter, setJobQueueFilter, liveUpdate, setLiveUpdate, }) => {
+    const { t } = useTranslation('system');
+    const { jobQueues } = useServer();
+    const jobStatesOptions = [
+        { label: t('jobs.allStates'), value: 'undefined' },
+        ...Object.entries(JobState).map(([key, value]) => ({
+            label: t('jobs.states.' + key.toLowerCase()),
+            value,
+            color: value === JobState.COMPLETED
+                ? 'green'
+                : value === JobState.RETRYING
+                    ? 'goldenrod'
+                    : value === JobState.FAILED
+                        ? 'firebrick'
+                        : undefined,
+        })),
+    ];
+    const jobQueuesOptions = [
+        { label: t('jobs.allNames'), value: 'undefined' },
+        ...jobQueues.map((q) => ({
+            label: q.name,
+            value: q.name,
+        })),
+    ];
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "live-update", checked: liveUpdate, onCheckedChange: setLiveUpdate }), _jsx("label", { htmlFor: "live-update", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: t('jobs.live') })] }), _jsx(SimpleSelect, { placeholder: t('jobs.allStates'), options: jobStatesOptions, value: stateFilter, onValueChange: setStateFilter, wrapperClassName: "w-[160px]", className: "h-8" }), _jsx(SimpleSelect, { placeholder: t('jobs.allNames'), options: jobQueuesOptions, value: jobQueueFilter, onValueChange: setJobQueueFilter, wrapperClassName: "w-[160px]", className: "h-8" })] }));
+};

package/dist/pages/status/_components/Health.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Badge, Button, CardIcons, cn, CustomCard, Skeleton, useServer, } from '@deenruv/react-ui-devkit';
+import { RefreshCw, AlertCircle, CheckCircle, XCircle } from 'lucide-react';
+const getStatusBadge = (status) => {
+    const statusLower = status.toLowerCase();
+    if (statusLower === 'up' || statusLower === 'ok' || statusLower === 'healthy') {
+        return (_jsxs(Badge, { variant: "outline", className: "flex select-none items-center gap-1 border-green-200 bg-green-50 text-green-700", children: [_jsx(CheckCircle, { className: "size-3.5" }), status] }));
+    }
+    else if (statusLower === 'degraded' || statusLower === 'warning') {
+        return (_jsxs(Badge, { variant: "outline", className: "flex select-none items-center gap-1 border-amber-200 bg-amber-50 text-amber-700", children: [_jsx(AlertCircle, { className: "size-3.5" }), status] }));
+    }
+    else {
+        return (_jsxs(Badge, { variant: "outline", className: "flex select-none items-center gap-1 border-red-200 bg-red-50 text-red-700", children: [_jsx(XCircle, { className: "size-3.5" }), status] }));
+    }
+};
+export const Health = () => {
+    const { t } = useTranslation('system');
+    const { data, lastUpdated, loading } = useServer((state) => state.status);
+    const fetchStatus = useServer((state) => state.fetchStatus);
+    return (_jsx(CustomCard, { title: t('health.title'), ...(lastUpdated && { description: t('health.updated') + '' + lastUpdated.toLocaleTimeString() }), color: data.status ? (data.status === 'up' ? 'green' : 'red') : 'gray', icon: _jsx(CardIcons.action, {}), upperRight: _jsxs(Button, { variant: "outline", size: "sm", onClick: fetchStatus, disabled: loading, className: "h-9", children: [_jsx(RefreshCw, { className: cn('mr-2 h-4 w-4', loading && 'animate-spin') }), loading ? t('health.refreshing') : t('health.refresh')] }), children: loading && !data.status ? (_jsxs("div", { className: "space-y-4", children: [_jsx(Skeleton, { className: "h-6 w-32" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-5 w-full" }), _jsx(Skeleton, { className: "h-5 w-full" }), _jsx(Skeleton, { className: "h-5 w-3/4" })] })] })) : data.status ? (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-base font-medium", children: t('health.status') }), getStatusBadge(data.status)] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-3 text-base font-medium", children: t('health.details') }), _jsx("div", { className: "divide-y rounded-md border", children: Object.entries(data.details).map(([key, detail], index) => (_jsxs("div", { className: cn('flex items-center justify-between px-4 py-3', index % 2 === 0 ? 'bg-muted/20' : 'bg-background'), children: [_jsx("span", { className: "text-sm font-medium", children: key }), getStatusBadge(detail.status)] }, key))) })] })] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [_jsx(AlertCircle, { className: "text-muted-foreground mb-3 size-10" }), _jsx("h3", { className: "text-lg font-medium", children: t('health.error.title') }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: t('health.error.description') }), _jsx(Button, { variant: "outline", size: "sm", onClick: fetchStatus, className: "mt-4", children: t('health.error.button') })] })) }));
+};

package/dist/pages/status/_components/JobResultPopover.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText } from 'lucide-react';
+import { useTranslation, Popover, PopoverContent, PopoverTrigger, Button } from '@deenruv/react-ui-devkit';
+export function JobResultPopover({ result }) {
+    const { t } = useTranslation('system');
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: 'sm', className: "bg-muted/50 flex h-8 items-center gap-2 rounded-full", children: [_jsx(FileText, { className: "size-4" }), _jsx("span", { children: t('jobs.table.jobResult') })] }) }), _jsx(PopoverContent, { className: "w-[220px] p-4", children: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex items-start", children: [_jsx("span", { className: "mr-1", children: "success:" }), _jsx("span", { className: result?.success ? 'font-medium text-green-600' : 'font-medium text-red-600', children: result?.success?.toString() })] }), _jsxs("div", { children: [_jsx("span", { className: "mr-1", children: "indexedItemCount:" }), _jsx("span", { className: "font-medium", children: result?.indexedItemCount })] }), _jsxs("div", { children: [_jsx("span", { className: "mr-1", children: "timeTaken:" }), _jsx("span", { className: "font-medium", children: result?.timeTaken })] })] }) })] }));
+}

package/dist/pages/status/_components/Jobs.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JsonPopup } from "./JsonPopup.js";
+import { FilterToolbar } from "./FilterToolbar.js";
+import { JobState, Selector } from '@deenruv/admin-types';
+import { apiClient, Badge, Button, CardIcons, ColumnView, CustomCard, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, formatDate, ListTable, TableLabel, useDetailListHook, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { AlertCircle, CheckCircle, Clock, MoreHorizontal, Play, RefreshCw, XCircle } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { JobResultPopover } from "./JobResultPopover.js";
+const JobSelector = Selector('Job')({
+    id: true,
+    data: true,
+    attempts: true,
+    createdAt: true,
+    duration: true,
+    error: true,
+    isSettled: true,
+    progress: true,
+    queueName: true,
+    result: true,
+    retries: true,
+    settledAt: true,
+    startedAt: true,
+    state: true,
+});
+const calculateDuration = (startedAt, settledAt) => {
+    if (!startedAt)
+        return '—';
+    const start = new Date(startedAt);
+    const end = settledAt ? new Date(settledAt) : new Date();
+    const durationMs = end.getTime() - start.getTime();
+    if (durationMs < 1000)
+        return `${durationMs}ms`;
+    if (durationMs < 60000)
+        return `${Math.floor(durationMs / 1000)}s`;
+    return `${Math.floor(durationMs / 60000)}m ${Math.floor((durationMs % 60000) / 1000)}s`;
+};
+const JobStateBadge = ({ state }) => {
+    const { t } = useTranslation('system');
+    switch (state) {
+        case JobState.PENDING:
+            return (_jsxs(Badge, { variant: "outline", className: "gap-1", children: [_jsx(Clock, { className: "size-3" }), " ", t('jobs.states.pending')] }));
+        case JobState.RUNNING:
+            return (_jsxs(Badge, { variant: "secondary", className: "gap-1", children: [_jsx(Play, { className: "size-3" }), " ", t('jobs.states.running')] }));
+        case JobState.COMPLETED:
+            return (_jsxs(Badge, { className: "gap-1 bg-green-100 text-green-800", children: [_jsx(CheckCircle, { className: "size-3" }), " ", t('jobs.states.completed')] }));
+        case JobState.RETRYING:
+            return (_jsxs(Badge, { className: "gap-1 bg-yellow-100 text-yellow-800", children: [_jsx(RefreshCw, { className: "size-3" }), " ", t('jobs.states.retrying')] }));
+        case JobState.FAILED:
+            return (_jsxs(Badge, { variant: "destructive", className: "gap-1", children: [_jsx(XCircle, { className: "size-3" }), " ", t('jobs.states.failed')] }));
+        case JobState.CANCELLED:
+            return (_jsxs(Badge, { variant: "outline", className: "gap-1 bg-gray-100 text-gray-800", children: [_jsx(AlertCircle, { className: "size-3" }), " ", t('jobs.states.cancelled')] }));
+        default:
+            return _jsx(Badge, { variant: "outline", children: state });
+    }
+};
+export const Jobs = () => {
+    const { t } = useTranslation('system');
+    const [liveUpdate, setLiveUpdate] = useState(true);
+    const [stateFilter, setStateFilter] = useState();
+    const [jobQueueFilter, setJobQueueFilter] = useState();
+    const filterObj = useMemo(() => ({
+        state: { eq: stateFilter },
+        queueName: { eq: jobQueueFilter },
+    }), [stateFilter, jobQueueFilter]);
+    const { objects, refetch, Paginate, Search } = useDetailListHook({
+        searchFields: ['queueName'],
+        fetch: async ({ page, perPage, filter, filterOperator }) => {
+            const { jobs } = await apiClient('query')({
+                jobs: [
+                    {
+                        options: {
+                            take: perPage,
+                            skip: (page - 1) * perPage,
+                            filter: { ...filter },
+                            filterOperator,
+                        },
+                    },
+                    { items: JobSelector, totalItems: true },
+                ],
+            });
+            return jobs;
+        },
+    });
+    //TODO: FIXME (PAGINATION BUG)
+    // useEffect(() => {
+    //   refetch(filterObj);
+    //   if (!liveUpdate) return () => clearInterval(0);
+    //   const interval = setInterval(() => {
+    //     refetch(filterObj);
+    //   }, 5000);
+    //   return () => clearInterval(interval);
+    // }, [filterObj, liveUpdate]);
+    const handleRemoveJob = async (jobId) => {
+        await apiClient('mutation')({ cancelJob: [{ jobId }, {}] });
+    };
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.id') }),
+            cell: ({ row }) => (_jsx("div", { className: "max-w-[120px] truncate font-mono text-xs", title: row.original.id, children: row.original.id })),
+        },
+        {
+            accessorKey: 'queueName',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.queueName') }),
+            cell: ({ row }) => _jsx("div", { className: "font-medium", children: row.original.queueName }),
+        },
+        {
+            accessorKey: 'state',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.status') }),
+            cell: ({ row }) => {
+                const state = row.original.state;
+                return _jsx(JobStateBadge, { state: state });
+            },
+        },
+        {
+            accessorKey: 'createdAt',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.created') }),
+            cell: ({ row }) => formatDate(row.original.createdAt, {
+                month: '2-digit',
+                day: '2-digit',
+                year: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+            }),
+        },
+        {
+            accessorKey: 'startedAt',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.started') }),
+            cell: ({ row }) => formatDate(row.original.startedAt || '', {
+                month: '2-digit',
+                day: '2-digit',
+                year: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+            }),
+        },
+        {
+            accessorKey: 'settledAt',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.settled') }),
+            cell: ({ row }) => formatDate(row.original.settledAt || '', {
+                month: '2-digit',
+                day: '2-digit',
+                year: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+            }),
+        },
+        {
+            accessorKey: 'jobData',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.jobData') }),
+            cell: ({ row }) => {
+                return JsonPopup({
+                    data: row.original.data,
+                });
+            },
+        },
+        {
+            accessorKey: 'duration',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.duration') }),
+            cell: ({ row }) => {
+                const duration = calculateDuration(row.original.startedAt, row.original.settledAt);
+                return _jsx("div", { children: duration });
+            },
+        },
+        {
+            accessorKey: 'jobResult',
+            header: () => _jsx(TableLabel, { children: t('jobs.table.jobResult') }),
+            cell: ({ row }) => {
+                return JobResultPopover({
+                    result: row.original.result,
+                });
+            },
+        },
+        {
+            id: 'actions',
+            cell: ({ row }) => {
+                const job = row.original;
+                return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "size-8 p-0", children: _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuItem, { onClick: () => handleRemoveJob(job.id), className: "text-red-600", children: [_jsx(XCircle, { className: "mr-2 size-4" }), t('jobs.table.removeJob')] }) })] }));
+            },
+            size: 28,
+            minSize: 28,
+            maxSize: 28,
+            meta: {
+                isFixedWidth: true,
+            },
+        },
+    ], []);
+    const table = useReactTable({
+        columns,
+        data: objects || [],
+        getRowId: (row) => row.id,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (_jsx(CustomCard, { title: t('jobs.title'), color: "orange", icon: _jsx(CardIcons.check, {}), upperRight: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FilterToolbar, { Search, setStateFilter, stateFilter, jobQueueFilter, setJobQueueFilter, liveUpdate, setLiveUpdate }), _jsx(ColumnView, { table: table, entityName: "Job" })] }), children: _jsx(ListTable, { columns, isFiltered: false, table, Paginate, tableId: 'jobs-list-view' }) }));
+};

package/dist/pages/status/_components/JsonExplorer.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '@deenruv/react-ui-devkit';
+const JsonProperty = ({ name, value, depth, isLast }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const indent = depth * 20;
+    const isExpandable = value !== null && (typeof value === 'object' || Array.isArray(value));
+    const toggleExpand = () => {
+        if (isExpandable) {
+            setIsExpanded(!isExpanded);
+        }
+    };
+    const renderValue = () => {
+        if (value === null)
+            return _jsx("span", { className: "text-gray-500", children: "null" });
+        if (typeof value === 'boolean')
+            return _jsx("span", { className: "text-blue-600", children: value.toString() });
+        if (typeof value === 'number')
+            return _jsx("span", { className: "text-green-600", children: value });
+        if (typeof value === 'string')
+            return _jsx("span", { className: "text-amber-600", children: value });
+        if (Array.isArray(value)) {
+            if (!isExpanded) {
+                return (_jsx("span", { className: "cursor-pointer text-gray-500", onClick: toggleExpand, children: '>' }));
+            }
+            return (_jsx("div", { children: value.map((item, index) => (_jsx("div", { style: { marginLeft: 20 }, children: _jsx(JsonProperty, { name: index.toString(), value: item, depth: depth + 1, isLast: index === value.length - 1 }) }, index))) }));
+        }
+        if (typeof value === 'object') {
+            if (!isExpanded) {
+                return (_jsx("span", { className: "cursor-pointer text-gray-500", onClick: toggleExpand, children: '>' }));
+            }
+            const entries = Object.entries(value);
+            return (_jsx("div", { children: entries.map(([key, val], index) => (_jsx(JsonProperty, { name: key, value: val, depth: depth + 1, isLast: index === entries.length - 1 }, key))) }));
+        }
+        return _jsx("span", { children: String(value) });
+    };
+    return (_jsx("div", { className: cn('py-0.5 font-mono text-sm', !isLast && isExpanded && isExpandable ? 'border-l border-gray-200 dark:border-gray-700' : ''), style: { paddingLeft: indent }, children: _jsxs("div", { className: "flex items-center", children: [isExpandable && (_jsx("button", { onClick: toggleExpand, className: "mr-1 rounded p-0.5 hover:bg-gray-100 dark:hover:bg-gray-800", children: isExpanded ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }) })), isExpandable && !isExpanded ? (_jsxs("div", { children: [_jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [name, ": "] }), renderValue()] })) : (_jsxs("div", { children: [_jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [name, ": "] }), renderValue()] }))] }) }));
+};
+export function JsonExplorer({ data, className }) {
+    const entries = Object.entries(data);
+    return (_jsx("div", { className: cn('overflow-auto rounded-lg bg-white p-4 dark:bg-gray-950', className), children: entries.map(([key, value], index) => (_jsx(JsonProperty, { name: key, value: value, depth: 0, isLast: index === entries.length - 1 }, key))) }));
+}

package/dist/pages/status/_components/JsonPopup.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JsonExplorer } from "./JsonExplorer.js";
+import { useTranslation, Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Button, } from '@deenruv/react-ui-devkit';
+export function JsonPopup({ data }) {
+    const { t } = useTranslation('system');
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { size: 'sm', variant: "outline", className: "h-8", children: t('jobs.table.jobData') }) }), _jsxs(DialogContent, { className: "flex max-h-[80vh] flex-col overflow-hidden sm:max-w-[600px]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('jobs.table.jobData') }) }), _jsx("div", { className: "flex-1 overflow-auto", children: _jsx(JsonExplorer, { data: data }) })] })] }));
+}

package/dist/pages/status/index.js

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

package/dist/pages/stock-locations/Detail.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useValidators, DetailView, createDeenruvForm, useMutation } from '@deenruv/react-ui-devkit';
+import { StockLocationDetailView } from './_components/StockLocationDetailView';
+import { typedGql, scalars, $, Permission } from '@deenruv/admin-types';
+import { useCallback } from 'react';
+const CreateStockLocationMutation = typedGql('mutation', { scalars })({
+    createStockLocation: [
+        {
+            input: $('input', 'CreateStockLocationInput!'),
+        },
+        { id: true },
+    ],
+});
+const EditStockLocationMutation = typedGql('mutation', { scalars })({
+    updateStockLocation: [
+        {
+            input: $('input', 'UpdateStockLocationInput!'),
+        },
+        { id: true },
+    ],
+});
+const DeleteStockLocationMutation = typedGql('mutation', { scalars })({
+    deleteStockLocation: [
+        {
+            input: $('input', 'DeleteStockLocationInput!'),
+        },
+        { message: true },
+    ],
+});
+export const StockLocationsDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditStockLocationMutation);
+    const [create] = useMutation(CreateStockLocationMutation);
+    const [remove] = useMutation(DeleteStockLocationMutation);
+    const { nameValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.name?.validatedValue) {
+            throw new Error('Name is required.');
+        }
+        const inputData = {
+            name: data.name.validatedValue,
+            description: data.description?.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: "stockLocations-detail-view", main: {
+                name: 'stockLocation',
+                label: 'Stock location',
+                component: _jsx(StockLocationDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateStockLocationInput',
+                    keys: ['description', 'name'],
+                    config: {
+                        name: nameValidator,
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            }, permissions: {
+                create: Permission.CreateStockLocation,
+                edit: Permission.UpdateStockLocation,
+                delete: Permission.DeleteStockLocation,
+            } }) }));
+};

package/dist/pages/stock-locations/List.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Routes, apiClient, DetailList, deepMerge, ListLocations, EntityChannelManagementBulkAction, } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'stockLocations-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        ['stockLocations']: [
+            {
+                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['stockLocations'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteStockLocations } = await apiClient('mutation')({
+            deleteStockLocations: [{ input: ids.map((id) => ({ id })) }, { message: true, result: true }],
+        });
+        return !!deleteStockLocations.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const StockLocationsListPage = () => (_jsx(DetailList, { filterFields: [
+        { key: 'name', operator: 'StringOperators' },
+        { key: 'description', operator: 'StringOperators' },
+    ], detailLinkColumn: "id", additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], searchFields: ['name'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'StockLocation', route: Routes['stockLocations'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateStockLocation], deletePermissions: [Permission.DeleteStockLocation] }));

package/dist/pages/stock-locations/_components/StockLocationDetailView.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Input, Label, useSettings, useDetailView, DetailViewMarker, CustomCard, CardIcons, EntityCustomFields, RichTextEditor, useTranslation, } from '@deenruv/react-ui-devkit';
+const STOCK_LOCATION_FORM_KEYS = ['CreateStockLocationInput', 'name', 'description', 'customFields'];
+export const StockLocationDetailView = () => {
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { t } = useTranslation('stockLocations');
+    const { form, entity, fetchEntity, id } = useDetailView('stockLocations-detail-view', ...STOCK_LOCATION_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('name', res.name);
+            setField('description', res['description']);
+        })();
+    }, [contentLng]);
+    return (_jsx("main", { className: "min-h-96", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Input, { label: t('details.basic.name'), value: state.name?.value, onChange: (e) => setField('name', e.target.value), errors: state.name?.errors, required: true }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: state.description?.value ?? undefined, onContentChanged: (e) => setField('description', e) })] })] }) }), _jsx(DetailViewMarker, { position: 'stockLocations-detail-view' }), _jsx(EntityCustomFields, { entityName: "stockLocation", id: id, hideButton: true, onChange: (customFields) => {
+                        setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } })] }) }));
+};

package/dist/pages/stock-locations/index.js

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

package/dist/pages/tax-categories/Detail.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useTranslation, DetailView, createDeenruvForm, useMutation } from '@deenruv/react-ui-devkit';
+import { TaxCategoryDetailView } from './_components/TaxCategoryDetailView';
+import { $, Permission, scalars, typedGql } from '@deenruv/admin-types';
+import { useCallback } from 'react';
+const CreateTaxCategoryMutation = typedGql('mutation', { scalars })({
+    createTaxCategory: [
+        {
+            input: $('input', 'CreateTaxCategoryInput!'),
+        },
+        { id: true },
+    ],
+});
+const EditTaxCategoryMutation = typedGql('mutation', { scalars })({
+    updateTaxCategory: [
+        {
+            input: $('input', 'UpdateTaxCategoryInput!'),
+        },
+        { id: true },
+    ],
+});
+const DeleteTaxCategoryMutation = typedGql('mutation', { scalars })({
+    deleteTaxCategory: [
+        {
+            id: $('id', 'ID!'),
+        },
+        { message: true, result: true },
+    ],
+});
+export const TaxCategoriesDetailPage = () => {
+    const { id } = useParams();
+    const { t } = useTranslation('taxCategories');
+    const [update] = useMutation(EditTaxCategoryMutation);
+    const [remove] = useMutation(DeleteTaxCategoryMutation);
+    const [create] = useMutation(CreateTaxCategoryMutation);
+    const onDeleteHandler = useCallback(() => {
+        if (!id) {
+            throw new Error('Could not find the id.');
+        }
+        return remove({ id });
+    }, [remove, id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "taxCategories-detail-view", main: {
+                name: 'taxCategory',
+                label: 'Tax Category',
+                component: _jsx(TaxCategoryDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateTaxCategoryInput',
+                    keys: ['isDefault', 'name', 'customFields'],
+                    config: {
+                        name: {
+                            validate: (v) => {
+                                if (!v || v === '')
+                                    return [t('validation.nameRequired')];
+                            },
+                        },
+                    },
+                    onSubmitted: (data) => {
+                        if (!data.name?.validatedValue) {
+                            throw new Error('Name is required.');
+                        }
+                        const inputData = {
+                            name: data.name.validatedValue,
+                            isDefault: data.isDefault?.validatedValue,
+                            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+                        };
+                        return id
+                            ? update({
+                                input: {
+                                    id: id,
+                                    ...inputData,
+                                },
+                            })
+                            : create({
+                                input: inputData,
+                            });
+                    },
+                    onDeleted: onDeleteHandler,
+                }),
+            }, permissions: {
+                create: Permission.CreateTaxCategory,
+                edit: Permission.UpdateTaxCategory,
+                delete: Permission.DeleteTaxCategory,
+            } }) }));
+};

package/dist/pages/tax-categories/List.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Routes, apiClient, DetailList, deepMerge, ListLocations } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'taxCategories-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        ['taxCategories']: [
+            {
+                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['taxCategories'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteTaxCategories } = await apiClient('mutation')({
+            deleteTaxCategories: [
+                { ids },
+                {
+                    message: true,
+                    result: true,
+                },
+            ],
+        });
+        return !!deleteTaxCategories.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const TaxCategoriesListPage = () => {
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'name', operator: 'StringOperators' },
+            { key: 'isDefault', operator: 'BooleanOperators' },
+        ], detailLinkColumn: "id", searchFields: ['name'], hideColumns: ['customFields', 'translations'], entityName: 'TaxCategory', route: Routes['taxCategories'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateTaxCategory], deletePermissions: [Permission.DeleteTaxCategory] }));
+};

package/dist/pages/tax-categories/_components/TaxCategoryDetailView.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDetailView, DetailViewMarker, useSettings, Input, Switch, Label, CustomCard, CardIcons, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useEffect } from 'react';
+const TAX_CATEGORY_FORM_KEYS = ['CreateTaxCategoryInput', 'name', 'isDefault', 'customFields'];
+export const TaxCategoryDetailView = () => {
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { id, form, entity, fetchEntity } = useDetailView('taxCategories-detail-view', ...TAX_CATEGORY_FORM_KEYS);
+    const { t } = useTranslation('taxCategories');
+    const { base: { setField, state }, } = form;
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('name', res.name);
+            setField('isDefault', res['isDefault']);
+        })();
+    }, [contentLng]);
+    return (_jsx("div", { children: _jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(Input, { label: t('details.basic.name'), value: state.name?.value, required: true, onChange: (e) => {
+                                        setField('name', e.target.value);
+                                    }, errors: state.name?.errors }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/2", children: [_jsx(Switch, { checked: state.isDefault?.value ?? undefined, onCheckedChange: (e) => setField('isDefault', e) }), _jsx(Label, { children: t('details.basic.isDefault') })] })] }) }), _jsx(DetailViewMarker, { position: 'taxCategories-detail-view' }), _jsx(EntityCustomFields, { entityName: "taxCategory", id: id, hideButton: true, onChange: (customFields) => {
+                        setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } })] }) }));
+};

package/dist/pages/tax-categories/index.js

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