Untitled

const ActiveUser: React.FC = () => {
  const { enqueueSnackbar } = useSnackbar();
  const [search, setSearch] = useState<string>('');
  const debouncedSearch = useDebounce<string>(search, 500);
  const [initialData, setInitialData] = useState<IUserFormRequest>();
  const [errorFieldsMessage, setErrorFieldsMessage] =
    useState(DEFAULT_EMPTY_FIELDS);
  const {
    register: registerUser,
    handleSubmit: handleSubmitUser,
    reset: resetUser,
    setValue: setValueUser,
    getValues: getValuesUser,
  } = useForm<IUserFormRequest>();
  const serverTable = useServerTable();
  const UserListQuery = useMemo(
    () => ({
      search: debouncedSearch,
      page: serverTable.paginationModel.page + 1,
      limit: serverTable.paginationModel.pageSize,
      is_active: IsActive.active,
    }),
    [debouncedSearch, serverTable.paginationModel]
  );
  const {
    userData,
    userMeta,
    isFetching,
    isLoading,
    refetch: refetchUserList,
  } = useGetUserList(UserListQuery);

  useEffect(() => {
    if (initialData) {
      setValueUser('name', initialData.name);
      setValueUser('email', initialData.email);
      setValueUser('branch_id', initialData.branch_id);
      setValueUser('department_id', initialData.department_id);
      setValueUser('group_id', initialData.group_id);
      setValueUser('role_id', initialData.role_id);
    }
  }, [initialData]);

  console.log('initialData', initialData);

  const handleSuccessAddEditSubmitUser = (res: AxiosResponse) => {
    enqueueSnackbar(res.data.message, {
      anchorOrigin: { vertical: 'top', horizontal: 'right' },
    });
    refetchUserList();
    handleCloseDialog('addUser');
    handleCloseDialog('editUser');
  };

  const handleErrorAddEditSubmitUser = (error: any) => {
    if (error.response.status === 422)
      setErrorFieldsMessage((prev) => ({
        ...prev,
        ...error.response.data.errors,
      }));
    else {
      enqueueSnackbar(error?.response?.data.message, {
        anchorOrigin: { vertical: 'top', horizontal: 'right' },
        variant: 'error',
      });
    }
  };

  const columns = React.useMemo<GridColDef<IUserListResponse>[]>(
    () => [
      { field: 'name', headerName: 'Nama', minWidth: 160, flex: 1 },
      { field: 'employee_id', headerName: 'ID', minWidth: 100, flex: 1 },
      { field: 'email', headerName: 'Email', minWidth: 200, flex: 1 },
      {
        field: 'department',
        headerName: 'Departemen',
        minWidth: 120,
        flex: 1,
        valueGetter: (params) => {
          return params.row.department?.name;
        },
      },
      {
        field: 'groups',
        headerName: 'Grup',
        minWidth: 120,
        flex: 1,
        valueGetter: (params) => {
          return params.row.groups?.map((group) => group?.name);
        },
      },
      { field: 'status', headerName: 'Status', minWidth: 200, flex: 1 },
      {
        field: 'action',
        headerName: '',
        disableColumnMenu: true,
        width: 48,
        renderCell: (params: GridRenderCellParams) => <MoreMenu {...params} />,
      },
    ],
    []
  );

  const handleSearchUser = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(event.target.value);
  };

  const isLoadingDataList = isFetching || isLoading;

  const [openDialog, setOpenDialog] = useState({
    addUser: false,
    addEditGroup: false,
    deleteGroup: false,
  });
  const [dialogType, setDialogType] = useState<FormType>('add');
  const handleOpenDialog = (key: string, type: FormType = 'add') => {
    setOpenDialog((prev) => ({ ...prev, [key]: true }));
    setDialogType(type);
  };
  const handleCloseDialog = (key: string) => {
    setOpenDialog((prev) => ({ ...prev, [key]: false }));
    setErrorFieldsMessage(DEFAULT_EMPTY_FIELDS);
  };
  const handleAddUser = () => {
    handleCloseDialog('addUser');
  };

  const { mutateAsync: mutateAsyncCreateUser } = useCreateUser({
    onSuccess: handleSuccessAddEditSubmitUser,
    onError: handleErrorAddEditSubmitUser,
  });

  const submitCreateUser = async (data: IUserFormRequest) => {
    mutateAsyncCreateUser({
      ...data,
      company_id: 1,
    });
    setErrorFieldsMessage(DEFAULT_EMPTY_FIELDS);
  };

  if (!HAS_ACCESS)
    return (
      <IllustrationTemplate
        imageUrl="/img/x-circle.svg"
        imageAlt="no access"
        content="Kamu tidak memiliki akses untuk halaman ini"
      />
    );
  return (
    <>
      <AddEditUserDialog
        open={openDialog.addUser}
        type="add"
        errors={errorFieldsMessage}
        initialData={{ ...registerUser('name') }}
        onClose={() => handleCloseDialog('addUser')}
        onSubmit={submitCreateUser}
      />
      <Box sx={{ overflow: 'auto', position: 'relative' }} display="flex">
        <Box
          width={{ xs: '100%', md: 'calc(100% - 280px)' }}
          flex={1}
          sx={{ p: 3 }}
        >
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <Box>
              <Typography variant="h5" component="h2">
                Daftar Pengguna
              </Typography>
              <Typography
                variant="body2"
                component="p"
                color="InactiveCaptionText"
              >
                Additional description if required
              </Typography>
            </Box>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <Link href={{ pathname: 'user/inactive' }}>
                <Tooltip title="Pengguna tidak aktif">
                  <IconButton>
                    <PersonOff />
                  </IconButton>
                </Tooltip>
              </Link>
              <Button
                sx={{ ml: 2 }}
                variant="contained"
                onClick={() => handleOpenDialog('addUser')}
              >
                <Typography sx={{ display: { xs: 'none', sm: 'block' } }}>
                  Tambah Pengguna
                </Typography>
                <Add sx={{ display: { sm: 'none' } }} />
              </Button>
            </Box>
          </Box>
          <Box sx={{ mt: 4 }}>
            <Box sx={{ mb: 2 }}>
              <FormControl
                size="small"
                variant="outlined"
                sx={{ minWidth: 300 }}
              >
                <OutlinedInput
                  placeholder="Cari Pengguna"
                  id="outlined-adornment-search-report"
                  fullWidth
                  startAdornment={
                    <InputAdornment position="start">
                      <SearchOutlined />
                    </InputAdornment>
                  }
                  onChange={handleSearchUser}
                />
              </FormControl>
            </Box>
            <Box sx={{ width: '100%' }}>
              <DataGrid
                sx={{ border: 0, width: '100%', height: 500 }}
                rows={userData}
                columns={columns}
                density={'compact'}
                loading={isLoadingDataList}
                {...serverTable}
                rowCount={userMeta?.totalItems}
                slots={{
                  // toolbar: () => (
                  //   <>
                  //     <DataTableToolbar onSearch={handleSearchUser} />
                  //   </>
                  // ),
                  noResultsOverlay: TableNoResult,
                  noRowsOverlay: TableNoData,
                }}
                checkboxSelection
                disableRowSelectionOnClick
              />
            </Box>
          </Box>
        </Box>
      </Box>
    </>
  );
};

export default ActiveUser;