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

Cambio en widgets

This commit is contained in:
EliAlarcon 2024-01-31 14:44:04 -05:00
parent ebc1bc4807
commit 147385add9
9 changed files with 67 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26025,52 +26025,52 @@
}, },
"budgetDetails": { "budgetDetails": {
"columns": [ "columns": [
"Type", "Número Factura",
"Total Budget", "Fecha",
"Expenses (USD)", "Cliente",
"Expenses (%)", "Valor (USD)",
"Remaining (USD)", "IVA (%)",
"Remaining (%)" "Valor IVA (USD)"
], ],
"rows": [ "rows": [
{ {
"type": "Concept", "type": "001-001-001",
"total": 14880, "total": "15-01-2024",
"expensesAmount": 14000, "expensesAmount": "Amanda Pérez",
"expensesPercentage": 94.08, "expensesPercentage": 94.08,
"remainingAmount": 880, "remainingAmount": 12,
"remainingPercentage": 5.92 "remainingPercentage": 5.92
}, },
{ {
"type": "Design", "type": "001-001-002",
"total": 21080, "total": "14-01-2024",
"expensesAmount": 17240.34, "expensesAmount": "Sol Villafuerte",
"expensesPercentage": 81.78, "expensesPercentage": 81.78,
"remainingAmount": 3839.66, "remainingAmount": 12,
"remainingPercentage": 18.22 "remainingPercentage": 18.22
}, },
{ {
"type": "Development", "type": "001-001-003",
"total": 34720, "total": "10-01-2024",
"expensesAmount": 3518, "expensesAmount": "Julio Iglesias",
"expensesPercentage": 10.13, "expensesPercentage": 10.13,
"remainingAmount": 31202, "remainingAmount": 10,
"remainingPercentage": 89.87 "remainingPercentage": 89.87
}, },
{ {
"type": "Extras", "type": "001-001-004",
"total": 18600, "total": "05-01-2024",
"expensesAmount": 0, "expensesAmount": "Franco Almonte",
"expensesPercentage": 0, "expensesPercentage": 18600,
"remainingAmount": 18600, "remainingAmount": 12,
"remainingPercentage": 100 "remainingPercentage": 100
}, },
{ {
"type": "Marketing", "type": "001-001-005",
"total": 34720, "total": "01-01-2024",
"expensesAmount": 19859.84, "expensesAmount": "Martin Carrillo",
"expensesPercentage": 57.2, "expensesPercentage": 57.2,
"remainingAmount": 14860.16, "remainingAmount": 10,
"remainingPercentage": 42.8 "remainingPercentage": 42.8
} }
] ]

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

@ -1,6 +1,6 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import BudgetDistributionWidget from './widgets/BudgetDistributionWidget'; import BudgetDistributionWidget from './widgets/BudgetDistributionWidget';
import WeeklyExpensesWidget from './widgets/WeeklyExpensesWidget'; import WeeklyExpensesWidget from './widgets/SemestralExpensesWidget';
import MonthlyExpensesWidget from './widgets/MonthlyExpensesWidget'; import MonthlyExpensesWidget from './widgets/MonthlyExpensesWidget';
import YearlyExpensesWidget from './widgets/YearlyExpensesWidget'; import YearlyExpensesWidget from './widgets/YearlyExpensesWidget';
import BudgetDetailsWidget from './widgets/BudgetDetailsWidget'; import BudgetDetailsWidget from './widgets/BudgetDetailsWidget';

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

@ -63,9 +63,8 @@ function BudgetDetailsWidget() {
</TableCell> </TableCell>
); );
} }
case 'total': case 'expensesPercentage':
case 'expensesAmount': case 'remainingPercentage': {
case 'remainingAmount': {
return ( return (
<TableCell <TableCell
key={key} key={key}
@ -81,8 +80,7 @@ function BudgetDetailsWidget() {
</TableCell> </TableCell>
); );
} }
case 'expensesPercentage': case 'remainingAmount': {
case 'remainingPercentage': {
return ( return (
<TableCell <TableCell
key={key} key={key}

8
src/app/main/dashboard/project/tabs/budget/widgets/MonthlyExpensesWidget.tsx
View File

@ -55,7 +55,7 @@ function MonthlyExpensesWidget() {
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">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="text-lg font-medium tracking-tight leading-6 truncate">Monthly Expenses</div> <div className="text-lg font-medium tracking-tight leading-6 truncate">Facturación Mensual</div>
<div className="ml-8 -mt-8 -mr-12"> <div className="ml-8 -mt-8 -mr-12">
<IconButton> <IconButton>
<FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon> <FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon>
@ -72,14 +72,14 @@ function MonthlyExpensesWidget() {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<FuseSvgIcon <FuseSvgIcon
className="mr-4 text-red-500" className="mr-4 text-green-500"
size={20} size={20}
> >
heroicons-solid:trending-up heroicons-solid:trending-up
</FuseSvgIcon> </FuseSvgIcon>
<Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap"> <Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap">
<span className="text-red-500">2%</span> <span className="text-green-500">2%</span>
<span> above projected</span> <span> en aumento</span>
</Typography> </Typography>
</div> </div>
</div> </div>

8
src/app/main/dashboard/project/tabs/budget/widgets/WeeklyExpensesWidget.tsx → src/app/main/dashboard/project/tabs/budget/widgets/SemestralExpensesWidget.tsx
View File

@ -56,7 +56,7 @@ function WeeklyExpensesWidget() {
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">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="text-lg font-medium tracking-tight leading-6 truncate">Weekly Expenses</div> <div className="text-lg font-medium tracking-tight leading-6 truncate">Facturación Semestral</div>
<div className="ml-8 -mt-8 -mr-12"> <div className="ml-8 -mt-8 -mr-12">
<IconButton> <IconButton>
<FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon> <FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon>
@ -73,14 +73,14 @@ function WeeklyExpensesWidget() {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<FuseSvgIcon <FuseSvgIcon
className="mr-4 text-green-500" className="mr-4 text-red-500"
size={20} size={20}
> >
heroicons-solid:trending-down heroicons-solid:trending-down
</FuseSvgIcon> </FuseSvgIcon>
<Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap"> <Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap">
<span className="text-green-500">2%</span> <span className="text-red-500">2%</span>
<span> below projected</span> <span> a la baja</span>
</Typography> </Typography>
</div> </div>
</div> </div>

8
src/app/main/dashboard/project/tabs/budget/widgets/YearlyExpensesWidget.tsx
View File

@ -55,7 +55,7 @@ function YearlyExpensesWidget() {
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">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="text-lg font-medium tracking-tight leading-6 truncate">Yearly Expenses</div> <div className="text-lg font-medium tracking-tight leading-6 truncate">Facturación Anual</div>
<div className="ml-8 -mt-8 -mr-12"> <div className="ml-8 -mt-8 -mr-12">
<IconButton> <IconButton>
<FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon> <FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon>
@ -72,14 +72,14 @@ function YearlyExpensesWidget() {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<FuseSvgIcon <FuseSvgIcon
className="mr-4 text-red-500" className="mr-4 text-green-500"
size={20} size={20}
> >
heroicons-solid:trending-up heroicons-solid:trending-up
</FuseSvgIcon> </FuseSvgIcon>
<Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap"> <Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap">
<span className="text-red-500">2%</span> <span className="text-green-500">2%</span>
<span> above projected</span> <span> en aumento</span>
</Typography> </Typography>
</div> </div>
</div> </div>

4
src/app/main/dashboard/project/tabs/budget/widgets/types/BudgetDetailsDataType.ts
View File

@ -3,8 +3,8 @@
*/ */
type BudgetDetailsRow = { type BudgetDetailsRow = {
type: string; type: string;
total: number; total: string;
expensesAmount: number; expensesAmount: string;
expensesPercentage: number; expensesPercentage: number;
remainingAmount: number; remainingAmount: number;
remainingPercentage: number; remainingPercentage: number;

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

@ -7,9 +7,9 @@ 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 BudgetDetailsWidget from '../budget/widgets/BudgetDetailsWidget';
import WeeklyExpensesWidget from '../budget/widgets/WeeklyExpensesWidget';
import MonthlyExpensesWidget from '../budget/widgets/MonthlyExpensesWidget'; import MonthlyExpensesWidget from '../budget/widgets/MonthlyExpensesWidget';
import YearlyExpensesWidget from '../budget/widgets/YearlyExpensesWidget'; import YearlyExpensesWidget from '../budget/widgets/YearlyExpensesWidget';
import SemestralExpensesWidget from '../budget/widgets/SemestralExpensesWidget';
/** /**
* The HomeTab component. * The HomeTab component.
@ -30,54 +30,38 @@ function HomeTab() {
return ( return (
<motion.div <motion.div
className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-24 w-full min-w-0 p-24" className="grid grid-cols-1 sm:grid-cols-6 gap-24 w-full min-w-0 p-24"
variants={container} variants={container}
initial="hidden" initial="hidden"
animate="show" animate="show"
> >
<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}>
<OverdueWidget />
</motion.div>
<motion.div variants={item}>
<IssuesWidget />
</motion.div>
<motion.div variants={item}>
<FeaturesWidget />
</motion.div> */}
<motion.div <motion.div
variants={item} variants={item}
className="sm:col-span-2 md:col-span-4" className="sm:col-span-2 lg:col-span-2"
>
<MonthlyExpensesWidget />
</motion.div>
<motion.div
variants={item}
className="sm:col-span-2 lg:col-span-2"
>
<SemestralExpensesWidget/>
</motion.div>
<motion.div
variants={item}
className="sm:col-span-2 lg:col-span-2"
>
<YearlyExpensesWidget />
</motion.div>
<motion.div
variants={item}
className="sm:col-span-6 md:col-span-6"
> >
<GithubIssuesWidget /> <GithubIssuesWidget />
</motion.div> </motion.div>
<motion.div <motion.div
variants={item} variants={item}
className="sm:col-span-4" className="sm:col-span-6"
> >
<BudgetDetailsWidget /> <BudgetDetailsWidget />
</motion.div> </motion.div>

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

@ -195,62 +195,6 @@ function GithubIssuesWidget() {
</Typography> </Typography>
<Typography className="mt-4 text-sm sm:text-lg font-medium">Facturas Disponibles</Typography> <Typography className="mt-4 text-sm sm:text-lg font-medium">Facturas Disponibles</Typography>
</div> </div>
{/* <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"
>
<Typography className="text-5xl font-semibold leading-none tracking-tight">
{overview[currentRange].fixed}
</Typography>
<Typography className="mt-4 text-sm font-medium text-center">Proveedores</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"
>
<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">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-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
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"
>
<Typography className="text-5xl font-semibold leading-none tracking-tight">
{overview[currentRange]['needs-triage']}
</Typography>
<Typography className="mt-4 text-sm font-medium text-center">Needs Triage</Typography>
</Box> */}
</div> </div>
</div> </div>
</div> </div>