@wilshop/dashboard 3.5.2

package/src/app/routes/__root.tsx

@@ -0,0 +1,23 @@
+import { AuthContext } from '@/vdb/providers/auth.js';
+import { QueryClient } from '@tanstack/react-query';
+import { createRootRouteWithContext, HeadContent, Outlet } from '@tanstack/react-router';
+import { usePageTitle } from '../common/use-page-title.js';
+
+export interface MyRouterContext {
+    auth: AuthContext;
+    queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+    component: RootComponent,
+});
+
+function RootComponent() {
+    document.title = usePageTitle();
+    return (
+        <>
+            <HeadContent />
+            <Outlet />
+        </>
+    );
+}

package/src/app/routes/_authenticated/_administrators/administrators.graphql.ts

@@ -0,0 +1,88 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const administratorItemFragment = graphql(`
+    fragment AdministratorItem on Administrator {
+        id
+        createdAt
+        updatedAt
+        firstName
+        lastName
+        emailAddress
+        user {
+            id
+            identifier
+            lastLogin
+            roles {
+                id
+                createdAt
+                updatedAt
+                code
+                description
+                channels {
+                    id
+                    code
+                }
+            }
+        }
+    }
+`);
+
+export const administratorListDocument = graphql(
+    `
+        query AdministratorList($options: AdministratorListOptions) {
+            administrators(options: $options) {
+                items {
+                    ...AdministratorItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [administratorItemFragment],
+);
+
+export const administratorDetailDocument = graphql(
+    `
+        query AdministratorDetail($id: ID!) {
+            administrator(id: $id) {
+                ...AdministratorItem
+                customFields
+            }
+        }
+    `,
+    [administratorItemFragment],
+);
+
+export const createAdministratorDocument = graphql(`
+    mutation CreateAdministrator($input: CreateAdministratorInput!) {
+        createAdministrator(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateAdministratorDocument = graphql(`
+    mutation UpdateAdministrator($input: UpdateAdministratorInput!) {
+        updateAdministrator(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteAdministratorDocument = graphql(`
+    mutation DeleteAdministrator($id: ID!) {
+        deleteAdministrator(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const deleteAdministratorsDocument = graphql(`
+    mutation DeleteAdministrators($ids: [ID!]!) {
+        deleteAdministrators(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -0,0 +1,104 @@
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/vdb/components/shared/role-code-label.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 { administratorListDocument } from './administrators.graphql.js';
+import { DeleteAdministratorsBulkAction } from './components/administrator-bulk-actions.js';
+
+export const Route = createFileRoute('/_authenticated/_administrators/administrators')({
+    component: AdministratorListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Administrators</Trans> }),
+});
+
+function AdministratorListPage() {
+    return (
+        <ListPage
+            pageId="administrator-list"
+            title={<Trans>Administrators</Trans>}
+            listQuery={administratorListDocument}
+            route={Route}
+            onSearchTermChange={searchTerm => {
+                return searchTerm
+                    ? {
+                          firstName: { contains: searchTerm },
+                          lastName: { contains: searchTerm },
+                          emailAddress: { contains: searchTerm },
+                      }
+                    : {};
+            }}
+            transformVariables={variables => {
+                return {
+                    options: {
+                        ...variables.options,
+                        filterOperator: 'OR',
+                    },
+                };
+            }}
+            additionalColumns={{
+                name: {
+                    meta: { dependencies: ['id', 'firstName', 'lastName'] },
+                    header: () => <Trans>Name</Trans>,
+                    cell: ({ row }) => (
+                        <DetailPageButton
+                            id={row.original.id}
+                            label={`${row.original.firstName} ${row.original.lastName}`}
+                        />
+                    ),
+                },
+                roles: {
+                    meta: { dependencies: ['user'] },
+                    header: () => <Trans>Roles</Trans>,
+                    cell: ({ row }) => {
+                        return (
+                            <div className="flex flex-wrap gap-2">
+                                {row.original.user?.roles.map(role => {
+                                    return (
+                                        <Badge variant="secondary" key={role.id}>
+                                            <RoleCodeLabel code={role.code} />
+                                        </Badge>
+                                    );
+                                })}
+                            </div>
+                        );
+                    },
+                },
+            }}
+            customizeColumns={{
+                emailAddress: {
+                    header: () => <Trans>Identifier</Trans>,
+                    cell: ({ row }) => {
+                        return <div>{row.original.emailAddress}</div>;
+                    },
+                },
+            }}
+            defaultVisibility={{
+                emailAddress: true,
+                name: true,
+            }}
+            defaultColumnOrder={['name', 'emailAddress', 'roles']}
+            bulkActions={[
+                {
+                    component: DeleteAdministratorsBulkAction,
+                    order: 500,
+                },
+            ]}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateAdministrator']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            New Administrator
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -0,0 +1,160 @@
+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 { RoleSelector } from '@/vdb/components/shared/role-selector.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,
+    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 {
+    administratorDetailDocument,
+    createAdministratorDocument,
+    updateAdministratorDocument,
+} from './administrators.graphql.js';
+import { RolePermissionsDisplay } from './components/role-permissions-display.js';
+
+const pageId = 'administrator-detail';
+
+export const Route = createFileRoute('/_authenticated/_administrators/administrators_/$id')({
+    component: AdministratorDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: administratorDetailDocument,
+        breadcrumb: (isNew, entity) => {
+            const name = `${entity?.firstName} ${entity?.lastName}`;
+            return [
+                { path: '/administrators', label: <Trans>Administrators</Trans> },
+                isNew ? <Trans>New administrator</Trans> : name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function AdministratorDetailPage() {
+    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: administratorDetailDocument,
+        createDocument: createAdministratorDocument,
+        updateDocument: updateAdministratorDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                firstName: entity.firstName,
+                lastName: entity.lastName,
+                emailAddress: entity.emailAddress,
+                password: '',
+                customFields: entity.customFields,
+                roleIds: entity.user.roles.map(role => role.id),
+            };
+        },
+        transformUpdateInput: input => {
+            return {
+                ...input,
+                password: input.password || undefined,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(
+                creatingNewEntity
+                    ? t`Successfully created administrator`
+                    : t`Successfully updated administrator`,
+            );
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(creatingNewEntity ? t`Failed to create administrator` : t`Failed to update administrator`, {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const name = `${entity?.firstName} ${entity?.lastName}`;
+    const roleIds = form.watch('roleIds');
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
+
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateAdministrator']}>
+                        <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">
+                    <div className="md:grid md:grid-cols-2 gap-4">
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="firstName"
+                            label={<Trans>First name</Trans>}
+                            render={({ field }) => <Input placeholder="" {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="lastName"
+                            label={<Trans>Last name</Trans>}
+                            render={({ field }) => <Input placeholder="" {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="emailAddress"
+                            label={<Trans>Email Address or identifier</Trans>}
+                            render={({ field }) => <Input placeholder="" {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="password"
+                            label={<Trans>Password</Trans>}
+                            render={({ field }) => <Input placeholder="" type="password" {...field} />}
+                        />
+                    </div>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Administrator" control={form.control} />
+                <PageBlock column="main" blockId="roles" title={<Trans>Roles</Trans>}>
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="roleIds"
+                        render={({ field }) => (
+                            <RoleSelector
+                                value={field.value ?? []}
+                                onChange={field.onChange}
+                                multiple={true}
+                            />
+                        )}
+                    />
+                    <RolePermissionsDisplay value={roleIds ?? []} />
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_administrators/components/administrator-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 { deleteAdministratorsDocument } from '../administrators.graphql.js';
+
+export const DeleteAdministratorsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteAdministratorsDocument}
+            entityName="administrators"
+            requiredPermissions={['DeleteAdministrator']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_administrators/components/role-permissions-display.tsx

@@ -0,0 +1,133 @@
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
+import { useLingui } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+
+const rolesByIdDocument = graphql(`
+    query RolesById($options: RoleListOptions) {
+        roles(options: $options) {
+            items {
+                id
+                code
+                permissions
+                channels {
+                    id
+                    code
+                }
+            }
+        }
+    }
+`);
+
+interface RolePermissionsDisplayProps {
+    value: string[];
+}
+
+export function RolePermissionsDisplay({ value = [] }: Readonly<RolePermissionsDisplayProps>) {
+    const { i18n } = useLingui();
+    const groupedPermissions = useGroupedPermissions();
+
+    const { data } = useQuery({
+        queryKey: ['rolesById', value],
+        queryFn: () =>
+            api.query(rolesByIdDocument, {
+                options: {
+                    filter: {
+                        id: { in: value },
+                    },
+                },
+            }),
+    });
+
+    const roles = data?.roles.items ?? [];
+
+    const allChannels = roles
+        .flatMap(role => role.channels)
+        .filter((channel, index, self) => index === self.findIndex(t => t.code === channel.code));
+
+    const isPermissionEnabled = (permissionName: string, channelCode: string) => {
+        // Check if any role has this permission for this channel
+        return roles.some(role => {
+            const hasPermission = role.permissions.includes(permissionName as any);
+            const isChannelSpecificRole = role.channels.length > 0;
+
+            if (!hasPermission) return false;
+
+            if (!isChannelSpecificRole) {
+                // If role is not channel-specific, permission applies to all channels
+                return true;
+            }
+
+            // Check if the role applies to this specific channel
+            return role.channels.some(channel => channel.code === channelCode);
+        });
+    };
+
+    if (!allChannels.length) return null;
+
+    return (
+        <Tabs defaultValue={allChannels[0].code} className="w-full mt-4">
+            <TabsList>
+                {allChannels.map(channel => (
+                    <TabsTrigger key={channel.code} value={channel.code}>
+                        <ChannelCodeLabel code={channel.code} />
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            {allChannels.map(channel => (
+                <TabsContent key={channel.code} value={channel.code} className="mt-0">
+                    <div className="rounded-md border">
+                        <table className="w-full">
+                            <tbody>
+                                {groupedPermissions.map((group, idx) => (
+                                    <tr
+                                        key={group.label}
+                                        className={
+                                            idx !== groupedPermissions.length - 1 ? 'border-b' : undefined
+                                        }
+                                    >
+                                        <td className="p-4">
+                                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                                                {group.permissions.map(permission => (
+                                                    <div
+                                                        key={permission.name}
+                                                        className="flex items-center space-x-2"
+                                                    >
+                                                        <Checkbox
+                                                            checked={isPermissionEnabled(
+                                                                permission.name,
+                                                                channel.code,
+                                                            )}
+                                                            disabled={true}
+                                                        />
+                                                        <TooltipProvider>
+                                                            <Tooltip>
+                                                                <TooltipTrigger asChild>
+                                                                    <label className="text-sm cursor-default">
+                                                                        {i18n.t(permission.name)}
+                                                                    </label>
+                                                                </TooltipTrigger>
+                                                                <TooltipContent>
+                                                                    <p>{i18n.t(permission.description)}</p>
+                                                                </TooltipContent>
+                                                            </Tooltip>
+                                                        </TooltipProvider>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </TabsContent>
+            ))}
+        </Tabs>
+    );
+}

package/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -0,0 +1,76 @@
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const assetDetailDocument = graphql(
+    `
+        query AssetDetail($id: ID!) {
+            asset(id: $id) {
+                ...Asset
+                tags {
+                    id
+                    value
+                }
+                customFields
+            }
+        }
+    `,
+    [assetFragment],
+);
+
+export const assetUpdateDocument = graphql(`
+    mutation AssetUpdate($input: UpdateAssetInput!) {
+        updateAsset(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteAssetsDocument = graphql(`
+    mutation DeleteAssets($input: DeleteAssetsInput!) {
+        deleteAssets(input: $input) {
+            ... on DeletionResponse {
+                result
+                message
+            }
+        }
+    }
+`);
+
+export const tagListDocument = graphql(`
+    query TagList($options: TagListOptions) {
+        tags(options: $options) {
+            items {
+                id
+                value
+            }
+            totalItems
+        }
+    }
+`);
+
+export const createTagDocument = graphql(`
+    mutation CreateTag($input: CreateTagInput!) {
+        createTag(input: $input) {
+            id
+            value
+        }
+    }
+`);
+
+export const updateTagDocument = graphql(`
+    mutation UpdateTag($input: UpdateTagInput!) {
+        updateTag(input: $input) {
+            id
+            value
+        }
+    }
+`);
+
+export const deleteTagDocument = graphql(`
+    mutation DeleteTag($id: ID!) {
+        deleteTag(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_assets/assets.tsx

@@ -0,0 +1,48 @@
+import { AssetGallery } from '@/vdb/components/shared/asset/asset-gallery.js';
+import { Page, PageBlock, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { Trans } from '@lingui/react/macro';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { DeleteAssetsBulkAction } from './components/asset-bulk-actions.js';
+
+export const Route = createFileRoute('/_authenticated/_assets/assets')({
+    component: RouteComponent,
+    loader: () => ({ breadcrumb: () => <Trans>Assets</Trans> }),
+    validateSearch: (search: Record<string, unknown>) => {
+        return {
+            perPage: (search.perPage as number) || 24,
+        };
+    },
+});
+
+function RouteComponent() {
+    const navigate = useNavigate({ from: Route.fullPath });
+    const { perPage } = Route.useSearch();
+
+    const handlePageSizeChange = (newPageSize: number) => {
+        navigate({
+            search: (prev: any) => ({ ...prev, perPage: newPageSize }),
+        });
+    };
+
+    return (
+        <Page pageId="asset-list">
+            <PageTitle>
+                <Trans>Assets</Trans>
+            </PageTitle>
+            <PageBlock blockId="asset-gallery" column="main">
+                <AssetGallery
+                    selectable={true}
+                    multiSelect="manual"
+                    pageSize={perPage}
+                    onPageSizeChange={handlePageSizeChange}
+                    bulkActions={[
+                        {
+                            order: 10,
+                            component: DeleteAssetsBulkAction,
+                        },
+                    ]}
+                />
+            </PageBlock>
+        </Page>
+    );
+}