Uecko/Uecko_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Facturas de cliente

Browse Source
This commit is contained in:
David Arranz 2025-07-17 10:50:28 +02:00
parent 7059db0c5d
commit 75738dadde
10 changed files with 245 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
modules/customer-invoices/src/web/components/items/customer-invoice-items-card-editor.tsx
View File

@ -1,6 +1,20 @@
import { FormControl, FormField, FormItem, FormMessage, Input } from "@repo/shadcn-ui/components";
import {
Button,
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
FormControl,
FormField,
FormItem,
FormMessage,
Input,
} from "@repo/shadcn-ui/components";
import { TextAreaField } from "@repo/rdx-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { ColumnDef } from "@tanstack/react-table";
import { ChevronDownIcon, ChevronUpIcon, CopyIcon, Trash2Icon } from "lucide-react";
import { useState } from "react";
@ -18,10 +32,12 @@ export const CustomerInvoiceItemsCardEditor = ({
//currency,
//language,
defaultValues,
className = "",
}: {
//currency: CurrencyData;
//language: Language;
defaultValues: Readonly<{ [x: string]: any }> | undefined;
className?: string;
}) => {
const { t } = useTranslation();
@ -271,17 +287,29 @@ export const CustomerInvoiceItemsCardEditor = ({
const navCollapsedSize = 4;
return (
<div className='relative'>
<CustomerInvoiceItemsSortableDataTable
actions={{
...fieldActions,
//pickCatalogArticle: () => setArticlePickerDialogOpen(true),
//pickBlock: () => setBlockPickerDialogOpen(true),
}}
columns={columns}
data={fields}
defaultValues={defaultValues}
/>
</div>
<Card className={cn("border-0 shadow-none", className)}>
<CardHeader>
<CardTitle>Contenido</CardTitle>
<CardDescription>Description</CardDescription>
<CardAction>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
</CardAction>
</CardHeader>
<CardContent>
<CustomerInvoiceItemsSortableDataTable
actions={{
...fieldActions,
//pickCatalogArticle: () => setArticlePickerDialogOpen(true),
//pickBlock: () => setBlockPickerDialogOpen(true),
}}
columns={columns}
data={fields}
defaultValues={defaultValues}
/>
</CardContent>
</Card>
);
};

2
modules/customer-invoices/src/web/pages/create/create.tsx
View File

@ -63,7 +63,7 @@ export const CustomerInvoiceCreate = () => {
</Button>
</div>
</div>
<div className='flex flex-col w-full h-full py-4 @container'>
<div className='flex flex-1 flex-col gap-4 p-4'>
<CustomerInvoiceEditForm onSubmit={handleSubmit} isPending={isPending} />
</div>
</AppContent>

162
modules/customer-invoices/src/web/pages/create/customer-invoice-edit-form.tsx
View File

@ -10,8 +10,10 @@ import {
Button,
Calendar,
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
Form,
@ -276,27 +278,138 @@ export const CustomerInvoiceEditForm = ({
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit, handleError)} className='grid gap-6'>
{/* Cliente */}
<Card>
<form onSubmit={form.handleSubmit(handleSubmit, handleError)}>
<div className='grid xl:grid-cols-2 space-y-6'>
<Card className='border-0 shadow-none xl:border-r xl:border-dashed rounded-none'>
<CardHeader>
<CardTitle>Cliente</CardTitle>
<CardDescription>Description</CardDescription>
<CardAction>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
</CardAction>
</CardHeader>
<CardContent className='grid grid-cols-1 gap-4 space-y-6'>
<ClientSelector />
</CardContent>
<CardFooter className='flex-col gap-2'>
<Button type='submit' className='w-full'>
Login
</Button>
<Button variant='outline' className='w-full'>
Login with Google
</Button>
</CardFooter>{" "}
</Card>
{/* Información básica */}
<Card className='@container border-0 shadow-none'>
<CardHeader>
<CardTitle>Información Básica</CardTitle>
<CardDescription>Detalles generales de la factura</CardDescription>
</CardHeader>
<CardContent className='@xl:grid @xl:grid-cols-2 @xl:gap-x-6 gap-y-8'>
<TextField
control={form.control}
name='invoice_number'
required
disabled
readOnly
label={t("form_fields.invoice_number.label")}
placeholder={t("form_fields.invoice_number.placeholder")}
description={t("form_fields.invoice_number.description")}
/>
<TextField
control={form.control}
name='invoice_series'
required
label={t("form_fields.invoice_series.label")}
placeholder={t("form_fields.invoice_series.placeholder")}
description={t("form_fields.invoice_series.description")}
/>
<DatePickerInputField
control={form.control}
name='issue_date'
required
label={t("form_fields.issue_date.label")}
placeholder={t("form_fields.issue_date.placeholder")}
description={t("form_fields.issue_date.description")}
/>
<TextField
className='@xl:col-start-1 @xl:col-span-full'
control={form.control}
name='description'
required
label={t("form_fields.description.label")}
placeholder={t("form_fields.description.placeholder")}
description={t("form_fields.description.description")}
/>
<TextAreaField
className='field-sizing-content @xl:col-start-1 @xl:col-span-full'
control={form.control}
name='notes'
label={t("form_fields.notes.label")}
placeholder={t("form_fields.notes.placeholder")}
description={t("form_fields.notes.description")}
/>
</CardContent>
</Card>
</div>
</form>
</Form>
);
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleSubmit, handleError)}
className='grid grid-cols-1 md:gap-6 md:grid-cols-6'
>
<Card className='border-0 shadow-none md:grid-span-2'>
<CardHeader>
<CardTitle>Cliente</CardTitle>
<CardDescription>Description</CardDescription>
<CardAction>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
<Button variant='link'>Sign Up</Button>
</CardAction>
</CardHeader>
<CardContent className='grid grid-cols-1 gap-4 space-y-6'>
<ClientSelector />
<TextField
control={form.control}
name='customer_id'
required
label={t("form_fields.customer_id.label")}
placeholder={t("form_fields.customer_id.placeholder")}
description={t("form_fields.customer_id.description")}
/>
<div>
<div className='space-y-1'>
<h4 className='text-sm leading-none font-medium'>Radix Primitives</h4>
<p className='text-muted-foreground text-sm'>
An open-source UI component library.
</p>
</div>
<Separator className='my-4' />
<div className='flex h-5 items-center space-x-4 text-sm'>
<div>Blog</div>
<Separator orientation='vertical' />
<div>Docs</div>
<Separator orientation='vertical' />
<div>Source</div>
</div>
</div>
</CardContent>
<CardFooter className='flex-col gap-2'>
<Button type='submit' className='w-full'>
Login
</Button>
<Button variant='outline' className='w-full'>
Login with Google
</Button>
</CardFooter>{" "}
</Card>
{/* Información básica */}
<Card>
<Card className='border-0 shadow-none '>
<CardHeader>
<CardTitle>Información Básica</CardTitle>
<CardDescription>Detalles generales de la factura</CardDescription>
@ -355,8 +468,29 @@ export const CustomerInvoiceEditForm = ({
</CardContent>
</Card>
{/* Cliente */}
<Card className='col-span-full'>
<CardHeader>
<CardTitle>Cliente</CardTitle>
</CardHeader>
<CardContent className='grid grid-cols-1 gap-4 space-y-6'>
<ClientSelector />
<TextField
control={form.control}
name='customer_id'
required
label={t("form_fields.customer_id.label")}
placeholder={t("form_fields.customer_id.placeholder")}
description={t("form_fields.customer_id.description")}
/>
</CardContent>
</Card>
{/*Items */}
<CustomerInvoiceItemsCardEditor defaultValues={defaultInvoiceData} />
<CustomerInvoiceItemsCardEditor
defaultValues={defaultInvoiceData}
className='col-span-full'
/>
{/* Items */}
<Card>

12
modules/customers/src/web/components/client-selector.tsx
View File

@ -128,8 +128,8 @@ export const ClientSelector = () => {
return (
<div className='w-full max-w-md space-y-4'>
<div className='space-y-2'>
<Label>Cliente</Label>
<div className='space-y-0'>
<Label className='m-0'>Cliente</Label>
<Button
variant='outline'
className='w-full justify-start bg-transparent'
@ -143,13 +143,17 @@ export const ClientSelector = () => {
</Button>
</div>
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandDialog
open={open}
onOpenChange={setOpen}
className='[&>div]:max-w-3xl [&>div]:max-h-[80vh] [&>div]:w-full'
>
<CommandInput
placeholder='Buscar cliente por nombre, email o empresa...'
value={searchValue}
onValueChange={setSearchValue}
/>
<CommandList>
<CommandList className='max-w-screen'>
<CommandEmpty>
<div className='p-6 text-center'>
<User className='h-12 w-12 mx-auto text-muted-foreground mb-4' />

2
packages/rdx-ui/src/components/form/DatePickerField.tsx
View File

@ -52,7 +52,7 @@ export function DatePickerField<TFormValues extends FieldValues>({
control={control}
name={name}
render={({ field }) => (
<FormItem className={cn("space-y-2", className)}>
<FormItem className={cn("space-y-0", className)}>
{label && (
<div className='flex justify-between items-center'>
<FormLabel className='m-0'>{label}</FormLabel>

2
packages/rdx-ui/src/components/form/DatePickerInputField.tsx
View File

@ -81,7 +81,7 @@ export function DatePickerInputField<TFormValues extends FieldValues>({
};
return (
<FormItem className={cn("space-y-2", className)}>
<FormItem className={cn("space-y-0", className)}>
<div className='flex justify-between items-center'>
<FormLabel className='m-0'>{label}</FormLabel>
{required && <span className='text-xs text-destructive'>{t("common.required")}</span>}

2
packages/rdx-ui/src/components/form/NumberField.tsx
View File

@ -44,7 +44,7 @@ export function NumberField<TFormValues extends FieldValues>({
control={control}
name={name}
render={({ field }) => (
<FormItem className={cn("space-y-2", className)}>
<FormItem className={cn("space-y-0", className)}>
<div className='flex justify-between items-center'>
<FormLabel className='m-0'>{label}</FormLabel>
{required && <span className='text-xs text-destructive'>{t("common.required")}</span>}

2
packages/rdx-ui/src/components/form/TextAreaField.tsx
View File

@ -44,7 +44,7 @@ export function TextAreaField<TFormValues extends FieldValues>({
control={control}
name={name}
render={({ field }) => (
<FormItem className={cn("space-y-2", className)}>
<FormItem className={cn("space-y-0", className)}>
{label && (
<div className='flex justify-between items-center'>
<FormLabel className='m-0'>{label}</FormLabel>

2
packages/rdx-ui/src/components/form/TextField.tsx
View File

@ -44,7 +44,7 @@ export function TextField<TFormValues extends FieldValues>({
control={control}
name={name}
render={({ field }) => (
<FormItem className={cn("space-y-2", className)}>
<FormItem className={cn("space-y-0", className)}>
{label && (
<div className='flex justify-between items-center'>
<FormLabel className='m-0'>{label}</FormLabel>

107
packages/shadcn-ui/src/components/command.tsx
View File

@ -1,32 +1,29 @@
"use client"
"use client";
import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
import { SearchIcon } from "lucide-react"
import { Command as CommandPrimitive } from "cmdk";
import { SearchIcon } from "lucide-react";
import * as React from "react";
import { cn } from "@repo/shadcn-ui/lib/utils"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@repo/shadcn-ui/components/dialog"
} from "@repo/shadcn-ui/components/dialog";
import { cn } from "@repo/shadcn-ui/lib/utils";
function Command({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive>) {
function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
return (
<CommandPrimitive
data-slot="command"
data-slot='command'
className={cn(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
className
)}
{...props}
/>
)
);
}
function CommandDialog({
@ -35,22 +32,22 @@ function CommandDialog({
children,
...props
}: React.ComponentProps<typeof Dialog> & {
title?: string
description?: string
title?: string;
description?: string;
}) {
return (
<Dialog {...props}>
<DialogHeader className="sr-only">
<DialogHeader className='sr-only'>
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<DialogContent className="overflow-hidden p-0">
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
<DialogContent className='overflow-hidden p-0'>
<Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
{children}
</Command>
</DialogContent>
</Dialog>
)
);
}
function CommandInput({
@ -58,13 +55,10 @@ function CommandInput({
...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
return (
<div
data-slot="command-input-wrapper"
className="flex h-9 items-center gap-2 border-b px-3"
>
<SearchIcon className="size-4 shrink-0 opacity-50" />
<div data-slot='command-input-wrapper' className='flex h-9 items-center gap-2 border-b px-3'>
<SearchIcon className='size-4 shrink-0 opacity-50' />
<CommandPrimitive.Input
data-slot="command-input"
data-slot='command-input'
className={cn(
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
className
@ -72,35 +66,27 @@ function CommandInput({
{...props}
/>
</div>
)
);
}
function CommandList({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
return (
<CommandPrimitive.List
data-slot="command-list"
className={cn(
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
className
)}
data-slot='command-list'
className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
{...props}
/>
)
);
}
function CommandEmpty({
...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
return (
<CommandPrimitive.Empty
data-slot="command-empty"
className="py-6 text-center text-sm"
data-slot='command-empty'
className='py-6 text-center text-sm'
{...props}
/>
)
);
}
function CommandGroup({
@ -109,14 +95,14 @@ function CommandGroup({
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
return (
<CommandPrimitive.Group
data-slot="command-group"
data-slot='command-group'
className={cn(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
className
)}
{...props}
/>
)
);
}
function CommandSeparator({
@ -125,53 +111,44 @@ function CommandSeparator({
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
return (
<CommandPrimitive.Separator
data-slot="command-separator"
data-slot='command-separator'
className={cn("bg-border -mx-1 h-px", className)}
{...props}
/>
)
);
}
function CommandItem({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
return (
<CommandPrimitive.Item
data-slot="command-item"
data-slot='command-item'
className={cn(
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
);
}
function CommandShortcut({
className,
...props
}: React.ComponentProps<"span">) {
function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
data-slot="command-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
data-slot='command-shortcut'
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
{...props}
/>
)
);
}
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandShortcut,
CommandList,
CommandSeparator,
}
CommandShortcut,
};