refactor: change styles and error handling

packages/client/src/pages/Employee/Employee.tsx

@@ -1,11 +1,21 @@
 import Box from '@mui/material/Box';
 import { EmployeeTable } from '@pages/Employee/components/table/EmployeeTable';
 import { useGetEmployeeListQuery } from '@graphql/employee/employee';
+import { Typography } from '@mui/material';
 
 export const Employee = () => {
-  const { data, loading, error } = useGetEmployeeListQuery();
+  const { data, error } = useGetEmployeeListQuery();
+  const employees = data?.employees || [];
 
-  if (loading || !data) return <div>Loading...</div>;
-
-  return <Box>{error ? <pre>{error.message}</pre> : <EmployeeTable data={data.employees} />}</Box>;
+  return (
+    <Box sx={{ paddingTop: 8 }}>
+      {error ? (
+        <Typography variant="subtitle1" color="error">
+          {error.message}
+        </Typography>
+      ) : (
+        <EmployeeTable data={employees} />
+      )}
+    </Box>
+  );
 };

packages/client/src/pages/Employee/components/form/EmployeeForm.tsx

@@ -25,7 +25,7 @@ interface EmployeeFormProps {
 }
 export const EmployeeForm: FC<EmployeeFormProps> = ({ handleClose }) => {
   const [initialValue, setInitialValue] = useState({ name: '', email: '', status: '' });
-  let { id } = useParams();
+  const { id } = useParams();
   const [updateEmployee] = useEmployeeUpdateInputMutation();
   const [addEmployee] = useEmployeeCreateInputMutation();
 

packages/client/src/pages/Employee/components/table/EmployeeTable.tsx

@@ -124,7 +124,7 @@ export const EmployeeTable: FC<EmployeeTableProps> = ({ data }) => {
   const keyFun = (row: any) => row.id;
 
   return (
-    <Box sx={{ width: '100%', marginTop: 8 }}>
+    <Box>
       <StyledPaper elevation={0}>
         <BasicTable
           rows={filteredRows}
@@ -142,7 +142,7 @@ export const EmployeeTable: FC<EmployeeTableProps> = ({ data }) => {
         </FormDialog>
         {data.length === 0 && (
           <Box>
-            <Button sx={{ width: '100%', height: '200px', fontSize: '1.2rem' }} onClick={() => handleClickOpen('new')}>
+            <Button sx={{ width: '100%', height: '200px', fontSize: '1.2rem' }} onClick={() => handleClickOpen('add')}>
               Add Your First Employee
             </Button>
             <FormDialog open={open.add} onClose={() => handleOnClose('add')}>