Skip to content

Pages #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ProgramStuff merged 40 commits into from
Aug 4, 2025
Merged

Pages #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
9c43519
Creation of completed incident page
ProgramStuff Mar 27, 2025
4d4a0f2
Style fix
ProgramStuff Mar 27, 2025
641ab7f
Modify dashboard to render pages
ProgramStuff Mar 27, 2025
1c367ca
Create FileUpload component
ProgramStuff Mar 27, 2025
c4e177e
Modify additional field
ProgramStuff Mar 27, 2025
4d835cb
Modify file upload
ProgramStuff Mar 30, 2025
0c7ef8f
fix naming error
ProgramStuff Mar 30, 2025
a868bf2
Modify login to use axios
ProgramStuff Mar 30, 2025
1ef7831
layout fixes
ProgramStuff Mar 30, 2025
d92042a
style fix
ProgramStuff Mar 31, 2025
c13098e
Update dashboard
ProgramStuff Mar 31, 2025
a2571f3
style fix
ProgramStuff Mar 31, 2025
9ce620c
Update active incident
ProgramStuff Mar 31, 2025
1cf9f2f
style fix
ProgramStuff Mar 31, 2025
bc90844
Update register page
ProgramStuff Mar 31, 2025
44d252b
update createIncident page
ProgramStuff Mar 31, 2025
09962ad
style fix and updates
ProgramStuff Mar 31, 2025
935e7bb
update user login flow
ProgramStuff Mar 31, 2025
7aaff9b
Update creatincident page
ProgramStuff Apr 1, 2025
87e0410
Update landing page
ProgramStuff Apr 1, 2025
06841eb
Fix errors
ProgramStuff Apr 1, 2025
5d1d9b7
update login page
ProgramStuff Apr 1, 2025
7b35a89
update create task flow
ProgramStuff Apr 1, 2025
a76a209
Landing page update
ProgramStuff Apr 1, 2025
8236007
Update table and row
ProgramStuff Apr 2, 2025
0554f72
Fix date and task display issues
ProgramStuff Apr 2, 2025
65eb98c
Update CreateTask page
ProgramStuff Apr 2, 2025
978b705
Active Incident
ProgramStuff Aug 4, 2025
7cddece
Update incident creation
ProgramStuff Aug 4, 2025
a349222
update completed incident
ProgramStuff Aug 4, 2025
0147f8a
Update CreateTask
ProgramStuff Aug 4, 2025
fee9881
remove register button from landing page
ProgramStuff Aug 4, 2025
2a3283b
Update create incident page
ProgramStuff Aug 4, 2025
d168559
update past incident
ProgramStuff Aug 4, 2025
b5cabb0
remove unused code from register
ProgramStuff Aug 4, 2025
164b497
update dashboard
ProgramStuff Aug 4, 2025
5ab0412
remove about selection from nav
ProgramStuff Aug 4, 2025
39af623
update table component
ProgramStuff Aug 4, 2025
b0cff9b
Fix formatting
ProgramStuff Aug 4, 2025
842d8bf
fix formatting
ProgramStuff Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 63 additions & 47 deletions src/Components/AdditionalFields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,70 +27,86 @@ const tempTasks = [
{
id: 1,
name: 'Search Area 1',
startTime: '2025-03-15T23:54:26.305Z',
startTime: dayjs('2025-03-15T23:54:26.305Z').toString(),
},
{
id: 2,
name: 'Search Area 2',
startTime: '2025-03-15T23:54:26.305Z',
startTime: dayjs('2025-03-15T23:54:26.305Z').toString(),
},
{
id: 3,
name: 'Search Area 3',
startTime: '2025-03-15T23:54:26.305Z',
startTime: dayjs('2025-03-15T23:54:26.305Z').toString(),
},
];

export default function AdditionalFields({ incidentId, changePath }) {
export default function AdditionalFields({
changePath,
appRouter,
incidentId,
opInfo,
}) {
const [selectedCard, setSelectedCard] = useState(0);
return (
<Box>
<Box sx={{ ml: '1vh' }}>
<CssBaseline enableColorScheme />
<Typography variant="h6">Tasks</Typography>
<Grid container justifyContent={'center'} spacing={1}>
{tempTasks.map((task) => (
<Grid key={task.id} size={{ sm: 12, md: 12, lg: 4, xl: 4 }}>
<Card>
<CardActionArea
onClick={() =>
changePath(
`/incident/${incidentId}/task/${task.id}`
)
}
data-active={
selectedCard === task.id ? '' : undefined
}
sx={{
height: 100,
'&[data-active]': {
backgroundColor: 'action.selected',
'&:hover': {
backgroundColor:
'action.selectedHover',
{appRouter.pathname != '/incident/newIncident' &&
tempTasks.map((task) => (
<Grid
key={task.id}
size={{ sm: 12, md: 12, lg: 4, xl: 4 }}
>
<Card variant="outlined">
<CardActionArea
onClick={() =>
changePath(
`/incident/${incidentId}/task/${task.id}`
)
}
data-active={
selectedCard === task.id
? ''
: undefined
}
sx={{
height: 100,
'&[data-active]': {
backgroundColor: 'action.selected',
'&:hover': {
backgroundColor:
'action.selectedHover',
},
},
},
}}
>
<CardContent sx={{ height: '100%' }}>
<Typography component="div">
{task.name}
</Typography>
<Typography color="text.secondary">
{task.startTime}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
))}
}}
>
<CardContent sx={{ height: '100%' }}>
<Typography component="div">
{task.name}
</Typography>
<Typography color="text.secondary">
{task.startTime}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
))}
</Grid>
<Button
sx={{ width: '10vw', marginTop: '2vh' }}
size="large"
variant="contained"
onClick={() => changePath(`/incident/${incidentId}/newTask`)}
>
Create Task
</Button>
{!/incident\/pastIncident\/./.test(appRouter.pathname) && (
<Button
sx={{ width: '13vw', marginTop: '2vh', mb: '2vh' }}
size="large"
variant="contained"
onClick={() =>
changePath(`/incident/${incidentId}/newTask`)
}
>
Create New Task
</Button>
)}
</Box>
);
}
93 changes: 77 additions & 16 deletions src/Components/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ import PersonnelInfo from '../app/PersonnelInfo/page';
import PastIncident from '../app/PastIncident/page';
import MyCerts from '../app/MyCerts/page';
import Profile from '../app/Profile/page';
import CompleteIncident from '../app/CompleteIncident/page';
import { useNavigate } from 'react-router-dom';
import MuiCard from '@mui/material/Card';
import AdditionalFields from './AdditionalFields';

import Stack from '@mui/material/Stack';
import HomeIcon from '@mui/icons-material/Home';
Expand All @@ -33,6 +35,7 @@ import TroubleshootIcon from '@mui/icons-material/Troubleshoot';
import Register from '../app/Regsiter/page';
import { Widgets } from '@mui/icons-material';
import CreateTask from '../app/CreateTask/page';
import FileUpload from './FileUpload';

const lightDarkTheme = extendTheme({
colorSchemes: { light: true, dark: true },
Expand Down Expand Up @@ -71,9 +74,10 @@ const ContentContainer = styled(Stack)(({ theme }) => ({
},
}));

export default function Dashboard(props) {
export default function Dashboard({ user }) {
const [pathname, setPathname] = useState('/incident');

const [selectedIncident, setSelectedIncident] = useState([]);
const [addIncidentInfo, setAddIncidentInfo] = useState([]);
const router = useMemo(() => {
return {
pathname,
Expand Down Expand Up @@ -120,6 +124,7 @@ export default function Dashboard(props) {
segment: 'activeIncident',
title: 'Active Incidents',
icon: <NotificationsActiveIcon />,
pattern: 'activeIncident{/:incidentId}*',
},
{
segment: 'newIncident',
Expand Down Expand Up @@ -197,19 +202,26 @@ export default function Dashboard(props) {
icon: <AccountCircleIcon color="#037AFF" />,
},
];

return (
<AppProvider
navigation={NAVIGATION}
router={router}
theme={lightDarkTheme}
branding={{
title: 'SAR FORGE',
logo: (
<TroubleshootIcon
sx={{ margin: '0.8vh', color: '#037AFF' }}
/>
title: (
<>
{' '}
<img
src="src\app\Branding\icon.png"
style={{ width: '3vw' }}
/>{' '}
<img
src="src\app\Branding\profileThin.png"
style={{ width: '10vw', mt: '1vh' }}
/>{' '}
</>
),
logo: '',
}}
>
<DashboardLayout>
Expand All @@ -224,20 +236,31 @@ export default function Dashboard(props) {
justifyContent="space-between"
>
{router.pathname == '/incident/activeIncident' && (
<ActiveIncident changePath={setPathname} />
<ActiveIncident
appRouter={router}
setSelectedIncident={setSelectedIncident}
setAddIncidentInfo={setAddIncidentInfo}
/>
)}
{router.pathname == '/incident' && (
<ActiveIncident changePath={setPathname} />
<ActiveIncident
appRouter={router}
setSelectedIncident={setSelectedIncident}
setAddIncidentInfo={setAddIncidentInfo}
/>
)}

{router.pathname == '/incident/newIncident' && (
<CreateIncident
appRouter={router}
changePathFunction={setPathname}
user={user}
selectedIncident={selectedIncident}
addIncidentInfo={addIncidentInfo}
/>
)}
{router.pathname == '/incident/pastIncident' && (
<PastIncident />
<PastIncident changePath={setPathname} />
)}
{router.pathname == '/personnelInfo' && (
<PersonnelInfo />
Expand All @@ -247,19 +270,57 @@ export default function Dashboard(props) {
{router.pathname == '/myCertifications' && <MyCerts />}
{router.pathname == '/settings/profile' && <Profile />}
{router.pathname == '/userProfile' && <Profile />}
{/incident\/activeIncident\/./.test(
{/activeIncident\/./.test(router.pathname) && (
<>
<CreateIncident
appRouter={router}
changePathFunction={setPathname}
user={user}
selectedIncident={selectedIncident}
addIncidentInfo={addIncidentInfo}
/>
<AdditionalFields
changePath={setPathname}
appRouter={router}
incidentId={router.pathname.split('/')[2]}
/>
<FileUpload appRouter={router} />
</>
)}
{/^\/incident\/([^/]+)\/newTask$/.test(
router.pathname
) && (
<CreateIncident
<CreateTask
appRouter={router}
changePathFunction={setPathname}
user={user}
selectedIncident={selectedIncident}
/>
)}
{/incident\/.\/newTask/.test(router.pathname) && (
{/incident\/[^/]+\/task\/[^/]+$/.test(
router.pathname
) && (
<CreateTask
taskID={router.pathname.split('/')[2]}
taskID={router.pathname.split('/')[4]}
appRouter={router}
user={user}
selectedIncident={selectedIncident}
/>
)}

{/incident\/pastIncident\/./.test(router.pathname) && (
<>
<CompleteIncident
appRouter={router}
changePathFunction={setPathname}
/>
<AdditionalFields
changePath={setPathname}
appRouter={router}
incidentId={router.pathname.split('/')[3]}
/>
<FileUpload appRouter={router} />
</>
)}
</ContentContainer>
</PageContainer>
</DashboardLayout>
Expand Down
Loading