Dentro do ambiente de vendas adicionar uma inteface arrojada e bonita para está sendo criada dentro dela as funções voltadas a vendas - Follow Up Deployment

index.html

@@ -83,9 +83,10 @@
                     <i class="fas fa-tachometer-alt mr-3"></i>
                     <span class="sidebar-text">Dashboard</span>
                 </a>
-                <a href="#" class="flex items-center p-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded mx-2 mt-1">
-                    <i class="fas fa-shopping-cart mr-3"></i>
-                    <span class="sidebar-text">Vendas</span>
+                <a href="#" class="flex items-center p-3 text-blue-600 bg-blue-50 rounded mx-2 mt-1">
+                    <i class="fas fa-cash-register mr-3"></i>
+                    <span class="sidebar-text font-medium">Vendas</span>
+                    <span class="ml-auto bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full">Novo</span>
                 </a>
                 <a href="#" class="flex items-center p-3 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded mx-2 mt-1">
                     <i class="fas fa-receipt mr-3"></i>
@@ -147,9 +148,32 @@
         </header>
 
         <main class="p-4">
-            <!-- Summary Cards -->
+            <!-- Sales Header -->
+            <div class="flex justify-between items-center mb-6">
+                <div>
+                    <h1 class="text-2xl font-bold text-gray-800">Área de Vendas</h1>
+                    <p class="text-sm text-gray-500">Gerencie suas vendas e transações comerciais</p>
+                </div>
+                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
+                    <i class="fas fa-plus mr-2"></i> Nova Venda
+                </button>
+            </div>
+
+            <!-- Sales Summary Cards -->
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-blue-500">
+                <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow p-4 text-white">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <p class="text-sm">Vendas Hoje</p>
+                            <p class="text-2xl font-bold">R$ 3,250</p>
+                        </div>
+                        <div class="bg-white bg-opacity-20 p-2 rounded-full">
+                            <i class="fas fa-shopping-bag"></i>
+                        </div>
+                    </div>
+                    <p class="text-xs text-blue-100 mt-2"><i class="fas fa-caret-up mr-1"></i>15% em relação a ontem</p>
+                </div>
+                <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg shadow p-4 text-white">
                     <div class="flex justify-between items-start">
                         <div>
                             <p class="text-sm text-gray-500">Receitas</p>
@@ -204,8 +228,101 @@
                 </div>
             </div>
 
-            <!-- Charts Row -->
+            <!-- Sales Tools -->
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
+                <!-- Quick Sale Panel -->
+                <div class="bg-white rounded-lg shadow p-4 lg:col-span-1">
+                    <h2 class="font-medium mb-4">Venda Rápida</h2>
+                    <div class="mb-4">
+                        <label class="block text-sm text-gray-500 mb-1">Cliente</label>
+                        <select class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
+                            <option>Cliente Avulso</option>
+                            <option>João Silva</option>
+                            <option>Maria Souza</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-sm text-gray-500 mb-1">Produto</label>
+                        <div class="flex">
+                            <select class="flex-1 border border-gray-300 rounded-l px-3 py-2 text-sm">
+                                <option>Selecione um produto</option>
+                                <option>Produto A</option>
+                                <option>Produto B</option>
+                            </select>
+                            <button class="bg-blue-100 text-blue-600 px-3 rounded-r">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="border-t pt-4">
+                        <div class="flex justify-between mb-2">
+                            <span class="text-sm">Subtotal:</span>
+                            <span class="font-medium">R$ 0,00</span>
+                        </div>
+                        <div class="flex justify-between mb-2">
+                            <span class="text-sm">Desconto:</span>
+                            <span class="font-medium">R$ 0,00</span>
+                        </div>
+                        <div class="flex justify-between font-bold text-lg border-t pt-2">
+                            <span>Total:</span>
+                            <span>R$ 0,00</span>
+                        </div>
+                        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg mt-4">
+                            Finalizar Venda
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Recent Sales -->
+                <div class="bg-white rounded-lg shadow p-4 lg:col-span-2">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="font-medium">Últimas Vendas</h2>
+                        <button class="text-sm text-blue-600 hover:text-blue-800">Ver todas</button>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-50">
+                                <tr>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Itens</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-200">
+                                <tr class="hover:bg-gray-50">
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">João Silva</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">3</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-green-600">R$ 1,250.00</td>
+                                    <td class="px-4 py-2 whitespace-nowrap">
+                                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Pago</span>
+                                    </td>
+                                </tr>
+                                <tr class="hover:bg-gray-50">
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">14/06/2023</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Maria Souza</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">5</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-green-600">R$ 2,100.00</td>
+                                    <td class="px-4 py-2 whitespace-nowrap">
+                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Pendente</span>
+                                    </td>
+                                </tr>
+                                <tr class="hover:bg-gray-50">
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">13/06/2023</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Cliente Avulso</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">1</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-green-600">R$ 450.00</td>
+                                    <td class="px-4 py-2 whitespace-nowrap">
+                                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Pago</span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
                 <!-- Monthly Performance -->
                 <div class="bg-white rounded-lg shadow p-4">
                     <div class="flex justify-between items-center mb-4">