fix(front) Переделан pagelayout + добавлена AddItem

frontend/src/pages/AddItem.jsx

@@ -1,113 +1,120 @@
-import { useState } from "react";
-import * as api from "../api"; // Импортируем все функции из api/index.js
 import PageLayout from "../components/PageLayout";
+import * as api from "../api/index";
+import { useState } from "react";
 
-export default function Dashboard() {
+export default function AddItem() {
   const [formData, setFormData] = useState({
     name: "",
-    unit: "",
     city: "",
+    unit: "",
     price: "",
     category: "",
   });
 
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({
-      ...formData,
-      [name]: value,
-    });
-  };
-
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    const payload = {
-      ...formData,
-      price: parseFloat(formData.price) || 0,
-    };
-
     try {
-      const response = await api.addItem(payload);
-      console.log("Товар добавлен", response.data);
-
-      setFormData({ name: "", unit: "", city: "", price: "", category: "" });
-    } catch (err) {
-      console.error(err);
-      alert(err);
+      await api.addItem(formData);
+      alert("Товар успешно добавлен");
+      setFormData({
+        name: "",
+        city: "",
+        unit: "",
+        price: "",
+        category: "",
+      });
+    } catch (error) {
+      console.error(error);
     }
   };
 
   return (
     <PageLayout>
-      <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border">
-        <form onSubmit={handleSubmit} className="space-y-4">
+      <main className="px-6 md:px-16 grow w-full">
+        <h1 className="text-2xl text-white font-medium my-6">
+          Добавление товара
+        </h1>
+        <form onSubmit={handleSubmit} className="w-full max-w-md p-6">
           <div>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Название товара
+            <label className="block text-slate-300 mb-1 text-sm">
+              Название
             </label>
             <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
               type="text"
-              name="unit"
-              required
-              value={formData.unit}
-              onChange={handleChange}
-              placeholder="кг, шт, упаковка"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Город
-            </label>
-            <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
-              type="text"
-              name="city"
-              required
-              value={formData.city}
-              onChange={handleChange}
-              placeholder="Город"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Название товара
-            </label>
-            <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
-              type="text"
-              name="name"
-              required
+              placeholder="Введите название"
               value={formData.name}
-              onChange={handleChange}
-              placeholder="Название товара"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Стоимость
+              onChange={(e) =>
+                setFormData({ ...formData, name: e.target.value })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">Город</label>
+            <input
+              type="text"
+              placeholder="Введите город"
+              value={formData.city}
+              onChange={(e) =>
+                setFormData({ ...formData, city: e.target.value })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">
+              Единица измерения
             </label>
             <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
-              type="number"
-              name="price"
+              type="text"
+              placeholder="Введите единицу измерения"
+              value={formData.unit}
+              onChange={(e) =>
+                setFormData({ ...formData, unit: e.target.value })
+              }
               required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">Цена</label>
+            <input
+              type="text"
+              placeholder="Введите цену"
               value={formData.price}
-              onChange={handleChange}
-              placeholder="Стоимость"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
+              onChange={(e) =>
+                setFormData({ ...formData, price: parseInt(e.target.value) })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">
               Категория
             </label>
             <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
               type="text"
-              name="category"
-              required
+              placeholder="Введите категорию"
               value={formData.category}
-              onChange={handleChange}
-              placeholder="Рыба, крабы, гребешки"
-            ></input>
-
-            <button type="submit">Добавить товар</button>
+              onChange={(e) =>
+                setFormData({ ...formData, category: e.target.value })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
           </div>
+          <button
+            type="submit"
+            className="w-full bg-gold hover:bg-red-400 text-white font-medium py-2 rounded transition-colors duration-200 ease-in-out"
+          >
+            Создать товар
+          </button>
         </form>
-      </div>
+      </main>
     </PageLayout>
   );
 }