add empty states

client/src/components/EmptyState.tsx

@@ -0,0 +1,15 @@
+import { Grid, Typography } from "@mui/material";
+import { ReactNode } from "react";
+
+type EmptySateProps = {
+  mini?: boolean;
+  children: ReactNode;
+};
+
+export const EmptySate = ({ children, mini = false }: EmptySateProps) => {
+  return (
+    <Grid sx={{ textAlign: "center" }}>
+      <Typography variant={mini ? "body2" : "subtitle1"}>{children}</Typography>
+    </Grid>
+  );
+};

client/src/pages/Projects/Projects.tsx

@@ -1,5 +1,6 @@
 import { Box } from "@mui/material";
 import useSWR from "swr";
+import { EmptySate } from "../../components/EmptyState";
 import { useAuth } from "../../hooks/useAuth";
 import { createSWRFetcher } from "../../utils/swrFetcher";
 import { NewProjectAction } from "./components/NewProjectAction";
@@ -26,6 +27,9 @@ export const Projects = () => {
           gridAutoColumns: "repeat(auto-fit, minmax(250px, 1fr))",
         }}
       >
+        {(!!data?.data.length) ? null : (
+          <EmptySate>You didn't have any project yet</EmptySate>
+        )}
         {data?.data.map((project) => (
           <Project projectMutate={mutate} key={project.id} {...project} />
         ))}

client/src/pages/Projects/components/Project/TaskList/TasksList.tsx

@@ -1,4 +1,5 @@
 import { List, ListSubheader } from "@mui/material";
+import { EmptySate } from "../../../../../components/EmptyState";
 import { useAuth } from "../../../../../hooks/useAuth";
 import { useProject } from "../../../../../hooks/useProject";
 import { Task, TasksListItem } from "./TasksListItem";
@@ -35,6 +36,9 @@ export const TasksList = ({ title, tasks }: TaskListProps) => {
         </ListSubheader>
       }
     >
+      {tasks.length ? null : (
+        <EmptySate mini>You didn't have any task on '{title}' yet</EmptySate>
+      )}
       {tasks.map((task) => (
         <TasksListItem
           key={task.id}