sonika/sony_intranet_remake2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimized and responsive dashboard

Browse Source
This commit is contained in:
Sonika 2023-12-22 21:31:47 +05:30
parent b4edc35211
commit 6e58c4ed38
1 changed files with 49 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/Dashboard.tsx
View File

@ -1,62 +1,54 @@
import { Box, Card, CardContent, Grid, Paper, Typography, styled } from "@mui/material"; import React from "react";
import React, { useEffect } from "react"; import {
import { getLinkedProjectList, useLinkedProjectData } from "../APIs/ProjectScreenAPIs/getLinkedProject"; Box,
Grid,
Paper,
Typography,
styled,
} from "@mui/material";
import { useUnlinkedProjectData } from "../APIs/ProjectScreenAPIs/getUnlinkedProject"; import { useUnlinkedProjectData } from "../APIs/ProjectScreenAPIs/getUnlinkedProject";
import { useLinkedProjectData } from "../APIs/ProjectScreenAPIs/getLinkedProject";
export default function Dashboard(){ const DashboardItem = styled(Paper)(({ theme }) => ({
backgroundColor: "#1e1e1e",
color: "white",
padding: theme.spacing(5),
textAlign: "left",
}));
const [linkedProjectData, setLinkedProjectData] = React.useState() const Dashboard = () => {
const { data: getLinkedProjectList } = useLinkedProjectData(''); const { data: unlinkedProjects } = useUnlinkedProjectData("");
const { data: getUnlinkedProjectList } = useUnlinkedProjectData(''); const { data: linkedProjects } = useLinkedProjectData("");
const Item = styled(Paper)(({ theme }) => ({ return (
backgroundColor: '#1e1e1e', <Paper square className="app-background app-screen-heights" sx={{}}>
color:"white", <Box sx={{ flexGrow: 1, marginLeft: "1%",marginRight:'1%', padding: "16px" }}>
padding: theme.spacing(5), <Grid container spacing={3} sx={{ flexDirection: { xs: 'column', md: 'row' } }}>
textAlign: 'left', {renderDashboardItem("New Projects That needs Contract Linkage", unlinkedProjects, "#C00243")}
{renderDashboardItem("Projects That needs To Be Published", linkedProjects, "#E1AB1A")}
</Grid>
</Box>
</Paper>
);
};
})); const renderDashboardItem = (label:any, projects:any, color:any) => (
<Grid item xs={12} md={6} sx={{ marginTop: "16px" }}>
<DashboardItem>
<Grid container spacing={2} sx={{ flexDirection: "row", flexWrap: "nowrap" }}>
<Grid item>
<Typography component="h2" variant="h2" sx={{ color, fontWeight: "bold" }}>
{projects && projects.length}
</Typography>
</Grid>
<Grid item>
<Typography component="h6" variant="h6" sx={{ color, margin: "3%" }}>
{`${label}`}
</Typography>
</Grid>
</Grid>
</DashboardItem>
</Grid>
);
return ( export default Dashboard;
<Paper square className="app-background app-screen-heights">
<Box sx={{ flexGrow: 1, margin:'1%'}} >
<Grid container spacing={3} >
<Grid item xs={6} sx={{marginTop:'6%'}}>
<Item>
<Grid container spacing={2} sx={{flexDirection:'row', flexWrap:'nowrap'}}>
<Grid item>
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
{getUnlinkedProjectList && getUnlinkedProjectList.length}
</Typography>
</Grid>
<Grid item>
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
New Projects That needs Contract Linkage
</Typography>
</Grid>
</Grid>
</Item>
</Grid>
<Grid item xs={6} sx={{marginTop:'6%'}}>
<Item>
<Grid container sx={{flexDirection:'row', flexWrap:'nowrap'}}>
<Grid item>
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
{getLinkedProjectList && getLinkedProjectList.length}
</Typography>
</Grid>
<Grid item>
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
Projects That needs To Be Published
</Typography>
</Grid>
</Grid>
</Item>
</Grid>
</Grid>
</Box>
</Paper>
)
}