._.

src/api.jsx

@@ -50,6 +50,7 @@ export const getAccessories = async () => {
 
 export const createAccessory = async (accessoryData) => {
   try {
+    console.log(accessoryData);
     const response = await axios.post(`${API_URL}/accessories`, accessoryData, {
       headers: {
         Authorization: `Bearer ${getAuthToken()}`,
@@ -95,3 +96,18 @@ export const deleteAccessory = async (id) => {
     throw error;
   }
 };
+
+export const getCities = async () => {
+  try {
+    const response = await axios.get(`${API_URL}/cities`, {
+      headers: {
+        Authorization: `Bearer ${getAuthToken()}`,
+        Accept: "application/json",
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.log("Ошибка при получении городов:", error);
+    throw error;
+  }
+};

src/pages/Accessories.jsx

@@ -4,10 +4,12 @@ import {
   createAccessory,
   updateAccessory,
   deleteAccessory,
+  getCities,
 } from "../api.jsx";
 
 const Accessories = () => {
   const [accessories, setAccessories] = useState([]);
+  const [cities, setCities] = useState([]);
   const [newAccessory, setNewAccessory] = useState({
     name: "",
     volume: "",
@@ -20,17 +22,28 @@ const Accessories = () => {
 
   useEffect(() => {
     fetchAccessories();
+    fetchCities();
   }, []);
 
   const fetchAccessories = async () => {
     try {
       const data = await getAccessories();
+      console.log(data);
       setAccessories(data);
     } catch (error) {
       console.error("Ошибка при загрузке аксессуаров:", error);
     }
   };
 
+  const fetchCities = async () => {
+    try {
+      const data = await getCities();
+      setCities(data);
+    } catch (error) {
+      console.error("Ошибка при загрузке городов:", error);
+    }
+  };
+
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setNewAccessory({ ...newAccessory, [name]: value });
@@ -43,7 +56,8 @@ const Accessories = () => {
       !newAccessory.name ||
       !newAccessory.volume ||
       !newAccessory.weight ||
-      !newAccessory.period
+      !newAccessory.period ||
+      !newAccessory.city_id
     ) {
       setError("Пожалуйста, заполните все поля.");
       return;
@@ -145,6 +159,23 @@ const Accessories = () => {
             onChange={handleInputChange}
           />
         </div>
+        <div className="form-group">
+          <label htmlFor="citySelect">Город</label>
+          <select
+            className="form-control"
+            id="citySelect"
+            name="city_id"
+            value={newAccessory.city_id}
+            onChange={handleInputChange}
+          >
+            <option value="">Выберите город</option>
+            {cities.map((city) => (
+              <option key={city.id} value={city.id}>
+                {city.name}
+              </option>
+            ))}
+          </select>
+        </div>
         <div className="btn-group">
           <button type="submit" className="btn btn-primary">
             {editingAccessoryId ? "Обновить" : "Создать"}
@@ -172,6 +203,7 @@ const Accessories = () => {
             <th>Объем</th>
             <th>Вес</th>
             <th>Период</th>
+            <th>Город</th>
             <th>Действия</th>
           </tr>
         </thead>
@@ -183,6 +215,7 @@ const Accessories = () => {
               <td>{accessory.volume}</td>
               <td>{accessory.weight}</td>
               <td>{accessory.period}</td>
+              <td>{accessory.city_name}</td>{" "}
               <td>
                 <div className="btn-group">
                   <button