From fbf301d1d72613f0658f17d78c86d18badefb534 Mon Sep 17 00:00:00 2001 From: Andres Alvarez Date: Thu, 1 Feb 2024 12:07:32 -0500 Subject: [PATCH] crear factura --- index.html | 2 +- public/assets/images/flags/ES.svg | 652 ++++++++++++++++++ src/app/configs/navigation-i18n/es.ts | 3 +- src/app/configs/navigationConfig.ts | 11 + src/app/configs/routesConfig.tsx | 4 +- src/app/main/invoice/InvoiceConfig.ts | 12 + .../generateInvoice/GenerateInvoice.tsx | 10 + .../generateInvoice/GenerateInvoiceConfig.tsx | 23 + .../generateInvoice/GenerateInvoiceRender.tsx | 91 +++ src/app/main/invoice/i18n/es.ts | 6 + .../main/invoice/listInvoice/ListInvoice.tsx | 10 + .../invoice/listInvoice/ListInvoiceConfig.tsx | 24 + .../invoice/listInvoice/ListInvoiceRender.tsx | 257 +++++++ src/app/store/i18nSlice.ts | 1 + src/app/theme-layouts/layout1/Layout1.tsx | 2 +- .../theme-layouts/layout1/Layout1Config.ts | 4 +- .../layout1/components/ToolbarLayout1.tsx | 15 +- .../shared-components/LanguageSwitcher.tsx | 4 +- .../shared-components/UserMenu.tsx | 2 +- src/i18n.ts | 6 +- 20 files changed, 1118 insertions(+), 21 deletions(-) create mode 100644 public/assets/images/flags/ES.svg create mode 100644 src/app/main/invoice/InvoiceConfig.ts create mode 100644 src/app/main/invoice/generateInvoice/GenerateInvoice.tsx create mode 100644 src/app/main/invoice/generateInvoice/GenerateInvoiceConfig.tsx create mode 100644 src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx create mode 100644 src/app/main/invoice/i18n/es.ts create mode 100644 src/app/main/invoice/listInvoice/ListInvoice.tsx create mode 100644 src/app/main/invoice/listInvoice/ListInvoiceConfig.tsx create mode 100644 src/app/main/invoice/listInvoice/ListInvoiceRender.tsx diff --git a/index.html b/index.html index 4c55328..65a27f0 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/public/assets/images/flags/ES.svg b/public/assets/images/flags/ES.svg new file mode 100644 index 0000000..02a6e38 --- /dev/null +++ b/public/assets/images/flags/ES.svg @@ -0,0 +1,652 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/configs/navigation-i18n/es.ts b/src/app/configs/navigation-i18n/es.ts index f50c65c..1fd6e9e 100644 --- a/src/app/configs/navigation-i18n/es.ts +++ b/src/app/configs/navigation-i18n/es.ts @@ -1,7 +1,8 @@ const locale = { APPLICATIONS: 'Applications', EXAMPLE: 'Example', - DASHBOARD: 'Tablero' + DASHBOARD: 'Tablero', + INVOICE: 'Factura' }; export default locale; diff --git a/src/app/configs/navigationConfig.ts b/src/app/configs/navigationConfig.ts index dbe4bb7..f72f831 100644 --- a/src/app/configs/navigationConfig.ts +++ b/src/app/configs/navigationConfig.ts @@ -3,10 +3,12 @@ import { FuseNavItemType } from '@fuse/core/FuseNavigation/types/FuseNavItemType import ar from './navigation-i18n/ar'; import en from './navigation-i18n/en'; import tr from './navigation-i18n/tr'; +import es from './navigation-i18n/es'; i18next.addResourceBundle('en', 'navigation', en); i18next.addResourceBundle('tr', 'navigation', tr); i18next.addResourceBundle('ar', 'navigation', ar); +i18next.addResourceBundle('es', 'navigation', es); /** * The navigationConfig object is an array of navigation items for the Fuse application. @@ -27,7 +29,16 @@ const navigationConfig: FuseNavItemType[] = [ type: 'item', icon: 'heroicons-outline:star', url: 'dashboards/project' + }, + { + id: 'invoice-component', + title: 'Factura', + translate: 'INVOICE', + type: 'item', + icon: 'heroicons-outline:document-text', + url: 'invoice/list' } + ]; export default navigationConfig; diff --git a/src/app/configs/routesConfig.tsx b/src/app/configs/routesConfig.tsx index 2546ba5..f5174e7 100644 --- a/src/app/configs/routesConfig.tsx +++ b/src/app/configs/routesConfig.tsx @@ -10,7 +10,9 @@ import Error404Page from '../main/404/Error404Page'; import ExampleConfig from '../main/example/ExampleConfig'; import ProjectDashboardAppConfig from '../main/dashboard/project/ProjectDashboardAppConfig'; -const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig]; +import InvoiceConfigs from '../main/invoice/InvoiceConfig'; + +const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ...InvoiceConfigs]; /** * The routes of the application. diff --git a/src/app/main/invoice/InvoiceConfig.ts b/src/app/main/invoice/InvoiceConfig.ts new file mode 100644 index 0000000..4fe6cc5 --- /dev/null +++ b/src/app/main/invoice/InvoiceConfig.ts @@ -0,0 +1,12 @@ +import { FuseRouteConfigsType } from "@fuse/utils/FuseUtils"; +import ListInvoiceConfig from "./listInvoice/ListInvoiceConfig"; +import GenerateInvoiceConfig from "./generateInvoice/GenerateInvoiceConfig"; + + + +const invoiceConfigs: FuseRouteConfigsType = [ + ListInvoiceConfig, + GenerateInvoiceConfig +] + +export default invoiceConfigs; \ No newline at end of file diff --git a/src/app/main/invoice/generateInvoice/GenerateInvoice.tsx b/src/app/main/invoice/generateInvoice/GenerateInvoice.tsx new file mode 100644 index 0000000..4bdfacf --- /dev/null +++ b/src/app/main/invoice/generateInvoice/GenerateInvoice.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import GenerateInvoiceRender from './GenerateInvoiceRender' + +const GenerateInvoice = () => { + return ( + + ) +} + +export default GenerateInvoice \ No newline at end of file diff --git a/src/app/main/invoice/generateInvoice/GenerateInvoiceConfig.tsx b/src/app/main/invoice/generateInvoice/GenerateInvoiceConfig.tsx new file mode 100644 index 0000000..d2827d7 --- /dev/null +++ b/src/app/main/invoice/generateInvoice/GenerateInvoiceConfig.tsx @@ -0,0 +1,23 @@ +import i18next from "i18next"; +import { lazy } from "react" +import es from '../i18n/es'; + +i18next.addResourceBundle('es','invoicePage', es); + +const GenerateInvoice = lazy(() => import('./GenerateInvoice')); + +const GenerateInvoiceConfig = { + settings: { + layout: { + config: {} + } + }, + routes: [ + { + path: 'invoice/edit', + element: + } + ] +} + +export default GenerateInvoiceConfig; \ No newline at end of file diff --git a/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx b/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx new file mode 100644 index 0000000..69b60e0 --- /dev/null +++ b/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx @@ -0,0 +1,91 @@ +import FusePageCarded from "@fuse/core/FusePageCarded"; +import FusePageSimple from "@fuse/core/FusePageSimple"; +import { + Autocomplete, + Card, + CardActions, + CardContent, + CardHeader, + Divider, + TextField, + styled, + Button, +} from "@mui/material"; +import { Controller, useFormContext } from "react-hook-form"; + +const Root = styled(FusePageSimple)(({ theme }) => ({ + "& .FusePageSimple-header": { + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`, + }, +})); + +const GenerateInvoiceRender = () => { + return ( + + + + + + + + + { + onChange(newValue); + }} */ + renderInput={(params) => ( + + )} + /> + + + + + + ); +}; + +export default GenerateInvoiceRender; diff --git a/src/app/main/invoice/i18n/es.ts b/src/app/main/invoice/i18n/es.ts new file mode 100644 index 0000000..5bd2762 --- /dev/null +++ b/src/app/main/invoice/i18n/es.ts @@ -0,0 +1,6 @@ +const locale = { + TITLE: 'Facturas', + TITLE_TABLE: 'Facturas realizadas' +} + +export default locale; \ No newline at end of file diff --git a/src/app/main/invoice/listInvoice/ListInvoice.tsx b/src/app/main/invoice/listInvoice/ListInvoice.tsx new file mode 100644 index 0000000..9d0a58c --- /dev/null +++ b/src/app/main/invoice/listInvoice/ListInvoice.tsx @@ -0,0 +1,10 @@ +import ListInvoiceRender from "./ListInvoiceRender" + + +const ListInvoice = () => { + return ( + + ) +} + +export default ListInvoice; \ No newline at end of file diff --git a/src/app/main/invoice/listInvoice/ListInvoiceConfig.tsx b/src/app/main/invoice/listInvoice/ListInvoiceConfig.tsx new file mode 100644 index 0000000..138198d --- /dev/null +++ b/src/app/main/invoice/listInvoice/ListInvoiceConfig.tsx @@ -0,0 +1,24 @@ +import i18next from "i18next"; +import { lazy } from "react"; +import es from '../i18n/es'; + +i18next.addResourceBundle('es','invoicePage', es); + +const Invoice = lazy(() => import('./ListInvoice')); + + +const ListInvoiceConfig = { + settings: { + layout: { + config: {} + } + }, + routes: [ + { + path: 'invoice/list', + element: + } + ] +} + +export default ListInvoiceConfig; \ No newline at end of file diff --git a/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx b/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx new file mode 100644 index 0000000..abce6b9 --- /dev/null +++ b/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx @@ -0,0 +1,257 @@ +import FusePageSimple from "@fuse/core/FusePageSimple"; +import FuseSvgIcon from "@fuse/core/FuseSvgIcon"; +import { + Button, + Paper, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Typography, + styled, +} from "@mui/material"; +import clsx from "clsx"; +import { format } from "date-fns"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; + +const Root = styled(FusePageSimple)(({ theme }) => ({ + "& .FusePageSimple-header": { + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`, + }, +})); + +const ListInvoiceRender = () => { + const { t } = useTranslation("invoicePage"); + const columns = [ + "Número factura", + "Fecha", + "Cliente", + "Identificación", + "Valor", + "Estado", + "Acciones", + ]; + + const rows = [ + { + id: "528651571NT", + date: "2019-10-07T22:22:37.274Z", + name: "Morgan Page", + identification: "17215896114", + amount: 1358.75, + status: "completed", + action: true, + }, + { + id: "421436904YT", + date: "2019-12-18T14:51:24.461Z", + name: "Nita Hebert", + identification: "17215896114", + amount: -1042.82, + status: "completed", + action: true, + }, + { + id: "685377421YT", + date: "2019-12-25T17:52:14.304Z", + name: "Marsha Chambers", + identification: "17215896114", + amount: 1828.16, + status: "pending", + action: true, + }, + { + id: "884960091RT", + date: "2019-11-29T06:32:16.111Z", + name: "Charmaine Jackson", + identification: "17215896114", + amount: 1647.55, + status: "completed", + action: true, + }, + { + id: "361402213NT", + date: "2019-11-24T12:13:23.064Z", + name: "Maura Carey", + identification: "17215896114", + amount: -927.43, + status: "completed", + action: true, + }, + { + id: "361402213NT", + date: "2019-11-24T12:13:23.064Z", + name: "Maura Carey", + identification: "17215896114", + amount: -927.43, + status: "completed", + action: true, + }, + { + id: "361402213NT", + date: "2019-11-24T12:13:23.064Z", + name: "Maura Carey", + identification: "17215896114", + amount: -927.43, + status: "completed", + action: true, + }, + { + id: "361402213NT", + date: "2019-11-24T12:13:23.064Z", + name: "Maura Carey", + identification: "17215896114", + amount: -927.43, + status: "completed", + action: true, + }, + ]; + + return ( + +

{t("TITLE")}

+ + } + content={ + +
+
+ + {t("TITLE_TABLE")} + + + 1 pendiente, 4 completadas + +
+
+ +
+
+
+ + + + {columns.map((column, index) => ( + + + {column} + + + ))} + + + + + {rows.map((row, index) => ( + + {Object.entries(row).map(([key, value]) => { + switch (key) { + case "id": { + return ( + + + {value} + + + ); + } + case "date": { + return ( + + + { + // @ts-ignore + format(new Date(value), "dd/MM/yyyy") + } + + + ); + } + case "amount": { + return ( + + + {value.toLocaleString("en-US", { + style: "currency", + currency: "USD", + })} + + + ); + } + case "status": { + return ( + + + {value} + + + ); + } + case "action": { + return ( + + + + ); + } + default: { + return ( + + {value} + + ); + } + } + })} + + ))} + +
+
+ + } + /> + ); +}; + +export default ListInvoiceRender; diff --git a/src/app/store/i18nSlice.ts b/src/app/store/i18nSlice.ts index 0a35379..adfc47e 100644 --- a/src/app/store/i18nSlice.ts +++ b/src/app/store/i18nSlice.ts @@ -54,6 +54,7 @@ export const i18nSlice = createSlice({ initialState: { language: i18n.options.lng, languages: [ + { id: 'es', title: 'Español', flag: 'ES' }, { id: 'en', title: 'English', flag: 'US' }, { id: 'tr', title: 'Turkish', flag: 'TR' }, { id: 'ar', title: 'Arabic', flag: 'SA' } diff --git a/src/app/theme-layouts/layout1/Layout1.tsx b/src/app/theme-layouts/layout1/Layout1.tsx index b7909b8..90227b8 100644 --- a/src/app/theme-layouts/layout1/Layout1.tsx +++ b/src/app/theme-layouts/layout1/Layout1.tsx @@ -48,7 +48,7 @@ function Layout1(props: Layout1Props) { {config.leftSidePanel.display && } diff --git a/src/app/theme-layouts/layout1/Layout1Config.ts b/src/app/theme-layouts/layout1/Layout1Config.ts index 245b733..4d0f28c 100644 --- a/src/app/theme-layouts/layout1/Layout1Config.ts +++ b/src/app/theme-layouts/layout1/Layout1Config.ts @@ -18,14 +18,14 @@ const Layout1Config = { style: 'fixed' }, footer: { - display: true, + display: false, style: 'fixed' }, leftSidePanel: { display: true }, rightSidePanel: { - display: true + display: false } }, form: { diff --git a/src/app/theme-layouts/layout1/components/ToolbarLayout1.tsx b/src/app/theme-layouts/layout1/components/ToolbarLayout1.tsx index a90bba1..169e33a 100644 --- a/src/app/theme-layouts/layout1/components/ToolbarLayout1.tsx +++ b/src/app/theme-layouts/layout1/components/ToolbarLayout1.tsx @@ -9,13 +9,9 @@ import { selectFuseCurrentLayoutConfig, selectToolbarTheme } from '@fuse/core/Fu import { Layout1ConfigDefaultsType } from 'app/theme-layouts/layout1/Layout1Config'; import NavbarToggleButton from 'app/theme-layouts/shared-components/navbar/NavbarToggleButton'; import { selectFuseNavbar } from 'app/theme-layouts/shared-components/navbar/store/navbarSlice'; -import AdjustFontSize from '../../shared-components/AdjustFontSize'; -import FullScreenToggle from '../../shared-components/FullScreenToggle'; -import LanguageSwitcher from '../../shared-components/LanguageSwitcher'; -import NavigationShortcuts from '../../shared-components/navigation/NavigationShortcuts'; -import NavigationSearch from '../../shared-components/navigation/NavigationSearch'; + import UserMenu from '../../shared-components/UserMenu'; -import QuickPanelToggleButton from '../../shared-components/quickPanel/QuickPanelToggleButton'; + type ToolbarLayout1Props = { className?: string; @@ -65,17 +61,18 @@ function ToolbarLayout1(props: ToolbarLayout1Props) { )} - + {/* - + */}
+ {/* - + */}
diff --git a/src/app/theme-layouts/shared-components/LanguageSwitcher.tsx b/src/app/theme-layouts/shared-components/LanguageSwitcher.tsx index bc34747..822912a 100644 --- a/src/app/theme-layouts/shared-components/LanguageSwitcher.tsx +++ b/src/app/theme-layouts/shared-components/LanguageSwitcher.tsx @@ -85,14 +85,14 @@ function LanguageSwitcher() { ))} - - + */} ); diff --git a/src/app/theme-layouts/shared-components/UserMenu.tsx b/src/app/theme-layouts/shared-components/UserMenu.tsx index 62d1fef..01ae431 100644 --- a/src/app/theme-layouts/shared-components/UserMenu.tsx +++ b/src/app/theme-layouts/shared-components/UserMenu.tsx @@ -127,7 +127,7 @@ function UserMenu() { heroicons-outline:logout - + )} diff --git a/src/i18n.ts b/src/i18n.ts index 57c127c..3ab19c7 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -5,9 +5,9 @@ import { initReactI18next } from 'react-i18next'; * resources is an object that contains all the translations for the different languages. */ const resources = { - en: { + es: { translation: { - 'Welcome to React': 'Welcome to React and react-i18next' + 'Bienvenido': 'Bienvenido al sistema de facturación' } } }; @@ -20,7 +20,7 @@ const resources = { i18n.use(initReactI18next) // passes i18n down to react-i18next .init({ resources, - lng: 'en', + lng: 'es', keySeparator: false, // we do not use keys in form messages.welcome