36ba16e2a2
Sales Orders: - SalesOrderCreatePage: Full form with line items, validation - SalesOrderDetailPage: View with status-based actions - SalesOrderEditPage: Edit draft orders with line item management Quotations: - QuotationCreatePage: Full form with line items - QuotationDetailPage: View with send/accept/reject/convert actions - QuotationEditPage: Edit draft quotations Components: - SalesOrderForm, SalesOrderLineItems, SalesOrderLineItemForm - SalesOrderSummary, SalesOrderStatusBadge - QuotationStatusBadge, QuotationActions Routes configured for: - /sales/orders, /sales/orders/new, /sales/orders/:id, /sales/orders/:id/edit - /sales/quotations, /sales/quotations/new, /sales/quotations/:id, /sales/quotations/:id/edit Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
639 lines
23 KiB
TypeScript
639 lines
23 KiB
TypeScript
import { useState, useCallback } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useForm, useFieldArray, Controller } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import {
|
|
ArrowLeft,
|
|
Plus,
|
|
Trash2,
|
|
FileText,
|
|
Package,
|
|
Calculator,
|
|
} from 'lucide-react';
|
|
import { Button } from '@components/atoms/Button';
|
|
import { Input } from '@components/atoms/Input';
|
|
import { Label } from '@components/atoms/Label';
|
|
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@components/molecules/Card';
|
|
import { Alert } from '@components/molecules/Alert';
|
|
import { Select, type SelectOption } from '@components/organisms/Select';
|
|
import { Breadcrumbs } from '@components/organisms/Breadcrumbs';
|
|
import { useToast } from '@components/organisms/Toast';
|
|
import { useQuotations } from '@features/sales/hooks';
|
|
import { useCustomers } from '@features/partners/hooks';
|
|
import { useCompanyStore } from '@stores/useCompanyStore';
|
|
import { formatNumber } from '@utils/formatters';
|
|
|
|
// ==================== Types ====================
|
|
|
|
interface LineItem {
|
|
id: string;
|
|
productId: string;
|
|
productName: string;
|
|
description: string;
|
|
quantity: number;
|
|
uomId: string;
|
|
uomName: string;
|
|
priceUnit: number;
|
|
discount: number;
|
|
taxRate: number;
|
|
}
|
|
|
|
// ==================== Validation Schema ====================
|
|
|
|
const lineItemSchema = z.object({
|
|
id: z.string(),
|
|
productId: z.string().min(1, 'Producto requerido'),
|
|
productName: z.string(),
|
|
description: z.string(),
|
|
quantity: z.number().min(0.01, 'Cantidad debe ser mayor a 0'),
|
|
uomId: z.string().min(1, 'Unidad requerida'),
|
|
uomName: z.string(),
|
|
priceUnit: z.number().min(0, 'Precio no puede ser negativo'),
|
|
discount: z.number().min(0).max(100, 'Descuento debe estar entre 0 y 100'),
|
|
taxRate: z.number().min(0).max(100),
|
|
});
|
|
|
|
const quotationSchema = z.object({
|
|
partnerId: z.string().min(1, 'Cliente es requerido'),
|
|
quotationDate: z.string().min(1, 'Fecha de cotizacion requerida'),
|
|
validityDate: z.string().optional(),
|
|
currencyId: z.string().min(1, 'Moneda requerida'),
|
|
notes: z.string().optional(),
|
|
termsConditions: z.string().optional(),
|
|
lines: z.array(lineItemSchema).min(1, 'Debe agregar al menos un producto'),
|
|
});
|
|
|
|
type QuotationFormData = z.infer<typeof quotationSchema>;
|
|
|
|
// ==================== Helpers ====================
|
|
|
|
const generateTempId = () => `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
|
|
const formatCurrency = (value: number): string => {
|
|
return formatNumber(value, 'es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
};
|
|
|
|
// Mock products for demo (should come from products API)
|
|
const mockProducts: SelectOption[] = [
|
|
{ value: 'prod-001', label: 'Producto A - SKU001' },
|
|
{ value: 'prod-002', label: 'Producto B - SKU002' },
|
|
{ value: 'prod-003', label: 'Producto C - SKU003' },
|
|
{ value: 'prod-004', label: 'Servicio Premium' },
|
|
{ value: 'prod-005', label: 'Licencia Software Anual' },
|
|
];
|
|
|
|
// Mock UOMs (should come from UOM API)
|
|
const mockUoms: SelectOption[] = [
|
|
{ value: 'uom-001', label: 'Unidad' },
|
|
{ value: 'uom-002', label: 'Kg' },
|
|
{ value: 'uom-003', label: 'Litro' },
|
|
{ value: 'uom-004', label: 'Hora' },
|
|
{ value: 'uom-005', label: 'Caja' },
|
|
];
|
|
|
|
// Mock currencies (should come from currency API)
|
|
const mockCurrencies: SelectOption[] = [
|
|
{ value: 'curr-001', label: 'MXN - Peso Mexicano' },
|
|
{ value: 'curr-002', label: 'USD - Dolar Estadounidense' },
|
|
{ value: 'curr-003', label: 'EUR - Euro' },
|
|
];
|
|
|
|
// Default tax rate (16% IVA for Mexico)
|
|
const DEFAULT_TAX_RATE = 16;
|
|
|
|
// ==================== Component ====================
|
|
|
|
export function QuotationCreatePage() {
|
|
const navigate = useNavigate();
|
|
const { showToast } = useToast();
|
|
const { currentCompany } = useCompanyStore();
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// API hooks
|
|
const { createQuotation } = useQuotations({ autoFetch: false });
|
|
const { partners: customers, isLoading: loadingCustomers } = useCustomers({ limit: 100 });
|
|
|
|
// Calculate default validity date (30 days from now)
|
|
const defaultValidityDate = new Date();
|
|
defaultValidityDate.setDate(defaultValidityDate.getDate() + 30);
|
|
|
|
// Form setup
|
|
const {
|
|
register,
|
|
control,
|
|
handleSubmit,
|
|
watch,
|
|
setValue,
|
|
formState: { errors },
|
|
} = useForm<QuotationFormData>({
|
|
resolver: zodResolver(quotationSchema),
|
|
defaultValues: {
|
|
partnerId: '',
|
|
quotationDate: new Date().toISOString().split('T')[0],
|
|
validityDate: defaultValidityDate.toISOString().split('T')[0],
|
|
currencyId: 'curr-001',
|
|
notes: '',
|
|
termsConditions: '',
|
|
lines: [],
|
|
},
|
|
});
|
|
|
|
const { fields, append, remove } = useFieldArray({
|
|
control,
|
|
name: 'lines',
|
|
});
|
|
|
|
// Watch for calculations
|
|
const watchLines = watch('lines');
|
|
|
|
// Calculate totals
|
|
const calculateLineTotals = useCallback((line: LineItem) => {
|
|
const subtotal = line.quantity * line.priceUnit;
|
|
const discountAmt = subtotal * (line.discount / 100);
|
|
const afterDiscount = subtotal - discountAmt;
|
|
const taxAmt = afterDiscount * (line.taxRate / 100);
|
|
const total = afterDiscount + taxAmt;
|
|
return { subtotal, discountAmt, afterDiscount, taxAmt, total };
|
|
}, []);
|
|
|
|
const totals = watchLines.reduce(
|
|
(acc, line) => {
|
|
const lineTotals = calculateLineTotals(line);
|
|
return {
|
|
subtotal: acc.subtotal + lineTotals.subtotal,
|
|
lineDiscount: acc.lineDiscount + lineTotals.discountAmt,
|
|
taxAmount: acc.taxAmount + lineTotals.taxAmt,
|
|
lineTotal: acc.lineTotal + lineTotals.total,
|
|
};
|
|
},
|
|
{ subtotal: 0, lineDiscount: 0, taxAmount: 0, lineTotal: 0 }
|
|
);
|
|
|
|
// Build customer options
|
|
const customerOptions: SelectOption[] = customers.map((c) => ({
|
|
value: c.id,
|
|
label: c.name,
|
|
}));
|
|
|
|
// Add new line item
|
|
const handleAddLine = () => {
|
|
append({
|
|
id: generateTempId(),
|
|
productId: '',
|
|
productName: '',
|
|
description: '',
|
|
quantity: 1,
|
|
uomId: 'uom-001',
|
|
uomName: 'Unidad',
|
|
priceUnit: 0,
|
|
discount: 0,
|
|
taxRate: DEFAULT_TAX_RATE,
|
|
});
|
|
};
|
|
|
|
// Handle product selection for a line
|
|
const handleProductChange = (index: number, productId: string) => {
|
|
const product = mockProducts.find((p) => p.value === productId);
|
|
if (product) {
|
|
setValue(`lines.${index}.productId`, productId);
|
|
setValue(`lines.${index}.productName`, product.label);
|
|
setValue(`lines.${index}.description`, product.label);
|
|
// In real implementation, fetch product price from API
|
|
setValue(`lines.${index}.priceUnit`, Math.random() * 1000 + 100);
|
|
}
|
|
};
|
|
|
|
// Handle UOM selection for a line
|
|
const handleUomChange = (index: number, uomId: string) => {
|
|
const uom = mockUoms.find((u) => u.value === uomId);
|
|
if (uom) {
|
|
setValue(`lines.${index}.uomId`, uomId);
|
|
setValue(`lines.${index}.uomName`, uom.label);
|
|
}
|
|
};
|
|
|
|
// Submit handler
|
|
const onSubmit = async (data: QuotationFormData) => {
|
|
if (!currentCompany) {
|
|
setError('No hay una empresa seleccionada');
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const quotationData = {
|
|
companyId: currentCompany.id,
|
|
partnerId: data.partnerId,
|
|
quotationDate: data.quotationDate,
|
|
validityDate: data.validityDate || undefined,
|
|
currencyId: data.currencyId,
|
|
notes: data.notes || undefined,
|
|
termsConditions: data.termsConditions || undefined,
|
|
};
|
|
|
|
const newQuotation = await createQuotation(quotationData);
|
|
|
|
showToast({
|
|
type: 'success',
|
|
title: 'Cotizacion creada',
|
|
message: `La cotizacion ${newQuotation.quotationNumber} ha sido creada exitosamente.`,
|
|
});
|
|
|
|
navigate(`/sales/quotations/${newQuotation.id}`);
|
|
} catch (err) {
|
|
const message = err instanceof Error ? err.message : 'Error al crear la cotizacion';
|
|
setError(message);
|
|
showToast({
|
|
type: 'error',
|
|
title: 'Error',
|
|
message,
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<Breadcrumbs
|
|
items={[
|
|
{ label: 'Ventas', href: '/sales' },
|
|
{ label: 'Cotizaciones', href: '/sales/quotations' },
|
|
{ label: 'Nueva Cotizacion' },
|
|
]}
|
|
/>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Button variant="ghost" size="sm" onClick={() => navigate('/sales/quotations')}>
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Volver
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Crear Cotizacion</h1>
|
|
<p className="text-sm text-gray-500">
|
|
Complete los datos para crear una nueva cotizacion de venta
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
{error && (
|
|
<Alert variant="danger" title="Error" onClose={() => setError(null)}>
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
{/* Section 1: Customer Information */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<FileText className="h-5 w-5" />
|
|
Informacion del Cliente
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<div>
|
|
<Label required>Cliente</Label>
|
|
<Controller
|
|
name="partnerId"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<Select
|
|
options={customerOptions}
|
|
value={field.value}
|
|
onChange={(val) => field.onChange(val as string)}
|
|
placeholder="Seleccionar cliente..."
|
|
searchable
|
|
error={!!errors.partnerId}
|
|
disabled={loadingCustomers}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.partnerId && (
|
|
<p className="mt-1 text-sm text-danger-500">{errors.partnerId.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Section 2: Quotation Details */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Calculator className="h-5 w-5" />
|
|
Detalles de la Cotizacion
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<div>
|
|
<Label required>Fecha de Cotizacion</Label>
|
|
<Input
|
|
type="date"
|
|
{...register('quotationDate')}
|
|
error={!!errors.quotationDate}
|
|
/>
|
|
{errors.quotationDate && (
|
|
<p className="mt-1 text-sm text-danger-500">{errors.quotationDate.message}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Label>Vigencia Hasta</Label>
|
|
<Input
|
|
type="date"
|
|
{...register('validityDate')}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label required>Moneda</Label>
|
|
<Controller
|
|
name="currencyId"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<Select
|
|
options={mockCurrencies}
|
|
value={field.value}
|
|
onChange={(val) => field.onChange(val as string)}
|
|
placeholder="Seleccionar moneda..."
|
|
error={!!errors.currencyId}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.currencyId && (
|
|
<p className="mt-1 text-sm text-danger-500">{errors.currencyId.message}</p>
|
|
)}
|
|
</div>
|
|
<div className="md:col-span-2 lg:col-span-3">
|
|
<Label>Notas</Label>
|
|
<textarea
|
|
{...register('notes')}
|
|
rows={3}
|
|
className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
|
placeholder="Notas adicionales para la cotizacion..."
|
|
/>
|
|
</div>
|
|
<div className="md:col-span-2 lg:col-span-3">
|
|
<Label>Terminos y Condiciones</Label>
|
|
<textarea
|
|
{...register('termsConditions')}
|
|
rows={3}
|
|
className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
|
|
placeholder="Terminos y condiciones para el cliente..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Section 3: Line Items */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Package className="h-5 w-5" />
|
|
Lineas de la Cotizacion
|
|
</CardTitle>
|
|
<Button type="button" variant="outline" size="sm" onClick={handleAddLine}>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Agregar Producto
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{fields.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<Package className="mb-4 h-12 w-12 text-gray-300" />
|
|
<h3 className="text-lg font-medium text-gray-900">Sin productos</h3>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Agregue productos a la cotizacion usando el boton superior
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
variant="primary"
|
|
className="mt-4"
|
|
onClick={handleAddLine}
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Agregar primer producto
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{/* Desktop Table Header */}
|
|
<div className="hidden lg:grid lg:grid-cols-12 lg:gap-4 lg:border-b lg:pb-2 lg:text-sm lg:font-medium lg:text-gray-700">
|
|
<div className="col-span-3">Producto</div>
|
|
<div className="col-span-2">Descripcion</div>
|
|
<div className="col-span-1 text-right">Cant.</div>
|
|
<div className="col-span-1">Unidad</div>
|
|
<div className="col-span-1 text-right">Precio</div>
|
|
<div className="col-span-1 text-right">Dto. %</div>
|
|
<div className="col-span-1 text-right">IVA %</div>
|
|
<div className="col-span-1 text-right">Total</div>
|
|
<div className="col-span-1"></div>
|
|
</div>
|
|
|
|
{/* Line Items */}
|
|
{fields.map((field, index) => {
|
|
const line = watchLines[index];
|
|
const lineTotals = line ? calculateLineTotals(line) : { total: 0 };
|
|
|
|
return (
|
|
<div
|
|
key={field.id}
|
|
className="grid grid-cols-1 gap-4 rounded-lg border bg-gray-50 p-4 lg:grid-cols-12 lg:items-center lg:bg-transparent lg:p-0 lg:border-0"
|
|
>
|
|
{/* Product */}
|
|
<div className="lg:col-span-3">
|
|
<Label className="lg:hidden">Producto</Label>
|
|
<Controller
|
|
name={`lines.${index}.productId`}
|
|
control={control}
|
|
render={({ field: selectField }) => (
|
|
<Select
|
|
options={mockProducts}
|
|
value={selectField.value}
|
|
onChange={(val) => handleProductChange(index, val as string)}
|
|
placeholder="Buscar producto..."
|
|
searchable
|
|
error={!!errors.lines?.[index]?.productId}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.lines?.[index]?.productId && (
|
|
<p className="mt-1 text-xs text-danger-500">
|
|
{errors.lines[index]?.productId?.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="lg:col-span-2">
|
|
<Label className="lg:hidden">Descripcion</Label>
|
|
<Input
|
|
{...register(`lines.${index}.description`)}
|
|
placeholder="Descripcion"
|
|
inputSize="sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Quantity */}
|
|
<div className="lg:col-span-1">
|
|
<Label className="lg:hidden">Cantidad</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
min="0.01"
|
|
{...register(`lines.${index}.quantity`, { valueAsNumber: true })}
|
|
className="text-right"
|
|
inputSize="sm"
|
|
error={!!errors.lines?.[index]?.quantity}
|
|
/>
|
|
</div>
|
|
|
|
{/* UOM */}
|
|
<div className="lg:col-span-1">
|
|
<Label className="lg:hidden">Unidad</Label>
|
|
<Controller
|
|
name={`lines.${index}.uomId`}
|
|
control={control}
|
|
render={({ field: selectField }) => (
|
|
<Select
|
|
options={mockUoms}
|
|
value={selectField.value}
|
|
onChange={(val) => handleUomChange(index, val as string)}
|
|
placeholder="UOM"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Unit Price */}
|
|
<div className="lg:col-span-1">
|
|
<Label className="lg:hidden">Precio Unitario</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
{...register(`lines.${index}.priceUnit`, { valueAsNumber: true })}
|
|
className="text-right"
|
|
inputSize="sm"
|
|
error={!!errors.lines?.[index]?.priceUnit}
|
|
/>
|
|
</div>
|
|
|
|
{/* Discount */}
|
|
<div className="lg:col-span-1">
|
|
<Label className="lg:hidden">Descuento %</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
max="100"
|
|
{...register(`lines.${index}.discount`, { valueAsNumber: true })}
|
|
className="text-right"
|
|
inputSize="sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tax Rate */}
|
|
<div className="lg:col-span-1">
|
|
<Label className="lg:hidden">IVA %</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
max="100"
|
|
{...register(`lines.${index}.taxRate`, { valueAsNumber: true })}
|
|
className="text-right"
|
|
inputSize="sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Line Total */}
|
|
<div className="lg:col-span-1 lg:text-right">
|
|
<Label className="lg:hidden">Total Linea</Label>
|
|
<div className="text-sm font-medium text-gray-900">
|
|
${formatCurrency(lineTotals.total)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Remove Button */}
|
|
<div className="lg:col-span-1 lg:text-right">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => remove(index)}
|
|
className="text-danger-600 hover:bg-danger-50 hover:text-danger-700"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{errors.lines?.root && (
|
|
<p className="text-sm text-danger-500">{errors.lines.root.message}</p>
|
|
)}
|
|
{errors.lines?.message && (
|
|
<p className="text-sm text-danger-500">{errors.lines.message}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Section 4: Summary */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Resumen de la Cotizacion</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col items-end space-y-3">
|
|
<div className="grid w-full max-w-md grid-cols-2 gap-4 text-sm">
|
|
<div className="text-gray-600">Subtotal:</div>
|
|
<div className="text-right font-medium">${formatCurrency(totals.subtotal)}</div>
|
|
|
|
<div className="text-gray-600">Descuento en lineas:</div>
|
|
<div className="text-right font-medium text-danger-600">
|
|
-${formatCurrency(totals.lineDiscount)}
|
|
</div>
|
|
|
|
<div className="text-gray-600">IVA:</div>
|
|
<div className="text-right font-medium">${formatCurrency(totals.taxAmount)}</div>
|
|
|
|
<div className="border-t-2 pt-3 text-lg font-bold text-gray-900">TOTAL:</div>
|
|
<div className="border-t-2 pt-3 text-right text-lg font-bold text-primary-600">
|
|
${formatCurrency(totals.lineTotal)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-end gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => navigate('/sales/quotations')}
|
|
disabled={isSubmitting}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="submit" isLoading={isSubmitting}>
|
|
Crear Cotizacion
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default QuotationCreatePage;
|