From ebc1bc48077ed3bb8b9b942332f365c6f5d2768e Mon Sep 17 00:00:00 2001
From: Elizabeth <eliza.veronica@outlook.es>
Date: Mon, 29 Jan 2024 16:27:56 -0500
Subject: [PATCH] Cambio Dashboard

---
 src/@mock-api/mock-api.json                   | 18 +++---
 .../dashboard/project/ProjectDashboardApp.tsx | 36 -----------
 .../project/ProjectDashboardAppHeader.tsx     | 59 +------------------
 .../budget/widgets/BudgetDetailsWidget.tsx    |  2 +-
 .../dashboard/project/tabs/home/HomeTab.tsx   | 40 +++++++++----
 .../tabs/home/widgets/GithubIssuesWidget.tsx  | 46 +++++++++------
 6 files changed, 72 insertions(+), 129 deletions(-)

diff --git a/src/@mock-api/mock-api.json b/src/@mock-api/mock-api.json
index c537593..bcd5b67 100644
--- a/src/@mock-api/mock-api.json
+++ b/src/@mock-api/mock-api.json
@@ -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": [
diff --git a/src/app/main/dashboard/project/ProjectDashboardApp.tsx b/src/app/main/dashboard/project/ProjectDashboardApp.tsx
index 81d1983..3ddc9e5 100644
--- a/src/app/main/dashboard/project/ProjectDashboardApp.tsx
+++ b/src/app/main/dashboard/project/ProjectDashboardApp.tsx
@@ -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>
 			}
 		/>
diff --git a/src/app/main/dashboard/project/ProjectDashboardAppHeader.tsx b/src/app/main/dashboard/project/ProjectDashboardAppHeader.tsx
index b4740b8..6b522de 100644
--- a/src/app/main/dashboard/project/ProjectDashboardAppHeader.tsx
+++ b/src/app/main/dashboard/project/ProjectDashboardAppHeader.tsx
@@ -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>
 	);
 }
diff --git a/src/app/main/dashboard/project/tabs/budget/widgets/BudgetDetailsWidget.tsx b/src/app/main/dashboard/project/tabs/budget/widgets/BudgetDetailsWidget.tsx
index 9ac5fe8..e953199 100644
--- a/src/app/main/dashboard/project/tabs/budget/widgets/BudgetDetailsWidget.tsx
+++ b/src/app/main/dashboard/project/tabs/budget/widgets/BudgetDetailsWidget.tsx
@@ -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">
diff --git a/src/app/main/dashboard/project/tabs/home/HomeTab.tsx b/src/app/main/dashboard/project/tabs/home/HomeTab.tsx
index 6a1075f..8af6ecc 100644
--- a/src/app/main/dashboard/project/tabs/home/HomeTab.tsx
+++ b/src/app/main/dashboard/project/tabs/home/HomeTab.tsx
@@ -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>
 	);
diff --git a/src/app/main/dashboard/project/tabs/home/widgets/GithubIssuesWidget.tsx b/src/app/main/dashboard/project/tabs/home/widgets/GithubIssuesWidget.tsx
index 3be5499..1172afb 100644
--- a/src/app/main/dashboard/project/tabs/home/widgets/GithubIssuesWidget.tsx
+++ b/src/app/main/dashboard/project/tabs/home/widgets/GithubIssuesWidget.tsx
@@ -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>