Update templates/seller.html

templates/seller.html

@@ -4,83 +4,67 @@
 <div class="bg-white rounded-lg shadow-lg p-8">
     <h2 class="text-3xl font-bold text-center mb-8">Appointments for {{ car.name }}</h2>
     
-    <!-- Car Details -->
-    <div class="bg-blue-50 p-4 rounded-lg mb-6">
-        <h3 class="text-xl font-bold text-blue-600">Car Details:</h3>
-        <p><strong>Name:</strong> {{ car.name }}</p>
-        <p><strong>Year:</strong> {{ car.year }}</p>
-        <p><strong>Price:</strong> {{ car.price|format_price }}</p>
-    </div>
-    
     {% if appointments %}
     <div class="overflow-x-auto">
-        <table class="min-w-full bg-white border border-gray-200">
+        <table class="min-w-full bg-white">
             <thead>
-                <tr class="bg-gray-100">
-                    <th class="py-3 px-4 border text-left">Buyer Name</th>
-                    <th class="py-3 px-4 border text-left">Email</th>
-                    <th class="py-3 px-4 border text-left">Phone</th>
-                    <th class="py-3 px-4 border text-left">Preferred Date</th>
-                    <th class="py-3 px-4 border text-left">Status</th>
-                    <th class="py-3 px-4 border text-left">Actions</th>
+                <tr class="bg-gray-200">
+                    <th class="py-2 px-4 border">Buyer Name</th>
+                    <th class="py-2 px-4 border">Email</th>
+                    <th class="py-2 px-4 border">Phone</th>
+                    <th class="py-2 px-4 border">Preferred Date</th>
+                    <th class="py-2 px-4 border">Status</th>
+                    <th class="py-2 px-4 border">Actions</th>
                 </tr>
             </thead>
             <tbody>
                 {% for appointment in appointments %}
-                <tr class="hover:bg-gray-50">
-                    <td class="py-3 px-4 border font-semibold">{{ appointment.buyer_name }}</td>
-                    <td class="py-3 px-4 border">{{ appointment.buyer_email }}</td>
-                    <td class="py-3 px-4 border">{{ appointment.buyer_phone }}</td>
-                    <td class="py-3 px-4 border">{{ appointment.preferred_date }} at {{ appointment.preferred_time }}</td>
-                    <td class="py-3 px-4 border">
-                        <span class="px-3 py-1 rounded-full text-sm 
+                <tr>
+                    <td class="py-2 px-4 border">{{ appointment.buyer_name }}</td>
+                    <td class="py-2 px-4 border">{{ appointment.buyer_email }}</td>
+                    <td class="py-2 px-4 border">{{ appointment.buyer_phone }}</td>
+                    <td class="py-2 px-4 border">{{ appointment.preferred_date }}</td>
+                    <td class="py-2 px-4 border">
+                        <span class="px-2 py-1 rounded text-sm 
                                     {% if appointment.status == 'approved' %}bg-green-100 text-green-800
                                     {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                             {{ appointment.status|title }}
                         </span>
                     </td>
-                    <td class="py-3 px-4 border">
+                    <td class="py-2 px-4 border">
                         {% if appointment.status == 'pending' %}
                         <button onclick="openModal('{{ appointment._id }}')" 
-                                class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition duration-300">
-                            ✅ Approve
+                                class="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700">
+                            Approve
                         </button>
                         {% else %}
-                        <span class="text-green-600 font-semibold">✅ Approved</span>
+                        <span class="text-green-600">Approved</span>
                         {% endif %}
                     </td>
                 </tr>
                 
                 <!-- Modal for each appointment -->
-                <div id="modal-{{ appointment._id }}" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
-                    <div class="bg-white p-6 rounded-lg w-full max-w-md">
-                        <h3 class="text-xl font-bold mb-4">Schedule Meeting for {{ appointment.buyer_name }}</h3>
+                <div id="modal-{{ appointment._id }}" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+                    <div class="bg-white p-6 rounded-lg w-96">
+                        <h3 class="text-xl font-bold mb-4">Schedule Meeting</h3>
                         <form method="POST" action="{{ url_for('approve_appointment', appointment_id=appointment._id) }}">
                             <div class="mb-4">
                                 <label class="block text-gray-700 mb-2">Meeting Date</label>
-                                <input type="date" name="meeting_date" required 
-                                       class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                                <input type="date" name="meeting_date" required class="w-full px-3 py-2 border rounded">
                             </div>
                             <div class="mb-4">
                                 <label class="block text-gray-700 mb-2">Meeting Time</label>
-                                <input type="time" name="meeting_time" required 
-                                       class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                                <input type="time" name="meeting_time" required class="w-full px-3 py-2 border rounded">
                             </div>
                             <div class="mb-4">
-                                <label class="block text-gray-700 mb-2">Meeting Location</label>
-                                <input type="text" name="meeting_place" required 
-                                       class="w-full px-3 py-2 border border-gray-300 rounded-md" 
-                                       placeholder="Enter meeting location/address">
+                                <label class="block text-gray-700 mb-2">Meeting Place</label>
+                                <input type="text" name="meeting_place" required class="w-full px-3 py-2 border rounded" 
+                                       placeholder="Enter meeting location">
                             </div>
                             <div class="flex justify-end space-x-2">
                                 <button type="button" onclick="closeModal('{{ appointment._id }}')" 
-                                        class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 transition duration-300">
-                                    Cancel
-                                </button>
-                                <button type="submit" 
-                                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">
-                                    Confirm & Send Email
-                                </button>
+                                        class="px-4 py-2 border rounded">Cancel</button>
+                                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Confirm</button>
                             </div>
                         </form>
                     </div>
@@ -90,16 +74,8 @@
         </table>
     </div>
     {% else %}
-    <div class="text-center py-8">
-        <i class="fas fa-calendar-times text-6xl text-gray-300 mb-4"></i>
-        <p class="text-gray-600 text-xl">No appointments for this car yet.</p>
-        <p class="text-gray-500">Buyers will appear here when they book appointments.</p>
-    </div>
+    <p class="text-gray-600 text-center">No appointments for this car yet.</p>
     {% endif %}
-    
-    <div class="mt-6 text-center">
-        <a href="{{ url_for('seller_dashboard') }}" class="text-blue-600 hover:underline">← Back to Dashboard</a>
-    </div>
 </div>
 
 <script>
@@ -112,13 +88,5 @@ function closeModal(appointmentId) {
     document.getElementById('modal-' + appointmentId).classList.add('hidden');
     document.getElementById('modal-' + appointmentId).classList.remove('flex');
 }
-
-// Close modal when clicking outside
-window.onclick = function(event) {
-    if (event.target.classList.contains('fixed')) {
-        event.target.classList.add('hidden');
-        event.target.classList.remove('flex');
-    }
-}
 </script>
 {% endblock %}