2nd commit
This commit is contained in:
parent
8092d60c3d
commit
91df406279
4630
package-lock.json
generated
Normal file
4630
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -35,5 +35,12 @@
|
|||||||
"typescript": "^5.9.2",
|
"typescript": "^5.9.2",
|
||||||
"typescript-eslint": "^8.44.1",
|
"typescript-eslint": "^8.44.1",
|
||||||
"vite": "^7.1.7"
|
"vite": "^7.1.7"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@types/uuid": "^10.0.0",
|
||||||
|
"jspdf": "^3.0.4",
|
||||||
|
"jspdf-autotable": "^5.0.2",
|
||||||
|
"lucide-svelte": "^0.554.0",
|
||||||
|
"uuid": "^13.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
23
src/lib/components/Button.svelte
Normal file
23
src/lib/components/Button.svelte
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let type: 'button' | 'submit' | 'reset' = 'button';
|
||||||
|
export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
|
||||||
|
export let disabled = false;
|
||||||
|
export let onClick: (() => void) | undefined = undefined;
|
||||||
|
|
||||||
|
const baseClasses = "inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
|
||||||
|
|
||||||
|
const variantClasses = {
|
||||||
|
primary: "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
|
||||||
|
secondary: "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-indigo-500",
|
||||||
|
danger: "border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500"
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
{type}
|
||||||
|
class="{baseClasses} {variantClasses[variant]} {$$props.class || ''}"
|
||||||
|
{disabled}
|
||||||
|
on:click={onClick}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</button>
|
||||||
24
src/lib/components/Input.svelte
Normal file
24
src/lib/components/Input.svelte
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let id: string;
|
||||||
|
export let label: string;
|
||||||
|
export let type: 'text' | 'email' | 'number' | 'tel' = 'text';
|
||||||
|
export let value: string | number;
|
||||||
|
export let placeholder = '';
|
||||||
|
export let required = false;
|
||||||
|
export let min: number | undefined = undefined;
|
||||||
|
export let step: number | undefined = undefined;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for={id} class="block text-sm font-medium text-gray-700 mb-1">{label}</label>
|
||||||
|
<input
|
||||||
|
{id}
|
||||||
|
{type}
|
||||||
|
bind:value
|
||||||
|
class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border"
|
||||||
|
{placeholder}
|
||||||
|
{required}
|
||||||
|
{min}
|
||||||
|
{step}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
66
src/lib/components/Navbar.svelte
Normal file
66
src/lib/components/Navbar.svelte
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav class="border-b border-gray-200 bg-white shadow-sm">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex h-16 justify-between">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex flex-shrink-0 items-center">
|
||||||
|
<a href="/" class="text-xl font-bold text-indigo-600">Cot-EZ</a>
|
||||||
|
</div>
|
||||||
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium {$page.url
|
||||||
|
.pathname === '/'
|
||||||
|
? 'border-indigo-500 text-gray-900'
|
||||||
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}"
|
||||||
|
>
|
||||||
|
Inicio
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/products"
|
||||||
|
class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium {$page.url.pathname.startsWith(
|
||||||
|
'/products'
|
||||||
|
)
|
||||||
|
? 'border-indigo-500 text-gray-900'
|
||||||
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}"
|
||||||
|
>
|
||||||
|
Productos
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/clients"
|
||||||
|
class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium {$page.url.pathname.startsWith(
|
||||||
|
'/clients'
|
||||||
|
)
|
||||||
|
? 'border-indigo-500 text-gray-900'
|
||||||
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}"
|
||||||
|
>
|
||||||
|
Clientes
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/quotations"
|
||||||
|
class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium {$page.url.pathname.startsWith(
|
||||||
|
'/quotations'
|
||||||
|
)
|
||||||
|
? 'border-indigo-500 text-gray-900'
|
||||||
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}"
|
||||||
|
>
|
||||||
|
Cotizaciones
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/settings"
|
||||||
|
class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium {$page.url.pathname.startsWith(
|
||||||
|
'/settings'
|
||||||
|
)
|
||||||
|
? 'border-indigo-500 text-gray-900'
|
||||||
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}"
|
||||||
|
>
|
||||||
|
Configuración
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
92
src/lib/pdf.ts
Normal file
92
src/lib/pdf.ts
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
import jsPDF from 'jspdf';
|
||||||
|
import autoTable from 'jspdf-autotable';
|
||||||
|
import type { Quotation, Client, CompanyInfo } from './stores';
|
||||||
|
import { get } from 'svelte/store';
|
||||||
|
import { companyInfo } from './stores';
|
||||||
|
|
||||||
|
export function generateQuotationPDF(quotation: Quotation, client: Client | undefined) {
|
||||||
|
const doc = new jsPDF();
|
||||||
|
const company = get(companyInfo);
|
||||||
|
|
||||||
|
// Company Header
|
||||||
|
doc.setFontSize(22);
|
||||||
|
doc.setTextColor(79, 70, 229); // Indigo 600
|
||||||
|
doc.text(company.name, 14, 20);
|
||||||
|
|
||||||
|
doc.setFontSize(10);
|
||||||
|
doc.setTextColor(100);
|
||||||
|
let yPos = 26;
|
||||||
|
if (company.address) { doc.text(company.address, 14, yPos); yPos += 5; }
|
||||||
|
if (company.phone) { doc.text(`Tel: ${company.phone}`, 14, yPos); yPos += 5; }
|
||||||
|
if (company.email) { doc.text(`Email: ${company.email}`, 14, yPos); yPos += 5; }
|
||||||
|
if (company.headerText) {
|
||||||
|
doc.setFontSize(9);
|
||||||
|
doc.text(company.headerText, 14, yPos + 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Quotation Title & Info (Right aligned)
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.setTextColor(0);
|
||||||
|
doc.text('COTIZACIÓN', 140, 22);
|
||||||
|
|
||||||
|
doc.setFontSize(10);
|
||||||
|
doc.text(`Fecha: ${new Date(quotation.date).toLocaleDateString()}`, 140, 30);
|
||||||
|
doc.text(`ID: ${quotation.id.slice(0, 8)}`, 140, 35);
|
||||||
|
|
||||||
|
// Client Info
|
||||||
|
if (client) {
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.setTextColor(0);
|
||||||
|
doc.text('Cliente:', 14, 60);
|
||||||
|
doc.setFontSize(11);
|
||||||
|
doc.text(client.name, 14, 66);
|
||||||
|
doc.setFontSize(10);
|
||||||
|
doc.setTextColor(100);
|
||||||
|
doc.text(client.email, 14, 71);
|
||||||
|
if (client.phone) doc.text(client.phone, 14, 76);
|
||||||
|
if (client.address) doc.text(client.address, 14, 81);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table
|
||||||
|
const tableColumn = ["Producto", "Cantidad", "Precio Unit.", "Total"];
|
||||||
|
const tableRows = [];
|
||||||
|
|
||||||
|
quotation.items.forEach(item => {
|
||||||
|
const itemData = [
|
||||||
|
item.productName,
|
||||||
|
item.quantity,
|
||||||
|
`$${item.price.toFixed(2)}`,
|
||||||
|
`$${(item.price * item.quantity).toFixed(2)}`
|
||||||
|
];
|
||||||
|
tableRows.push(itemData);
|
||||||
|
});
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
autoTable(doc, {
|
||||||
|
head: [tableColumn],
|
||||||
|
body: tableRows,
|
||||||
|
startY: 90,
|
||||||
|
headStyles: { fillColor: [79, 70, 229] }, // Indigo 600
|
||||||
|
theme: 'grid'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Total
|
||||||
|
// @ts-ignore
|
||||||
|
const finalY = doc.lastAutoTable.finalY || 90;
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.setTextColor(0);
|
||||||
|
doc.text(`Total: $${quotation.total.toFixed(2)}`, 180, finalY + 10, { align: 'right' });
|
||||||
|
|
||||||
|
// Footer Notes
|
||||||
|
if (quotation.footer) {
|
||||||
|
doc.setFontSize(10);
|
||||||
|
doc.setTextColor(100);
|
||||||
|
doc.text('Notas:', 14, finalY + 20);
|
||||||
|
doc.setFontSize(9);
|
||||||
|
const splitFooter = doc.splitTextToSize(quotation.footer, 180);
|
||||||
|
doc.text(splitFooter, 14, finalY + 25);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save
|
||||||
|
doc.save(`cotizacion_${quotation.id.slice(0, 8)}.pdf`);
|
||||||
|
}
|
||||||
83
src/lib/stores.ts
Normal file
83
src/lib/stores.ts
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { browser } from '$app/environment';
|
||||||
|
|
||||||
|
export interface Product {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
price: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Client {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
address: string;
|
||||||
|
phone: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface QuotationItem {
|
||||||
|
productId: string;
|
||||||
|
productName: string;
|
||||||
|
quantity: number;
|
||||||
|
price: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Quotation {
|
||||||
|
id: string;
|
||||||
|
clientId: string;
|
||||||
|
clientName: string;
|
||||||
|
date: string;
|
||||||
|
items: QuotationItem[];
|
||||||
|
total: number;
|
||||||
|
footer?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CompanyInfo {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
phone: string;
|
||||||
|
address: string;
|
||||||
|
headerText: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createPersistentStore<T>(key: string, startValue: T) {
|
||||||
|
const { subscribe, set, update } = writable<T>(startValue, (set) => {
|
||||||
|
if (browser) {
|
||||||
|
const storedValue = localStorage.getItem(key);
|
||||||
|
if (storedValue) {
|
||||||
|
set(JSON.parse(storedValue));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
set: (n: T) => {
|
||||||
|
if (browser) {
|
||||||
|
localStorage.setItem(key, JSON.stringify(n));
|
||||||
|
}
|
||||||
|
set(n);
|
||||||
|
},
|
||||||
|
update: (cb: (value: T) => T) => {
|
||||||
|
update((n) => {
|
||||||
|
const newValue = cb(n);
|
||||||
|
if (browser) {
|
||||||
|
localStorage.setItem(key, JSON.stringify(newValue));
|
||||||
|
}
|
||||||
|
return newValue;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const products = createPersistentStore<Product[]>('products', []);
|
||||||
|
export const clients = createPersistentStore<Client[]>('clients', []);
|
||||||
|
export const quotations = createPersistentStore<Quotation[]>('quotations', []);
|
||||||
|
export const companyInfo = createPersistentStore<CompanyInfo>('companyInfo', {
|
||||||
|
name: 'Mi Empresa',
|
||||||
|
email: 'contacto@miempresa.com',
|
||||||
|
phone: '',
|
||||||
|
address: '',
|
||||||
|
headerText: ''
|
||||||
|
});
|
||||||
@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
import Navbar from '$lib/components/Navbar.svelte';
|
||||||
import favicon from '$lib/assets/favicon.svg';
|
import favicon from '$lib/assets/favicon.svg';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|||||||
@ -1,2 +1,47 @@
|
|||||||
<h1>Welcome to SvelteKit</h1>
|
<script lang="ts">
|
||||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
import { products, clients, quotations } from '$lib/stores';
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="px-4 py-6 sm:px-0">
|
||||||
|
<div class="mb-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
|
||||||
|
<!-- Stats Cards -->
|
||||||
|
<div class="overflow-hidden rounded-lg bg-white shadow">
|
||||||
|
<div class="px-4 py-5 sm:p-6">
|
||||||
|
<dt class="truncate text-sm font-medium text-gray-500">Total Productos</dt>
|
||||||
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">{$products.length}</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-hidden rounded-lg bg-white shadow">
|
||||||
|
<div class="px-4 py-5 sm:p-6">
|
||||||
|
<dt class="truncate text-sm font-medium text-gray-500">Total Clientes</dt>
|
||||||
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">{$clients.length}</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-hidden rounded-lg bg-white shadow">
|
||||||
|
<div class="px-4 py-5 sm:p-6">
|
||||||
|
<dt class="truncate text-sm font-medium text-gray-500">Total Cotizaciones</dt>
|
||||||
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">{$quotations.length}</dd>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white shadow sm:rounded-lg">
|
||||||
|
<div class="px-4 py-5 sm:p-6">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Acciones Rápidas</h3>
|
||||||
|
<div class="mt-5 flex flex-wrap gap-4">
|
||||||
|
<a href="/quotations/new">
|
||||||
|
<Button>Nueva Cotización</Button>
|
||||||
|
</a>
|
||||||
|
<a href="/products">
|
||||||
|
<Button variant="secondary">Gestionar Productos</Button>
|
||||||
|
</a>
|
||||||
|
<a href="/clients">
|
||||||
|
<Button variant="secondary">Gestionar Clientes</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
115
src/routes/clients/+page.svelte
Normal file
115
src/routes/clients/+page.svelte
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { clients } from '$lib/stores';
|
||||||
|
import type { Client } from '$lib/stores';
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
import Input from '$lib/components/Input.svelte';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
|
||||||
|
let name = '';
|
||||||
|
let email = '';
|
||||||
|
let address = '';
|
||||||
|
let phone = '';
|
||||||
|
let isEditing = false;
|
||||||
|
let editId = '';
|
||||||
|
|
||||||
|
function handleSubmit() {
|
||||||
|
if (isEditing) {
|
||||||
|
clients.update((items) =>
|
||||||
|
items.map((c) => (c.id === editId ? { ...c, name, email, address, phone } : c))
|
||||||
|
);
|
||||||
|
isEditing = false;
|
||||||
|
editId = '';
|
||||||
|
} else {
|
||||||
|
const newClient: Client = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
name,
|
||||||
|
email,
|
||||||
|
address,
|
||||||
|
phone
|
||||||
|
};
|
||||||
|
clients.update((items) => [...items, newClient]);
|
||||||
|
}
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
function editClient(client: Client) {
|
||||||
|
name = client.name;
|
||||||
|
email = client.email;
|
||||||
|
address = client.address;
|
||||||
|
phone = client.phone;
|
||||||
|
isEditing = true;
|
||||||
|
editId = client.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteClient(id: string) {
|
||||||
|
if (confirm('¿Estás seguro de que quieres eliminar este cliente?')) {
|
||||||
|
clients.update((items) => items.filter((c) => c.id !== id));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetForm() {
|
||||||
|
name = '';
|
||||||
|
email = '';
|
||||||
|
address = '';
|
||||||
|
phone = '';
|
||||||
|
isEditing = false;
|
||||||
|
editId = '';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="text-2xl leading-7 font-bold text-gray-900 sm:truncate sm:text-3xl">Clientes</h2>
|
||||||
|
<a href="/">
|
||||||
|
<Button variant="secondary">Volver al Inicio</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Información del Cliente</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Añade o edita clientes para tus cotizaciones.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:col-span-2 md:mt-0">
|
||||||
|
<form on:submit|preventDefault={handleSubmit}>
|
||||||
|
<Input id="name" label="Nombre del Cliente" bind:value={name} required />
|
||||||
|
<Input id="email" label="Email" type="email" bind:value={email} required />
|
||||||
|
<Input id="phone" label="Teléfono" type="tel" bind:value={phone} />
|
||||||
|
<Input id="address" label="Dirección" bind:value={address} />
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-2">
|
||||||
|
{#if isEditing}
|
||||||
|
<Button variant="secondary" onClick={resetForm}>Cancelar</Button>
|
||||||
|
{/if}
|
||||||
|
<Button type="submit">{isEditing ? 'Actualizar' : 'Añadir'} Cliente</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-hidden bg-white shadow sm:rounded-md">
|
||||||
|
<ul role="list" class="divide-y divide-gray-200">
|
||||||
|
{#each $clients as client (client.id)}
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center justify-between px-4 py-4 sm:px-6">
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<h4 class="truncate text-lg font-bold text-indigo-600">{client.name}</h4>
|
||||||
|
<p class="text-sm text-gray-500">{client.email} • {client.phone}</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">{client.address}</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<Button variant="secondary" onClick={() => editClient(client)}>Editar</Button>
|
||||||
|
<Button variant="danger" onClick={() => deleteClient(client.id)}>Eliminar</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li class="px-4 py-4 sm:px-6 text-center text-gray-500">
|
||||||
|
No se encontraron clientes. ¡Añade uno arriba!
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
118
src/routes/products/+page.svelte
Normal file
118
src/routes/products/+page.svelte
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { products } from '$lib/stores';
|
||||||
|
import type { Product } from '$lib/stores';
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
import Input from '$lib/components/Input.svelte';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
|
||||||
|
let name = '';
|
||||||
|
let description = '';
|
||||||
|
let price = 0;
|
||||||
|
let isEditing = false;
|
||||||
|
let editId = '';
|
||||||
|
|
||||||
|
function handleSubmit() {
|
||||||
|
if (isEditing) {
|
||||||
|
products.update((items) =>
|
||||||
|
items.map((p) => (p.id === editId ? { ...p, name, description, price } : p))
|
||||||
|
);
|
||||||
|
isEditing = false;
|
||||||
|
editId = '';
|
||||||
|
} else {
|
||||||
|
const newProduct: Product = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
price
|
||||||
|
};
|
||||||
|
products.update((items) => [...items, newProduct]);
|
||||||
|
}
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
function editProduct(product: Product) {
|
||||||
|
name = product.name;
|
||||||
|
description = product.description;
|
||||||
|
price = product.price;
|
||||||
|
isEditing = true;
|
||||||
|
editId = product.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteProduct(id: string) {
|
||||||
|
if (confirm('¿Estás seguro de que quieres eliminar este producto?')) {
|
||||||
|
products.update((items) => items.filter((p) => p.id !== id));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetForm() {
|
||||||
|
name = '';
|
||||||
|
description = '';
|
||||||
|
price = 0;
|
||||||
|
isEditing = false;
|
||||||
|
editId = '';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="text-2xl leading-7 font-bold text-gray-900 sm:truncate sm:text-3xl">Productos</h2>
|
||||||
|
<a href="/">
|
||||||
|
<Button variant="secondary">Volver al Inicio</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Información del Producto</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Añade o edita productos para tus cotizaciones.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:col-span-2 md:mt-0">
|
||||||
|
<form on:submit|preventDefault={handleSubmit}>
|
||||||
|
<Input id="name" label="Nombre del Producto" bind:value={name} required />
|
||||||
|
<Input id="description" label="Descripción" bind:value={description} />
|
||||||
|
<Input
|
||||||
|
id="price"
|
||||||
|
label="Precio"
|
||||||
|
type="number"
|
||||||
|
bind:value={price}
|
||||||
|
min={0}
|
||||||
|
step={0.01}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-2">
|
||||||
|
{#if isEditing}
|
||||||
|
<Button variant="secondary" onClick={resetForm}>Cancelar</Button>
|
||||||
|
{/if}
|
||||||
|
<Button type="submit">{isEditing ? 'Actualizar' : 'Añadir'} Producto</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-hidden bg-white shadow sm:rounded-md">
|
||||||
|
<ul role="list" class="divide-y divide-gray-200">
|
||||||
|
{#each $products as product (product.id)}
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center justify-between px-4 py-4 sm:px-6">
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<h4 class="truncate text-lg font-bold text-indigo-600">{product.name}</h4>
|
||||||
|
<p class="text-sm text-gray-500">{product.description}</p>
|
||||||
|
<p class="mt-1 text-sm font-medium text-gray-900">${product.price.toFixed(2)}</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<Button variant="secondary" onClick={() => editProduct(product)}>Editar</Button>
|
||||||
|
<Button variant="danger" onClick={() => deleteProduct(product.id)}>Eliminar</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li class="px-4 py-4 sm:px-6 text-center text-gray-500">
|
||||||
|
No se encontraron productos. ¡Añade uno arriba!
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
57
src/routes/quotations/+page.svelte
Normal file
57
src/routes/quotations/+page.svelte
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { quotations } from '$lib/stores';
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="text-2xl leading-7 font-bold text-gray-900 sm:truncate sm:text-3xl">Cotizaciones</h2>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<a href="/">
|
||||||
|
<Button variant="secondary">Volver al Inicio</Button>
|
||||||
|
</a>
|
||||||
|
<a href="/quotations/new">
|
||||||
|
<Button>Nueva Cotización</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-hidden bg-white shadow sm:rounded-md">
|
||||||
|
<ul role="list" class="divide-y divide-gray-200">
|
||||||
|
{#each $quotations as quotation (quotation.id)}
|
||||||
|
<li>
|
||||||
|
<a href="/quotations/{quotation.id}" class="block hover:bg-gray-50">
|
||||||
|
<div class="px-4 py-4 sm:px-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<p class="truncate text-sm font-medium text-indigo-600">
|
||||||
|
{quotation.clientName}
|
||||||
|
</p>
|
||||||
|
<div class="ml-2 flex flex-shrink-0">
|
||||||
|
<p
|
||||||
|
class="inline-flex rounded-full bg-green-100 px-2 text-xs leading-5 font-semibold text-green-800"
|
||||||
|
>
|
||||||
|
${quotation.total.toFixed(2)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 sm:flex sm:justify-between">
|
||||||
|
<div class="sm:flex">
|
||||||
|
<p class="flex items-center text-sm text-gray-500">
|
||||||
|
{new Date(quotation.date).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
|
||||||
|
<p>Ver Detalles →</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li class="px-4 py-4 sm:px-6 text-center text-gray-500">
|
||||||
|
No se encontraron cotizaciones. ¡Crea una!
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
92
src/routes/quotations/[id]/+page.svelte
Normal file
92
src/routes/quotations/[id]/+page.svelte
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { quotations, clients } from '$lib/stores';
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
import { generateQuotationPDF } from '$lib/pdf';
|
||||||
|
|
||||||
|
$: quotation = $quotations.find((q) => q.id === $page.params.id);
|
||||||
|
$: client = quotation ? $clients.find((c) => c.id === quotation!.clientId) : undefined;
|
||||||
|
|
||||||
|
function downloadPDF() {
|
||||||
|
if (quotation) {
|
||||||
|
generateQuotationPDF(quotation, client);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
{#if quotation}
|
||||||
|
<div class="overflow-hidden bg-white shadow sm:rounded-lg">
|
||||||
|
<div class="flex items-center justify-between px-4 py-5 sm:px-6">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Detalles de la Cotización</h3>
|
||||||
|
<p class="mt-1 max-w-2xl text-sm text-gray-500">ID: {quotation.id}</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<a href="/quotations">
|
||||||
|
<Button variant="secondary">Volver</Button>
|
||||||
|
</a>
|
||||||
|
<Button onClick={downloadPDF}>Descargar PDF</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 px-4 py-5 sm:p-0">
|
||||||
|
<dl class="sm:divide-y sm:divide-gray-200">
|
||||||
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
||||||
|
<dt class="text-sm font-medium text-gray-500">Cliente</dt>
|
||||||
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">{quotation.clientName}</dd>
|
||||||
|
</div>
|
||||||
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
||||||
|
<dt class="text-sm font-medium text-gray-500">Fecha</dt>
|
||||||
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||||
|
{new Date(quotation.date).toLocaleDateString()}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
||||||
|
<dt class="text-sm font-medium text-gray-500">Monto Total</dt>
|
||||||
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||||
|
${quotation.total.toFixed(2)}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{#if quotation.footer}
|
||||||
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
||||||
|
<dt class="text-sm font-medium text-gray-500">Notas</dt>
|
||||||
|
<dd class="mt-1 text-sm whitespace-pre-wrap text-gray-900 sm:col-span-2 sm:mt-0">
|
||||||
|
{quotation.footer}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
||||||
|
<dt class="text-sm font-medium text-gray-500">Ítems</dt>
|
||||||
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||||
|
<ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
|
||||||
|
{#each quotation.items as item}
|
||||||
|
<li class="flex items-center justify-between py-3 pr-4 pl-3 text-sm">
|
||||||
|
<div class="flex w-0 flex-1 items-center">
|
||||||
|
<span class="ml-2 w-0 flex-1 truncate"
|
||||||
|
>{item.productName} (x{item.quantity})</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex-shrink-0">
|
||||||
|
<span class="font-medium text-gray-900"
|
||||||
|
>${(item.price * item.quantity).toFixed(2)}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="py-12 text-center">
|
||||||
|
<h3 class="mt-2 text-sm font-medium text-gray-900">Cotización no encontrada</h3>
|
||||||
|
<div class="mt-6">
|
||||||
|
<a href="/quotations">
|
||||||
|
<Button>Volver a Cotizaciones</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
232
src/routes/quotations/new/+page.svelte
Normal file
232
src/routes/quotations/new/+page.svelte
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { products, clients, quotations } from '$lib/stores';
|
||||||
|
import type { Product, Client, Quotation, QuotationItem } from '$lib/stores';
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
import Input from '$lib/components/Input.svelte';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
let selectedClientId = '';
|
||||||
|
let selectedProductId = '';
|
||||||
|
let quantity = 1;
|
||||||
|
let items: QuotationItem[] = [];
|
||||||
|
let footer = '';
|
||||||
|
let productSearch = '';
|
||||||
|
|
||||||
|
$: selectedClient = $clients.find((c) => c.id === selectedClientId);
|
||||||
|
$: filteredProducts = $products.filter((p) =>
|
||||||
|
p.name.toLowerCase().includes(productSearch.toLowerCase())
|
||||||
|
);
|
||||||
|
$: selectedProduct = $products.find((p) => p.id === selectedProductId);
|
||||||
|
$: total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||||
|
|
||||||
|
function addItem() {
|
||||||
|
if (selectedProduct && quantity > 0) {
|
||||||
|
const existingItem = items.find((i) => i.productId === selectedProduct!.id);
|
||||||
|
if (existingItem) {
|
||||||
|
items = items.map((i) =>
|
||||||
|
i.productId === selectedProduct!.id ? { ...i, quantity: i.quantity + quantity } : i
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
items = [
|
||||||
|
...items,
|
||||||
|
{
|
||||||
|
productId: selectedProduct.id,
|
||||||
|
productName: selectedProduct.name,
|
||||||
|
quantity,
|
||||||
|
price: selectedProduct.price
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
selectedProductId = '';
|
||||||
|
quantity = 1;
|
||||||
|
productSearch = ''; // Reset search after adding
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeItem(productId: string) {
|
||||||
|
items = items.filter((i) => i.productId !== productId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveQuotation() {
|
||||||
|
if (selectedClient && items.length > 0) {
|
||||||
|
const newQuotation: Quotation = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
clientId: selectedClient.id,
|
||||||
|
clientName: selectedClient.name,
|
||||||
|
date: new Date().toISOString(),
|
||||||
|
items,
|
||||||
|
total,
|
||||||
|
footer
|
||||||
|
};
|
||||||
|
quotations.update((q) => [...q, newQuotation]);
|
||||||
|
goto(`/quotations/${newQuotation.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="text-2xl leading-7 font-bold text-gray-900 sm:truncate sm:text-3xl">
|
||||||
|
Nueva Cotización
|
||||||
|
</h2>
|
||||||
|
<a href="/quotations">
|
||||||
|
<Button variant="secondary">Volver</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Detalles de la Cotización</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Crea una nueva cotización para un cliente.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 space-y-6 md:col-span-2 md:mt-0">
|
||||||
|
<!-- Client Selection -->
|
||||||
|
<div>
|
||||||
|
<label for="client" class="block text-sm font-medium text-gray-700">Cliente</label>
|
||||||
|
<select
|
||||||
|
id="client"
|
||||||
|
bind:value={selectedClientId}
|
||||||
|
class="mt-1 block w-full rounded-md border border-gray-300 py-2 pr-10 pl-3 text-base focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm"
|
||||||
|
>
|
||||||
|
<option value="">Selecciona un cliente</option>
|
||||||
|
{#each $clients as client}
|
||||||
|
<option value={client.id}>{client.name}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if selectedClient}
|
||||||
|
<div class="rounded-md bg-gray-50 p-4">
|
||||||
|
<p class="text-sm text-gray-700"><strong>Cliente:</strong> {selectedClient.name}</p>
|
||||||
|
<p class="text-sm text-gray-700"><strong>Email:</strong> {selectedClient.email}</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<hr class="border-gray-200" />
|
||||||
|
|
||||||
|
<!-- Add Items -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label for="productSearch" class="block text-sm font-medium text-gray-700"
|
||||||
|
>Buscar Producto</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="productSearch"
|
||||||
|
type="text"
|
||||||
|
bind:value={productSearch}
|
||||||
|
placeholder="Escribe para buscar..."
|
||||||
|
class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-end gap-4">
|
||||||
|
<div class="flex-grow">
|
||||||
|
<label for="product" class="block text-sm font-medium text-gray-700">Producto</label>
|
||||||
|
<select
|
||||||
|
id="product"
|
||||||
|
bind:value={selectedProductId}
|
||||||
|
class="mt-1 block w-full rounded-md border border-gray-300 py-2 pr-10 pl-3 text-base focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none sm:text-sm"
|
||||||
|
>
|
||||||
|
<option value="">Selecciona un producto</option>
|
||||||
|
{#each filteredProducts as product}
|
||||||
|
<option value={product.id}>{product.name} (${product.price})</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="w-24">
|
||||||
|
<Input id="quantity" label="Cant." type="number" bind:value={quantity} min={1} />
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<Button onClick={addItem} disabled={!selectedProduct}>Añadir</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Items List -->
|
||||||
|
{#if items.length > 0}
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||||
|
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||||
|
<div class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
|
||||||
|
>Producto</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
|
||||||
|
>Cant.</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
|
||||||
|
>Precio</th
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
|
||||||
|
>Total</th
|
||||||
|
>
|
||||||
|
<th scope="col" class="relative px-6 py-3">
|
||||||
|
<span class="sr-only">Eliminar</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-200 bg-white">
|
||||||
|
{#each items as item}
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900"
|
||||||
|
>{item.productName}</td
|
||||||
|
>
|
||||||
|
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500"
|
||||||
|
>{item.quantity}</td
|
||||||
|
>
|
||||||
|
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500"
|
||||||
|
>${item.price.toFixed(2)}</td
|
||||||
|
>
|
||||||
|
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500"
|
||||||
|
>${(item.price * item.quantity).toFixed(2)}</td
|
||||||
|
>
|
||||||
|
<td class="px-6 py-4 text-right text-sm font-medium whitespace-nowrap">
|
||||||
|
<button
|
||||||
|
on:click={() => removeItem(item.productId)}
|
||||||
|
class="text-red-600 hover:text-red-900">Eliminar</button
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer Note -->
|
||||||
|
<div>
|
||||||
|
<label for="footer" class="block text-sm font-medium text-gray-700">Notas al pie</label>
|
||||||
|
<textarea
|
||||||
|
id="footer"
|
||||||
|
bind:value={footer}
|
||||||
|
rows="3"
|
||||||
|
class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||||
|
placeholder="Términos y condiciones, notas adicionales..."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-end gap-4">
|
||||||
|
<div class="text-lg font-bold">Total: ${total.toFixed(2)}</div>
|
||||||
|
<Button onClick={saveQuotation} disabled={!selectedClient || items.length === 0}
|
||||||
|
>Guardar Cotización</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
69
src/routes/settings/+page.svelte
Normal file
69
src/routes/settings/+page.svelte
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { companyInfo } from '$lib/stores';
|
||||||
|
import Button from '$lib/components/Button.svelte';
|
||||||
|
import Input from '$lib/components/Input.svelte';
|
||||||
|
|
||||||
|
let name = $companyInfo.name;
|
||||||
|
let email = $companyInfo.email;
|
||||||
|
let phone = $companyInfo.phone;
|
||||||
|
let address = $companyInfo.address;
|
||||||
|
let headerText = $companyInfo.headerText;
|
||||||
|
|
||||||
|
function saveSettings() {
|
||||||
|
companyInfo.set({
|
||||||
|
name,
|
||||||
|
email,
|
||||||
|
phone,
|
||||||
|
address,
|
||||||
|
headerText
|
||||||
|
});
|
||||||
|
alert('Configuración guardada correctamente');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="text-2xl leading-7 font-bold text-gray-900 sm:truncate sm:text-3xl">
|
||||||
|
Configuración de la Empresa
|
||||||
|
</h2>
|
||||||
|
<a href="/">
|
||||||
|
<Button variant="secondary">Volver al Inicio</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Información General</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">
|
||||||
|
Esta información aparecerá en el encabezado de tus cotizaciones PDF.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:col-span-2 md:mt-0">
|
||||||
|
<form on:submit|preventDefault={saveSettings}>
|
||||||
|
<Input id="name" label="Nombre de la Empresa" bind:value={name} required />
|
||||||
|
<Input id="email" label="Email de Contacto" type="email" bind:value={email} required />
|
||||||
|
<Input id="phone" label="Teléfono" type="tel" bind:value={phone} />
|
||||||
|
<Input id="address" label="Dirección" bind:value={address} />
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="headerText" class="mb-1 block text-sm font-medium text-gray-700"
|
||||||
|
>Texto del Encabezado (Opcional)</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
id="headerText"
|
||||||
|
bind:value={headerText}
|
||||||
|
rows="2"
|
||||||
|
class="block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||||
|
placeholder="Slogan o información adicional..."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<Button type="submit">Guardar Configuración</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user