init

2025-05-20 17:02:10 +05:00
commit c01e852a59
257 changed files with 27766 additions and 0 deletions
--- a/src/components/common/AttachInvoiceModal/index.tsx
+++ b/src/components/common/AttachInvoiceModal/index.tsx
@@ -0,0 +1,150 @@
+import BaseButton from '@/components/ui-kit/BaseButton';
+import BaseModal from '@/components/ui-kit/BaseModal';
+import BaseReactSelect from '@/components/ui-kit/BaseReactSelect';
+import { box_requests } from '@/data/box/box.requests';
+import { customer_requests } from '@/data/customers/customer.requests';
+import { invoice_requests } from '@/data/invoice/invoice.requests';
+import { useMyTranslation } from '@/hooks/useMyTranslation';
+import useRequest from '@/hooks/useRequest';
+import { notifyUnknownError } from '@/services/notification';
+import { Box, Stack, Typography, styled } from '@mui/material';
+import React, { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+const StyledBox = styled(Box)`
+    .title {
+        color: #000;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        margin-bottom: 28px;
+    }
+
+    .label {
+        color: #5d5850;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        margin-bottom: 8px;
+    }
+`;
+
+type Props = {
+    onClose: () => void;
+    open: boolean;
+    onSuccess: () => void;
+    defaultValues?: {
+        clientId?: number;
+        packetId?: number;
+    };
+};
+
+const AttachInvoiceModal = ({ onClose, open, onSuccess, defaultValues }: Props) => {
+    const t = useMyTranslation();
+    const [loading, setLoading] = useState(false);
+
+    const getClientsQuery = useRequest(() => customer_requests.getAll(), {
+        selectData(data) {
+            return data.data.data.data.map(i => ({ label: i.fullName, value: i.id }));
+        },
+    });
+
+    const getBoxesQuery = useRequest(() => box_requests.getAll(), {
+        selectData(data) {
+            return data.data.data.data.map(i => ({ value: i.id, label: i.name }));
+        },
+    });
+
+    const clientsList = getClientsQuery.data || [];
+    const boxesList = getBoxesQuery.data || [];
+
+    const {
+        register,
+        control,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<{
+        clientId: number;
+        packetId: number;
+    }>({
+        defaultValues: {
+            ...defaultValues,
+        },
+    });
+
+    const onSubmit = handleSubmit(async values => {
+        try {
+            setLoading(true);
+            await invoice_requests.create({ ...values });
+            onSuccess();
+        } catch (error) {
+            notifyUnknownError(error);
+        } finally {
+            setLoading(false);
+        }
+    });
+
+    return (
+        <BaseModal maxWidth='400px' onClose={onClose} open={open}>
+            <StyledBox component={'form'} onSubmit={onSubmit}>
+                <Typography className='title'>{t('create_invoice')}</Typography>
+
+                <Stack spacing={3.5}>
+                    <Box>
+                        <Typography className='label'>{t('role')}</Typography>
+                        <Controller
+                            name='clientId'
+                            control={control}
+                            render={({ field, fieldState, formState }) => {
+                                return (
+                                    <BaseReactSelect
+                                        value={clientsList.find(p => p.value === field.value)}
+                                        onChange={(newValue: any) => {
+                                            field.onChange(newValue.value);
+                                        }}
+                                        onBlur={field.onBlur}
+                                        name={field.name}
+                                        options={clientsList}
+                                    />
+                                );
+                            }}
+                        />
+                    </Box>
+                    <Box>
+                        <Typography className='label'>{t('role')}</Typography>
+                        <Controller
+                            name='packetId'
+                            control={control}
+                            render={({ field, fieldState, formState }) => {
+                                return (
+                                    <BaseReactSelect
+                                        value={boxesList.find(p => p.value === field.value)}
+                                        onChange={(newValue: any) => {
+                                            field.onChange(newValue.value);
+                                        }}
+                                        onBlur={field.onBlur}
+                                        name={field.name}
+                                        options={boxesList}
+                                    />
+                                );
+                            }}
+                        />
+                    </Box>
+                </Stack>
+
+                <Stack direction={'row'} justifyContent={'flex-start'} alignItems={'center'} spacing={3}>
+                    <BaseButton colorVariant='blue' type='submit' loading={loading}>
+                        {t('create')}
+                    </BaseButton>
+                    <BaseButton variant='outlined' type='button' colorVariant='blue-outlined' disabled={loading} onClick={onClose}>
+                        {t('cancel')}
+                    </BaseButton>
+                </Stack>
+            </StyledBox>
+        </BaseModal>
+    );
+};
+
+export default AttachInvoiceModal;