This commit is contained in:
David Arranz 2025-05-19 18:39:12 +02:00
parent fd9432927b
commit bbd79cc869
11 changed files with 113 additions and 98 deletions

View File

@ -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

View File

@ -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": {

View File

@ -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"

View File

@ -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"
}
}

View File

@ -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 <InvoicesProvider>{children}</InvoicesProvider>;
return (
<InvoicesProvider>
<Outlet />
</InvoicesProvider>
);
};

View File

@ -15,7 +15,7 @@ export const InvoicesProvider = ({ children }: PropsWithChildren) => {
setPagination,
}}
>
<div className='invoices-layout'>{children}</div>
{children}
</InvoicesContext.Provider>
);
};

View File

@ -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 (
<>
<AppBreadcrumb />
<AppContent>
<div className='flex items-center justify-between space-y-2'>
<div>
<h2 className='text-2xl font-bold tracking-tight'>{t("invoices.list.title")}</h2>
<p className='text-muted-foreground'>{t("invoices.list.description")}</p>
</div>
<div className='flex items-center space-x-2'>
<Button onClick={() => navigate("/Invoices/add")}>
<PlusIcon className='w-4 h-4 mr-2' />
{t("invoices.create.title")}
</Button>
</div>
</div>
</AppContent>
</>
);
};
/*
return (
<>
<div className='flex items-center justify-between space-y-2'>
<div>
<h2 className='text-2xl font-bold tracking-tight'>
<Trans i18nKey='Invoices.list.title' />
{t('invoices.list.title' />
</h2>
<p className='text-muted-foreground'>
<Trans i18nKey='Invoices.list.subtitle' />
{t('Invoices.list.subtitle' />
</p>
</div>
<div className='flex items-center space-x-2'>
@ -89,3 +97,4 @@ export const InvoicesList = () => {
</>
);
};
*/

View File

@ -17,6 +17,7 @@
"ui:add": "pnpm dlx shadcn@latest add"
},
"peerDependencies": {
"lucide-react": "^0.503.0",
"react": "^18 || ^19",
"react-dom": "^18 || ^19"
},

View File

@ -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<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator-root"
data-slot='separator-root'
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
);
}
export { Separator }
export { Separator };

View File

@ -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;
}
}

View File

@ -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: