test tableau

src/App copy.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Authenticated } from "./components";
+
+import { Router } from "./router";
+
+const App = () => (
+  <Authenticated>
+    <Router />
+  </Authenticated>
+);
+
+export default App;

src/components/form/formCreateItem.jsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import { Form, Input, InputNumber, Button, Select } from "antd";
+import axios from "axios";
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+export const FormCreateItem = () => {
+  const [form] = Form.useForm();
+  const [rooms, setRooms] = useState([]);
+
+  useEffect(() => {
+    const fetchRooms = async () => {
+      try {
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/room`,
+        );
+        setRooms(response.data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchRooms();
+  }, []);
+
+  const onFinish = async (values) => {
+    try {
+      const response = await axios.post(
+        `${import.meta.env.VITE_API_URL}/item`,
+        values,
+      );
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Form form={form} onFinish={onFinish}>
+      <h1>Create Item</h1>
+      <Form.Item label="Brand" name="brand">
+        <Input />
+      </Form.Item>
+      <Form.Item label="Model" name="model">
+        <Input />
+      </Form.Item>
+      <Form.Item label="Room" name="room">
+        <Select placeholder="Select a room">
+          {rooms.map((room) => (
+            <Option key={room._id} value={room._id}>
+              {room.name}
+            </Option>
+          ))}
+        </Select>
+      </Form.Item>
+      <Form.Item label="Price" name="price">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item label="Purchase Date" name="purchaseDate">
+        <Input />
+      </Form.Item>
+      <Form.Item label="Description" name="description">
+        <TextArea rows={4} />
+      </Form.Item>
+      <Form.Item label="Link" name="link">
+        <Input />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default FormCreateItem;

src/components/form/formCreateRoom.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Form, Input, Button } from "antd";
+import axios from "axios";
+
+export const FormCreateRoom = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = async (values) => {
+    try {
+      const response = await axios.post(
+        `${import.meta.env.VITE_API_URL}/room`,
+        values,
+      );
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Form form={form} onFinish={onFinish}>
+      <Form.Item
+        label="Room Name"
+        name="name"
+        rules={[{ required: true, message: "Please input the room name!" }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default FormCreateRoom;

src/components/item/ItemBox.jsx

@@ -25,13 +25,13 @@ const Characteristic = ({ label, value }) => {
 };
 
 // Composant Détails du Produit (combinaison atomique)
-export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, onEdit }) => {
+export const ItemBox = ({ imageUrl, model, brand, purchaseDate, price, onEdit }) => {
   return (
     <div className="product-details">
       <Image src={imageUrl} alt="Product" />
       <Description title="Product Information">
-        <Characteristic label="Model" value={modelName} />
-        <Characteristic label="Brand" value={brandName} />
+        <Characteristic label="Model" value={model} />
+        <Characteristic label="Brand" value={brand} />
         <Characteristic label="Purchase Date" value={purchaseDate} />
         <Characteristic label="Price" value={price} />
       </Description>
@@ -39,5 +39,3 @@ export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, o
     </div>
   );
 };
-
-

src/components/item/ItemPage.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { ItemBox } from './ItemBox'; // Assurez-vous que le chemin d'importation soit correct
+import React, { useState, useEffect } from "react";
+import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
+import { ItemBox } from './ItemBox';
 
 const itemsPerPage = 4; // Nombre total d'items par page
 const itemsPerRow = 2; // Nombre d'items par rangée
@@ -14,9 +15,25 @@ const chunkArray = (arr, size) => {
 };
 
 // Composant d'affichage de la page
-export const ItemPage = ({ items }) => {
+export const ItemPage = () => {
+  const [items, setItems] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
 
+  useEffect(() => {
+    const fetchItems = async () => {
+      try {
+        const response = await axios.get(
+          `${import.meta.env.VITE_API_URL}/item`,
+        );
+        setItems(response.data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+  
+    fetchItems();
+  }, []);
+
   const handleNextPage = () => {
     setCurrentPage(prevPage => prevPage + 1);
   };
@@ -38,7 +55,7 @@ export const ItemPage = ({ items }) => {
       {rowsToDisplay.map((row, index) => (
         <div key={index} className="item-row">
           {row.map(item => (
-            <ItemBox key={item.id} {...item} />
+            <ItemBox key={item._id} {...item} />
           ))}
         </div>
       ))}
@@ -50,4 +67,3 @@ export const ItemPage = ({ items }) => {
     </div>
   );
 };
-

src/main.jsx

@@ -5,7 +5,7 @@ import "./assets/styles/index.css";
 import { BrowserRouter } from "react-router-dom";
 import { CookiesProvider } from "react-cookie";
 import setupAxios from "./setupAxios";
-import "bootstrap";
+import { Layout } from "antd";
 
 setupAxios();
 
@@ -13,7 +13,9 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <BrowserRouter>
       <CookiesProvider>
-        <App />
+        <Layout>
+          <App />
+        </Layout>
       </CookiesProvider>
     </BrowserRouter>
   </React.StrictMode>,

src/pages/home.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 
 import { useAuth } from "../hooks";
+import { DatePicker } from "antd";
+import { FormCreateItem } from "../components/form/formCreateItem";
+import { FormCreateRoom } from "../components/form/formCreateRoom";
 import { ItemPage } from "../components/item/ItemPage";
 
-
 export const Home = () => {
   const { user } = useAuth();
   return (
@@ -11,23 +13,9 @@ export const Home = () => {
 
       <h1>Home page</h1>
       {user && <h2>Hello {user.user.username}</h2>}
-      <ItemPage items={
-        [
-          {
-            brandName:"GlubGlub GabGalab"
-          },{
-            brandName:"GlubGlub GabGalab2"
-          },{
-            brandName:"GlubGlub GabGalab"
-          },{
-            brandName:"GlubGlub GabGalab2"
-          },{
-            brandName:"GlubGlub GabGalab"
-          },{
-            brandName:"GlubGlub GabGalab2"
-          }
-      ]
-      }></ItemPage>
+
+      <FormCreateRoom></FormCreateRoom>
+      <FormCreateItem></FormCreateItem>
     </div>
   );
 };

src/pages/test.jsx

@@ -1,13 +1,15 @@
 import React from "react";
 
 import { useAuth } from "../hooks";
+import { ItemPage } from "../components/item/ItemPage";
 
 export const Test = () => {
   const { user } = useAuth();
 
   return (
     <div>
-      <h1>Vive la macronie à bat montjoiuie saint dennis</h1>
+      <h1>Vive la macronie à bat montjoie saint dennis</h1>
+      <ItemPage></ItemPage>
     </div>
   );
 };