init commit,

03_source/frontend/src/sections/invoice/invoice-new-edit-address.tsx

@@ -0,0 +1,130 @@
+import { useFormContext } from 'react-hook-form';
+import { useBoolean } from 'minimal-shared/hooks';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import { _addressBooks } from 'src/_mock';
+
+import { Iconify } from 'src/components/iconify';
+
+import { AddressListDialog } from '../address';
+
+import type { NewInvoiceSchemaType } from './invoice-new-edit-form';
+
+// ----------------------------------------------------------------------
+
+export function InvoiceNewEditAddress() {
+  const {
+    watch,
+    setValue,
+    formState: { errors },
+  } = useFormContext<NewInvoiceSchemaType>();
+
+  const mdUp = useMediaQuery((theme) => theme.breakpoints.up('md'));
+
+  const values = watch();
+
+  const addressTo = useBoolean();
+  const addressForm = useBoolean();
+
+  const { invoiceFrom, invoiceTo } = values;
+
+  return (
+    <>
+      <Stack
+        divider={
+          <Divider
+            flexItem
+            orientation={mdUp ? 'vertical' : 'horizontal'}
+            sx={{ borderStyle: 'dashed' }}
+          />
+        }
+        sx={{ p: 3, gap: { xs: 3, md: 5 }, flexDirection: { xs: 'column', md: 'row' } }}
+      >
+        <Stack sx={{ width: 1 }}>
+          <Box sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
+            <Typography variant="h6" sx={{ color: 'text.disabled', flexGrow: 1 }}>
+              From:
+            </Typography>
+
+            <IconButton onClick={addressForm.onTrue}>
+              <Iconify icon="solar:pen-bold" />
+            </IconButton>
+          </Box>
+
+          <Stack spacing={1}>
+            <Typography variant="subtitle2">{invoiceFrom?.name}</Typography>
+            <Typography variant="body2">{invoiceFrom?.fullAddress}</Typography>
+            <Typography variant="body2"> {invoiceFrom?.phoneNumber}</Typography>
+          </Stack>
+        </Stack>
+
+        <Stack sx={{ width: 1 }}>
+          <Box sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
+            <Typography variant="h6" sx={{ color: 'text.disabled', flexGrow: 1 }}>
+              To:
+            </Typography>
+
+            <IconButton onClick={addressTo.onTrue}>
+              <Iconify icon={invoiceTo ? 'solar:pen-bold' : 'mingcute:add-line'} />
+            </IconButton>
+          </Box>
+
+          {invoiceTo ? (
+            <Stack spacing={1}>
+              <Typography variant="subtitle2">{invoiceTo?.name}</Typography>
+              <Typography variant="body2">{invoiceTo?.fullAddress}</Typography>
+              <Typography variant="body2"> {invoiceTo?.phoneNumber}</Typography>
+            </Stack>
+          ) : (
+            <Typography typography="caption" sx={{ color: 'error.main' }}>
+              {errors.invoiceTo?.message}
+            </Typography>
+          )}
+        </Stack>
+      </Stack>
+
+      <AddressListDialog
+        title="Customers"
+        open={addressForm.value}
+        onClose={addressForm.onFalse}
+        selected={(selectedId: string) => invoiceFrom?.id === selectedId}
+        onSelect={(address) => setValue('invoiceFrom', address)}
+        list={_addressBooks}
+        action={
+          <Button
+            size="small"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+            sx={{ alignSelf: 'flex-end' }}
+          >
+            New
+          </Button>
+        }
+      />
+
+      <AddressListDialog
+        title="Customers"
+        open={addressTo.value}
+        onClose={addressTo.onFalse}
+        selected={(selectedId: string) => invoiceTo?.id === selectedId}
+        onSelect={(address) => setValue('invoiceTo', address)}
+        list={_addressBooks}
+        action={
+          <Button
+            size="small"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+            sx={{ alignSelf: 'flex-end' }}
+          >
+            New
+          </Button>
+        }
+      />
+    </>
+  );
+}