From 8c1aa51f2840d657a09732d81bd4d12afbc32d5f Mon Sep 17 00:00:00 2001
From: tamfrr <tamfrr93@gmail.com>
Date: Wed, 27 Nov 2024 13:00:55 -0800
Subject: [PATCH] Atualizar src/app/admin/cars/[id]/page.jsx

---
 src/app/admin/cars/[id]/page.jsx | 251 +++++++++++++++++--------------
 1 file changed, 139 insertions(+), 112 deletions(-)

diff --git a/src/app/admin/cars/[id]/page.jsx b/src/app/admin/cars/[id]/page.jsx
index 2721c05..486c593 100644
--- a/src/app/admin/cars/[id]/page.jsx
+++ b/src/app/admin/cars/[id]/page.jsx
@@ -1,139 +1,166 @@
-import React from 'react';
-import { X } from 'lucide-react';
+"use client";
+import { useState } from 'react';
+import { Save, ArrowLeft } from 'lucide-react';
+
+export default function CarForm({ params }) {
+  const [car, setCar] = useState({
+    name: '',
+    year: '',
+    price: '',
+    isSpecial: false,
+    specs: {
+      consumption: '',
+      transmission: '',
+      mileage: ''
+    }
+  });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // Aqui virá a integração com a API
+    console.log('Car data:', car);
+  };
 
-const CarForm = () => {
   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">
+          <div className="flex items-center gap-4">
+            <button 
+              onClick={() => window.location.href = '/admin'}
+              className="text-gray-600 hover:text-gray-900"
+            >
+              <ArrowLeft className="h-6 w-6" />
+            </button>
+            <h1 className="text-3xl font-bold text-gray-900">
+              {params.id === 'new' ? 'Add New Car' : 'Edit Car'}
+            </h1>
           </div>
-          <span className="font-semibold text-gray-700">Add/Edit Car</span>
         </div>
       </header>
 
-      <main className="max-w-3xl mx-auto px-4 py-8">
-        <form className="bg-white rounded-lg shadow p-6">
-          {/* Basic Information */}
-          <div className="mb-8">
-            <h2 className="text-lg font-semibold mb-4">Basic Information</h2>
-            <div className="space-y-4">
+      <main className="max-w-7xl mx-auto py-6 px-4">
+        <div className="bg-white shadow rounded-lg p-6">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Basic Information */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Car Name
-                </label>
-                <input 
+                <label className="block text-sm font-medium text-gray-700">Name</label>
+                <input
                   type="text"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
-                  placeholder="e.g. BMW M4 2024"
+                  value={car.name}
+                  onChange={(e) => setCar({...car, name: e.target.value})}
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
+                  required
                 />
               </div>
+              
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Price
-                </label>
-                <input 
+                <label className="block text-sm font-medium text-gray-700">Year</label>
+                <input
                   type="number"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
-                  placeholder="Price in dollars"
+                  value={car.year}
+                  onChange={(e) => setCar({...car, year: e.target.value})}
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
+                  required
                 />
               </div>
-              <div>
-                <label className="flex items-center gap-2">
-                  <input type="checkbox" className="w-4 h-4" />
-                  <span className="text-sm font-medium text-gray-700">Mark as Special</span>
-                </label>
-              </div>
-            </div>
-          </div>
 
-          {/* Technical Specifications */}
-          <div className="mb-8">
-            <h2 className="text-lg font-semibold mb-4">Technical Specifications</h2>
-            <div className="grid md:grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Engine Layout
-                </label>
-                <input 
-                  type="text"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                <label className="block text-sm font-medium text-gray-700">Price</label>
+                <input
+                  type="number"
+                  value={car.price}
+                  onChange={(e) => setCar({...car, price: e.target.value})}
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
+                  required
                 />
               </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Engine Volume
-                </label>
-                <input 
-                  type="text"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Horse Power
-                </label>
-                <input 
-                  type="text"
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Transmission
-                </label>
-                <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
-                  <option>Automatic</option>
-                  <option>Manual</option>
-                </select>
-              </div>
-            </div>
-          </div>
 
-          {/* Features/Extras */}
-          <div className="mb-8">
-            <h2 className="text-lg font-semibold mb-4">Features & Extras</h2>
-            <div className="space-y-2">
-              {['ABS', 'Bluetooth', 'ESP', 'LED Headlights'].map((feature) => (
-                <label key={feature} className="flex items-center gap-2">
-                  <input type="checkbox" className="w-4 h-4" />
-                  <span className="text-sm font-medium text-gray-700">{feature}</span>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">
+                  Special Offer
                 </label>
-              ))}
-            </div>
-          </div>
-
-          {/* Images */}
-          <div className="mb-8">
-            <h2 className="text-lg font-semibold mb-4">Images</h2>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              {[1, 2, 3, 4].map((n) => (
-                <div key={n} className="relative">
-                  <div className="aspect-w-3 aspect-h-2 bg-gray-100 rounded-lg flex items-center justify-center">
-                    <span className="text-gray-400">+ Add Image</span>
-                  </div>
-                  <button className="absolute -top-2 -right-2 bg-red-500 text-white p-1 rounded-full">
-                    <X className="w-4 h-4" />
-                  </button>
+                <div className="mt-1">
+                  <input
+                    type="checkbox"
+                    checked={car.isSpecial}
+                    onChange={(e) => setCar({...car, isSpecial: e.target.checked})}
+                    className="rounded border-gray-300 text-blue-600 shadow-sm mt-2"
+                  />
                 </div>
-              ))}
+              </div>
             </div>
-          </div>
 
-          {/* Submit Buttons */}
-          <div className="flex gap-4">
-            <button type="submit" className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
-              Save Car
-            </button>
-            <button type="button" className="bg-gray-100 text-gray-600 px-6 py-2 rounded-lg hover:bg-gray-200 transition-colors">
-              Cancel
-            </button>
-          </div>
-        </form>
+            {/* Specifications */}
+            <div className="border-t pt-6">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Specifications</h3>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">Consumption</label>
+                  <input
+                    type="text"
+                    value={car.specs.consumption}
+                    onChange={(e) => setCar({
+                      ...car, 
+                      specs: {...car.specs, consumption: e.target.value}
+                    })}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">Transmission</label>
+                  <select
+                    value={car.specs.transmission}
+                    onChange={(e) => setCar({
+                      ...car, 
+                      specs: {...car.specs, transmission: e.target.value}
+                    })}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
+                  >
+                    <option value="">Select...</option>
+                    <option value="Automatic">Automatic</option>
+                    <option value="Manual">Manual</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">Mileage</label>
+                  <input
+                    type="text"
+                    value={car.specs.mileage}
+                    onChange={(e) => setCar({
+                      ...car, 
+                      specs: {...car.specs, mileage: e.target.value}
+                    })}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Images - será implementado depois */}
+            <div className="border-t pt-6">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Images</h3>
+              <div className="bg-gray-50 p-4 rounded border-2 border-dashed border-gray-300 text-center">
+                Image upload coming soon...
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                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"
+              >
+                <Save className="h-5 w-5 mr-2" />
+                Save Car
+              </button>
+            </div>
+          </form>
+        </div>
       </main>
     </div>
   );
-};
-
-export default CarForm;
+}
\ No newline at end of file