diff --git a/apps/web/src/global.css b/apps/web/src/global.css index 60145b34..d1572867 100644 --- a/apps/web/src/global.css +++ b/apps/web/src/global.css @@ -4,6 +4,11 @@ @import '@repo/shadcn-ui/globals.css'; @import '@repo/rdx-ui/globals.css'; +@theme { + --font-sans: "Calibri", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + + /** * Tailwind CSS official document: * https://tailwindcss.com/docs/detecting-classes-in-source-files diff --git a/modules/invoices/package.json b/modules/invoices/package.json index eff6ff46..017800bf 100644 --- a/modules/invoices/package.json +++ b/modules/invoices/package.json @@ -8,10 +8,7 @@ "./api": "./src/api/index.ts", "./dto": "./src/common/dto/index.ts", "./manifest": "./src/web/manifest.ts", - "./hooks/*": [ - "./src/web/hooks/*.tsx", - "./src/hooks/*.ts" - ], + "./hooks/*": ["./src/web/hooks/*.tsx", "./src/hooks/*.ts"], "./components": "./src/web/components/index.tsx", "./components/*": "./src/web/components/*.tsx", "./locales": "./src/common/locales/index.tsx" @@ -20,8 +17,10 @@ "ag-grid-community": "^33.3.0", "ag-grid-react": "^33.3.0", "i18next": "^25.1.1", + "lucide-react": "^0.503.0", "react": "^18 || ^19", "react-dom": "^18 || ^19", + "react-i18next": "^15.5.1", "react-router-dom": "^6.26.0" }, "devDependencies": { diff --git a/modules/invoices/src/common/locales/en.json b/modules/invoices/src/common/locales/en.json index 3385cc35..45b1766e 100644 --- a/modules/invoices/src/common/locales/en.json +++ b/modules/invoices/src/common/locales/en.json @@ -2,6 +2,10 @@ "invoices": { "title": "Invoices", "description": "Manage your invoices", + "list": { + "title": "Invoice List", + "description": "List all invoices" + }, "create": { "title": "Create Invoice", "description": "Create a new invoice" diff --git a/modules/invoices/src/common/locales/es.json b/modules/invoices/src/common/locales/es.json index 299943c8..0412ecfe 100644 --- a/modules/invoices/src/common/locales/es.json +++ b/modules/invoices/src/common/locales/es.json @@ -2,20 +2,24 @@ "invoices": { "title": "Facturas", "description": "Gestiona tus facturas", + "list": { + "title": "Lista de facturas", + "description": "Lista todas las facturas" + }, "create": { - "title": "Crear Factura", + "title": "Crear factura", "description": "Crear una nueva factura" }, "edit": { - "title": "Editar Factura", + "title": "Editar factura", "description": "Editar la factura seleccionada" }, "delete": { - "title": "Eliminar Factura", + "title": "Eliminar factura", "description": "Eliminar la factura seleccionada" }, "view": { - "title": "Ver Factura", + "title": "Ver factura", "description": "Ver los detalles de la factura seleccionada" } } diff --git a/modules/invoices/src/web/components/invoices-layout.tsx b/modules/invoices/src/web/components/invoices-layout.tsx index 67038e05..3d4bcc84 100644 --- a/modules/invoices/src/web/components/invoices-layout.tsx +++ b/modules/invoices/src/web/components/invoices-layout.tsx @@ -1,10 +1,12 @@ -import { PropsWithChildren } from "react"; - -import { useTranslation } from "react-i18next"; +import { Outlet } from "react-router-dom"; import { InvoicesProvider } from "../hooks"; -export const InvoicesLayout = ({ children }: PropsWithChildren) => { - const { t } = useTranslation("invoices"); +export const InvoicesLayout = () => { + //const { t } = useTranslation("invoices"); - return {children}; + return ( + + + + ); }; diff --git a/modules/invoices/src/web/hooks/invoices-context.tsx b/modules/invoices/src/web/hooks/invoices-context.tsx index e9162e03..bb37c434 100644 --- a/modules/invoices/src/web/hooks/invoices-context.tsx +++ b/modules/invoices/src/web/hooks/invoices-context.tsx @@ -15,7 +15,7 @@ export const InvoicesProvider = ({ children }: PropsWithChildren) => { setPagination, }} > -
{children}
+ {children} ); }; diff --git a/modules/invoices/src/web/pages/list.tsx b/modules/invoices/src/web/pages/list.tsx index 632b66f2..6def9183 100644 --- a/modules/invoices/src/web/pages/list.tsx +++ b/modules/invoices/src/web/pages/list.tsx @@ -1,26 +1,12 @@ -import { Trans } from "react-i18next"; - -import { - Button, - Label, - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, - Tabs, - TabsContent, - TabsList, - TabsTrigger, -} from "@repo/shadcn-ui/components"; - -import { t } from "i18next"; +import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components"; +import { Button } from "@repo/shadcn-ui/components"; import { PlusIcon } from "lucide-react"; import { useState } from "react"; +import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; -import { InvoicesGrid } from "../components/invoices-grid"; export const InvoicesList = () => { + const { t } = useTranslation("invoices"); const navigate = useNavigate(); const [status, setStatus] = useState("all"); @@ -34,15 +20,37 @@ export const InvoicesList = () => { { value: "archived", label: t("Invoices.list.tabs.archived") }, ]; + return ( + <> + + +
+
+

{t("invoices.list.title")}

+

{t("invoices.list.description")}

+
+
+ +
+
+ + + ); +}; + +/* return ( <>

- + {t('invoices.list.title' />

- + {t('Invoices.list.subtitle' />

@@ -89,3 +97,4 @@ export const InvoicesList = () => { ); }; +*/ diff --git a/packages/shadcn-ui/package.json b/packages/shadcn-ui/package.json index c40eae4c..d003c7db 100644 --- a/packages/shadcn-ui/package.json +++ b/packages/shadcn-ui/package.json @@ -17,6 +17,7 @@ "ui:add": "pnpm dlx shadcn@latest add" }, "peerDependencies": { + "lucide-react": "^0.503.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/shadcn-ui/src/components/separator.tsx b/packages/shadcn-ui/src/components/separator.tsx index 9b4b31e7..8518db69 100644 --- a/packages/shadcn-ui/src/components/separator.tsx +++ b/packages/shadcn-ui/src/components/separator.tsx @@ -1,9 +1,9 @@ -"use client" +"use client"; -import * as React from "react" -import * as SeparatorPrimitive from "@radix-ui/react-separator" +import * as SeparatorPrimitive from "@radix-ui/react-separator"; +import * as React from "react"; -import { cn } from "@repo/shadcn-ui/lib/utils" +import { cn } from "@repo/shadcn-ui/lib/utils"; function Separator({ className, @@ -13,16 +13,17 @@ function Separator({ }: React.ComponentProps) { return ( - ) + ); } -export { Separator } +export { Separator }; diff --git a/packages/shadcn-ui/src/styles/globals.css b/packages/shadcn-ui/src/styles/globals.css index cee24fbb..970005f2 100644 --- a/packages/shadcn-ui/src/styles/globals.css +++ b/packages/shadcn-ui/src/styles/globals.css @@ -44,79 +44,82 @@ } :root { - --radius: 0.625rem; + --radius: 0.3rem; --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); + --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); + --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); + --popover-foreground: oklch(0.141 0.005 285.823); + --primary: oklch(0.623 0.214 259.815); + --primary-foreground: oklch(0.97 0.014 254.604); + --secondary: oklch(0.967 0.001 286.375); + --secondary-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.967 0.001 286.375); + --muted-foreground: oklch(0.552 0.016 285.938); + --accent: oklch(0.967 0.001 286.375); + --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); + --border: oklch(0.92 0.004 286.32); + --input: oklch(0.92 0.004 286.32); + --ring: oklch(0.623 0.214 259.815); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --sidebar-foreground: oklch(0.141 0.005 285.823); + --sidebar-primary: oklch(0.623 0.214 259.815); + --sidebar-primary-foreground: oklch(0.97 0.014 254.604); + --sidebar-accent: oklch(0.967 0.001 286.375); + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); + --sidebar-border: oklch(0.92 0.004 286.32); + --sidebar-ring: oklch(0.623 0.214 259.815); } .dark { - --background: oklch(0.145 0 0); + --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); + --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); + --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); + --primary: oklch(0.546 0.245 262.881); + --primary-foreground: oklch(0.379 0.146 265.522); + --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); + --muted: oklch(0.274 0.006 286.033); + --muted-foreground: oklch(0.705 0.015 286.067); + --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); + --ring: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); + --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); + --sidebar-primary: oklch(0.546 0.245 262.881); + --sidebar-primary-foreground: oklch(0.379 0.146 265.522); + --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --sidebar-ring: oklch(0.488 0.243 264.376); } + @layer base { * { @apply border-border outline-ring/50; + @apply transition-colors duration-300; /* Added transition for smooth color changes */ } body { @apply bg-background text-foreground; } + } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f47de410..7d092e11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -170,7 +170,7 @@ importers: version: 29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)) ts-jest: specifier: ^29.2.5 - version: 29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(esbuild@0.25.4)(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3) tsconfig-paths: specifier: ^4.2.0 version: 4.2.0 @@ -240,9 +240,6 @@ importers: tailwindcss: specifier: ^4.1.6 version: 4.1.6 - tailwindcss-animate: - specifier: ^1.0.7 - version: 1.0.7(tailwindcss@4.1.6) tw-animate-css: specifier: ^1.2.9 version: 1.2.9 @@ -580,6 +577,9 @@ importers: tsup: specifier: ^8.4.0 version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(tsx@4.19.4)(typescript@5.8.3)(yaml@2.7.1) + tw-animate-css: + specifier: ^1.2.9 + version: 1.2.9 typescript: specifier: ^5.8.3 version: 5.8.3 @@ -752,9 +752,6 @@ importers: tailwindcss: specifier: ^4.1.5 version: 4.1.6 - tailwindcss-animate: - specifier: ^1.0.7 - version: 1.0.7(tailwindcss@4.1.6) tw-animate-css: specifier: ^1.2.9 version: 1.2.9 @@ -5649,11 +5646,6 @@ packages: tailwind-merge@3.2.0: resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==} - tailwindcss-animate@1.0.7: - resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} - peerDependencies: - tailwindcss: '>=3.0.0 || insiders' - tailwindcss@4.1.5: resolution: {integrity: sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA==} @@ -11321,10 +11313,6 @@ snapshots: tailwind-merge@3.2.0: {} - tailwindcss-animate@1.0.7(tailwindcss@4.1.6): - dependencies: - tailwindcss: 4.1.6 - tailwindcss@4.1.5: {} tailwindcss@4.1.6: {} @@ -11421,7 +11409,7 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(esbuild@0.25.4)(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3): + ts-jest@29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 @@ -11440,7 +11428,6 @@ snapshots: '@jest/transform': 29.7.0 '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.27.1) - esbuild: 0.25.4 ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3): dependencies: