styles: dashboard

src/app/(dashboard)/home/page.tsx

@@ -1,11 +1,21 @@
 import TanStackTable from "@/components/table/TanStackTable";
+import { Box, Card, Typography } from "@mui/material";
 import React from "react";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
 
 const HomePage = () => {
   return (
-    <div>
+    <Box>
+      <Card>
+        <CardHeader>
+          <Typography variant="h4">Projects</Typography>
+        </CardHeader>
+        <CardContent>
           <TanStackTable />
-    </div>
+        </CardContent>
+      </Card>
+    </Box>
   );
 };
 

src/components/wrapper/dashboardWrapper.tsx

@@ -21,6 +21,7 @@ import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
 import styles from "./DashboardWrapper.module.scss";
 import styled from "@emotion/styled";
 import { BUILDING, GEAR } from "@/utilities/svgConstant";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 const drawerWidth = 260;
 
@@ -154,6 +155,7 @@ export default function DashboardWrapper(props: Props) {
               Responsive drawer
             </Typography>
           </Box>
+          <Box display={"flex"} alignItems={"center"} gap={1}>
             <Box
               display={"flex"}
               alignItems={"center"}
@@ -176,13 +178,17 @@ export default function DashboardWrapper(props: Props) {
                 alt="Remy Sharp"
                 src="/static/images/avatar/1.jpg"
               />
-            <GEAR
+              {/* <GEAR
                 sx={{
                   color: "var(--primary_Active_text)",
                   fontSize: "1.8rem",
                   cursor: "pointer",
                 }}
-            />
+              /> */}
+              <IconButton aria-label="log out" size="medium" color="error">
+                <LogoutIcon fontSize="small" />
+              </IconButton>
+            </Box>
           </Box>
         </Toolbar>
       </CssAppBar>