@wilshop/dashboard 3.5.2

package/src/app/routes/_authenticated/_roles/components/permissions-table-grid.tsx

@@ -0,0 +1,251 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { Table, TableBody, TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
+import { ServerConfig } from '@/vdb/providers/server-config.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { InfoIcon } from 'lucide-react';
+
+interface PermissionsTableGridProps {
+    value: string[];
+    onChange: (permissions: string[]) => void;
+    readonly?: boolean;
+}
+
+export function PermissionsTableGrid({
+    value,
+    onChange,
+    readonly = false,
+}: Readonly<PermissionsTableGridProps>) {
+    const { i18n } = useLingui();
+    const groupedPermissions = useGroupedPermissions();
+
+    const setPermission = (permission: string, checked: boolean) => {
+        if (readonly) return;
+
+        const newPermissions = checked ? [...value, permission] : value.filter(p => p !== permission);
+        onChange(newPermissions);
+    };
+
+    const toggleAll = (defs: ServerConfig['permissions']) => {
+        if (readonly) return;
+
+        const shouldEnable = defs.some(d => !value.includes(d.name));
+        const newPermissions = shouldEnable
+            ? [...new Set([...value, ...defs.map(d => d.name)])]
+            : value.filter(p => !defs.some(d => d.name === p));
+        onChange(newPermissions);
+    };
+
+    // Extract CRUD operation from permission name (e.g., "CreateAdministrator" -> "Create")
+    const getPermissionLabel = (permission: ServerConfig['permissions'][0], groupLabel: string) => {
+        const name = permission.name;
+        const crudPrefixes = ['Create', 'Read', 'Update', 'Delete'];
+
+        for (const prefix of crudPrefixes) {
+            if (name.startsWith(prefix)) {
+                // Check if the rest matches the group name (singular form)
+                const remainder = name.substring(prefix.length);
+                const groupSingular = groupLabel.replace(/s$/, ''); // Simple singularization
+                if (remainder.toLowerCase() === groupSingular.toLowerCase().replace(/\s/g, '')) {
+                    return prefix;
+                }
+            }
+        }
+
+        // Fallback to full name if not a CRUD operation
+        return i18n.t(name);
+    };
+
+    return (
+        <div className="w-full">
+            {/* Desktop Table View */}
+            <div className="hidden md:block border rounded-lg">
+                <Table>
+                    <TableBody>
+                        {groupedPermissions.map((section, index) => (
+                            <TableRow key={index} className="hover:bg-transparent">
+                                <TableCell className="bg-muted/50 p-3 align-top w-[150px] min-w-[150px] border-r">
+                                    <div className="space-y-2">
+                                        <div className="flex items-center gap-2">
+                                            <span className="font-semibold text-sm">
+                                                {i18n.t(section.label)}
+                                            </span>
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                        <InfoIcon className="h-3 w-3 text-muted-foreground" />
+                                                    </TooltipTrigger>
+                                                    <TooltipContent side="right" className="max-w-[250px]">
+                                                        <p className="text-xs">
+                                                            {i18n.t(section.description)}
+                                                        </p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        </div>
+                                        {section.permissions.length > 1 && !readonly && (
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={() => toggleAll(section.permissions)}
+                                                className="h-6 px-2 text-xs"
+                                            >
+                                                <Trans>Toggle all</Trans>
+                                            </Button>
+                                        )}
+                                    </div>
+                                </TableCell>
+                                {sortPermissions(section.permissions).map((permission, permIndex) => (
+                                    <TableCell
+                                        key={permission.name}
+                                        className="p-2 text-center align-top min-w-[80px]"
+                                        colSpan={section.permissions.length === 1 ? 4 : 1}
+                                    >
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <div className="flex flex-col items-center space-y-1.5">
+                                                        <Switch
+                                                            id={`${section.id}-${permission.name}`}
+                                                            checked={value.includes(permission.name)}
+                                                            onCheckedChange={checked =>
+                                                                setPermission(permission.name, checked)
+                                                            }
+                                                            disabled={readonly}
+                                                            className="scale-90"
+                                                        />
+                                                        <label
+                                                            htmlFor={`${section.id}-${permission.name}`}
+                                                            className="text-xs text-center cursor-pointer leading-tight"
+                                                        >
+                                                            {getPermissionLabel(permission, section.label)}
+                                                        </label>
+                                                    </div>
+                                                </TooltipTrigger>
+                                                <TooltipContent side="top" className="max-w-[250px]">
+                                                    <div className="text-xs">
+                                                        <div className="font-medium">
+                                                            {i18n.t(permission.name)}
+                                                        </div>
+                                                        <div className="text-accent-foreground/70 mt-1">
+                                                            {i18n.t(permission.description)}
+                                                        </div>
+                                                    </div>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </TableCell>
+                                ))}
+                                {/* Fill remaining columns if less than 4 permissions */}
+                                {section.permissions.length < 4 &&
+                                    section.permissions.length > 1 &&
+                                    Array.from({ length: 4 - section.permissions.length }).map(
+                                        (_, fillIndex) => (
+                                            <TableCell key={`fill-${fillIndex}`} className="p-3" />
+                                        ),
+                                    )}
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+
+            {/* Mobile Card View */}
+            <div className="md:hidden space-y-4">
+                {groupedPermissions.map((section, index) => (
+                    <div key={index} className="border rounded-lg p-4 bg-card">
+                        <div className="mb-3">
+                            <div className="flex items-center gap-2 mb-2">
+                                <span className="font-semibold text-sm">{i18n.t(section.label)}</span>
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <InfoIcon className="h-3 w-3 text-muted-foreground" />
+                                        </TooltipTrigger>
+                                        <TooltipContent side="right" className="max-w-[250px]">
+                                            <p className="text-xs">{i18n.t(section.description)}</p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                            </div>
+                            {section.permissions.length > 1 && !readonly && (
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => toggleAll(section.permissions)}
+                                    className="h-6 px-2 text-xs"
+                                >
+                                    <Trans>Toggle all</Trans>
+                                </Button>
+                            )}
+                        </div>
+                        <div className="grid grid-cols-2 gap-3">
+                            {sortPermissions(section.permissions).map(permission => (
+                                <div
+                                    key={permission.name}
+                                    className="flex items-center space-x-3 p-2 rounded border"
+                                >
+                                    <Switch
+                                        id={`mobile-${section.id}-${permission.name}`}
+                                        checked={value.includes(permission.name)}
+                                        onCheckedChange={checked => setPermission(permission.name, checked)}
+                                        disabled={readonly}
+                                    />
+                                    <div className="flex-1 min-w-0">
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <label
+                                                        htmlFor={`mobile-${section.id}-${permission.name}`}
+                                                        className="text-xs cursor-pointer block truncate"
+                                                    >
+                                                        {getPermissionLabel(permission, section.label)}
+                                                    </label>
+                                                </TooltipTrigger>
+                                                <TooltipContent side="top" className="max-w-[250px]">
+                                                    <div className="text-xs">
+                                                        <div className="font-medium">
+                                                            {i18n.t(permission.name)}
+                                                        </div>
+                                                        <div className="text-muted-foreground mt-1">
+                                                            {i18n.t(permission.description)}
+                                                        </div>
+                                                    </div>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// Sort permissions in CRUD order
+const sortPermissions = (permissions: ServerConfig['permissions']) => {
+    const crudOrder = ['Create', 'Read', 'Update', 'Delete'];
+
+    return [...permissions].sort((a, b) => {
+        // Find the CRUD prefix for each permission
+        const aPrefix = crudOrder.find(prefix => a.name.startsWith(prefix));
+        const bPrefix = crudOrder.find(prefix => b.name.startsWith(prefix));
+
+        // If both have CRUD prefixes, sort by CRUD order
+        if (aPrefix && bPrefix) {
+            return crudOrder.indexOf(aPrefix) - crudOrder.indexOf(bPrefix);
+        }
+
+        // If only one has CRUD prefix, put it first
+        if (aPrefix && !bPrefix) return -1;
+        if (!aPrefix && bPrefix) return 1;
+
+        // Otherwise, keep original order
+        return 0;
+    });
+};

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

package/src/app/routes/_authenticated/_roles/roles.graphql.ts

@@ -0,0 +1,76 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const roleItemFragment = graphql(`
+    fragment RoleItem on Role {
+        id
+        createdAt
+        updatedAt
+        code
+        description
+        permissions
+        channels {
+            id
+            code
+            token
+        }
+    }
+`);
+
+export const roleListQuery = graphql(
+    `
+        query RoleList($options: RoleListOptions) {
+            roles(options: $options) {
+                items {
+                    ...RoleItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [roleItemFragment],
+);
+
+export const roleDetailDocument = graphql(
+    `
+        query RoleDetail($id: ID!) {
+            role(id: $id) {
+                ...RoleItem
+            }
+        }
+    `,
+    [roleItemFragment],
+);
+
+export const createRoleDocument = graphql(`
+    mutation RoleCreate($input: CreateRoleInput!) {
+        createRole(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateRoleDocument = graphql(`
+    mutation UpdateRole($input: UpdateRoleInput!) {
+        updateRole(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteRoleDocument = graphql(`
+    mutation DeleteRole($id: ID!) {
+        deleteRole(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const deleteRolesDocument = graphql(`
+    mutation DeleteRoles($ids: [ID!]!) {
+        deleteRoles(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -0,0 +1,99 @@
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+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 { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.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 { LayersIcon, PlusIcon } from 'lucide-react';
+import { ExpandablePermissions } from './components/expandable-permissions.js';
+import { DeleteRolesBulkAction } from './components/role-bulk-actions.js';
+import { roleListQuery } from './roles.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_roles/roles')({
+    component: RoleListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Roles</Trans> }),
+});
+
+const SYSTEM_ROLES = [SUPER_ADMIN_ROLE_CODE, CUSTOMER_ROLE_CODE];
+
+function RoleListPage() {
+    return (
+        <ListPage
+            pageId="role-list"
+            title={<Trans>Roles</Trans>}
+            listQuery={roleListQuery}
+            route={Route}
+            defaultVisibility={{
+                description: true,
+                code: true,
+                channels: true,
+                permissions: true,
+            }}
+            customizeColumns={{
+                code: {
+                    cell: ({ row }) => {
+                        return (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={<RoleCodeLabel code={row.original.code} />}
+                                disabled={SYSTEM_ROLES.includes(row.original.code)}
+                            />
+                        );
+                    },
+                },
+                permissions: {
+                    cell: ({ row }) => {
+                        if (SYSTEM_ROLES.includes(row.original.code)) {
+                            return (
+                                <span className="text-muted-foreground">
+                                    <Trans>This is a default Role and cannot be modified</Trans>
+                                </span>
+                            );
+                        }
+
+                        return <ExpandablePermissions role={row.original} />;
+                    },
+                },
+                channels: {
+                    cell: ({ row }) => {
+                        if (SYSTEM_ROLES.includes(row.original.code)) {
+                            return null;
+                        }
+
+                        return (
+                            <div className="flex flex-wrap gap-2">
+                                {row.original.channels.map(channel => (
+                                    <Badge variant="secondary" key={channel.code}>
+                                        <LayersIcon /> <ChannelCodeLabel code={channel.code} />
+                                    </Badge>
+                                ))}
+                            </div>
+                        );
+                    },
+                },
+            }}
+            bulkActions={[
+                {
+                    component: DeleteRolesBulkAction,
+                    order: 500,
+                },
+            ]}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateAdministrator']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            <Trans>New Role</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}

package/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -0,0 +1,146 @@
+import { ChannelSelector } from '@/vdb/components/shared/channel-selector.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 { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import {
+    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 { PermissionsTableGrid } from './components/permissions-table-grid.js';
+import { createRoleDocument, roleDetailDocument, updateRoleDocument } from './roles.graphql.js';
+
+const pageId = 'role-detail';
+
+export const Route = createFileRoute('/_authenticated/_roles/roles_/$id')({
+    component: RoleDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: roleDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/roles', label: <Trans>Roles</Trans> },
+                isNew ? <Trans>New role</Trans> : entity?.description,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function RoleDetailPage() {
+    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: roleDetailDocument,
+        createDocument: createRoleDocument,
+        updateDocument: updateRoleDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                description: entity.description,
+                permissions: entity.permissions,
+                channelIds: entity.channels.map(channel => channel.id),
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(creatingNewEntity ? t`Successfully created role` : t`Successfully updated role`);
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(creatingNewEntity ? t`Failed to create role` : t`Failed to update role`, {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</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">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="description"
+                            label={<Trans>Description</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <PageBlock column="main" blockId="channels">
+                    <div className="space-y-8">
+                        <div className="md:grid md:grid-cols-2 gap-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="channelIds"
+                                label={<Trans>Channels</Trans>}
+                                description={
+                                    <Trans>
+                                        The selected permissions will be applied to the these channels.
+                                    </Trans>
+                                }
+                                render={({ field }) => (
+                                    <ChannelSelector
+                                        multiple={true}
+                                        value={field.value ?? []}
+                                        onChange={value => field.onChange(value)}
+                                    />
+                                )}
+                            />
+                        </div>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="permissions"
+                            label={<Trans>Permissions</Trans>}
+                            render={({ field }) => (
+                                <PermissionsTableGrid
+                                    value={field.value ?? []}
+                                    onChange={value => field.onChange(value)}
+                                />
+                            )}
+                        />
+                    </div>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_sellers/components/seller-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 { deleteSellersDocument } from '../sellers.graphql.js';
+
+export const DeleteSellersBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteSellersDocument}
+            entityName="sellers"
+            requiredPermissions={['DeleteSeller']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_sellers/sellers.graphql.ts

@@ -0,0 +1,70 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const sellerItemFragment = graphql(`
+    fragment SellerItem on Seller {
+        id
+        createdAt
+        updatedAt
+        name
+    }
+`);
+
+export const sellerListQuery = graphql(
+    `
+        query SellerList($options: SellerListOptions) {
+            sellers(options: $options) {
+                items {
+                    ...SellerItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [sellerItemFragment],
+);
+
+export const sellerDetailDocument = graphql(
+    `
+        query SellerDetail($id: ID!) {
+            seller(id: $id) {
+                ...SellerItem
+                customFields
+            }
+        }
+    `,
+    [sellerItemFragment],
+);
+
+export const updateSellerDocument = graphql(`
+    mutation UpdateSeller($input: UpdateSellerInput!) {
+        updateSeller(input: $input) {
+            id
+        }
+    }
+`);
+
+export const createSellerDocument = graphql(`
+    mutation CreateSeller($input: CreateSellerInput!) {
+        createSeller(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteSellerDocument = graphql(`
+    mutation DeleteSeller($id: ID!) {
+        deleteSeller(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const deleteSellersDocument = graphql(`
+    mutation DeleteSellers($ids: [ID!]!) {
+        deleteSellers(ids: $ids) {
+            result
+            message
+        }
+    }
+`);