From d9139a763c5a6ccf0b5b879154fc3b1334e4bf89 Mon Sep 17 00:00:00 2001
From: thetiagogil <talmeidagil@hotmail.com>
Date: Fri, 24 Jan 2025 18:07:26 +0000
Subject: [PATCH 1/2] create custom tabs component, add tabs to pages and
 change tabs default style

---
 .../layout/personal-activity.tab.tsx          |  9 ++++
 src/components/layout/personal-goals.tab.tsx  |  9 ++++
 src/components/layout/personal-manual.tab.tsx |  9 ++++
 .../layout/personal-profile.tab.tsx           |  9 ++++
 src/components/layout/team-activity.tab.tsx   |  9 ++++
 src/components/layout/team-overview.tab.tsx   |  9 ++++
 .../{layout => shared}/card-top-strengths.tsx |  0
 .../shared/{containers.tsx => layout.tsx}     |  0
 src/components/shared/tabs-container.tsx      | 41 +++++++++++++++++++
 src/pages/avatar-create.page.tsx              |  2 +-
 src/pages/avatar-results.page.tsx             |  4 +-
 src/pages/learn.page.tsx                      |  2 +-
 src/pages/personal.page.tsx                   | 18 ++++++--
 src/pages/team.page.tsx                       | 14 +++++--
 src/theme.ts                                  | 28 +++++++++++++
 15 files changed, 153 insertions(+), 10 deletions(-)
 create mode 100644 src/components/layout/personal-activity.tab.tsx
 create mode 100644 src/components/layout/personal-goals.tab.tsx
 create mode 100644 src/components/layout/personal-manual.tab.tsx
 create mode 100644 src/components/layout/personal-profile.tab.tsx
 create mode 100644 src/components/layout/team-activity.tab.tsx
 create mode 100644 src/components/layout/team-overview.tab.tsx
 rename src/components/{layout => shared}/card-top-strengths.tsx (100%)
 rename src/components/shared/{containers.tsx => layout.tsx} (100%)
 create mode 100644 src/components/shared/tabs-container.tsx

diff --git a/src/components/layout/personal-activity.tab.tsx b/src/components/layout/personal-activity.tab.tsx
new file mode 100644
index 0000000..334102d
--- /dev/null
+++ b/src/components/layout/personal-activity.tab.tsx
@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalActivityTab = () => {
+  return (
+    <Stack>
+      <Typography>Activity</Typography>
+    </Stack>
+  );
+};
diff --git a/src/components/layout/personal-goals.tab.tsx b/src/components/layout/personal-goals.tab.tsx
new file mode 100644
index 0000000..ae51c69
--- /dev/null
+++ b/src/components/layout/personal-goals.tab.tsx
@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalGoalsTab = () => {
+  return (
+    <Stack>
+      <Typography>Goals</Typography>
+    </Stack>
+  );
+};
diff --git a/src/components/layout/personal-manual.tab.tsx b/src/components/layout/personal-manual.tab.tsx
new file mode 100644
index 0000000..58b67a9
--- /dev/null
+++ b/src/components/layout/personal-manual.tab.tsx
@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalManualTab = () => {
+  return (
+    <Stack>
+      <Typography>Manual</Typography>
+    </Stack>
+  );
+};
diff --git a/src/components/layout/personal-profile.tab.tsx b/src/components/layout/personal-profile.tab.tsx
new file mode 100644
index 0000000..43e0b96
--- /dev/null
+++ b/src/components/layout/personal-profile.tab.tsx
@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const PersonalProfileTab = () => {
+  return (
+    <Stack>
+      <Typography>Profile</Typography>
+    </Stack>
+  );
+};
diff --git a/src/components/layout/team-activity.tab.tsx b/src/components/layout/team-activity.tab.tsx
new file mode 100644
index 0000000..eb2234f
--- /dev/null
+++ b/src/components/layout/team-activity.tab.tsx
@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const TeamActivityTab = () => {
+  return (
+    <Stack>
+      <Typography>Activity</Typography>
+    </Stack>
+  );
+};
diff --git a/src/components/layout/team-overview.tab.tsx b/src/components/layout/team-overview.tab.tsx
new file mode 100644
index 0000000..b30c1f1
--- /dev/null
+++ b/src/components/layout/team-overview.tab.tsx
@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/joy";
+
+export const TeamOverviewTab = () => {
+  return (
+    <Stack>
+      <Typography>Overview</Typography>
+    </Stack>
+  );
+};
diff --git a/src/components/layout/card-top-strengths.tsx b/src/components/shared/card-top-strengths.tsx
similarity index 100%
rename from src/components/layout/card-top-strengths.tsx
rename to src/components/shared/card-top-strengths.tsx
diff --git a/src/components/shared/containers.tsx b/src/components/shared/layout.tsx
similarity index 100%
rename from src/components/shared/containers.tsx
rename to src/components/shared/layout.tsx
diff --git a/src/components/shared/tabs-container.tsx b/src/components/shared/tabs-container.tsx
new file mode 100644
index 0000000..21a9278
--- /dev/null
+++ b/src/components/shared/tabs-container.tsx
@@ -0,0 +1,41 @@
+import { Tab, TabList, TabPanel, Tabs } from "@mui/joy";
+import { ReactNode } from "react";
+
+type TabItem = {
+  tab: string;
+  panel: ReactNode;
+};
+
+type TabsContainerProps = {
+  tabs: TabItem[];
+  hasPadding?: boolean;
+};
+
+export const TabsContainer = ({ tabs, hasPadding }: TabsContainerProps) => {
+  return (
+    <Tabs defaultValue={0}>
+      <TabList sx={{ pl: hasPadding ? 3 : 0, gap: 3 }}>
+        {tabs.map((obj, index) => (
+          <Tab
+            key={index}
+            value={index}
+            slotProps={{
+              root: {
+                sx: {
+                  p: 0
+                }
+              }
+            }}
+          >
+            {obj.tab}
+          </Tab>
+        ))}
+      </TabList>
+      {tabs.map((obj, index) => (
+        <TabPanel key={index} value={index} sx={{ px: hasPadding ? 3 : 0 }}>
+          {obj.panel}
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+};
diff --git a/src/pages/avatar-create.page.tsx b/src/pages/avatar-create.page.tsx
index 2c40a13..e00e4d0 100644
--- a/src/pages/avatar-create.page.tsx
+++ b/src/pages/avatar-create.page.tsx
@@ -3,7 +3,7 @@ import { useContext, useState } from "react";
 import { MockAvatar } from "../api/mock-avatar";
 import { ArrowRightOutlined } from "../assets/icons/arrow-right";
 import { AvatarLoading } from "../components/layout/avatar-loading";
-import { Layout } from "../components/shared/containers";
+import { Layout } from "../components/shared/layout";
 import { AuthContext } from "../contexts/auth.context";
 
 export const AvatarCreatePage = () => {
diff --git a/src/pages/avatar-results.page.tsx b/src/pages/avatar-results.page.tsx
index 66faded..2d5fab1 100644
--- a/src/pages/avatar-results.page.tsx
+++ b/src/pages/avatar-results.page.tsx
@@ -2,8 +2,8 @@ import { Button, IconButton, Stack, Typography } from "@mui/joy";
 import { Link } from "react-router-dom";
 import { MockAvatar } from "../api/mock-avatar";
 import { ArrowRotateOutlined } from "../assets/icons/arrow-rotate";
-import { CardTopStrengths } from "../components/layout/card-top-strengths";
-import { Layout } from "../components/shared/containers";
+import { CardTopStrengths } from "../components/shared/card-top-strengths";
+import { Layout } from "../components/shared/layout";
 
 export const AvatarResultsPage = () => {
   return (
diff --git a/src/pages/learn.page.tsx b/src/pages/learn.page.tsx
index 447580c..5545288 100644
--- a/src/pages/learn.page.tsx
+++ b/src/pages/learn.page.tsx
@@ -1,5 +1,5 @@
 import { Typography } from "@mui/joy";
-import { Layout } from "../components/shared/containers";
+import { Layout } from "../components/shared/layout";
 
 export const LearnPage = () => {
   return (
diff --git a/src/pages/personal.page.tsx b/src/pages/personal.page.tsx
index aaff91a..c3223a8 100644
--- a/src/pages/personal.page.tsx
+++ b/src/pages/personal.page.tsx
@@ -1,10 +1,22 @@
-import { Typography } from "@mui/joy";
-import { Layout } from "../components/shared/containers";
+import { PersonalActivityTab } from "../components/layout/personal-activity.tab";
+import { PersonalGoalsTab } from "../components/layout/personal-goals.tab";
+import { PersonalManualTab } from "../components/layout/personal-manual.tab";
+import { PersonalProfileTab } from "../components/layout/personal-profile.tab";
+import { Layout } from "../components/shared/layout";
+import { TabsContainer } from "../components/shared/tabs-container";
 
 export const PersonalPage = () => {
   return (
     <Layout hasSideBar>
-      <Typography>Personal page</Typography>
+      <TabsContainer
+        hasPadding
+        tabs={[
+          { tab: "My profile", panel: <PersonalProfileTab /> },
+          { tab: "Manual of me", panel: <PersonalManualTab /> },
+          { tab: "Personal goals", panel: <PersonalGoalsTab /> },
+          { tab: "Activity", panel: <PersonalActivityTab /> }
+        ]}
+      />
     </Layout>
   );
 };
diff --git a/src/pages/team.page.tsx b/src/pages/team.page.tsx
index 9d4cccb..4ffecae 100644
--- a/src/pages/team.page.tsx
+++ b/src/pages/team.page.tsx
@@ -1,10 +1,18 @@
-import { Typography } from "@mui/joy";
-import { Layout } from "../components/shared/containers";
+import { TeamActivityTab } from "../components/layout/team-activity.tab";
+import { TeamOverviewTab } from "../components/layout/team-overview.tab";
+import { Layout } from "../components/shared/layout";
+import { TabsContainer } from "../components/shared/tabs-container";
 
 export const TeamPage = () => {
   return (
     <Layout hasSideBar>
-      <Typography>Team page</Typography>
+      <TabsContainer
+        hasPadding
+        tabs={[
+          { tab: "Team overview", panel: <TeamOverviewTab /> },
+          { tab: "Activity", panel: <TeamActivityTab /> }
+        ]}
+      />
     </Layout>
   );
 };
diff --git a/src/theme.ts b/src/theme.ts
index 19fa32a..859912c 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -81,6 +81,34 @@ export const theme = extendTheme({
           }
         })
       }
+    },
+    JoyTabs: {
+      styleOverrides: {
+        root: () => ({
+          backgroundColor: "transparent",
+          width: "100%"
+        })
+      }
+    },
+    JoyTab: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: "transparent",
+          "&.Mui-selected": {
+            backgroundColor: "transparent",
+            color: theme.palette.subvisual.primary
+          },
+          "&::after": {
+            color: theme.palette.subvisual.primary
+          },
+          "&.MuiTab-root": {
+            "&:hover": {
+              backgroundColor: "transparent",
+              color: theme.palette.subvisual.primary
+            }
+          }
+        })
+      }
     }
   }
 });

From 6edd597308ba2a2590533278a44b328180273217 Mon Sep 17 00:00:00 2001
From: thetiagogil <talmeidagil@hotmail.com>
Date: Fri, 24 Jan 2025 18:10:32 +0000
Subject: [PATCH 2/2] add temporary disabled status to buttons without usage

---
 src/components/navigation/navbar.tsx         |  2 +-
 src/components/navigation/sidebar.tsx        | 10 +++++++---
 src/components/shared/card-top-strengths.tsx |  2 +-
 src/pages/avatar-results.page.tsx            |  2 +-
 src/router/app.tsx                           |  3 +--
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/navigation/navbar.tsx b/src/components/navigation/navbar.tsx
index b02c38c..7591823 100644
--- a/src/components/navigation/navbar.tsx
+++ b/src/components/navigation/navbar.tsx
@@ -29,7 +29,7 @@ export const Navbar = ({ hasSubvisualIcon }: NavbarProps) => {
         </JoyLink>
       )}
       <Stack direction="row" alignItems="center" gap={1}>
-        <IconButton size="sm">
+        <IconButton size="sm" disabled>
           <NotificationsOutlined sx={{ fontSize: 18 }} />
         </IconButton>
 
diff --git a/src/components/navigation/sidebar.tsx b/src/components/navigation/sidebar.tsx
index 6b2d7db..a2539b9 100644
--- a/src/components/navigation/sidebar.tsx
+++ b/src/components/navigation/sidebar.tsx
@@ -13,19 +13,22 @@ const sidebarItems = [
     name: "Personal",
     path: "/personal",
     icon: <PersonalOutlined sx={{ ...sidebarItemStyle, ...sidebarItemColor(false) }} />,
-    iconSelected: <PersonalFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />
+    iconSelected: <PersonalFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />,
+    disabled: false
   },
   {
     name: "Team",
     path: "/team",
     icon: <TeamOutlined sx={{ ...sidebarItemStyle, ...sidebarItemColor(false) }} />,
-    iconSelected: <TeamFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />
+    iconSelected: <TeamFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />,
+    disabled: false
   },
   {
     name: "Learn",
     path: "/learn",
     icon: <LearnOutlined sx={{ ...sidebarItemStyle, ...sidebarItemColor(false) }} />,
-    iconSelected: <LearnFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />
+    iconSelected: <LearnFilled sx={{ ...sidebarItemStyle, ...sidebarItemColor(true) }} />,
+    disabled: true
   }
 ] as const;
 
@@ -47,6 +50,7 @@ export const Sidebar = () => {
                 <JoyLink
                   key={item.name}
                   underline="none"
+                  disabled={item.disabled}
                   component={ReactLink}
                   to={item.path}
                   width="100%"
diff --git a/src/components/shared/card-top-strengths.tsx b/src/components/shared/card-top-strengths.tsx
index 65d9e6f..06f5c6e 100644
--- a/src/components/shared/card-top-strengths.tsx
+++ b/src/components/shared/card-top-strengths.tsx
@@ -156,7 +156,7 @@ export const CardTopStrengths = () => {
         ))}
       </Grid>
 
-      <Button variant="outlined" size="sm">
+      <Button variant="outlined" size="sm" disabled>
         See full report
       </Button>
     </Stack>
diff --git a/src/pages/avatar-results.page.tsx b/src/pages/avatar-results.page.tsx
index 2d5fab1..db05bfe 100644
--- a/src/pages/avatar-results.page.tsx
+++ b/src/pages/avatar-results.page.tsx
@@ -23,7 +23,7 @@ export const AvatarResultsPage = () => {
 
             <Stack alignItems="center" gap={4}>
               <MockAvatar sx={{ fontSize: 280 }} />
-              <IconButton>
+              <IconButton disabled>
                 <ArrowRotateOutlined sx={{ fontSize: 16 }} />
               </IconButton>
               <Button component={Link} to="/personal">
diff --git a/src/router/app.tsx b/src/router/app.tsx
index b074c96..f637f59 100644
--- a/src/router/app.tsx
+++ b/src/router/app.tsx
@@ -3,7 +3,6 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { AuthContext } from "../contexts/auth.context";
 import { AvatarCreatePage } from "../pages/avatar-create.page";
 import { AvatarResultsPage } from "../pages/avatar-results.page";
-import { LearnPage } from "../pages/learn.page";
 import { LoadingPage } from "../pages/loading.page";
 import { PersonalPage } from "../pages/personal.page";
 import { SignupPage } from "../pages/signup.page";
@@ -35,7 +34,7 @@ export const App = () => {
                   <Route path="/avatar-results" element={<AvatarResultsPage />} />
                   <Route path="/personal" element={<PersonalPage />} />
                   <Route path="/team" element={<TeamPage />} />
-                  <Route path="/learn" element={<LearnPage />} />
+                  {/*  <Route path="/learn" element={<LearnPage />} /> */}
                   <Route path="*" element={<Navigate to="/avatar-results" replace />} />
                 </>
               )}