Index: src/sections/client/customer-new-edit-form.tsx
===================================================================
--- src/sections/client/customer-new-edit-form.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/customer-new-edit-form.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,253 @@
+import * as Yup from 'yup';
+import { useCallback, useMemo } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+// @mui
+import LoadingButton from '@mui/lab/LoadingButton';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import Grid from '@mui/material/Unstable_Grid2';
+import Typography from '@mui/material/Typography';
+import FormControlLabel from '@mui/material/FormControlLabel';
+// utils
+import { fData } from 'src/utils/format-number';
+// routes
+import { paths } from 'src/routes/paths';
+import { useRouter } from 'src/routes/hooks';
+// types
+import { Customer, NewCustomer, newCustomerSchema } from 'src/schemas';
+// components
+import Label from 'src/components/label';
+import { useSnackbar } from 'src/components/snackbar';
+import FormProvider, { RHFTextField, RHFUploadAvatar } from 'src/components/hook-form';
+import uploadToFirebaseStorage from 'src/utils/upload-to-firebase-storage';
+import { addDoc, collection } from 'firebase/firestore';
+import { db } from 'src/lib/firebase';
+import { createCustomer } from 'src/api/customer';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  currentUser?: Customer;
+};
+
+export default function CustomerNewEditForm({ currentUser: currentCustomer }: Props) {
+  const router = useRouter();
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  const defaultValues: NewCustomer = useMemo(
+    () => ({
+      name: currentCustomer?.name || '',
+      representative: currentCustomer?.representative || '',
+      email: currentCustomer?.email || '',
+      logoUrl: currentCustomer?.logoUrl || null,
+      address: currentCustomer?.address || {
+        country: '',
+        state: '',
+        street: '',
+        zip: '',
+        city: '',
+      },
+      vatNumber: currentCustomer?.vatNumber || '',
+      companyNumber: currentCustomer?.companyNumber || '',
+      id: currentCustomer?.id || '',
+      phoneNumber: currentCustomer?.phoneNumber || '',
+      status: 'active',
+    }),
+    [currentCustomer]
+  );
+
+  const methods = useForm({
+    resolver: zodResolver(newCustomerSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const values = watch();
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      // await new Promise((resolve) => setTimeout(resolve, 500));
+      const logoFile = data.logoUrl as File & { preview: string };
+
+      const storagePath: string = `customers/${logoFile.name}`;
+      const logoUrl = await uploadToFirebaseStorage(logoFile, storagePath);
+
+      await createCustomer({ ...data, logoUrl });
+
+      reset();
+      enqueueSnackbar(currentCustomer ? 'Update success!' : 'Create success!');
+      router.push(paths.dashboard.customer.list);
+      console.info('DATA', data);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const handleDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const file = acceptedFiles[0];
+
+      const newFile = Object.assign(file, {
+        preview: URL.createObjectURL(file),
+      });
+
+      if (file) {
+        setValue('logoUrl', newFile, { shouldValidate: true });
+      }
+    },
+    [setValue]
+  );
+
+  return (
+    <FormProvider methods={methods} onSubmit={onSubmit}>
+      <Grid container spacing={3}>
+        <Grid xs={12} md={4}>
+          <Card sx={{ pt: 10, pb: 5, px: 3 }}>
+            {currentCustomer && (
+              <Label
+                color={
+                  (values.status === 'active' && 'success') ||
+                  (values.status === 'banned' && 'error') ||
+                  'warning'
+                }
+                sx={{ position: 'absolute', top: 24, right: 24 }}
+              >
+                {values.status}
+              </Label>
+            )}
+
+            <Box sx={{ mb: 5 }}>
+              <RHFUploadAvatar
+                name="logoUrl"
+                maxSize={3145728}
+                onDrop={handleDrop}
+                helperText={
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      mt: 3,
+                      mx: 'auto',
+                      display: 'block',
+                      textAlign: 'center',
+                      color: 'text.disabled',
+                    }}
+                  >
+                    Allowed *.jpeg, *.jpg, *.png, *.gif
+                    <br /> max size of {fData(3145728)}
+                  </Typography>
+                }
+              />
+            </Box>
+
+            {currentCustomer && (
+              <FormControlLabel
+                labelPlacement="start"
+                control={
+                  <Controller
+                    name="status"
+                    control={control}
+                    render={({ field }) => (
+                      <Switch
+                        {...field}
+                        checked={field.value !== 'active'}
+                        onChange={(event) =>
+                          field.onChange(event.target.checked ? 'banned' : 'active')
+                        }
+                      />
+                    )}
+                  />
+                }
+                label={
+                  <>
+                    <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
+                      Banned
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                      Apply disable account
+                    </Typography>
+                  </>
+                }
+                sx={{ mx: 0, mb: 3, width: 1, justifyContent: 'space-between' }}
+              />
+            )}
+          </Card>
+        </Grid>
+
+        <Grid xs={12} md={8}>
+          <Card sx={{ p: 3 }}>
+            <Box
+              rowGap={3}
+              columnGap={2}
+              display="grid"
+              gridTemplateColumns={{
+                xs: 'repeat(1, 1fr)',
+                sm: 'repeat(2, 1fr)',
+              }}
+            >
+              <RHFTextField name="name" label="Name" />
+              <RHFTextField name="email" label="Email Address" />
+              <RHFTextField name="representative" label="Representative" />
+              <RHFTextField name="phoneNumber" label="Phone Number" />
+
+              <RHFTextField name="address.country" label="Country" />
+
+              {/* <RHFAutocomplete
+                name="address.country"
+                label="Country"
+                options={countries.map((country) => country.label)}
+                getOptionLabel={(option) => option}
+                isOptionEqualToValue={(option, value) => option === value}
+                renderOption={(props, option) => {
+                  const { code, label, phone } = countries.filter(
+                    (country) => country.label === option
+                  )[0];
+
+                  if (!label) {
+                    return null;
+                  }
+
+                  return (
+                    <li {...props} key={label}>
+                      <Iconify
+                        key={label}
+                        icon={`circle-flags:${code.toLowerCase()}`}
+                        width={28}
+                        sx={{ mr: 1 }}
+                      />
+                      {label} ({code}) +{phone}
+                    </li>
+                  );
+                }}
+              /> */}
+
+              <RHFTextField name="address.state" label="State/Region" />
+              <RHFTextField name="address.city" label="City" />
+              <RHFTextField name="address.street" label="Street" />
+              <RHFTextField name="address.zip" label="Zip/Code" />
+              <RHFTextField name="vatNumber" label="VAT" />
+              <RHFTextField name="companyNumber" label="Company Number" />
+            </Box>
+
+            <Stack alignItems="flex-end" sx={{ mt: 3 }}>
+              <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
+                {!currentCustomer ? 'Create Customer' : 'Save Changes'}
+              </LoadingButton>
+            </Stack>
+          </Card>
+        </Grid>
+      </Grid>
+    </FormProvider>
+  );
+}
Index: src/sections/client/customer-quick-edit-form.tsx
===================================================================
--- src/sections/client/customer-quick-edit-form.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/customer-quick-edit-form.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,188 @@
+import * as Yup from 'yup';
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+// @mui
+import LoadingButton from '@mui/lab/LoadingButton';
+import Box from '@mui/material/Box';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import MenuItem from '@mui/material/MenuItem';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+// types
+import { Customer, updateCustomerSchema } from 'src/schemas';
+// assets
+import { countries } from 'src/assets/data';
+// components
+import Iconify from 'src/components/iconify';
+import { useSnackbar } from 'src/components/snackbar';
+import FormProvider, { RHFSelect, RHFTextField, RHFAutocomplete } from 'src/components/hook-form';
+import { updateCustomer } from 'src/api/customer';
+
+// ----------------------------------------------------------------------
+
+export const USER_STATUS_OPTIONS = [
+  { value: 'active', label: 'Active' },
+  { value: 'banned', label: 'Banned' },
+  { value: 'inactive', label: 'Inactive' },
+];
+
+type Props = {
+  open: boolean;
+  onClose: VoidFunction;
+  currentCustomer?: Customer;
+};
+
+export default function CustomerQuickEditForm({ currentCustomer, open, onClose }: Props) {
+  const { enqueueSnackbar } = useSnackbar();
+
+  // @ts-ignore
+  const defaultValues: Customer = useMemo(
+    () => ({
+      name: currentCustomer?.name || '',
+      representative: currentCustomer?.representative || '',
+      email: currentCustomer?.email || '',
+      logoUrl: currentCustomer?.logoUrl || '',
+      address: {
+        country: currentCustomer?.address?.country || '',
+        state: currentCustomer?.address?.state || '',
+        street: currentCustomer?.address?.street || '',
+        zip: currentCustomer?.address?.zip || '',
+        city: currentCustomer?.address?.city || '',
+      },
+      vatNumber: currentCustomer?.vatNumber || '',
+      companyNumber: currentCustomer?.companyNumber || '',
+      id: currentCustomer?.id || '',
+      phoneNumber: currentCustomer?.phoneNumber || '',
+      status: currentCustomer?.status || '',
+    }),
+    [currentCustomer]
+  );
+
+  const methods = useForm({
+    resolver: zodResolver(updateCustomerSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      console.log('currentCustomer', currentCustomer);
+      if (!currentCustomer) return;
+      console.log('data', data);
+      await updateCustomer(currentCustomer.id!, data);
+
+      reset();
+      onClose();
+      enqueueSnackbar('Update success!');
+      console.info('DATA', data);
+    } catch (error) {
+      console.error(error);
+      enqueueSnackbar('Update failed!', { variant: 'error' });
+    }
+  });
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth={false}
+      open={open}
+      onClose={onClose}
+      PaperProps={{
+        sx: { maxWidth: 720 },
+      }}
+    >
+      <FormProvider methods={methods} onSubmit={onSubmit}>
+        <DialogTitle>Quick Update</DialogTitle>
+
+        <DialogContent>
+          {/* <Alert variant="outlined" severity="info" sx={{ mb: 3 }}>
+            Account is waiting for confirmation
+          </Alert> */}
+
+          <Box
+            rowGap={3}
+            columnGap={2}
+            display="grid"
+            sx={{ mt: 3 }}
+            gridTemplateColumns={{
+              xs: 'repeat(1, 1fr)',
+              sm: 'repeat(2, 1fr)',
+            }}
+          >
+            <RHFSelect name="status" label="Status">
+              <MenuItem key="none" value="" />
+              {USER_STATUS_OPTIONS.map((status) => (
+                <MenuItem key={status.value} value={status.value}>
+                  {status.label}
+                </MenuItem>
+              ))}
+            </RHFSelect>
+
+            <Box sx={{ display: { xs: 'none', sm: 'block' } }} />
+
+            <RHFTextField name="name" label="Name" />
+            <RHFTextField name="representative" label="Representative" />
+            <RHFTextField name="email" label="Email Address" />
+            <RHFTextField name="phoneNumber" label="Phone Number" />
+
+            <RHFTextField name="address.country" label="Country" />
+
+            {/* <RHFAutocomplete
+              name="address.country"
+              label="Country"
+              options={countries.map((country) => country.code)}
+              getOptionLabel={(option) => option}
+              renderOption={(props, option) => {
+                const { code, label, phone } = countries.filter(
+                  (country) => country.label === option
+                )[0];
+
+                if (!label) {
+                  return null;
+                }
+
+                return (
+                  <li {...props} key={label}>
+                    <Iconify
+                      key={label}
+                      icon={`circle-flags:${code.toLowerCase()}`}
+                      width={28}
+                      sx={{ mr: 1 }}
+                    />
+                    {label} ({code}) +{phone}
+                  </li>
+                );
+              }}
+            /> */}
+
+            <RHFTextField name="address.state" label="State/Region" />
+            <RHFTextField name="address.city" label="City" />
+            <RHFTextField name="address.street" label="Street" />
+            <RHFTextField name="address.zip" label="Zip/Code" />
+            <RHFTextField name="vatNumber" label="VAT" />
+            <RHFTextField name="companyNumber" label="Company Number" />
+          </Box>
+        </DialogContent>
+
+        <DialogActions>
+          <Button variant="outlined" onClick={onClose}>
+            Cancel
+          </Button>
+
+          <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
+            Update
+          </LoadingButton>
+        </DialogActions>
+      </FormProvider>
+    </Dialog>
+  );
+}
Index: src/sections/client/customer-table-filters-result.tsx
===================================================================
--- src/sections/client/customer-table-filters-result.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/customer-table-filters-result.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,109 @@
+// @mui
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Paper from '@mui/material/Paper';
+import Button from '@mui/material/Button';
+import Stack, { StackProps } from '@mui/material/Stack';
+// types
+
+// components
+import Iconify from 'src/components/iconify';
+import { CustomerTableFilterValue, CustomerTableFilters } from 'src/schemas';
+
+// ----------------------------------------------------------------------
+
+type Props = StackProps & {
+  filters: CustomerTableFilters;
+  onFilters: (name: string, value: CustomerTableFilterValue) => void;
+  //
+  onResetFilters: VoidFunction;
+  //
+  results: number;
+};
+
+export default function CustomerTableFiltersResult({
+  filters,
+  onFilters,
+  //
+  onResetFilters,
+  //
+  results,
+  ...other
+}: Props) {
+  const handleRemoveStatus = () => {
+    onFilters('status', 'all');
+  };
+
+  const handleRemoveRole = (inputValue: string) => {
+    const newValue = filters.role.filter((item) => item !== inputValue);
+    onFilters('role', newValue);
+  };
+
+  return (
+    <Stack spacing={1.5} {...other}>
+      <Box sx={{ typography: 'body2' }}>
+        <strong>{results}</strong>
+        <Box component="span" sx={{ color: 'text.secondary', ml: 0.25 }}>
+          results found
+        </Box>
+      </Box>
+
+      <Stack flexGrow={1} spacing={1} direction="row" flexWrap="wrap" alignItems="center">
+        {filters.status !== 'all' && (
+          <Block label="Status:">
+            <Chip size="small" label={filters.status} onDelete={handleRemoveStatus} />
+          </Block>
+        )}
+
+        {!!filters.role.length && (
+          <Block label="Role:">
+            {filters.role.map((item) => (
+              <Chip key={item} label={item} size="small" onDelete={() => handleRemoveRole(item)} />
+            ))}
+          </Block>
+        )}
+
+        <Button
+          color="error"
+          onClick={onResetFilters}
+          startIcon={<Iconify icon="solar:trash-bin-trash-bold" />}
+        >
+          Clear
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+type BlockProps = StackProps & {
+  label: string;
+};
+
+function Block({ label, children, sx, ...other }: BlockProps) {
+  return (
+    <Stack
+      component={Paper}
+      variant="outlined"
+      spacing={1}
+      direction="row"
+      sx={{
+        p: 1,
+        borderRadius: 1,
+        overflow: 'hidden',
+        borderStyle: 'dashed',
+        ...sx,
+      }}
+      {...other}
+    >
+      <Box component="span" sx={{ typography: 'subtitle2' }}>
+        {label}
+      </Box>
+
+      <Stack spacing={1} direction="row" flexWrap="wrap">
+        {children}
+      </Stack>
+    </Stack>
+  );
+}
Index: src/sections/client/customer-table-row.tsx
===================================================================
--- src/sections/client/customer-table-row.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/customer-table-row.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,103 @@
+// @mui
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import IconButton from '@mui/material/IconButton';
+// hooks
+import { useBoolean } from 'src/hooks/use-boolean';
+// types
+import { Customer } from 'src/schemas';
+// components
+import Label from 'src/components/label';
+import Iconify from 'src/components/iconify';
+import CustomPopover, { usePopover } from 'src/components/custom-popover';
+//
+import CustomerQuickEditForm from './customer-quick-edit-form';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  selected: boolean;
+  onEditRow: VoidFunction;
+  row: Customer;
+};
+
+export default function CustomerTableRow({ row, selected, onEditRow }: Props) {
+  const { name, logoUrl, representative, status, email, phoneNumber } = row;
+
+  // const confirm = useBoolean();
+
+  const quickEdit = useBoolean();
+
+  // const popover = usePopover();
+
+  return (
+    <>
+      <TableRow hover selected={selected}>
+        {/* <TableCell padding="checkbox">
+          <Checkbox checked={selected} onClick={onSelectRow} />
+        </TableCell> */}
+
+        <TableCell sx={{ display: 'flex', alignItems: 'center' }}>
+          <Avatar alt={name} src={logoUrl} sx={{ mr: 2 }} />
+          <span>{name}</span>
+        </TableCell>
+
+        <TableCell sx={{ whiteSpace: 'nowrap' }}>{representative}</TableCell>
+
+        <TableCell sx={{ whiteSpace: 'nowrap' }}>{email}</TableCell>
+
+        <TableCell>
+          <Label
+            variant="soft"
+            color={
+              (status === 'active' && 'success') ||
+              (status === 'inactive' && 'warning') ||
+              (status === 'banned' && 'error') ||
+              'default'
+            }
+          >
+            {status}
+          </Label>
+        </TableCell>
+
+        <TableCell align="right" sx={{ px: 1, whiteSpace: 'nowrap' }}>
+          <Tooltip title="Quick Edit" placement="top" arrow>
+            <IconButton color={quickEdit.value ? 'inherit' : 'default'} onClick={quickEdit.onTrue}>
+              <Iconify icon="solar:pen-bold" />
+            </IconButton>
+          </Tooltip>
+          {/* 
+          <IconButton color={popover.open ? 'inherit' : 'default'} onClick={popover.onOpen}>
+            <Iconify icon="eva:more-vertical-fill" />
+          </IconButton> */}
+        </TableCell>
+      </TableRow>
+
+      <CustomerQuickEditForm
+        currentCustomer={row}
+        open={quickEdit.value}
+        onClose={quickEdit.onFalse}
+      />
+
+      {/* <CustomPopover
+        open={popover.open}
+        onClose={popover.onClose}
+        arrow="right-top"
+        sx={{ width: 140 }}
+      >
+        <MenuItem
+          onClick={() => {
+            onEditRow();
+            popover.onClose();
+          }}
+        >
+          <Iconify icon="solar:pen-bold" />
+          Edit
+        </MenuItem>
+      </CustomPopover> */}
+    </>
+  );
+}
Index: src/sections/client/customer-table-toolbar.tsx
===================================================================
--- src/sections/client/customer-table-toolbar.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/customer-table-toolbar.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,152 @@
+import { useCallback } from 'react';
+// @mui
+import Stack from '@mui/material/Stack';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import TextField from '@mui/material/TextField';
+import InputLabel from '@mui/material/InputLabel';
+import IconButton from '@mui/material/IconButton';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+// types
+import { CustomerTableFilters, CustomerTableFilterValue } from 'src/schemas';
+// components
+import Iconify from 'src/components/iconify';
+import CustomPopover, { usePopover } from 'src/components/custom-popover';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  filters: CustomerTableFilters;
+  onFilters: (name: string, value: CustomerTableFilterValue) => void;
+  //
+  roleOptions: string[];
+};
+
+export default function CustomerTableToolbar({
+  filters,
+  onFilters,
+  //
+  roleOptions,
+}: Props) {
+  const popover = usePopover();
+
+  const handleFilterName = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onFilters('name', event.target.value);
+    },
+    [onFilters]
+  );
+
+  const handleFilterRole = useCallback(
+    (event: SelectChangeEvent<string[]>) => {
+      onFilters(
+        'role',
+        typeof event.target.value === 'string' ? event.target.value.split(',') : event.target.value
+      );
+    },
+    [onFilters]
+  );
+
+  return (
+    <>
+      <Stack
+        spacing={2}
+        alignItems={{ xs: 'flex-end', md: 'center' }}
+        direction={{
+          xs: 'column',
+          md: 'row',
+        }}
+        sx={{
+          p: 2.5,
+          pr: { xs: 2.5, md: 1 },
+        }}
+      >
+        <FormControl
+          sx={{
+            flexShrink: 0,
+            width: { xs: 1, md: 200 },
+          }}
+        >
+          <InputLabel>Role</InputLabel>
+
+          <Select
+            multiple
+            value={filters.role}
+            onChange={handleFilterRole}
+            input={<OutlinedInput label="Role" />}
+            renderValue={(selected) => selected.map((value) => value).join(', ')}
+            MenuProps={{
+              PaperProps: {
+                sx: { maxHeight: 240 },
+              },
+            }}
+          >
+            {roleOptions.map((option) => (
+              <MenuItem key={option} value={option}>
+                <Checkbox disableRipple size="small" checked={filters.role.includes(option)} />
+                {option}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <Stack direction="row" alignItems="center" spacing={2} flexGrow={1} sx={{ width: 1 }}>
+          <TextField
+            fullWidth
+            value={filters.name}
+            onChange={handleFilterName}
+            placeholder="Search..."
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <Iconify icon="eva:search-fill" sx={{ color: 'text.disabled' }} />
+                </InputAdornment>
+              ),
+            }}
+          />
+
+          <IconButton onClick={popover.onOpen}>
+            <Iconify icon="eva:more-vertical-fill" />
+          </IconButton>
+        </Stack>
+      </Stack>
+
+      <CustomPopover
+        open={popover.open}
+        onClose={popover.onClose}
+        arrow="right-top"
+        sx={{ width: 140 }}
+      >
+        <MenuItem
+          onClick={() => {
+            popover.onClose();
+          }}
+        >
+          <Iconify icon="solar:printer-minimalistic-bold" />
+          Print
+        </MenuItem>
+
+        <MenuItem
+          onClick={() => {
+            popover.onClose();
+          }}
+        >
+          <Iconify icon="solar:import-bold" />
+          Import
+        </MenuItem>
+
+        <MenuItem
+          onClick={() => {
+            popover.onClose();
+          }}
+        >
+          <Iconify icon="solar:export-bold" />
+          Export
+        </MenuItem>
+      </CustomPopover>
+    </>
+  );
+}
Index: src/sections/client/view/customer-create-view.tsx
===================================================================
--- src/sections/client/view/customer-create-view.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/view/customer-create-view.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,41 @@
+'use client';
+
+// @mui
+import Container from '@mui/material/Container';
+// routes
+import { paths } from 'src/routes/paths';
+// components
+import { useSettingsContext } from 'src/components/settings';
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+//
+import CustomerNewEditForm from '../customer-new-edit-form';
+
+// ----------------------------------------------------------------------
+
+export default function CustomerCreateView() {
+  const settings = useSettingsContext();
+
+  return (
+    <Container maxWidth={settings.themeStretch ? false : 'lg'}>
+      <CustomBreadcrumbs
+        heading="Create a new customer"
+        links={[
+          {
+            name: 'Dashboard',
+            href: paths.dashboard.root,
+          },
+          {
+            name: 'Customer',
+            href: paths.dashboard.customer.list,
+          },
+          { name: 'New customer' },
+        ]}
+        sx={{
+          mb: { xs: 3, md: 5 },
+        }}
+      />
+
+      <CustomerNewEditForm />
+    </Container>
+  );
+}
Index: src/sections/client/view/customer-list-view.tsx
===================================================================
--- src/sections/client/view/customer-list-view.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/view/customer-list-view.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,335 @@
+'use client';
+
+import isEqual from 'lodash/isEqual';
+import { useState, useCallback } from 'react';
+// @mui
+import { alpha } from '@mui/material/styles';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Card from '@mui/material/Card';
+import Table from '@mui/material/Table';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+// routes
+import { paths } from 'src/routes/paths';
+import { RouterLink } from 'src/routes/components';
+// hooks
+import { useBoolean } from 'src/hooks/use-boolean';
+// components
+import Label from 'src/components/label';
+import Iconify from 'src/components/iconify';
+import Scrollbar from 'src/components/scrollbar';
+import { useSettingsContext } from 'src/components/settings';
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+import {
+  useTable,
+  getComparator,
+  emptyRows,
+  TableNoData,
+  TableEmptyRows,
+  TableHeadCustom,
+  TablePaginationCustom,
+} from 'src/components/table';
+// types
+import { Customer, CustomerTableFilters, CustomerTableFilterValue } from 'src/schemas';
+//
+import { useGetCustomers } from 'src/api/customer';
+import CustomerTableRow from '../customer-table-row';
+import CustomerTableFiltersResult from '../customer-table-filters-result';
+import { USER_STATUS_OPTIONS } from '../customer-quick-edit-form';
+
+// ----------------------------------------------------------------------
+
+const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...USER_STATUS_OPTIONS];
+
+const TABLE_HEAD = [
+  { id: 'name', label: 'Name' },
+  { id: 'representative', label: 'Representative', width: 220 },
+  { id: 'email', label: 'Email' },
+  { id: 'status', label: 'Status', width: 100 },
+  { id: '', width: 88 },
+];
+
+const defaultFilters: CustomerTableFilters = {
+  name: '',
+  role: [],
+  status: 'all',
+};
+
+// ----------------------------------------------------------------------
+
+export default function CustomerListView() {
+  const table = useTable({ defaultDense: true, defaultRowsPerPage: 25 });
+
+  const settings = useSettingsContext();
+
+  // const router = useRouter();
+
+  const confirm = useBoolean();
+
+  const { customers } = useGetCustomers();
+
+  // const [tableData, setTableData] = useState(customers || []);
+
+  const [filters, setFilters] = useState(defaultFilters);
+
+  const dataFiltered = applyFilter({
+    inputData: customers,
+    comparator: getComparator(table.order, table.orderBy),
+    filters,
+  });
+
+  const dataInPage = dataFiltered.slice(
+    table.page * table.rowsPerPage,
+    table.page * table.rowsPerPage + table.rowsPerPage
+  );
+
+  const denseHeight = table.dense ? 52 : 72;
+
+  const canReset = !isEqual(defaultFilters, filters);
+
+  const notFound = (!dataFiltered.length && canReset) || !dataFiltered.length;
+
+  const handleFilters = useCallback(
+    (name: string, value: CustomerTableFilterValue) => {
+      table.onResetPage();
+      setFilters((prevState) => ({
+        ...prevState,
+        [name]: value,
+      }));
+    },
+    [table]
+  );
+
+  // const handleDeleteRow = useCallback(
+  //   (id: string) => {
+  //     const deleteRow = customers.filter((row) => row.id !== id);
+
+  //     table.onUpdatePageDeleteRow(dataInPage.length);
+  //   },
+  //   [dataInPage.length, table]
+  // );
+
+  // const handleDeleteRows = useCallback(() => {
+  //   const deleteRows = tableData.filter((row) => !table.selected.includes(row.id));
+  //   setTableData(deleteRows);
+
+  //   table.onUpdatePageDeleteRows({
+  //     totalRows: tableData.length,
+  //     totalRowsInPage: dataInPage.length,
+  //     totalRowsFiltered: dataFiltered.length,
+  //   });
+  // }, [dataFiltered.length, dataInPage.length, table, tableData]);
+
+  // const handleEditRow = useCallback(
+  //   (id: string) => {
+  //     router.push(paths.dashboard.user.edit(id));
+  //   },
+  //   [router]
+  // );
+
+  const handleFilterStatus = useCallback(
+    (event: React.SyntheticEvent, newValue: string) => {
+      handleFilters('status', newValue);
+    },
+    [handleFilters]
+  );
+
+  const handleResetFilters = useCallback(() => {
+    setFilters(defaultFilters);
+  }, []);
+
+  return (
+    <>
+      <Container maxWidth={settings.themeStretch ? false : 'lg'}>
+        <CustomBreadcrumbs
+          heading="List"
+          links={[
+            { name: 'Dashboard', href: paths.dashboard.root },
+            { name: 'Customer', href: paths.dashboard.customer.list },
+            { name: 'List' },
+          ]}
+          action={
+            <Button
+              component={RouterLink}
+              href={paths.dashboard.customer.new}
+              variant="contained"
+              startIcon={<Iconify icon="mingcute:add-line" />}
+            >
+              New Customer
+            </Button>
+          }
+          sx={{
+            mb: { xs: 3, md: 5 },
+          }}
+        />
+
+        <Card>
+          <Tabs
+            value={filters.status}
+            onChange={handleFilterStatus}
+            sx={{
+              px: 2.5,
+              boxShadow: (theme) => `inset 0 -2px 0 0 ${alpha(theme.palette.grey[500], 0.08)}`,
+            }}
+          >
+            {STATUS_OPTIONS.map((tab) => (
+              <Tab
+                key={tab.value}
+                iconPosition="end"
+                value={tab.value}
+                label={tab.label}
+                icon={
+                  <Label
+                    variant={
+                      ((tab.value === 'all' || tab.value === filters.status) && 'filled') || 'soft'
+                    }
+                    color={
+                      (tab.value === 'active' && 'success') ||
+                      (tab.value === 'pending' && 'warning') ||
+                      (tab.value === 'banned' && 'error') ||
+                      'default'
+                    }
+                  >
+                    {tab.value === 'all' && customers.length}
+
+                    {tab.value === 'active' &&
+                      customers.filter((customer) => customer.status === 'active').length}
+
+                    {tab.value === 'banned' &&
+                      customers.filter((customer) => customer.status === 'banned').length}
+
+                    {tab.value === 'inactive' &&
+                      customers.filter((customer) => customer.status === 'inactive').length}
+                  </Label>
+                }
+              />
+            ))}
+          </Tabs>
+
+          {canReset && (
+            <CustomerTableFiltersResult
+              filters={filters}
+              onFilters={handleFilters}
+              //
+              onResetFilters={handleResetFilters}
+              //
+              results={dataFiltered.length}
+              sx={{ p: 2.5, pt: 0 }}
+            />
+          )}
+
+          <TableContainer sx={{ position: 'relative', overflow: 'unset' }}>
+            <Scrollbar>
+              <Table size={table.dense ? 'small' : 'medium'} sx={{ minWidth: 960 }}>
+                <TableHeadCustom
+                  order={table.order}
+                  orderBy={table.orderBy}
+                  headLabel={TABLE_HEAD}
+                  rowCount={customers.length}
+                  numSelected={table.selected.length}
+                  onSort={table.onSort}
+                />
+
+                <TableBody>
+                  {dataFiltered
+                    .slice(
+                      table.page * table.rowsPerPage,
+                      table.page * table.rowsPerPage + table.rowsPerPage
+                    )
+                    .map((row) => (
+                      <CustomerTableRow
+                        key={row.id}
+                        row={row}
+                        selected={table.selected.includes(row.id!)}
+                        onEditRow={() => {}}
+                      />
+                    ))}
+
+                  <TableEmptyRows
+                    height={denseHeight}
+                    emptyRows={emptyRows(table.page, table.rowsPerPage, customers.length)}
+                  />
+
+                  <TableNoData notFound={notFound} />
+                </TableBody>
+              </Table>
+            </Scrollbar>
+          </TableContainer>
+
+          <TablePaginationCustom
+            count={dataFiltered.length}
+            page={table.page}
+            rowsPerPage={table.rowsPerPage}
+            onPageChange={table.onChangePage}
+            onRowsPerPageChange={table.onChangeRowsPerPage}
+            //
+            dense={table.dense}
+            onChangeDense={table.onChangeDense}
+          />
+        </Card>
+      </Container>
+
+      {/* <ConfirmDialog
+        open={confirm.value}
+        onClose={confirm.onFalse}
+        title="Delete"
+        content={
+          <>
+            Are you sure want to delete <strong> {table.selected.length} </strong> items?
+          </>
+        }
+        action={
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => {
+              handleDeleteRows();
+              confirm.onFalse();
+            }}
+          >
+            Delete
+          </Button>
+        }
+      /> */}
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function applyFilter({
+  inputData,
+  comparator,
+  filters,
+}: {
+  inputData: Customer[];
+  comparator: (a: any, b: any) => number;
+  filters: CustomerTableFilters;
+}) {
+  const { name, status, role } = filters;
+
+  const stabilizedThis = inputData.map((el, index) => [el, index] as const);
+
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+
+  inputData = stabilizedThis.map((el) => el[0]);
+
+  if (name) {
+    inputData = inputData.filter(
+      (user) => user.name.toLowerCase().indexOf(name.toLowerCase()) !== -1
+    );
+  }
+
+  if (status !== 'all') {
+    inputData = inputData.filter((user) => user.status === status);
+  }
+
+  return inputData;
+}
Index: src/sections/client/view/index.ts
===================================================================
--- src/sections/client/view/index.ts	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
+++ src/sections/client/view/index.ts	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -0,0 +1,2 @@
+export { default as CustomerListView } from './customer-list-view';
+export { default as CustomerCreateView } from './customer-create-view';
Index: src/sections/invoice/invoice-details.tsx
===================================================================
--- src/sections/invoice/invoice-details.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ src/sections/invoice/invoice-details.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -261,5 +261,5 @@
               Date Issued
             </Typography>
-            {fDate(invoice.createDate)}
+            {fDate(invoice.issueDate)}
           </Stack>
 
Index: src/sections/invoice/invoice-ee-pdf.tsx
===================================================================
--- src/sections/invoice/invoice-ee-pdf.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ src/sections/invoice/invoice-ee-pdf.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -129,5 +129,5 @@
     discount,
     invoiceTo,
-    createDate,
+    issueDate,
     totalAmount,
     invoiceFrom,
@@ -229,5 +229,5 @@
           <View style={styles.col6}>
             <Text style={[styles.subtitle1, styles.mb4]}>Date Issued</Text>
-            <Text style={styles.body2}>{fDate(createDate)}</Text>
+            <Text style={styles.body2}>{fDate(issueDate)}</Text>
           </View>
           <View style={styles.col6}>
Index: src/sections/invoice/invoice-mk-pdf.tsx
===================================================================
--- src/sections/invoice/invoice-mk-pdf.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ src/sections/invoice/invoice-mk-pdf.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -113,5 +113,5 @@
     discount,
     invoiceTo,
-    createDate,
+    issueDate,
     totalAmount,
     invoiceFrom,
@@ -179,5 +179,5 @@
           <View style={styles.col6}>
             <Text style={[styles.subtitle1, styles.mb4]}>Date Issued</Text>
-            <Text style={styles.body2}>{fDate(createDate)}</Text>
+            <Text style={styles.body2}>{fDate(issueDate)}</Text>
           </View>
           <View style={styles.col6}>
Index: src/sections/invoice/invoice-new-edit-form.tsx
===================================================================
--- src/sections/invoice/invoice-new-edit-form.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ src/sections/invoice/invoice-new-edit-form.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -81,5 +81,5 @@
   const NewInvoiceSchema = Yup.object().shape({
     invoiceNumber: Yup.string().nullable().required('Invoice number is required'),
-    createDate: Yup.mixed<any>().nullable().required('Create date is required'),
+    issueDate: Yup.mixed<any>().nullable().required('Create date is required'),
     dueDate: Yup.mixed<any>()
       .required('Due date is required')
@@ -87,5 +87,5 @@
         'date-min',
         'Due date must be later than create date',
-        (value, { parent }) => value.getTime() > parent.createDate.getTime()
+        (value, { parent }) => value.getTime() > parent.issueDate.getTime()
       ),
     invoiceFrom: Yup.mixed<any>().nullable().required('Invoice from is required'),
@@ -117,5 +117,5 @@
           ? currentInvoice?.invoiceNumber
           : incrementInvoiceNumber(tenant?.lastInvoiceNumber),
-      createDate: currentInvoice?.createDate ? new Date(currentInvoice.createDate) : new Date(),
+      issueDate: currentInvoice?.issueDate ? new Date(currentInvoice.issueDate) : new Date(),
       dueDate: currentInvoice?.dueDate
         ? new Date(currentInvoice.dueDate)
@@ -175,10 +175,9 @@
 
       // Ensure dates are valid Date objects
-      const createDate =
-        data.createDate instanceof Date ? data.createDate : new Date(data.createDate);
+      const issueDate = data.issueDate instanceof Date ? data.issueDate : new Date(data.issueDate);
       const dueDate = data.dueDate instanceof Date ? data.dueDate : new Date(data.dueDate);
 
       const currentTime = new Date();
-      createDate.setHours(
+      issueDate.setHours(
         currentTime.getHours(),
         currentTime.getMinutes(),
@@ -197,5 +196,5 @@
         invoiceNumber: incrementInvoiceNumber(tenant?.lastInvoiceNumber),
         status: 'draft',
-        createDate,
+        issueDate,
         dueDate,
         items: items.filter((item) => item.service !== null) as CreateInvoice['items'],
@@ -246,6 +245,6 @@
       if (currentInvoice) {
         // Ensure dates are valid Date objects
-        const createDate =
-          data.createDate instanceof Date ? data.createDate : new Date(data.createDate);
+        const issueDate =
+          data.issueDate instanceof Date ? data.issueDate : new Date(data.issueDate);
         const dueDate = data.dueDate instanceof Date ? data.dueDate : new Date(data.dueDate);
 
@@ -259,5 +258,5 @@
         const writeData = {
           ...data,
-          createDate,
+          issueDate,
           dueDate,
           items,
@@ -312,6 +311,6 @@
 
         // Ensure dates are valid Date objects
-        const createDate =
-          data.createDate instanceof Date ? data.createDate : new Date(data.createDate);
+        const issueDate =
+          data.issueDate instanceof Date ? data.issueDate : new Date(data.issueDate);
         const dueDate = data.dueDate instanceof Date ? data.dueDate : new Date(data.dueDate);
 
@@ -325,5 +324,5 @@
         const writeData = {
           ...data,
-          createDate,
+          issueDate,
           dueDate,
           items,
Index: src/sections/invoice/invoice-new-edit-status-date.tsx
===================================================================
--- src/sections/invoice/invoice-new-edit-status-date.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ src/sections/invoice/invoice-new-edit-status-date.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -109,5 +109,5 @@
 
       <Controller
-        name="createDate"
+        name="issueDate"
         control={control}
         render={({ field, fieldState: { error } }) => (
Index: src/sections/invoice/invoice-table-row.tsx
===================================================================
--- src/sections/invoice/invoice-table-row.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ src/sections/invoice/invoice-table-row.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -51,5 +51,5 @@
     sent,
     invoiceNumber,
-    createDate,
+    issueDate,
     dueDate,
     status,
@@ -60,5 +60,5 @@
   } = row;
 
-  console.log(createDate);
+  console.log(issueDate);
 
   const confirmSend = useBoolean();
@@ -107,6 +107,6 @@
         <TableCell>
           <ListItemText
-            primary={format(new Date(createDate), 'dd MMM yyyy')}
-            secondary={format(new Date(createDate), 'p')}
+            primary={format(new Date(issueDate), 'dd MMM yyyy')}
+            secondary={format(new Date(issueDate), 'p')}
             primaryTypographyProps={{ typography: 'body2', noWrap: true }}
             secondaryTypographyProps={{
Index: src/sections/invoice/view/invoice-list-view.tsx
===================================================================
--- src/sections/invoice/view/invoice-list-view.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ src/sections/invoice/view/invoice-list-view.tsx	(revision d7c72f6cab53c531dde7c6ac9a9450a0c16b2fcc)
@@ -59,5 +59,5 @@
   { id: 'currency', label: 'Currency' },
   { id: 'invoicePeriod', label: 'Invoice Period' },
-  { id: 'createDate', label: 'Create' },
+  { id: 'issueDate', label: 'Create' },
   { id: 'dueDate', label: 'Due' },
   { id: 'sent', label: 'Sent', align: 'center' },
@@ -152,5 +152,5 @@
 
   const table = useTable({
-    defaultOrderBy: 'createDate',
+    defaultOrderBy: 'issueDate',
     defaultOrder: 'desc',
     defaultDense: true,
@@ -166,6 +166,6 @@
       collections.invoice,
       JSON.stringify({
-        where: [['createDate', '>=', filters.startDate]],
-        orderBy: 'createDate',
+        where: [['issueDate', '>=', filters.startDate]],
+        orderBy: 'issueDate',
         direction: 'desc',
       }),
@@ -275,6 +275,6 @@
     async (invoice: Invoice) => {
       const serializedParams = JSON.stringify({
-        where: [['createDate', '>=', filters.startDate]],
-        orderBy: 'createDate',
+        where: [['issueDate', '>=', filters.startDate]],
+        orderBy: 'issueDate',
         direction: 'desc',
       });
@@ -671,6 +671,6 @@
       inputData = inputData.filter(
         (invoice) =>
-          fTimestamp(invoice.createDate.getTime()) >= fTimestamp(startDate.getTime()) &&
-          fTimestamp(invoice.createDate.getTime()) <= fTimestamp(endDate.getTime())
+          fTimestamp(invoice.issueDate.getTime()) >= fTimestamp(startDate.getTime()) &&
+          fTimestamp(invoice.issueDate.getTime()) <= fTimestamp(endDate.getTime())
       );
     }
Index: src/sections/user/customer-new-edit-form.tsx
===================================================================
--- src/sections/user/customer-new-edit-form.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,253 +1,0 @@
-import * as Yup from 'yup';
-import { useCallback, useMemo } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-// @mui
-import LoadingButton from '@mui/lab/LoadingButton';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Switch from '@mui/material/Switch';
-import Grid from '@mui/material/Unstable_Grid2';
-import Typography from '@mui/material/Typography';
-import FormControlLabel from '@mui/material/FormControlLabel';
-// utils
-import { fData } from 'src/utils/format-number';
-// routes
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
-// types
-import { Customer, NewCustomer, newCustomerSchema } from 'src/schemas';
-// components
-import Label from 'src/components/label';
-import { useSnackbar } from 'src/components/snackbar';
-import FormProvider, { RHFTextField, RHFUploadAvatar } from 'src/components/hook-form';
-import uploadToFirebaseStorage from 'src/utils/upload-to-firebase-storage';
-import { addDoc, collection } from 'firebase/firestore';
-import { db } from 'src/lib/firebase';
-import { createCustomer } from 'src/api/customer';
-
-// ----------------------------------------------------------------------
-
-type Props = {
-  currentUser?: Customer;
-};
-
-export default function CustomerNewEditForm({ currentUser: currentCustomer }: Props) {
-  const router = useRouter();
-
-  const { enqueueSnackbar } = useSnackbar();
-
-  const defaultValues: NewCustomer = useMemo(
-    () => ({
-      name: currentCustomer?.name || '',
-      representative: currentCustomer?.representative || '',
-      email: currentCustomer?.email || '',
-      logoUrl: currentCustomer?.logoUrl || null,
-      address: currentCustomer?.address || {
-        country: '',
-        state: '',
-        street: '',
-        zip: '',
-        city: '',
-      },
-      vatNumber: currentCustomer?.vatNumber || '',
-      companyNumber: currentCustomer?.companyNumber || '',
-      id: currentCustomer?.id || '',
-      phoneNumber: currentCustomer?.phoneNumber || '',
-      status: 'active',
-    }),
-    [currentCustomer]
-  );
-
-  const methods = useForm({
-    resolver: zodResolver(newCustomerSchema),
-    defaultValues,
-  });
-
-  const {
-    reset,
-    watch,
-    control,
-    setValue,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
-
-  const values = watch();
-
-  const onSubmit = handleSubmit(async (data) => {
-    try {
-      // await new Promise((resolve) => setTimeout(resolve, 500));
-      const logoFile = data.logoUrl as File & { preview: string };
-
-      const storagePath: string = `customers/${logoFile.name}`;
-      const logoUrl = await uploadToFirebaseStorage(logoFile, storagePath);
-
-      await createCustomer({ ...data, logoUrl });
-
-      reset();
-      enqueueSnackbar(currentCustomer ? 'Update success!' : 'Create success!');
-      router.push(paths.dashboard.customer.list);
-      console.info('DATA', data);
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  const handleDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      const file = acceptedFiles[0];
-
-      const newFile = Object.assign(file, {
-        preview: URL.createObjectURL(file),
-      });
-
-      if (file) {
-        setValue('logoUrl', newFile, { shouldValidate: true });
-      }
-    },
-    [setValue]
-  );
-
-  return (
-    <FormProvider methods={methods} onSubmit={onSubmit}>
-      <Grid container spacing={3}>
-        <Grid xs={12} md={4}>
-          <Card sx={{ pt: 10, pb: 5, px: 3 }}>
-            {currentCustomer && (
-              <Label
-                color={
-                  (values.status === 'active' && 'success') ||
-                  (values.status === 'banned' && 'error') ||
-                  'warning'
-                }
-                sx={{ position: 'absolute', top: 24, right: 24 }}
-              >
-                {values.status}
-              </Label>
-            )}
-
-            <Box sx={{ mb: 5 }}>
-              <RHFUploadAvatar
-                name="logoUrl"
-                maxSize={3145728}
-                onDrop={handleDrop}
-                helperText={
-                  <Typography
-                    variant="caption"
-                    sx={{
-                      mt: 3,
-                      mx: 'auto',
-                      display: 'block',
-                      textAlign: 'center',
-                      color: 'text.disabled',
-                    }}
-                  >
-                    Allowed *.jpeg, *.jpg, *.png, *.gif
-                    <br /> max size of {fData(3145728)}
-                  </Typography>
-                }
-              />
-            </Box>
-
-            {currentCustomer && (
-              <FormControlLabel
-                labelPlacement="start"
-                control={
-                  <Controller
-                    name="status"
-                    control={control}
-                    render={({ field }) => (
-                      <Switch
-                        {...field}
-                        checked={field.value !== 'active'}
-                        onChange={(event) =>
-                          field.onChange(event.target.checked ? 'banned' : 'active')
-                        }
-                      />
-                    )}
-                  />
-                }
-                label={
-                  <>
-                    <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
-                      Banned
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                      Apply disable account
-                    </Typography>
-                  </>
-                }
-                sx={{ mx: 0, mb: 3, width: 1, justifyContent: 'space-between' }}
-              />
-            )}
-          </Card>
-        </Grid>
-
-        <Grid xs={12} md={8}>
-          <Card sx={{ p: 3 }}>
-            <Box
-              rowGap={3}
-              columnGap={2}
-              display="grid"
-              gridTemplateColumns={{
-                xs: 'repeat(1, 1fr)',
-                sm: 'repeat(2, 1fr)',
-              }}
-            >
-              <RHFTextField name="name" label="Name" />
-              <RHFTextField name="email" label="Email Address" />
-              <RHFTextField name="representative" label="Representative" />
-              <RHFTextField name="phoneNumber" label="Phone Number" />
-
-              <RHFTextField name="address.country" label="Country" />
-
-              {/* <RHFAutocomplete
-                name="address.country"
-                label="Country"
-                options={countries.map((country) => country.label)}
-                getOptionLabel={(option) => option}
-                isOptionEqualToValue={(option, value) => option === value}
-                renderOption={(props, option) => {
-                  const { code, label, phone } = countries.filter(
-                    (country) => country.label === option
-                  )[0];
-
-                  if (!label) {
-                    return null;
-                  }
-
-                  return (
-                    <li {...props} key={label}>
-                      <Iconify
-                        key={label}
-                        icon={`circle-flags:${code.toLowerCase()}`}
-                        width={28}
-                        sx={{ mr: 1 }}
-                      />
-                      {label} ({code}) +{phone}
-                    </li>
-                  );
-                }}
-              /> */}
-
-              <RHFTextField name="address.state" label="State/Region" />
-              <RHFTextField name="address.city" label="City" />
-              <RHFTextField name="address.street" label="Street" />
-              <RHFTextField name="address.zip" label="Zip/Code" />
-              <RHFTextField name="vatNumber" label="VAT" />
-              <RHFTextField name="companyNumber" label="Company Number" />
-            </Box>
-
-            <Stack alignItems="flex-end" sx={{ mt: 3 }}>
-              <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
-                {!currentCustomer ? 'Create Customer' : 'Save Changes'}
-              </LoadingButton>
-            </Stack>
-          </Card>
-        </Grid>
-      </Grid>
-    </FormProvider>
-  );
-}
Index: src/sections/user/customer-quick-edit-form.tsx
===================================================================
--- src/sections/user/customer-quick-edit-form.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,188 +1,0 @@
-import * as Yup from 'yup';
-import { useMemo } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-// @mui
-import LoadingButton from '@mui/lab/LoadingButton';
-import Box from '@mui/material/Box';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import MenuItem from '@mui/material/MenuItem';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-// types
-import { Customer, updateCustomerSchema } from 'src/schemas';
-// assets
-import { countries } from 'src/assets/data';
-// components
-import Iconify from 'src/components/iconify';
-import { useSnackbar } from 'src/components/snackbar';
-import FormProvider, { RHFSelect, RHFTextField, RHFAutocomplete } from 'src/components/hook-form';
-import { updateCustomer } from 'src/api/customer';
-
-// ----------------------------------------------------------------------
-
-export const USER_STATUS_OPTIONS = [
-  { value: 'active', label: 'Active' },
-  { value: 'banned', label: 'Banned' },
-  { value: 'inactive', label: 'Inactive' },
-];
-
-type Props = {
-  open: boolean;
-  onClose: VoidFunction;
-  currentCustomer?: Customer;
-};
-
-export default function CustomerQuickEditForm({ currentCustomer, open, onClose }: Props) {
-  const { enqueueSnackbar } = useSnackbar();
-
-  // @ts-ignore
-  const defaultValues: Customer = useMemo(
-    () => ({
-      name: currentCustomer?.name || '',
-      representative: currentCustomer?.representative || '',
-      email: currentCustomer?.email || '',
-      logoUrl: currentCustomer?.logoUrl || '',
-      address: {
-        country: currentCustomer?.address?.country || '',
-        state: currentCustomer?.address?.state || '',
-        street: currentCustomer?.address?.street || '',
-        zip: currentCustomer?.address?.zip || '',
-        city: currentCustomer?.address?.city || '',
-      },
-      vatNumber: currentCustomer?.vatNumber || '',
-      companyNumber: currentCustomer?.companyNumber || '',
-      id: currentCustomer?.id || '',
-      phoneNumber: currentCustomer?.phoneNumber || '',
-      status: currentCustomer?.status || '',
-    }),
-    [currentCustomer]
-  );
-
-  const methods = useForm({
-    resolver: zodResolver(updateCustomerSchema),
-    defaultValues,
-  });
-
-  const {
-    reset,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
-
-  const onSubmit = handleSubmit(async (data) => {
-    try {
-      console.log('currentCustomer', currentCustomer);
-      if (!currentCustomer) return;
-      console.log('data', data);
-      await updateCustomer(currentCustomer.id!, data);
-
-      reset();
-      onClose();
-      enqueueSnackbar('Update success!');
-      console.info('DATA', data);
-    } catch (error) {
-      console.error(error);
-      enqueueSnackbar('Update failed!', { variant: 'error' });
-    }
-  });
-
-  return (
-    <Dialog
-      fullWidth
-      maxWidth={false}
-      open={open}
-      onClose={onClose}
-      PaperProps={{
-        sx: { maxWidth: 720 },
-      }}
-    >
-      <FormProvider methods={methods} onSubmit={onSubmit}>
-        <DialogTitle>Quick Update</DialogTitle>
-
-        <DialogContent>
-          {/* <Alert variant="outlined" severity="info" sx={{ mb: 3 }}>
-            Account is waiting for confirmation
-          </Alert> */}
-
-          <Box
-            rowGap={3}
-            columnGap={2}
-            display="grid"
-            sx={{ mt: 3 }}
-            gridTemplateColumns={{
-              xs: 'repeat(1, 1fr)',
-              sm: 'repeat(2, 1fr)',
-            }}
-          >
-            <RHFSelect name="status" label="Status">
-              <MenuItem key="none" value="" />
-              {USER_STATUS_OPTIONS.map((status) => (
-                <MenuItem key={status.value} value={status.value}>
-                  {status.label}
-                </MenuItem>
-              ))}
-            </RHFSelect>
-
-            <Box sx={{ display: { xs: 'none', sm: 'block' } }} />
-
-            <RHFTextField name="name" label="Name" />
-            <RHFTextField name="representative" label="Representative" />
-            <RHFTextField name="email" label="Email Address" />
-            <RHFTextField name="phoneNumber" label="Phone Number" />
-
-            <RHFTextField name="address.country" label="Country" />
-
-            {/* <RHFAutocomplete
-              name="address.country"
-              label="Country"
-              options={countries.map((country) => country.code)}
-              getOptionLabel={(option) => option}
-              renderOption={(props, option) => {
-                const { code, label, phone } = countries.filter(
-                  (country) => country.label === option
-                )[0];
-
-                if (!label) {
-                  return null;
-                }
-
-                return (
-                  <li {...props} key={label}>
-                    <Iconify
-                      key={label}
-                      icon={`circle-flags:${code.toLowerCase()}`}
-                      width={28}
-                      sx={{ mr: 1 }}
-                    />
-                    {label} ({code}) +{phone}
-                  </li>
-                );
-              }}
-            /> */}
-
-            <RHFTextField name="address.state" label="State/Region" />
-            <RHFTextField name="address.city" label="City" />
-            <RHFTextField name="address.street" label="Street" />
-            <RHFTextField name="address.zip" label="Zip/Code" />
-            <RHFTextField name="vatNumber" label="VAT" />
-            <RHFTextField name="companyNumber" label="Company Number" />
-          </Box>
-        </DialogContent>
-
-        <DialogActions>
-          <Button variant="outlined" onClick={onClose}>
-            Cancel
-          </Button>
-
-          <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
-            Update
-          </LoadingButton>
-        </DialogActions>
-      </FormProvider>
-    </Dialog>
-  );
-}
Index: src/sections/user/customer-table-filters-result.tsx
===================================================================
--- src/sections/user/customer-table-filters-result.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,109 +1,0 @@
-// @mui
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Paper from '@mui/material/Paper';
-import Button from '@mui/material/Button';
-import Stack, { StackProps } from '@mui/material/Stack';
-// types
-
-// components
-import Iconify from 'src/components/iconify';
-import { CustomerTableFilterValue, CustomerTableFilters } from 'src/schemas';
-
-// ----------------------------------------------------------------------
-
-type Props = StackProps & {
-  filters: CustomerTableFilters;
-  onFilters: (name: string, value: CustomerTableFilterValue) => void;
-  //
-  onResetFilters: VoidFunction;
-  //
-  results: number;
-};
-
-export default function CustomerTableFiltersResult({
-  filters,
-  onFilters,
-  //
-  onResetFilters,
-  //
-  results,
-  ...other
-}: Props) {
-  const handleRemoveStatus = () => {
-    onFilters('status', 'all');
-  };
-
-  const handleRemoveRole = (inputValue: string) => {
-    const newValue = filters.role.filter((item) => item !== inputValue);
-    onFilters('role', newValue);
-  };
-
-  return (
-    <Stack spacing={1.5} {...other}>
-      <Box sx={{ typography: 'body2' }}>
-        <strong>{results}</strong>
-        <Box component="span" sx={{ color: 'text.secondary', ml: 0.25 }}>
-          results found
-        </Box>
-      </Box>
-
-      <Stack flexGrow={1} spacing={1} direction="row" flexWrap="wrap" alignItems="center">
-        {filters.status !== 'all' && (
-          <Block label="Status:">
-            <Chip size="small" label={filters.status} onDelete={handleRemoveStatus} />
-          </Block>
-        )}
-
-        {!!filters.role.length && (
-          <Block label="Role:">
-            {filters.role.map((item) => (
-              <Chip key={item} label={item} size="small" onDelete={() => handleRemoveRole(item)} />
-            ))}
-          </Block>
-        )}
-
-        <Button
-          color="error"
-          onClick={onResetFilters}
-          startIcon={<Iconify icon="solar:trash-bin-trash-bold" />}
-        >
-          Clear
-        </Button>
-      </Stack>
-    </Stack>
-  );
-}
-
-// ----------------------------------------------------------------------
-
-type BlockProps = StackProps & {
-  label: string;
-};
-
-function Block({ label, children, sx, ...other }: BlockProps) {
-  return (
-    <Stack
-      component={Paper}
-      variant="outlined"
-      spacing={1}
-      direction="row"
-      sx={{
-        p: 1,
-        borderRadius: 1,
-        overflow: 'hidden',
-        borderStyle: 'dashed',
-        ...sx,
-      }}
-      {...other}
-    >
-      <Box component="span" sx={{ typography: 'subtitle2' }}>
-        {label}
-      </Box>
-
-      <Stack spacing={1} direction="row" flexWrap="wrap">
-        {children}
-      </Stack>
-    </Stack>
-  );
-}
Index: src/sections/user/customer-table-row.tsx
===================================================================
--- src/sections/user/customer-table-row.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,103 +1,0 @@
-// @mui
-import Avatar from '@mui/material/Avatar';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import TableRow from '@mui/material/TableRow';
-import TableCell from '@mui/material/TableCell';
-import IconButton from '@mui/material/IconButton';
-// hooks
-import { useBoolean } from 'src/hooks/use-boolean';
-// types
-import { Customer } from 'src/schemas';
-// components
-import Label from 'src/components/label';
-import Iconify from 'src/components/iconify';
-import CustomPopover, { usePopover } from 'src/components/custom-popover';
-//
-import CustomerQuickEditForm from './customer-quick-edit-form';
-
-// ----------------------------------------------------------------------
-
-type Props = {
-  selected: boolean;
-  onEditRow: VoidFunction;
-  row: Customer;
-};
-
-export default function CustomerTableRow({ row, selected, onEditRow }: Props) {
-  const { name, logoUrl, representative, status, email, phoneNumber } = row;
-
-  // const confirm = useBoolean();
-
-  const quickEdit = useBoolean();
-
-  // const popover = usePopover();
-
-  return (
-    <>
-      <TableRow hover selected={selected}>
-        {/* <TableCell padding="checkbox">
-          <Checkbox checked={selected} onClick={onSelectRow} />
-        </TableCell> */}
-
-        <TableCell sx={{ display: 'flex', alignItems: 'center' }}>
-          <Avatar alt={name} src={logoUrl} sx={{ mr: 2 }} />
-          <span>{name}</span>
-        </TableCell>
-
-        <TableCell sx={{ whiteSpace: 'nowrap' }}>{representative}</TableCell>
-
-        <TableCell sx={{ whiteSpace: 'nowrap' }}>{email}</TableCell>
-
-        <TableCell>
-          <Label
-            variant="soft"
-            color={
-              (status === 'active' && 'success') ||
-              (status === 'inactive' && 'warning') ||
-              (status === 'banned' && 'error') ||
-              'default'
-            }
-          >
-            {status}
-          </Label>
-        </TableCell>
-
-        <TableCell align="right" sx={{ px: 1, whiteSpace: 'nowrap' }}>
-          <Tooltip title="Quick Edit" placement="top" arrow>
-            <IconButton color={quickEdit.value ? 'inherit' : 'default'} onClick={quickEdit.onTrue}>
-              <Iconify icon="solar:pen-bold" />
-            </IconButton>
-          </Tooltip>
-          {/* 
-          <IconButton color={popover.open ? 'inherit' : 'default'} onClick={popover.onOpen}>
-            <Iconify icon="eva:more-vertical-fill" />
-          </IconButton> */}
-        </TableCell>
-      </TableRow>
-
-      <CustomerQuickEditForm
-        currentCustomer={row}
-        open={quickEdit.value}
-        onClose={quickEdit.onFalse}
-      />
-
-      {/* <CustomPopover
-        open={popover.open}
-        onClose={popover.onClose}
-        arrow="right-top"
-        sx={{ width: 140 }}
-      >
-        <MenuItem
-          onClick={() => {
-            onEditRow();
-            popover.onClose();
-          }}
-        >
-          <Iconify icon="solar:pen-bold" />
-          Edit
-        </MenuItem>
-      </CustomPopover> */}
-    </>
-  );
-}
Index: src/sections/user/customer-table-toolbar.tsx
===================================================================
--- src/sections/user/customer-table-toolbar.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,152 +1,0 @@
-import { useCallback } from 'react';
-// @mui
-import Stack from '@mui/material/Stack';
-import MenuItem from '@mui/material/MenuItem';
-import Checkbox from '@mui/material/Checkbox';
-import TextField from '@mui/material/TextField';
-import InputLabel from '@mui/material/InputLabel';
-import IconButton from '@mui/material/IconButton';
-import FormControl from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputAdornment from '@mui/material/InputAdornment';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-// types
-import { CustomerTableFilters, CustomerTableFilterValue } from 'src/schemas';
-// components
-import Iconify from 'src/components/iconify';
-import CustomPopover, { usePopover } from 'src/components/custom-popover';
-
-// ----------------------------------------------------------------------
-
-type Props = {
-  filters: CustomerTableFilters;
-  onFilters: (name: string, value: CustomerTableFilterValue) => void;
-  //
-  roleOptions: string[];
-};
-
-export default function CustomerTableToolbar({
-  filters,
-  onFilters,
-  //
-  roleOptions,
-}: Props) {
-  const popover = usePopover();
-
-  const handleFilterName = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onFilters('name', event.target.value);
-    },
-    [onFilters]
-  );
-
-  const handleFilterRole = useCallback(
-    (event: SelectChangeEvent<string[]>) => {
-      onFilters(
-        'role',
-        typeof event.target.value === 'string' ? event.target.value.split(',') : event.target.value
-      );
-    },
-    [onFilters]
-  );
-
-  return (
-    <>
-      <Stack
-        spacing={2}
-        alignItems={{ xs: 'flex-end', md: 'center' }}
-        direction={{
-          xs: 'column',
-          md: 'row',
-        }}
-        sx={{
-          p: 2.5,
-          pr: { xs: 2.5, md: 1 },
-        }}
-      >
-        <FormControl
-          sx={{
-            flexShrink: 0,
-            width: { xs: 1, md: 200 },
-          }}
-        >
-          <InputLabel>Role</InputLabel>
-
-          <Select
-            multiple
-            value={filters.role}
-            onChange={handleFilterRole}
-            input={<OutlinedInput label="Role" />}
-            renderValue={(selected) => selected.map((value) => value).join(', ')}
-            MenuProps={{
-              PaperProps: {
-                sx: { maxHeight: 240 },
-              },
-            }}
-          >
-            {roleOptions.map((option) => (
-              <MenuItem key={option} value={option}>
-                <Checkbox disableRipple size="small" checked={filters.role.includes(option)} />
-                {option}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-
-        <Stack direction="row" alignItems="center" spacing={2} flexGrow={1} sx={{ width: 1 }}>
-          <TextField
-            fullWidth
-            value={filters.name}
-            onChange={handleFilterName}
-            placeholder="Search..."
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <Iconify icon="eva:search-fill" sx={{ color: 'text.disabled' }} />
-                </InputAdornment>
-              ),
-            }}
-          />
-
-          <IconButton onClick={popover.onOpen}>
-            <Iconify icon="eva:more-vertical-fill" />
-          </IconButton>
-        </Stack>
-      </Stack>
-
-      <CustomPopover
-        open={popover.open}
-        onClose={popover.onClose}
-        arrow="right-top"
-        sx={{ width: 140 }}
-      >
-        <MenuItem
-          onClick={() => {
-            popover.onClose();
-          }}
-        >
-          <Iconify icon="solar:printer-minimalistic-bold" />
-          Print
-        </MenuItem>
-
-        <MenuItem
-          onClick={() => {
-            popover.onClose();
-          }}
-        >
-          <Iconify icon="solar:import-bold" />
-          Import
-        </MenuItem>
-
-        <MenuItem
-          onClick={() => {
-            popover.onClose();
-          }}
-        >
-          <Iconify icon="solar:export-bold" />
-          Export
-        </MenuItem>
-      </CustomPopover>
-    </>
-  );
-}
Index: src/sections/user/view/customer-create-view.tsx
===================================================================
--- src/sections/user/view/customer-create-view.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,41 +1,0 @@
-'use client';
-
-// @mui
-import Container from '@mui/material/Container';
-// routes
-import { paths } from 'src/routes/paths';
-// components
-import { useSettingsContext } from 'src/components/settings';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-//
-import CustomerNewEditForm from '../customer-new-edit-form';
-
-// ----------------------------------------------------------------------
-
-export default function CustomerCreateView() {
-  const settings = useSettingsContext();
-
-  return (
-    <Container maxWidth={settings.themeStretch ? false : 'lg'}>
-      <CustomBreadcrumbs
-        heading="Create a new customer"
-        links={[
-          {
-            name: 'Dashboard',
-            href: paths.dashboard.root,
-          },
-          {
-            name: 'Customer',
-            href: paths.dashboard.customer.list,
-          },
-          { name: 'New customer' },
-        ]}
-        sx={{
-          mb: { xs: 3, md: 5 },
-        }}
-      />
-
-      <CustomerNewEditForm />
-    </Container>
-  );
-}
Index: src/sections/user/view/customer-list-view.tsx
===================================================================
--- src/sections/user/view/customer-list-view.tsx	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,335 +1,0 @@
-'use client';
-
-import isEqual from 'lodash/isEqual';
-import { useState, useCallback } from 'react';
-// @mui
-import { alpha } from '@mui/material/styles';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import Card from '@mui/material/Card';
-import Table from '@mui/material/Table';
-import Button from '@mui/material/Button';
-import Container from '@mui/material/Container';
-import TableBody from '@mui/material/TableBody';
-import TableContainer from '@mui/material/TableContainer';
-// routes
-import { paths } from 'src/routes/paths';
-import { RouterLink } from 'src/routes/components';
-// hooks
-import { useBoolean } from 'src/hooks/use-boolean';
-// components
-import Label from 'src/components/label';
-import Iconify from 'src/components/iconify';
-import Scrollbar from 'src/components/scrollbar';
-import { useSettingsContext } from 'src/components/settings';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-import {
-  useTable,
-  getComparator,
-  emptyRows,
-  TableNoData,
-  TableEmptyRows,
-  TableHeadCustom,
-  TablePaginationCustom,
-} from 'src/components/table';
-// types
-import { Customer, CustomerTableFilters, CustomerTableFilterValue } from 'src/schemas';
-//
-import { useGetCustomers } from 'src/api/customer';
-import CustomerTableRow from '../customer-table-row';
-import CustomerTableFiltersResult from '../customer-table-filters-result';
-import { USER_STATUS_OPTIONS } from '../customer-quick-edit-form';
-
-// ----------------------------------------------------------------------
-
-const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...USER_STATUS_OPTIONS];
-
-const TABLE_HEAD = [
-  { id: 'name', label: 'Name' },
-  { id: 'representative', label: 'Representative', width: 220 },
-  { id: 'email', label: 'Email' },
-  { id: 'status', label: 'Status', width: 100 },
-  { id: '', width: 88 },
-];
-
-const defaultFilters: CustomerTableFilters = {
-  name: '',
-  role: [],
-  status: 'all',
-};
-
-// ----------------------------------------------------------------------
-
-export default function CustomerListView() {
-  const table = useTable({ defaultDense: true, defaultRowsPerPage: 25 });
-
-  const settings = useSettingsContext();
-
-  // const router = useRouter();
-
-  const confirm = useBoolean();
-
-  const { customers } = useGetCustomers();
-
-  // const [tableData, setTableData] = useState(customers || []);
-
-  const [filters, setFilters] = useState(defaultFilters);
-
-  const dataFiltered = applyFilter({
-    inputData: customers,
-    comparator: getComparator(table.order, table.orderBy),
-    filters,
-  });
-
-  const dataInPage = dataFiltered.slice(
-    table.page * table.rowsPerPage,
-    table.page * table.rowsPerPage + table.rowsPerPage
-  );
-
-  const denseHeight = table.dense ? 52 : 72;
-
-  const canReset = !isEqual(defaultFilters, filters);
-
-  const notFound = (!dataFiltered.length && canReset) || !dataFiltered.length;
-
-  const handleFilters = useCallback(
-    (name: string, value: CustomerTableFilterValue) => {
-      table.onResetPage();
-      setFilters((prevState) => ({
-        ...prevState,
-        [name]: value,
-      }));
-    },
-    [table]
-  );
-
-  // const handleDeleteRow = useCallback(
-  //   (id: string) => {
-  //     const deleteRow = customers.filter((row) => row.id !== id);
-
-  //     table.onUpdatePageDeleteRow(dataInPage.length);
-  //   },
-  //   [dataInPage.length, table]
-  // );
-
-  // const handleDeleteRows = useCallback(() => {
-  //   const deleteRows = tableData.filter((row) => !table.selected.includes(row.id));
-  //   setTableData(deleteRows);
-
-  //   table.onUpdatePageDeleteRows({
-  //     totalRows: tableData.length,
-  //     totalRowsInPage: dataInPage.length,
-  //     totalRowsFiltered: dataFiltered.length,
-  //   });
-  // }, [dataFiltered.length, dataInPage.length, table, tableData]);
-
-  // const handleEditRow = useCallback(
-  //   (id: string) => {
-  //     router.push(paths.dashboard.user.edit(id));
-  //   },
-  //   [router]
-  // );
-
-  const handleFilterStatus = useCallback(
-    (event: React.SyntheticEvent, newValue: string) => {
-      handleFilters('status', newValue);
-    },
-    [handleFilters]
-  );
-
-  const handleResetFilters = useCallback(() => {
-    setFilters(defaultFilters);
-  }, []);
-
-  return (
-    <>
-      <Container maxWidth={settings.themeStretch ? false : 'lg'}>
-        <CustomBreadcrumbs
-          heading="List"
-          links={[
-            { name: 'Dashboard', href: paths.dashboard.root },
-            { name: 'Customer', href: paths.dashboard.customer.list },
-            { name: 'List' },
-          ]}
-          action={
-            <Button
-              component={RouterLink}
-              href={paths.dashboard.customer.new}
-              variant="contained"
-              startIcon={<Iconify icon="mingcute:add-line" />}
-            >
-              New Customer
-            </Button>
-          }
-          sx={{
-            mb: { xs: 3, md: 5 },
-          }}
-        />
-
-        <Card>
-          <Tabs
-            value={filters.status}
-            onChange={handleFilterStatus}
-            sx={{
-              px: 2.5,
-              boxShadow: (theme) => `inset 0 -2px 0 0 ${alpha(theme.palette.grey[500], 0.08)}`,
-            }}
-          >
-            {STATUS_OPTIONS.map((tab) => (
-              <Tab
-                key={tab.value}
-                iconPosition="end"
-                value={tab.value}
-                label={tab.label}
-                icon={
-                  <Label
-                    variant={
-                      ((tab.value === 'all' || tab.value === filters.status) && 'filled') || 'soft'
-                    }
-                    color={
-                      (tab.value === 'active' && 'success') ||
-                      (tab.value === 'pending' && 'warning') ||
-                      (tab.value === 'banned' && 'error') ||
-                      'default'
-                    }
-                  >
-                    {tab.value === 'all' && customers.length}
-
-                    {tab.value === 'active' &&
-                      customers.filter((customer) => customer.status === 'active').length}
-
-                    {tab.value === 'banned' &&
-                      customers.filter((customer) => customer.status === 'banned').length}
-
-                    {tab.value === 'inactive' &&
-                      customers.filter((customer) => customer.status === 'inactive').length}
-                  </Label>
-                }
-              />
-            ))}
-          </Tabs>
-
-          {canReset && (
-            <CustomerTableFiltersResult
-              filters={filters}
-              onFilters={handleFilters}
-              //
-              onResetFilters={handleResetFilters}
-              //
-              results={dataFiltered.length}
-              sx={{ p: 2.5, pt: 0 }}
-            />
-          )}
-
-          <TableContainer sx={{ position: 'relative', overflow: 'unset' }}>
-            <Scrollbar>
-              <Table size={table.dense ? 'small' : 'medium'} sx={{ minWidth: 960 }}>
-                <TableHeadCustom
-                  order={table.order}
-                  orderBy={table.orderBy}
-                  headLabel={TABLE_HEAD}
-                  rowCount={customers.length}
-                  numSelected={table.selected.length}
-                  onSort={table.onSort}
-                />
-
-                <TableBody>
-                  {dataFiltered
-                    .slice(
-                      table.page * table.rowsPerPage,
-                      table.page * table.rowsPerPage + table.rowsPerPage
-                    )
-                    .map((row) => (
-                      <CustomerTableRow
-                        key={row.id}
-                        row={row}
-                        selected={table.selected.includes(row.id!)}
-                        onEditRow={() => {}}
-                      />
-                    ))}
-
-                  <TableEmptyRows
-                    height={denseHeight}
-                    emptyRows={emptyRows(table.page, table.rowsPerPage, customers.length)}
-                  />
-
-                  <TableNoData notFound={notFound} />
-                </TableBody>
-              </Table>
-            </Scrollbar>
-          </TableContainer>
-
-          <TablePaginationCustom
-            count={dataFiltered.length}
-            page={table.page}
-            rowsPerPage={table.rowsPerPage}
-            onPageChange={table.onChangePage}
-            onRowsPerPageChange={table.onChangeRowsPerPage}
-            //
-            dense={table.dense}
-            onChangeDense={table.onChangeDense}
-          />
-        </Card>
-      </Container>
-
-      {/* <ConfirmDialog
-        open={confirm.value}
-        onClose={confirm.onFalse}
-        title="Delete"
-        content={
-          <>
-            Are you sure want to delete <strong> {table.selected.length} </strong> items?
-          </>
-        }
-        action={
-          <Button
-            variant="contained"
-            color="error"
-            onClick={() => {
-              handleDeleteRows();
-              confirm.onFalse();
-            }}
-          >
-            Delete
-          </Button>
-        }
-      /> */}
-    </>
-  );
-}
-
-// ----------------------------------------------------------------------
-
-function applyFilter({
-  inputData,
-  comparator,
-  filters,
-}: {
-  inputData: Customer[];
-  comparator: (a: any, b: any) => number;
-  filters: CustomerTableFilters;
-}) {
-  const { name, status, role } = filters;
-
-  const stabilizedThis = inputData.map((el, index) => [el, index] as const);
-
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) return order;
-    return a[1] - b[1];
-  });
-
-  inputData = stabilizedThis.map((el) => el[0]);
-
-  if (name) {
-    inputData = inputData.filter(
-      (user) => user.name.toLowerCase().indexOf(name.toLowerCase()) !== -1
-    );
-  }
-
-  if (status !== 'all') {
-    inputData = inputData.filter((user) => user.status === status);
-  }
-
-  return inputData;
-}
Index: src/sections/user/view/index.ts
===================================================================
--- src/sections/user/view/index.ts	(revision 299af01b89703f010e0519c717f8e1c8bb9bb299)
+++ 	(revision )
@@ -1,2 +1,0 @@
-export { default as CustomerListView } from './customer-list-view';
-export { default as CustomerCreateView } from './customer-create-view';
