@leandrosk/dashboard 3.5.5

package/src/app/routes/_authenticated/_products/products_.$id_.variants.tsx

@@ -0,0 +1,430 @@
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { Plus, Save, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+import { AddOptionGroupDialog } from './components/add-option-group-dialog.js';
+import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
+import {
+    createProductOptionDocument,
+    deleteProductVariantDocument,
+    productDetailWithVariantsDocument,
+    removeOptionGroupFromProductDocument,
+    updateProductVariantDocument,
+} from './products.graphql.js';
+
+const pageId = 'manage-product-variants';
+const getQueryKey = (id: string) => ['DetailPage', 'product', id, 'manage-variants'];
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$id_/variants')({
+    component: ManageProductVariants,
+    loader: async ({ context, params, location }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+        const result = await context.queryClient.ensureQueryData({
+            queryKey: getQueryKey(params.id),
+            queryFn: () => api.query(productDetailWithVariantsDocument, { id: params.id }),
+        });
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${params.id}`, label: result.product?.name },
+                <Trans>Manage Variants</Trans>,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+const optionGroupSchema = z.object({
+    name: z.string().min(1, 'Option group name is required'),
+    values: z.array(z.string()).min(1, 'At least one option value is required'),
+});
+
+const addOptionValueSchema = z.object({
+    name: z.string().min(1, 'Option value name is required'),
+});
+
+type AddOptionValueFormValues = z.infer<typeof addOptionValueSchema>;
+type Variant = NonNullable<ResultOf<typeof productDetailWithVariantsDocument>['product']>['variants'][0];
+
+function AddOptionValueDialog({
+    groupId,
+    groupName,
+    onSuccess,
+}: Readonly<{
+    groupId: string;
+    groupName: string;
+    onSuccess?: () => void;
+}>) {
+    const [open, setOpen] = useState(false);
+    const { t } = useLingui();
+
+    const form = useForm<AddOptionValueFormValues>({
+        resolver: zodResolver(addOptionValueSchema),
+        defaultValues: {
+            name: '',
+        },
+    });
+
+    const createOptionMutation = useMutation({
+        mutationFn: api.mutate(createProductOptionDocument),
+        onSuccess: () => {
+            toast.success(t`Successfully added option value`);
+            setOpen(false);
+            form.reset();
+            onSuccess?.();
+        },
+        onError: error => {
+            toast.error(t`Failed to add option value`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
+        },
+    });
+
+    const onSubmit = (values: AddOptionValueFormValues) => {
+        createOptionMutation.mutate({
+            input: {
+                productOptionGroupId: groupId,
+                code: values.name.toLowerCase().replace(/\s+/g, '-'),
+                translations: [
+                    {
+                        languageCode: 'en',
+                        name: values.name,
+                    },
+                ],
+            },
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button size="icon" variant="ghost">
+                    <Plus className="h-3 w-3" />
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Add option value to {groupName}</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Option value name</Trans>}
+                            render={({ field }) => (
+                                <Input {...field} placeholder={t`e.g., Red, Large, Cotton`} />
+                            )}
+                        />
+                        <DialogFooter>
+                            <Button type="submit" disabled={createOptionMutation.isPending}>
+                                <Trans>Add option value</Trans>
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+function ManageProductVariants() {
+    const { id } = Route.useParams();
+    const { t } = useLingui();
+    const [optionsToAddToVariant, setOptionsToAddToVariant] = useState<
+        Record<string, Record<string, string>>
+    >({});
+
+    const { data: productData, refetch } = useQuery({
+        queryFn: () => api.query(productDetailWithVariantsDocument, { id }),
+        queryKey: getQueryKey(id),
+    });
+
+    const updateVariantMutation = useMutation({
+        mutationFn: api.mutate(updateProductVariantDocument),
+        onSuccess: () => {
+            toast.success(t`Variant updated successfully`);
+            refetch();
+        },
+    });
+
+    const deleteVariantMutation = useMutation({
+        mutationFn: api.mutate(deleteProductVariantDocument),
+        onSuccess: () => {
+            toast.success(t`Variant deleted successfully`);
+            refetch();
+        },
+    });
+
+    const removeOptionGroupMutation = useMutation({
+        mutationFn: api.mutate(removeOptionGroupFromProductDocument),
+        onSuccess: () => {
+            toast.success(t`Option group removed`);
+            refetch();
+        },
+    });
+
+    const setOptionToAddToVariant = (variantId: string, groupId: string, optionId: string | undefined) => {
+        if (!optionId) {
+            const updated = { ...optionsToAddToVariant };
+            if (updated[variantId]) {
+                delete updated[variantId][groupId];
+            }
+            setOptionsToAddToVariant(updated);
+        } else {
+            setOptionsToAddToVariant(prev => ({
+                ...prev,
+                [variantId]: {
+                    ...prev[variantId],
+                    [groupId]: optionId,
+                },
+            }));
+        }
+    };
+
+    const addOptionToVariant = async (variant: Variant) => {
+        const optionsToAdd = optionsToAddToVariant[variant.id];
+        if (!optionsToAdd) return;
+
+        const existingOptionIds = variant.options.map(o => o.id);
+        const newOptionIds = Object.values(optionsToAdd).filter(Boolean);
+        const allOptionIds = [...existingOptionIds, ...newOptionIds];
+
+        await updateVariantMutation.mutateAsync({
+            input: {
+                id: variant.id,
+                optionIds: allOptionIds,
+            },
+        });
+
+        setOptionsToAddToVariant(prev => {
+            const updated = { ...prev };
+            delete updated[variant.id];
+            return updated;
+        });
+    };
+
+    const deleteVariant = async (variant: Variant) => {
+        if (confirm(t`Are you sure you want to delete this variant?`)) {
+            await deleteVariantMutation.mutateAsync({ id: variant.id });
+        }
+    };
+
+    const getOption = (variant: Variant, groupId: string) => {
+        return variant.options.find(o => o.groupId === groupId);
+    };
+
+    if (!productData?.product) {
+        return null;
+    }
+
+    return (
+        <Page pageId={pageId}>
+            <PageTitle>
+                {productData.product.name} - <Trans>Manage variants</Trans>
+            </PageTitle>
+            <PageLayout>
+                <PageBlock column="main" blockId="option-groups" title={<Trans>Option Groups</Trans>}>
+                    <div className="space-y-4 mb-4">
+                        {productData.product.optionGroups.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">
+                                <Trans>
+                                    No option groups defined yet. Add option groups to create different
+                                    variants of your product (e.g., Size, Color, Material)
+                                </Trans>
+                            </p>
+                        ) : (
+                            productData.product.optionGroups.map(group => (
+                                <div key={group.id} className="grid grid-cols-12 gap-4 items-start">
+                                    <div className="col-span-3">
+                                        <label className="text-sm font-medium">
+                                            <Trans>Option</Trans>
+                                        </label>
+                                        <Input value={group.name} disabled />
+                                    </div>
+                                    <div className="col-span-8">
+                                        <label className="text-sm font-medium">
+                                            <Trans>Option values</Trans>
+                                        </label>
+                                        <div className="flex flex-wrap gap-2 mt-1">
+                                            {group.options.map(option => (
+                                                <Badge key={option.id} variant="secondary">
+                                                    {option.name}
+                                                </Badge>
+                                            ))}
+                                            <AddOptionValueDialog
+                                                groupId={group.id}
+                                                groupName={group.name}
+                                                onSuccess={() => refetch()}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                    <AddOptionGroupDialog productId={id} onSuccess={() => refetch()} />
+                </PageBlock>
+
+                <PageBlock column="main" blockId="product-variants" title={<Trans>Variants</Trans>}>
+                    <div className="mb-4">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>
+                                        <Trans>Name</Trans>
+                                    </TableHead>
+                                    <TableHead>
+                                        <Trans>SKU</Trans>
+                                    </TableHead>
+                                    {productData.product.optionGroups.map(group => (
+                                        <TableHead key={group.id}>{group.name}</TableHead>
+                                    ))}
+                                    <TableHead>
+                                        <Trans>Delete</Trans>
+                                    </TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {productData.product.variants.map(variant => (
+                                    <TableRow key={variant.id}>
+                                        <TableCell>{variant.name}</TableCell>
+                                        <TableCell>{variant.sku}</TableCell>
+                                        {productData.product?.optionGroups.map(group => {
+                                            const option = getOption(variant, group.id);
+                                            return (
+                                                <TableCell key={group.id}>
+                                                    {option ? (
+                                                        <Badge variant="outline">{option.name}</Badge>
+                                                    ) : group.options.length === 1 ? (
+                                                        <div className="flex items-center gap-2">
+                                                            <Badge variant="outline">
+                                                                {group.options[0].name}
+                                                            </Badge>
+                                                            <Button
+                                                                size="sm"
+                                                                disabled={updateVariantMutation.isPending}
+                                                                onClick={() =>
+                                                                    updateVariantMutation.mutate({
+                                                                        input: {
+                                                                            id: variant.id,
+                                                                            optionIds: [
+                                                                                ...variant.options.map(
+                                                                                    o => o.id,
+                                                                                ),
+                                                                                group.options[0].id,
+                                                                            ],
+                                                                        },
+                                                                    })
+                                                                }
+                                                            >
+                                                                <Save className="h-4 w-4" />
+                                                            </Button>
+                                                        </div>
+                                                    ) : (
+                                                        <div className="flex items-center gap-2">
+                                                            <Select
+                                                                value={
+                                                                    optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ] || ''
+                                                                }
+                                                                onValueChange={value =>
+                                                                    setOptionToAddToVariant(
+                                                                        variant.id,
+                                                                        group.id,
+                                                                        value || undefined,
+                                                                    )
+                                                                }
+                                                            >
+                                                                <SelectTrigger className="w-32">
+                                                                    <SelectValue />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {group.options.map(opt => (
+                                                                        <SelectItem
+                                                                            key={opt.id}
+                                                                            value={opt.id}
+                                                                        >
+                                                                            {opt.name}
+                                                                        </SelectItem>
+                                                                    ))}
+                                                                </SelectContent>
+                                                            </Select>
+                                                            <Button
+                                                                size="sm"
+                                                                variant={
+                                                                    optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ]
+                                                                        ? 'default'
+                                                                        : 'outline'
+                                                                }
+                                                                disabled={
+                                                                    !optionsToAddToVariant[variant.id]?.[
+                                                                        group.id
+                                                                    ]
+                                                                }
+                                                                onClick={() => addOptionToVariant(variant)}
+                                                            >
+                                                                <Save className="h-4 w-4" />
+                                                            </Button>
+                                                        </div>
+                                                    )}
+                                                </TableCell>
+                                            );
+                                        })}
+                                        <TableCell>
+                                            <Button
+                                                size="sm"
+                                                variant="ghost"
+                                                onClick={() => deleteVariant(variant)}
+                                            >
+                                                <Trash2 className="h-4 w-4 text-destructive" />
+                                            </Button>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </div>
+
+                    <AddProductVariantDialog
+                        productId={id}
+                        onSuccess={() => {
+                            refetch();
+                        }}
+                    />
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$id.tsx

@@ -0,0 +1,177 @@
+import { SlugInput } from '@/vdb/components/data-input/index.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 { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.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 { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { ProductOptionsTable } from './components/product-options-table.js';
+import {
+    createProductOptionGroupDocument,
+    productIdNameDocument,
+    productOptionGroupDetailDocument,
+    updateProductOptionGroupDocument,
+} from './product-option-groups.graphql.js';
+
+const pageId = 'product-option-group-detail';
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$productId/option-groups/$id')({
+    component: ProductOptionGroupDetailPage,
+    loader: async ({ context, params }: { context: any; params: any; location: ParsedLocation }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(productOptionGroupDetailDocument),
+            pageId,
+        );
+        const result = await context.queryClient.ensureQueryData(
+            getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+        );
+        const productResult = await context.queryClient.fetchQuery({
+            queryKey: [pageId, 'productIdName', params.productId],
+            queryFn: () => api.query(productIdNameDocument, { id: params.productId }),
+        });
+        const entityName = 'ProductOptionGroup';
+
+        if (!result.productOptionGroup) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${productResult.product.id}`, label: productResult.product.name },
+                { path: `/products/${productResult.product.id}`, label: <Trans>Option Groups</Trans> },
+                result.productOptionGroup?.name,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProductOptionGroupDetailPage() {
+    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: productOptionGroupDetailDocument,
+        createDocument: createProductOptionGroupDocument,
+        updateDocument: updateProductOptionGroupDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                options: [],
+                customFields: entity.customFields,
+            };
+        },
+        transformCreateInput: values => {
+            return {
+                ...values,
+                options: [],
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(
+                creatingNewEntity
+                    ? t`Successfully created product option group`
+                    : t`Successfully updated product option group`,
+            );
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(
+                creatingNewEntity
+                    ? t`Failed to create product option group`
+                    : t`Failed to update product option group`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New product option group</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <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>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="ProductOptionGroup"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="ProductOptionGroup" control={form.control} />
+                {entity && (
+                    <PageBlock column="main" blockId="product-options" title={<Trans>Product Options</Trans>}>
+                        <ProductOptionsTable productOptionGroupId={entity?.id} />
+                    </PageBlock>
+                )}
+            </PageLayout>
+        </Page>
+    );
+}