@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,94 @@
+import { DataTable } from '@/vdb/components/data-table/data-table.js';
+import { useGeneratedColumns } from '@/vdb/components/data-table/use-generated-columns.js';
+import { CountrySelector } from '@/vdb/components/shared/country-selector.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { Trans } from '@lingui/react/macro';
+import { useMemo, useState } from 'react';
+import {
+    addCountryToZoneMutation,
+    zoneMembersQuery,
+} from '../zones.graphql.js';
+import { removeCountryFromZoneBulkAction } from './zone-bulk-actions.js';
+
+interface ZoneCountriesTableProps {
+    zoneId: string;
+    canAddCountries?: boolean;
+}
+
+export function ZoneCountriesTable({ zoneId, canAddCountries = false }: Readonly<ZoneCountriesTableProps>) {
+    const { data, refetch } = useQuery({
+        queryKey: ['zone', zoneId],
+        queryFn: () => api.query(zoneMembersQuery, { zoneId }),
+    });
+
+    const { mutate: addCountryToZone } = useMutation({
+        mutationFn: api.mutate(addCountryToZoneMutation),
+        onSuccess: () => {
+            refetch();
+        },
+    });
+
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+
+    const paginatedItems = useMemo(() => {
+        return data?.zone?.members?.slice((page - 1) * pageSize, page * pageSize);
+    }, [data, page, pageSize]);
+
+    const bulkActions = useMemo(
+        () => [
+            {
+                component: removeCountryFromZoneBulkAction(zoneId),
+                order: 500,
+            },
+        ],
+        [zoneId],
+    );
+
+    const { columns } = useGeneratedColumns({
+        fields: [],
+        additionalColumns: {
+            name: {
+                header: () => <Trans>Country</Trans>,
+                accessorKey: 'name',
+            },
+            enabled: {
+                header: () => <Trans>Enabled</Trans>,
+                accessorKey: 'enabled',
+            },
+            code: {
+                header: () => <Trans>Code</Trans>,
+                accessorKey: 'code',
+            },
+        },
+        bulkActions,
+        includeActionsColumn: false,
+        enableSorting: false,
+    });
+
+    return (
+        <div>
+            <DataTable
+                columns={columns as any}
+                data={paginatedItems ?? []}
+                onPageChange={(table, page, itemsPerPage) => {
+                    setPage(page);
+                    setPageSize(itemsPerPage);
+                }}
+                totalItems={data?.zone?.members?.length ?? 0}
+                bulkActions={bulkActions}
+            />
+            {canAddCountries && (
+                <CountrySelector
+                    onSelect={country => {
+                        addCountryToZone({
+                            zoneId,
+                            memberIds: [country.id],
+                        });
+                    }}
+                />
+            )}
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_zones/zones.graphql.ts

@@ -0,0 +1,105 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const zoneItemFragment = graphql(`
+    fragment ZoneItem on Zone {
+        id
+        createdAt
+        updatedAt
+        name
+    }
+`);
+
+export const zoneListQuery = graphql(
+    `
+        query ZoneList($options: ZoneListOptions) {
+            zones(options: $options) {
+                items {
+                    ...ZoneItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [zoneItemFragment],
+);
+
+export const zoneMembersQuery = graphql(`
+    query ZoneMembers($zoneId: ID!) {
+        zone(id: $zoneId) {
+            id
+            createdAt
+            updatedAt
+            name
+            members {
+                createdAt
+                updatedAt
+                id
+                name
+                code
+                enabled
+            }
+        }
+    }
+`);
+
+export const zoneDetailDocument = graphql(
+    `
+        query ZoneDetail($id: ID!) {
+            zone(id: $id) {
+                ...ZoneItem
+                customFields
+            }
+        }
+    `,
+    [zoneItemFragment],
+);
+
+export const createZoneDocument = graphql(`
+    mutation CreateZone($input: CreateZoneInput!) {
+        createZone(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateZoneDocument = graphql(`
+    mutation UpdateZone($input: UpdateZoneInput!) {
+        updateZone(input: $input) {
+            id
+        }
+    }
+`);
+
+export const addCountryToZoneMutation = graphql(`
+    mutation AddMembersToZone($zoneId: ID!, $memberIds: [ID!]!) {
+        addMembersToZone(zoneId: $zoneId, memberIds: $memberIds) {
+            id
+        }
+    }
+`);
+
+export const removeCountryFromZoneMutation = graphql(`
+    mutation RemoveMembersFromZone($zoneId: ID!, $memberIds: [ID!]!) {
+        removeMembersFromZone(zoneId: $zoneId, memberIds: $memberIds) {
+            id
+        }
+    }
+`);
+
+export const deleteZoneDocument = graphql(`
+    mutation DeleteZone($id: ID!) {
+        deleteZone(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const deleteZonesDocument = graphql(`
+    mutation DeleteZones($ids: [ID!]!) {
+        deleteZones(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -0,0 +1,64 @@
+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 { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';
+import { ZoneCountriesSheet } from './components/zone-countries-sheet.js';
+import { zoneListQuery } from './zones.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_zones/zones')({
+    component: ZoneListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Zones</Trans> }),
+});
+
+function ZoneListPage() {
+    const { t } = useLingui();
+    return (
+        <ListPage
+            pageId="zone-list"
+            listQuery={zoneListQuery}
+            route={Route}
+            title={<Trans>Zones</Trans>}
+            defaultVisibility={{
+                name: true,
+                regions: true,
+            }}
+            customizeColumns={{
+                name: {
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+            }}
+            additionalColumns={{
+                regions: {
+                    header: t`Regions`,
+                    cell: ({ row }) => (
+                        <ZoneCountriesSheet zoneId={row.original.id} zoneName={row.original.name}>
+                            <Trans>Edit members</Trans>
+                        </ZoneCountriesSheet>
+                    ),
+                },
+            }}
+            bulkActions={[
+                {
+                    component: DeleteZonesBulkAction,
+                    order: 500,
+                },
+            ]}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateZone']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            <Trans>New Zone</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -0,0 +1,110 @@
+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 { 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 { ZoneCountriesTable } from './components/zone-countries-table.js';
+import { createZoneDocument, updateZoneDocument, zoneDetailDocument } from './zones.graphql.js';
+
+const pageId = 'zone-detail';
+
+export const Route = createFileRoute('/_authenticated/_zones/zones_/$id')({
+    component: ZoneDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: zoneDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/zones', label: <Trans>Zones</Trans> },
+                isNew ? <Trans>New zone</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ZoneDetailPage() {
+    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: zoneDetailDocument,
+        createDocument: createZoneDocument,
+        updateDocument: updateZoneDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(creatingNewEntity ? t`Successfully created zone` : t`Successfully updated zone`);
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(creatingNewEntity ? t`Failed to create zone` : t`Failed to update zone`, {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateZone']}>
+                        <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} />}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Zone" control={form.control} />
+                {entity && (
+                    <PageBlock column="main" blockId="countries" title={<Trans>Countries</Trans>}>
+                        <ZoneCountriesTable zoneId={entity.id} canAddCountries={true} />
+                    </PageBlock>
+                )}
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/index.tsx

@@ -0,0 +1,233 @@
+import { DateRangePicker } from '@/vdb/components/date-range-picker.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import type { GridLayout as GridLayoutType } from '@/vdb/components/ui/grid-layout.js';
+import { GridLayout } from '@/vdb/components/ui/grid-layout.js';
+import {
+    getDashboardWidget,
+    getDashboardWidgetRegistry,
+} from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import {
+    DefinedDateRange,
+    WidgetFiltersProvider,
+} from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
+import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
+import {
+    FullWidthPageBlock,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { createFileRoute } from '@tanstack/react-router';
+import { endOfDay, startOfMonth } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
+import { Trans, useLingui } from '@lingui/react/macro';
+
+export const Route = createFileRoute('/_authenticated/')({
+    component: DashboardPage,
+});
+
+const findNextPosition = (
+    existingWidgets: DashboardWidgetInstance[],
+    newWidgetSize: { w: number; h: number },
+) => {
+    const occupied = new Set();
+    let maxExistingRow = 0;
+
+    existingWidgets.forEach(widget => {
+        const { x, y, w, h } = widget.layout;
+        maxExistingRow = Math.max(maxExistingRow, y + h);
+
+        for (let i = x; i < x + w; i++) {
+            for (let j = y; j < y + h; j++) {
+                occupied.add(`${i},${j}`);
+            }
+        }
+    });
+
+    const maxSearchRows = maxExistingRow + 3;
+
+    for (let y = 0; y < maxSearchRows; y++) {
+        for (let x = 0; x <= 12 - newWidgetSize.w; x++) {
+            let fits = true;
+            for (let i = x; i < x + newWidgetSize.w; i++) {
+                for (let j = y; j < y + newWidgetSize.h; j++) {
+                    if (occupied.has(`${i},${j}`)) {
+                        fits = false;
+                        break;
+                    }
+                }
+                if (!fits) break;
+            }
+            if (fits) {
+                return { x, y };
+            }
+        }
+    }
+    return { x: 0, y: maxExistingRow };
+};
+
+function DashboardPage() {
+    const [widgets, setWidgets] = useState<DashboardWidgetInstance[]>([]);
+    const [editMode, setEditMode] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const prevEditModeRef = useRef(editMode);
+    const { t } = useLingui();
+    const [dateRange, setDateRange] = useState<DefinedDateRange>({
+        from: startOfMonth(new Date()),
+        to: endOfDay(new Date()),
+    });
+
+    const { settings, setWidgetLayout } = useUserSettings();
+
+    useEffect(() => {
+        const savedLayouts = settings.widgetLayout || {};
+
+        const initialWidgets = Array.from(getDashboardWidgetRegistry().entries()).reduce(
+            (acc: DashboardWidgetInstance[], [id, widget]) => {
+                const defaultSize = {
+                    w: widget.defaultSize.w ?? 4, // Default 4 columns
+                    h: widget.defaultSize.h ?? 3, // Default 3 rows
+                };
+
+                // Use minSize if specified, otherwise fall back to defaultSize
+                const minSize = {
+                    w: widget.minSize?.w ?? defaultSize.w,
+                    h: widget.minSize?.h ?? defaultSize.h,
+                };
+
+                // Check if we have a saved layout for this widget
+                const savedLayout = savedLayouts[id];
+
+                const layout = {
+                    w: savedLayout?.w ?? defaultSize.w,
+                    h: savedLayout?.h ?? defaultSize.h,
+                    x: savedLayout?.x ?? widget.defaultSize.x ?? 0,
+                    y: savedLayout?.y ?? widget.defaultSize.y ?? 0,
+                    minW: minSize.w,
+                    minH: minSize.h,
+                    maxW: widget.maxSize?.w,
+                    maxH: widget.maxSize?.h,
+                };
+
+                // Only find next position if we don't have a saved layout
+                if (!savedLayout) {
+                    const pos = findNextPosition(acc, {
+                        w: layout.w,
+                        h: layout.h,
+                    });
+                    layout.x = pos.x;
+                    layout.y = pos.y;
+                }
+
+                return [
+                    ...acc,
+                    {
+                        id,
+                        widgetId: id,
+                        layout,
+                    },
+                ];
+            },
+            [],
+        );
+
+        setWidgets(initialWidgets);
+        setIsInitialized(true);
+    }, [settings.widgetLayout]);
+
+    // Save layout when edit mode is turned off
+    useEffect(() => {
+        // Only save when transitioning from edit mode ON to OFF
+        if (prevEditModeRef.current && !editMode && isInitialized && widgets.length > 0) {
+            const layoutConfig: Record<string, { x: number; y: number; w: number; h: number }> = {};
+            widgets.forEach(widget => {
+                layoutConfig[widget.widgetId] = {
+                    x: widget.layout.x,
+                    y: widget.layout.y,
+                    w: widget.layout.w,
+                    h: widget.layout.h,
+                };
+            });
+            setWidgetLayout(layoutConfig);
+        }
+
+        // Update the ref for next render
+        prevEditModeRef.current = editMode;
+    }, [editMode, isInitialized, widgets, setWidgetLayout]);
+
+    const handleLayoutChange = (layouts: GridLayoutType[]) => {
+        setWidgets(prev =>
+            prev.map((widget, i) => ({
+                ...widget,
+                layout: layouts[i] || widget.layout,
+            })),
+        );
+    };
+
+    const renderWidget = (widget: DashboardWidgetInstance) => {
+        const definition = getDashboardWidget(widget.widgetId);
+        if (!definition) return null;
+        const WidgetComponent = definition.component;
+
+        return <WidgetComponent key={widget.id} id={widget.id} config={widget.config} />;
+    };
+
+    return (
+        <Page pageId="insights">
+            <PageTitle>
+                <Trans>Insights</Trans>
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <DateRangePicker
+                        dateRange={dateRange}
+                        onDateRangeChange={setDateRange}
+                        className="mr-2"
+                    />
+                    <Button
+                        variant={editMode ? 'default' : 'outline'}
+                        onClick={() => setEditMode(prev => !prev)}
+                    >
+                        {editMode ? t`Save Layout` : t`Edit Layout`}
+                    </Button>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <FullWidthPageBlock blockId="widgets">
+                    <div className="w-full">
+                        {widgets.length > 0 ? (
+                            <WidgetFiltersProvider filters={{ dateRange }}>
+                                <GridLayout
+                                    layouts={widgets.map(w => ({ ...w.layout, i: w.id }))}
+                                    onLayoutChange={handleLayoutChange}
+                                    cols={12}
+                                    rowHeight={100}
+                                    isDraggable={editMode}
+                                    isResizable={editMode}
+                                    className="min-h-[400px]"
+                                    gutter={10}
+                                >
+                                    {
+                                        widgets
+                                            .map(widget => renderWidget(widget))
+                                            .filter(Boolean) as React.ReactElement[]
+                                    }
+                                </GridLayout>
+                            </WidgetFiltersProvider>
+                        ) : (
+                            <div
+                                className="flex items-center justify-center text-muted-foreground"
+                                style={{ height: '400px' }}
+                            >
+                                No widgets available
+                            </div>
+                        )}
+                    </div>
+                </FullWidthPageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated.tsx

@@ -0,0 +1,35 @@
+import { AppLayout } from '@/vdb/components/layout/app-layout.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/vdb/constants.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
+
+export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
+    beforeLoad: ({ context, location }) => {
+        if (!context.auth.isAuthenticated) {
+            throw redirect({
+                to: '/login',
+                search: {
+                    redirect: location.href,
+                },
+            });
+        }
+    },
+    loader: () => ({
+        breadcrumb: 'Insights',
+    }),
+    component: AuthLayout,
+});
+
+function AuthLayout() {
+    const navigate = useNavigate();
+    const { isAuthenticated } = useAuth();
+
+    if (!isAuthenticated) {
+        navigate({
+            to: '/login',
+        });
+        return <></>;
+    }
+
+    return <AppLayout />;
+}

package/src/app/routes/login.tsx

@@ -0,0 +1,49 @@
+import { LoginForm } from '@/vdb/components/login/login-form.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { createFileRoute, Navigate, redirect, useRouterState } from '@tanstack/react-router';
+import { z } from 'zod';
+
+const fallback = '/' as const;
+
+export const Route = createFileRoute('/login')({
+    validateSearch: z.object({
+        redirect: z.string().optional().catch(''),
+    }),
+    beforeLoad: ({ context, search }) => {
+        if (context.auth.isAuthenticated) {
+            throw redirect({ to: search.redirect || fallback });
+        }
+    },
+    component: LoginPage,
+});
+
+function LoginPage() {
+    const auth = useAuth();
+    const isLoading = useRouterState({ select: s => s.isLoading });
+    const navigate = Route.useNavigate();
+    const search = Route.useSearch();
+
+    const onFormSubmit = (username: string, password: string) => {
+        auth.login(username, password, () => {
+            navigate({ to: search.redirect || fallback });
+        });
+    };
+
+    if (auth.isAuthenticated) {
+        return <Navigate to={search.redirect || fallback} />;
+    }
+
+    const isVerifying = isLoading || auth.status === 'verifying';
+
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center p-6 md:p-10 bg-sidebar">
+            <div className="w-full max-w-sm md:max-w-md">
+                <LoginForm
+                    onFormSubmit={onFormSubmit}
+                    isVerifying={isVerifying}
+                    loginError={auth.authenticationError}
+                />
+            </div>
+        </div>
+    );
+}