@deenruv/admin-dashboard 1.0.0

package/dist/pages/customers/Detail.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useValidators, createDeenruvForm, DetailView, useMutation, useTranslation, } from '@deenruv/react-ui-devkit';
+import { CustomerDetailView } from "./_components/CustomerDetailView";
+import { CustomerDetailSidebar } from "./_components/CustomerDetailSidebar";
+import { OrdersTab } from "./_components/OrdersTab";
+import { HistoryTab } from "./_components/HistoryTab";
+import { $, Permission, scalars, typedGql } from '@deenruv/admin-types';
+import { useMemo } from 'react';
+const CreateCustomerMutation = typedGql('mutation', { scalars })({
+    createCustomer: [{ input: $('input', 'CreateCustomerInput!') }, { '...on Customer': { id: true } }],
+});
+const UpdateCustomerMutation = typedGql('mutation', { scalars })({
+    updateCustomer: [{ input: $('input', 'UpdateCustomerInput!') }, { '...on Customer': { id: true } }],
+});
+const RemoveCustomerMutation = typedGql('mutation', { scalars })({
+    deleteCustomer: [{ id: $('id', 'ID!') }, { result: true }],
+});
+export const CustomersDetailPage = () => {
+    const { id } = useParams();
+    const { t } = useTranslation('customers');
+    const [create] = useMutation(CreateCustomerMutation);
+    const [update] = useMutation(UpdateCustomerMutation);
+    const [remove] = useMutation(RemoveCustomerMutation);
+    const { stringValidator, emailValidator } = useValidators();
+    const defaultTabs = useMemo(() => {
+        const tabs = [];
+        if (id) {
+            tabs.push({ label: t('orders.header'), name: 'orders', component: _jsx(OrdersTab, {}), hideSidebar: true });
+            tabs.push({ label: t('history.header'), name: 'history', component: _jsx(HistoryTab, {}), hideSidebar: true });
+        }
+        return tabs;
+    }, [id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "customers-detail-view", main: {
+                name: 'customer',
+                label: t('customer'),
+                component: _jsx(CustomerDetailView, {}),
+                sidebar: _jsx(CustomerDetailSidebar, {}),
+                form: createDeenruvForm({
+                    key: 'CreateCustomerInput',
+                    keys: ['title', 'phoneNumber', 'firstName', 'lastName', 'emailAddress', 'customFields'],
+                    config: {
+                        firstName: stringValidator(t('validation.firstNameRequired')),
+                        lastName: stringValidator(t('validation.lastNameRequired')),
+                        emailAddress: emailValidator,
+                    },
+                    onSubmitted: (data) => {
+                        const sharedInput = {
+                            emailAddress: data.emailAddress?.validatedValue,
+                            firstName: data.firstName?.validatedValue,
+                            lastName: data.lastName?.validatedValue,
+                            phoneNumber: data.phoneNumber?.validatedValue,
+                            title: data.title?.validatedValue,
+                            ...('customFields' in data && data.customFields?.validatedValue
+                                ? { customFields: data.customFields.validatedValue }
+                                : {}),
+                        };
+                        if (!sharedInput.emailAddress || !sharedInput.firstName || !sharedInput.lastName)
+                            return;
+                        const input = sharedInput;
+                        return id ? update({ input: { id, ...input } }) : create({ input });
+                    },
+                    onDeleted: () => {
+                        if (id)
+                            return remove({ id });
+                        else
+                            throw new Error('No id');
+                    },
+                }),
+            }, defaultTabs: defaultTabs, permissions: {
+                create: Permission.CreateCustomer,
+                edit: Permission.UpdateCustomer,
+                delete: Permission.DeleteCustomer,
+            } }) }));
+};

package/dist/pages/customers/List.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { apiClient, deepMerge, DetailList, Routes, BooleanCell, TableLabel, ListBadge, ListLocations, useTranslation, EntityChannelManagementBulkAction, } from '@deenruv/react-ui-devkit';
+const tableId = 'customers-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        customers: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response['customers'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteCustomers } = await apiClient('mutation')({
+            deleteCustomers: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteCustomers.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const CustomersListPage = () => {
+    const { t } = useTranslation('table');
+    return (_jsx(DetailList, { detailLinkColumn: "id", filterFields: [
+            { key: 'phoneNumber', operator: 'StringOperators' },
+            { key: 'emailAddress', operator: 'StringOperators' },
+            { key: 'firstName', operator: 'StringOperators' },
+            { key: 'lastName', operator: 'StringOperators' },
+            { key: 'postalCode', operator: 'StringOperators' },
+            { key: 'title', operator: 'StringOperators' },
+        ], searchFields: ['firstName', 'lastName', 'emailAddress', 'postalCode'], hideColumns: ['customFields', 'user', 'title'], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], additionalColumns: [
+            {
+                id: 'verified',
+                accessorKey: 'verified',
+                header: () => _jsx(TableLabel, { children: t('columns.verified') }),
+                cell: ({ row }) => _jsx(BooleanCell, { value: !!row.original.user?.verified }),
+            },
+            {
+                id: 'fullName',
+                accessorKey: 'fullName',
+                header: () => _jsx(TableLabel, { children: t('columns.fullName') }),
+                cell: ({ row }) => {
+                    return _jsx(ListBadge, { children: `${row.original.firstName} ${row.original.lastName}` });
+                },
+            },
+        ], entityName: 'Customer', route: Routes['customers'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateCustomer], deletePermissions: [Permission.DeleteCustomer] }));
+};

package/dist/pages/customers/_components/Address.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardFooter, Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, useMutation, Tooltip, TooltipTrigger, TooltipContent, useTranslation, } from '@deenruv/react-ui-devkit';
+import { AddressDialog } from "./AddressDialog";
+import { CreditCard, MoreHorizontal, Trash, Truck } from 'lucide-react';
+import { typedGql, scalars, $ } from '@deenruv/admin-types';
+import { toast } from 'sonner';
+const DeleteCustomerAddressMutation = typedGql('mutation', { scalars })({
+    deleteCustomerAddress: [{ id: $('addressId', 'ID!') }, { success: true }],
+});
+const SetAsDefaultBillingAddressMutation = typedGql('mutation', { scalars })({
+    updateCustomerAddress: [
+        {
+            input: {
+                id: $('addressId', 'ID!'),
+                defaultBillingAddress: true,
+            },
+        },
+        { id: true },
+    ],
+});
+const SetAsDefaultShippingAddressMutation = typedGql('mutation', { scalars })({
+    updateCustomerAddress: [
+        {
+            input: {
+                id: $('addressId', 'ID!'),
+                defaultShippingAddress: true,
+            },
+        },
+        { id: true },
+    ],
+});
+export const Address = ({ address, customerId, onActionCompleted }) => {
+    const { t } = useTranslation('customers');
+    const [deleteAddress] = useMutation(DeleteCustomerAddressMutation);
+    const [setAsDefaultBillingAddress] = useMutation(SetAsDefaultBillingAddressMutation);
+    const [setAsDefaultShippingAddress] = useMutation(SetAsDefaultShippingAddressMutation);
+    return (_jsxs(Card, { className: "bg-secondary text-primary flex w-56 flex-col justify-between", children: [_jsxs(CardContent, { className: "mt-4 flex flex-col gap-1", children: [_jsx("h5", { className: "mb-2", children: address.streetLine1 }), _jsx("span", { className: "block text-sm", children: address?.fullName }), _jsxs("span", { className: "block text-sm", children: [address.streetLine1, " ", address?.streetLine2] }), _jsxs("span", { className: "block text-sm", children: [address.city, " ", address.postalCode, " ", address.province, " ", address.country.code] }), _jsxs("span", { className: "block text-sm", children: [address.company, " ", address.phoneNumber && t('addresses.phoneNumberShort', { value: address.phoneNumber })] })] }), _jsxs(CardFooter, { className: "justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [address.defaultBillingAddress && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(CreditCard, { size: 20 }) }), _jsx(TooltipContent, { children: t('selectAddress.defaultBilling') })] })), address.defaultShippingAddress && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Truck, { size: 20 }) }), _jsx(TooltipContent, { children: t('selectAddress.defaultShipping') })] }))] }), _jsxs("div", { className: "flex items-center", children: [_jsx(AddressDialog, { address: address, customerId: customerId, onActionCompleted: onActionCompleted, children: _jsx(Button, { variant: "outline", className: "h-8 px-8", children: t('addresses.edit') }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "size-8 p-0", children: [_jsx("span", { className: "sr-only", children: t('selectAddress.more') }), _jsx(MoreHorizontal, { className: "size-4" })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { className: "flex items-center gap-2", disabled: address.defaultBillingAddress ?? undefined, onClick: () => setAsDefaultBillingAddress({ addressId: address.id }).then((resp) => {
+                                                    if (resp.updateCustomerAddress.id) {
+                                                        toast.success(t('selectAddress.addressSuccessSetAsDefaultBillingToast'));
+                                                        onActionCompleted();
+                                                    }
+                                                    else
+                                                        toast.error(t('selectAddress.addressFailedSetAsDefaultToast'));
+                                                }), children: [_jsx(CreditCard, { size: 16 }), t('selectAddress.setAsDefaultBilling')] }), _jsxs(DropdownMenuItem, { className: "flex items-center gap-2", disabled: address.defaultShippingAddress ?? undefined, onClick: () => setAsDefaultShippingAddress({ addressId: address.id }).then((resp) => {
+                                                    if (resp.updateCustomerAddress.id) {
+                                                        toast.success(t('selectAddress.addressSuccessSetAsDefaultShippingToast'));
+                                                        onActionCompleted();
+                                                    }
+                                                    else
+                                                        toast.error(t('selectAddress.addressFailedSetAsDefaultToast'));
+                                                }), children: [_jsx(Truck, { size: 16 }), t('selectAddress.setAsDefaultShipping')] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onClick: () => deleteAddress({ addressId: address.id }).then((resp) => {
+                                                    if (resp.deleteCustomerAddress.success) {
+                                                        toast.success(t('selectAddress.addressSuccessDeleteToast'));
+                                                        onActionCompleted();
+                                                    }
+                                                    else
+                                                        toast.error(t('selectAddress.addressFailedDeleteToast'));
+                                                }), children: _jsxs("div", { className: "flex items-center gap-2 text-red-400 hover:text-red-400 dark:hover:text-red-400", children: [_jsx(Trash, { size: 16 }), t('selectAddress.deleteAddress')] }) })] })] })] })] })] }));
+};

package/dist/pages/customers/_components/AddressDialog.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, useMutation, useTranslation, } from '@deenruv/react-ui-devkit';
+import { typedGql, scalars, $ } from '@deenruv/admin-types';
+import { toast } from 'sonner';
+import { AddressForm } from "./AddressForm.js";
+import { addressBaseSelector } from "../../../graphql/draft_order.js";
+export const CreateCustomerAddressMutation = typedGql('mutation', { scalars })({
+    createCustomerAddress: [
+        { customerId: $('customerId', 'ID!'), input: $('input', 'CreateAddressInput!') },
+        {
+            id: true,
+            ...addressBaseSelector,
+        },
+    ],
+});
+export const UpdateCustomerAddressMutation = typedGql('mutation', { scalars })({
+    updateCustomerAddress: [{ input: $('input', 'UpdateAddressInput!') }, { id: true }],
+});
+export const AddressDialog = ({ address, customerId, onActionCompleted, children, }) => {
+    const formRef = useRef(null);
+    const [createAddress] = useMutation(CreateCustomerAddressMutation);
+    const [updateAddress] = useMutation(UpdateCustomerAddressMutation);
+    const { t } = useTranslation('customers');
+    const [open, setOpen] = useState(false);
+    const isEdit = useMemo(() => !!address, [address]);
+    const [input, setInput] = useState();
+    const handleSubmit = useCallback(async () => {
+        if (!input)
+            return;
+        const isValid = formRef.current?.validate();
+        console.log('VALID', isValid);
+        if (!isValid)
+            return;
+        isEdit
+            ? await updateAddress({ input: { ...input, id: address?.id } }).then((resp) => {
+                if (resp.updateCustomerAddress.id) {
+                    setOpen(false);
+                    toast.success(t('selectAddress.addressSuccessUpdateToast'));
+                    onActionCompleted();
+                }
+                else
+                    toast.error(t('selectAddress.addressFailedUpdateToast'));
+            })
+            : await createAddress({ customerId, input }).then((resp) => {
+                if (resp.createCustomerAddress.id) {
+                    setOpen(false);
+                    toast.success(t('selectAddress.addressSuccessCreateToast'));
+                    onActionCompleted();
+                }
+                else
+                    toast.error(t('selectAddress.addressFailedCreateToast'));
+            });
+    }, [input, isEdit, customerId]);
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: children }), _jsxs(DialogContent, { className: "flex max-h-[80vh] flex-col", children: [_jsx(DialogHeader, { className: "mb-4", children: _jsx(DialogTitle, { children: t(isEdit ? 'selectAddress.editAddress' : 'selectAddress.createAddress') }) }), _jsx(AddressForm, { ref: formRef, initialValues: address, onInputChange: setInput, addressId: address?.id }), _jsxs(DialogFooter, { className: "mt-2", children: [_jsx(Button, { className: "w-min place-self-end", onClick: handleSubmit, children: t('addresses.save') }), _jsx(Button, { className: "w-min place-self-end", onClick: () => setOpen(false), children: t('addresses.cancel') })] })] })] }));
+};

package/dist/pages/customers/_components/AddressForm.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { Input, SimpleSelect, useGFFLP, useServer, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+export const AddressForm = forwardRef(({ initialValues: address, addressId, onInputChange }, ref) => {
+    const { t } = useTranslation('customers');
+    const countries = useServer((p) => p.countries);
+    const { state, setField, checkIfAllFieldsAreValid } = useGFFLP('CreateAddressInput', 'city', 'company', 'countryCode', 'fullName', 'phoneNumber', 'postalCode', 'streetLine1', 'streetLine2', 'province', 'customFields')({
+        fullName: {
+            initialValue: address?.fullName,
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.nameRequired')];
+            },
+        },
+        company: { initialValue: address?.company },
+        streetLine1: {
+            initialValue: address?.streetLine1,
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.streetRequired')];
+            },
+        },
+        streetLine2: { initialValue: address?.streetLine2 },
+        postalCode: {
+            initialValue: address?.postalCode,
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.postalCodeRequired')];
+            },
+        },
+        countryCode: {
+            initialValue: address?.country.code,
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.countryRequired')];
+            },
+        },
+        phoneNumber: {
+            initialValue: address?.phoneNumber,
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.phoneNumberRequired')];
+            },
+        },
+        city: {
+            initialValue: address?.city,
+            validate: (v) => {
+                if (!v || v === '')
+                    return [t('selectAddress.cityRequired')];
+            },
+        },
+        province: { initialValue: address?.province },
+    });
+    useImperativeHandle(ref, () => ({
+        validate: checkIfAllFieldsAreValid,
+    }));
+    useEffect(() => {
+        const input = {
+            countryCode: state.countryCode.validatedValue,
+            streetLine1: state.streetLine1.validatedValue,
+            streetLine2: state.streetLine2.validatedValue,
+            city: state.city.validatedValue,
+            company: state.company.validatedValue,
+            fullName: state.fullName.validatedValue,
+            phoneNumber: state.phoneNumber.validatedValue,
+            postalCode: state.postalCode.validatedValue,
+            province: state.province?.validatedValue,
+            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+        };
+        onInputChange(input);
+    }, [state]);
+    return (_jsxs("form", { className: "flex flex-col gap-3 overflow-auto", children: [_jsx(Input, { label: t('selectAddress.inputNameLabel'), placeholder: t('selectAddress.inputNamePlaceholder'), value: state.fullName?.value ?? undefined, defaultValue: state?.fullName?.value ?? undefined, onChange: (e) => setField('fullName', e.target.value), errors: state.fullName?.errors, required: true }), _jsx(Input, { label: t('selectAddress.inputCompanyLabel'), placeholder: t('selectAddress.inputCompanyPlaceholder'), value: state.company?.value ?? undefined, defaultValue: state?.company?.value ?? undefined, onChange: (e) => setField('company', e.target.value), errors: state.company?.errors }), _jsx(Input, { label: t('selectAddress.inputStreetLabel'), placeholder: t('selectAddress.inputStreetPlaceholder'), value: state.streetLine1?.value, defaultValue: state?.streetLine1?.value, onChange: (e) => setField('streetLine1', e.target.value), errors: state.streetLine1?.errors, required: true }), _jsx(Input, { label: t('selectAddress.inputStreet2Label'), placeholder: t('selectAddress.inputStreet2Placeholder'), value: state.streetLine2?.value ?? undefined, defaultValue: state?.streetLine2?.value ?? undefined, onChange: (e) => setField('streetLine2', e.target.value), errors: state.streetLine2?.errors }), _jsx(Input, { label: t('selectAddress.inputCityLabel'), placeholder: t('selectAddress.inputCityPlaceholder'), defaultValue: state?.city?.value ?? undefined, onChange: (e) => setField('city', e.target.value), errors: state.city?.errors, required: true }), _jsx(Input, { label: t('selectAddress.inputProvinceLabel'), placeholder: t('selectAddress.inputProvincePlaceholder'), defaultValue: state?.province?.value ?? undefined, onChange: (e) => setField('province', e.target.value), errors: state.province?.errors }), _jsx(Input, { label: t('selectAddress.inputPostalLabel'), placeholder: t('selectAddress.inputPostalPlaceholder'), value: state.postalCode?.value ?? undefined, defaultValue: state?.postalCode?.value ?? undefined, onChange: (e) => setField('postalCode', e.target.value), errors: state.postalCode?.errors, required: true }), _jsx(Input, { label: t('selectAddress.inputPhoneLabel'), placeholder: t('selectAddress.inputPhonePlaceholder'), value: state.phoneNumber?.value ?? undefined, defaultValue: state?.phoneNumber?.value ?? undefined, onChange: (e) => setField('phoneNumber', e.target.value), errors: state.phoneNumber?.errors, required: true }), _jsx(SimpleSelect, { label: t('selectAddress.countrySelectLabel'), options: countries.map((c) => ({ label: c.name, value: c.code })), value: state.countryCode?.value, onValueChange: (value) => setField('countryCode', value), errors: state.countryCode?.errors, required: true }), addressId && (_jsx(EntityCustomFields, { id: addressId, entityName: "address", hideButton: true, initialValues: address && 'customFields' in address
+                    ? { customFields: address.customFields }
+                    : { customFields: {} }, onChange: (cf) => {
+                    setField('customFields', cf);
+                }, additionalData: {}, withoutBorder: true }))] }));
+});

package/dist/pages/customers/_components/AddressesCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, CardIcons, CustomCard, useTranslation } from '@deenruv/react-ui-devkit';
+import { Address } from "./Address";
+import { PlusCircle } from 'lucide-react';
+import { AddressDialog } from "./AddressDialog";
+export const AddressesCard = ({ addresses, customerId, onActionCompleted }) => {
+    const { t } = useTranslation('customers');
+    return (_jsx(CustomCard, { title: t('addresses.header'), icon: _jsx(CardIcons.address, {}), color: "green", bottomRight: customerId && (_jsx(AddressDialog, { customerId: customerId, onActionCompleted: onActionCompleted, children: _jsxs(Button, { variant: "secondary", className: "flex items-center gap-2", children: [_jsx(PlusCircle, {}), t('addresses.addBtn')] }) })), children: _jsx("div", { className: "flex gap-4", children: addresses?.length ? (addresses?.map((a) => _jsx(Address, { onActionCompleted: onActionCompleted, address: a, customerId: customerId }))) : (_jsx("p", { className: "w-full text-center", children: t(customerId ? 'addresses.empty' : 'addresses.createCustomerFirst') })) }) }));
+};

package/dist/pages/customers/_components/CustomerDetailSidebar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDetailView } from '@deenruv/react-ui-devkit';
+import { VerifiedCard } from "./VerifiedCard";
+import { CustomerGroupsCard } from "./CustomerGroupsCard";
+const CUSTOMER_FORM_KEYS = ['CreateCustomerInput'];
+export const CustomerDetailSidebar = () => {
+    const { id, entity } = useDetailView('customers-detail-view', ...CUSTOMER_FORM_KEYS);
+    return (_jsx("main", { className: "min-h-96", children: _jsxs("div", { className: "flex flex-col gap-3", children: [id && _jsx(VerifiedCard, { verified: !!entity?.user?.verified }), _jsx(CustomerGroupsCard, { customerId: id, groups: entity?.groups })] }) }));
+};

package/dist/pages/customers/_components/CustomerDetailView.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { EntityCustomFields, useSettings, useDetailView, DetailViewMarker, } from '@deenruv/react-ui-devkit';
+import { PersonalDataCard } from "./PersonalDataCard";
+import { AddressesCard } from "./AddressesCard";
+const CUSTOMER_FORM_KEYS = [
+    'CreateCustomerInput',
+    'title',
+    'phoneNumber',
+    'firstName',
+    'lastName',
+    'emailAddress',
+    'customFields',
+];
+export const CustomerDetailView = () => {
+    const [addresses, setAddresses] = useState([]);
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { form, entity, id, fetchEntity } = useDetailView('customers-detail-view', ...CUSTOMER_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    const handleFetchEntity = useCallback(async () => {
+        const res = await fetchEntity();
+        if (!res)
+            return;
+        setField('title', res.title);
+        setField('phoneNumber', res.phoneNumber);
+        setField('firstName', res.firstName);
+        setField('lastName', res.lastName);
+        setField('emailAddress', res.emailAddress);
+        if ('customFields' in res)
+            setField('customFields', res.customFields);
+        setAddresses(res.addresses);
+    }, []);
+    useEffect(() => {
+        (async () => {
+            await handleFetchEntity();
+        })();
+    }, [contentLng]);
+    return (_jsx("main", { className: "min-h-96", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(PersonalDataCard, { setField: setField, state: state }), _jsx(DetailViewMarker, { position: 'customers-detail-view' }), _jsx(EntityCustomFields, { entityName: "customer", id: id, hideButton: true, additionalData: {}, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} }, onChange: (cf) => {
+                        setField('customFields', cf);
+                    } }), id && _jsx(AddressesCard, { addresses: addresses, customerId: id, onActionCompleted: handleFetchEntity })] }) }));
+};

package/dist/pages/customers/_components/CustomerGroupsCard.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { CardIcons, CustomCard, MultipleSelector, useMutation, useQuery, useTranslation, } from '@deenruv/react-ui-devkit';
+import { typedGql, scalars, $ } from '@deenruv/admin-types';
+import { toast } from 'sonner';
+const CustomerGroupsQuery = typedGql('query', { scalars })({
+    customerGroups: [{}, { items: { id: true, name: true } }],
+});
+const AddCustomerToGroupMutation = typedGql('mutation', { scalars })({
+    addCustomersToGroup: [
+        { customerGroupId: $('groupId', 'ID!'), customerIds: $('customerIds', '[ID!]!') },
+        { id: true },
+    ],
+});
+const RemoveCustomerFromGroupMutation = typedGql('mutation', { scalars })({
+    removeCustomersFromGroup: [
+        { customerGroupId: $('groupId', 'ID!'), customerIds: $('customerIds', '[ID!]!') },
+        { id: true },
+    ],
+});
+const mapToOptions = (groups) => groups.map((g) => ({ value: g.id, label: g.name }));
+export const CustomerGroupsCard = ({ groups, customerId }) => {
+    const { t } = useTranslation('customers');
+    const { data } = useQuery(CustomerGroupsQuery);
+    const [addToGroup] = useMutation(AddCustomerToGroupMutation);
+    const [removeFromGroup] = useMutation(RemoveCustomerFromGroupMutation);
+    const [value, setValue] = useState(mapToOptions(groups || []));
+    const options = useMemo(() => mapToOptions(data?.customerGroups.items || []), [data]);
+    const handleChange = useCallback((newValue) => {
+        if (!customerId)
+            return;
+        const added = newValue.find((item) => !value.includes(item));
+        const removed = value.find((item) => !newValue.includes(item));
+        if (added)
+            addToGroup({ customerIds: [customerId], groupId: added.value }).then(() => {
+                setValue((prev) => [...prev, added]);
+                toast.success(t('customerGroups.toastAdded'));
+            });
+        else if (removed)
+            removeFromGroup({ customerIds: [customerId], groupId: removed.value }).then(() => {
+                setValue((prev) => prev.filter((i) => i.value !== removed.value));
+                toast.success(t('customerGroups.toastRemoved'));
+            });
+    }, [value]);
+    return (_jsx(CustomCard, { title: t('customerGroups.header'), icon: _jsx(CardIcons.users, {}), color: "gray", children: _jsx("div", { className: "flex flex-col gap-4", children: customerId ? (_jsx("div", { className: "flex gap-2", children: _jsx(MultipleSelector, { options: options, value: value, placeholder: t('customerGroups.placeholder'), onChange: handleChange, hideClearAllButton: true, className: "h-24" }) })) : (_jsx("p", { children: t('customerGroups.createCustomerFirst') })) }) }));
+};

package/dist/pages/customers/_components/HistoryTab.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { CardIcons, CustomCard, HistorySelector, useDetailView, useLazyQuery, useMutation, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { History } from "../../../components";
+import { typedGql, scalars, $ } from '@deenruv/admin-types';
+import { toast } from 'sonner';
+const CUSTOMER_FORM_KEYS = ['CreateCustomerInput'];
+const CustomerGroupsQuery = typedGql('query', { scalars })({
+    customer: [{ id: $('id', 'ID!') }, { history: [{}, HistorySelector] }],
+});
+const AddNoteToCustomerMutation = typedGql('mutation', { scalars })({
+    addNoteToCustomer: [
+        {
+            input: $('input', 'AddNoteToCustomerInput!'),
+        },
+        { id: true },
+    ],
+});
+const EditCustomerNoteMutation = typedGql('mutation', { scalars })({
+    updateCustomerNote: [
+        {
+            input: $('input', 'UpdateCustomerNoteInput!'),
+        },
+        { id: true },
+    ],
+});
+const DeleteStockLocationMutation = typedGql('mutation', { scalars })({
+    deleteCustomerNote: [
+        {
+            id: $('id', 'ID!'),
+        },
+        { message: true, result: true },
+    ],
+});
+export const HistoryTab = () => {
+    const { t } = useTranslation('customers');
+    const [getHistory, { data, loading }] = useLazyQuery(CustomerGroupsQuery);
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { id, setLoading } = useDetailView('customers-detail-view', ...CUSTOMER_FORM_KEYS);
+    useEffect(() => {
+        setLoading(loading);
+    }, [loading]);
+    useEffect(() => {
+        if (id)
+            getHistory({ id });
+    }, [id, contentLng]);
+    const [edit] = useMutation(EditCustomerNoteMutation);
+    const [add] = useMutation(AddNoteToCustomerMutation);
+    const [remove] = useMutation(DeleteStockLocationMutation);
+    const handle = useCallback((method) => {
+        method
+            .then(() => {
+            toast.success(t('history.toastSuccess'));
+            if (id)
+                getHistory({ id });
+        })
+            .catch(() => {
+            toast.error(t('history.toastError'));
+        });
+    }, [getHistory]);
+    return (_jsx(CustomCard, { title: t('history.header'), icon: _jsx(CardIcons.history, {}), color: "indigo", children: _jsx("div", { className: "flex flex-col gap-4", children: _jsx(History, { data: data?.customer?.history.items.reverse(), onNoteAdd: (input) => handle(add({ input })), onNoteDelete: (id) => handle(remove({ id })), onNoteEdit: (input) => handle(edit({ input: { note: input.note || '', noteId: input.noteId } }).then(() => {
+                    if (id)
+                        getHistory({ id });
+                })) }) }) }));
+};

package/dist/pages/customers/_components/OrdersTab.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { CustomerDetailOrderSelector, DetailList, OrderStateBadge, Routes, TableLabel, apiClient, deepMerge, useDetailView, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const CUSTOMER_FORM_KEYS = ['CreateCustomerInput'];
+export const OrdersTab = () => {
+    const { t } = useTranslation('table');
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { id, fetchEntity } = useDetailView('customers-detail-view', ...CUSTOMER_FORM_KEYS);
+    useEffect(() => {
+        fetchEntity();
+    }, [contentLng]);
+    const fetch = useCallback(async ({ page, perPage, filter, filterOperator, sort }, customFieldsSelector, additionalSelector) => {
+        const selector = deepMerge(CustomerDetailOrderSelector, additionalSelector ?? {});
+        const response = await apiClient('query')({
+            customer: [
+                { id: id },
+                {
+                    orders: [
+                        {
+                            options: {
+                                take: perPage,
+                                skip: (page - 1) * perPage,
+                                filterOperator: filterOperator,
+                                sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                                ...(filter && { filter }),
+                            },
+                        },
+                        { items: selector, totalItems: true },
+                    ],
+                },
+            ],
+        });
+        return response['customer'].orders;
+    }, [id]);
+    if (!id)
+        return null;
+    return (_jsx(DetailList, { detailLinkColumn: "id", filterFields: [{ key: 'id', operator: 'IDOperators' }], searchFields: ['code'], hideColumns: ['customFields', 'user', 'title'], entityName: 'Order', route: Routes['orders'], tableId: "orders-list-view", fetch: fetch, noCreateButton: true, createPermissions: [Permission.CreateOrder], deletePermissions: [Permission.DeleteOrder], additionalColumns: [
+            {
+                accessorKey: 'state',
+                header: () => _jsx(TableLabel, { children: t('columns.state') }),
+                accessorFn: (order) => order?.state,
+                cell: ({ row }) => _jsx(OrderStateBadge, { state: row.original.state }),
+            },
+        ] }));
+};

package/dist/pages/customers/_components/PersonalDataCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, CardIcons, CustomCard, Input } from '@deenruv/react-ui-devkit';
+export const PersonalDataCard = ({ setField, state }) => {
+    const { t } = useTranslation('customers');
+    return (_jsx(CustomCard, { title: t('personalData.header'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex w-1/4 gap-3", children: _jsx(Input, { label: t('personalData.title'), value: state.title?.value, onChange: (e) => setField('title', e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.firstName'), value: state.firstName?.value, onChange: (e) => setField('firstName', e.target.value), errors: state.firstName?.errors, required: true }), _jsx(Input, { label: t('personalData.lastName'), value: state.lastName?.value, onChange: (e) => setField('lastName', e.target.value), errors: state.lastName?.errors, required: true })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.emailAddress'), value: state.emailAddress?.value, onChange: (e) => setField('emailAddress', e.target.value), errors: state.emailAddress?.errors, required: true }), _jsx(Input, { label: t('personalData.phoneNumber'), value: state.phoneNumber?.value, onChange: (e) => setField('phoneNumber', e.target.value) })] })] }) }));
+};

package/dist/pages/customers/_components/VerifiedCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation, Badge, CardIcons, CustomCard } from '@deenruv/react-ui-devkit';
+export const VerifiedCard = ({ verified }) => {
+    const { t } = useTranslation('customers');
+    return (_jsx(CustomCard, { title: t('verified.header'), icon: _jsx(CardIcons.permissions, {}), color: "gray", children: _jsx("div", { className: "flex gap-2", children: verified ? _jsx(Badge, { children: t('verified.true') }) : _jsx(Badge, { children: t('verified.false') }) }) }));
+};

package/dist/pages/customers/index.js

@@ -0,0 +1,2 @@
+export * from './List.js';
+export * from './Detail.js';

package/dist/pages/dashboard/Dashboard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DashboardWidgets, useWidgetsStore, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Button, DropdownMenuCheckboxItem, useTranslation, } from '@deenruv/react-ui-devkit';
+export const Dashboard = () => {
+    const { t } = useTranslation('common');
+    const { widgets, setShowWidget } = useWidgetsStore((state) => ({
+        widgets: state.widgets,
+        setShowWidget: state.setShowWidget,
+    }));
+    return (_jsxs("div", { className: "px-4 pb-4 pt-2 md:px-8 md:py-4", children: [_jsx("div", { className: "mb-4 flex justify-end", children: !!widgets.length && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('widgets.add') }) }), _jsxs(DropdownMenuContent, { className: "w-42", children: [_jsx(DropdownMenuLabel, { children: t('widgets.title') }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: widgets.map((widget) => (_jsx(DropdownMenuCheckboxItem, { checked: widget.visible, onCheckedChange: (checked) => setShowWidget(widget.id, checked), children: widget.name }, widget.id))) })] })] })) }), _jsx(DashboardWidgets, {})] }));
+};

package/dist/pages/dashboard/index.js

@@ -0,0 +1 @@
+export * from './Dashboard.js';