fix: build

src/component/Navigation/Navigation.tsx

@@ -46,9 +46,10 @@ const Navigation: React.FC<NavigationProps> = ({
         navigate("/login");
       }
     });
-    localStorage.setItem("theme", theme);
+    if (theme) localStorage.setItem("theme", theme);
     const localTheme = localStorage.getItem("theme");
-    document.querySelector("html").setAttribute("data-theme", localTheme);
+    const doc = document.querySelector("html");
+    if (doc) doc.setAttribute("data-theme", localTheme || "dark");
   }, [theme, navigate]);
 
   return (

src/pages/Dashboard.tsx

@@ -2,9 +2,10 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import { Tp } from "../type/TpType";
+import { DashboardType } from "../type/Dashboard";
 
 function Dashboard() {
-  const [dashboard, setDashboard] = useState(null);
+  const [dashboard, setDashboard] = useState<DashboardType | null>(null);
   const username = localStorage.getItem("username");
   useEffect(() => {
     axios.get("/api/dashboard").then((res) => {

src/pages/Instances.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
+import { Instance } from "../type/InstanceType";
 
 function Instances() {
   const [instances, setInstances] = useState([]);
@@ -15,7 +16,7 @@ function Instances() {
     <div className="container mx-auto py-10">
       <h1 className="text-3xl font-bold mb-6 text-center">Your instances</h1>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {instances.map((instance) => (
+        {instances.map((instance: Instance) => (
           <div
             key={instance.id}
             className="card card-compact bg-base-200 shadow-lg p-4"

src/pages/PageTest.tsx

@@ -1,6 +1,3 @@
-import axios from "axios";
-import { useState } from "react";
-
 function PageTest() {
   return (
     <>

src/pages/Practicals.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
+import { Tp } from "../type/TpType";
 
 function Practicals() {
   const [tps, setTps] = useState([]);
@@ -15,7 +16,7 @@ function Practicals() {
     <div className="container mx-auto py-10">
       <h1 className="text-3xl font-bold mb-6 text-center">Your TPs</h1>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {tps.map((practical) => (
+        {tps.map((practical: Tp) => (
           <div
             key={practical.id}
             className="card card-compact bg-base-200 shadow-lg p-4"

src/pages/admin/BulkCreateUser.tsx

@@ -1,121 +1,126 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { BulkUserCreattionType } from "../../type/BulkUserCreattionType";
+import { Tp } from "../../type/TpType";
+import { CSVParseType } from "../../type/CSVParseType";
 
 function BulkUsers() {
-    const [userData, setUserData] = useState([]);
+  const [userData, setUserData] = useState<CSVParseType[]>([]);
-    const [practical, setPractical] = useState("0");
+  const [practical, setPractical] = useState("0");
-    const navigate = useNavigate();
+  const navigate = useNavigate();
-    const [tps, setTps] = useState([]);
+  const [tps, setTps] = useState([]);
 
-    const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        setPractical(e.target.value);
+    setPractical(e.target.value);
+  };
+
+  useEffect(() => {
+    axios.get("/api/tps").then((res) => {
+      setTps(res.data);
+    });
+  }, []);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const selectedFile = event.target.files[0];
+      parseCSV(selectedFile);
+    }
+  };
+
+  const parseCSV = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = (event: ProgressEvent<FileReader>) => {
+      if (event.target) {
+        const text = event.target.result!.toString();
+        const rows = text.split("\n").map((row) => row.split(","));
+        const formattedData = rows.map((row) => ({
+          name: row[0],
+          email: row[1],
+          password: row[2],
+          instance_name: row[3],
+          instance_ssh: row[4],
+          instance_port: row[5],
+          instance_pwd: row[6],
+        }));
+        setUserData(formattedData);
+      }
     };
+    reader.readAsText(file);
+  };
 
-    useEffect(() => {
+  const handleSubmit = () => {
-        axios.get("/api/tps").then((res) => {
+    axios
-            setTps(res.data);
+      .post("/api/users/jdmi", {
-        });
+        users: userData.filter((user: CSVParseType) => user.name !== ""),
-    }, []);
+        tpId: practical,
+      })
+      .then(() => navigate(`/admin/users`));
+  };
 
-    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  return (
-        const selectedFile = event.target.files[0];
+    <div className="max-w-7xl mx-auto p-5">
-        parseCSV(selectedFile);
+      <h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
-    };
+      <input
-
+        type="file"
-    const parseCSV = (file: File) => {
+        accept=".csv"
-        const reader = new FileReader();
+        onChange={handleFileChange}
-        reader.onload = (event: ProgressEvent<FileReader>) => {
+        className="file-input file-input-bordered mb-4"
-            const text = event.target.result;
+      />
-            const rows = text.split("\n").map((row) => row.split(","));
+      {userData.length > 0 && (
-            const formattedData = rows.map((row) => ({
+        <div className="overflow-x-auto w-full">
-                name: row[0],
+          <table className="table w-full">
-                email: row[1],
+            <thead>
-                password: row[2],
+              <tr>
-                instance_name: row[3],
+                <th>Name</th>
-                instance_ssh: row[4],
+                <th>Email</th>
-                instance_port: row[5],
+                <th>Password</th>
-                instance_pwd: row[6],
+                <th>Instance name</th>
-            }));
+                <th>Instance ssh</th>
-            setUserData(formattedData);
+                <th>Instance port</th>
-        };
+                <th>Instance pwd</th>
-        reader.readAsText(file);
+              </tr>
-    };
+            </thead>
-
+            <tbody>
-    const handleSubmit = () => {
+              {userData.map((user: BulkUserCreattionType, index: number) => (
-        // Handle submission logic (e.g., sending data to the backend)
+                <tr key={index}>
-        console.log(practical);
+                  <td>{user.name}</td>
-        axios
+                  <td>{user.email}</td>
-            .post("/api/users/jdmi", {
+                  <td>{user.password}</td>
-                users: userData.filter((user) => user.name !== ""),
+                  <td>{user.instance_name}</td>
-                tpId: practical,
+                  <td>{user.instance_ssh}</td>
-            })
+                  <td>{user.instance_port}</td>
-            .then(() => navigate(`/admin/users`));
+                  <td>{user.instance_pwd}</td>
-    };
+                </tr>
-
+              ))}
-    return (
+            </tbody>
-        <div className="max-w-md mx-auto p-5">
+          </table>
-            <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>
-                                <th>Password</th>
-                                <th>Instance name</th>
-                                <th>Instance ssh</th>
-                                <th>Instance port</th>
-                                <th>Instance pwd</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {userData.map((user, index) => (
-                                <tr key={index}>
-                                    <td>{user.name}</td>
-                                    <td>{user.email}</td>
-                                    <td>{user.password}</td>
-                                    <td>{user.instance_name}</td>
-                                    <td>{user.instance_ssh}</td>
-                                    <td>{user.instance_port}</td>
-                                    <td>{user.instance_pwd}</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"
-                >
-                    return <option value="0">Empty</option>;
-                    {tps.map((tp: TpType.Tp) => {
-                        return <option value={tp.id}>{tp.name}</option>;
-                    })}
-                </select>
-            </div>
-            <button
-                onClick={handleSubmit}
-                className="btn btn-primary mt-4"
-                disabled={userData.length === 0}
-            >
-                Create Users
-            </button>
         </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"
+        >
+          return <option value="0">Empty</option>;
+          {tps.map((tp: Tp) => {
+            return <option value={tp.id}>{tp.name}</option>;
+          })}
+        </select>
+      </div>
+      <button
+        onClick={handleSubmit}
+        className="btn btn-primary mt-4"
+        disabled={userData.length === 0}
+      >
+        Create Users
+      </button>
+    </div>
+  );
 }
 
 export default BulkUsers;

src/pages/admin/Users.tsx

@@ -1,5 +1,6 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
+import { User } from "../../type/UserType";
 
 function Users() {
   const [users, setUsers] = useState([]);
@@ -11,13 +12,12 @@ function Users() {
     });
   }, [reload]);
 
-  const handleEditUser = (userId) => {
+  const handleEditUser = (userId: number) => {
     alert(`Edit user with ID: ${userId}`);
   };
 
   const deleteJDMIUsers = () => {
-    axios.delete("/api/users").then((res) => {
+    axios.delete("/api/users").then(() => {
-      console.log(res.data);
       setReload(reload + 1);
     });
   };
@@ -48,7 +48,7 @@ function Users() {
               </tr>
             </thead>
             <tbody>
-              {users.map((user, index) => (
+              {users.map((user: User, index: number) => (
                 <tr key={user.id} className="hover:bg-gray-100">
                   <td className="p-4">{index + 1}</td>
                   <td className="p-4">{user.name}</td>

src/type/BulkUserCreattionType.ts

@@ -0,0 +1,9 @@
+export interface BulkUserCreattionType {
+    name: string;
+    email: string;
+    password: string;
+    instance_name: string;
+    instance_ssh: string;
+    instance_port: string;
+    instance_pwd: string;
+}

src/type/CSVParseType.ts

@@ -0,0 +1,9 @@
+export interface CSVParseType {
+    name: string;
+    email: string;
+    password: string;
+    instance_name: string;
+    instance_ssh: string;
+    instance_port: string;
+    instance_pwd: string;
+}

src/type/Dashboard.ts

@@ -0,0 +1,7 @@
+import { Instance } from "./InstanceType";
+import { Tp } from "./TpType";
+
+export interface DashboardType {
+    tps: Tp[];
+    instances: Instance[];
+}

src/type/TpType.ts

@@ -5,4 +5,7 @@ export interface Tp {
     pdfLink: string;
     respo: string;
     date: string;
+    ssh: string;
+    port: string;
+    pwd: string;
 }

src/type/UserType.ts

@@ -4,4 +4,6 @@ export interface User {
     id: number;
     name: string;
     instances: Instance[];
+    email: string;
+    roles: string;
 }