cmorales
/
Front-Complete
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cambio Dashboard

This commit is contained in:
Elizabeth 2024-01-29 16:27:56 -05:00
parent 35ab44f035
commit ebc1bc4807
6 changed files with 72 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/@mock-api/mock-api.json
View File

@ -25743,17 +25743,17 @@
} }
}, },
"ranges": { "ranges": {
"this-week": "This Week", "this-week": "Mensual",
"last-week": "Last Week" "last-week": "Semestral"
}, },
"labels": [ "labels": [
"Mon", "Enero",
"Tue", "Febrero",
"Wed", "Marzo",
"Thu", "Abril",
"Fri", "Mayo",
"Sat", "Junio",
"Sun" "Julio"
], ],
"series": { "series": {
"this-week": [ "this-week": [

36
src/app/main/dashboard/project/ProjectDashboardApp.tsx
View File

@ -40,43 +40,7 @@ function ProjectDashboardApp() {
header={<ProjectDashboardAppHeader />} header={<ProjectDashboardAppHeader />}
content={ content={
<div className="w-full p-12 pt-16 sm:pt-24 lg:ltr:pr-0 lg:rtl:pl-0"> <div className="w-full p-12 pt-16 sm:pt-24 lg:ltr:pr-0 lg:rtl:pl-0">
<Tabs
value={tabValue}
onChange={handleChangeTab}
indicatorColor="secondary"
textColor="inherit"
variant="scrollable"
scrollButtons={false}
className="w-full px-24 -mx-4 min-h-40"
classes={{ indicator: 'flex justify-center bg-transparent w-full h-full' }}
TabIndicatorProps={{
children: (
<Box
sx={{ bgcolor: 'text.disabled' }}
className="w-full h-full rounded-full opacity-20"
/>
)
}}
>
<Tab
className="text-14 font-semibold min-h-40 min-w-64 mx-4 px-12"
disableRipple
label="Home"
/>
<Tab
className="text-14 font-semibold min-h-40 min-w-64 mx-4 px-12"
disableRipple
label="Budget"
/>
<Tab
className="text-14 font-semibold min-h-40 min-w-64 mx-4 px-12"
disableRipple
label="Team"
/>
</Tabs>
{tabValue === 0 && <HomeTab />} {tabValue === 0 && <HomeTab />}
{tabValue === 1 && <BudgetTab />}
{tabValue === 2 && <TeamTab />}
</div> </div>
} }
/> />

59
src/app/main/dashboard/project/ProjectDashboardAppHeader.tsx
View File

@ -67,21 +67,14 @@ function ProjectDashboardAppHeader() {
</Avatar> </Avatar>
<div className="flex flex-col min-w-0 mx-16"> <div className="flex flex-col min-w-0 mx-16">
<Typography className="text-2xl md:text-5xl font-semibold tracking-tight leading-7 md:leading-snug truncate"> <Typography className="text-2xl md:text-5xl font-semibold tracking-tight leading-7 md:leading-snug truncate">
{`Welcome back, ${user.data.displayName}!`} Dashboard
</Typography> </Typography>
<div className="flex items-center"> <div className="flex items-center">
<FuseSvgIcon
size={20}
color="action"
>
heroicons-solid:bell
</FuseSvgIcon>
<Typography <Typography
className="mx-6 leading-6 truncate" className="mx-6 leading-6 truncate"
color="text.secondary" color="text.secondary"
> >
You have 2 new messages and 15 new tasks {`${user.data.displayName}`}
</Typography> </Typography>
</div> </div>
</div> </div>
@ -91,58 +84,12 @@ function ProjectDashboardAppHeader() {
className="whitespace-nowrap" className="whitespace-nowrap"
variant="contained" variant="contained"
color="primary" color="primary"
startIcon={<FuseSvgIcon size={20}>heroicons-solid:mail</FuseSvgIcon>}
>
Messages
</Button>
<Button
className="whitespace-nowrap"
variant="contained"
color="secondary"
startIcon={<FuseSvgIcon size={20}>heroicons-solid:cog</FuseSvgIcon>} startIcon={<FuseSvgIcon size={20}>heroicons-solid:cog</FuseSvgIcon>}
> >
Settings Configuración
</Button> </Button>
</div> </div>
</div> </div>
<div className="flex items-center">
<Button
onClick={handleOpenProjectMenu}
className="flex items-center border border-solid border-b-0 rounded-t-xl rounded-b-0 h-40 px-16 text-13 sm:text-16"
sx={{
backgroundColor: (theme) => theme.palette.background.default,
borderColor: (theme) => theme.palette.divider
}}
endIcon={
<FuseSvgIcon
size={20}
color="action"
>
heroicons-solid:chevron-down
</FuseSvgIcon>
}
>
{_.find(projects, ['id', selectedProject.id])?.name}
</Button>
<Menu
id="project-menu"
anchorEl={selectedProject.menuEl}
open={Boolean(selectedProject.menuEl)}
onClose={handleCloseProjectMenu}
>
{projects &&
projects.map((project) => (
<MenuItem
key={project.id}
onClick={() => {
handleChangeProject(project.id);
}}
>
{project.name}
</MenuItem>
))}
</Menu>
</div>
</div> </div>
); );
} }

2
src/app/main/dashboard/project/tabs/budget/widgets/BudgetDetailsWidget.tsx
View File

@ -25,7 +25,7 @@ function BudgetDetailsWidget() {
return ( return (
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2xl overflow-hidden"> <Paper className="flex flex-col flex-auto p-24 shadow rounded-2xl overflow-hidden">
<Typography className="text-lg font-medium tracking-tight leading-6 truncate">Budget Details</Typography> <Typography className="text-lg font-medium tracking-tight leading-6 truncate">Facturas Recientes</Typography>
<div className="table-responsive"> <div className="table-responsive">
<Table className="w-full min-w-full"> <Table className="w-full min-w-full">

40
src/app/main/dashboard/project/tabs/home/HomeTab.tsx
View File

@ -6,6 +6,10 @@ import FeaturesWidget from './widgets/FeaturesWidget';
import GithubIssuesWidget from './widgets/GithubIssuesWidget'; import GithubIssuesWidget from './widgets/GithubIssuesWidget';
import TaskDistributionWidget from './widgets/TaskDistributionWidget'; import TaskDistributionWidget from './widgets/TaskDistributionWidget';
import ScheduleWidget from './widgets/ScheduleWidget'; import ScheduleWidget from './widgets/ScheduleWidget';
import BudgetDetailsWidget from '../budget/widgets/BudgetDetailsWidget';
import WeeklyExpensesWidget from '../budget/widgets/WeeklyExpensesWidget';
import MonthlyExpensesWidget from '../budget/widgets/MonthlyExpensesWidget';
import YearlyExpensesWidget from '../budget/widgets/YearlyExpensesWidget';
/** /**
* The HomeTab component. * The HomeTab component.
@ -31,7 +35,29 @@ function HomeTab() {
initial="hidden" initial="hidden"
animate="show" animate="show"
> >
<motion.div variants={item}> <div className="flex flex-row gap-y-24 bg-grey-700 w-224">
{/*flex flex-col w-full px-24 sm:px-32
lg:col-span-2 grid grid-cols-1 gap-y-24*/}
<motion.div
variants={item}
className="sm:col-span-3"
>
<WeeklyExpensesWidget />
</motion.div>
<motion.div
variants={item}
className="sm:col-span-2"
>
<MonthlyExpensesWidget />
</motion.div>
<motion.div
variants={item}
className="sm:col-span-2"
>
<YearlyExpensesWidget />
</motion.div>
</div>
{/* <motion.div variants={item}>
<SummaryWidget /> <SummaryWidget />
</motion.div> </motion.div>
<motion.div variants={item}> <motion.div variants={item}>
@ -42,7 +68,7 @@ function HomeTab() {
</motion.div> </motion.div>
<motion.div variants={item}> <motion.div variants={item}>
<FeaturesWidget /> <FeaturesWidget />
</motion.div> </motion.div> */}
<motion.div <motion.div
variants={item} variants={item}
className="sm:col-span-2 md:col-span-4" className="sm:col-span-2 md:col-span-4"
@ -51,15 +77,9 @@ function HomeTab() {
</motion.div> </motion.div>
<motion.div <motion.div
variants={item} variants={item}
className="sm:col-span-2 md:col-span-4 lg:col-span-2" className="sm:col-span-4"
> >
<TaskDistributionWidget /> <BudgetDetailsWidget />
</motion.div>
<motion.div
variants={item}
className="sm:col-span-2 md:col-span-4 lg:col-span-2"
>
<ScheduleWidget />
</motion.div> </motion.div>
</motion.div> </motion.div>
); );

46
src/app/main/dashboard/project/tabs/home/widgets/GithubIssuesWidget.tsx
View File

@ -114,7 +114,7 @@ function GithubIssuesWidget() {
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2xl overflow-hidden"> <Paper className="flex flex-col flex-auto p-24 shadow rounded-2xl overflow-hidden">
<div className="flex flex-col sm:flex-row items-start justify-between"> <div className="flex flex-col sm:flex-row items-start justify-between">
<Typography className="text-lg font-medium tracking-tight leading-6 truncate"> <Typography className="text-lg font-medium tracking-tight leading-6 truncate">
Github Issues Summary Resumen
</Typography> </Typography>
<div className="mt-12 sm:mt-0 sm:ml-8"> <div className="mt-12 sm:mt-0 sm:ml-8">
<Tabs <Tabs
@ -148,12 +148,12 @@ function GithubIssuesWidget() {
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-24 w-full mt-32 sm:mt-16"> <div className="grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-24 w-full mt-32 sm:mt-16">
<div className="flex flex-col flex-auto"> <div className="flex flex-col flex-auto">
<Typography {/* <Typography
className="font-medium" className="font-medium"
color="text.secondary" color="text.secondary"
> >
New vs. Closed New vs. Closed
</Typography> </Typography> */}
<div className="flex flex-col flex-auto"> <div className="flex flex-col flex-auto">
<ReactApexChart <ReactApexChart
className="flex-auto w-full" className="flex-auto w-full"
@ -168,22 +168,34 @@ function GithubIssuesWidget() {
className="font-medium" className="font-medium"
color="text.secondary" color="text.secondary"
> >
Overview Descripción
</Typography> </Typography>
<div className="flex-auto grid grid-cols-4 gap-16 mt-24"> <div className="flex-auto grid grid-cols-4 gap-16 mt-24">
<div className="col-span-2 flex flex-col items-center justify-center py-32 px-4 rounded-2xl bg-indigo-50 text-indigo-800"> <div className="col-span-2 flex flex-col items-center justify-center py-32 px-4 rounded-2xl bg-indigo-50 text-indigo-800">
<Typography className="text-5xl sm:text-7xl font-semibold leading-none tracking-tight"> <Typography className="text-5xl sm:text-7xl font-semibold leading-none tracking-tight">
{overview[currentRange]['new-issues']} {overview[currentRange]['new-issues']}
</Typography> </Typography>
<Typography className="mt-4 text-sm sm:text-lg font-medium">New Issues</Typography> <Typography className="mt-4 text-sm sm:text-lg font-medium">Recaudación</Typography>
</div> </div>
<div className="col-span-2 flex flex-col items-center justify-center py-32 px-4 rounded-2xl bg-green-50 text-green-800"> <div className="col-span-2 flex flex-col items-center justify-center py-32 px-4 rounded-2xl bg-blue-50 text-grey-800">
<Typography className="text-5xl sm:text-7xl font-semibold leading-none tracking-tight"> <Typography className="text-5xl sm:text-7xl font-semibold leading-none tracking-tight">
{overview[currentRange]['closed-issues']} {/* {overview[currentRange]['closed-issues']} */} 0
</Typography> </Typography>
<Typography className="mt-4 text-sm sm:text-lg font-medium">Closed</Typography> <Typography className="mt-4 text-sm sm:text-lg font-medium">Facturas Emitidas</Typography>
</div> </div>
<Box <div className="col-span-2 flex flex-col items-center justify-center py-32 px-4 rounded-2xl bg-blue-50 text-gray-800">
<Typography className="text-5xl sm:text-7xl font-semibold leading-none tracking-tight">
{/* {overview[currentRange]['closed-issues']} */} 20
</Typography>
<Typography className="mt-4 text-sm sm:text-lg font-medium">IVA Cobrado</Typography>
</div>
<div className="col-span-2 flex flex-col items-center justify-center py-32 px-4 rounded-2xl bg-indigo-50 text-indigo-800">
<Typography className="text-5xl sm:text-7xl font-semibold leading-none tracking-tight">
{/* {overview[currentRange]['closed-issues']} */} 50
</Typography>
<Typography className="mt-4 text-sm sm:text-lg font-medium">Facturas Disponibles</Typography>
</div>
{/* <Box
sx={{ sx={{
backgroundColor: (_theme) => backgroundColor: (_theme) =>
_theme.palette.mode === 'light' _theme.palette.mode === 'light'
@ -195,7 +207,7 @@ function GithubIssuesWidget() {
<Typography className="text-5xl font-semibold leading-none tracking-tight"> <Typography className="text-5xl font-semibold leading-none tracking-tight">
{overview[currentRange].fixed} {overview[currentRange].fixed}
</Typography> </Typography>
<Typography className="mt-4 text-sm font-medium text-center">Fixed</Typography> <Typography className="mt-4 text-sm font-medium text-center">Proveedores</Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -209,23 +221,23 @@ function GithubIssuesWidget() {
<Typography className="text-5xl font-semibold leading-none tracking-tight"> <Typography className="text-5xl font-semibold leading-none tracking-tight">
{overview[currentRange]['wont-fix']} {overview[currentRange]['wont-fix']}
</Typography> </Typography>
<Typography className="mt-4 text-sm font-medium text-center">Won't Fix</Typography> <Typography className="mt-4 text-sm font-medium text-center">Facturas Disponibles</Typography>
</Box> </Box> */}
<Box {/* <Box
sx={{ sx={{
backgroundColor: (_theme) => backgroundColor: (_theme) =>
_theme.palette.mode === 'light' _theme.palette.mode === 'light'
? lighten(theme.palette.background.default, 0.4) ? lighten(theme.palette.background.default, 0.4)
: lighten(theme.palette.background.default, 0.02) : lighten(theme.palette.background.default, 0.02)
}} }}
className="col-span-2 sm:col-span-1 flex flex-col items-center justify-center py-32 px-4 rounded-2xl" className="col-span-2 sm:col-span-2 flex flex-col items-center justify-center py-32 px-4 rounded-2x1"
> >
<Typography className="text-5xl font-semibold leading-none tracking-tight"> <Typography className="text-5xl font-semibold leading-none tracking-tight">
{overview[currentRange]['re-opened']} {overview[currentRange]['re-opened']}
</Typography> </Typography>
<Typography className="mt-4 text-sm font-medium text-center">Re-opened</Typography> <Typography className="mt-4 text-sm font-medium text-center">Re-opened</Typography>
</Box> </Box> */}
<Box {/* <Box
sx={{ sx={{
backgroundColor: (_theme) => backgroundColor: (_theme) =>
_theme.palette.mode === 'light' _theme.palette.mode === 'light'
@ -238,7 +250,7 @@ function GithubIssuesWidget() {
{overview[currentRange]['needs-triage']} {overview[currentRange]['needs-triage']}
</Typography> </Typography>
<Typography className="mt-4 text-sm font-medium text-center">Needs Triage</Typography> <Typography className="mt-4 text-sm font-medium text-center">Needs Triage</Typography>
</Box> </Box> */}
</div> </div>
</div> </div>
</div> </div>