Merge version_2 into main #7
57
src/app/clientes/[clientId]/page.tsx
Normal file
57
src/app/clientes/[clientId]/page.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function ClientDashboardPage() {
|
||||
const params = useParams();
|
||||
const { clientId } = params;
|
||||
|
||||
const navItems = [
|
||||
{ name: "Inicio", id: "/" },
|
||||
{ name: "Clientes", id: "/clientes" },
|
||||
{ name: "Características", id: "/caracteristicas" },
|
||||
{ name: "Precios", id: "/precios" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Iniciar Sesión", href: "/auth/login" }}
|
||||
topBarButton={{ text: "Registrarse", href: "/auth/register" }}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-4xl font-extrabold text-foreground mb-8">Dashboard del Cliente: {clientId}</h1>
|
||||
<div className="bg-card p-6 rounded-lg shadow-md">
|
||||
<p className="text-foreground-secondary mb-4">Aquí se mostraría la información detallada del dashboard y el estado del cliente {clientId}.</p>
|
||||
<p className="text-foreground-secondary">Esto podría incluir gráficos de impuestos, historial de pagos, documentos adjuntos, etc.</p>
|
||||
<Link href="/clientes" className="text-accent hover:underline mt-4 inline-block">← Volver al Listado de Clientes</Link>
|
||||
</div>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
133
src/app/clientes/page.tsx
Normal file
133
src/app/clientes/page.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import Input from '@/components/form/Input';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import ButtonExpandHover from '@/components/button/ButtonExpandHover';
|
||||
|
||||
interface Client {
|
||||
id: string;
|
||||
name: string;
|
||||
status: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
const initialClients: Client[] = [
|
||||
{ id: 'client-1', name: 'Contador Uno SRL', status: 'Activo', email: 'contador1@example.com' },
|
||||
{ id: 'client-2', name: 'Estudio Contable Dos', status: 'Pendiente', email: 'estudio2@example.com' },
|
||||
{ id: 'client-3', name: 'Finanzas Tres S.A.', status: 'Activo', email: 'finanzas3@example.com' },
|
||||
];
|
||||
|
||||
export default function ClientsPage() {
|
||||
const [clients, setClients] = useState<Client[]>(initialClients);
|
||||
const [newClientName, setNewClientName] = useState<string>('');
|
||||
const [newClientEmail, setNewClientEmail] = useState<string>('');
|
||||
|
||||
const handleCreateClient = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (newClientName.trim() && newClientEmail.trim()) {
|
||||
const newClient: Client = {
|
||||
id: `client-${clients.length + 1}`,
|
||||
name: newClientName.trim(),
|
||||
status: 'Pendiente',
|
||||
email: newClientEmail.trim(),
|
||||
};
|
||||
setClients([...clients, newClient]);
|
||||
setNewClientName('');
|
||||
setNewClientEmail('');
|
||||
}
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Inicio", id: "/" },
|
||||
{ name: "Clientes", id: "/clientes" },
|
||||
{ name: "Características", id: "/caracteristicas" },
|
||||
{ name: "Precios", id: "/precios" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Iniciar Sesión", href: "/auth/login" }}
|
||||
topBarButton={{ text: "Registrarse", href: "/auth/register" }}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-4xl font-extrabold text-foreground mb-8">Gestión de Clientes</h1>
|
||||
|
||||
<section className="bg-card p-6 rounded-lg shadow-md mb-12">
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-4">Crear Nuevo Cliente</h2>
|
||||
<form onSubmit={handleCreateClient} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="clientName" className="block text-sm font-medium text-foreground mb-1">Nombre del Cliente</label>
|
||||
<Input
|
||||
id="clientName"
|
||||
value={newClientName}
|
||||
onChange={setNewClientName}
|
||||
placeholder="Ej: Estudio Contable XYZ"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="clientEmail" className="block text-sm font-medium text-foreground mb-1">Email del Cliente</label>
|
||||
<Input
|
||||
id="clientEmail"
|
||||
type="email"
|
||||
value={newClientEmail}
|
||||
onChange={setNewClientEmail}
|
||||
placeholder="Ej: cliente@ejemplo.com"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<ButtonExpandHover text="Agregar Cliente" type="submit" className="w-full sm:w-auto" />
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-4">Listado de Clientes</h2>
|
||||
{clients.length === 0 ? (
|
||||
<p className="text-foreground-secondary">No hay clientes para mostrar.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{clients.map((client) => (
|
||||
<Link key={client.id} href={`/clientes/${client.id}`} className="block">
|
||||
<div className="bg-card p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
|
||||
<h3 className="text-xl font-bold text-primary-cta mb-2">{client.name}</h3>
|
||||
<p className="text-foreground-secondary mb-1">Email: {client.email}</p>
|
||||
<p className="text-foreground-secondary">Estado: <span className={`font-semibold ${client.status === 'Activo' ? 'text-green-500' : client.status === 'Pendiente' ? 'text-yellow-500' : 'text-red-500'}`}>{client.status}</span></p>
|
||||
<span className="text-sm text-accent mt-2 block">Ver Dashboard →</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
153
src/app/contabilidad/page.tsx
Normal file
153
src/app/contabilidad/page.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
|
||||
export default function ContabilidadPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio", id: "/"},
|
||||
{
|
||||
name: "Contabilidad", id: "/contabilidad"},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"},
|
||||
]}
|
||||
button={{
|
||||
text: "Iniciar Sesión", href: "/auth/login"}}
|
||||
topBarButton={{
|
||||
text: "Registrarse", href: "/auth/register"}}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
title="Módulo de Contabilidad General"
|
||||
description="Gestiona tus finanzas empresariales con herramientas completas: desde registros de asientos hasta informes clave."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explorar Herramientas", href: "#"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116604.jpg?_wi=1", imageAlt: "Accounting dashboard with financial reports"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-technologies_23-2151941515.jpg", imageAlt: "Automated accounting processes"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="accounting-modules" data-section="accounting-modules">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "journal-entry", title: "Registro de Asientos Contables", tags: ["Contabilidad", "Registros"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-working-with-touchpad_1098-21357.jpg", imageAlt: "Journal entry interface", onFeatureClick: () => alert('Ir a Registro de Asientos Contables')
|
||||
},
|
||||
{
|
||||
id: "chart-of-accounts", title: "Plan de Cuentas Básico", tags: ["Cuentas", "Estructura"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-125598.jpg", imageAlt: "Chart of accounts structure", onFeatureClick: () => alert('Ir a Plan de Cuentas')
|
||||
},
|
||||
{
|
||||
id: "daily-journal", title: "Diario General", tags: ["Transacciones", "Historial"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/relaxed-businessman-looking-up-with-his-mobile-phone-table_23-2148164255.jpg", imageAlt: "Daily journal view", onFeatureClick: () => alert('Ir a Diario General')
|
||||
},
|
||||
{
|
||||
id: "trial-balance", title: "Balance de Comprobación", tags: ["Informes", "Verificación"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-glasses-liquid-with-shadow-yellow-background_23-2147949153.jpg", imageAlt: "Trial balance report", onFeatureClick: () => alert('Ir a Balance de Comprobación')
|
||||
},
|
||||
{
|
||||
id: "income-statement", title: "Estado de Resultados", tags: ["Rentabilidad", "Análisis"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-sustainability-specialist-inspecting-solar-panel-factory-focusing-infrastructure_482257-135619.jpg", imageAlt: "Income statement analysis", onFeatureClick: () => alert('Ir a Estado de Resultados')
|
||||
},
|
||||
{
|
||||
id: "file-upload", title: "Carga de Datos por Archivo", tags: ["Importación", "Automatización"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-retro-computer_23-2149506873.jpg", imageAlt: "File upload interface", onFeatureClick: () => alert('Ir a Carga de Datos por Archivo')
|
||||
},
|
||||
]}
|
||||
title="Herramientas Esenciales de Contabilidad"
|
||||
description="Desde la gestión diaria de transacciones hasta la generación de informes financieros."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-306797.jpg?_wi=1"
|
||||
imageAlt="Abstract tech background"
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
logoText="[NOMBRE DE TU MARCA]"
|
||||
columns={[
|
||||
{
|
||||
title: "Empresa", items: [
|
||||
{
|
||||
label: "Sobre Nosotros", href: "#"},
|
||||
{
|
||||
label: "Contacto", href: "#"},
|
||||
{
|
||||
label: "Carreras", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soluciones", items: [
|
||||
{
|
||||
label: "Monotributo", href: "/app/monotributo"},
|
||||
{
|
||||
label: "IVA", href: "/app/iva"},
|
||||
{
|
||||
label: "Ganancias", href: "/app/ganancias"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soporte", items: [
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Ayuda", href: "#"},
|
||||
{
|
||||
label: "Blog", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Términos de Servicio", href: "#"},
|
||||
{
|
||||
label: "Política de Privacidad", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 [NOMBRE DE TU MARCA]. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
147
src/app/dashboard/page.tsx
Normal file
147
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import { Calendar, Bell, CreditCard, Wallet, Receipt, Banknote, TrendingUp, UploadCloud, FileText, PiggyBank, Scale } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const navItems = [
|
||||
{
|
||||
name: "Inicio", id: "/"},
|
||||
{
|
||||
name: "Dashboard", id: "/dashboard"},
|
||||
{
|
||||
name: "Características", id: "/#features"},
|
||||
{
|
||||
name: "Precios", id: "/#pricing"},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Iniciar Sesión", href: "/auth/login" }}
|
||||
topBarButton={{ text: "Registrarse", href: "/auth/register" }}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-hero" data-section="dashboard-hero">
|
||||
<HeroOverlay
|
||||
title="Bienvenido a tu Dashboard"
|
||||
description="Aquí encontrarás un resumen de tus finanzas y tareas importantes."
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
textPosition="bottom"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116604.jpg?_wi=1"
|
||||
imageAlt="Dashboard overview"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="monthly-summary" data-section="monthly-summary">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Resumen Mensual y Tareas Pendientes"
|
||||
description="Un vistazo rápido a tus números y las acciones que requieren atención inmediata."
|
||||
metrics={[
|
||||
{
|
||||
id: "monthly-summary", icon: Calendar,
|
||||
title: "Facturación del Mes", value: "$1.250.000", description: "Total de ingresos facturados este mes."},
|
||||
{
|
||||
id: "upcoming-deadlines", icon: Bell,
|
||||
title: "Próximos Vencimientos", value: "3", description: "Impuestos y declaraciones con fecha límite en los próximos 7 días."},
|
||||
{
|
||||
id: "pending-payments", icon: CreditCard,
|
||||
title: "Pagos Pendientes", value: "$450.000", description: "Facturas de clientes por cobrar."},
|
||||
{
|
||||
id: "alerts", icon: Wallet,
|
||||
title: "Alertas Activas", value: "1", description: "Retención mal aplicada en la última factura."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="fiscal-calendar" data-section="fiscal-calendar">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Calendario Fiscal AFIP 2025"
|
||||
description="Fechas clave y obligaciones fiscales para el próximo año."
|
||||
features={[
|
||||
{
|
||||
title: "Vencimiento IVA", description: "Consulta el cronograma de vencimientos del Impuesto al Valor Agregado.", imageSrc: "http://img.b2bpic.net/free-photo/tax-day_23-2149303565.jpg", imageAlt: "IVA calendar icon", buttons: [{text: "Ver Calendario IVA", href: "#"}],
|
||||
},
|
||||
{
|
||||
title: "Monotributo Recategorización", description: "Fechas importantes para la recategorización y pago de Monotributo.", imageSrc: "http://img.b2bpic.net/free-photo/pile-coins-white-background-close-up-space-text_176478-4309.jpg", imageAlt: "Monotributo icon", buttons: [{text: "Ver Calendario Monotributo", href: "#"}],
|
||||
},
|
||||
{
|
||||
title: "Impuesto a las Ganancias", description: "Fechas de presentación y pago para Personas Humanas y Sociedades.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-financial-items-composition_23-2148785122.jpg", imageAlt: "Ganancias icon", buttons: [{text: "Ver Calendario Ganancias", href: "#"}],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="tax-status" data-section="tax-status">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
title="Situación Impositiva Actual"
|
||||
description="Estado de tus principales obligaciones y saldos."
|
||||
metrics={[
|
||||
{
|
||||
id: "iva-to-pay", icon: PiggyBank,
|
||||
title: "IVA a Pagar (Neto)", value: "$120.000", description: "Monto estimado del IVA a ingresar en el próximo vencimiento."},
|
||||
{
|
||||
id: "retentions", icon: FileText,
|
||||
title: "Retenciones Recibidas", value: "$35.000", description: "Créditos por retenciones sufridas acumulados."},
|
||||
{
|
||||
id: "favorable-balance", icon: Scale,
|
||||
title: "Saldo a Favor", value: "$15.000", description: "Saldo positivo acumulado en cuentas corrientes fiscales."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="data-upload" data-section="data-upload">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Carga de Datos Adicionales"
|
||||
description="Sube documentos y comprobantes para mantener tu información actualizada."
|
||||
features={[
|
||||
{
|
||||
title: "Cargar Documentos Fiscales", description: "Arrastra y suelta tus archivos o haz clic para seleccionar. Formatos permitidos: PDF, JPG, XLSX.", imageSrc: "http://img.b2bpic.net/free-photo/modern-gadgets-creative-workplace-desk_23-2148151614.jpg", imageAlt: "File upload icon", buttons: [
|
||||
{
|
||||
text: "Subir Archivo", href: "#"
|
||||
}
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
263
src/app/ganancias/page.tsx
Normal file
263
src/app/ganancias/page.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import React, { useState, ChangeEvent, FormEvent } from 'react';
|
||||
import { Upload, DollarSign, BarChart2, AlertCircle, CalendarDays } from "lucide-react";
|
||||
|
||||
export default function GananciasPage() {
|
||||
const [annualIncome, setAnnualIncome] = useState<number | ''>('');
|
||||
const [deductions, setDeductions] = useState<number | ''>('');
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [taxEstimation, setTaxEstimation] = useState<number | null>(null);
|
||||
const [fiscalYearProgress, setFiscalYearProgress] = useState<number>(0); // Percentage
|
||||
|
||||
// Mock calculation function
|
||||
const calculateTax = (income: number, ded: number) => {
|
||||
// This is a simplified mock. Real tax calculation is complex.
|
||||
const taxableIncome = income - ded;
|
||||
if (taxableIncome <= 0) return 0;
|
||||
// Example tiers for Argentina's Ganancias (simplified and arbitrary for demo)
|
||||
if (taxableIncome < 500000) return taxableIncome * 0.05;
|
||||
if (taxableIncome < 1500000) return 25000 + (taxableIncome - 500000) * 0.10;
|
||||
return 125000 + (taxableIncome - 1500000) * 0.15;
|
||||
};
|
||||
|
||||
const handleIncomeChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const value = parseFloat(e.target.value);
|
||||
setAnnualIncome(isNaN(value) ? '' : value);
|
||||
};
|
||||
|
||||
const handleDeductionsChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const value = parseFloat(e.target.value);
|
||||
setDeductions(isNaN(value) ? '' : value);
|
||||
};
|
||||
|
||||
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setFile(e.target.files[0]);
|
||||
} else {
|
||||
setFile(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (annualIncome !== '' && deductions !== '') {
|
||||
const estimatedTax = calculateTax(annualIncome as number, deductions as number);
|
||||
setTaxEstimation(estimatedTax);
|
||||
alert("Cálculo realizado. (Simulado)");
|
||||
// In a real app, file would be uploaded here
|
||||
if (file) {
|
||||
console.log("File uploaded:", file.name);
|
||||
}
|
||||
} else {
|
||||
alert("Por favor, ingresa los montos de ingresos y deducciones.");
|
||||
}
|
||||
};
|
||||
|
||||
// Effect to calculate fiscal year progress (mock)
|
||||
React.useEffect(() => {
|
||||
const now = new Date();
|
||||
const startOfYear = new Date(now.getFullYear(), 0, 1);
|
||||
const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59);
|
||||
const totalDays = (endOfYear.getTime() - startOfYear.getTime()) / (1000 * 60 * 60 * 24);
|
||||
const passedDays = (now.getTime() - startOfYear.getTime()) / (1000 * 60 * 60 * 24);
|
||||
setFiscalYearProgress(Math.min(100, Math.max(0, (passedDays / totalDays) * 100)));
|
||||
}, []);
|
||||
|
||||
const commonNavItems = [
|
||||
{ name: "Inicio", id: "/" },
|
||||
{ name: "Características", id: "/caracteristicas" },
|
||||
{ name: "Precios", id: "/precios" },
|
||||
{ name: "Ganancias", id: "/ganancias" }, // New link
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Empresa", items: [
|
||||
{ label: "Sobre Nosotros", href: "#" },
|
||||
{ label: "Contacto", href: "#" },
|
||||
{ label: "Carreras", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soluciones", items: [
|
||||
{ label: "Monotributo", href: "/monotributo" },
|
||||
{ label: "IVA", href: "/iva" },
|
||||
{ label: "Ganancias", href: "/ganancias" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soporte", items: [
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Ayuda", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Términos de Servicio", href: "#" },
|
||||
{ label: "Política de Privacidad", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={commonNavItems}
|
||||
button={{ text: "Iniciar Sesión", href: "/auth/login" }}
|
||||
topBarButton={{ text: "Registrarse", href: "/auth/register" }}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen py-20 bg-background text-foreground flex items-center justify-center">
|
||||
<div className="container max-w-4xl mx-auto p-6 bg-card rounded-lg shadow-xl">
|
||||
<h1 className="text-4xl font-extrabold text-center mb-10 text-primary-cta">
|
||||
Módulo de Ganancias
|
||||
</h1>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
|
||||
<DollarSign className="text-accent" size={24} /> Declaración Anual de Ingresos
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="annualIncome" className="block text-sm font-medium mb-2">
|
||||
Ingresos Anuales Brutos
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="annualIncome"
|
||||
value={annualIncome}
|
||||
onChange={handleIncomeChange}
|
||||
placeholder="Ej: 1500000"
|
||||
required
|
||||
className="w-full p-3 border border-gray-600 rounded-md bg-transparent text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="deductions" className="block text-sm font-medium mb-2">
|
||||
Deducciones Permitidas
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="deductions"
|
||||
value={deductions}
|
||||
onChange={handleDeductionsChange}
|
||||
placeholder="Ej: 200000"
|
||||
required
|
||||
className="w-full p-3 border border-gray-600 rounded-md bg-transparent text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="incomeFile" className="block text-sm font-medium mb-2">
|
||||
Adjuntar Comprobantes de Ingresos (Opcional)
|
||||
</label>
|
||||
<div className="flex items-center space-x-2 border border-gray-600 rounded-md p-3">
|
||||
<Upload className="text-gray-400" size={20} />
|
||||
<input
|
||||
type="file"
|
||||
id="incomeFile"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
<label htmlFor="incomeFile" className="cursor-pointer text-primary-cta hover:underline">
|
||||
{file ? file.name : "Seleccionar archivo..."}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-white font-bold py-3 px-6 rounded-md hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Calcular Estimación
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{taxEstimation !== null && (
|
||||
<section className="mb-8 p-6 bg-accent/10 rounded-lg border border-accent">
|
||||
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
|
||||
<BarChart2 className="text-accent" size={24} /> Estimación de Impuesto a las Ganancias
|
||||
</h2>
|
||||
<p className="text-lg">
|
||||
Basado en tus datos, el impuesto estimado sería:{" "}
|
||||
<span className="font-bold text-3xl text-primary-cta">
|
||||
${taxEstimation.toLocaleString('es-AR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ARS
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
Esta es una estimación simplificada y no constituye asesoramiento fiscal. Consulta siempre con un contador.
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
|
||||
<CalendarDays className="text-accent" size={24} /> Progreso del Año Fiscal
|
||||
</h2>
|
||||
<div className="w-full bg-gray-700 rounded-full h-4 mb-2">
|
||||
<div
|
||||
className="bg-primary-cta h-4 rounded-full"
|
||||
style={{ width: `${fiscalYearProgress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">
|
||||
Llevamos un {fiscalYearProgress.toFixed(1)}% del año fiscal {new Date().getFullYear()} completado.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
|
||||
<AlertCircle className="text-red-500" size={24} /> Alertas de Anticipos y Vencimientos
|
||||
</h2>
|
||||
<ul className="list-disc list-inside space-y-2 text-gray-300">
|
||||
<li>Próximo anticipo de Ganancias: 10/09/2024</li>
|
||||
<li>Recordatorio: Vencimiento de DJ Anual Ganancias: 15/05/2025</li>
|
||||
<li>Alerta: Ingreso de DDJJ de retenciones pendientes.</li>
|
||||
</ul>
|
||||
<p className="text-sm text-gray-400 mt-4">
|
||||
Mantente al día con tus obligaciones fiscales para evitar multas.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-306797.jpg?_wi=1"
|
||||
imageAlt="Abstract tech background"
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
logoText="[NOMBRE DE TU MARCA]"
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2024 [NOMBRE DE TU MARCA]. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
110
src/app/import-data/page.tsx
Normal file
110
src/app/import-data/page.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
|
||||
export default function ImportDataPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio", id: "/"},
|
||||
{
|
||||
name: "Características", id: "/caracteristicas"},
|
||||
{
|
||||
name: "Precios", id: "/precios"},
|
||||
{
|
||||
name: "Importar Datos", id: "/import-data"},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"}
|
||||
]}
|
||||
button={{
|
||||
text: "Iniciar Sesión", href: "/auth/login"}}
|
||||
topBarButton={{
|
||||
text: "Registrarse", href: "/auth/register"}}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="import-hero" data-section="import-hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
title="Carga y Procesamiento de Datos"
|
||||
description="Sube tus archivos (CSV, Excel, JSON) y nuestro sistema los procesará automáticamente, validando formatos y fusionando con tus datos existentes en cada módulo."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-306797.jpg?_wi=1"
|
||||
imageAlt="Abstract tech background"
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
logoText="[NOMBRE DE TU MARCA]"
|
||||
columns={[
|
||||
{
|
||||
title: "Empresa", items: [
|
||||
{
|
||||
label: "Sobre Nosotros", href: "#"},
|
||||
{
|
||||
label: "Contacto", href: "#"},
|
||||
{
|
||||
label: "Carreras", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soluciones", items: [
|
||||
{
|
||||
label: "Monotributo", href: "/app/monotributo"},
|
||||
{
|
||||
label: "IVA", href: "/app/iva"},
|
||||
{
|
||||
label: "Ganancias", href: "/app/ganancias"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soporte", items: [
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Ayuda", href: "#"},
|
||||
{
|
||||
label: "Blog", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Términos de Servicio", href: "#"},
|
||||
{
|
||||
label: "Política de Privacidad", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 [NOMBRE DE TU MARCA]. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
244
src/app/monotributo/page.tsx
Normal file
244
src/app/monotributo/page.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
|
||||
import { useState, useMemo, ChangeEvent } from 'react';
|
||||
import { UploadCloud } from 'lucide-react';
|
||||
|
||||
interface MonotributoCategory {
|
||||
category: string;
|
||||
annualIncomeLimit: number;
|
||||
monthlyFee: number;
|
||||
}
|
||||
|
||||
const CATEGORIES_2024: MonotributoCategory[] = [
|
||||
{ category: 'A', annualIncomeLimit: 2108288.00, monthlyFee: 12128.00 },
|
||||
{ category: 'B', annualIncomeLimit: 3133995.00, monthlyFee: 13571.00 },
|
||||
{ category: 'C', annualIncomeLimit: 4401988.00, monthlyFee: 15364.00 },
|
||||
{ category: 'D', annualIncomeLimit: 5459629.00, monthlyFee: 19301.00 },
|
||||
{ category: 'E', annualIncomeLimit: 6416528.00, monthlyFee: 26143.00 },
|
||||
{ category: 'F', annualIncomeLimit: 8020660.00, monthlyFee: 34809.00 },
|
||||
{ category: 'G', annualIncomeLimit: 9624792.00, monthlyFee: 40111.00 },
|
||||
{ category: 'H', annualIncomeLimit: 11991641.00, monthlyFee: 66111.00 },
|
||||
{ category: 'I', annualIncomeLimit: 13337213.00, monthlyFee: 81161.00 },
|
||||
{ category: 'J', annualIncomeLimit: 15285088.00, monthlyFee: 93619.00 },
|
||||
{ category: 'K', annualIncomeLimit: 16957968.00, monthlyFee: 106465.00 },
|
||||
];
|
||||
|
||||
export default function MonotributoPage() {
|
||||
const [cuit, setCuit] = useState('');
|
||||
const [accumulatedIncome, setAccumulatedIncome] = useState(0);
|
||||
const [monthlyIncomeInput, setMonthlyIncomeInput] = useState('');
|
||||
const [calculatedMonthlyFee, setCalculatedMonthlyFee] = useState<number | null>(null);
|
||||
const [fileContent, setFileContent] = useState<string | null>(null);
|
||||
|
||||
const currentCategory = useMemo(() => {
|
||||
if (accumulatedIncome === 0) return 'N/A';
|
||||
for (const cat of CATEGORIES_2024) {
|
||||
if (accumulatedIncome <= cat.annualIncomeLimit) {
|
||||
return cat.category;
|
||||
}
|
||||
}
|
||||
return 'K (Max)'; // If income exceeds category K
|
||||
}, [accumulatedIncome]);
|
||||
|
||||
const recategorizationAlert = useMemo(() => {
|
||||
if (accumulatedIncome === 0) return '';
|
||||
const currentCatIndex = CATEGORIES_2024.findIndex(cat => cat.category === currentCategory);
|
||||
if (currentCatIndex !== -1 && currentCatIndex < CATEGORIES_2024.length - 1) {
|
||||
const nextCategoryLimit = CATEGORIES_2024[currentCatIndex + 1].annualIncomeLimit;
|
||||
if (accumulatedIncome > (CATEGORIES_2024[currentCatIndex]?.annualIncomeLimit || 0) * 0.8) { // Example: 80% of limit
|
||||
return `¡Atención! Estás cerca del límite de la Categoría ${currentCategory}. Podrías recategorizarte a ${CATEGORIES_2024[currentCatIndex + 1].category}.`;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}, [accumulatedIncome, currentCategory]);
|
||||
|
||||
const handleCalculateFee = () => {
|
||||
const income = parseFloat(monthlyIncomeInput) * 12; // Annualize monthly income
|
||||
if (isNaN(income) || income <= 0) {
|
||||
setCalculatedMonthlyFee(null);
|
||||
return;
|
||||
}
|
||||
|
||||
let fee: number | null = null;
|
||||
for (const cat of CATEGORIES_2024) {
|
||||
if (income <= cat.annualIncomeLimit) {
|
||||
fee = cat.monthlyFee;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (fee === null && income > CATEGORIES_2024[CATEGORIES_2024.length - 1].annualIncomeLimit) {
|
||||
fee = CATEGORIES_2024[CATEGORIES_2024.length - 1].monthlyFee; // Max category fee
|
||||
}
|
||||
setCalculatedMonthlyFee(fee);
|
||||
};
|
||||
|
||||
const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string;
|
||||
setFileContent(content);
|
||||
// Example: parse CUIT or income from file content
|
||||
// This is a placeholder for actual parsing logic
|
||||
try {
|
||||
const data = JSON.parse(content);
|
||||
if (data.cuit) setCuit(data.cuit);
|
||||
if (data.accumulatedIncome) setAccumulatedIncome(parseFloat(data.accumulatedIncome));
|
||||
} catch (error) {
|
||||
console.error("Error parsing file content:", error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Inicio", id: "/" },
|
||||
{ name: "Monotributo", id: "/monotributo" },
|
||||
{ name: "Características", id: "/caracteristicas" },
|
||||
{ name: "Precios", id: "/precios" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
]}
|
||||
button={{
|
||||
text: "Iniciar Sesión", href: "/auth/login"}}
|
||||
topBarButton={{
|
||||
text: "Registrarse", href: "/auth/register"}}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<h1 className="text-4xl font-extrabold text-foreground mb-12 text-center">Módulo Monotributo</h1>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
{/* CUIT Form and Current Status */}
|
||||
<div className="bg-card p-8 rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6">Tu Estado Actual</h2>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="cuit" className="block text-foreground text-sm font-medium mb-2">CUIT:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cuit"
|
||||
className="w-full p-3 rounded-md border border-gray-300 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
value={cuit}
|
||||
onChange={(e) => setCuit(e.target.value)}
|
||||
placeholder="Ingresa tu CUIT"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<p className="text-foreground text-sm font-medium mb-2">Categoría Actual:</p>
|
||||
<p className="text-primary-cta text-lg font-bold">{currentCategory}</p>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<p className="text-foreground text-sm font-medium mb-2">Ingreso Acumulado (últimos 12 meses):</p>
|
||||
<p className="text-primary-cta text-lg font-bold">{accumulatedIncome.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</p>
|
||||
</div>
|
||||
{recategorizationAlert && (
|
||||
<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
|
||||
<p className="font-bold">Alerta de Recategorización</p>
|
||||
<p>{recategorizationAlert}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Monthly Fee Calculator */}
|
||||
<div className="bg-card p-8 rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6">Calculadora de Cuota Mensual</h2>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="monthlyIncome" className="block text-foreground text-sm font-medium mb-2">Ingreso Bruto Mensual Estimado:</label>
|
||||
<input
|
||||
type="number"
|
||||
id="monthlyIncome"
|
||||
className="w-full p-3 rounded-md border border-gray-300 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
value={monthlyIncomeInput}
|
||||
onChange={(e) => setMonthlyIncomeInput(e.target.value)}
|
||||
placeholder="Ej: 150000"
|
||||
/>
|
||||
</div>
|
||||
<ButtonElasticEffect
|
||||
text="Calcular Cuota"
|
||||
onClick={handleCalculateFee}
|
||||
className="w-full mb-6"
|
||||
/>
|
||||
{calculatedMonthlyFee !== null && (
|
||||
<div className="bg-accent-light p-4 rounded-md">
|
||||
<p className="text-foreground text-sm font-medium mb-2">Cuota Mensual Estimada:</p>
|
||||
<p className="text-primary-cta text-xl font-bold">{calculatedMonthlyFee.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</p>
|
||||
</div>
|
||||
)}
|
||||
<ButtonElasticEffect
|
||||
text="Generar VEP"
|
||||
onClick={() => alert('Funcionalidad para generar VEP en desarrollo.')}
|
||||
className="w-full mt-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File Upload for Data Loading */}
|
||||
<div className="bg-card p-8 rounded-lg shadow-md mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-6">Cargar Datos (JSON/CSV)</h2>
|
||||
<label htmlFor="file-upload" className="flex items-center justify-center w-full p-6 border-2 border-dashed rounded-lg cursor-pointer bg-background hover:bg-background-accent transition-colors duration-200">
|
||||
<UploadCloud className="w-8 h-8 text-foreground-secondary mr-3" />
|
||||
<span className="text-foreground-secondary">Arrastra y suelta tu archivo aquí, o haz clic para seleccionar (JSON/CSV)</span>
|
||||
<input id="file-upload" type="file" className="hidden" onChange={handleFileUpload} accept=".json,.csv" />
|
||||
</label>
|
||||
{fileContent && (
|
||||
<div className="mt-4 p-4 bg-background border rounded-md max-h-48 overflow-auto">
|
||||
<h3 className="font-semibold mb-2">Contenido del archivo cargado:</h3>
|
||||
<pre className="whitespace-pre-wrap text-sm text-foreground-secondary">{fileContent}</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 2024 Category Table */}
|
||||
<div className="bg-card p-8 rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-center">Tabla de Categorías Monotributo 2024</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-background-accent">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Categoría</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Ingresos Brutos Anuales (Hasta)</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Cuota Mensual</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-background divide-y divide-gray-200">
|
||||
{CATEGORIES_2024.map((cat) => (
|
||||
<tr key={cat.category}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{cat.category}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{cat.annualIncomeLimit.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{cat.monthlyFee.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
305
src/app/page.tsx
305
src/app/page.tsx
@@ -11,8 +11,63 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import { Briefcase, Building, Clock, DollarSign, User, Users } from "lucide-react";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function LandingPage() {
|
||||
useEffect(() => {
|
||||
const HAS_PRELOADED_DATA_KEY = "hasPreloadedData";
|
||||
const hasPreloadedData = localStorage.getItem(HAS_PRELOADED_DATA_KEY);
|
||||
|
||||
if (!hasPreloadedData) {
|
||||
// Seed data
|
||||
const accountantId = "acc-1";
|
||||
const client1Id = "cli-1"; // Monotributist D
|
||||
const client2Id = "cli-2"; // RI
|
||||
const client3Id = "cli-3"; // Another client for accountant
|
||||
|
||||
const accountants = [
|
||||
{
|
||||
id: accountantId,
|
||||
name: "Juan Perez", email: "juan.perez@example.com", clients: [client1Id, client2Id, client3Id],
|
||||
},
|
||||
];
|
||||
|
||||
const clients = [
|
||||
{
|
||||
id: client1Id,
|
||||
name: "Maria Gomez", cuit: "27-12345678-9", type: "Monotributist", accountantId: accountantId,
|
||||
category: "D", invoices: [
|
||||
{ id: "inv-m1", date: "2023-01-15", amount: 15000, type: "C" },
|
||||
{ id: "inv-m2", date: "2023-02-20", amount: 20000, type: "C" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: client2Id,
|
||||
name: "Carlos Sanchez", cuit: "30-98765432-1", type: "Responsible Inscripto", accountantId: accountantId,
|
||||
sales: [
|
||||
{ id: "sale-r1", date: "2023-03-01", amount: 50000, taxRate: 0.21, total: 60500 },
|
||||
{ id: "sale-r2", date: "2023-04-10", amount: 75000, taxRate: 0.21, total: 90750 },
|
||||
],
|
||||
purchases: [
|
||||
{ id: "pur-r1", date: "2023-03-05", amount: 20000, taxRate: 0.21, total: 24200 },
|
||||
{ id: "pur-r2", date: "2023-04-12", amount: 10000, taxRate: 0.21, total: 12100 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: client3Id,
|
||||
name: "Laura Fernandez", cuit: "20-11223344-5", type: "Monotributist", accountantId: accountantId,
|
||||
category: "B", invoices: [
|
||||
{ id: "inv-l1", date: "2023-05-01", amount: 8000, type: "C" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
localStorage.setItem("accountants", JSON.stringify(accountants));
|
||||
localStorage.setItem("clients", JSON.stringify(clients));
|
||||
localStorage.setItem(HAS_PRELOADED_DATA_KEY, "true"); // Mark data as preloaded
|
||||
}
|
||||
}, []); // Run only once on mount
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
@@ -31,30 +86,18 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio",
|
||||
id: "/",
|
||||
},
|
||||
name: "Inicio", id: "/"},
|
||||
{
|
||||
name: "Características",
|
||||
id: "/caracteristicas",
|
||||
},
|
||||
name: "Características", id: "/caracteristicas"},
|
||||
{
|
||||
name: "Precios",
|
||||
id: "/precios",
|
||||
},
|
||||
name: "Precios", id: "/precios"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "/#faq",
|
||||
},
|
||||
name: "FAQ", id: "/#faq"},
|
||||
]}
|
||||
button={{
|
||||
text: "Iniciar Sesión",
|
||||
href: "/auth/login",
|
||||
}}
|
||||
text: "Iniciar Sesión", href: "/auth/login"}}
|
||||
topBarButton={{
|
||||
text: "Registrarse",
|
||||
href: "/auth/register",
|
||||
}}
|
||||
text: "Registrarse", href: "/auth/register"}}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
@@ -64,45 +107,28 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
title="Tu contabilidad argentina, automatizada."
|
||||
description="Gestiona impuestos, sueldos y clientes con nuestra SaaS intuitiva. Simplifica tus finanzas, evita multas y crece sin preocupaciones."
|
||||
buttons={[
|
||||
{
|
||||
text: "Empezar Ahora",
|
||||
href: "/auth/register",
|
||||
},
|
||||
text: "Empezar Ahora", href: "/auth/register"},
|
||||
{
|
||||
text: "Ver Planes",
|
||||
href: "/precios",
|
||||
},
|
||||
text: "Ver Planes", href: "/precios"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116604.jpg?_wi=1",
|
||||
imageAlt: "Accounting dashboard with tax calendar",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116604.jpg?_wi=1", imageAlt: "Accounting dashboard with tax calendar"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-technologies_23-2151941515.jpg",
|
||||
imageAlt: "Automated accounting data flow",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-technologies_23-2151941515.jpg", imageAlt: "Automated accounting data flow"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/relaxed-businessman-looking-up-with-his-mobile-phone-table_23-2148164255.jpg",
|
||||
imageAlt: "Relaxed accountant using software",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/relaxed-businessman-looking-up-with-his-mobile-phone-table_23-2148164255.jpg", imageAlt: "Relaxed accountant using software"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-125598.jpg",
|
||||
imageAlt: "Financial growth and stability",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-125598.jpg", imageAlt: "Financial growth and stability"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-glasses-liquid-with-shadow-yellow-background_23-2147949153.jpg",
|
||||
imageAlt: "Seamless integration of financial tools",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-glasses-liquid-with-shadow-yellow-background_23-2147949153.jpg", imageAlt: "Seamless integration of financial tools"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-sustainability-specialist-inspecting-solar-panel-factory-focusing-infrastructure_482257-135619.jpg",
|
||||
imageAlt: "AI assisting with tax calculations",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-sustainability-specialist-inspecting-solar-panel-factory-focusing-infrastructure_482257-135619.jpg", imageAlt: "AI assisting with tax calculations"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -114,35 +140,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "monotributo-calc",
|
||||
title: "Cálculo Automático Monotributo",
|
||||
tags: [
|
||||
"Impuestos",
|
||||
"Simplificado",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-retro-computer_23-2149506873.jpg",
|
||||
imageAlt: "Monotributo automatic calculation interface",
|
||||
},
|
||||
id: "monotributo-calc", title: "Cálculo Automático Monotributo", tags: [
|
||||
"Impuestos", "Simplificado"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-retro-computer_23-2149506873.jpg", imageAlt: "Monotributo automatic calculation interface"},
|
||||
{
|
||||
id: "iva-gestion",
|
||||
title: "Gestión Integral de IVA",
|
||||
tags: [
|
||||
"Facturas",
|
||||
"Crédito Fiscal",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-working-with-touchpad_1098-21357.jpg",
|
||||
imageAlt: "IVA management data flow",
|
||||
},
|
||||
id: "iva-gestion", title: "Gestión Integral de IVA", tags: [
|
||||
"Facturas", "Crédito Fiscal"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-working-with-touchpad_1098-21357.jpg", imageAlt: "IVA management data flow"},
|
||||
{
|
||||
id: "vencimientos-alertas",
|
||||
title: "Alertas de Vencimientos AFIP",
|
||||
tags: [
|
||||
"AFIP",
|
||||
"Notificaciones",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mobile-phone-with-sale-tag-modern-laptop-keypad_23-2147854239.jpg",
|
||||
imageAlt: "Tax deadline calendar with notifications",
|
||||
},
|
||||
id: "vencimientos-alertas", title: "Alertas de Vencimientos AFIP", tags: [
|
||||
"AFIP", "Notificaciones"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mobile-phone-with-sale-tag-modern-laptop-keypad_23-2147854239.jpg", imageAlt: "Tax deadline calendar with notifications"},
|
||||
]}
|
||||
title="Funcionalidades clave para tu gestión."
|
||||
description="Potencia tu estudio o simplifica tus finanzas personales con herramientas diseñadas para Argentina."
|
||||
@@ -156,19 +164,13 @@ export default function LandingPage() {
|
||||
metrics={[
|
||||
{
|
||||
icon: Users,
|
||||
label: "Clientes Atendidos",
|
||||
value: "+500",
|
||||
},
|
||||
label: "Clientes Atendidos", value: "+500"},
|
||||
{
|
||||
icon: DollarSign,
|
||||
label: "Operaciones al Mes",
|
||||
value: "+10K",
|
||||
},
|
||||
label: "Operaciones al Mes", value: "+10K"},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Horas Ahorradas",
|
||||
value: "+200K",
|
||||
},
|
||||
label: "Horas Ahorradas", value: "+200K"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -181,59 +183,31 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Individual",
|
||||
badgeIcon: User,
|
||||
price: "$8.000/mes",
|
||||
subtitle: "Para contribuyentes individuales.",
|
||||
buttons: [
|
||||
id: "basic", badge: "Individual", badgeIcon: User,
|
||||
price: "$8.000/mes", subtitle: "Para contribuyentes individuales.", buttons: [
|
||||
{
|
||||
text: "Elegir Básico",
|
||||
href: "/auth/register?plan=basic",
|
||||
},
|
||||
text: "Elegir Básico", href: "/auth/register?plan=basic"},
|
||||
],
|
||||
features: [
|
||||
"1 CUIT",
|
||||
"Módulos Monotributo + IVA",
|
||||
"Soporte por email",
|
||||
],
|
||||
"1 CUIT", "Módulos Monotributo + IVA", "Soporte por email"],
|
||||
},
|
||||
{
|
||||
id: "professional",
|
||||
badge: "Profesional",
|
||||
badgeIcon: Briefcase,
|
||||
price: "$18.000/mes",
|
||||
subtitle: "Ideal para pequeños estudios.",
|
||||
buttons: [
|
||||
id: "professional", badge: "Profesional", badgeIcon: Briefcase,
|
||||
price: "$18.000/mes", subtitle: "Ideal para pequeños estudios.", buttons: [
|
||||
{
|
||||
text: "Elegir Profesional",
|
||||
href: "/auth/register?plan=professional",
|
||||
},
|
||||
text: "Elegir Profesional", href: "/auth/register?plan=professional"},
|
||||
],
|
||||
features: [
|
||||
"Hasta 10 CUITs",
|
||||
"Todos los módulos",
|
||||
"Soporte por WhatsApp",
|
||||
],
|
||||
"Hasta 10 CUITs", "Todos los módulos", "Soporte por WhatsApp"],
|
||||
},
|
||||
{
|
||||
id: "studio",
|
||||
badge: "Estudio",
|
||||
badgeIcon: Building,
|
||||
price: "$35.000/mes",
|
||||
subtitle: "Solución completa para estudios grandes.",
|
||||
buttons: [
|
||||
id: "studio", badge: "Estudio", badgeIcon: Building,
|
||||
price: "$35.000/mes", subtitle: "Solución completa para estudios grandes.", buttons: [
|
||||
{
|
||||
text: "Elegir Estudio",
|
||||
href: "/auth/register?plan=studio",
|
||||
},
|
||||
text: "Elegir Estudio", href: "/auth/register?plan=studio"},
|
||||
],
|
||||
features: [
|
||||
"CUITs ilimitados",
|
||||
"Todos los módulos",
|
||||
"API AFIP futura",
|
||||
"Soporte prioritario",
|
||||
],
|
||||
"CUITs ilimitados", "Todos los módulos", "API AFIP futura", "Soporte prioritario"],
|
||||
},
|
||||
]}
|
||||
title="Planes adaptados a tu necesidad."
|
||||
@@ -247,30 +221,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "¿Cómo funciona la prueba gratuita?",
|
||||
content: "Ofrecemos una prueba gratuita de 7 días para que explores todas las funcionalidades de nuestro plan Profesional sin compromiso.",
|
||||
},
|
||||
id: "q1", title: "¿Cómo funciona la prueba gratuita?", content: "Ofrecemos una prueba gratuita de 7 días para que explores todas las funcionalidades de nuestro plan Profesional sin compromiso."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "¿Necesito conocimientos contables para usar la app?",
|
||||
content: "Nuestra interfaz es intuitiva y está diseñada para ser usada tanto por contadores como por contribuyentes sin experiencia previa. Sin embargo, para decisiones complejas, siempre recomendamos consultar con un profesional.",
|
||||
},
|
||||
id: "q2", title: "¿Necesito conocimientos contables para usar la app?", content: "Nuestra interfaz es intuitiva y está diseñada para ser usada tanto por contadores como por contribuyentes sin experiencia previa. Sin embargo, para decisiones complejas, siempre recomendamos consultar con un profesional."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "¿Qué seguridad tienen mis datos fiscales?",
|
||||
content: "Utilizamos encriptación de grado bancario y seguimos los más altos estándares de seguridad para proteger toda tu información fiscal y personal.",
|
||||
},
|
||||
id: "q3", title: "¿Qué seguridad tienen mis datos fiscales?", content: "Utilizamos encriptación de grado bancario y seguimos los más altos estándares de seguridad para proteger toda tu información fiscal y personal."},
|
||||
{
|
||||
id: "q4",
|
||||
title: "¿Puedo cambiar de plan en cualquier momento?",
|
||||
content: "Sí, puedes ascender o descender de plan en cualquier momento. El cambio se aplicará de forma proporcional en tu próxima facturación.",
|
||||
},
|
||||
id: "q4", title: "¿Puedo cambiar de plan en cualquier momento?", content: "Sí, puedes ascender o descender de plan en cualquier momento. El cambio se aplicará de forma proporcional en tu próxima facturación."},
|
||||
{
|
||||
id: "q5",
|
||||
title: "¿Se integra con otros sistemas?",
|
||||
content: "Actualmente estamos trabajando en integraciones con plataformas de facturación electrónica y bancos. Consulta nuestra hoja de ruta para más detalles.",
|
||||
},
|
||||
id: "q5", title: "¿Se integra con otros sistemas?", content: "Actualmente estamos trabajando en integraciones con plataformas de facturación electrónica y bancos. Consulta nuestra hoja de ruta para más detalles."},
|
||||
]}
|
||||
title="¿Preguntas frecuentes?"
|
||||
description="Resolvemos tus dudas más comunes sobre nuestra plataforma y servicios."
|
||||
@@ -283,15 +242,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Alpha Solutions",
|
||||
"Innovate Corp",
|
||||
"Global Connect",
|
||||
"Dynamic Growth",
|
||||
"Swift Solutions",
|
||||
"Nexus Tech",
|
||||
"Pinnacle Services",
|
||||
"Velocity Corp",
|
||||
]}
|
||||
"Alpha Solutions", "Innovate Corp", "Global Connect", "Dynamic Growth", "Swift Solutions", "Nexus Tech", "Pinnacle Services", "Velocity Corp"]}
|
||||
title="La confianza de nuestros clientes nos impulsa."
|
||||
description="Trabajamos con empresas y profesionales de todo el país, ayudándolos a optimizar su gestión fiscal."
|
||||
/>
|
||||
@@ -306,67 +257,41 @@ export default function LandingPage() {
|
||||
logoText="[NOMBRE DE TU MARCA]"
|
||||
columns={[
|
||||
{
|
||||
title: "Empresa",
|
||||
items: [
|
||||
title: "Empresa", items: [
|
||||
{
|
||||
label: "Sobre Nosotros",
|
||||
href: "#",
|
||||
},
|
||||
label: "Sobre Nosotros", href: "#"},
|
||||
{
|
||||
label: "Contacto",
|
||||
href: "#",
|
||||
},
|
||||
label: "Contacto", href: "#"},
|
||||
{
|
||||
label: "Carreras",
|
||||
href: "#",
|
||||
},
|
||||
label: "Carreras", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soluciones",
|
||||
items: [
|
||||
title: "Soluciones", items: [
|
||||
{
|
||||
label: "Monotributo",
|
||||
href: "/app/monotributo",
|
||||
},
|
||||
label: "Monotributo", href: "/app/monotributo"},
|
||||
{
|
||||
label: "IVA",
|
||||
href: "/app/iva",
|
||||
},
|
||||
label: "IVA", href: "/app/iva"},
|
||||
{
|
||||
label: "Ganancias",
|
||||
href: "/app/ganancias",
|
||||
},
|
||||
label: "Ganancias", href: "/app/ganancias"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soporte",
|
||||
items: [
|
||||
title: "Soporte", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "/#faq",
|
||||
},
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Ayuda",
|
||||
href: "#",
|
||||
},
|
||||
label: "Ayuda", href: "#"},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
label: "Blog", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Términos de Servicio",
|
||||
href: "#",
|
||||
},
|
||||
label: "Términos de Servicio", href: "#"},
|
||||
{
|
||||
label: "Política de Privacidad",
|
||||
href: "#",
|
||||
},
|
||||
label: "Política de Privacidad", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
162
src/app/payroll/page.tsx
Normal file
162
src/app/payroll/page.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import { UserPlus, FileText, UploadCloud, ReceiptText, Wallet, ClipboardCheck } from "lucide-react";
|
||||
|
||||
export default function PayrollPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio", id: "/"},
|
||||
{
|
||||
name: "Características", id: "/caracteristicas"},
|
||||
{
|
||||
name: "Precios", id: "/precios"},
|
||||
{
|
||||
name: "Empleados y Sueldos", id: "/payroll"},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"},
|
||||
]}
|
||||
button={{
|
||||
text: "Iniciar Sesión", href: "/auth/login"}}
|
||||
topBarButton={{
|
||||
text: "Registrarse", href: "/auth/register"}}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
title="Módulo de Empleados y Sueldos"
|
||||
description="Simplifica la gestión de personal y nóminas en Argentina con herramientas completas: registro, liquidación, contribuciones y más."
|
||||
buttons={[
|
||||
{
|
||||
text: "Empezar Gestión", href: "/auth/register"},
|
||||
{
|
||||
text: "Solicitar Demo", href: "/contact"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-workers-modern-office_23-2149301036.jpg?_wi=1", imageAlt: "Team working on payroll"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/financial-management-collage_23-2151121096.jpg", imageAlt: "Payroll data and analytics"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="payroll-features" data-section="payroll-features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "employee-registration", title: "Registro de Empleados", tags: ["Alta Rápida", "Datos Personales"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/human-resources-management_23-2151152063.jpg?_wi=1", imageAlt: "Employee registration form", onFeatureClick: () => console.log("Employee Registration clicked")
|
||||
},
|
||||
{
|
||||
id: "salary-liquidation", title: "Liquidación de Salarios", tags: ["Automatizado", "Precisión"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-calculating-taxes_23-2149176465.jpg?_wi=1", imageAlt: "Salary calculation interface", onFeatureClick: () => console.log("Salary Liquidation clicked")
|
||||
},
|
||||
{
|
||||
id: "employer-contributions", title: "Contribuciones Empleador", tags: ["Seguridad Social", "AFIP"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tax-payment-calculator-document_23-2149176451.jpg?_wi=1", imageAlt: "Employer contributions report", onFeatureClick: () => console.log("Employer Contributions clicked")
|
||||
},
|
||||
{
|
||||
id: "f931-summary", title: "Resumen Mensual F931", tags: ["Generación Automática", "Cumplimiento"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tax-form-pen-calculator-table_23-2149176449.jpg?_wi=1", imageAlt: "F931 summary document", onFeatureClick: () => console.log("F931 Summary clicked")
|
||||
},
|
||||
{
|
||||
id: "printable-payslip", title: "Recibos de Sueldo Imprimibles", tags: ["Personalizado", "Descargable"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/financial-document-paperwork-concept_23-2151121085.jpg?_wi=1", imageAlt: "Printable payslip example", onFeatureClick: () => console.log("Printable Payslip clicked")
|
||||
},
|
||||
{
|
||||
id: "file-upload", title: "Carga Masiva de Datos", tags: ["Importación", "Eficiencia"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-using-mobile-phone-working_23-2149488358.jpg?_wi=1", imageAlt: "File upload interface for employee data", onFeatureClick: () => console.log("File Upload clicked")
|
||||
}
|
||||
]}
|
||||
title="Gestión de Nóminas al detalle."
|
||||
description="Desde el alta de empleados hasta la generación de F931 y recibos, todo en un solo lugar."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-306797.jpg?_wi=1"
|
||||
imageAlt="Abstract tech background"
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
logoText="[NOMBRE DE TU MARCA]"
|
||||
columns={[
|
||||
{
|
||||
title: "Empresa", items: [
|
||||
{
|
||||
label: "Sobre Nosotros", href: "#"},
|
||||
{
|
||||
label: "Contacto", href: "#"},
|
||||
{
|
||||
label: "Carreras", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soluciones", items: [
|
||||
{
|
||||
label: "Monotributo", href: "/app/monotributo"},
|
||||
{
|
||||
label: "IVA", href: "/app/iva"},
|
||||
{
|
||||
label: "Ganancias", href: "/app/ganancias"},
|
||||
{
|
||||
label: "Empleados y Sueldos", href: "/payroll"}
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soporte", items: [
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Ayuda", href: "#"},
|
||||
{
|
||||
label: "Blog", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Términos de Servicio", href: "#"},
|
||||
{
|
||||
label: "Política de Privacidad", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 [NOMBRE DE TU MARCA]. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
112
src/app/settings/page.tsx
Normal file
112
src/app/settings/page.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import Textarea from '@/components/form/Textarea';
|
||||
|
||||
export default function SettingsPage() {
|
||||
const navItems = [
|
||||
{ name: "Inicio", id: "/" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Configuración", id: "/settings" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Iniciar Sesión", href: "/auth/login" }}
|
||||
topBarButton={{ text: "Registrarse", href: "/auth/register" }}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-4xl font-extrabold mb-8 text-foreground">Configuración del Módulo</h1>
|
||||
|
||||
{/* Accounting Firm Data Form */}
|
||||
<section className="mb-12 p-6 bg-card rounded-lg shadow-subtle-shadow">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-foreground">Datos de la Firma Contable</h2>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="firmName" className="block text-sm font-medium text-foreground">Nombre de la Firma</label>
|
||||
<input type="text" id="firmName" name="firmName" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-background-accent text-foreground" placeholder="Ej: Contadores Asociados S.A." />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="firmCuit" className="block text-sm font-medium text-foreground">CUIT de la Firma</label>
|
||||
<input type="text" id="firmCuit" name="firmCuit" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-background-accent text-foreground" placeholder="Ej: 30-71234567-8" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="firmAddress" className="block text-sm font-medium text-foreground">Dirección</label>
|
||||
<input type="text" id="firmAddress" name="firmAddress" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-background-accent text-foreground" placeholder="Ej: Av. Corrientes 1234, CABA" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="firmPhone" className="block text-sm font-medium text-foreground">Teléfono</label>
|
||||
<input type="tel" id="firmPhone" name="firmPhone" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-background-accent text-foreground" placeholder="Ej: +54 9 11 5555-1234" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="firmEmail" className="block text-sm font-medium text-foreground">Email de Contacto</label>
|
||||
<input type="email" id="firmEmail" name="firmEmail" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-background-accent text-foreground" placeholder="Ej: info@contadoresasociados.com" />
|
||||
</div>
|
||||
<button type="submit" className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-opacity-90 transition-colors">Guardar Datos de la Firma</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{/* User Fiscal Data Form */}
|
||||
<section className="mb-12 p-6 bg-card rounded-lg shadow-subtle-shadow">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-foreground">Datos Fiscales del Usuario</h2>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="userCuit" className="block text-sm font-medium text-foreground">CUIT del Usuario</label>
|
||||
<input type="text" id="userCuit" name="userCuit" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-background-accent text-foreground" placeholder="Ej: 20-12345678-9" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="fiscalCondition" className="block text-sm font-medium text-foreground">Condición Fiscal</label>
|
||||
<select id="fiscalCondition" name="fiscalCondition" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-background-accent text-foreground">
|
||||
<option value="">Seleccione</option>
|
||||
<option value="monotributo">Monotributista</option>
|
||||
<option value="responsable-inscripto">Responsable Inscripto</option>
|
||||
<option value="exento">Exento</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="activityDescription" className="block text-sm font-medium text-foreground">Descripción de Actividad</label>
|
||||
<Textarea value={''} onChange={() => {}} placeholder="Ej: Desarrollo de software, servicios contables" rows={3} />
|
||||
</div>
|
||||
<button type="submit" className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-opacity-90 transition-colors">Guardar Datos Fiscales</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{/* File Upload for Configuration Data */}
|
||||
<section className="p-6 bg-card rounded-lg shadow-subtle-shadow">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-foreground">Subir Archivos de Configuración</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="configFile" className="block text-sm font-medium text-foreground">Subir archivo (.json, .csv, .xml)</label>
|
||||
<input type="file" id="configFile" name="configFile" className="mt-1 block w-full text-foreground file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-opacity-90" />
|
||||
<p className="mt-2 text-sm text-gray-500">Tamaño máximo de archivo: 5MB</p>
|
||||
</div>
|
||||
<button type="button" className="px-4 py-2 bg-primary-cta text-white rounded-md hover:bg-opacity-90 transition-colors">Cargar Configuración</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #106EFB;
|
||||
--background-accent: #e6f0ff;
|
||||
--background: #010912;
|
||||
--card: #152840;
|
||||
--foreground: #e6f0ff;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta-text: #010912;
|
||||
--secondary-cta: #0e1a29;
|
||||
--secondary-cta-text: #e6f0ff;
|
||||
--accent: #3f5c79;
|
||||
--background-accent: #004a93;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
250
src/app/vencimientos-afip/page.tsx
Normal file
250
src/app/vencimientos-afip/page.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { Download, Upload, CalendarDays, Bell, CheckCircle } from "lucide-react"; // Importing icons for features
|
||||
import { useState, useEffect } from 'react'; // Import useState and useEffect
|
||||
|
||||
|
||||
export default function VencimientosAFIPPage() {
|
||||
// Mock data for demonstration - in a real app, this would come from an API or file upload
|
||||
const deadlines = [
|
||||
{ id: '1', date: '2025-01-10', taxType: 'IVA', description: 'Declaración jurada mensual', status: 'pending' },
|
||||
{ id: '2', date: '2025-01-15', taxType: 'Monotributo', description: 'Pago de cuota', status: 'pending' },
|
||||
{ id: '3', date: '2025-01-20', taxType: 'Ganancias', description: 'Anticipo', status: 'paid' },
|
||||
{ id: '4', date: '2025-02-10', taxType: 'IVA', description: 'Declaración jurada mensual', status: 'pending' },
|
||||
{ id: '5', date: '2025-02-15', taxType: 'Monotributo', description: 'Recategorización', status: 'pending' }
|
||||
];
|
||||
|
||||
const taxTypes = ['All', 'IVA', 'Monotributo', 'Ganancias', 'Bienes Personales'];
|
||||
const [selectedTaxType, setSelectedTaxType] = useState('All');
|
||||
const [filteredDeadlines, setFilteredDeadlines] = useState(deadlines);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTaxType === 'All') {
|
||||
setFilteredDeadlines(deadlines);
|
||||
} else {
|
||||
setFilteredDeadlines(deadlines.filter(d => d.taxType === selectedTaxType));
|
||||
}
|
||||
}, [selectedTaxType, deadlines]);
|
||||
|
||||
const handleMarkAsPaid = (id: string) => {
|
||||
console.log(`Marking deadline ${id} as paid`);
|
||||
setFilteredDeadlines(prevDeadlines =>
|
||||
prevDeadlines.map(d =>
|
||||
d.id === id ? { ...d, status: 'paid' } : d
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
console.log('File uploaded:', file.name);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
{/* Navbar - copied from home page */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Inicio", id: "/" },
|
||||
{ name: "Características", id: "/#features" },
|
||||
{ name: "Vencimientos AFIP", id: "/vencimientos-afip" },
|
||||
{ name: "Precios", id: "/#pricing" },
|
||||
{ name: "FAQ", id: "/#faq" }
|
||||
]}
|
||||
button={{ text: "Iniciar Sesión", href: "/auth/login" }}
|
||||
topBarButton={{ text: "Registrarse", href: "/auth/register" }}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
brandName="[NOMBRE DE TU MARCA]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto p-4 py-16">
|
||||
<section className="text-center mb-12">
|
||||
<h1 className="text-4xl font-extrabold mb-4">Vencimientos AFIP 2025</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Mantente al día con todas tus obligaciones fiscales. Consulta, filtra, marca como pagado y recibe notificaciones.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12 p-6 bg-white rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6 flex items-center gap-2">
|
||||
<CalendarDays className="h-6 w-6 text-primary-cta" /> Calendario de Vencimientos
|
||||
</h2>
|
||||
|
||||
{/* Filter by Tax Type */}
|
||||
<div className="mb-6">
|
||||
<label htmlFor="tax-type-filter" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Filtrar por Tipo de Impuesto:
|
||||
</label>
|
||||
<select
|
||||
id="tax-type-filter"
|
||||
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
|
||||
value={selectedTaxType}
|
||||
onChange={(e) => setSelectedTaxType(e.target.value)}
|
||||
>
|
||||
{taxTypes.map(type => (
|
||||
<option key={type} value={type}>{type}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Deadlines List */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Fecha
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Tipo de Impuesto
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Descripción
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Estado
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Acciones
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredDeadlines.length > 0 ? (
|
||||
filteredDeadlines.map((deadline) => (
|
||||
<tr key={deadline.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{deadline.date}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deadline.taxType}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deadline.description}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
||||
deadline.status === 'paid' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
|
||||
}`}>
|
||||
{deadline.status === 'paid' ? 'Pagado' : 'Pendiente'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
{deadline.status === 'pending' && (
|
||||
<button
|
||||
onClick={() => handleMarkAsPaid(deadline.id)}
|
||||
className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-primary-cta hover:bg-primary-cta-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
|
||||
>
|
||||
<CheckCircle className="mr-1 h-4 w-4" /> Marcar como Pagado
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-4 text-center text-sm text-gray-500">
|
||||
No hay vencimientos para el tipo de impuesto seleccionado.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12 p-6 bg-white rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6 flex items-center gap-2">
|
||||
<Bell className="h-6 w-6 text-primary-cta" /> Notificaciones y Alertas
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-4">
|
||||
Recibirás recordatorios automáticos por email y WhatsApp antes de cada vencimiento,
|
||||
personalizados según tus impuestos y preferencias.
|
||||
</p>
|
||||
<button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-secondary-cta hover:bg-secondary-cta-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-cta">
|
||||
<Download className="mr-2 h-5 w-5" /> Descargar Calendario (ICS)
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="p-6 bg-white rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6 flex items-center gap-2">
|
||||
<Upload className="h-6 w-6 text-primary-cta" /> Cargar Datos de Vencimientos
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-4">
|
||||
Sube un archivo (CSV, Excel) con tus vencimientos personalizados. La plataforma
|
||||
procesará la información y la añadirá a tu calendario.
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv, .xlsx"
|
||||
onChange={handleFileUpload}
|
||||
className="block w-full text-sm text-gray-500
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-md file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-primary-cta file:text-white
|
||||
hover:file:bg-primary-cta-dark"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer - copied from home page */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-306797.jpg?_wi=1"
|
||||
imageAlt="Abstract tech background"
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6h5de9"
|
||||
logoAlt="[NOMBRE DE TU MARCA] Logo"
|
||||
logoText="[NOMBRE DE TU MARCA]"
|
||||
columns={[
|
||||
{
|
||||
title: "Empresa", items: [
|
||||
{ label: "Sobre Nosotros", href: "#" },
|
||||
{ label: "Contacto", href: "#" },
|
||||
{ label: "Carreras", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Soluciones", items: [
|
||||
{ label: "Monotributo", href: "/app/monotributo" },
|
||||
{ label: "IVA", href: "/app/iva" },
|
||||
{ label: "Ganancias", href: "/app/ganancias" },
|
||||
{ label: "Vencimientos AFIP", href: "/vencimientos-afip" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Soporte", items: [
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Ayuda", href: "#" },
|
||||
{ label: "Blog", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Términos de Servicio", href: "#" },
|
||||
{ label: "Política de Privacidad", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 [NOMBRE DE TU MARCA]. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user