From ee36dd9db98b1e6f256609e83458809118a302f2 Mon Sep 17 00:00:00 2001
From: tamfrr <tamfrr93@gmail.com>
Date: Tue, 26 Nov 2024 14:14:05 -0800
Subject: [PATCH] Atualizar src/app/admin/page.jsx

---
 src/app/admin/page.jsx | 147 ++++++++++++++++++++++-------------------
 1 file changed, 78 insertions(+), 69 deletions(-)

diff --git a/src/app/admin/page.jsx b/src/app/admin/page.jsx
index 2ebf471..1fb863c 100644
--- a/src/app/admin/page.jsx
+++ b/src/app/admin/page.jsx
@@ -1,91 +1,102 @@
-import React from 'react';
-import { Pencil, Trash, Plus } from 'lucide-react';
+"use client";
+import { useState } from 'react';
+import { PlusCircle, Pencil, Trash2, ImagePlus } from 'lucide-react';
 
-const AdminDashboard = () => {
-  // Dados de exemplo (depois virão do backend)
-  const cars = [
+export default function AdminPage() {
+  const [cars, setCars] = useState([
     {
       id: 1,
-      name: 'BMW M4 2024',
-      price: 75000,
-      image: '/api/placeholder/200/150',
-      isSpecial: true
-    },
-    {
-      id: 2,
-      name: 'Mercedes-Benz C-Class 2015',
+      name: 'MERCEDES-BENZ C-CLASS 2015',
       price: 35000,
-      image: '/api/placeholder/200/150',
-      isSpecial: true
+      special: true
     }
-  ];
+  ]);
+
+  const handleDelete = async (id) => {
+    if (confirm('Are you sure you want to delete this car?')) {
+      // Aqui virá a deleção via API
+      setCars(cars.filter(car => car.id !== id));
+    }
+  };
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
-          <div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center">
-            <span className="text-gray-500">LOGO</span>
+      <header className="bg-white shadow">
+        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center">
+            <h1 className="text-3xl font-bold text-gray-900">Car Management</h1>
+            <button
+              onClick={() => window.location.href = '/admin/cars/new'}
+              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
+            >
+              <PlusCircle className="h-5 w-5 mr-2" />
+              Add New Car
+            </button>
           </div>
-          <span className="font-semibold text-gray-700">Admin Panel</span>
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-4 py-8">
-        {/* Add New Car Button */}
-        <div className="mb-8">
-          <button className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
-            <Plus className="w-5 h-5" />
-            Add New Car
-          </button>
-        </div>
-
-        {/* Cars List */}
-        <div className="bg-white rounded-lg shadow">
-          <div className="py-4 px-6 border-b border-gray-200">
-            <h2 className="text-lg font-semibold text-gray-800">Cars Management</h2>
-          </div>
-          
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="bg-white shadow rounded-lg">
           <div className="overflow-x-auto">
-            <table className="w-full">
+            <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Image</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Special</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Image
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Name
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Price
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Special
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Actions
+                  </th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-gray-200">
+              <tbody className="bg-white divide-y divide-gray-200">
                 {cars.map((car) => (
                   <tr key={car.id}>
-                    <td className="px-6 py-4">
-                      <img 
-                        src={car.image} 
-                        alt={car.name}
-                        className="w-24 h-16 object-cover rounded"
-                      />
-                    </td>
-                    <td className="px-6 py-4">{car.name}</td>
-                    <td className="px-6 py-4">${car.price.toLocaleString()}</td>
-                    <td className="px-6 py-4">
-                      {car.isSpecial ? (
-                        <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
-                          Special
-                        </span>
-                      ) : '-'}
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex gap-2">
-                        <button className="p-2 text-blue-600 hover:bg-blue-50 rounded">
-                          <Pencil className="w-5 h-5" />
-                        </button>
-                        <button className="p-2 text-red-600 hover:bg-red-50 rounded">
-                          <Trash className="w-5 h-5" />
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="h-10 w-10 flex-shrink-0">
+                          <img className="h-10 w-10 rounded object-cover" src="/api/placeholder/100/100" alt="" />
+                        </div>
+                        <button className="ml-2 text-blue-600 hover:text-blue-800">
+                          <ImagePlus className="h-5 w-5" />
                         </button>
                       </div>
                     </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm font-medium text-gray-900">{car.name}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900">${car.price.toLocaleString()}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${car.special ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
+                        {car.special ? 'Yes' : 'No'}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
+                      <button
+                        onClick={() => window.location.href = `/admin/cars/${car.id}`}
+                        className="text-blue-600 hover:text-blue-900"
+                      >
+                        <Pencil className="h-5 w-5" />
+                      </button>
+                      <button
+                        onClick={() => handleDelete(car.id)}
+                        className="text-red-600 hover:text-red-900"
+                      >
+                        <Trash2 className="h-5 w-5" />
+                      </button>
+                    </td>
                   </tr>
                 ))}
               </tbody>
@@ -95,6 +106,4 @@ const AdminDashboard = () => {
       </main>
     </div>
   );
-};
-
-export default AdminDashboard;
+}
\ No newline at end of file