@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_system/components/payload-dialog.tsx

@@ -0,0 +1,34 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { DialogTrigger } from '@/components/ui/dialog.js';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { JsonEditor } from 'json-edit-react';
+
+type PayloadDialogProps = {
+    payload: any;
+    trigger: React.ReactNode;
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+};
+
+export function PayloadDialog({ payload, trigger, title, description }: PayloadDialogProps) {
+    return (
+        <Dialog>
+            <DialogTrigger asChild>{trigger}</DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription>{description}</DialogDescription>
+                </DialogHeader>
+                <ScrollArea className="max-h-[600px]">
+                    <JsonEditor viewOnly data={payload} collapse />
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_system/healthchecks.tsx

@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { Page, PageActionBar, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { formatRelative } from 'date-fns';
+import { CheckCircle2Icon, CircleXIcon } from 'lucide-react';
+import { uiConfig } from 'virtual:vendure-ui-config';
+
+export const Route = createFileRoute('/_authenticated/_system/healthchecks')({
+    component: HealthchecksPage,
+});
+
+interface HealthcheckItem {
+    status: 'up' | 'down';
+}
+
+interface HealthcheckResponse {
+    status: 'ok' | 'error';
+    info: Record<string, HealthcheckItem>;
+    error: Record<string, HealthcheckItem>;
+    details: Record<string, HealthcheckItem>;
+}
+
+function HealthchecksPage() {
+    const { data, refetch, dataUpdatedAt } = useQuery({
+        queryKey: ['healthchecks'],
+        queryFn: async () => {
+            const schemeAndHost =
+                uiConfig.apiHost + (uiConfig.apiPort !== 'auto' ? `:${uiConfig.apiPort}` : '');
+
+            const res = await fetch(`${schemeAndHost}/health`);
+            return res.json() as Promise<HealthcheckResponse>;
+        },
+        refetchInterval: 5000,
+    });
+
+    return (
+        <Page>
+            <PageTitle>Healthchecks</PageTitle>
+            <PageActionBar>
+                <Button onClick={() => refetch()}>Refresh</Button>
+            </PageActionBar>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <span> Current status</span>
+                            <span className="text-sm font-normal text-muted-foreground">
+                                <Trans>Last updated {formatRelative(dataUpdatedAt, new Date())}</Trans>
+                            </span>
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        {data?.status === 'ok' ? (
+                            <div className="flex items-center gap-2 ">
+                                <CheckCircle2Icon className="text-success"></CheckCircle2Icon>
+                                <span className="text-2xl">
+                                    <Trans>All resources are up and running</Trans>
+                                </span>
+                            </div>
+                        ) : (
+                            <div className="flex items-center gap-2 ">
+                                <CircleXIcon className="text-destructive"></CircleXIcon>
+                                <span className="text-2xl">
+                                    <Trans>Some resources are down</Trans>
+                                </span>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader>
+                        <CardTitle>
+                            <Trans>Monitored Resources</Trans>
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="flex flex-col gap-2">
+                            {Object.entries(data?.info || {}).map(([key, value]) => (
+                                <div key={key} className="flex items-center justify-start gap-6">
+                                    <span className="min-w-1/3">{key}</span>
+                                    <span>{value.status}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_system/job-queue.graphql.ts

@@ -0,0 +1,43 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const jobInfoFragment = graphql(`
+    fragment JobInfo on Job {
+        id
+        queueName
+        createdAt
+        startedAt
+        settledAt
+        state
+        isSettled
+        progress
+        duration
+        data
+        result
+        error
+        retries
+        attempts
+    }
+`);
+
+export const jobListDocument = graphql(
+    `
+        query JobList($options: JobListOptions) {
+            jobs(options: $options) {
+                items {
+                    ...JobInfo
+                }
+                totalItems
+            }
+        }
+    `,
+    [jobInfoFragment],
+);
+
+export const jobQueueListDocument = graphql(`
+    query JobQueueList {
+        jobQueues {
+            name
+            running
+        }
+    }
+`);

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -0,0 +1,161 @@
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute } from '@tanstack/react-router';
+import { jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { PayloadDialog } from './components/payload-dialog.js';
+import { differenceInMilliseconds, formatDuration, formatRelative } from 'date-fns';
+import { Ban, CircleXIcon, ClockIcon, LoaderIcon, RotateCcw } from 'lucide-react';
+import { CheckCircle2Icon } from 'lucide-react';
+import { api } from '@/graphql/api.js';
+
+export const Route = createFileRoute('/_authenticated/_system/job-queue')({
+    component: JobQueuePage,
+    loader: () => ({ breadcrumb: () => <Trans>Job Queue</Trans> }),
+});
+
+const STATES = [
+    {
+        label: 'Pending',
+        value: 'PENDING',
+        icon: ClockIcon,
+    },
+    {
+        label: 'Completed',
+        value: 'COMPLETED',
+        icon: CheckCircle2Icon,
+    },
+    {
+        label: 'Running',
+        value: 'RUNNING',
+        icon: LoaderIcon,
+    },
+    {
+        label: 'Failed',
+        value: 'FAILED',
+        icon: CircleXIcon,
+    },
+    {
+        label: 'Retrying',
+        value: 'RETRYING',
+        icon: RotateCcw,
+    },
+    {
+        label: 'Cancelled',
+        value: 'CANCELLED',
+        icon: Ban,
+    },
+];
+
+function JobQueuePage() {
+    return (
+        <ListPage
+            pageId="job-queue-list"
+            title="Job Queue"
+            listQuery={jobListDocument}
+            route={Route}
+            customizeColumns={{
+                createdAt: {
+                    header: 'Created At',
+                    cell: ({ row }) => formatRelative(row.original.createdAt, new Date()),
+                },
+                data: {
+                    header: 'Data',
+                    cell: ({ row }) => (
+                        <PayloadDialog
+                            payload={row.original.data}
+                            title={<Trans>View job data</Trans>}
+                            description={<Trans>The data that has been passed to the job</Trans>}
+                            trigger={
+                                <Button size="sm" variant="secondary">
+                                    View data
+                                </Button>
+                            }
+                        />
+                    ),
+                },
+                queueName: {
+                    header: 'Queue',
+                    cell: ({ row }) => <span className="font-mono">{row.original.queueName}</span>,
+                },
+                result: {
+                    header: 'Result',
+                    cell: ({ row }) => {
+                        return row.original.result ? (
+                            <PayloadDialog
+                                payload={row.original.result}
+                                title={<Trans>View job result</Trans>}
+                                description={<Trans>The result of the job</Trans>}
+                                trigger={
+                                    <Button size="sm" variant="secondary">
+                                        View result
+                                    </Button>
+                                }
+                            />
+                        ) : (
+                            <div className="text-muted-foreground">
+                                <Trans>No result yet</Trans>
+                            </div>
+                        );
+                    },
+                },
+                state: {
+                    header: 'State',
+                    cell: ({ row }) => {
+                        const state = STATES.find(s => s.value === row.original.state);
+
+                        return (
+                            <Badge
+                                variant={
+                                    row.original.state === 'PENDING'
+                                        ? 'secondary'
+                                        : row.original.state === 'COMPLETED'
+                                          ? 'success'
+                                          : row.original.state === 'FAILED'
+                                            ? 'destructive'
+                                            : 'outline'
+                                }
+                            >
+                                {state && <state.icon />}
+                                {row.original.state}
+                            </Badge>
+                        );
+                    },
+                },
+                duration: {
+                    header: 'Duration',
+                    cell: ({ row }) => {
+                        return row.original.duration ? `${row.original.duration}ms` : null;
+                    },
+                },
+            }}
+            defaultVisibility={{
+                isSettled: false,
+                settledAt: false,
+                progress: false,
+                retries: false,
+                attempts: false,
+                error: false,
+                startedAt: false,
+            }}
+            facetedFilters={{
+                queueName: {
+                    title: 'Queue',
+                    optionsFn: async () => {
+                        return api.query(jobQueueListDocument).then(r => {
+                            return r.jobQueues.map(queue => ({
+                                label: queue.name,
+                                value: queue.name,
+                            }));
+                        });
+                    },
+                },
+                state: {
+                    title: 'State',
+                    options: STATES,
+                },
+            }}
+        ></ListPage>
+    );
+}

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

@@ -0,0 +1,63 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const taxCategoryItemFragment = graphql(`
+    fragment TaxCategoryItem on TaxCategory {
+        id
+        createdAt
+        updatedAt
+        name
+        isDefault
+    }
+`);
+
+export const taxCategoryListQuery = graphql(
+    `
+        query TaxCategoryList {
+            taxCategories {
+                items {
+                    ...TaxCategoryItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [taxCategoryItemFragment],
+);
+
+export const taxCategoryDetailQuery = graphql(`
+    query TaxCategoryDetail($id: ID!) {
+        taxCategory(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            isDefault
+            customFields
+        }
+    }
+`);
+
+export const createTaxCategoryDocument = graphql(`
+    mutation CreateTaxCategory($input: CreateTaxCategoryInput!) {
+        createTaxCategory(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateTaxCategoryDocument = graphql(`
+    mutation UpdateTaxCategory($input: UpdateTaxCategoryInput!) {
+        updateTaxCategory(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteTaxCategoryDocument = graphql(`
+    mutation DeleteTaxCategory($id: ID!) {
+        deleteTaxCategory(id: $id) {
+            result
+            message
+        }
+    }
+`);

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

@@ -0,0 +1,65 @@
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import { deleteTaxCategoryDocument, 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}
+            deleteMutation={deleteTaxCategoryDocument}
+            route={Route}
+            title="Tax Categories"
+            defaultVisibility={{
+                name: true,
+                isDefault: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                if (searchTerm === '') {
+                    return {};
+                }
+
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                isDefault: {
+                    header: 'Default',
+                    cell: ({ row }) => (
+                        <Badge variant={row.original.isDefault ? 'success' : 'destructive'}>
+                            <Trans>{row.original.isDefault ? 'Yes' : 'No'}</Trans>
+                        </Badge>
+                    ),
+                },
+            }}
+        >
+            <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,115 @@
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Switch } from '@/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    createTaxCategoryDocument,
+    taxCategoryDetailQuery,
+    updateTaxCategoryDocument,
+} from './tax-categories.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories_/$id')({
+    component: TaxCategoryDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: taxCategoryDetailQuery,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/tax-categories', label: 'Tax categories' },
+                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 { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending } = useDetailPage({
+        queryDocument: taxCategoryDetailQuery,
+        createDocument: createTaxCategoryDocument,
+        updateDocument: updateTaxCategoryDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(i18n.t('Successfully updated tax category'));
+            form.reset(form.getValues());
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update tax category'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler}>
+            <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}
+                        >
+                            <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/tax-rates.graphql.ts

@@ -0,0 +1,75 @@
+import { graphql } from '@/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 taxRateDetailQuery = 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
+        }
+    }
+`);