feat: added teams management + some style editing (still in progress)

app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx

@@ -1,14 +1,10 @@
 "use client";
 
 import { makeStyles } from "@/lib/theme";
-import { Text } from "@/lib/theme";
-import { useTheme } from "@/lib/theme";
 import { Fade, List, ListItem, ListItemButton, ListItemIcon } from "@mui/material";
-import { useRouter } from "next/navigation";
-import { usePathname } from "next/navigation";
 import { useState } from "react";
 
-import { Icon } from "@p4b/ui/components/theme";
+import { Icon, Text, useTheme } from "@p4b/ui/components/theme";
 import type { IconId } from "@p4b/ui/components/theme";
 
 export type DashboardSidebarProps = {
@@ -18,35 +14,47 @@ export type DashboardSidebarProps = {
   children: React.ReactNode;
 };
 
+/**
+ * A functional component that renders a dashboard sidebar.
+ * @param {DashboardSidebarProps} props - The props object containing the items and children.
+ * @returns The rendered dashboard sidebar component.
+ */
+
 export function DashboardSidebar(props: DashboardSidebarProps) {
   const { items, children } = props;
-  const router = useRouter();
+
+  // styling
   const { classes, cx } = useStyles(props)();
   const theme = useTheme();
+
+  // Component States
   const [hover, setHover] = useState(false);
-  const pathname = usePathname();
+  const [active, setActive] = useState<string | null>(items[0].placeholder);
+
+  // functions
   const handleHover = () => {
     setHover((currHover) => !currHover);
   };
+
   return (
     <>
       <nav className={cx(classes.root)} onMouseEnter={handleHover} onMouseLeave={handleHover}>
         <List>
           {items?.map(({ link, icon, placeholder }, indx) => (
-            <ListItem onClick={() => router.push(link)} disablePadding key={indx}>
+            <ListItem onClick={() => setActive(placeholder)} disablePadding key={indx}>
               <ListItemButton className={classes.itemList}>
-                <ListItemIcon sx={{ marginRight: "10px" }}>
+                <ListItemIcon>
                   <Icon
                     size="default"
                     iconId={icon}
                     iconVariant={
-                      pathname.includes(link) ? "focus" : theme.isDarkModeEnabled ? "white" : "gray"
+                      active === placeholder ? "focus" : theme.isDarkModeEnabled ? "white" : "gray"
                     }
                   />
                 </ListItemIcon>
                 {hover ? (
                   <Fade in={true}>
-                    <Text typo="body 2" color={pathname.startsWith(link) ? "focus" : "primary"}>
+                    <Text typo="body 2" color={active === placeholder ? "focus" : "primary"}>
                       {placeholder}
                     </Text>
                   </Fade>
@@ -68,7 +76,7 @@ const useStyles = (props: DashboardSidebarProps) =>
     root: {
       zIndex: "20",
       paddingTop: "52px",
-      backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].light,
+      backgroundColor: theme.colors.useCases.surfaces.surface2,
       cursor: "pointer",
       width: props.width,
       left: 0,
@@ -78,14 +86,14 @@ const useStyles = (props: DashboardSidebarProps) =>
       transition: "width 0.4s ease",
       display: "flex",
       flexDirection: "column",
-      boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
+      boxShadow: "0px 1px 5px 0px #0000001F, 0px 2px 2px 0px #00000024, 0px 3px 1px -2px #00000033",
       "&:hover": {
         width: props.extended_width,
       },
     },
     itemList: {
       "&:hover": {
-        backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1,
+        backgroundColor: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant2}aa`,
       },
     },
   }));

app/client-v2/apps/goat/app/(dashboard)/content/AccessSettings.tsx

@@ -0,0 +1,213 @@
+import React from "react";
+import { useState } from "react";
+
+import { Avatar } from "@p4b/ui/components/Avatar";
+import { Divider } from "@p4b/ui/components/DataDisplay";
+import { RadioInput, SelectField } from "@p4b/ui/components/Inputs";
+import { Text, Icon, Button } from "@p4b/ui/components/theme";
+import type { IconId } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+interface AccessSettingsProps {
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+  setModalView: (value: number) => void;
+}
+
+const AccessSettings = (props: AccessSettingsProps) => {
+  const { changeState, setModalView } = props;
+
+  const { classes } = useStyles();
+
+  // Component States
+  const [settingChecked, setSettingChecked] = useState<string>("private");
+
+  //dumb data
+  const organizationPermissions = [
+    {
+      name: <div>View</div>,
+      value: "view",
+    },
+    {
+      name: <div>Edit</div>,
+      value: "edit",
+    },
+    {
+      name: <div>Download</div>,
+      value: "download",
+    },
+  ];
+
+  const teams = [
+    {
+      name: (
+        <div className={classes.teamName}>
+          {" "}
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 1</Text>
+        </div>
+      ),
+      value: "team1",
+      permission: "",
+    },
+    {
+      name: (
+        <div className={classes.teamName}>
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 2</Text>
+        </div>
+      ),
+      value: "team2",
+      permission: "",
+    },
+    {
+      name: (
+        <div className={classes.teamName}>
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 3</Text>
+        </div>
+      ),
+      value: "team3",
+      permission: "",
+    },
+  ];
+
+  const accessSettings: {
+    name: string;
+    value: string;
+    icon: IconId;
+    description: string;
+    child: React.ReactNode;
+  }[] = [
+    {
+      name: "Private",
+      value: "private",
+      icon: "lock",
+      description: "Only you have access",
+      child: <></>,
+    },
+    {
+      name: "Organization",
+      value: "organization",
+      icon: "coorperate",
+      description: "Everyone within your organization have access",
+      child: (
+        <div className={classes.SettingInputWrapper}>
+          <Text typo="body 2">@Organization_name</Text>
+          <SelectField
+            className={classes.selectField}
+            options={organizationPermissions}
+            multiple={true}
+            checkbox={true}
+            label="Permissions"
+            size="small"
+          />
+        </div>
+      ),
+    },
+    {
+      name: "Teams",
+      value: "teams",
+      icon: "team",
+      description: "Set permission by teams",
+      child: (
+        <div>
+          <Divider width="100%" color="gray" />
+          {teams.map((team) => (
+            <>
+              <div className={classes.SettingInputWrapper}>
+                <Text typo="body 2">{team.name}</Text>
+                <SelectField
+                  className={classes.selectField}
+                  options={organizationPermissions}
+                  multiple={true}
+                  checkbox={true}
+                  label="Permissions"
+                  size="small"
+                />
+              </div>
+              <Divider width="100%" className={classes.divider} color="gray" />
+            </>
+          ))}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ paddingBottom: "23px" }}>
+        {accessSettings.map((setting, index) => (
+          <>
+            <div key={index} className={classes.visibilitySettings}>
+              <div className={classes.visibility}>
+                <Icon iconId={setting.icon} size="small" />
+                <div>
+                  <Text typo="body 2">{setting.name}</Text>
+                  {settingChecked === setting.value ? (
+                    <Text typo="body 3" className={classes.italic} color="secondary">
+                      {setting.description}
+                    </Text>
+                  ) : null}
+                </div>
+              </div>
+              <RadioInput value={setting.value} onCheck={setSettingChecked} selectedValue={settingChecked} />
+            </div>
+            {settingChecked === setting.value ? setting.child : null}
+            {index !== accessSettings.length - 1 ? <Divider width="100%" color="gray" /> : null}
+          </>
+        ))}
+      </div>
+      <div className={classes.buttons}>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          CANCEL
+        </Button>
+        <Button variant="noBorder" onClick={() => setModalView(0)}>
+          APPLY
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { AccessSettings } })((theme) => ({
+  italic: {
+    fontStyle: "italic",
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+  visibilitySettings: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  visibility: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  SettingInputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(3),
+    marginTop: theme.spacing(3),
+  },
+  teamName: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(3),
+  },
+  selectField: {
+    flexGrow: "1",
+  },
+  divider: {
+    padding: "0",
+  },
+}));
+
+export default AccessSettings;