feat: bulk create user

src/App.tsx

@@ -9,6 +9,7 @@ import Practical from "./pages/Practical";
 import LoginPage from "./pages/Login";
 import PageTest from "./pages/PageTest";
 import CreateTp from "./pages/admin/CreateTp";
+import BulkUsers from "./pages/admin/BulkCreateUser";
 
 function App() {
     const [showNotif, setShowNotif] = useState(false);
@@ -22,7 +23,9 @@ function App() {
                     <Route path="/instances" element={<Instances />} />
                     <Route path="/profile" element={<PageTest />} />
                     <Route path="/login" element={<LoginPage />} />
+                    <Route path="/admin" element={<BulkUsers />} />
                     <Route path="/admin/tps" element={<CreateTp />} />
+                    <Route path="/settings" element={<CreateTp />} />
                 </Routes>
             </Navigation>
 

src/component/Navigation/Navigation.tsx

@@ -106,6 +106,14 @@ const Navigation: React.FC<NavigationProps> = ({
                                 </ul>
                             </div>
                         </li>
+                        <li>
+                            <div>
+                                <ChartPieIcon className="size-6" />
+                                <Link to="/admin" onClick={toggleDrawer}>
+                                    Admin
+                                </Link>
+                            </div>
+                        </li>
                         <li>
                             <div>
                                 <ChartPieIcon className="size-6" />

src/pages/admin/BulkCreateUser.tsx

@@ -0,0 +1,100 @@
+import axios from "axios";
+import { useState } from "react";
+
+function BulkUsers() {
+    const [file, setFile] = useState(null);
+    const [userData, setUserData] = useState([]);
+    const [practical, setPractical] = useState("0");
+
+    const handlePracticalChange = (e) => {
+        setPractical(e.target.value);
+    }
+
+    const handleFileChange = (event) => {
+        const selectedFile = event.target.files[0];
+        if (selectedFile && selectedFile.type === 'text/csv') {
+            setFile(selectedFile);
+            parseCSV(selectedFile);
+        } else {
+            alert('Please upload a valid CSV file.');
+        }
+    };
+
+    const parseCSV = (file) => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const text = event.target.result;
+            const rows = text.split('\n').map((row) => row.split(','));
+            const formattedData = rows.map((row) => ({
+                name: row[0],
+                email: row[1],
+                // Add other fields as necessary
+            }));
+            setUserData(formattedData);
+        };
+        reader.readAsText(file);
+    };
+
+    const handleSubmit = () => {
+        // Handle submission logic (e.g., sending data to the backend)
+        console.log('Submitting data:', userData.filter(user => user.name !== ""));
+        axios.post("/api/users/jdmi", userData.filter(user => user.name !== "")).then(res => console.log(res));
+    };
+
+    return (
+        <div className="max-w-md mx-auto p-5">
+            <h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
+            <input
+                type="file"
+                accept=".csv"
+                onChange={handleFileChange}
+                className="file-input file-input-bordered w-full mb-4"
+            />
+            {userData.length > 0 && (
+                <div className="overflow-x-auto">
+                    <table className="table w-full">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Email</th>
+                                {/* Add other headers as necessary */}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {userData.map((user, index) => (
+                                <tr key={index}>
+                                    <td>{user.name}</td>
+                                    <td>{user.email}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                    Tp:
+                </label>
+                <select
+                    name="practical"
+                    value={practical}
+                    onChange={handlePracticalChange}
+                    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                    <option value="0">Empty</option>
+                    <option value="1">Bot Discord</option>
+                </select>
+            </div>
+            <button
+                onClick={handleSubmit}
+                className="btn btn-primary mt-4"
+                disabled={userData.length === 0}
+            >
+                Create Users
+            </button>
+        </div>
+    );
+}
+
+export default BulkUsers;