Index: src/sections/employee/employee-new-edit-form.tsx
===================================================================
--- src/sections/employee/employee-new-edit-form.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
+++ src/sections/employee/employee-new-edit-form.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+// @mui
+import LoadingButton from '@mui/lab/LoadingButton';
+import Card from '@mui/material/Card';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Unstable_Grid2';
+// routes
+import { paths } from 'src/routes/paths';
+import { useRouter } from 'src/routes/hooks';
+// types
+import { NewEmployee, newEmployeeSchema } from 'src/schemas';
+// components
+import { useSnackbar } from 'src/components/snackbar';
+import FormProvider, { RHFTextField, RHFUploadAvatar } from 'src/components/hook-form';
+import { createEmployee } from 'src/api/employee';
+
+export default function EmployeeNewEditForm() {
+  const router = useRouter();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const methods = useForm<NewEmployee>({
+    resolver: zodResolver(newEmployeeSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      status: 'active' as const,
+      project: '',
+      iban: '',
+      photo: '',
+      cv: '',
+    },
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      await createEmployee(data);
+      enqueueSnackbar('Create success!');
+      router.push(paths.dashboard.employee.list);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  return (
+    <FormProvider methods={methods} onSubmit={onSubmit}>
+      <Grid container spacing={3}>
+        <Grid xs={12} md={8}>
+          <Card sx={{ p: 3 }}>
+            <Stack spacing={3}>
+              <RHFTextField name="name" label="Full Name" />
+              <RHFTextField name="email" label="Email Address" />
+              <RHFTextField name="project" label="Project" />
+              <RHFTextField name="iban" label="IBAN" />
+              <RHFTextField name="cv" label="CV Link" />
+            </Stack>
+
+            <Stack alignItems="flex-end" sx={{ mt: 3 }}>
+              <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
+                Create Employee
+              </LoadingButton>
+            </Stack>
+          </Card>
+        </Grid>
+      </Grid>
+    </FormProvider>
+  );
+}
Index: src/sections/employee/employee-quick-edit-form.tsx
===================================================================
--- src/sections/employee/employee-quick-edit-form.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
+++ src/sections/employee/employee-quick-edit-form.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
@@ -0,0 +1,110 @@
+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 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 { Employee, employeeSchema } from 'src/schemas';
+// components
+import { useSnackbar } from 'src/components/snackbar';
+import FormProvider, { RHFSelect, RHFTextField } from 'src/components/hook-form';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  open: boolean;
+  onClose: VoidFunction;
+  currentEmployee?: Employee;
+};
+
+export const EMPLOYEE_STATUS_OPTIONS = [
+  { value: 'active', label: 'Active' },
+  { value: 'inactive', label: 'Inactive' },
+];
+
+export default function EmployeeQuickEditForm({ currentEmployee, open, onClose }: Props) {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const defaultValues = useMemo(
+    () => ({
+      name: currentEmployee?.name || '',
+      email: currentEmployee?.email || '',
+      status: currentEmployee?.status || 'active',
+      project: currentEmployee?.project || '',
+      iban: currentEmployee?.iban || '',
+    }),
+    [currentEmployee]
+  );
+
+  const methods = useForm({
+    resolver: zodResolver(employeeSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      reset();
+      onClose();
+      enqueueSnackbar('Update success!');
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  return (
+    <Dialog fullWidth maxWidth="xs" open={open} onClose={onClose}>
+      <FormProvider methods={methods} onSubmit={onSubmit}>
+        <DialogTitle>Quick Update</DialogTitle>
+
+        <DialogContent>
+          <Box
+            rowGap={3}
+            columnGap={2}
+            display="grid"
+            gridTemplateColumns={{
+              xs: 'repeat(1, 1fr)',
+            }}
+            sx={{ pt: 3 }}
+          >
+            <RHFTextField name="name" label="Full Name" />
+            <RHFTextField name="email" label="Email Address" />
+            <RHFTextField name="project" label="Project" />
+            <RHFTextField name="iban" label="IBAN" />
+            <RHFSelect name="status" label="Status">
+              {EMPLOYEE_STATUS_OPTIONS.map((status) => (
+                <MenuItem key={status.value} value={status.value}>
+                  {status.label}
+                </MenuItem>
+              ))}
+            </RHFSelect>
+          </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/employee/employee-table-filters-result.tsx
===================================================================
--- src/sections/employee/employee-table-filters-result.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
+++ src/sections/employee/employee-table-filters-result.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
@@ -0,0 +1,86 @@
+// @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
+import { EmployeeTableFilters } from 'src/schemas';
+// components
+import Iconify from 'src/components/iconify';
+
+// ----------------------------------------------------------------------
+
+interface Props extends StackProps {
+  filters: EmployeeTableFilters;
+  onFilters: (name: string, value: string | string[]) => void;
+  onResetFilters: VoidFunction;
+  results: number;
+}
+
+export default function EmployeeTableFiltersResult({
+  filters,
+  onFilters,
+  onResetFilters,
+  results,
+  ...other
+}: Props) {
+  const handleRemoveStatus = () => {
+    onFilters('status', 'all');
+  };
+
+  const handleRemoveName = () => {
+    onFilters('name', '');
+  };
+
+  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.name && (
+          <Block label="Name:">
+            <Chip size="small" label={filters.name} onDelete={handleRemoveName} />
+          </Block>
+        )}
+
+        <Button
+          color="error"
+          onClick={onResetFilters}
+          startIcon={<Iconify icon="solar:trash-bin-trash-bold" />}
+        >
+          Clear
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+type BlockProps = {
+  label: string;
+  children: React.ReactNode;
+};
+
+function Block({ label, children }: BlockProps) {
+  return (
+    <Stack direction="row" alignItems="center" sx={{ typography: 'body2' }}>
+      <Box component="span" sx={{ color: 'text.secondary' }}>
+        {label}&nbsp;
+      </Box>
+      {children}
+    </Stack>
+  );
+}
Index: src/sections/employee/employee-table-row.tsx
===================================================================
--- src/sections/employee/employee-table-row.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
+++ src/sections/employee/employee-table-row.tsx	(revision 057453cdc828f504e8bcd813422d99221b3b5732)
@@ -0,0 +1,71 @@
+// @mui
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+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 { Employee } from 'src/schemas';
+// components
+import Label from 'src/components/label';
+import Iconify from 'src/components/iconify';
+//
+import EmployeeQuickEditForm from './employee-quick-edit-form';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  selected: boolean;
+  onEditRow: VoidFunction;
+  row: Employee;
+};
+
+export default function EmployeeTableRow({ row, selected, onEditRow }: Props) {
+  const { name, photo, project, status, email } = row;
+
+  const quickEdit = useBoolean();
+
+  return (
+    <>
+      <TableRow hover selected={selected}>
+        <TableCell sx={{ display: 'flex', alignItems: 'center' }}>
+          <Avatar alt={name} src={photo || ''} sx={{ mr: 2 }} />
+          <span>{name}</span>
+        </TableCell>
+
+        <TableCell sx={{ whiteSpace: 'nowrap' }}>{email}</TableCell>
+
+        <TableCell sx={{ whiteSpace: 'nowrap' }}>{project || '-'}</TableCell>
+
+        <TableCell>
+          <Label
+            variant="soft"
+            color={
+              (status === 'active' && 'success') ||
+              (status === 'inactive' && 'warning') ||
+              '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>
+        </TableCell>
+      </TableRow>
+
+      <EmployeeQuickEditForm
+        currentEmployee={row}
+        open={quickEdit.value}
+        onClose={quickEdit.onFalse}
+      />
+    </>
+  );
+}
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';
