Index: src/sections/employee/view/employee-create-view.tsx
===================================================================
--- src/sections/employee/view/employee-create-view.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
+++ src/sections/employee/view/employee-create-view.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
@@ -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 EmployeeNewEditForm from '../employee-new-edit-form';
+
+// ----------------------------------------------------------------------
+
+export default function EmployeeCreateView() {
+  const settings = useSettingsContext();
+
+  return (
+    <Container maxWidth={settings.themeStretch ? false : 'lg'}>
+      <CustomBreadcrumbs
+        heading="Create a new employee"
+        links={[
+          {
+            name: 'Dashboard',
+            href: paths.dashboard.root,
+          },
+          {
+            name: 'Employee',
+            href: paths.dashboard.employee.list,
+          },
+          { name: 'New employee' },
+        ]}
+        sx={{
+          mb: { xs: 3, md: 5 },
+        }}
+      />
+
+      <EmployeeNewEditForm />
+    </Container>
+  );
+}
Index: src/sections/employee/view/employee-list-view.tsx
===================================================================
--- src/sections/employee/view/employee-list-view.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
+++ src/sections/employee/view/employee-list-view.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
@@ -0,0 +1,265 @@
+'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 { Employee, EmployeeTableFilters, EmployeeTableFilterValue } from 'src/schemas';
+//
+import { useGetEmployees } from 'src/api/employee';
+import EmployeeTableRow from '../employee-table-row';
+import EmployeeTableFiltersResult from '../employee-table-filters-result';
+
+const STATUS_OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'active', label: 'Active' },
+  { value: 'inactive', label: 'Inactive' },
+];
+
+const TABLE_HEAD = [
+  { id: 'name', label: 'Name' },
+  { id: 'email', label: 'Email' },
+  { id: 'project', label: 'Project' },
+  { id: 'status', label: 'Status', width: 100 },
+  { id: '', width: 88 },
+];
+
+const defaultFilters: EmployeeTableFilters = {
+  name: '',
+  status: 'all',
+};
+
+export default function EmployeeListView() {
+  const table = useTable({ defaultDense: true });
+  const settings = useSettingsContext();
+  const { employees } = useGetEmployees();
+  const [filters, setFilters] = useState(defaultFilters);
+
+  const dataFiltered = applyFilter({
+    inputData: employees,
+    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: EmployeeTableFilterValue) => {
+      table.onResetPage();
+      setFilters((prevState: EmployeeTableFilters) => ({
+        ...prevState,
+        [name]: value,
+      }));
+    },
+    [table]
+  );
+
+  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: 'Employee', href: paths.dashboard.employee.list },
+            { name: 'List' },
+          ]}
+          action={
+            <Button
+              component={RouterLink}
+              href={paths.dashboard.employee.new}
+              variant="contained"
+              startIcon={<Iconify icon="mingcute:add-line" />}
+            >
+              New Employee
+            </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 === 'inactive' && 'warning') ||
+                      'default'
+                    }
+                  >
+                    {tab.value === 'all' && employees.length}
+                    {tab.value === 'active' &&
+                      employees.filter((employee) => employee.status === 'active').length}
+                    {tab.value === 'inactive' &&
+                      employees.filter((employee) => employee.status === 'inactive').length}
+                  </Label>
+                }
+              />
+            ))}
+          </Tabs>
+
+          {canReset && (
+            <EmployeeTableFiltersResult
+              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={employees.length}
+                  numSelected={table.selected.length}
+                  onSort={table.onSort}
+                />
+
+                <TableBody>
+                  {dataFiltered
+                    .slice(
+                      table.page * table.rowsPerPage,
+                      table.page * table.rowsPerPage + table.rowsPerPage
+                    )
+                    .map((row) => (
+                      <EmployeeTableRow
+                        key={row.id}
+                        row={row}
+                        selected={table.selected.includes(row.id!)}
+                        onEditRow={() => {}}
+                      />
+                    ))}
+
+                  <TableEmptyRows
+                    height={denseHeight}
+                    emptyRows={emptyRows(table.page, table.rowsPerPage, employees.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>
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function applyFilter({
+  inputData,
+  comparator,
+  filters,
+}: {
+  inputData: Employee[];
+  comparator: (a: any, b: any) => number;
+  filters: EmployeeTableFilters;
+}) {
+  const { name, status } = 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(
+      (employee) => employee.name.toLowerCase().indexOf(name.toLowerCase()) !== -1
+    );
+  }
+
+  if (status !== 'all') {
+    inputData = inputData.filter((employee) => employee.status === status);
+  }
+
+  return inputData;
+}
Index: src/sections/employee/view/index.ts
===================================================================
--- src/sections/employee/view/index.ts	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
+++ src/sections/employee/view/index.ts	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
@@ -0,0 +1,2 @@
+export { default as EmployeeListView } from './employee-list-view';
+export { default as EmployeeCreateView } from './employee-create-view';
