Merge pull request #5 from Doble-Technologies/feature/settings-page
Feature/settings page
This commit is contained in:
GitHub
commit
8207962ecf
53 changed files with 7277 additions and 3308 deletions
2
.github/workflows/web-deploy.yml
vendored
2
.github/workflows/web-deploy.yml
vendored
|
|
@ -17,7 +17,7 @@ on:
|
|||
jobs:
|
||||
deploy:
|
||||
environment: dev
|
||||
runs-on: ['self-hosted', 'pi']
|
||||
runs-on: 'ubuntu-latest'
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
|
|
|
|||
1202
api/package-lock.json
generated
Normal file
1202
api/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
19
api/package.json
Normal file
19
api/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
21
api/server.js
Normal file
21
api/server.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
8
api/services/postgres/postgresServices.js
Normal file
8
api/services/postgres/postgresServices.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export const postgresServices = {
|
||||
getUsers: async (args) => {
|
||||
|
||||
},
|
||||
getDepartments: async (args) => {
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { ToggleTabs } from './ToggleTabs';
|
||||
4139
package-lock.json
generated
4139
package-lock.json
generated
File diff suppressed because it is too large
Load diff
36
package.json
36
package.json
|
|
@ -1,34 +1,20 @@
|
|||
{
|
||||
"name": "my-app",
|
||||
"name": "shiftsync-website",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"version": "1.0.1",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
"api": "npm run dev --prefix api",
|
||||
"web": "npm run dev --prefix web",
|
||||
"dev": "concurrently \"npm run api\" \"npm run web\"",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.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"
|
||||
"cors": "^2.8.5",
|
||||
"express": "^5.1.0"
|
||||
},
|
||||
"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"
|
||||
"concurrently": "^9.1.2",
|
||||
"nodemon": "^3.1.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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
|
||||
1
web/.dockerignore
Normal file
1
web/.dockerignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
**/node_modules/**
|
||||
14
web/Dockerfile
Normal file
14
web/Dockerfile
Normal file
|
|
@ -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"]
|
||||
253
web/components/common/TransferBox/TransferBox.jsx
Normal file
253
web/components/common/TransferBox/TransferBox.jsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
1
web/components/common/TransferBox/index.js
Normal file
1
web/components/common/TransferBox/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { TransferBox } from './TransferBox';
|
||||
2
web/components/common/index.js
Normal file
2
web/components/common/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { ToggleTabs } from './ToggleTabs';
|
||||
export { TransferBox } from './TransferBox';
|
||||
|
|
@ -21,7 +21,7 @@ export const Footer = () => {
|
|||
return (
|
||||
<FooterContainer>
|
||||
<FooterText>{`© ${new Date().getFullYear()} ShiftSync`}</FooterText>
|
||||
<FooterText>{department?.name}</FooterText>
|
||||
<FooterText>{department?.company}</FooterText>
|
||||
</FooterContainer>
|
||||
)
|
||||
}
|
||||
|
|
@ -138,16 +138,16 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab?.id && tabRefs.current[activeTab.id]) {
|
||||
const el = tabRefs.current[activeTab.id];
|
||||
const rect = el.getBoundingClientRect();
|
||||
const containerRect = el.parentNode.getBoundingClientRect();
|
||||
setIndicatorStyle({
|
||||
left: rect.left - containerRect.left,
|
||||
width: rect.width
|
||||
});
|
||||
}
|
||||
}, [pathname, activeTab?.id]);
|
||||
if (activeTab?.id && tabRefs.current[activeTab.id]) {
|
||||
const el = tabRefs.current[activeTab.id];
|
||||
const rect = el.getBoundingClientRect();
|
||||
const containerRect = el.parentNode.getBoundingClientRect();
|
||||
setIndicatorStyle({
|
||||
left: rect.left - containerRect.left,
|
||||
width: rect.width
|
||||
});
|
||||
}
|
||||
}, [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} />
|
||||
14
web/docker-compose.yaml
Normal file
14
web/docker-compose.yaml
Normal file
|
|
@ -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
|
||||
3827
web/package-lock.json
generated
Normal file
3827
web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
35
web/package.json
Normal file
35
web/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -2,4 +2,5 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
text-align: initial;
|
||||
}
|
||||
|
|
@ -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';
|
||||
}, []);
|
||||
492
web/src/pages/Settings/Settings.jsx
Normal file
492
web/src/pages/Settings/Settings.jsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
163
web/src/pages/Settings/helpers.js
Normal file
163
web/src/pages/Settings/helpers.js
Normal file
|
|
@ -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'
|
||||
}
|
||||
];
|
||||
153
web/src/router/AppRouter.jsx
Normal file
153
web/src/router/AppRouter.jsx
Normal file
|
|
@ -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
|
||||
|
|
@ -8,8 +8,7 @@ export default defineConfig({
|
|||
resolve: {
|
||||
alias: {
|
||||
'@src': path.resolve(__dirname, 'src'),
|
||||
'@components': path.resolve(__dirname, 'components'),
|
||||
'@api': path.resolve(__dirname, 'api'),
|
||||
'@components': path.resolve(__dirname, 'components')
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue