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": {
"this-week": "This Week",
"last-week": "Last Week"
"this-week": "Mensual",
"last-week": "Semestral"
},
"labels": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio"
],
"series": {
"this-week": [

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

@ -40,43 +40,7 @@ function ProjectDashboardApp() {
header={<ProjectDashboardAppHeader />}
content={
<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 === 1 && <BudgetTab />}
{tabValue === 2 && <TeamTab />}
</div>
}
/>

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

@ -67,21 +67,14 @@ function ProjectDashboardAppHeader() {
</Avatar>
<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">
{`Welcome back, ${user.data.displayName}!`}
Dashboard
</Typography>
<div className="flex items-center">
<FuseSvgIcon
size={20}
color="action"
>
heroicons-solid:bell
</FuseSvgIcon>
<Typography
className="mx-6 leading-6 truncate"
color="text.secondary"
>
You have 2 new messages and 15 new tasks
{`${user.data.displayName}`}
</Typography>
</div>
</div>
@ -91,58 +84,12 @@ function ProjectDashboardAppHeader() {
className="whitespace-nowrap"
variant="contained"
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>}
>
Settings
Configuración
</Button>
</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>
);
}

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

@ -25,7 +25,7 @@ function BudgetDetailsWidget() {
return (
<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">
<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 TaskDistributionWidget from './widgets/TaskDistributionWidget';
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.
@ -31,7 +35,29 @@ function HomeTab() {
initial="hidden"
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 />
</motion.div>
<motion.div variants={item}>
@ -42,7 +68,7 @@ function HomeTab() {
</motion.div>
<motion.div variants={item}>
<FeaturesWidget />
</motion.div>
</motion.div> */}
<motion.div
variants={item}
className="sm:col-span-2 md:col-span-4"
@ -51,15 +77,9 @@ function HomeTab() {
</motion.div>
<motion.div
variants={item}
className="sm:col-span-2 md:col-span-4 lg:col-span-2"
className="sm:col-span-4"
>
<TaskDistributionWidget />
</motion.div>
<motion.div
variants={item}
className="sm:col-span-2 md:col-span-4 lg:col-span-2"
>
<ScheduleWidget />
<BudgetDetailsWidget />
</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">
<div className="flex flex-col sm:flex-row items-start justify-between">
<Typography className="text-lg font-medium tracking-tight leading-6 truncate">
Github Issues Summary
Resumen
</Typography>
<div className="mt-12 sm:mt-0 sm:ml-8">
<Tabs
@ -148,12 +148,12 @@ function GithubIssuesWidget() {
</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="flex flex-col flex-auto">
<Typography
{/* <Typography
className="font-medium"
color="text.secondary"
>
New vs. Closed
</Typography>
</Typography> */}
<div className="flex flex-col flex-auto">
<ReactApexChart
className="flex-auto w-full"
@ -168,22 +168,34 @@ function GithubIssuesWidget() {
className="font-medium"
color="text.secondary"
>
Overview
Descripción
</Typography>
<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">
<Typography className="text-5xl sm:text-7xl font-semibold leading-none tracking-tight">
{overview[currentRange]['new-issues']}
</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 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">
{overview[currentRange]['closed-issues']}
{/* {overview[currentRange]['closed-issues']} */} 0
</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>
<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={{
backgroundColor: (_theme) =>
_theme.palette.mode === 'light'
@ -195,7 +207,7 @@ function GithubIssuesWidget() {
<Typography className="text-5xl font-semibold leading-none tracking-tight">
{overview[currentRange].fixed}
</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
sx={{
@ -209,23 +221,23 @@ function GithubIssuesWidget() {
<Typography className="text-5xl font-semibold leading-none tracking-tight">
{overview[currentRange]['wont-fix']}
</Typography>
<Typography className="mt-4 text-sm font-medium text-center">Won't Fix</Typography>
</Box>
<Box
<Typography className="mt-4 text-sm font-medium text-center">Facturas Disponibles</Typography>
</Box> */}
{/* <Box
sx={{
backgroundColor: (_theme) =>
_theme.palette.mode === 'light'
? lighten(theme.palette.background.default, 0.4)
: 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">
{overview[currentRange]['re-opened']}
</Typography>
<Typography className="mt-4 text-sm font-medium text-center">Re-opened</Typography>
</Box>
<Box
</Box> */}
{/* <Box
sx={{
backgroundColor: (_theme) =>
_theme.palette.mode === 'light'
@ -238,7 +250,7 @@ function GithubIssuesWidget() {
{overview[currentRange]['needs-triage']}
</Typography>
<Typography className="mt-4 text-sm font-medium text-center">Needs Triage</Typography>
</Box>
</Box> */}
</div>
</div>
</div>