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": {
"columns": [
"Type",
"Total Budget",
"Expenses (USD)",
"Expenses (%)",
"Remaining (USD)",
"Remaining (%)"
"Número Factura",
"Fecha",
"Cliente",
"Valor (USD)",
"IVA (%)",
"Valor IVA (USD)"
],
"rows": [
{
"type": "Concept",
"total": 14880,
"expensesAmount": 14000,
"type": "001-001-001",
"total": "15-01-2024",
"expensesAmount": "Amanda Pérez",
"expensesPercentage": 94.08,
"remainingAmount": 880,
"remainingAmount": 12,
"remainingPercentage": 5.92
},
{
"type": "Design",
"total": 21080,
"expensesAmount": 17240.34,
"type": "001-001-002",
"total": "14-01-2024",
"expensesAmount": "Sol Villafuerte",
"expensesPercentage": 81.78,
"remainingAmount": 3839.66,
"remainingAmount": 12,
"remainingPercentage": 18.22
},
{
"type": "Development",
"total": 34720,
"expensesAmount": 3518,
"type": "001-001-003",
"total": "10-01-2024",
"expensesAmount": "Julio Iglesias",
"expensesPercentage": 10.13,
"remainingAmount": 31202,
"remainingAmount": 10,
"remainingPercentage": 89.87
},
{
"type": "Extras",
"total": 18600,
"expensesAmount": 0,
"expensesPercentage": 0,
"remainingAmount": 18600,
"type": "001-001-004",
"total": "05-01-2024",
"expensesAmount": "Franco Almonte",
"expensesPercentage": 18600,
"remainingAmount": 12,
"remainingPercentage": 100
},
{
"type": "Marketing",
"total": 34720,
"expensesAmount": 19859.84,
"type": "001-001-005",
"total": "01-01-2024",
"expensesAmount": "Martin Carrillo",
"expensesPercentage": 57.2,
"remainingAmount": 14860.16,
"remainingAmount": 10,
"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 BudgetDistributionWidget from './widgets/BudgetDistributionWidget';
import WeeklyExpensesWidget from './widgets/WeeklyExpensesWidget';
import WeeklyExpensesWidget from './widgets/SemestralExpensesWidget';
import MonthlyExpensesWidget from './widgets/MonthlyExpensesWidget';
import YearlyExpensesWidget from './widgets/YearlyExpensesWidget';
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>
);
}
case 'total':
case 'expensesAmount':
case 'remainingAmount': {
case 'expensesPercentage':
case 'remainingPercentage': {
return (
<TableCell
key={key}
@ -81,8 +80,7 @@ function BudgetDetailsWidget() {
</TableCell>
);
}
case 'expensesPercentage':
case 'remainingPercentage': {
case 'remainingAmount': {
return (
<TableCell
key={key}

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

@ -55,7 +55,7 @@ function MonthlyExpensesWidget() {
return (
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2xl overflow-hidden">
<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">
<IconButton>
<FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon>
@ -72,14 +72,14 @@ function MonthlyExpensesWidget() {
</div>
<div className="flex items-center">
<FuseSvgIcon
className="mr-4 text-red-500"
className="mr-4 text-green-500"
size={20}
>
heroicons-solid:trending-up
</FuseSvgIcon>
<Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap">
<span className="text-red-500">2%</span>
<span> above projected</span>
<span className="text-green-500">2%</span>
<span> en aumento</span>
</Typography>
</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 (
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2xl overflow-hidden">
<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">
<IconButton>
<FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon>
@ -73,14 +73,14 @@ function WeeklyExpensesWidget() {
</div>
<div className="flex items-center">
<FuseSvgIcon
className="mr-4 text-green-500"
className="mr-4 text-red-500"
size={20}
>
heroicons-solid:trending-down
</FuseSvgIcon>
<Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap">
<span className="text-green-500">2%</span>
<span> below projected</span>
<span className="text-red-500">2%</span>
<span> a la baja</span>
</Typography>
</div>
</div>

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

@ -55,7 +55,7 @@ function YearlyExpensesWidget() {
return (
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2xl overflow-hidden">
<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">
<IconButton>
<FuseSvgIcon size={20}>heroicons-solid:dots-vertical</FuseSvgIcon>
@ -72,14 +72,14 @@ function YearlyExpensesWidget() {
</div>
<div className="flex items-center">
<FuseSvgIcon
className="mr-4 text-red-500"
className="mr-4 text-green-500"
size={20}
>
heroicons-solid:trending-up
</FuseSvgIcon>
<Typography className="font-medium text-sm text-secondary leading-none whitespace-nowrap">
<span className="text-red-500">2%</span>
<span> above projected</span>
<span className="text-green-500">2%</span>
<span> en aumento</span>
</Typography>
</div>
</div>

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

@ -3,8 +3,8 @@
*/
type BudgetDetailsRow = {
type: string;
total: number;
expensesAmount: number;
total: string;
expensesAmount: string;
expensesPercentage: number;
remainingAmount: 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 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';
import SemestralExpensesWidget from '../budget/widgets/SemestralExpensesWidget';
/**
* The HomeTab component.
@ -30,54 +30,38 @@ function HomeTab() {
return (
<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}
initial="hidden"
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
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 />
</motion.div>
<motion.div
variants={item}
className="sm:col-span-4"
className="sm:col-span-6"
>
<BudgetDetailsWidget />
</motion.div>

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

@ -195,62 +195,6 @@ function GithubIssuesWidget() {
</Typography>
<Typography className="mt-4 text-sm sm:text-lg font-medium">Facturas Disponibles</Typography>
</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>