C

alembic.ini

@@ -1,64 +1,28 @@
 # A generic, single database configuration.
 
 [alembic]
-# path to migration scripts
+# Path to migration scripts
 script_location = alembic
 
-# template used to generate migration files
+# Template used to generate migration files
 # file_template = %%(rev)s_%%(slug)s
 
-# sys.path path, will be prepended to sys.path if present.
-# defaults to the current working directory.
+# Sys.path path, will be prepended to sys.path if present.
+# Defaults to the current working directory.
 prepend_sys_path = .
 
-# timezone to use when rendering the date within the migration file
-# as well as the filename.
-# If specified, requires the python-dateutil library that can be
-# installed by adding `alembic[tz]` to the pip requirements
-# timezone =
-
-# max length of characters to apply to the
-# "slug" field
-# truncate_slug_length = 40
-
-# set to 'true' to run the environment during
-# the 'revision' command, regardless of autogenerate
-# revision_environment = false
-
-# set to 'true' to allow .pyc and .pyo files without
-# a source .py file to be detected as revisions in the
-# versions/ directory
-# sourceless = false
-
-# version location specification; This defaults
-# to alembic/versions.  When using multiple version
-# directories, initial revisions must be specified with --version-path.
-# The path separator used here should be the separator specified by "version_path_separator" below.
-# version_locations = %(here)s/bar:%(here)s/bat:alembic/versions
-
-# version path separator; As mentioned above, this is the character used to split
-# version_locations. The default within new alembic.ini files is "os", which uses os.pathsep.
-# If this key is omitted entirely, it falls back to the legacy behavior of splitting on spaces and/or colons.
-# Valid values for version_path_separator are:
-#
-# version_path_separator = :
-# version_path_separator = ;
-# version_path_separator = space
+# Version path separator
 version_path_separator = os  # Use os.pathsep. Default configuration used for new projects.
 
-# the output encoding used when revision files
-# are written from script.py.mako
-# output_encoding = utf-8
-
+# Database connection string (SQLite persistent database)
 sqlalchemy.url = sqlite+aiosqlite:///./sql_app.db
 
+# Explicitly set pooling to avoid unnecessary resets
+[sqlalchemy]
+poolclass = QueuePool
 
+# Post-migration hooks (optional, can be customized)
 [post_write_hooks]
-# post_write_hooks defines scripts or Python functions that are run
-# on newly generated revision scripts.  See the documentation for further
-# detail and examples
-
-# format using "black" - use the console_scripts runner, against the "black" entrypoint
 # hooks = black
 # black.type = console_scripts
 # black.entrypoint = black
@@ -97,4 +61,4 @@ formatter = generic
 
 [formatter_generic]
 format = %(levelname)-5.5s [%(name)s] %(message)s
-datefmt = %H:%M:%S 
+datefmt = %H:%M:%S

alembic/versions/3ac87142c0f1_add_invoice_sequence.py

@@ -1,28 +0,0 @@
-"""add invoice sequence and client type
-
-Revision ID: xxxx
-Revises: previous_revision_id
-Create Date: 2024-xx-xx
-"""
-from alembic import op
-import sqlalchemy as sa
-
-def upgrade():
-    # Create sequence for invoice IDs
-    op.execute('CREATE SEQUENCE IF NOT EXISTS invoice_id_seq START 1')
-    
-    # Add client_type column if not exists
-    op.add_column('invoices', sa.Column('client_type', sa.String(10), nullable=True))
-    
-    # Make invoice_number unique
-    op.create_unique_constraint('uq_invoice_number', 'invoices', ['invoice_number'])
-
-def downgrade():
-    # Remove unique constraint
-    op.drop_constraint('uq_invoice_number', 'invoices')
-    
-    # Drop client_type column
-    op.drop_column('invoices', 'client_type')
-    
-    # Drop sequence
-    op.execute('DROP SEQUENCE IF EXISTS invoice_id_seq') 

alembic/versions/59c6283aeb7f_add_invoice_sequence.py

@@ -1,30 +0,0 @@
-"""add invoice sequence
-
-Revision ID: 59c6283aeb7f
-Revises: f8ee2909b4a1
-Create Date: 2025-01-28 23:00:46.031532
-
-"""
-from typing import Sequence, Union
-
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision: str = '59c6283aeb7f'
-down_revision: Union[str, None] = 'f8ee2909b4a1'
-branch_labels: Union[str, Sequence[str], None] = None
-depends_on: Union[str, Sequence[str], None] = None
-
-
-def upgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    pass
-    # ### end Alembic commands ###
-
-
-def downgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    pass
-    # ### end Alembic commands ### 

alembic/versions/9db9ce94286f_add_commercial_field.py

@@ -1,65 +0,0 @@
-"""add_commercial_field
-
-Revision ID: 9db9ce94286f
-Revises: 
-Create Date: 2025-01-29 13:45:40.493950
-
-"""
-from typing import Sequence, Union
-
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision: str = '9db9ce94286f'
-down_revision: Union[str, None] = None
-branch_labels: Union[str, Sequence[str], None] = None
-depends_on: Union[str, Sequence[str], None] = None
-
-
-def upgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.create_table('invoices',
-    sa.Column('id', sa.Integer(), nullable=False),
-    sa.Column('invoice_number', sa.String(), nullable=True),
-    sa.Column('date', sa.DateTime(), nullable=True),
-    sa.Column('project', sa.String(), nullable=True),
-    sa.Column('client_name', sa.String(), nullable=True),
-    sa.Column('client_phone', sa.String(), nullable=True),
-    sa.Column('address', sa.String(), nullable=True),
-    sa.Column('total_ht', sa.Float(), nullable=True),
-    sa.Column('tax', sa.Float(), nullable=True),
-    sa.Column('total_ttc', sa.Float(), nullable=True),
-    sa.Column('frame_number', sa.String(), nullable=True),
-    sa.Column('customer_name', sa.String(), nullable=True),
-    sa.Column('amount', sa.Float(), nullable=True),
-    sa.Column('status', sa.String(), nullable=True),
-    sa.Column('created_at', sa.DateTime(), nullable=True),
-    sa.Column('commercial', sa.String(), nullable=True),
-    sa.PrimaryKeyConstraint('id')
-    )
-    op.create_index(op.f('ix_invoices_id'), 'invoices', ['id'], unique=False)
-    op.create_table('invoice_items',
-    sa.Column('id', sa.Integer(), nullable=False),
-    sa.Column('invoice_id', sa.Integer(), nullable=True),
-    sa.Column('description', sa.String(), nullable=True),
-    sa.Column('unit', sa.String(), nullable=True),
-    sa.Column('quantity', sa.Integer(), nullable=True),
-    sa.Column('length', sa.Float(), nullable=True),
-    sa.Column('unit_price', sa.Float(), nullable=True),
-    sa.Column('total_price', sa.Float(), nullable=True),
-    sa.ForeignKeyConstraint(['invoice_id'], ['invoices.id'], ),
-    sa.PrimaryKeyConstraint('id')
-    )
-    op.create_index(op.f('ix_invoice_items_id'), 'invoice_items', ['id'], unique=False)
-    # ### end Alembic commands ###
-
-
-def downgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.drop_index(op.f('ix_invoice_items_id'), table_name='invoice_items')
-    op.drop_table('invoice_items')
-    op.drop_index(op.f('ix_invoices_id'), table_name='invoices')
-    op.drop_table('invoices')
-    # ### end Alembic commands ### 

alembic/versions/f8ee2909b4a1_add_client_type.py

@@ -1,30 +0,0 @@
-"""add client type
-
-Revision ID: f8ee2909b4a1
-Revises: 
-Create Date: 2025-01-28 22:54:07.661020
-
-"""
-from typing import Sequence, Union
-
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision: str = 'f8ee2909b4a1'
-down_revision: Union[str, None] = None
-branch_labels: Union[str, Sequence[str], None] = None
-depends_on: Union[str, Sequence[str], None] = None
-
-
-def upgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    pass
-    # ### end Alembic commands ###
-
-
-def downgrade() -> None:
-    # ### commands auto generated by Alembic - please adjust! ###
-    pass
-    # ### end Alembic commands ### 

app/db/database.py

@@ -25,4 +25,7 @@ async def get_db() -> AsyncSession:
             await session.rollback()
             raise
         finally:
-            await session.close()
+            await session.close()
+            
+            
+###sdf

app/models/invoice.py

@@ -1,10 +0,0 @@
-from sqlalchemy import Column, Integer, String, DateTime, Float, ForeignKey, Sequence
-from sqlalchemy.orm import relationship
-from ..database import Base
-
-class Invoice(Base):
-    __tablename__ = "invoices"
-    
-    id = Column(Integer, Sequence('invoice_id_seq'), primary_key=True)
-    invoice_number = Column(String, unique=True)
-    # ... rest of your columns ... 

app/routes/invoice.py

@@ -1,47 +0,0 @@
-from fastapi import APIRouter, Depends, HTTPException
-from sqlalchemy.orm import Session
-from sqlalchemy import func
-from typing import Optional
-from ..database import get_db
-from ..models.invoice import Invoice, ClientType
-
-router = APIRouter()
-
-@router.get("/api/invoices/next-number/{client_type}")
-async def get_next_invoice_number(client_type: str, db: Session = Depends(get_db)):
-    if client_type not in ClientType.__members__:
-        raise HTTPException(status_code=400, detail="Invalid client type")
-    
-    # Get the last invoice number for this client type
-    last_invoice = db.query(Invoice)\
-        .filter(Invoice.client_type == ClientType[client_type])\
-        .order_by(Invoice.id.desc())\
-        .first()
-    
-    if last_invoice:
-        # Extract the number from the last invoice number (DCP/TYPE/NUMBER)
-        try:
-            last_number = int(last_invoice.invoice_number.split('/')[-1])
-            next_number = last_number + 1
-        except (ValueError, IndexError):
-            next_number = 1
-    else:
-        next_number = 1
-    
-    return {"next_number": f"{next_number:04d}"}  # Format as 4 digits
-
-@router.post("/api/invoices/")
-async def create_invoice(invoice_data: InvoiceCreate, db: Session = Depends(get_db)):
-    # Extract client type from invoice number
-    try:
-        client_type = invoice_data.invoice_number.split('/')[1]
-        if client_type not in ClientType.__members__:
-            raise HTTPException(status_code=400, detail="Invalid client type in invoice number")
-    except IndexError:
-        raise HTTPException(status_code=400, detail="Invalid invoice number format")
-
-    db_invoice = Invoice(
-        client_type=ClientType[client_type],
-        **invoice_data.dict()
-    )
-    # ... rest of your existing create logic ... 

app/services/invoice_service.py

@@ -20,7 +20,7 @@ class InvoiceService:
 
             # Constants
             HEADER_BLUE = (0.29, 0.45, 0.68)
-            BLUE_LIGHT = (0.8, 0.8, 1)
+            BLUE_LIGHT = (1.5, 1.5, 1)
             WHITE = (1, 1, 1)
             BLACK = (0, 0, 0)
             MARGIN = 30
@@ -121,8 +121,10 @@ class InvoiceService:
             table_x = (page_width - total_width) / 2  # Center table
             draw_box(pdf, table_x, table_y, total_width, LINE_HEIGHT, fill_color=HEADER_BLUE)
             pdf.setFillColorRGB(*WHITE)
-
-            current_x = table_x
+            # add little bit of space 
+            
+            
+            current_x = table_x 
             for title, width in headers:
                 draw_box(pdf, current_x, table_y, width, LINE_HEIGHT)
                 draw_centered_text(pdf, title, current_x, table_y + 6, width)
@@ -130,7 +132,7 @@ class InvoiceService:
 
 
             # Draw sections and items
-            current_y = table_y - LINE_HEIGHT
+            current_y = table_y - LINE_HEIGHT - 10
 
             def draw_section_header(title):
                 nonlocal current_y
@@ -186,10 +188,10 @@ class InvoiceService:
 
             # Draw sections
             sections = [
-                ("POUTRELLES", "PCP"),
-                ("HOURDIS", "HOURDIS"),
-                ("PANNEAU TREILLIS SOUDES", "PTS"),
-                ("AGGLOS", "AGGLOS")
+                ("POUTRELLES :", "PCP"),
+                ("HOURDIS :", "HOURDIS"),
+                ("PANNEAU TREILLIS SOUDES :", "PTS"),
+                ("AGGLOS :", "AGGLOS")
             ]
 
             for section_title, keyword in sections:
@@ -251,17 +253,28 @@ class InvoiceService:
             footer_text = "Douar Ait Laarassi Tidili, Cercle El Kelâa, Route de Safi, Km 14-40000 Marrakech"
             pdf.drawCentredString(page_width / 2 + 20, 30, footer_text)
 
-
+            # add the commercial phone number
+            # i have salah with 0666666666 and khaled with 077777777 and ismale with 08888888 and jamal with 099999999
+            commercial_info = dict(
+                salah = "06 62 29 99 78",
+                khaled= "06 66 24 80 94",
+                ismail= "06 66 24 50 15",
+                jamal = "06 70 08 36 50"
+            )
             # Add commercial info to footer
             print(f"Commercial value: {data.commercial}")  # Add this debug line
             if data.commercial and data.commercial.lower() != 'divers':
                 commercial_text = f"Commercial: {data.commercial.upper()}"
-                pdf.drawString(MARGIN, 20, commercial_text)
+                commercial_phone = f"Tél: {commercial_info.get(data.commercial.lower(), '')}"
+                
+                pdf.drawString(MARGIN + 10, 30, commercial_text)
+                #draw under the commercial text : 
+                pdf.drawString(MARGIN + 10, 20, commercial_phone)
                 footer_contact = "Tél: 05 24 01 55 54 Fax : 05 24 01 55 29 E-mail : [email protected]"
-                pdf.drawCentredString(page_width / 2, 20, footer_contact)
+                pdf.drawCentredString(page_width / 2 + 10, 20, footer_contact)
             else:
                 footer_contact = "Tél: 05 24 01 55 54 Fax : 05 24 01 55 29 E-mail : [email protected]"
-                pdf.drawCentredString(page_width / 2, 20, footer_contact)
+                pdf.drawCentredString(page_width / 2 + 10, 20, footer_contact)
 
             pdf.save()
             buffer.seek(0)

app/templates/index copy 2.html

@@ -0,0 +1,853 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Invoice Generator</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #34495e;
+            --accent-color: #3498db;
+            --light-gray: #f8f9fa;
+            --border-radius: 8px;
+        }
+
+        body {
+            background-color: #f5f6fa;
+            color: var(--primary-color);
+        }
+
+        .container {
+            max-width: 1400px;
+            padding: 2rem;
+        }
+
+        .card {
+            border: none;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+            border-radius: var(--border-radius);
+            margin-bottom: 1.5rem;
+        }
+
+        .card-header {
+            background-color: var(--primary-color);
+            color: white;
+            border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
+            padding: 1rem;
+            font-weight: 500;
+        }
+
+        .card-body {
+            padding: 1.5rem;
+        }
+
+        .form-control {
+            border: 1px solid #dee2e6;
+            border-radius: var(--border-radius);
+            padding: 0.75rem;
+            transition: all 0.3s ease;
+        }
+
+        .form-control:focus {
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+        }
+
+        .btn-primary {
+            background-color: var(--accent-color);
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: var(--border-radius);
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary:hover {
+            background-color: #2980b9;
+            transform: translateY(-1px);
+        }
+
+        .btn-success {
+            background-color: #2ecc71;
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: var(--border-radius);
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+
+        .btn-success:hover {
+            background-color: #27ae60;
+            transform: translateY(-2px);
+        }
+
+        .table {
+            background-color: white;
+            border-radius: var(--border-radius);
+            overflow: hidden;
+        }
+
+        .table-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .table th {
+            font-weight: 500;
+            padding: 1rem;
+        }
+
+        .table td {
+            padding: 0.75rem;
+            vertical-align: middle;
+        }
+
+        .section-title {
+            background-color: var(--secondary-color);
+            color: white;
+            padding: 1rem;
+            margin: 2rem 0 1rem;
+            border-radius: var(--border-radius);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .section-title h4 {
+            margin: 0;
+            font-weight: 500;
+        }
+
+        .btn-group {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 0.25rem;
+        }
+
+        .btn-check + .btn-outline-primary {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+
+        .btn-check:checked + .btn-outline-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .modal-content {
+            border-radius: var(--border-radius);
+            border: none;
+            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
+        }
+
+        .modal-header {
+            background-color: var(--primary-color);
+            color: white;
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+
+        .btn-close {
+            filter: brightness(0) invert(1);
+        }
+
+        .btn-danger {
+            background-color: #e74c3c;
+            border: none;
+            border-radius: var(--border-radius);
+            transition: all 0.3s ease;
+        }
+
+        .btn-danger:hover {
+            background-color: #c0392b;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            .card-body {
+                padding: 1rem;
+            }
+
+            .btn {
+                padding: 0.5rem 1rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <!-- Header -->
+    <header class="bg-primary py-4 mb-4 shadow-sm">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <h1 class="text-white mb-0">Générateur de Devis</h1>
+                </div>
+                <div class="col-md-6 text-end">
+                    <img src="/static/logo.png" alt="Logo" height="50" class="img-fluid">
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="container">
+        <!-- Main Content -->
+        <div class="row">
+            <div class="col-12">
+                <div class="card shadow-sm mb-4">
+                    <div class="card-body">
+                        <form id="invoiceForm">
+                            <!-- Client and Invoice Information -->
+                            <div class="row mb-4">
+                                <!-- Client Information Card -->
+                                <div class="col-md-6">
+                                    <div class="card h-100">
+                                        <div class="card-header d-flex justify-content-between align-items-center">
+                                            <h5 class="mb-0">Information Client</h5>
+                                            <i class="fas fa-user"></i>
+                                        </div>
+                                        <div class="card-body">
+                                            <div class="mb-3">
+                                                <label for="clientName" class="form-label">Nom du Client</label>
+                                                <input type="text" class="form-control" id="clientName" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="clientPhone" class="form-label">Téléphone</label>
+                                                <input type="tel" class="form-control" id="clientPhone" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="clientAddress" class="form-label">Adresse</label>
+                                                <input type="text" class="form-control" id="clientAddress" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label class="form-label">Type Client</label>
+                                                <div class="btn-group w-100" role="group">
+                                                    <input type="radio" class="btn-check" name="clientType" id="EE" value="EE" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="EE">EE</label>
+
+                                                    <input type="radio" class="btn-check" name="clientType" id="MED" value="MED" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="MED">MED</label>
+
+                                                    <input type="radio" class="btn-check" name="clientType" id="AM" value="AM" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="AM">AM</label>
+
+                                                    <input type="radio" class="btn-check" name="clientType" id="DIV" value="DIV" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="DIV">DIV</label>
+                                                </div>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label class="form-label">Commercial</label>
+                                                <select class="form-select" id="commercial" required>
+                                                    <option value="">Sélectionner un commercial</option>
+                                                    <option value="khaled">Khaled</option>
+                                                    <option value="salah">Salah</option>
+                                                    <option value="ismail">Ismail</option>
+                                                    <option value="jamal">Jamal</option>
+                                                    <option value="divers">Divers</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Invoice Information Card -->
+                                <div class="col-md-6">
+                                    <div class="card h-100">
+                                        <div class="card-header d-flex justify-content-between align-items-center">
+                                            <h5 class="mb-0">Information Devis</h5>
+                                            <i class="fas fa-file-invoice"></i>
+                                        </div>
+                                        <div class="card-body">
+                                            <div class="mb-3">
+                                                <label for="invoiceNumber" class="form-label">N° Devis</label>
+                                                <input type="text" class="form-control" id="invoiceNumber" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="date" class="form-label">Date</label>
+                                                <input type="date" class="form-control" id="date" readonly>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="project" class="form-label">Type d'ouvrage</label>
+                                                <input type="text" class="form-control" id="project" required>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Items Sections -->
+                            <div class="card shadow-sm mb-4">
+                                <div class="card-body">
+                                    <!-- Poutrelles Section -->
+                                    <div class="section-title">
+                                        <h4>POUTRELLES</h4>
+                                        <button type="button" class="btn btn-light" id="addPoutrelles">
+                                            <i class="fas fa-plus"></i> Ajouter Poutrelle
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="poutrellesTable"></tbody>
+                                        </table>
+                                    </div>
+
+                                    <!-- Hourdis Section -->
+                                    <div class="section-title mt-4">
+                                        <h4>HOURDIS</h4>
+                                        <button type="button" class="btn btn-light" id="addHourdis">
+                                            <i class="fas fa-plus"></i> Ajouter Hourdis
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="hourdisTable"></tbody>
+                                        </table>
+                                    </div>
+
+                                    <!-- Panneau Section -->
+                                    <div class="section-title mt-4">
+                                        <h4>PANNEAU TREILLIS SOUDES</h4>
+                                        <button type="button" class="btn btn-light" id="addPanneau">
+                                            <i class="fas fa-plus"></i> Ajouter Panneau
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="panneauTable"></tbody>
+                                        </table>
+                                    </div>
+
+                                    <!-- Agglos Section -->
+                                    <div class="section-title mt-4">
+                                        <h4>AGGLOS</h4>
+                                        <button type="button" class="btn btn-light" id="addAgglos">
+                                            <i class="fas fa-plus"></i> Ajouter Agglos
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="agglosTable"></tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Totals Section -->
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <!-- Empty for spacing -->
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="card shadow-sm">
+                                        <div class="card-header">
+                                            <h5 class="mb-0">Totaux</h5>
+                                        </div>
+                                        <div class="card-body">
+                                            <div class="mb-3">
+                                                <label for="totalHT" class="form-label">Total HT</label>
+                                                <input type="number" class="form-control" id="totalHT" readonly>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="tax" class="form-label">TVA 20%</label>
+                                                <input type="number" class="form-control" id="tax" readonly>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="totalTTC" class="form-label">Total TTC</label>
+                                                <input type="number" class="form-control" id="totalTTC" readonly>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Submit Button -->
+                            <div class="d-grid gap-2 col-md-6 mx-auto mt-4">
+                                <button type="submit" class="btn btn-success btn-lg">
+                                    <i class="fas fa-file-pdf"></i> Générer le Devis
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+    <!-- Poutrelles Modal -->
+    <div class="modal fade" id="poutrellesModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Poutrelle</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Hourdis Modal -->
+    <div class="modal fade" id="hourdisModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Hourdis</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Panneau Modal -->
+    <div class="modal fade" id="panneauModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Panneau</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Agglos Modal -->
+    <div class="modal fade" id="agglosModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Agglos</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const poutrellesTable = document.getElementById("poutrellesTable");
+            const hourdisTable = document.getElementById("hourdisTable");
+            const panneauTable = document.getElementById("panneauTable");
+            const agglosTable = document.getElementById("agglosTable");
+            const invoiceForm = document.getElementById("invoiceForm");
+            const invoiceNumberInput = document.getElementById("invoiceNumber");
+
+            // Default items data
+            const defaultItems = {
+                poutrelles: [
+                    { description: "PCP 114N", unit: "ML", quantity: 21, length: 3.00, unit_price: 26.00 },
+                    { description: "PCP 113N", unit: "ML", quantity: 12, length: 4.00, unit_price: 26.00 }
+                ],
+                hourdis: [
+                    { description: "HOURDIS TYPE 12", unit: "U", quantity: 1, length: 300, unit_price: 3.50 }
+                ],
+                panneaux: [
+                    { description: "PTS SISMIQUE 5*3,5", unit: "U", quantity: 1, length: 9, unit_price: 195.00 }
+                ]
+            };
+
+            // Function to add a new item row
+            function addItemRow(item, tableBody) {
+                const row = document.createElement("tr");
+                const total = (item.quantity * item.length * item.unit_price).toFixed(2);
+                
+                row.innerHTML = `
+                    <td><input type="text" class="form-control" name="description" value="${item.description}" readonly></td>
+                    <td><input type="text" class="form-control" name="unit" value="${item.unit}" readonly></td>
+                    <td><input type="number" class="form-control" name="quantity" value="${item.quantity}" required></td>
+                    <td><input type="number" class="form-control" name="length" value="${item.length}" step="0.01" required></td>
+                    <td><input type="number" class="form-control" name="unitPrice" value="${item.unit_price}" step="0.01" required></td>
+                    <td><input type="number" class="form-control" name="totalHT" value="${total}" readonly></td>
+                    <td><button type="button" class="btn btn-danger btn-sm remove-item">×</button></td>
+                `;
+
+                row.querySelector(".remove-item").addEventListener("click", () => {
+                    row.remove();
+                    updateTotals();
+                });
+
+                // Add input event listeners to update total
+                ['quantity', 'length', 'unitPrice'].forEach(field => {
+                    row.querySelector(`input[name='${field}']`).addEventListener('input', () => {
+                        const qty = parseFloat(row.querySelector('input[name="quantity"]').value) || 0;
+                        const length = parseFloat(row.querySelector('input[name="length"]').value) || 0;
+                        const price = parseFloat(row.querySelector('input[name="unitPrice"]').value) || 0;
+                        const rowTotal = (qty * length * price).toFixed(2);
+                        row.querySelector('input[name="totalHT"]').value = rowTotal;
+                        updateTotals();
+                    });
+                });
+
+                tableBody.appendChild(row);
+                updateTotals();
+            }
+
+            // Function to update totals
+            function updateTotals() {
+                const totalHT = Array.from(document.querySelectorAll('input[name="totalHT"]'))
+                    .reduce((sum, input) => sum + (parseFloat(input.value) || 0), 0);
+                
+                const formattedTotalHT = totalHT.toFixed(2);
+                const tax = (totalHT * 0.20).toFixed(2);
+                const totalTTC = (totalHT * 1.20).toFixed(2);
+                
+                document.querySelector("#totalHT").value = formattedTotalHT;
+                document.querySelector("#tax").value = tax;
+                document.querySelector("#totalTTC").value = totalTTC;
+            }
+
+            // Initialize tables with default items
+            defaultItems.poutrelles.forEach(item => addItemRow(item, poutrellesTable));
+            defaultItems.hourdis.forEach(item => addItemRow(item, hourdisTable));
+            defaultItems.panneaux.forEach(item => addItemRow(item, panneauTable));
+
+            // Update initial totals
+            updateTotals();
+
+            // Predefined items data
+            const predefinedItems = {
+                poutrelles: [
+                    { description: "PCP 114N", unit: "ML", quantity: 21, length: 3.00, unit_price: 26.00 },
+                    { description: "PCP 113N", unit: "ML", quantity: 12, length: 4.00, unit_price: 26.00 },
+                    { description: "PCP 113B SISMIQUE", unit: "ML", quantity: 22, length: 4.20, unit_price: 26.00 },
+                    { description: "PCP 114B SISMIQUE", unit: "ML", quantity: 12, length: 4.90, unit_price: 30.00 },
+                    { description: "PCP 135 SISMIQUE", unit: "ML", quantity: 8, length: 5.00, unit_price: 38.00 },
+                    { description: "PCP 156 SISMIQUE", unit: "ML", quantity: 12, length: 5.10, unit_price: 38.00 },
+                    { description: "PCP 158 SISMIQUE", unit: "ML", quantity: 12, length: 5.50, unit_price: 51.00 }
+                ],
+                hourdis: [
+                    { description: "HOURDIS TYPE 08", unit: "U", quantity: 1, length: 200, unit_price: 3.40 },
+                    { description: "HOURDIS TYPE 12", unit: "U", quantity: 1, length: 300, unit_price: 3.50 },
+                    { description: "HOURDIS TYPE 16", unit: "U", quantity: 1, length: 0, unit_price: 0 },
+                    { description: "HOURDIS TYPE 20", unit: "U", quantity: 1, length: 0, unit_price: 0 },
+                    { description: "HOURDIS TYPE 25", unit: "U", quantity: 1, length: 450, unit_price: 4.80 },
+                    { description: "HOURDIS TYPE 30", unit: "U", quantity: 1, length: 0, unit_price: 0 }
+                ],
+                panneaux: [
+                    { description: "PTS Normal 3,5*3,5", unit: "U", quantity: 1, length: 0, unit_price: 0 },
+                    { description: "PTS SISMIQUE 5*3,5", unit: "U", quantity: 1, length: 9, unit_price: 195.00 }
+                ],
+                agglos: [
+                    { description: "AGGLOS 07", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 10", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 15", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 20", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 25", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS A BRANCHER 20", unit: "U", quantity: 1, length: 9, unit_price: 190.00 }
+                ]
+            };
+
+            // Function to populate modal with items
+            function populateModal(modalId, items, targetTable) {
+                const modal = document.querySelector(modalId);
+                const tbody = modal.querySelector('tbody');
+                tbody.innerHTML = '';
+
+                items.forEach(item => {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td>${item.description}</td>
+                        <td>${item.unit}</td>
+                        <td><input type="number" class="form-control form-control-sm" value="${item.quantity}" name="modal-quantity"></td>
+                        <td><input type="number" class="form-control form-control-sm" value="${item.length}" step="0.01" name="modal-length"></td>
+                        <td><input type="number" class="form-control form-control-sm" value="${item.unit_price}" step="0.01" name="modal-price"></td>
+                        <td>
+                            <button class="btn btn-primary btn-sm add-item">
+                                Ajouter
+                            </button>
+                        </td>
+                    `;
+
+                    row.querySelector('.add-item').addEventListener('click', () => {
+                        const newItem = {
+                            ...item,
+                            quantity: parseFloat(row.querySelector('[name="modal-quantity"]').value) || 0,
+                            length: parseFloat(row.querySelector('[name="modal-length"]').value) || 0,
+                            unit_price: parseFloat(row.querySelector('[name="modal-price"]').value) || 0
+                        };
+                        addItemRow(newItem, targetTable);
+                        bootstrap.Modal.getInstance(modal).hide();
+                    });
+
+                    tbody.appendChild(row);
+                });
+            }
+
+            // Update button click handlers
+            document.querySelector("#addPoutrelles").addEventListener("click", () => {
+                populateModal('#poutrellesModal', predefinedItems.poutrelles, poutrellesTable);
+                new bootstrap.Modal('#poutrellesModal').show();
+            });
+
+            document.querySelector("#addHourdis").addEventListener("click", () => {
+                populateModal('#hourdisModal', predefinedItems.hourdis, hourdisTable);
+                new bootstrap.Modal('#hourdisModal').show();
+            });
+
+            document.querySelector("#addPanneau").addEventListener("click", () => {
+                populateModal('#panneauModal', predefinedItems.panneaux, panneauTable);
+                new bootstrap.Modal('#panneauModal').show();
+            });
+
+            document.querySelector("#addAgglos").addEventListener("click", () => {
+                populateModal('#agglosModal', predefinedItems.agglos, agglosTable);
+                new bootstrap.Modal('#agglosModal').show();
+            });
+
+            // Form submission
+            invoiceForm.addEventListener("submit", async (event) => {
+                event.preventDefault();
+
+                const getAllItems = () => {
+                    const items = [];
+                    [poutrellesTable, hourdisTable, panneauTable, agglosTable].forEach(table => {
+                        items.push(...Array.from(table.querySelectorAll("tr")).map(row => ({
+                            description: row.querySelector("input[name='description']").value,
+                            unit: row.querySelector("input[name='unit']").value,
+                            quantity: parseInt(row.querySelector("input[name='quantity']").value, 10),
+                            length: parseFloat(row.querySelector("input[name='length']").value),
+                            unit_price: parseFloat(row.querySelector("input[name='unitPrice']").value),
+                            total_price: parseFloat(row.querySelector("input[name='totalHT']").value)
+                        })));
+                    });
+                    return items;
+                };
+
+                const data = {
+                    invoice_number: document.querySelector("#invoiceNumber").value,
+                    date: new Date(document.querySelector("#date").value).toISOString(),
+                    project: document.querySelector("#project").value,
+                    client_name: document.querySelector("#clientName").value,
+                    client_phone: document.querySelector("#clientPhone").value,
+                    address: document.querySelector("#clientAddress").value,
+                    total_ht: parseFloat(document.querySelector("#totalHT").value || 0),
+                    tax: parseFloat(document.querySelector("#tax").value || 0),
+                    total_ttc: parseFloat(document.querySelector("#totalTTC").value || 0),
+                    items: getAllItems(),
+                    frame_number: "",
+                    status: "pending",
+                    created_at: new Date().toISOString(),
+                    commercial: document.querySelector("#commercial").value || "divers"
+                };
+
+                console.log("Sending invoice data:", data);
+
+                try {
+                    // First create the invoice
+                    const createResponse = await fetch("/api/invoices/", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify(data)
+                    });
+
+                    if (!createResponse.ok) {
+                        const errorData = await createResponse.json();
+                        console.error("Server error:", errorData);
+                        throw new Error(`Failed to create invoice: ${JSON.stringify(errorData)}`);
+                    }
+
+                    const invoice = await createResponse.json();
+                    console.log("Created invoice:", invoice);
+
+                    // Then generate the PDF
+                    const pdfResponse = await fetch(`/api/invoices/${invoice.id}/generate-pdf`, {
+                        method: "POST",
+                        headers: { 
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(invoice)
+                    });
+
+                    if (!pdfResponse.ok) {
+                        const errorData = await pdfResponse.text();
+                        console.error("PDF generation error:", errorData);
+                        throw new Error(`Failed to generate PDF: ${errorData}`);
+                    }
+
+                    // Handle PDF download
+                    const blob = await pdfResponse.blob();
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement("a");
+                    a.href = url;
+                    a.download = `devis_${invoice.invoice_number}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    window.URL.revokeObjectURL(url);
+
+                } catch (error) {
+                    console.error("Error:", error);
+                    alert(`Error: ${error.message}`);
+                }
+
+                // After successful submission, update the invoice number for the current type
+                const selectedType = document.querySelector('input[name="clientType"]:checked')?.value;
+                if (selectedType) {
+                    await updateInvoiceNumber(selectedType);
+                }
+            });
+
+            // Set today's date automatically
+            const today = new Date();
+            const formattedDate = today.toISOString().split('T')[0];
+            document.querySelector("#date").value = formattedDate;
+
+            // Function to get and update the invoice number
+            async function updateInvoiceNumber(selectedType) {
+                try {
+                    // Disable the input while fetching
+                    invoiceNumberInput.disabled = true;
+                    
+                    const response = await fetch(`/api/invoices/last-number/${selectedType}`);
+                    
+                    if (response.ok) {
+                        const data = await response.json();
+                        invoiceNumberInput.value = data.formatted_number;
+                    } else {
+                        throw new Error('Failed to get invoice number');
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    alert('Error getting invoice number');
+                } finally {
+                    // Re-enable the input
+                    invoiceNumberInput.disabled = false;
+                }
+            }
+
+            // Update invoice number when client type is selected
+            document.querySelectorAll('input[name="clientType"]').forEach(input => {
+                input.addEventListener('change', () => {
+                    updateInvoiceNumber(input.value);
+                });
+            });
+
+            // Update the number when the page loads if a type is already selected
+            const selectedType = document.querySelector('input[name="clientType"]:checked')?.value;
+            if (selectedType) {
+                updateInvoiceNumber(selectedType);
+            }
+        });
+    </script>
+</body>
+</html>

app/templates/index copy 3.html

@@ -0,0 +1,853 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Invoice Generator</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #34495e;
+            --accent-color: #3498db;
+            --light-gray: #f8f9fa;
+            --border-radius: 8px;
+        }
+
+        body {
+            background-color: #f5f6fa;
+            color: var(--primary-color);
+        }
+
+        .container {
+            max-width: 1400px;
+            padding: 2rem;
+        }
+
+        .card {
+            border: none;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+            border-radius: var(--border-radius);
+            margin-bottom: 1.5rem;
+        }
+
+        .card-header {
+            background-color: var(--primary-color);
+            color: white;
+            border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
+            padding: 1rem;
+            font-weight: 500;
+        }
+
+        .card-body {
+            padding: 1.5rem;
+        }
+
+        .form-control {
+            border: 1px solid #dee2e6;
+            border-radius: var(--border-radius);
+            padding: 0.75rem;
+            transition: all 0.3s ease;
+        }
+
+        .form-control:focus {
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+        }
+
+        .btn-primary {
+            background-color: var(--accent-color);
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: var(--border-radius);
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary:hover {
+            background-color: #2980b9;
+            transform: translateY(-1px);
+        }
+
+        .btn-success {
+            background-color: #2ecc71;
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: var(--border-radius);
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+
+        .btn-success:hover {
+            background-color: #27ae60;
+            transform: translateY(-2px);
+        }
+
+        .table {
+            background-color: white;
+            border-radius: var(--border-radius);
+            overflow: hidden;
+        }
+
+        .table-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .table th {
+            font-weight: 500;
+            padding: 1rem;
+        }
+
+        .table td {
+            padding: 0.75rem;
+            vertical-align: middle;
+        }
+
+        .section-title {
+            background-color: var(--secondary-color);
+            color: white;
+            padding: 1rem;
+            margin: 2rem 0 1rem;
+            border-radius: var(--border-radius);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .section-title h4 {
+            margin: 0;
+            font-weight: 500;
+        }
+
+        .btn-group {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 0.25rem;
+        }
+
+        .btn-check + .btn-outline-primary {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+
+        .btn-check:checked + .btn-outline-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .modal-content {
+            border-radius: var(--border-radius);
+            border: none;
+            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
+        }
+
+        .modal-header {
+            background-color: var(--primary-color);
+            color: white;
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+
+        .btn-close {
+            filter: brightness(0) invert(1);
+        }
+
+        .btn-danger {
+            background-color: #e74c3c;
+            border: none;
+            border-radius: var(--border-radius);
+            transition: all 0.3s ease;
+        }
+
+        .btn-danger:hover {
+            background-color: #c0392b;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            .card-body {
+                padding: 1rem;
+            }
+
+            .btn {
+                padding: 0.5rem 1rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <!-- Header -->
+    <header class="bg-primary py-4 mb-4 shadow-sm">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <h1 class="text-white mb-0">Générateur de Devis</h1>
+                </div>
+                <div class="col-md-6 text-end">
+                    <img src="/static/logo.png" alt="Logo" height="50" class="img-fluid">
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="container">
+        <!-- Main Content -->
+        <div class="row">
+            <div class="col-12">
+                <div class="card shadow-sm mb-4">
+                    <div class="card-body">
+                        <form id="invoiceForm">
+                            <!-- Client and Invoice Information -->
+                            <div class="row mb-4">
+                                <!-- Client Information Card -->
+                                <div class="col-md-6">
+                                    <div class="card h-100">
+                                        <div class="card-header d-flex justify-content-between align-items-center">
+                                            <h5 class="mb-0">Information Client</h5>
+                                            <i class="fas fa-user"></i>
+                                        </div>
+                                        <div class="card-body">
+                                            <div class="mb-3">
+                                                <label for="clientName" class="form-label">Nom du Client</label>
+                                                <input type="text" class="form-control" id="clientName" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="clientPhone" class="form-label">Téléphone</label>
+                                                <input type="tel" class="form-control" id="clientPhone" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="clientAddress" class="form-label">Adresse</label>
+                                                <input type="text" class="form-control" id="clientAddress" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label class="form-label">Type Client</label>
+                                                <div class="btn-group w-100" role="group">
+                                                    <input type="radio" class="btn-check" name="clientType" id="EE" value="EE" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="EE">EE</label>
+
+                                                    <input type="radio" class="btn-check" name="clientType" id="MED" value="MED" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="MED">MED</label>
+
+                                                    <input type="radio" class="btn-check" name="clientType" id="AM" value="AM" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="AM">AM</label>
+
+                                                    <input type="radio" class="btn-check" name="clientType" id="DIV" value="DIV" autocomplete="off">
+                                                    <label class="btn btn-outline-primary" for="DIV">DIV</label>
+                                                </div>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label class="form-label">Commercial</label>
+                                                <select class="form-select" id="commercial" required>
+                                                    <option value="">Sélectionner un commercial</option>
+                                                    <option value="khaled">Khaled</option>
+                                                    <option value="salah">Salah</option>
+                                                    <option value="ismail">Ismail</option>
+                                                    <option value="jamal">Jamal</option>
+                                                    <option value="divers">Divers</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Invoice Information Card -->
+                                <div class="col-md-6">
+                                    <div class="card h-100">
+                                        <div class="card-header d-flex justify-content-between align-items-center">
+                                            <h5 class="mb-0">Information Devis</h5>
+                                            <i class="fas fa-file-invoice"></i>
+                                        </div>
+                                        <div class="card-body">
+                                            <div class="mb-3">
+                                                <label for="invoiceNumber" class="form-label">N° Devis</label>
+                                                <input type="text" class="form-control" id="invoiceNumber" required>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="date" class="form-label">Date</label>
+                                                <input type="date" class="form-control" id="date" readonly>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="project" class="form-label">Type d'ouvrage</label>
+                                                <input type="text" class="form-control" id="project" required>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Items Sections -->
+                            <div class="card shadow-sm mb-4">
+                                <div class="card-body">
+                                    <!-- Poutrelles Section -->
+                                    <div class="section-title">
+                                        <h4>POUTRELLES</h4>
+                                        <button type="button" class="btn btn-light" id="addPoutrelles">
+                                            <i class="fas fa-plus"></i> Ajouter Poutrelle
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="poutrellesTable"></tbody>
+                                        </table>
+                                    </div>
+
+                                    <!-- Hourdis Section -->
+                                    <div class="section-title mt-4">
+                                        <h4>HOURDIS</h4>
+                                        <button type="button" class="btn btn-light" id="addHourdis">
+                                            <i class="fas fa-plus"></i> Ajouter Hourdis
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="hourdisTable"></tbody>
+                                        </table>
+                                    </div>
+
+                                    <!-- Panneau Section -->
+                                    <div class="section-title mt-4">
+                                        <h4>PANNEAU TREILLIS SOUDES</h4>
+                                        <button type="button" class="btn btn-light" id="addPanneau">
+                                            <i class="fas fa-plus"></i> Ajouter Panneau
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="panneauTable"></tbody>
+                                        </table>
+                                    </div>
+
+                                    <!-- Agglos Section -->
+                                    <div class="section-title mt-4">
+                                        <h4>AGGLOS</h4>
+                                        <button type="button" class="btn btn-light" id="addAgglos">
+                                            <i class="fas fa-plus"></i> Ajouter Agglos
+                                        </button>
+                                    </div>
+                                    <div class="table-responsive">
+                                        <table class="table table-bordered table-hover">
+                                            <thead class="table-primary">
+                                                <tr>
+                                                    <th style="width: 30%">Description</th>
+                                                    <th style="width: 10%">Unité</th>
+                                                    <th style="width: 10%">Quantité</th>
+                                                    <th style="width: 15%">Longueur</th>
+                                                    <th style="width: 15%">P.U</th>
+                                                    <th style="width: 15%">Total HT</th>
+                                                    <th style="width: 5%"></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="agglosTable"></tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Totals Section -->
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <!-- Empty for spacing -->
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="card shadow-sm">
+                                        <div class="card-header">
+                                            <h5 class="mb-0">Totaux</h5>
+                                        </div>
+                                        <div class="card-body">
+                                            <div class="mb-3">
+                                                <label for="totalHT" class="form-label">Total HT</label>
+                                                <input type="number" class="form-control" id="totalHT" readonly>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="tax" class="form-label">TVA 20%</label>
+                                                <input type="number" class="form-control" id="tax" readonly>
+                                            </div>
+                                            <div class="mb-3">
+                                                <label for="totalTTC" class="form-label">Total TTC</label>
+                                                <input type="number" class="form-control" id="totalTTC" readonly>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Submit Button -->
+                            <div class="d-grid gap-2 col-md-6 mx-auto mt-4">
+                                <button type="submit" class="btn btn-success btn-lg">
+                                    <i class="fas fa-file-pdf"></i> Générer le Devis
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+    <!-- Poutrelles Modal -->
+    <div class="modal fade" id="poutrellesModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Poutrelle</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Hourdis Modal -->
+    <div class="modal fade" id="hourdisModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Hourdis</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Panneau Modal -->
+    <div class="modal fade" id="panneauModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Panneau</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Agglos Modal -->
+    <div class="modal fade" id="agglosModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Sélectionner Agglos</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Unité</th>
+                                    <th>Quantité</th>
+                                    <th>Longueur</th>
+                                    <th>P.U</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const poutrellesTable = document.getElementById("poutrellesTable");
+            const hourdisTable = document.getElementById("hourdisTable");
+            const panneauTable = document.getElementById("panneauTable");
+            const agglosTable = document.getElementById("agglosTable");
+            const invoiceForm = document.getElementById("invoiceForm");
+            const invoiceNumberInput = document.getElementById("invoiceNumber");
+
+            // Default items data
+            const defaultItems = {
+                poutrelles: [
+                    { description: "PCP 114N", unit: "ML", quantity: 21, length: 3.00, unit_price: 26.00 },
+                    { description: "PCP 113N", unit: "ML", quantity: 12, length: 4.00, unit_price: 26.00 }
+                ],
+                hourdis: [
+                    { description: "HOURDIS TYPE 12", unit: "U", quantity: 1, length: 300, unit_price: 3.50 }
+                ],
+                panneaux: [
+                    { description: "PTS SISMIQUE 5*3,5", unit: "U", quantity: 1, length: 9, unit_price: 195.00 }
+                ]
+            };
+
+            // Function to add a new item row
+            function addItemRow(item, tableBody) {
+                const row = document.createElement("tr");
+                const total = (item.quantity * item.length * item.unit_price).toFixed(2);
+                
+                row.innerHTML = `
+                    <td><input type="text" class="form-control" name="description" value="${item.description}" readonly></td>
+                    <td><input type="text" class="form-control" name="unit" value="${item.unit}" readonly></td>
+                    <td><input type="number" class="form-control" name="quantity" value="${item.quantity}" required></td>
+                    <td><input type="number" class="form-control" name="length" value="${item.length}" step="0.01" required></td>
+                    <td><input type="number" class="form-control" name="unitPrice" value="${item.unit_price}" step="0.01" required></td>
+                    <td><input type="number" class="form-control" name="totalHT" value="${total}" readonly></td>
+                    <td><button type="button" class="btn btn-danger btn-sm remove-item">×</button></td>
+                `;
+
+                row.querySelector(".remove-item").addEventListener("click", () => {
+                    row.remove();
+                    updateTotals();
+                });
+
+                // Add input event listeners to update total
+                ['quantity', 'length', 'unitPrice'].forEach(field => {
+                    row.querySelector(`input[name='${field}']`).addEventListener('input', () => {
+                        const qty = parseFloat(row.querySelector('input[name="quantity"]').value) || 0;
+                        const length = parseFloat(row.querySelector('input[name="length"]').value) || 0;
+                        const price = parseFloat(row.querySelector('input[name="unitPrice"]').value) || 0;
+                        const rowTotal = (qty * length * price).toFixed(2);
+                        row.querySelector('input[name="totalHT"]').value = rowTotal;
+                        updateTotals();
+                    });
+                });
+
+                tableBody.appendChild(row);
+                updateTotals();
+            }
+
+            // Function to update totals
+            function updateTotals() {
+                const totalHT = Array.from(document.querySelectorAll('input[name="totalHT"]'))
+                    .reduce((sum, input) => sum + (parseFloat(input.value) || 0), 0);
+                
+                const formattedTotalHT = totalHT.toFixed(2);
+                const tax = (totalHT * 0.20).toFixed(2);
+                const totalTTC = (totalHT * 1.20).toFixed(2);
+                
+                document.querySelector("#totalHT").value = formattedTotalHT;
+                document.querySelector("#tax").value = tax;
+                document.querySelector("#totalTTC").value = totalTTC;
+            }
+
+            // Initialize tables with default items
+            defaultItems.poutrelles.forEach(item => addItemRow(item, poutrellesTable));
+            defaultItems.hourdis.forEach(item => addItemRow(item, hourdisTable));
+            defaultItems.panneaux.forEach(item => addItemRow(item, panneauTable));
+
+            // Update initial totals
+            updateTotals();
+
+            // Predefined items data
+            const predefinedItems = {
+                poutrelles: [
+                    { description: "PCP 114N", unit: "ML", quantity: 21, length: 3.00, unit_price: 26.00 },
+                    { description: "PCP 113N", unit: "ML", quantity: 12, length: 4.00, unit_price: 26.00 },
+                    { description: "PCP 113B SISMIQUE", unit: "ML", quantity: 22, length: 4.20, unit_price: 26.00 },
+                    { description: "PCP 114B SISMIQUE", unit: "ML", quantity: 12, length: 4.90, unit_price: 30.00 },
+                    { description: "PCP 135 SISMIQUE", unit: "ML", quantity: 8, length: 5.00, unit_price: 38.00 },
+                    { description: "PCP 156 SISMIQUE", unit: "ML", quantity: 12, length: 5.10, unit_price: 38.00 },
+                    { description: "PCP 158 SISMIQUE", unit: "ML", quantity: 12, length: 5.50, unit_price: 51.00 }
+                ],
+                hourdis: [
+                    { description: "HOURDIS TYPE 08", unit: "U", quantity: 1, length: 200, unit_price: 3.40 },
+                    { description: "HOURDIS TYPE 12", unit: "U", quantity: 1, length: 300, unit_price: 3.50 },
+                    { description: "HOURDIS TYPE 16", unit: "U", quantity: 1, length: 0, unit_price: 0 },
+                    { description: "HOURDIS TYPE 20", unit: "U", quantity: 1, length: 0, unit_price: 0 },
+                    { description: "HOURDIS TYPE 25", unit: "U", quantity: 1, length: 450, unit_price: 4.80 },
+                    { description: "HOURDIS TYPE 30", unit: "U", quantity: 1, length: 0, unit_price: 0 }
+                ],
+                panneaux: [
+                    { description: "PTS Normal 3,5*3,5", unit: "U", quantity: 1, length: 0, unit_price: 0 },
+                    { description: "PTS SISMIQUE 5*3,5", unit: "U", quantity: 1, length: 9, unit_price: 195.00 }
+                ],
+                agglos: [
+                    { description: "AGGLOS 07", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 10", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 15", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 20", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS 25", unit: "U", quantity: 1, length: 9, unit_price: 190.00 },
+                    { description: "AGGLOS A BRANCHER 20", unit: "U", quantity: 1, length: 9, unit_price: 190.00 }
+                ]
+            };
+
+            // Function to populate modal with items
+            function populateModal(modalId, items, targetTable) {
+                const modal = document.querySelector(modalId);
+                const tbody = modal.querySelector('tbody');
+                tbody.innerHTML = '';
+
+                items.forEach(item => {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td>${item.description}</td>
+                        <td>${item.unit}</td>
+                        <td><input type="number" class="form-control form-control-sm" value="${item.quantity}" name="modal-quantity"></td>
+                        <td><input type="number" class="form-control form-control-sm" value="${item.length}" step="0.01" name="modal-length"></td>
+                        <td><input type="number" class="form-control form-control-sm" value="${item.unit_price}" step="0.01" name="modal-price"></td>
+                        <td>
+                            <button class="btn btn-primary btn-sm add-item">
+                                Ajouter
+                            </button>
+                        </td>
+                    `;
+
+                    row.querySelector('.add-item').addEventListener('click', () => {
+                        const newItem = {
+                            ...item,
+                            quantity: parseFloat(row.querySelector('[name="modal-quantity"]').value) || 0,
+                            length: parseFloat(row.querySelector('[name="modal-length"]').value) || 0,
+                            unit_price: parseFloat(row.querySelector('[name="modal-price"]').value) || 0
+                        };
+                        addItemRow(newItem, targetTable);
+                        bootstrap.Modal.getInstance(modal).hide();
+                    });
+
+                    tbody.appendChild(row);
+                });
+            }
+
+            // Update button click handlers
+            document.querySelector("#addPoutrelles").addEventListener("click", () => {
+                populateModal('#poutrellesModal', predefinedItems.poutrelles, poutrellesTable);
+                new bootstrap.Modal('#poutrellesModal').show();
+            });
+
+            document.querySelector("#addHourdis").addEventListener("click", () => {
+                populateModal('#hourdisModal', predefinedItems.hourdis, hourdisTable);
+                new bootstrap.Modal('#hourdisModal').show();
+            });
+
+            document.querySelector("#addPanneau").addEventListener("click", () => {
+                populateModal('#panneauModal', predefinedItems.panneaux, panneauTable);
+                new bootstrap.Modal('#panneauModal').show();
+            });
+
+            document.querySelector("#addAgglos").addEventListener("click", () => {
+                populateModal('#agglosModal', predefinedItems.agglos, agglosTable);
+                new bootstrap.Modal('#agglosModal').show();
+            });
+
+            // Form submission
+            invoiceForm.addEventListener("submit", async (event) => {
+                event.preventDefault();
+
+                const getAllItems = () => {
+                    const items = [];
+                    [poutrellesTable, hourdisTable, panneauTable, agglosTable].forEach(table => {
+                        items.push(...Array.from(table.querySelectorAll("tr")).map(row => ({
+                            description: row.querySelector("input[name='description']").value,
+                            unit: row.querySelector("input[name='unit']").value,
+                            quantity: parseInt(row.querySelector("input[name='quantity']").value, 10),
+                            length: parseFloat(row.querySelector("input[name='length']").value),
+                            unit_price: parseFloat(row.querySelector("input[name='unitPrice']").value),
+                            total_price: parseFloat(row.querySelector("input[name='totalHT']").value)
+                        })));
+                    });
+                    return items;
+                };
+
+                const data = {
+                    invoice_number: document.querySelector("#invoiceNumber").value,
+                    date: new Date(document.querySelector("#date").value).toISOString(),
+                    project: document.querySelector("#project").value,
+                    client_name: document.querySelector("#clientName").value,
+                    client_phone: document.querySelector("#clientPhone").value,
+                    address: document.querySelector("#clientAddress").value,
+                    total_ht: parseFloat(document.querySelector("#totalHT").value || 0),
+                    tax: parseFloat(document.querySelector("#tax").value || 0),
+                    total_ttc: parseFloat(document.querySelector("#totalTTC").value || 0),
+                    items: getAllItems(),
+                    frame_number: "",
+                    status: "pending",
+                    created_at: new Date().toISOString(),
+                    commercial: document.querySelector("#commercial").value || "divers"
+                };
+
+                console.log("Sending invoice data:", data);
+
+                try {
+                    // First create the invoice
+                    const createResponse = await fetch("/api/invoices/", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify(data)
+                    });
+
+                    if (!createResponse.ok) {
+                        const errorData = await createResponse.json();
+                        console.error("Server error:", errorData);
+                        throw new Error(`Failed to create invoice: ${JSON.stringify(errorData)}`);
+                    }
+
+                    const invoice = await createResponse.json();
+                    console.log("Created invoice:", invoice);
+
+                    // Then generate the PDF
+                    const pdfResponse = await fetch(`/api/invoices/${invoice.id}/generate-pdf`, {
+                        method: "POST",
+                        headers: { 
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(invoice)
+                    });
+
+                    if (!pdfResponse.ok) {
+                        const errorData = await pdfResponse.text();
+                        console.error("PDF generation error:", errorData);
+                        throw new Error(`Failed to generate PDF: ${errorData}`);
+                    }
+
+                    // Handle PDF download
+                    const blob = await pdfResponse.blob();
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement("a");
+                    a.href = url;
+                    a.download = `devis_${invoice.invoice_number}.pdf`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    window.URL.revokeObjectURL(url);
+
+                } catch (error) {
+                    console.error("Error:", error);
+                    alert(`Error: ${error.message}`);
+                }
+
+                // After successful submission, update the invoice number for the current type
+                const selectedType = document.querySelector('input[name="clientType"]:checked')?.value;
+                if (selectedType) {
+                    await updateInvoiceNumber(selectedType);
+                }
+            });
+
+            // Set today's date automatically
+            const today = new Date();
+            const formattedDate = today.toISOString().split('T')[0];
+            document.querySelector("#date").value = formattedDate;
+
+            // Function to get and update the invoice number
+            async function updateInvoiceNumber(selectedType) {
+                try {
+                    // Disable the input while fetching
+                    invoiceNumberInput.disabled = true;
+                    
+                    const response = await fetch(`/api/invoices/last-number/${selectedType}`);
+                    
+                    if (response.ok) {
+                        const data = await response.json();
+                        invoiceNumberInput.value = data.formatted_number;
+                    } else {
+                        throw new Error('Failed to get invoice number');
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    alert('Error getting invoice number');
+                } finally {
+                    // Re-enable the input
+                    invoiceNumberInput.disabled = false;
+                }
+            }
+
+            // Update invoice number when client type is selected
+            document.querySelectorAll('input[name="clientType"]').forEach(input => {
+                input.addEventListener('change', () => {
+                    updateInvoiceNumber(input.value);
+                });
+            });
+
+            // Update the number when the page loads if a type is already selected
+            const selectedType = document.querySelector('input[name="clientType"]:checked')?.value;
+            if (selectedType) {
+                updateInvoiceNumber(selectedType);
+            }
+        });
+    </script>
+</body>
+</html>

app/templates/index.html

@@ -819,6 +819,7 @@
                     invoiceNumberInput.disabled = true;
                     
                     const response = await fetch(`/api/invoices/last-number/${selectedType}`);
+                    
                     if (response.ok) {
                         const data = await response.json();
                         invoiceNumberInput.value = data.formatted_number;