From 688b9126c22e74dcac9428e9c58b24c73a1e812f Mon Sep 17 00:00:00 2001
From: Luiz Henrique Guerra <lhguerra@gmail.com>
Date: Mon, 9 Dec 2024 11:58:21 -0300
Subject: [PATCH] fix: handle manager dashboard when no projects are found

---
 app/spa/src/components/BasicPage.tsx         | 72 ++++++++---------
 app/spa/src/components/Footer.tsx            | 19 +++++
 app/spa/src/pages/Users/ManagerDashboard.tsx | 82 ++++++++++----------
 3 files changed, 93 insertions(+), 80 deletions(-)
 create mode 100644 app/spa/src/components/Footer.tsx

diff --git a/app/spa/src/components/BasicPage.tsx b/app/spa/src/components/BasicPage.tsx
index 507daf1ab..ec9cf4f25 100644
--- a/app/spa/src/components/BasicPage.tsx
+++ b/app/spa/src/components/BasicPage.tsx
@@ -1,16 +1,17 @@
 import { ReactNode, useContext } from "react"
 import {
-  Container,
-  Typography,
-  Box,
-  Link,
   Backdrop,
+  Box,
   CircularProgress,
+  Container,
+  Stack,
+  Typography,
 } from "@mui/material"
 import Header from "./Header"
 import MessagesBox from "./MessagesBox"
 import Breadcrumbs, { BreadcrumbsLink } from "./Breadcrumbs"
 import { MessagesContext } from "../contexts/MessageContext"
+import Footer from "./Footer"
 
 export type BasicPageProps = {
   breadcrumbsLinks?: BreadcrumbsLink[]
@@ -28,45 +29,38 @@ const BasicPage = ({
 }: BasicPageProps) => {
   const { messages } = useContext(MessagesContext)
 
-  if (loading)
-    return (
-      <Backdrop open>
-        <CircularProgress color="secondary" />
-      </Backdrop>
-    )
-
   return (
     <>
-      <Header />
-      <Container maxWidth="xl" sx={{ backgroundColor: "grey.100" }}>
-        {breadcrumbsLinks && <Breadcrumbs links={breadcrumbsLinks} />}
-        <Box
-          sx={{
-            marginBottom: 3,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
+      {loading && (
+        <Backdrop open>
+          <CircularProgress color="secondary" />
+        </Backdrop>
+      )}
+      <Stack sx={{ height: "100%" }}>
+        <Header />
+        <Container
+          maxWidth="xl"
+          sx={{ backgroundColor: "grey.100", paddingBottom: 8, flex: 1 }}
         >
-          <Typography component="h1" variant="h4" mr={2}>
-            {title}
-          </Typography>
-          {actions && actions}
-        </Box>
-        {children}
-        <MessagesBox messages={messages} />
-      </Container>
-      <Box sx={{ py: 2, mt: 11 }}>
-        <Container maxWidth="xl">
-          <Link href="/" sx={{ display: "block" }}>
-            <img
-              src="https://res.cloudinary.com/taller-digital/image/upload/v1599220860/2_taller_branco_horizontal.png"
-              alt="Taller Logo"
-              height={64}
-            />
-          </Link>
+          {breadcrumbsLinks && <Breadcrumbs links={breadcrumbsLinks} />}
+          <Box
+            sx={{
+              marginBottom: 3,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography component="h1" variant="h4" mr={2}>
+              {title}
+            </Typography>
+            {actions && actions}
+          </Box>
+          {children}
+          <MessagesBox messages={messages} />
         </Container>
-      </Box>
+        <Footer />
+      </Stack>
     </>
   )
 }
diff --git a/app/spa/src/components/Footer.tsx b/app/spa/src/components/Footer.tsx
new file mode 100644
index 000000000..0f9096ea0
--- /dev/null
+++ b/app/spa/src/components/Footer.tsx
@@ -0,0 +1,19 @@
+import { Box, Container, Link } from "@mui/material"
+
+const Footer = () => {
+  return (
+    <Box sx={{ py: 2, backgroundColor: "primary.main" }}>
+      <Container maxWidth="xl">
+        <Link href="/" sx={{ display: "block" }}>
+          <img
+            src="https://res.cloudinary.com/taller-digital/image/upload/v1599220860/2_taller_branco_horizontal.png"
+            alt="Taller Logo"
+            height={64}
+          />
+        </Link>
+      </Container>
+    </Box>
+  )
+}
+
+export default Footer
diff --git a/app/spa/src/pages/Users/ManagerDashboard.tsx b/app/spa/src/pages/Users/ManagerDashboard.tsx
index b75318d6e..61e33af83 100644
--- a/app/spa/src/pages/Users/ManagerDashboard.tsx
+++ b/app/spa/src/pages/Users/ManagerDashboard.tsx
@@ -44,53 +44,53 @@ const ManagerDashboard = () => {
 
   return (
     <BasicPage title={""} loading={loading}>
-      <Box sx={{ display: "flex" }}>
-        <Box sx={{ width: "50%", paddingX: 4 }}>
-          <Typography variant={"h4"}>
-            {`${loadedProject?.name} | Visão Geral`}
-          </Typography>
-        </Box>
-        <Box sx={{ width: "50%" }}>
-          <form>
-            <FormGroup style={{ width: "100%" }}>
-              <Grid container spacing={2} alignItems="center">
-                {/* Input Field */}
-                <Grid item xs={10}>
-                  <InputLabel htmlFor="searchText">
-                    {t("list.form.search")}
-                  </InputLabel>
-                  <Input
-                    {...register("searchText")}
-                    defaultValue={searchText}
-                    fullWidth // Material-UI's built-in prop for full-width input
-                  />
-                </Grid>
-
-                {/* Submit Button */}
-                <Grid item xs={2}>
-                  <Button type="submit">
-                    <SearchIcon fontSize="large" color="primary" />
-                  </Button>
-                </Grid>
-              </Grid>
-            </FormGroup>
-          </form>
-        </Box>
-      </Box>
       {project ? (
-        <Box sx={{ padding: 4 }}>
-          <Box sx={{ width: "50%", marginBottom: 4 }}>
-            <ActiveContractsHoursTicket project={project} />
-          </Box>
+        <>
           <Box sx={{ display: "flex" }}>
-            <Box sx={{ width: "50%" }}>
-              <ProjectBurnup project={project} />
+            <Box sx={{ width: "50%", paddingX: 4 }}>
+              <Typography variant={"h4"}>
+                {`${project?.name} | Visão Geral`}
+              </Typography>
             </Box>
             <Box sx={{ width: "50%" }}>
-              <ProjectHoursBurnup project={project} />
+              <form>
+                <FormGroup style={{ width: "100%" }}>
+                  <Grid container spacing={2} alignItems="center">
+                    <Grid item xs={10}>
+                      <InputLabel htmlFor="searchText">
+                        {t("list.form.search")}
+                      </InputLabel>
+                      <Input
+                        {...register("searchText")}
+                        defaultValue={searchText}
+                        fullWidth
+                      />
+                    </Grid>
+
+                    <Grid item xs={2}>
+                      <Button type="submit">
+                        <SearchIcon fontSize="large" color="primary" />
+                      </Button>
+                    </Grid>
+                  </Grid>
+                </FormGroup>
+              </form>
+            </Box>
+          </Box>
+          <Box sx={{ padding: 4 }}>
+            <Box sx={{ width: "50%", marginBottom: 4 }}>
+              <ActiveContractsHoursTicket project={project} />
+            </Box>
+            <Box sx={{ display: "flex" }}>
+              <Box sx={{ width: "50%" }}>
+                <ProjectBurnup project={project} />
+              </Box>
+              <Box sx={{ width: "50%" }}>
+                <ProjectHoursBurnup project={project} />
+              </Box>
             </Box>
           </Box>
-        </Box>
+        </>
       ) : (
         <Typography>{tProject("projectsTable.emptyProjects")}</Typography>
       )}