@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_tax-categories/tax-categories.tsx

@@ -0,0 +1,69 @@
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@lingui/react/macro';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import { DeleteTaxCategoriesBulkAction } from './components/tax-category-bulk-actions.js';
+import { taxCategoryListQuery } from './tax-categories.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
+    component: TaxCategoryListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Tax Categories</Trans> }),
+});
+
+function TaxCategoryListPage() {
+    return (
+        <ListPage
+            pageId="tax-category-list"
+            listQuery={taxCategoryListQuery}
+            route={Route}
+            title={<Trans>Tax Categories</Trans>}
+            defaultVisibility={{
+                name: true,
+                isDefault: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                if (searchTerm === '') {
+                    return {};
+                }
+
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            customizeColumns={{
+                name: {
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                isDefault: {
+                    cell: ({ row }) => (
+                        <Badge variant={row.original.isDefault ? 'success' : 'destructive'}>
+                            <Trans>{row.original.isDefault ? 'Yes' : 'No'}</Trans>
+                        </Badge>
+                    ),
+                },
+            }}
+            bulkActions={[
+                {
+                    component: DeleteTaxCategoriesBulkAction,
+                    order: 500,
+                },
+            ]}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateTaxCategory']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            <Trans>New Tax Category</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -0,0 +1,127 @@
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    createTaxCategoryDocument,
+    taxCategoryDetailDocument,
+    updateTaxCategoryDocument,
+} from './tax-categories.graphql.js';
+
+const pageId = 'tax-category-detail';
+
+export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories_/$id')({
+    component: TaxCategoryDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: taxCategoryDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/tax-categories', label: <Trans>Tax Categories</Trans> },
+                isNew ? <Trans>New tax category</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function TaxCategoryDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { t } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: taxCategoryDetailDocument,
+        createDocument: createTaxCategoryDocument,
+        updateDocument: updateTaxCategoryDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                isDefault: entity.isDefault,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(
+                creatingNewEntity
+                    ? t`Successfully created tax category`
+                    : t`Successfully updated tax category`,
+            );
+            form.reset(form.getValues());
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(
+                creatingNewEntity ? t`Failed to create tax category` : t`Failed to update tax category`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateTaxCategory']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="isDefault"
+                            label={<Trans>Is default tax category</Trans>}
+                            render={({ field }) => (
+                                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="TaxCategory" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_tax-rates/components/tax-rate-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteTaxRatesDocument } from '../tax-rates.graphql.js';
+
+export const DeleteTaxRatesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteTaxRatesDocument}
+            entityName="tax rates"
+            requiredPermissions={['DeleteTaxRate']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_tax-rates/tax-rates.graphql.ts

@@ -0,0 +1,84 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const taxRateItemFragment = graphql(`
+    fragment TaxRateItem on TaxRate {
+        id
+        createdAt
+        updatedAt
+        name
+        enabled
+        value
+        category {
+            id
+            name
+        }
+        zone {
+            id
+            name
+        }
+        customerGroup {
+            id
+            name
+        }
+    }
+`);
+
+export const taxRateListQuery = graphql(
+    `
+        query TaxRateList($options: TaxRateListOptions) {
+            taxRates(options: $options) {
+                items {
+                    ...TaxRateItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [taxRateItemFragment],
+);
+
+export const taxRateDetailDocument = graphql(
+    `
+        query TaxRateDetail($id: ID!) {
+            taxRate(id: $id) {
+                ...TaxRateItem
+                customFields
+            }
+        }
+    `,
+    [taxRateItemFragment],
+);
+
+export const createTaxRateDocument = graphql(`
+    mutation CreateTaxRate($input: CreateTaxRateInput!) {
+        createTaxRate(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateTaxRateDocument = graphql(`
+    mutation UpdateTaxRate($input: UpdateTaxRateInput!) {
+        updateTaxRate(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteTaxRateDocument = graphql(`
+    mutation DeleteTaxRate($id: ID!) {
+        deleteTaxRate(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const deleteTaxRatesDocument = graphql(`
+    mutation DeleteTaxRates($ids: [ID!]!) {
+        deleteTaxRates(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -0,0 +1,119 @@
+import { BooleanDisplayBadge } from '@/vdb/components/data-display/boolean.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import { mapFacetedFilterFields } from '../../../common/map-faceted-filter-fields.js';
+import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
+import { zoneListQuery } from '../_zones/zones.graphql.js';
+import { DeleteTaxRatesBulkAction } from './components/tax-rate-bulk-actions.js';
+import { taxRateListQuery } from './tax-rates.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
+    component: TaxRateListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Tax Rates</Trans> }),
+});
+
+function TaxRateListPage() {
+    const { t } = useLingui();
+    return (
+        <ListPage
+            pageId="tax-rate-list"
+            listQuery={taxRateListQuery}
+            route={Route}
+            title={<Trans>Tax Rates</Trans>}
+            defaultVisibility={{
+                name: true,
+                enabled: true,
+                category: true,
+                zone: true,
+                value: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                if (searchTerm === '') {
+                    return {};
+                }
+
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            transformVariables={input => {
+                const facetedFilters = input.options?.filter?._and ?? [];
+                mapFacetedFilterFields(facetedFilters, {
+                    category: 'categoryId',
+                    zone: 'zoneId',
+                });
+                return input;
+            }}
+            facetedFilters={{
+                enabled: {
+                    title: t`Enabled`,
+                    options: [
+                        { label: t`Enabled`, value: true },
+                        { label: t`Disabled`, value: false },
+                    ],
+                },
+                category: {
+                    title: t`Category`,
+                    optionsFn: async () => {
+                        const { taxCategories } = await api.query(taxCategoryListQuery);
+                        return taxCategories.items.map(category => ({
+                            label: category.name,
+                            value: category.id,
+                        }));
+                    },
+                },
+                zone: {
+                    title: t`Zone`,
+                    optionsFn: async () => {
+                        const { zones } = await api.query(zoneListQuery);
+                        return zones.items.map(zone => ({
+                            label: zone.name,
+                            value: zone.id,
+                        }));
+                    },
+                },
+            }}
+            customizeColumns={{
+                name: {
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                enabled: {
+                    cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
+                },
+                category: {
+                    cell: ({ row }) => row.original.category?.name,
+                },
+                zone: {
+                    cell: ({ row }) => row.original.zone?.name,
+                },
+                value: {
+                    cell: ({ row }) => `${row.original.value}%`,
+                },
+            }}
+            bulkActions={[
+                {
+                    component: DeleteTaxRatesBulkAction,
+                    order: 500,
+                },
+            ]}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateTaxRate']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            <Trans>New Tax Rate</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -0,0 +1,149 @@
+import { NumberInput } from '@/vdb/components/data-input/number-input.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TaxCategorySelector } from '@/vdb/components/shared/tax-category-selector.js';
+import { ZoneSelector } from '@/vdb/components/shared/zone-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { createTaxRateDocument, taxRateDetailDocument, updateTaxRateDocument } from './tax-rates.graphql.js';
+
+const pageId = 'tax-rate-detail';
+
+export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates_/$id')({
+    component: TaxRateDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: taxRateDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/tax-rates', label: <Trans>Tax Rates</Trans> },
+                isNew ? <Trans>New tax rate</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function TaxRateDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { t } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: taxRateDetailDocument,
+        createDocument: createTaxRateDocument,
+        updateDocument: updateTaxRateDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                value: entity.value,
+                enabled: entity.enabled,
+                categoryId: entity.category.id,
+                zoneId: entity.zone.id,
+                customerGroupId: entity.customerGroup?.id,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(
+                creatingNewEntity ? t`Successfully created tax rate` : t`Successfully updated tax rate`,
+            );
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(creatingNewEntity ? t`Failed to create tax rate` : t`Failed to update tax rate`, {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateTaxRate']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="enabled">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="enabled"
+                        label={<Trans>Enabled</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="value"
+                            label={<Trans>Rate</Trans>}
+                            render={({ field }) => (
+                                <NumberInput {...field} value={field.value} min={0} step={0.01} suffix="%" />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="categoryId"
+                            label={<Trans>Tax category</Trans>}
+                            render={({ field }) => (
+                                <TaxCategorySelector value={field.value} onChange={field.onChange} />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="zoneId"
+                            label={<Trans>Zone</Trans>}
+                            render={({ field }) => (
+                                <ZoneSelector value={field.value} onChange={field.onChange} />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="TaxRate" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_zones/components/zone-bulk-actions.tsx

@@ -0,0 +1,63 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteZonesDocument, removeCountryFromZoneMutation } from '../zones.graphql.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { TrashIcon } from 'lucide-react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/vdb/graphql/api.js';
+import { toast } from 'sonner';
+import { Trans, useLingui } from '@lingui/react/macro';
+
+export const DeleteZonesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteZonesDocument}
+            entityName="zones"
+            requiredPermissions={['DeleteZone']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export function removeCountryFromZoneBulkAction(zoneId: string): BulkActionComponent<any> {
+    const RemoveCountryFromZoneBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+        const { t } = useLingui();
+        const queryClient = useQueryClient();
+
+        const { mutate } = useMutation({
+            mutationFn: api.mutate(removeCountryFromZoneMutation),
+            onSuccess: () => {
+                toast.success(t`Removed ${selection.length} ${selection.length === 1 ? 'country' : 'countries'} from zone`);
+                queryClient.invalidateQueries({ queryKey: ['zone', zoneId] });
+                table.resetRowSelection();
+            },
+            onError: () => {
+                toast.error(t`Failed to remove countries from zone`);
+            },
+        });
+
+        return (
+            <DataTableBulkActionItem
+                requiresPermission={['UpdateZone']}
+                onClick={() => {
+                    mutate({
+                        zoneId,
+                        memberIds: selection.map(s => s.id),
+                    });
+                }}
+                label={<Trans>Remove from zone</Trans>}
+                confirmationText={
+                    <Trans>
+                        Are you sure you want to remove {selection.length} {selection.length === 1 ? 'country' : 'countries'} from this zone?
+                    </Trans>
+                }
+                icon={TrashIcon}
+                className="text-destructive"
+            />
+        );
+    };
+
+    return RemoveCountryFromZoneBulkAction;
+}
+

package/src/app/routes/_authenticated/_zones/components/zone-countries-sheet.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/vdb/components/ui/sheet.js';
+import { FullWidthPageBlock } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ZoneCountriesTable } from './zone-countries-table.js';
+
+interface ZoneCountriesSheetProps {
+    zoneId: string;
+    zoneName: string;
+    children?: React.ReactNode;
+}
+
+export function ZoneCountriesSheet({ zoneId, zoneName, children }: Readonly<ZoneCountriesSheetProps>) {
+    return (
+        <Sheet>
+            <SheetTrigger asChild>
+                <Button variant="outline" size="sm" className="flex items-center gap-2">
+                    {children}
+                </Button>
+            </SheetTrigger>
+            <SheetContent className="min-w-[800px]">
+                <SheetHeader>
+                    <SheetTitle>{zoneName}</SheetTitle>
+                </SheetHeader>
+                <div className="flex items-center gap-2"></div>
+                <ScrollArea className="px-6 max-h-[600px]">
+                    <FullWidthPageBlock blockId="zone-countries">
+                        <ZoneCountriesTable zoneId={zoneId} />
+                    </FullWidthPageBlock>
+                </ScrollArea>
+            </SheetContent>
+        </Sheet>
+    );
+}