templates/basecaisse.html.twig line 1

Open in your IDE?
  1. {# templates/basecaisse.html.twig #}
  2. <!DOCTYPE html>
  4. <html lang="fr">
  6. <head>
  8.   <meta charset="UTF-8">
  10.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.   <title>Système de Caisse</title>
  13.  
  14. <!-- Dans votre basecaisse.html.twig -->
  15. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  16. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  17.     <!-- Font Awesome pour les icônes -->
  18.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  19.     
  20.     <title>{% block title %}Système de Caisse{% endblock %}</title>
  21.     
  22.  
  23.     {# CSS #}
  24.  
  25.     {# Styles spécifiques à la caisse #}
  26.  
  27.     
  28.     {% block stylesheets %}{% endblock %}
  29.    <style>
  31.     :root {
  33.       --primary: #6366f1;
  35.       --secondary: #f59e0b;
  37.       --success: #22c55e;
  39.       --danger: #ef4444;
  41.       --purple: #8b5cf6;
  43.       --blue: #3b82f6;
  45.     }
  48.     body {
  50.       background-color: #f3f4f6;
  52.       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  54.     }
  57.     header {
  59.       background-color: white;
  61.       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  63.       padding: 10px 15px;
  65.       position: sticky;
  67.       top: 0;
  69.       z-index: 100;
  71.     }
  74.     .customer-badge {
  76.       display: flex;
  78.       align-items: center;
  80.       border: 1px solid #e5e7eb;
  82.       border-radius: 6px;
  84.       overflow: hidden;
  86.     }
  89.     .customer-number {
  91.       background-color: #f3f4f6;
  93.       padding: 5px 10px;
  95.       font-size: 14px;
  97.     }
  100.     .customer-name {
  102.       padding: 5px 10px;
  104.       font-weight: 600;
  106.       cursor: pointer;
  108.       border: none;
  110.       background: none;
  112.     }
  115.     .customer-name:hover {
  117.       background-color: #f9fafb;
  119.     }
  122.     .price-display {
  124.       font-size: 24px;
  126.       font-weight: 700;
  128.       color: var(--primary);
  130.     }
  133.     .seller-badge {
  135.       background-color: var(--purple);
  137.       color: white;
  139.       padding: 5px 10px;
  141.       border-radius: 6px;
  143.       font-size: 14px;
  145.     }
  148.     .category-nav {
  150.         background-color: white;
  151.         overflow-x: auto;
  152.         margin-bottom: 1rem;
  153.         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  155.     }
  158.     .category-container {
  160.       display: flex;
  162.       min-width: max-content;
  164.       padding: 10px;
  166.       gap: 5px;
  168.     }
  171.     .category-button {
  173.       display: flex;
  175.       flex-direction: column;
  177.       align-items: center;
  179.       padding: 10px;
  181.       border-radius: 8px;
  183.       border: none;
  185.       background: none;
  187.       transition: all 0.2s;
  189.     }
  192.     .category-button:hover {
  194.       background-color: rgba(99, 102, 241, 0.1);
  196.       transform: scale(1.05);
  198.     }
  201.     .category-button.active {
  203.       background-color: rgba(99, 102, 241, 0.2);
  205.       border-bottom: 2px solid var(--primary);
  207.     }
  210.     .category-icon {
  212.       width: 48px;
  214.       height: 48px;
  216.       margin-bottom: 8px;
  218.       object-fit: contain;
  220.     }
  223.     .category-label {
  225.       font-size: 14px;
  227.       font-weight: 500;
  229.       color: #4b5563;
  231.     }
  234.     .product-grid {
  236.       display: grid;
  238.       grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  240.       gap: 16px;
  242.       padding: 16px;
  244.     }
  247.     .product-card {
  249.       background-color: white;
  251.       border: 1px solid #e5e7eb;
  253.       border-radius: 8px;
  255.       overflow: hidden;
  257.       display: flex;
  259.       flex-direction: column;
  261.       transition: box-shadow 0.2s;
  263.       cursor: pointer;
  265.       height: 100%;
  267.     }
  270.     .product-card:hover {
  272.       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  274.     }
  277.     .product-image {
  279.       width: 100%;
  281.       height: 100px;
  283.       object-fit: contain;
  285.       padding:  8px;
  287.     }
  290.     .product-info {
  292.       padding: 10px;
  294.       text-align: center;
  296.       flex-grow: 1;
  298.       display: flex;
  300.       flex-direction: column;
  302.       justify-content: space-between;
  304.     }
  307.     .product-title {
  309.       font-weight: 500;
  311.       font-size: 14px;
  313.       margin-bottom: 4px;
  315.     }
  318.     .product-price {
  320.       color: var(--primary);
  322.       font-weight: 700;
  324.     }
  327.     .cart-container {
  329.       background-color: #f9fafb;
  331.       border-left: 1px solid #e5e7eb;
  333.       display: flex;
  335.       flex-direction: column;
  337.       height: 100%;
  339.     }
  342.     .cart-header {
  344.       background-color: white;
  346.       padding: 10px 15px;
  348.       margin-bottom: 8px;
  350.       border-bottom: 1px solid #e5e7eb;
  352.       font-weight: 600;
  354.     }
  357.     .cart-items {
  359.       flex-grow: 1;
  361.       overflow-y: auto;
  363.       padding: 8px;
  365.     }
  368.     .cart-item {
  370.       background-color: white;
  372.       border-radius: 8px;
  374.       padding: 10px;
  376.       margin-bottom: 8px;
  378.       display: flex;
  380.       justify-content: space-between;
  382.       align-items: center;
  384.     }
  387.     .cart-item-details {
  389.       flex: 1;
  391.     }
  394.     .cart-item-name {
  396.       font-weight: 500;
  398.     }
  401.     .cart-item-price {
  403.       font-size: 14px;
  405.       color: #6b7280;
  407.     }
  410.     .cart-item-actions {
  412.       display: flex;
  414.       align-items: center;
  416.       gap: 8px;
  418.     }
  421.     .cart-item-total {
  423.       font-weight: 600;
  425.       text-align: right;
  427.     }
  430.     .quantity-control {
  432.       display: flex;
  434.       align-items: center;
  436.     }
  439.     .quantity-btn {
  441.       width: 28px;
  443.       height: 28px;
  445.       border-radius: 4px;
  447.       border: 1px solid #e5e7eb;
  449.       background: none;
  451.       font-size: 14px;
  453.     }
  456.     .quantity-value {
  458.       width: 24px;
  460.       text-align: center;
  462.     }
  465.     .delete-btn {
  467.       color: var(--danger);
  469.       background: none;
  471.       border: none;
  473.       padding: 4px;
  475.       border-radius: 4px;
  477.     }
  480.     .delete-btn:hover {
  482.       background-color: rgba(239, 68, 68, 0.1);
  484.     }
  487.     .cart-summary {
  489.       border-top: 1px solid #e5e7eb;
  491.       background-color: white;
  493.       padding: 10px 15px;
  495.     }
  498.     .actions-grid {
  500.       display: grid;
  502.       grid-template-columns: repeat(4, 1fr);
  504.       gap: 8px;
  506.       padding: 8px;
  508.     }
  511.     .action-button {
  513.       display: flex;
  515.       flex-direction: column;
  517.       align-items: center;
  519.       justify-content: center;
  521.       padding: 10px 5px;
  523.       border-radius: 8px;
  525.       color: white;
  527.       border: none;
  529.       transition: opacity 0.2s;
  531.     }
  534.     .action-button:hover {
  536.       opacity: 0.9;
  538.     }
  541.     .action-button i {
  543.       margin-bottom: 5px;
  545.       font-size: 20px;
  547.     }
  550.     .action-button span {
  552.       font-size: 12px;
  554.     }
  557.     .btn-espece { background-color: var(--secondary); }
  559.     .btn-non-paye { background-color: var(--danger); }
  561.     .btn-multiple { background-color: var(--purple); }
  563.     .btn-cheque { background-color: var(--blue); }
  565.     .btn-carte { background-color: var(--success); }
  567.     .btn-attente { background-color: var(--primary); }
  569.     .btn-valider { 
  571.       background-color: var(--success);
  573.       grid-column: span 2;
  575.     }
  578.     .search-container {
  580.       position: relative;
  582.       padding: 8px 16px;
  584.     }
  587.     .search-input {
  589.       width: 100%;
  591.       padding: 8px 35px 8px 35px;
  593.       border-radius: 6px;
  595.       border: 1px solid #e5e7eb;
  597.     }
  600.     .search-icon {
  602.       position: absolute;
  604.       left: 25px;
  606.       top: 50%;
  608.       transform: translateY(-50%);
  610.       color: #6b7280;
  612.     }
  615.     .clear-search {
  617.       position: absolute;
  619.       right: 25px;
  621.       top: 50%;
  623.       transform: translateY(-50%);
  625.       color: #6b7280;
  627.       background: none;
  629.       border: none;
  631.       cursor: pointer;
  633.     }
  635.     .close-modal {
  637.       float: right;
  639.       font-size: 24px;
  641.       font-weight: bold;
  643.       cursor: pointer;
  645.     }
  648.     .pending-orders {
  650.       max-height: 300px;
  652.       overflow-y: auto;
  654.     }
  657.     .pending-order {
  659.       background-color: white;
  661.       border: 1px solid #e5e7eb;
  663.       border-radius: 8px;
  665.       padding: 10px;
  667.       margin-bottom: 8px;
  669.       display: flex;
  671.       justify-content: space-between;
  673.       align-items: center;
  675.       cursor: pointer;
  677.     }
  680.     .pending-order:hover {
  682.       background-color: #f9fafb;
  684.     }
  687.     .order-details {
  689.       font-size: 14px;
  691.     }
  694.     .order-customer {
  696.       font-weight: 500;
  698.     }
  701.     .order-time, .order-items {
  703.       color: #6b7280;
  705.     }
  708.     .order-total {
  710.       font-weight: 600;
  712.     }
  715.     .selected-method {
  717.       box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary);
  719.     }
  722.     @media (min-width: 768px) {
  724.       .main-container {
  726.         display: flex;
  728.         height: calc(100vh - 60px);
  730.       }
  733.       .products-container {
  735.         flex: 1;
  737.         overflow-hidden;
  739.         display: flex;
  741.         flex-direction: column;
  743.       }
  746.       .product-grid-container {
  748.         flex: 1;
  750.         overflow-y: auto;
  752.       }
  755.       .cart-container {
  757.         width: 33.333%;
  759.       }
  761.     }
  763.    </style>
  764.        
  765.     <style>
  766.         .modal-header {
  767.             background-color: #0d6efd;
  768.             color: white;
  769.         }
  770.         .btn-close-white {
  771.             filter: invert(1);
  772.         }
  773.     </style>
  774. </head>
  775. <body>
  776.    
  778.   
  779.     {% block body %}
  780.   
  781.     {% endblock %}
  782.  
  783.    
  784.    
  785.       <script>
  786.         // Fonctions utilitaires communes
  787.         function formatPrice(price) {
  788.             return parseFloat(price).toFixed(3);
  789.         }
  791.         // Gestion des modals
  792.         function setupModal(modalId, openButtonId, closeButtonClass) {
  793.             const modal = document.getElementById(modalId);
  794.             const openBtn = document.getElementById(openButtonId);
  795.             
  796.             if (modal && openBtn) {
  797.                 openBtn.addEventListener('click', () => modal.style.display = 'block');
  798.                 
  799.                 const closeBtn = modal.querySelector(closeButtonClass);
  800.                 if (closeBtn) {
  801.                     closeBtn.addEventListener('click', () => modal.style.display = 'none');
  802.                 }
  803.                 
  804.                 window.addEventListener('click', (e) => {
  805.                     if (e.target === modal) modal.style.display = 'none';
  806.                 });
  807.             }
  808.         }
  810.         // Initialisation des modals (customerModal géré dans index.html.twig)
  811.         document.addEventListener('DOMContentLoaded', function() {
  812.             setupModal('pendingOrdersModal', 'pendingOrdersBtn', '.close-modal');
  813.             setupModal('cashPaymentModal', null, '.close-modal');
  814.         });
  815.     </script>
  816. </body>
  817. </html>