Merge pull request #5 from Doble-Technologies/feature/settings-page

Feature/settings page

.github/workflows/web-deploy.yml

@@ -17,7 +17,7 @@ on:
 jobs:
   deploy:
     environment: dev
-    runs-on: ['self-hosted', 'pi']
+    runs-on: 'ubuntu-latest'
     permissions:
       contents: read
       packages: write

api/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "shiftsync-website-api",
+  "version": "1.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.5.0",
+    "express": "^5.1.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.10"
+  }
+}

api/server.js

@@ -0,0 +1,21 @@
+import express from 'express';
+import cors from 'cors';
+import dotenv from 'dotenv';
+dotenv.config();
+import { postgresServices } from './services/postgres/postgresServices.js';
+
+const app = express();
+
+const corsOptions = {
+  origin: ["http://localhost:5173"]
+};
+
+app.use(cors(corsOptions));
+
+app.get("/api", (req, res) => {
+  res.json({ fruits: ["apple", "orange", "banana"] });
+});
+
+app.listen(5172, () => {
+  console.log('Server Started on port 5172');
+});

api/services/postgres/postgresServices.js

@@ -0,0 +1,8 @@
+export const postgresServices = {
+  getUsers: async (args) => {
+
+  },
+  getDepartments: async (args) => {
+
+  }
+};

components/common/index.js

@@ -1 +0,0 @@
-export { ToggleTabs } from './ToggleTabs';

package.json

@@ -1,34 +1,20 @@
 {
-  "name": "my-app",
+  "name": "shiftsync-website",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.1",
-  "type": "module",
+  "main": "index.js",
   "scripts": {
-    "dev": "vite",
+    "api": "npm run dev --prefix api",
-    "build": "vite build",
+    "web": "npm run dev --prefix web",
-    "lint": "eslint .",
+    "dev": "concurrently \"npm run api\" \"npm run web\"",
-    "preview": "vite preview"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
+    "cors": "^2.8.5",
-    "@emotion/styled": "^11.14.0",
+    "express": "^5.1.0"
-    "@mui/icons-material": "^7.1.0",
-    "@mui/material": "^7.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.0",
-    "zustand": "^5.0.5"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.13.5",
+    "concurrently": "^9.1.2",
-    "@eslint/js": "^9.25.0",
+    "nodemon": "^3.1.10"
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
-    "vite": "^6.3.5"
   }
 }

src/pages/Settings/Settings.jsx

@@ -1,97 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
-import { Stack } from '@mui/material';
-import { ToggleTabs, useLocalStore } from '@components';
-
-const OuterContainer = styled(Stack)`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-  padding: 10px 10px 0px 0px;
-`;
-
-const fields = {
-  departmentInformation: {
-    title: 'Information',
-    tab: 'department',
-    fields: []
-  },
-  departmentPermissions: {
-    title: 'Permissions',
-    tab: 'department',
-    fields: []
-  },
-  departmentManagers: {
-    title: 'Managers',
-    tab: 'department',
-    fields: []
-  },
-  departmentSubscriptions: {
-    title: 'Subscriptions',
-    tab: 'department',
-    fields: []
-  },
-  myInformation: {
-    title: 'Information',
-    tab: 'personal',
-    fields: []
-  },
-  myNotifications: {
-    title: 'Notifications',
-    tab: 'personal',
-    fields: []
-  },
-  departmentNotifications: {
-    title: 'Notifications',
-    tab: 'department',
-    fields: []
-  },
-}
-
-export const Settings = () => {
-  const { user } = useLocalStore();
-  const tabs = [
-      {
-          label: 'Personal',
-          value: 'personal'
-      },
-      {
-          label: 'Department',
-          value: 'department'
-      }
-  ];
-
-  const [tabValue, setTabValue] = useState(tabs[0]);
-
-  useEffect(() => {
-    document.title = 'ShiftSync | Settings';
-  }, []);
-
-  return (
-    <div>
-      {user?.administrator ? (
-        <OuterContainer>
-          <ToggleTabs 
-            tabs={tabs}
-            tabValue={tabValue}
-            setTabValue={setTabValue}
-            tabColor='#4D79FF'
-          />
-        </OuterContainer>
-      ) : null }
-      {tabValue?.value === 'personal' ? (
-        <div>
-          <h1>{`Settings Page${user?.administrator ? ` - ${tabValue?.label}` : ''}`}</h1>
-          <Link to="/">Go to Home</Link>
-        </div>
-      ) : (
-        <div>
-          <h1>Settings Page - Department</h1>
-          <Link to="/">Go to Home</Link>
-        </div>
-      )}
-    </div>
-  );
-};

src/router/AppRouter.jsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Routes, Route } from 'react-router-dom';
-import { Home, Profile, Schedule, Settings } from '@src/pages';
-import { Shell } from '@components';
-import { useLocalStore } from '@components';
-
-const dept = {
-  id: 1,
-  name: 'Darien EMS - Post 53',
-  Abv: 'DEMS',
-  schedulers: [],
-  managers: [],
-  administrators: [1]
-};
-
-const AppRouter = () => {
-  const { user, setUser, setDepartment } = useLocalStore();
-  const [userChanged, setUserChanged] = useState(false);
-
-  useEffect(() => {
-    setDepartment(dept);
-    setUser({
-      id: 1,
-      firstName: 'ShiftSync-Manager',
-      lastName: 'Test-User',
-      email: 'testuser@shift-sync.com',
-      scheduler: dept?.schedulers?.includes(1),
-      manager: dept?.managers?.includes(1),
-      administrator: dept?.administrators?.includes(1),
-      isSSAdmin: false
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!userChanged && user) {
-      if (user?.isSSAdmin) {
-        setUser({
-          ...user,
-          scheduler: true,
-          manager: true,
-          administrator: true,
-        });
-      } else if (user?.administrator) {
-        setUser({
-          ...user,
-          scheduler: true,
-          manager: true,
-        });
-      } else if (user?.manager) {
-        setUser({
-          ...user,
-          scheduler: true,
-        });
-      }
-      setUserChanged(true);
-    }
-  }, [user]);
-
-
-  return (
-    <Shell>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/schedule" element={<Schedule />} />
-        <Route path="/settings" element={<Settings />} />
-        <Route path="/profile" element={<Profile />} />
-      </Routes>
-    </Shell>
-  );
-};
-
-export default AppRouter

web/.dockerignore

@@ -0,0 +1 @@
+**/node_modules/**

web/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+COPY package-lock.json ./
+COPY . ./web
+
+RUN npm ci
+
+COPY . .
+EXPOSE 8080
+EXPOSE 5173
+CMD ["npm", "run", "dev"]

web/components/common/TransferBox/TransferBox.jsx

@@ -0,0 +1,253 @@
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import CheckIcon from '@mui/icons-material/Check';
+import DoNotDisturbIcon from '@mui/icons-material/DoNotDisturb';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+const OuterShell = styled('div')`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-around;
+`;
+
+const TransferShell = styled('div')`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  padding: 5px;
+`;
+
+const TransferButtonShell = styled('div')`
+  display: flex;
+  flex-direction: column;
+  width: 25%;
+  align-items: center;
+  justify-content: center;
+`;
+
+const TransferHeader = styled('div')`
+  padding-bottom: 10px;
+`;
+
+const TransferOuterBox = styled('div')`
+  display: flex;
+  width: 200px;
+  height: 250px;
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: #E8E8E8;
+`;
+
+const TransferInnerBox = styled('div')`
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+`;
+
+const TransferBoxItem = styled('div')`
+  display: flex;
+  align-items: center;
+  width: 188px;
+  padding: 2px 4px;
+  background-color: ${({ isSelected }) => (isSelected ? '#D3D3D3' : 'transparent')};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  color: ${({ disabled }) => (disabled ? '#999' : 'inherit')};
+  border-radius: 4px;
+  overflow: hidden;
+  user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+`;
+
+const TransferBoxLabel = styled('span')`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+`;
+
+const CenterButton = styled('div')`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid black;
+  border-radius: 5px;
+  margin: 5px;
+  cursor: ${({ buttonEnabled }) => (buttonEnabled ? 'pointer' : 'not-allowed')};
+  transition: background-color 0.3s ease, color 0.3s ease;
+  opacity: ${({ buttonEnabled }) => (buttonEnabled ? 1 : 0.5)};
+
+  ${({ color, buttonEnabled }) => buttonEnabled && color && `
+    &:hover {
+      background-color: ${color};
+      color: white;
+    }
+  `}
+`;
+
+const sortByLastThenFirst = (arr) => {
+  return [...arr].sort((a, b) => {
+    const [aLast, aFirst] = a.value.split(',').map(s => s.trim());
+    const [bLast, bFirst] = b.value.split(',').map(s => s.trim());
+
+    if (aLast < bLast) return -1;
+    if (aLast > bLast) return 1;
+    if (aFirst < bFirst) return -1;
+    if (aFirst > bFirst) return 1;
+    return 0;
+  });
+};
+
+
+export const TransferBox = ({ fields, leftGroup, rightGroup, onSave, user={} }) => {
+  const {
+    id,
+    exclusionList,
+    oldListLabel,
+    newListLabel
+  } = fields;
+
+  const [itemSelected, setItemSelected] = useState({});
+  const [leftItems, setLeftItems] = useState(sortByLastThenFirst(leftGroup || []));
+  const [rightItems, setRightItems] = useState(sortByLastThenFirst(rightGroup || []));
+
+  const handleItemClick = (item, side) => {
+    setItemSelected({ ...item, from: side });
+  };  
+
+  const arraysEqual = (a, b) => {
+    if (a.length !== b.length) return false;
+    const aIds = a.map(i => i.id).sort();
+    const bIds = b.map(i => i.id).sort();
+    return JSON.stringify(aIds) === JSON.stringify(bIds);
+  };
+
+  const isLeftArrowEnabled = itemSelected?.from === 'right';
+  const isRightArrowEnabled = itemSelected?.from === 'left';
+
+  const hasChanges = !arraysEqual(leftItems, leftGroup) || !arraysEqual(rightItems, rightGroup);
+
+  return (
+    <OuterShell>
+      <TransferShell>
+        <TransferHeader>
+          <h2>{oldListLabel}</h2>
+        </TransferHeader>
+        <TransferOuterBox>
+          <TransferInnerBox>
+            {leftItems?.filter(leftItem => !rightItems.some(rightItem => rightItem.id === leftItem.id))?.map((j) => {
+              const isUser = user?.id === j?.id;
+              const isSelected = itemSelected?.id === j?.id && itemSelected?.from === 'left' && !isUser;
+              return (
+                <TransferBoxItem
+                  key={j?.id}
+                  isSelected={isSelected}
+                  disabled={isUser}
+                  onClick={() => {
+                    if (isUser) return;
+                    handleItemClick(j, 'left');
+                  }}
+                  title={j?.value}
+                >
+                  <TransferBoxLabel>
+                    {j?.value}
+                  </TransferBoxLabel>
+                </TransferBoxItem>
+              )
+            })}
+          </TransferInnerBox>
+        </TransferOuterBox>
+      </TransferShell>
+      <TransferButtonShell>
+        <CenterButton
+          onClick={() => {
+            if (!itemSelected) return;
+            if (itemSelected.from === 'left') {
+              setLeftItems(prev => prev.filter(item => item.id !== itemSelected.id));
+              setRightItems(prev => sortByLastThenFirst([
+                ...rightItems.filter(item => item.id !== itemSelected.id),
+                itemSelected
+              ]));
+            }
+            setItemSelected({});
+          }}
+          color='#A8A8A8'
+          buttonEnabled={isRightArrowEnabled}
+        >
+          <KeyboardArrowRightIcon />
+        </CenterButton>
+        <CenterButton
+          onClick={() => {
+            setLeftItems(sortByLastThenFirst(leftGroup));
+            setRightItems(sortByLastThenFirst(rightGroup));
+            setItemSelected({});
+          }}
+          color='#FF6666'
+          buttonEnabled={hasChanges}
+        >
+          <DoNotDisturbIcon />
+        </CenterButton>
+        <CenterButton
+          onClick={() => {
+            return onSave(rightItems?.map((item) => { return item?.id }))
+          }}
+          color='#00B33C'
+          buttonEnabled={hasChanges}
+        >
+          <CheckIcon />
+        </CenterButton>
+        <CenterButton
+          onClick={() => {
+            if (!itemSelected) return;
+            if (itemSelected.from === 'right') {
+              setRightItems(prev => prev.filter(item => item.id !== itemSelected.id));
+              setLeftItems(prev => sortByLastThenFirst([
+                ...leftItems.filter(item => item.id !== itemSelected.id),
+                itemSelected
+              ]));
+            }
+            setItemSelected({});
+          }}
+          color='#A8A8A8'
+          buttonEnabled={isLeftArrowEnabled}
+        >
+          <KeyboardArrowLeftIcon />
+        </CenterButton>
+      </TransferButtonShell>
+      <TransferShell>
+        <TransferHeader>
+          <h2>{newListLabel}</h2>
+        </TransferHeader>
+        <TransferOuterBox>
+          <TransferInnerBox>
+            {rightItems?.map((j) => {
+              const isUser = user?.id === j?.id;
+              const isSelected = itemSelected?.id === j?.id && itemSelected?.from === 'right' && !isUser;
+              return (
+                <TransferBoxItem
+                  key={j?.id}
+                  isSelected={isSelected}
+                  disabled={isUser}
+                  onClick={() => {
+                    if (isUser) return;
+                    handleItemClick(j, 'right');
+                  }}
+                  title={j?.value}
+                >
+                  <TransferBoxLabel>
+                    {j?.value}
+                  </TransferBoxLabel>
+                </TransferBoxItem>
+              )
+            })}
+          </TransferInnerBox>
+        </TransferOuterBox>
+      </TransferShell>
+    </OuterShell>
+  );
+}

web/components/common/TransferBox/index.js

@@ -0,0 +1 @@
+export { TransferBox } from './TransferBox';

web/components/common/index.js

@@ -0,0 +1,2 @@
+export { ToggleTabs } from './ToggleTabs';
+export { TransferBox } from './TransferBox';

web/components/core/Shell/Footer/Footer.jsx

@@ -21,7 +21,7 @@ export const Footer = () => {
   return (
     <FooterContainer>
       <FooterText>{`© ${new Date().getFullYear()} ShiftSync`}</FooterText>
-      <FooterText>{department?.name}</FooterText>
+      <FooterText>{department?.company}</FooterText>
     </FooterContainer>
   )
 }

web/components/core/Shell/NavBar/NavBar.jsx

@@ -138,16 +138,16 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
   };
 
   useEffect(() => {
-  if (activeTab?.id && tabRefs.current[activeTab.id]) {
+    if (activeTab?.id && tabRefs.current[activeTab.id]) {
-    const el = tabRefs.current[activeTab.id];
+      const el = tabRefs.current[activeTab.id];
-    const rect = el.getBoundingClientRect();
+      const rect = el.getBoundingClientRect();
-    const containerRect = el.parentNode.getBoundingClientRect();
+      const containerRect = el.parentNode.getBoundingClientRect();
-    setIndicatorStyle({
+      setIndicatorStyle({
-      left: rect.left - containerRect.left,
+        left: rect.left - containerRect.left,
-      width: rect.width
+        width: rect.width
-    });
+      });
-  }
+    }
-}, [pathname, activeTab?.id]);
+  }, [pathname, activeTab?.id]);
 
   return (
     <NavBox direction='column'>
@@ -188,7 +188,7 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
             <Avatar
               onClick={() => onUserIconClick()}
             >
-              {`${user?.firstName[0]}${user?.lastName[0]}`}
+              {`${user?.first_name[0]}${user?.last_name[0]}`}
             </Avatar>
           </Tab>
           <SlidingIndicator style={indicatorStyle} />

web/docker-compose.yaml

@@ -0,0 +1,14 @@
+services:
+  shiftsync-web:
+    image: 'docker.io/john4064/shiftsync:latest_web'
+    environment:
+      - 'TESTVAR=${COOLIFY_VAR}'
+    volumes:
+      - /home/jparkhurst/shiftsync:/shiftsync
+    ports:
+      - "5173:5173"
+    healthcheck:
+        test: ["CMD", "wget", "-qO-", "http://localhost:5173"]
+        interval: 10s
+        timeout: 5s
+        retries: 5

web/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "shiftsync-website-web",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "axios": "^1.9.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0",
+    "zustand": "^5.0.5"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.13.5",
+    "@eslint/js": "^9.25.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "vite": "^6.3.5"
+  }
+}

web/src/global.css

@@ -2,4 +2,5 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  text-align: initial;
 }

web/src/pages/Home/Home.jsx

@@ -1,8 +1,13 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import { useLocalStore } from '@components';
 
 export const Home = () => {
 
+  const { user } = useLocalStore();
+
+  console.log('user: ', user);
+
   useEffect(() => {
     document.title = 'ShiftSync | Home';
   }, []);

web/src/pages/Settings/Settings.jsx

@@ -0,0 +1,492 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { Stack } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import EditOffIcon from '@mui/icons-material/EditOff';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import { ToggleTabs, TransferBox, useLocalStore } from '@components';
+import { settingsFields } from './helpers';
+
+const OuterContainer = styled(Stack)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px 10px 0px 0px;
+`;
+
+const Border = styled('div')`
+  height: 1px;
+  width: 100%;
+  background-color: #A8A8A8;
+`;
+
+const Tab = styled('div')`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  padding: 6px 16px;
+  font-size: 20px;
+  font-weight: 800;
+  color: grey;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: "WDXL Lubrifont TC";
+  letter-spacing: .05em;
+  word-spacing: .2em;
+`;
+
+const SlidingIndicator = styled('div')`
+  position: absolute;
+  height: 1px;
+  bottom: -1px;
+  background-color: #4D79FF;
+  transition: left 0.3s ease, width 0.3s ease;
+`;
+
+const CardShell = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+`;
+
+const Card = styled('div')`
+  background-color: #C7C7C7;
+  width: 50%;
+  min-width: 750px;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 5px;
+`;
+
+const CardTitle = styled('p')`
+  color: white;
+  font-weight: 400;
+  font-size: 20px;
+  font-family: "WDXL Lubrifont TC";
+  padding-bottom: 5px;
+`;
+
+const CardHeader = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  padding: 10px;
+`;
+
+const EditArea = styled('div')`
+  display: flex; 
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-top: 10px;
+  color: #4D79FF;
+  font-weight: 600;
+`;
+
+const EditTextButton = styled('div')`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  gap: 4px;
+  padding-bottom: 2px;
+  border-bottom: 2px solid transparent;
+  transition: border-bottom 0.2s ease;
+
+  &:hover {
+    border-bottom: 2px solid #4D79FF;
+  }
+`;
+
+const CardBody = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const InnerCard = styled('div')`
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  width: 50%;
+
+  ${({ centered }) => centered && `
+    align-items: center;
+  `}
+`;
+
+const InnerCardRow = styled('div')`
+  display: flex;
+  flex-direction: row;
+  padding: 5px;
+`;
+
+const InnerCardRowLabel = styled('label')`
+  display: flex;
+  justify-content: flex-end;
+  text-align: right;
+  width: 60%;
+  padding-right: 10px;
+  font-size: 14px;
+`;
+
+const InnerCardRowInput = styled('input')`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 4px;
+`;
+
+const InnerCardRadioInput = styled('input')`
+  padding-right: 5px;
+`;
+
+const InnerCardRadioLabel = styled('label')`
+  font-size: 14px;
+  padding-left: 5px;
+`;
+
+const InnerCardRowRadioDiv = styled('div')`
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  padding: 4px;
+`;
+
+const FormRadioButtonLabel = styled('label')``;
+
+const FormInputButtonDiv = styled('div')`
+  display: flex; 
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-top: 10px;
+`;
+
+const FormInputButton = styled('input')`
+  padding: 4px 10px;
+  border-radius: 4px;
+`;
+
+export const Settings = () => {
+  const { user, department, setDepartment } = useLocalStore();
+
+  const isAdministrator = user?.administrator;
+  const isManager = user?.manager;
+  const isScheduler = user?.scheduler;
+
+  const originalDepartmentRef = useRef(department);
+  const [formValues, setFormValues] = useState(() => {
+    const initial = {};
+    settingsFields.forEach(section => {
+      section.cards.forEach(card => {
+        card.fields.forEach(field => {
+          initial[field.id] = department?.[field.id] || '';
+        });
+      });
+    });
+    return initial;
+  });
+  const pageRefs = useRef({});
+  const tabs = [
+      {
+          label: 'Personal',
+          value: 'personal'
+      },
+      {
+          label: 'Department',
+          value: 'department'
+      }
+  ];
+
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [editMode, setEditMode] = useState(null);
+  const [tabValue, setTabValue] = useState(tabs[0]);
+  const [pageValue, setPageValue] = useState({});
+  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+
+  const getChangedFields = (original, current) => {
+    const changed = {};
+    for (const key in current) {
+      if (current[key] !== original[key]) {
+        changed[key] = current[key];
+      }
+    }
+    return changed;
+  };
+
+  const changedFields = getChangedFields(originalDepartmentRef.current, formValues);
+  const hasChanges = Object.keys(changedFields).length > 0;
+
+  const onSubmit = (data) => {
+    setDepartment({
+      ...department,
+      ...data
+    });
+    originalDepartmentRef.current = {
+      ...originalDepartmentRef.current,
+      ...data
+    };
+    setEditMode(null);
+  };
+
+  const formatPhoneNumber = (value) => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 10); // Only digits, max 10
+    const length = cleaned.length;
+
+    if (length === 0) return '';
+    if (length < 4) return `(${cleaned}`;
+    if (length < 7) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+  };
+
+
+  const handleChange = (e, type) => {
+    let { name, value } = e.target;
+    if (type === 'phone') {
+      value = formatPhoneNumber(value);
+    }
+    setFormValues(prev => ({ ...prev, [name]: value }));
+  };
+
+  useEffect(() => {
+    document.title = 'ShiftSync | Settings';
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+
+    // Initial trigger (in case something else needs it)
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (pageValue?.id && pageRefs.current[pageValue.id]) {
+      const el = pageRefs.current[pageValue.id];
+      const rect = el.getBoundingClientRect();
+      const containerRect = el.parentNode.getBoundingClientRect();
+      setIndicatorStyle({
+        left: rect.left - containerRect.left,
+        width: rect.width
+      });
+    }
+  }, [pageValue?.id, windowWidth, window.innerHeight]);
+
+  useEffect(() => {
+    const filteredFields = settingsFields?.filter((field) => {
+      const hasAccess =
+        (field?.accessRequired === 'administrator' && isAdministrator) ||
+        (field?.accessRequired === 'manager' && isManager) ||
+        (field?.accessRequired === 'scheduler' && isScheduler) ||
+        (!field?.accessRequired || field?.accessRequired === 'user');
+
+      return field?.tab === tabValue?.value && hasAccess;
+    });
+
+    if (filteredFields.length > 0) {
+      setPageValue(filteredFields[0]);
+    } else {
+      setPageValue(null);
+    }
+  }, [tabValue, isAdministrator, isManager, isScheduler]);
+
+  return (
+    <div>
+      {user?.administrator || user?.manager ? (
+        <OuterContainer>
+          <ToggleTabs 
+            tabs={tabs}
+            tabValue={tabValue}
+            setTabValue={setTabValue}
+            tabColor='#4D79FF'
+          />
+        </OuterContainer>
+      ) : null }
+      <OuterContainer>
+        {settingsFields?.filter((field) => field?.tab === tabValue?.value)?.filter((field) => {
+          return ((field?.accessRequired === 'administrator' && isAdministrator) || 
+          (field?.accessRequired === 'manager' && isManager) ||
+          (field?.accessRequired === 'scheduler' && isScheduler) ||
+          (field?.accessRequired === 'user' || !field?.accessRequired))
+        })?.map((field) => {
+          return (
+            <Tab
+              key={field?.id}
+              ref={(el) => { pageRefs.current[field?.id] = el; }}
+              onClick={() => setPageValue(field)}
+            >
+              {field?.title}
+            </Tab>
+          )
+        })}
+        <SlidingIndicator style={indicatorStyle} />
+      </OuterContainer>
+      <Border />
+      <CardShell>
+        {pageValue?.cards?.map((card) => {
+          if (
+            (card?.accessRequired === 'administrator' && isAdministrator) || 
+            (card?.accessRequired === 'manager' && isManager) ||
+            (card?.accessRequired === 'scheduler' && isScheduler)
+          ) {
+            return (
+              <Card
+                key={`${card?.id}-card`}
+              >
+                <CardTitle
+                  key={`${card?.id}-card-title`}
+                >
+                  {card?.label}
+                </CardTitle>
+                {card?.fields?.find((field) => field?.type === 'header') !== undefined && (
+                  <div>
+                    <Border key={`${card?.id}-border-1`}/>
+                    <CardHeader
+                      key={`${card?.id}-card-header`}
+                    >
+                      {card?.fields?.map((field) => {
+                        return field?.type === 'header' && (
+                          <InnerCardRow key={`${field?.id}-row`}>
+                            <p style={{ fontSize: 14 }}>
+                              {field?.label}:
+                            </p>
+                            <p style={{ paddingLeft: 10, fontSize: 14 }}>
+                              {department[field?.id]}
+                            </p>
+                          </InnerCardRow>
+                        )
+                      })}
+                    </CardHeader>
+                  </div>
+                )}
+                <Border key={`${card?.id}-border-2`}/>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    onSubmit(changedFields);
+                  }}
+                >
+                  <EditArea>
+                    {!card?.removeEdit && (
+                      editMode === card?.id ? (
+                        <EditTextButton onClick={() => setEditMode(null)}>
+                          <EditOffIcon sx={{ fontSize: 20 }} /> 
+                          <p>View</p>
+                        </EditTextButton>
+                      ) : (
+                        <EditTextButton onClick={() => setEditMode(card?.id)}>
+                          <EditIcon sx={{ fontSize: 20 }} />
+                          <p>Edit</p>
+                        </EditTextButton>
+                      )
+                    )}
+                  </EditArea>
+                  <CardBody
+                    key={`${card?.id}-card-body`}
+                  >
+                    <InnerCard
+                      key={`${card?.id}-inner-card`}
+                      centered={card.fields.some(f => f.type === 'transfer')}
+                    >
+                      {card?.fields?.map((field) => {
+                        let fieldType;
+                        if (field?.type === 'text') {
+                          fieldType = <InnerCardRowInput
+                            name={field?.id}
+                            disabled={card?.id !== editMode || field?.readOnly}
+                            value={formValues[field?.id] ?? 'Not Provided'}
+                            onChange={(e) => handleChange(e, 'text')}
+                          />;
+                        } else if (field?.type === 'phone') {
+                          fieldType = <InnerCardRowInput 
+                            type="tel"
+                            name="phone"
+                            placeholder="(123) 456-7890"
+                            value={formValues[field?.id]}
+                            disabled={card?.id !== editMode || field?.readOnly}
+                            onChange={(e) => handleChange(e, 'phone')}
+                            pattern="\(\d{3}\) \d{3}-\d{4}"
+                            maxlength="14"
+                          />
+                        } else if (field?.type === 'select') {
+                          fieldType = (
+                            <InnerCardRowRadioDiv>
+                            {field?.options?.map((option) => {
+                              const inputId = `${field.id}-${option.value}`;
+                              return (
+                                <FormRadioButtonLabel htmlFor={inputId} key={inputId}>
+                                  <InnerCardRadioInput 
+                                    type="radio"
+                                    id={inputId}
+                                    name={field?.id}
+                                    value={option?.value}
+                                    checked={formValues[field.id] === option.value}
+                                    disabled={card?.id !== editMode || field?.readOnly}
+                                    onChange={(e) => handleChange(e, 'text')}
+                                  />
+                                  <InnerCardRadioLabel htmlFor={inputId} key={inputId}>
+                                    {option?.label}
+                                  </InnerCardRadioLabel>
+                                </FormRadioButtonLabel>
+                              )
+                            })}
+                            </InnerCardRowRadioDiv>
+                          )
+                        } else if (field?.type === 'transfer') {
+                          fieldType = <TransferBox
+                            style={{ display: 'flex', flexDirection: 'row' }}
+                            user={user}
+                            fields={field}
+                            leftGroup={department[field?.origList]}
+                            rightGroup={department[field?.id]}
+                            onSave={(t) => console.log(t)}
+                          />
+                        }
+                        return field?.type !== 'header' && (
+                          <InnerCardRow key={`${field?.id}-row`}>
+                            {field?.label ? (
+                              <InnerCardRowLabel>
+                                {field?.label}:
+                              </InnerCardRowLabel>
+                            ) : null }
+                            {fieldType}
+                          </InnerCardRow>
+                        )
+                      })}
+                    </InnerCard>
+                  </CardBody>
+                  {card?.id === editMode && (
+                    <FormInputButtonDiv>
+                      <FormInputButton 
+                        type="submit" 
+                        value="Save" 
+                        disabled={!hasChanges}
+                        style={{
+                          backgroundColor: hasChanges ? '#4D79FF' : '',
+                          color: hasChanges ? 'white' : ''
+                        }}
+                      /> 
+                    </FormInputButtonDiv>
+                  )}
+                </form>
+              </Card>
+            )
+          }
+          return null;
+        })}
+      </CardShell>
+    </div>
+  );
+};

web/src/pages/Settings/helpers.js

@@ -0,0 +1,163 @@
+export const settingsFields = [
+  {
+    id: 'deptInfo',
+    title: 'Information',
+    tab: 'department',
+    cards: [
+      {
+        id: 'companyInfo',
+        label: 'Company Information',
+        fields: [
+          {
+            id: 'employee_count',
+            label: 'Employee Count',
+            type: 'header',
+            readOnly: true
+          },
+          {
+            id: 'subs_expiration',
+            label: 'Subscription Expiration',
+            type: 'header',
+            readOnly: true
+          },
+          {
+            id: 'company',
+            label: 'Company Name',
+            type: 'text',
+            readOnly: true
+          },
+          {
+            id: 'billing_address',
+            label: 'Billing Address',
+            type: 'text'
+          },
+          {
+            id: 'town',
+            label: 'Town',
+            type: 'text'
+          },
+          {
+            id: 'state',
+            label: 'State',
+            type: 'text'
+          },
+          {
+            id: 'postal',
+            label: 'Postal Code',
+            type: 'text'
+          },
+          {
+            id: 'country',
+            label: 'Country',
+            type: 'text'
+          },
+          {
+            id: 'phone',
+            label: 'Phone Number',
+            type: 'phone'
+          },
+          {
+            id: 'display_time',
+            label: 'Display Time',
+            type: 'select',
+            options: [
+              { label: '12 Hour AM/PM', value: '12' },
+              { label: '24 Hour', value: '24' }
+            ]
+          },
+          {
+            id: 'start_day',
+            label: 'Calendar Start Day',
+            type: 'select',
+            options: [
+              { label: 'Sunday', value: 'sunday' },
+              { label: 'Monday', value: 'monday' }
+            ]
+          }
+        ],
+        accessRequired: 'administrator'
+      }
+    ],
+    accessRequired: 'administrator'
+  },
+  {
+    id: 'deptRoles',
+    title: 'Roles',
+    tab: 'department',
+    cards: [
+      // Need to decide if Admins should be able to Add other Admins
+      // {
+      //   id: 'companyAdmins',
+      //   label: 'Company Administrators',
+      //   fields: [
+      //     {
+      //       id: 'administrators',
+      //       type: 'transfer',
+      //       origList: 'users',
+      //       oldListLabel: 'Users',
+      //       newListLabel: 'Administrators'
+      //     },
+      //   ],
+      //   accessRequired: 'administrator',
+      //   removeEdit: true
+      // },
+      {
+        id: 'companyMgrs',
+        label: 'Company Managers',
+        fields: [
+          {
+            id: 'managers',
+            type: 'transfer',
+            origList: 'users',
+            oldListLabel: 'Users',
+            newListLabel: 'Managers'
+          },
+        ],
+        accessRequired: 'administrator',
+        removeEdit: true
+      },
+      {
+        id: 'companySched',
+        label: 'Company Schedulers',
+        fields: [
+          {
+            id: 'schedulers',
+            type: 'transfer',
+            origList: 'users',
+            oldListLabel: 'Users',
+            newListLabel: 'Schedulers'
+          },
+        ],
+        accessRequired: 'manager',
+        removeEdit: true
+      }
+    ],
+    accessRequired: 'manager'
+  },
+  {
+    id: 'deptSubs',
+    title: 'Subscriptions',
+    tab: 'department',
+    cards: [],
+    accessRequired: 'administrator'
+  },
+  {
+    id: 'personalInfo',
+    title: 'Information',
+    tab: 'personal',
+    cards: []
+  },
+  {
+    id: 'personalNoti',
+    title: 'Notifications',
+    tab: 'personal',
+    cards: []
+  },
+  {
+    id: 'deptNoti',
+    title: 'Notifications',
+    tab: 'department',
+    cards: [],
+    accessRequired: 'administrator'
+  }
+];

web/src/router/AppRouter.jsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { Home, Profile, Schedule, Settings } from '@src/pages';
+import { Shell } from '@components';
+import { useLocalStore } from '@components';
+import axios from "axios";
+
+const dept = {
+  id: 1,
+  company: 'Darien EMS - Post 53',
+  abv: 'DEMS',
+  billing_address: '0 Ledge Road',
+  town: 'Darien',
+  state: 'Connecticut',
+  postal: '06820',
+  country: 'United States',
+  phone: '',
+  display_time: '12',
+  start_day: 'sunday',
+  company_logo: '',
+  employee_count: 1,
+  subscription_expiration: '10/01/2025',
+  schedulers: [3],
+  managers: [2],
+  administrators: [1]
+};
+
+const users = [
+  {
+    id: 1,
+    first_name: 'ShiftSync-Administrator',
+    last_name: 'Test-User',
+    email: 'testuserA@shift-sync.com',
+    is_ss_admin: false
+  },
+  {
+    id: 2,
+    first_name: 'ShiftSync-Manager',
+    last_name: 'Test-User',
+    email: 'testuserM@shift-sync.com',
+    is_ss_admin: false
+  },
+  {
+    id: 3,
+    first_name: 'ShiftSync-Scheduler',
+    last_name: 'Test-User',
+    email: 'testuserS@shift-sync.com',
+    is_ss_admin: false
+  },
+  {
+    id: 4,
+    first_name: 'ShiftSync-User',
+    last_name: 'Test-User',
+    email: 'testuserU@shift-sync.com',
+    is_ss_admin: false
+  },
+]
+
+const AppRouter = () => {
+  const { user, setUser, setDepartment } = useLocalStore();
+  const [userChanged, setUserChanged] = useState(false);
+  const isDev = true; // change for it.
+
+  const fetchAPI = async () => {
+    const location = window.location;
+    const uri = `${location?.protocol}//${location?.hostname}${isDev ? ':5172' : ''}/api`;
+    const response = await axios.get(uri);
+    console.log(response.data.fruits);
+  };
+
+  useEffect(() => {
+    
+    fetchAPI();
+    // await call for getting the count of employees and any other calls to db.
+    const employee_count = 1;
+    const subs_expiration = '10/22/2025';
+    setUser({
+      ...users[0],
+      scheduler: dept?.schedulers?.includes(1),
+      manager: dept?.managers?.includes(1),
+      administrator: dept?.administrators?.includes(1)
+    });
+    const newAdministrators = dept?.administrators?.map((admin) => {
+      const user = users?.find((user) => {
+        return user?.id === admin;
+      });
+      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
+    });
+    const newManagers = dept?.managers?.map((manager) => {
+      const user = users?.find((user) => {
+        return user?.id === manager;
+      });
+      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
+    });
+    const newSchedulers = dept?.schedulers?.map((scheduler) => {
+      const user = users?.find((user) => {
+        return user?.id === scheduler;
+      });
+      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
+    });
+    const newUsers = users?.map((user) => {
+      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
+    });
+    setDepartment({
+      ...dept,
+      users: newUsers,
+      schedulers: newSchedulers,
+      managers: newManagers,
+      administrators: newAdministrators,
+      employee_count,
+      subs_expiration
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!userChanged && user) {
+      if (user?.is_ss_admin) {
+        setUser({
+          ...user,
+          scheduler: true,
+          manager: true,
+          administrator: true,
+        });
+      } else if (user?.administrator) {
+        setUser({
+          ...user,
+          scheduler: true,
+          manager: true,
+        });
+      } else if (user?.manager) {
+        setUser({
+          ...user,
+          scheduler: true,
+        });
+      }
+      setUserChanged(true);
+    }
+  }, [user]);
+
+
+  return (
+    <Shell>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/schedule" element={<Schedule />} />
+        <Route path="/settings" element={<Settings />} />
+        <Route path="/profile" element={<Profile />} />
+      </Routes>
+    </Shell>
+  );
+};
+
+export default AppRouter

web/vite.config.js

@@ -8,8 +8,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@src': path.resolve(__dirname, 'src'),
-      '@components': path.resolve(__dirname, 'components'),
+      '@components': path.resolve(__dirname, 'components')
-      '@api': path.resolve(__dirname, 'api'),
     },
   },
 });