Index: src/sections/user/view/customer-create-view.tsx
===================================================================
--- src/sections/user/view/customer-create-view.tsx	(revision 5d6f37a75130aab7d9a67b5b430603eff2c0ca6e)
+++ src/sections/user/view/customer-create-view.tsx	(revision 5d6f37a75130aab7d9a67b5b430603eff2c0ca6e)
@@ -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/user/view/customer-list-view.tsx
===================================================================
--- src/sections/user/view/customer-list-view.tsx	(revision 5d6f37a75130aab7d9a67b5b430603eff2c0ca6e)
+++ src/sections/user/view/customer-list-view.tsx	(revision 5d6f37a75130aab7d9a67b5b430603eff2c0ca6e)
@@ -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 'mvpmasters-shared';
+//
+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 5d6f37a75130aab7d9a67b5b430603eff2c0ca6e)
+++ src/sections/user/view/index.ts	(revision 5d6f37a75130aab7d9a67b5b430603eff2c0ca6e)
@@ -0,0 +1,2 @@
+export { default as CustomerListView } from './customer-list-view';
+export { default as CustomerCreateView } from './customer-create-view';
