97 lines
2 KiB
JavaScript
97 lines
2 KiB
JavaScript
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 - Organization</h1>
|
|
<Link to="/">Go to Home</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|