From 57ef00d074388adc04eff96f2850d3a0f7855496 Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Sun, 26 Jan 2025 10:47:05 +0700
Subject: [PATCH 01/14] Error

---
 client/App.jsx                          |  133 +++
 client/components/Board.jsx             |  107 ++
 client/components/BoardProject.jsx      |  109 ++
 client/components/Calendar.jsx          |  114 +++
 client/components/ConfirmationPopup.jsx |   33 +
 client/components/Interface.jsx         |   52 +
 client/components/List.jsx              |  102 ++
 client/components/Member.jsx            |   40 +
 client/components/ProjectPopup.jsx      |   68 ++
 client/components/Settings.jsx          |   35 +
 client/components/Sidebar.jsx           |   50 +
 client/components/Task.jsx              |  131 +++
 client/components/TaskLabel.jsx         |   56 +
 client/components/board.js              |  116 ---
 client/components/boardproject.js       |  144 ---
 client/components/calendar.js           |  115 ---
 client/components/confirmationPopup.js  |   37 -
 client/components/interface.js          |  221 ----
 client/components/list.js               |  212 ----
 client/components/member.js             |   97 --
 client/components/projectPopup.js       |  129 ---
 client/components/settings.js           |   16 -
 client/components/task.js               |  178 ----
 client/components/taskLabel.js          |   80 --
 client/{style.css => index.css}         |    2 +-
 client/index.html                       |   50 +-
 client/index.jsx                        |   12 +
 client/main.js                          |   92 --
 client/package-lock.json                | 1254 ++++++++++++++++++-----
 client/package.json                     |    9 +-
 client/reportWebVitals.jsx              |   16 +
 client/styles/board.css                 |  147 +--
 client/vite.config.js                   |   24 +-
 package-lock.json                       |  156 ++-
 package.json                            |    6 +-
 server/package-lock.json                |  123 ++-
 server/package.json                     |    4 +-
 server/server.js                        |   83 +-
 38 files changed, 2554 insertions(+), 1799 deletions(-)
 create mode 100644 client/App.jsx
 create mode 100644 client/components/Board.jsx
 create mode 100644 client/components/BoardProject.jsx
 create mode 100644 client/components/Calendar.jsx
 create mode 100644 client/components/ConfirmationPopup.jsx
 create mode 100644 client/components/Interface.jsx
 create mode 100644 client/components/List.jsx
 create mode 100644 client/components/Member.jsx
 create mode 100644 client/components/ProjectPopup.jsx
 create mode 100644 client/components/Settings.jsx
 create mode 100644 client/components/Sidebar.jsx
 create mode 100644 client/components/Task.jsx
 create mode 100644 client/components/TaskLabel.jsx
 delete mode 100644 client/components/board.js
 delete mode 100644 client/components/boardproject.js
 delete mode 100644 client/components/calendar.js
 delete mode 100644 client/components/confirmationPopup.js
 delete mode 100644 client/components/interface.js
 delete mode 100644 client/components/list.js
 delete mode 100644 client/components/member.js
 delete mode 100644 client/components/projectPopup.js
 delete mode 100644 client/components/settings.js
 delete mode 100644 client/components/task.js
 delete mode 100644 client/components/taskLabel.js
 rename client/{style.css => index.css} (99%)
 create mode 100644 client/index.jsx
 delete mode 100644 client/main.js
 create mode 100644 client/reportWebVitals.jsx

diff --git a/client/App.jsx b/client/App.jsx
new file mode 100644
index 0000000..ae5eaa7
--- /dev/null
+++ b/client/App.jsx
@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react';
+import { DiscordSDK } from '@discord/embedded-app-sdk';
+import './styles/sidebar.css';
+import './index.css';
+import Interface from './components/Interface.jsx';
+import Calendar from './components/Calendar.jsx';
+import Task from './components/Task.jsx';
+import Board from './components/Board.jsx';
+import SettingsPopup from './components/Settings.jsx';
+import ProjectPopup from './components/ProjectPopup.jsx';
+import ConfirmationPopup from './components/ConfirmationPopup.jsx';
+import TaskLabel from './components/TaskLabel.jsx';
+import BoardProject from './components/BoardProject.jsx';
+import List from './components/List.jsx';
+import Member from './components/Member.jsx';
+
+const App = () => {
+  const [discordSdk, setDiscordSdk] = useState(null);
+  const [user, setUser] = useState(null);
+  const [isConfirmationVisible, setIsConfirmationVisible] = useState(false);
+  const [labelPopupVisible, setLabelPopupVisible] = useState(false);
+
+  useEffect(() => {
+    const setupDiscordSdk = async () => {
+      try {
+        const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
+        const discordClientSecret = import.meta.env.VITE_DISCORD_CLIENT_SECRET;
+
+        if (!discordClientId || !discordClientSecret) {
+          throw new Error('Discord Client ID or Client Secret is missing');
+        }
+
+        console.log('Setting up Discord SDK...');
+
+        // Initialize Discord SDK
+        const sdk = new DiscordSDK(discordClientId);
+        await sdk.ready();
+
+        console.log('Discord SDK Ready...');
+
+        // Authorize with Discord OAuth
+        const { code } = await sdk.commands.authorize({
+          client_id: discordClientId,
+          response_type: 'code',
+          state: '',
+          prompt: 'none',
+          scope: ['identify', 'guilds', 'applications.commands'],
+        });
+
+        console.log('Authorization code received...');
+
+        // Exchange authorization code for access token
+        const response = await fetch('/api/token', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch access token');
+        }
+
+        const { access_token } = await response.json();
+        console.log('Access Token received...');
+
+        // Authenticate with Discord SDK using the access token
+        await sdk.commands.authenticate({ access_token });
+
+        console.log('Authentication successful...');
+
+        // Fetch the user profile
+        const userProfile = await fetchUserProfile(access_token);
+        console.log('User Profile:', userProfile);
+
+        setUser({
+          username: userProfile.username,
+          avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
+        });
+
+        setDiscordSdk(sdk);
+      } catch (error) {
+        console.error('Error setting up Discord SDK:', error);
+      }
+    };
+
+    const fetchUserProfile = async (token) => {
+      const response = await fetch('https://discord.com/api/users/@me', {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch user profile');
+      }
+      return await response.json();
+    };
+
+    setupDiscordSdk();
+  }, []);
+
+  const handleConfirmation = () => {
+    setIsConfirmationVisible(false);
+  };
+
+  if (!user) {
+    console.log('User data is still loading...');
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div id="app">
+      <Interface user={user} />
+      <Calendar />
+      <Task />
+      <Board />
+      <SettingsPopup />
+      <ProjectPopup />
+      <ConfirmationPopup
+        isVisible={isConfirmationVisible}
+        onConfirm={handleConfirmation}
+        onCancel={() => setIsConfirmationVisible(false)}
+      />
+      <TaskLabel
+        isVisible={labelPopupVisible}
+        onLabelSelect={(label) => console.log('Selected label:', label)}
+        onClose={() => setLabelPopupVisible(false)}
+      />
+      <BoardProject />
+      <List />
+      <Member members={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />
+    </div>
+  );
+};
+
+export default App;
diff --git a/client/components/Board.jsx b/client/components/Board.jsx
new file mode 100644
index 0000000..26799b4
--- /dev/null
+++ b/client/components/Board.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import ConfirmationPopup from "./ConfirmationPopup.jsx";
+import '/styles/board.css';
+
+const Board = () => {
+  const [boards, setBoards] = useState([]);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [confirmationVisible, setConfirmationVisible] = useState(false);
+  const [newBoard, setNewBoard] = useState({ name: "", description: "" });
+  const [activeBoard, setActiveBoard] = useState(null);
+
+  const handleCreateBoard = () => {
+    const trimmedName = newBoard.name.trim();
+    if (trimmedName === "") {
+      alert("Board name cannot be empty.");
+      return;
+    }
+
+    const newBoardData = {
+      id: crypto.randomUUID(), // Use UUID for unique IDs
+      name: trimmedName,
+      description: newBoard.description.trim(),
+    };
+
+    setBoards([...boards, newBoardData]);
+    setPopupVisible(false);
+    setNewBoard({ name: "", description: "" });
+  };
+
+  const handleSelectBoard = (board) => {
+    setActiveBoard(board);
+  };
+
+  const handleDeleteBoard = () => {
+    if (activeBoard) {
+      setBoards(boards.filter((board) => board.id !== activeBoard.id));
+      setActiveBoard(null);
+    }
+    setConfirmationVisible(false);
+  };
+
+  return (
+    <div className="board-container">
+      {/* Header Section */}
+      <div className="board-header">
+        <button onClick={() => setPopupVisible(true)}>+ Create New Board</button>
+      </div>
+
+      {/* Board List Section */}
+      <div className="board-list">
+        {boards.map((board) => (
+          <button
+            key={board.id}
+            className={`board-button ${activeBoard?.id === board.id ? "active" : ""}`}
+            onClick={() => handleSelectBoard(board)}
+          >
+            {board.name}
+          </button>
+        ))}
+      </div>
+
+      {/* Popup for Creating Board */}
+      {popupVisible && (
+        <div className="popup-overlay">
+          <div className="popup-content">
+            <h3>Create New Board</h3>
+            <input
+              type="text"
+              placeholder="Board Name"
+              value={newBoard.name}
+              onChange={(e) => setNewBoard({ ...newBoard, name: e.target.value })}
+            />
+            <textarea
+              placeholder="Board Description (Optional)"
+              value={newBoard.description}
+              onChange={(e) => setNewBoard({ ...newBoard, description: e.target.value })}
+            />
+            <div className="popup-buttons">
+              <button onClick={handleCreateBoard}>Create</button>
+              <button onClick={() => setPopupVisible(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Confirmation Popup for Deleting Board */}
+      {confirmationVisible && (
+        <ConfirmationPopup
+          message="Are you sure you want to delete this board?"
+          onConfirm={handleDeleteBoard}
+          onCancel={() => setConfirmationVisible(false)}
+        />
+      )}
+
+      {/* Active Board Details Section */}
+      {activeBoard && (
+        <div className="board-details">
+          <h2>{activeBoard.name}</h2>
+          <p>{activeBoard.description || "No description available."}</p>
+          <button onClick={() => setConfirmationVisible(true)}>Delete Board</button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Board;
diff --git a/client/components/BoardProject.jsx b/client/components/BoardProject.jsx
new file mode 100644
index 0000000..be45f0a
--- /dev/null
+++ b/client/components/BoardProject.jsx
@@ -0,0 +1,109 @@
+// BoardProject.js (React Component)
+import React, { useState } from 'react';
+import '/styles/project.css';
+
+const BoardProject = () => {
+  const [projects, setProjects] = useState([]);
+  const [activeProject, setActiveProject] = useState(null);
+  const [settingsVisible, setSettingsVisible] = useState(false);
+  const [newProject, setNewProject] = useState({ name: '', description: '' });
+
+  const handleCreateProject = () => {
+    const trimmedName = newProject.name.trim();
+    if (trimmedName === '') {
+      alert('Project name cannot be empty.');
+      return;
+    }
+
+    const newProjectData = {
+      id: crypto.randomUUID(),
+      name: trimmedName,
+      description: newProject.description.trim(),
+    };
+
+    setProjects([...projects, newProjectData]);
+    setNewProject({ name: '', description: '' });
+  };
+
+  const handleSelectProject = (project) => {
+    setActiveProject(project);
+  };
+
+  const handleDeleteProject = (projectId) => {
+    if (window.confirm('Are you sure you want to delete this project?')) {
+      setProjects(projects.filter((project) => project.id !== projectId));
+      if (activeProject?.id === projectId) {
+        setActiveProject(null);
+      }
+    }
+  };
+
+  return (
+    <div className="project-container">
+      {/* Project Header */}
+      <div className="project-header">
+        <button onClick={() => setSettingsVisible(!settingsVisible)}>
+          Project Settings
+        </button>
+      </div>
+
+      {/* Project List */}
+      <div className="project-list">
+        {projects.map((project) => (
+          <button
+            key={project.id}
+            className={`project-button ${
+              activeProject?.id === project.id ? 'active' : ''
+            }`}
+            onClick={() => handleSelectProject(project)}
+          >
+            {project.name}
+          </button>
+        ))}
+      </div>
+
+      {/* Active Project Details */}
+      {activeProject && (
+        <div className="project-details">
+          <h2>{activeProject.name}</h2>
+          <p>{activeProject.description || 'No description available.'}</p>
+          <button
+            onClick={() => handleDeleteProject(activeProject.id)}
+          >
+            Delete Project
+          </button>
+        </div>
+      )}
+
+      {/* Create Project Popup */}
+      {settingsVisible && (
+        <div className="popup-overlay">
+          <div className="popup-content">
+            <h3>Create New Project</h3>
+            <input
+              type="text"
+              placeholder="Project Name"
+              value={newProject.name}
+              onChange={(e) =>
+                setNewProject({ ...newProject, name: e.target.value })
+              }
+            />
+            <textarea
+              placeholder="Project Description (Optional)"
+              value={newProject.description}
+              onChange={(e) =>
+                setNewProject({ ...newProject, description: e.target.value })
+              }
+            />
+            <div className="popup-buttons">
+              <button onClick={handleCreateProject}>Create</button>
+              <button onClick={() => setSettingsVisible(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BoardProject;
diff --git a/client/components/Calendar.jsx b/client/components/Calendar.jsx
new file mode 100644
index 0000000..0c9e454
--- /dev/null
+++ b/client/components/Calendar.jsx
@@ -0,0 +1,114 @@
+// Calendar.js (React Component)
+import React, { useState } from 'react';
+import '/styles/calendar.css';
+
+
+const Calendar = () => {
+  const [displayedMonth, setDisplayedMonth] = useState(new Date().getMonth());
+  const [displayedYear, setDisplayedYear] = useState(new Date().getFullYear());
+  const [startDate, setStartDate] = useState(null);
+  const [dueDate, setDueDate] = useState(null);
+  const [selectedButton, setSelectedButton] = useState(null);
+
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  const renderCalendarDays = () => {
+    const firstDay = new Date(displayedYear, displayedMonth, 1).getDay();
+    const daysInMonth = new Date(displayedYear, displayedMonth + 1, 0).getDate();
+    const days = [];
+
+    for (let i = 0; i < firstDay; i++) {
+      days.push(<div key={`empty-${i}`} className="day empty" />);
+    }
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const currentDate = new Date(displayedYear, displayedMonth, day);
+      const isSelected =
+        (startDate && currentDate.getTime() === startDate.getTime()) ||
+        (dueDate && currentDate.getTime() === dueDate.getTime());
+
+      days.push(
+        <div
+          key={day}
+          className={`day ${isSelected ? 'selected' : ''}`}
+          onClick={() => handleDateClick(currentDate)}
+        >
+          {day}
+        </div>
+      );
+    }
+
+    return days;
+  };
+
+  const handleDateClick = (date) => {
+    if (selectedButton === 'start') {
+      if (dueDate && date > dueDate) {
+        alert('Start date cannot be after the due date.');
+        return;
+      }
+      setStartDate(date);
+    } else if (selectedButton === 'due') {
+      if (startDate && date < startDate) {
+        alert('Due date cannot be before the start date.');
+        return;
+      }
+      setDueDate(date);
+    }
+  };
+
+  const handleMonthChange = (direction) => {
+    if (direction === 'prev') {
+      if (displayedMonth === 0) {
+        setDisplayedMonth(11);
+        setDisplayedYear(displayedYear - 1);
+      } else {
+        setDisplayedMonth(displayedMonth - 1);
+      }
+    } else {
+      if (displayedMonth === 11) {
+        setDisplayedMonth(0);
+        setDisplayedYear(displayedYear + 1);
+      } else {
+        setDisplayedMonth(displayedMonth + 1);
+      }
+    }
+  };
+
+  return (
+    <div className="calendar-container">
+      <div className="calendar-header">
+        <button onClick={() => handleMonthChange('prev')}>←</button>
+        <span>{`${monthNames[displayedMonth]} ${displayedYear}`}</span>
+        <button onClick={() => handleMonthChange('next')}>→</button>
+      </div>
+      <div className="calendar-grid">
+        {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
+          <div key={day} className="weekday">
+            {day}
+          </div>
+        ))}
+      </div>
+      <div className="calendar-days">{renderCalendarDays()}</div>
+      <div className="date-controls">
+        <button
+          className="date-button"
+          onClick={() => setSelectedButton('start')}
+        >
+          Start Date: {startDate ? startDate.toLocaleDateString() : 'Not Set'}
+        </button>
+        <button
+          className="date-button"
+          onClick={() => setSelectedButton('due')}
+        >
+          Due Date: {dueDate ? dueDate.toLocaleDateString() : 'Not Set'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;
diff --git a/client/components/ConfirmationPopup.jsx b/client/components/ConfirmationPopup.jsx
new file mode 100644
index 0000000..24620a9
--- /dev/null
+++ b/client/components/ConfirmationPopup.jsx
@@ -0,0 +1,33 @@
+// ConfirmationPopup.js (React Component)
+import React from 'react';
+import '/styles/confirmation.css';
+
+
+const ConfirmationPopup = ({
+  message = "Are you sure?",
+  subMessage = "This action cannot be undone.",
+  onConfirm,
+  onCancel,
+  isVisible,
+}) => {
+  if (!isVisible) return null;
+
+  return (
+    <div className="confirmation-popup-overlay">
+      <div className="confirmation-popup">
+        <h3>{message}</h3>
+        <p>{subMessage}</p>
+        <div className="confirmation-buttons">
+          <button className="cancel-button" onClick={onCancel} aria-label="Cancel action">
+            Cancel
+          </button>
+          <button className="confirm-button" onClick={onConfirm} aria-label="Confirm action">
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationPopup;
diff --git a/client/components/Interface.jsx b/client/components/Interface.jsx
new file mode 100644
index 0000000..5a98530
--- /dev/null
+++ b/client/components/Interface.jsx
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import Board from './Board';
+import Calendar from './Calendar';
+import Task from './Task';
+import SettingsPopup from './Settings';
+import ProjectPopup from './ProjectPopup';
+import ConfirmationPopup from './ConfirmationPopup';
+import TaskLabel from './TaskLabel';
+import List from './List';
+import Member from './Member';
+import Sidebar from './Sidebar'; // Assuming Sidebar.jsx exists
+
+const Interface = ({ user }) => {
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [showTaskPopup, setShowTaskPopup] = useState(false);
+  const [showSettingsPopup, setShowSettingsPopup] = useState(false);
+  const [showProjectPopup, setShowProjectPopup] = useState(false);
+  const [showConfirmationPopup, setShowConfirmationPopup] = useState(false);
+  const [showLabelPopup, setShowLabelPopup] = useState(false);
+
+  useEffect(() => {
+    // Example of initializing data or any additional setup
+    console.log('Interface initialized with user:', user);
+  }, [user]);
+
+  return (
+    <div id="app" className="interface">
+      {/* Sidebar */}
+      <Sidebar user={user} />
+
+      {/* Main Content */}
+      <main className="main-content">
+        {/* Board */}
+        <Board />
+
+        {/* Conditional Rendering for Popup Components */}
+        {showCalendar && <Calendar />}
+        {showTaskPopup && <Task />}
+        {showSettingsPopup && <SettingsPopup />}
+        {showProjectPopup && <ProjectPopup />}
+        {showConfirmationPopup && <ConfirmationPopup />}
+        {showLabelPopup && <TaskLabel />}
+
+        {/* Task List and Member Components */}
+        <List />
+        <Member members={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />
+      </main>
+    </div>
+  );
+};
+
+export default Interface;
diff --git a/client/components/List.jsx b/client/components/List.jsx
new file mode 100644
index 0000000..00fa56b
--- /dev/null
+++ b/client/components/List.jsx
@@ -0,0 +1,102 @@
+// List.js (React Component)
+import React, { useState } from 'react';
+import '/styles/list.css';
+
+
+const List = () => {
+  const [lists, setLists] = useState([]);
+  const [newListName, setNewListName] = useState('');
+  const [isAddingList, setIsAddingList] = useState(false);
+
+  const handleAddList = () => {
+    if (newListName.trim() === '') {
+      alert('List name cannot be empty.');
+      return;
+    }
+
+    const newList = {
+      id: Date.now(),
+      name: newListName,
+      tasks: [],
+    };
+
+    setLists([...lists, newList]);
+    setNewListName('');
+    setIsAddingList(false);
+  };
+
+  const handleDeleteList = (id) => {
+    setLists(lists.filter((list) => list.id !== id));
+  };
+
+  const handleAddTask = (listId, taskName) => {
+    if (taskName.trim() === '') {
+      alert('Task name cannot be empty.');
+      return;
+    }
+
+    setLists(
+      lists.map((list) =>
+        list.id === listId
+          ? {
+              ...list,
+              tasks: [...list.tasks, { id: Date.now(), name: taskName }],
+            }
+          : list
+      )
+    );
+  };
+
+  return (
+    <div className="list-container">
+      {lists.map((list) => (
+        <div className="list" key={list.id}>
+          <div className="list-header">
+            <h3>{list.name}</h3>
+            <button onClick={() => handleDeleteList(list.id)}>Delete List</button>
+          </div>
+
+          <div className="tasks">
+            {list.tasks.map((task) => (
+              <div key={task.id} className="task">
+                {task.name}
+              </div>
+            ))}
+          </div>
+
+          <div className="add-task">
+            <input
+              type="text"
+              placeholder="New Task Name"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleAddTask(list.id, e.target.value);
+                  e.target.value = '';
+                }
+              }}
+            />
+          </div>
+        </div>
+      ))}
+
+      {isAddingList ? (
+        <div className="add-list-form">
+          <input
+            type="text"
+            value={newListName}
+            onChange={(e) => setNewListName(e.target.value)}
+            placeholder="Enter list name"
+          />
+          <button onClick={handleAddList}>Add List</button>
+          <button onClick={() => setIsAddingList(false)}>Cancel</button>
+        </div>
+      ) : (
+        <button className="add-list-button" onClick={() => setIsAddingList(true)}>
+          + Add List
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default List;
diff --git a/client/components/Member.jsx b/client/components/Member.jsx
new file mode 100644
index 0000000..86c4cee
--- /dev/null
+++ b/client/components/Member.jsx
@@ -0,0 +1,40 @@
+// Member.js (React Component)
+import React from 'react';
+import '/styles/member.css';
+
+const Member = ({ members, onMemberSelect, isVisible, onClose }) => {
+  if (!isVisible) return null;
+
+  const handleMemberClick = (member) => {
+    onMemberSelect(member);
+    onClose();
+  };
+
+  return (
+    <div className="member-popup-overlay">
+      <div className="member-popup">
+        <div className="member-options">
+          {members.map((member) => (
+            <div
+              key={member.id}
+              className="member-option"
+              onClick={() => handleMemberClick(member)}
+            >
+              <img
+                src={member.profilePicture || `https://ui-avatars.com/api/?name=${encodeURIComponent(member.name)}&background=random&color=fff`}
+                alt={member.name}
+                className="member-profile-picture"
+              />
+              <span className="member-username">{member.name}</span>
+            </div>
+          ))}
+        </div>
+        <button className="done-button" onClick={onClose} aria-label="Close member selection">
+          Done
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Member;
diff --git a/client/components/ProjectPopup.jsx b/client/components/ProjectPopup.jsx
new file mode 100644
index 0000000..04facfb
--- /dev/null
+++ b/client/components/ProjectPopup.jsx
@@ -0,0 +1,68 @@
+// ProjectPopup.js (React Component)
+import React, { useState } from 'react';
+import '/styles/popup.css';
+
+
+const ProjectPopup = ({
+  isVisible,
+  onClose,
+  onCreateProject,
+}) => {
+  const [projectName, setProjectName] = useState("");
+  const [projectDescription, setProjectDescription] = useState("");
+
+  const handleCreateProject = (event) => {
+    event.preventDefault();
+    if (projectName.trim()) {
+      onCreateProject({ name: projectName, description: projectDescription });
+      setProjectName("");
+      setProjectDescription("");
+      onClose();
+    } else {
+      alert("Please enter a project name.");
+    }
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="project-popup-overlay">
+      <div className="project-popup">
+        <div className="popup-header">
+          <h3>Create New Project</h3>
+          <button className="close-popup-button" onClick={onClose} aria-label="Close project creation popup">
+            ✖
+          </button>
+        </div>
+        <form onSubmit={handleCreateProject} className="popup-form">
+          <label htmlFor="project-name">Project Name</label>
+          <input
+            id="project-name"
+            type="text"
+            placeholder="Enter project name"
+            value={projectName}
+            onChange={(e) => setProjectName(e.target.value)}
+            required
+          />
+          <label htmlFor="project-description">Project Description (Optional)</label>
+          <textarea
+            id="project-description"
+            placeholder="Enter project description"
+            value={projectDescription}
+            onChange={(e) => setProjectDescription(e.target.value)}
+          />
+          <div className="popup-buttons">
+            <button type="button" className="cancel-button" onClick={onClose} aria-label="Cancel project creation">
+              Cancel
+            </button>
+            <button type="submit" className="create-button" aria-label="Create project">
+              Create Project
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectPopup;
diff --git a/client/components/Settings.jsx b/client/components/Settings.jsx
new file mode 100644
index 0000000..63f0671
--- /dev/null
+++ b/client/components/Settings.jsx
@@ -0,0 +1,35 @@
+// Settings.js (React Component)
+import React, { useState } from 'react';
+import '/styles/popup.css';
+import '/styles/settings.css';
+
+const SettingsPopup = ({ isVisible, onClose, onEditBoard, onDeleteBoard }) => {
+  const handleEditBoard = () => {
+    onEditBoard();
+    onClose();
+  };
+
+  const handleDeleteBoard = () => {
+    if (window.confirm("Are you sure you want to delete this board? This action cannot be undone.")) {
+      onDeleteBoard();
+      onClose();
+    }
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="settings-popup-overlay" onClick={onClose}>
+      <div className="settings-popup" onClick={(e) => e.stopPropagation()}>
+        <p className="settings-option" onClick={handleEditBoard}>
+          Edit Board
+        </p>
+        <p className="settings-option delete" onClick={handleDeleteBoard}>
+          Delete Board
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPopup;
diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx
new file mode 100644
index 0000000..47acb18
--- /dev/null
+++ b/client/components/Sidebar.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';  // Optional if using React Router for navigation
+import '/styles/sidebar.css';
+
+const Sidebar = ({ user }) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true); // Track sidebar visibility
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  return (
+    <div className={`sidebar ${isSidebarOpen ? 'open' : 'closed'}`}>
+      {/* Sidebar Toggle Button */}
+      <button className="sidebar-toggle" onClick={toggleSidebar}>
+        {isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'}
+      </button>
+
+      {/* Sidebar Content */}
+      <div className="sidebar-content">
+        {/* User Profile */}
+        <div className="user-profile">
+          <img
+            src={user.avatarUrl}
+            alt={user.username}
+            className="user-avatar"
+          />
+          <h3 className="user-name">{user.username}</h3>
+        </div>
+
+        {/* Navigation Links */}
+        <nav className="sidebar-nav">
+          <ul>
+            <li><Link to="/dashboard">Dashboard</Link></li>
+            <li><Link to="/projects">Projects</Link></li>
+            <li><Link to="/tasks">Tasks</Link></li>
+            <li><Link to="/settings">Settings</Link></li>
+          </ul>
+        </nav>
+      </div>
+
+      {/* Optional: Footer or additional content */}
+      <div className="sidebar-footer">
+        <p>Planify App</p>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;
diff --git a/client/components/Task.jsx b/client/components/Task.jsx
new file mode 100644
index 0000000..4b1909d
--- /dev/null
+++ b/client/components/Task.jsx
@@ -0,0 +1,131 @@
+// Task.js (React Component)
+import React, { useState } from 'react';
+import TaskLabel from './TaskLabel';
+import Member from './Member';
+import '/styles/popup.css';
+import '/styles/task.css';
+
+const TaskPopup = ({
+  isVisible,
+  onClose,
+  onSave,
+  members,
+}) => {
+  const [taskName, setTaskName] = useState('');
+  const [taskDetails, setTaskDetails] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [dueDate, setDueDate] = useState('');
+  const [assignedMember, setAssignedMember] = useState(null);
+  const [selectedLabel, setSelectedLabel] = useState(null);
+
+  const handleSave = () => {
+    if (!taskName) {
+      alert('Task name is required.');
+      return;
+    }
+    const taskData = {
+      name: taskName,
+      details: taskDetails,
+      startDate,
+      dueDate,
+      assignedMember,
+      label: selectedLabel,
+    };
+    onSave(taskData);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setTaskName('');
+    setTaskDetails('');
+    setStartDate('');
+    setDueDate('');
+    setAssignedMember(null);
+    setSelectedLabel(null);
+    onClose();
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="task-popup-overlay" onClick={handleClose}>
+      <div className="task-popup" onClick={(e) => e.stopPropagation()}>
+        <div className="popup-header">
+          <h3>Create Task</h3>
+          <button className="close-button" onClick={handleClose}>
+            ✖
+          </button>
+        </div>
+
+        <div className="popup-body">
+          <div className="form-group">
+            <label>Task Name</label>
+            <input
+              type="text"
+              value={taskName}
+              onChange={(e) => setTaskName(e.target.value)}
+              placeholder="Enter task name"
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Task Details</label>
+            <textarea
+              value={taskDetails}
+              onChange={(e) => setTaskDetails(e.target.value)}
+              placeholder="Enter task details"
+            />
+          </div>
+
+          <div className="form-group date-inputs">
+            <div>
+              <label>Start Date</label>
+              <input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <label>Due Date</label>
+              <input
+                type="date"
+                value={dueDate}
+                onChange={(e) => setDueDate(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="form-group">
+            <label>Assigned Member</label>
+            <Member
+              members={members}
+              selectedMember={assignedMember}
+              onSelectMember={setAssignedMember}
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Task Label</label>
+            <TaskLabel
+              selectedLabel={selectedLabel}
+              onSelectLabel={setSelectedLabel}
+            />
+          </div>
+        </div>
+
+        <div className="popup-footer">
+          <button className="cancel-button" onClick={handleClose}>
+            Cancel
+          </button>
+          <button className="save-button" onClick={handleSave}>
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskPopup;
diff --git a/client/components/TaskLabel.jsx b/client/components/TaskLabel.jsx
new file mode 100644
index 0000000..ca72d81
--- /dev/null
+++ b/client/components/TaskLabel.jsx
@@ -0,0 +1,56 @@
+// TaskLabel.js (React Component)
+import React, { useState } from 'react';
+import '/styles/label.css';
+
+
+const TaskLabel = ({ onLabelSelect, isVisible, onClose }) => {
+  const labels = [
+    { color: '#A259FF', name: 'Purple' },
+    { color: '#FFD93D', name: 'Yellow' },
+    { color: '#53D1F0', name: 'Blue' },
+    { color: '#FF773D', name: 'Orange' },
+    { color: '#3D8BFF', name: 'Light Blue' },
+    { color: '#FF3D71', name: 'Red' },
+    { color: '#3DFF77', name: 'Green' },
+  ];
+
+  const [selectedLabel, setSelectedLabel] = useState(null);
+
+  if (!isVisible) return null;
+
+  const handleLabelClick = (label) => {
+    setSelectedLabel(label);
+  };
+
+  const handleDone = () => {
+    if (selectedLabel) {
+      onLabelSelect(selectedLabel);
+    }
+    onClose();
+  };
+
+  return (
+    <div className="label-popup-overlay">
+      <div className="label-popup">
+        <div className="label-options">
+          {labels.map((label) => (
+            <button
+              key={label.color}
+              className={`label-option ${selectedLabel === label ? 'selected' : ''}`}
+              style={{ backgroundColor: label.color }}
+              onClick={() => handleLabelClick(label)}
+              aria-label={`Select ${label.name} label`}
+            >
+              {selectedLabel === label && '✓'}
+            </button>
+          ))}
+        </div>
+        <button className="done-button" onClick={handleDone} aria-label="Confirm label selection">
+          Done
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TaskLabel;
diff --git a/client/components/board.js b/client/components/board.js
deleted file mode 100644
index 8e15a7b..0000000
--- a/client/components/board.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { ConfirmationPopup } from './confirmationPopup.js';
-
-export function Board() {
-    // DOM References
-    const createBoardButton = document.getElementById("create-board-button");
-    const popupOverlay = document.getElementById("popup-overlay");
-    const closePopupButton = document.getElementById("close-popup-button");
-    const cancelButton = document.getElementById("cancel-button");
-    const createBoardForm = document.getElementById("create-board-form");
-    const createBoardButtonForm = document.getElementById("create-board-button-form");
-    const boardListContainer = document.getElementById("board-list-container");
-    const boardTopic = document.getElementById("board-topic");
-    const boardDescription = document.getElementById("board-topic-description");
-    const { showConfirmationPopup, hideConfirmationPopup } = ConfirmationPopup();
-
-    // Function to reset and hide the popup overlay
-    function resetPopupOverlay() {
-        popupOverlay.classList.add("hidden");
-        createBoardForm.reset(); // Reset all input fields in the form
-    }
-
-    // Function to handle the confirmation logic
-    function handleConfirmation(action) {
-        if (action === "discard") {
-            resetPopupOverlay(); // Close and reset the overlay
-        }
-        hideConfirmationPopup();
-    }
-
-    // Attach event listeners to confirmation popup buttons
-    document.getElementById("cancel-discard-button").addEventListener("click", () => {
-        hideConfirmationPopup();
-    });
-
-    document.getElementById("discard-button").addEventListener("click", () => {
-        handleConfirmation("discard");
-    });
-
-    // Function to update the board topic and description
-    function updateBoardDetails(name, description) {
-        boardTopic.textContent = name || "Untitled Board"; // Fallback for empty name
-        boardDescription.textContent = description || "No description provided."; // Fallback for empty description
-    }
-
-    // Function to create a new board
-    function createBoard(event) {
-        event.preventDefault(); // Prevent form submission reload
-
-        // Get inputs
-        const boardNameInput = document.getElementById("board-name");
-        const boardDescriptionInput = document.getElementById("input-board-description");
-        const boardName = boardNameInput.value.trim();
-        const boardDescription = boardDescriptionInput.value.trim();
-
-        // Validate board name
-        if (boardName) {
-            // Create a new board button
-            const newBoardButton = document.createElement("button");
-            newBoardButton.className = "board-button";
-            newBoardButton.textContent = boardName;
-
-            // Store board description as a data attribute (hidden)
-            newBoardButton.dataset.description = boardDescription;
-
-            // Add click event to toggle active class and update board details
-            newBoardButton.addEventListener("click", () => {
-                // Remove active class from all buttons
-                document.querySelectorAll(".board-button").forEach((btn) => btn.classList.remove("active"));
-
-                // Add active class to the clicked button
-                newBoardButton.classList.add("active");
-
-                // Update the board-topic and board-topic-description
-                updateBoardDetails(boardName, boardDescription);
-            });
-
-            // Append the new board button to the board list container
-            boardListContainer.appendChild(newBoardButton);
-
-            // Reset and close the popup
-            resetPopupOverlay();
-        } else {
-            alert("Please enter a board name.");
-        }
-    }
-
-    // Attach event listener to form submission
-    createBoardForm.addEventListener("submit", createBoard);
-
-    // Explicitly handle clicks on the "Create Board" button
-    createBoardButtonForm.addEventListener("click", createBoard);
-
-    // Show popup when the create board button is clicked
-    createBoardButton.addEventListener("click", () => {
-        popupOverlay.classList.remove("hidden");
-    });
-
-    // Show confirmation popup on close button click
-    closePopupButton.addEventListener("click", (event) => {
-        event.preventDefault(); // Prevent page reload
-        showConfirmationPopup();
-    });
-
-    // Show confirmation popup on cancel button click
-    cancelButton.addEventListener("click", (event) => {
-        event.preventDefault(); // Prevent page reload
-        showConfirmationPopup();
-    });
-
-    // Close popup overlay when clicking outside the popup content
-    popupOverlay.addEventListener("click", (e) => {
-        if (e.target === popupOverlay) {
-            showConfirmationPopup();
-        }
-    });
-}
diff --git a/client/components/boardproject.js b/client/components/boardproject.js
deleted file mode 100644
index 74128a6..0000000
--- a/client/components/boardproject.js
+++ /dev/null
@@ -1,144 +0,0 @@
-export function BoardProject() {
-  const projectBox = document.getElementById("projectbox");
-  const projectListContainer = document.getElementById("project-list-container");
-  const boardSection = document.getElementById("board-section");
-  const projectSection = document.getElementById("project-section");
-  const projectNameDisplay = document.getElementById("projectname");
-  const projectDescriptionDisplay = document.getElementById("projectdescription");
-
-  // Default text for project name and description
-  const defaultProjectName = "No Project Selected";
-  const defaultProjectDescription = "No description available";
-
-  // Create and add the triangle symbol
-  const triangleSymbol = document.createElement("div");
-  triangleSymbol.id = "triangle-symbol";
-  triangleSymbol.classList.add("triangle-right"); // Default direction
-  projectBox.prepend(triangleSymbol);
-
-  // Create and add the project settings icon
-  const projectSettingsIcon = document.createElement("img");
-  projectSettingsIcon.id = "project-settings-icon";
-  projectSettingsIcon.src = "assets/setting.svg"; // Path to your settings.svg
-  projectSettingsIcon.alt = "Project Settings";
-  projectSettingsIcon.classList.add("project-settings-icon");
-  projectBox.appendChild(projectSettingsIcon);
-
-  // Create the project settings popup
-  const projectSettingsPopup = document.createElement("div");
-  projectSettingsPopup.id = "project-settings-popup";
-  projectSettingsPopup.classList.add("hidden", "project-settings-popup");
-  projectSettingsPopup.innerHTML = `
-    <p class="project-settings-option" id="share-project">Share Project</p>
-    <p class="project-settings-option" id="edit-project">Edit Project</p>
-    <p class="project-settings-option delete" id="delete-project">Delete Project</p>
-  `;
-  document.body.appendChild(projectSettingsPopup);
-
-  // Position the popup near the settings icon
-  function positionPopup() {
-    const rect = projectSettingsIcon.getBoundingClientRect();
-    projectSettingsPopup.style.top = `${rect.bottom + window.scrollY}px`;
-    projectSettingsPopup.style.left = `${rect.left + window.scrollX}px`;
-  }
-
-  // Toggle the popup visibility
-  projectSettingsIcon.addEventListener("click", (event) => {
-    event.stopPropagation(); // Prevent click propagation
-    if (projectSettingsPopup.classList.contains("hidden")) {
-      document.querySelectorAll(".project-settings-popup").forEach((popup) =>
-        popup.classList.add("hidden")
-      );
-      positionPopup();
-      projectSettingsPopup.classList.remove("hidden");
-    } else {
-      projectSettingsPopup.classList.add("hidden");
-    }
-  });
-
-  // Hide the popup when clicking outside
-  document.addEventListener("click", () => {
-    projectSettingsPopup.classList.add("hidden");
-  });
-
-  // Update dynamic line position
-  function updateDynamicLine() {
-    let dynamicLine = document.querySelector(".dynamic-line");
-    if (!dynamicLine) {
-      dynamicLine = document.createElement("div");
-      dynamicLine.className = "dynamic-line";
-      projectSection.appendChild(dynamicLine);
-    }
-
-    const lastProjectButton = projectListContainer.querySelector(".project-button:last-child");
-    if (lastProjectButton) {
-      const lastButtonRect = lastProjectButton.getBoundingClientRect();
-      const projectSectionRect = projectSection.getBoundingClientRect();
-      const offsetVh = ((lastButtonRect.bottom - projectSectionRect.top) / window.innerHeight) * 100;
-      dynamicLine.style.top = `calc(${offsetVh}vh + 2.5vh)`; // Adjust for spacing
-      dynamicLine.style.left = "0";
-      dynamicLine.style.width = "100%";
-      dynamicLine.style.display = "block";
-    } else {
-      // Hide the dynamic line if no project buttons exist
-      dynamicLine.style.display = "none";
-    }
-  }
-
-  // Event listener for the "Delete Project" option
-  projectSettingsPopup.addEventListener("click", (event) => {
-    if (event.target.id === "delete-project") {
-      const activeProjectButton = document.querySelector(".project-button.active");
-      if (activeProjectButton) {
-        activeProjectButton.remove(); // Remove the active project button
-        projectSettingsPopup.classList.add("hidden"); // Hide the popup
-        console.log("Project deleted.");
-
-        // Reset project name and description to default
-        projectNameDisplay.textContent = defaultProjectName;
-        projectDescriptionDisplay.textContent = defaultProjectDescription;
-
-        // Update dynamic line position
-        updateDynamicLine();
-      } else {
-        console.log("No active project to delete.");
-      }
-    }
-  });
-
-  // Event listener for the "Share Project" option
-  projectSettingsPopup.addEventListener("click", (event) => {
-    if (event.target.id === "share-project") {
-      console.log("Share Project clicked");
-      // Add your logic for sharing the project here
-    }
-  });
-
-  // Event listener for the "Edit Project" option
-  projectSettingsPopup.addEventListener("click", (event) => {
-    if (event.target.id === "edit-project") {
-      console.log("Edit Project clicked");
-      // Add your logic for editing the project here
-    }
-  });
-
-  // Toggle between the board section and project section
-  projectBox.addEventListener("click", (event) => {
-    if (event.target === projectSettingsIcon) return; // Do nothing if settings icon clicked
-
-    if (boardSection.style.display === "none") {
-      boardSection.style.display = "block";
-      projectSection.style.display = "none";
-      triangleSymbol.classList.remove("triangle-down");
-      triangleSymbol.classList.add("triangle-right");
-    } else {
-      boardSection.style.display = "none";
-      projectSection.style.display = "block";
-      triangleSymbol.classList.remove("triangle-right");
-      triangleSymbol.classList.add("triangle-down");
-    }
-  });
-
-  // Initial dynamic line setup
-  updateDynamicLine();
-}
diff --git a/client/components/calendar.js b/client/components/calendar.js
deleted file mode 100644
index d27eeff..0000000
--- a/client/components/calendar.js
+++ /dev/null
@@ -1,115 +0,0 @@
-export function Calendar() {
-  const calendarContainer = document.getElementById("calendar-container");
-  const prevMonthButton = document.getElementById("prev-month-button");
-  const nextMonthButton = document.getElementById("next-month-button");
-  const monthYearDisplay = document.getElementById("month-year-display");
-  const calendarDays = document.querySelector(".calendar-days");
-  const startDateButton = document.getElementById("start-date-button");
-  const dueDateButton = document.getElementById("due-date-button");
-
-  let displayedMonth = new Date().getMonth();
-  let displayedYear = new Date().getFullYear();
-  let selectedButton = null;
-  let startDate = null;
-  let dueDate = null;
-
-  function renderCalendar(month, year) {
-    calendarDays.innerHTML = "";
-    const monthNames = [
-      "January", "February", "March", "April", "May", "June",
-      "July", "August", "September", "October", "November", "December",
-    ];
-    monthYearDisplay.textContent = `${monthNames[month]} ${year}`;
-
-    const firstDay = new Date(year, month, 1).getDay();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-
-    for (let i = 0; i < firstDay; i++) {
-      const emptyCell = document.createElement("div");
-      emptyCell.classList.add("day", "empty");
-      calendarDays.appendChild(emptyCell);
-    }
-
-    for (let day = 1; day <= daysInMonth; day++) {
-      const dayCell = document.createElement("div");
-      dayCell.classList.add("day");
-      dayCell.textContent = day;
-
-      const date = new Date(year, month, day);
-
-      if (
-        (startDate && date.getTime() === startDate.getTime()) ||
-        (dueDate && date.getTime() === dueDate.getTime())
-      ) {
-        dayCell.classList.add("selected");
-      }
-
-      dayCell.addEventListener("click", () => {
-        const selectedDate = new Date(year, month, day);
-
-        if (selectedButton === startDateButton) {
-          if (dueDate && selectedDate > dueDate) {
-            alert("Start date must be less than or equal to the due date.");
-            return;
-          }
-          startDate = selectedDate;
-          startDateButton.textContent = selectedDate.toLocaleDateString();
-        } else if (selectedButton === dueDateButton) {
-          if (startDate && selectedDate < startDate) {
-            alert("Due date must be greater than or equal to the start date.");
-            return;
-          }
-          dueDate = selectedDate;
-          dueDateButton.textContent = selectedDate.toLocaleDateString();
-        }
-
-        calendarContainer.classList.add("hidden");
-        renderCalendar(displayedMonth, displayedYear); // Re-render to update selected days
-      });
-
-      calendarDays.appendChild(dayCell);
-    }
-  }
-
-  prevMonthButton.addEventListener("click", () => {
-    displayedMonth--;
-    if (displayedMonth < 0) {
-      displayedMonth = 11;
-      displayedYear--;
-    }
-    renderCalendar(displayedMonth, displayedYear);
-  });
-
-  nextMonthButton.addEventListener("click", () => {
-    displayedMonth++;
-    if (displayedMonth > 11) {
-      displayedMonth = 0;
-      displayedYear++;
-    }
-    renderCalendar(displayedMonth, displayedYear);
-  });
-
-  startDateButton.addEventListener("click", (e) => {
-    selectedButton = e.target;
-    calendarContainer.classList.remove("hidden");
-    renderCalendar(displayedMonth, displayedYear);
-  });
-
-  dueDateButton.addEventListener("click", (e) => {
-    selectedButton = e.target;
-    calendarContainer.classList.remove("hidden");
-    renderCalendar(displayedMonth, displayedYear);
-  });
-
-  document.addEventListener("click", (e) => {
-    if (
-      !calendarContainer.contains(e.target) &&
-      e.target.id !== "start-date-button" &&
-      e.target.id !== "due-date-button"
-    ) {
-      calendarContainer.classList.add("hidden");
-    }
-  });
-
-  renderCalendar(displayedMonth, displayedYear);
-}
diff --git a/client/components/confirmationPopup.js b/client/components/confirmationPopup.js
deleted file mode 100644
index 5cb4f28..0000000
--- a/client/components/confirmationPopup.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export function ConfirmationPopup() {
-  const confirmationPopup = document.querySelector('#confirmation-popup');
-  const cancelDiscardButton = document.querySelector('#cancel-discard-button');
-  const discardButton = document.querySelector('#discard-button');
-
-  // Close the confirmation popup when clicking the cancel button
-  cancelDiscardButton.addEventListener('click', () => {
-    confirmationPopup.classList.add('hidden');
-  });
-
-  // Close the confirmation popup when clicking the discard button
-  discardButton.addEventListener('click', () => {
-    confirmationPopup.classList.add('hidden');
-  });
-
-  // Close the confirmation popup when clicking on the overlay
-  confirmationPopup.addEventListener('click', (event) => {
-    if (event.target === confirmationPopup) {
-      confirmationPopup.classList.add('hidden');
-    }
-  });
-
-  // Function to show the confirmation popup
-  function showConfirmationPopup() {
-    confirmationPopup.classList.remove('hidden');
-  }
-
-  // Function to hide the confirmation popup
-  function hideConfirmationPopup() {
-    confirmationPopup.classList.add('hidden');
-  }
-
-  return {
-    showConfirmationPopup,
-    hideConfirmationPopup
-  };
-}
diff --git a/client/components/interface.js b/client/components/interface.js
deleted file mode 100644
index 9735991..0000000
--- a/client/components/interface.js
+++ /dev/null
@@ -1,221 +0,0 @@
-export function Interface(user,member) {
-  return `
-    <div class="file-display">
-      <span class="file-name">very_long_file_name_example.txt</span>
-      <button class="remove-file-button">X</button>
-    </div>
-
-    <div id="calendar-container" class="hidden">
-      <div id="calendar">
-        <div class="calendar-header">
-          <button id="prev-month-button">←</button>
-          <span id="month-year-display"></span>
-          <button id="next-month-button">→</button>
-        </div>
-        <div class="calendar-grid">
-          <div class="weekday">Sun</div>
-          <div class="weekday">Mon</div>
-          <div class="weekday">Tue</div>
-          <div class="weekday">Wed</div>
-          <div class="weekday">Thu</div>
-          <div class="weekday">Fri</div>
-          <div class="weekday">Sat</div>
-        </div>
-        <div class="calendar-days"></div>
-      </div>
-    </div>
-
-    <!-- Add List Button -->
-    <button id="add-list-button">+ add a list</button>
-
-    <!-- List Container -->
-    <div id="list-container"></div>
-
-    <div id="board-page">
-
-      <!-- Board Topic -->
-      <div id="board-topic"></div>
-      
-      <!-- Board Description -->
-      <div id="board-topic-description"></div>
-      
-      <!-- Settings Icon -->
-      <div id="settings-icon">
-        <img src="assets/setting.svg" alt="Settings">
-      </div>
-      
-      <!-- Tasks Checkbox -->
-      <div id="tasks-checkbox">
-        <input type="checkbox" id="tasks-checkbox-input">
-        <label for="tasks-checkbox-input">tasks assigned to me</label>
-      </div>
-
-      <div id="sidebar">
-        <div id="logo"></div>
-        <div id="userbox">
-          <img src="${user.avatarUrl}" alt="Profile Picture" id="profile-pic">
-          <span id="username">${user.username}</span>
-        </div>
-
-        <!-- Project Box -->
-        <div id="projectbox" class="clickable">
-          <div id="projectname">Project Name</div>
-          <div id="projectdescription">Project Description</div>
-        </div>
-
-        <!-- Settings Popup -->
-        <div id="settings-popup">
-          <p id="edit-board">edit board</p>
-          <p id="delete-board" class="delete">delete board</p>
-        </div>
-
-        <!-- Board Section -->
-        <div id="board-section">
-          <span id="board-text">Boards</span>
-          <div id="create-board-container">
-            <button id="create-board-button">+ Create New Board</button>
-          </div>
-          <div id="board-list-container"></div> <!-- Separate container for boards -->
-        </div>
-
-        <!-- Project Section -->
-        <div id="project-section">
-          <button id="create-project-button">+ create new project</button>
-          <div id="line-under-button"></div>
-          <div id="project-list-container"></div>
-        </div>
-
-        <!-- Main Popup and Overlay -->
-        <div id="popup-overlay" class="hidden">
-          <div id="popup-content">
-            <div class="popup-header">
-              <div id="header-title">Create new board</div>
-              <button id="close-popup-button">✖</button>
-            </div>
-            <div id="popup-body-main">
-              <form id="create-board-form">
-                <label for="board-name">board name</label>
-                <input type="text" id="board-name" placeholder="Enter board name" required>
-                <label for="board-description">board description (optional)</label>
-                <textarea id="input-board-description" placeholder="Enter board description"></textarea>
-              </form>
-            </div>
-            <div class="popup-buttons">
-              <button type="button" id="cancel-button">cancel</button>
-              <button type="submit" id="create-board-button-form">create board</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Project Popup and Overlay -->
-        <div id="project-popup-overlay" class="hidden">
-          <div id="popup-content">
-            <div class="popup-header">
-              <div id="header-title">Create new project</div>
-              <button id="close-project-popup-button">✖</button>
-            </div>
-            <div id="popup-body-main">
-              <form id="create-project-form">
-                <label for="project-name">project name</label>
-                <input type="text" id="project-name" placeholder="Enter project name" required>
-                <label for="project-description">project description (optional)</label>
-                <textarea id="project-description" placeholder="Enter project description"></textarea>
-              </form>
-            </div>
-            <div class="popup-buttons">
-              <button type="button" id="cancel-project-button">cancel</button>
-              <button type="submit" id="create-project-button-form">create project</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Task Popup and Overlay -->
-        <div id="task-popup-overlay" class="hidden">
-          <div id="task-popup-content">
-            <div class="popup-header">
-              <div id="header-title">Add a task</div>
-              <button id="close-task-popup-button">✖</button>
-            </div>
-            <div id="popup-body">
-              <form id="add-task-form">
-                <label for="task-name">task name</label>
-                <input type="text" id="task-name" placeholder="Enter task name" required>
-                <label for="task-details">task description (optional)</label>
-                <textarea id="task-details" placeholder="Enter task description"></textarea>
-                <label for="attached-file">attached file</label>
-                <div id="file-container">
-                  <button id="add-file-button" type="button">+ add file</button>
-                </div>
-                <div class="date-inputs">
-                  <div>
-                    <label for="start-date">start date</label>
-                    <button id="start-date-button" type="button">dd/mm/yy</button>
-                  </div>
-                  <div>
-                    <label for="due-date">due date</label>
-                    <button id="due-date-button" type="button">dd/mm/yy</button>
-                  </div>
-                </div>
-                <div class="label-task">
-                  <div>
-                    <label for="label">label</label>
-                    <button id="set-label-button" type="button">set label</button>
-                  </div>
-                  <div>
-                    <label for="task-assigned-to">task assigned to</label>
-                    <button id="add-member-button" type="button">+ add member</button>
-                  </div>
-                </div>
-                <div class="reminder">
-                  <label for="reminder">set reminder</label>
-                  <div class="reminder-inputs">
-                    <span>remind every</span>
-                    <input type="text" id="reminder" placeholder="dd">
-                    <span>day</span>
-                  </div>
-                </div>
-              </form>
-            </div>
-            <div class="popup-buttons">
-              <button type="button" id="cancel-task-button">cancel</button>
-              <button type="submit" id="add-task-button-submit">add a task</button>
-            </div>
-          </div>
-        </div>
-
-        <div id="label-popup" class="hidden">
-          <div class="popup-content">
-            <div class="label-options">
-              <button class="label-option" style="background-color: #A259FF;" data-color="#A259FF"></button>
-              <button class="label-option" style="background-color: #FFD93D;" data-color="#FFD93D"></button>
-              <button class="label-option" style="background-color: #53D1F0;" data-color="#53D1F0"></button>
-              <button class="label-option" style="background-color: #FF773D;" data-color="#FF773D"></button>
-              <button class="label-option" style="background-color: #3D8BFF;" data-color="#3D8BFF"></button>
-              <button class="label-option" style="background-color: #FF3D71;" data-color="#FF3D71"></button>
-              <button class="label-option" style="background-color: #3DFF77;" data-color="#3DFF77"></button>
-              <button id="done-label-button" class="done-button">done</button>
-            </div>
-          </div>
-        </div>
-
-        <div id="member-popup" class="hidden">
-            <div class="member-options"></div>
-            <button id="done-member-button">Done</button>
-        </div>
-        <button id="add-member-button">+ Add Member</button>
-
-        <!-- Confirmation Popup -->
-        <div id="confirmation-popup" class="hidden">
-          <div id="confirmation-content">
-            <h3>Discard changes?</h3>
-            <p>If you go back now, you will lose any changes you’ve made.</p>
-            <div class="confirmation-buttons">
-              <button id="cancel-discard-button">Cancel</button>
-              <button id="discard-button" class="discard">Discard</button>
-            </div>
-          </div>
-        </div>
-      </div>
-  `;
-}
-
diff --git a/client/components/list.js b/client/components/list.js
deleted file mode 100644
index 2c5df9d..0000000
--- a/client/components/list.js
+++ /dev/null
@@ -1,212 +0,0 @@
-export function List() {
-  const listContainer = document.getElementById("list-container");
-  const addListButton = document.getElementById("add-list-button");
-  const taskPopupOverlay = document.getElementById("task-popup-overlay");
-  const taskListIdInput = document.getElementById("task-list-id"); // Hidden input to store target list ID
-
-  let listCount = 0;
-  const initialPosition = 27; // Initial position of add-list-button in vw
-  const offset = 302; // Offset for positioning lists (in px)
-
-  // Function to update the position of the add-list-button
-  function updateAddListButtonPosition() {
-    addListButton.style.left = `calc(${initialPosition}vw + ${listCount * offset}px)`;
-  }
-
-  // Function to create a new list input box
-  function createNewListInputBox() {
-    addListButton.style.display = "none";
-
-    const createNewListBox = document.createElement("div");
-    createNewListBox.classList.add("create-new-list");
-
-    const listInput = document.createElement("input");
-    listInput.type = "text";
-    listInput.placeholder = "Enter list name...";
-    listInput.classList.add("add-list-input");
-
-    const buttonRow = document.createElement("div");
-    buttonRow.classList.add("button-row");
-
-    const cancelButton = document.createElement("button");
-    cancelButton.textContent = "cancel";
-    cancelButton.classList.add("cancel-list-button");
-    cancelButton.addEventListener("click", () => {
-      createNewListBox.remove();
-      addListButton.style.display = "block";
-    });
-
-    const confirmButton = document.createElement("button");
-    confirmButton.textContent = "confirm";
-    confirmButton.classList.add("confirm-list-button");
-    confirmButton.addEventListener("click", () => {
-      const listName = listInput.value.trim();
-      if (listName) {
-        const listData = { id: Date.now(), title: listName };
-        renderList(listData, listContainer);
-        listCount++;
-        updateAddListButtonPosition();
-        createNewListBox.remove();
-        addListButton.style.display = "block";
-      } else {
-        alert("List name cannot be empty.");
-      }
-    });
-
-    buttonRow.appendChild(cancelButton);
-    buttonRow.appendChild(confirmButton);
-    createNewListBox.appendChild(listInput);
-    createNewListBox.appendChild(buttonRow);
-    listContainer.appendChild(createNewListBox);
-  }
-
-  // Function to render a list
-  function renderList(listData, container, existingList = null) {
-    const list = document.createElement("div");
-    list.classList.add("list");
-    list.setAttribute("data-list-id", listData.id);
-  
-    // Container for title and settings
-    const titleContainer = document.createElement("div");
-    titleContainer.classList.add("list-title-container");
-  
-    // List title
-    const title = document.createElement("span");
-    title.classList.add("list-title");
-    title.textContent = listData.title;
-  
-    // Settings icon
-    const listSettingsIcon = document.createElement("img");
-    listSettingsIcon.src = "../assets/setting.svg"; // Replace with the actual path to your settings.svg
-    listSettingsIcon.alt = "Settings";
-    listSettingsIcon.classList.add("list-settings-icon");
-  
-    // List settings popup
-    const settingsPopup = document.createElement("div");
-    settingsPopup.classList.add("list-settings-popup", "hidden");
-  
-    // Rename List button
-    const renameButton = document.createElement("p");
-    renameButton.textContent = "rename list";
-    renameButton.addEventListener("click", () => {
-      console.log("Rename list clicked.");
-  
-      // Replace list content with the rename input box
-      list.innerHTML = ""; // Clear the current list content
-  
-      const renameContainer = document.createElement("div");
-      renameContainer.classList.add("rename-list");
-  
-      const renameInput = document.createElement("input");
-      renameInput.type = "text";
-      renameInput.value = listData.title; // Pre-fill with the current title
-      renameInput.classList.add("add-list-input");
-      renameInput.placeholder = "Enter new name...";
-  
-      const buttonRow = document.createElement("div");
-      buttonRow.classList.add("button-row");
-  
-      const cancelRenameButton = document.createElement("button");
-      cancelRenameButton.textContent = "cancel";
-      cancelRenameButton.classList.add("cancel-rename-button");
-      cancelRenameButton.addEventListener("click", () => {
-        console.log("Rename canceled.");
-        renderList(listData, container, list); // Re-render the original list in place
-      });
-      
-      const confirmRenameButton = document.createElement("button");
-      confirmRenameButton.textContent = "confirm";
-      confirmRenameButton.classList.add("confirm-rename-button");
-      confirmRenameButton.addEventListener("click", () => {
-        const newTitle = renameInput.value.trim();
-        if (newTitle) {
-          console.log("List renamed to:", newTitle);
-          listData.title = newTitle; // Update the list title in the data
-          renderList(listData, container, list); // Re-render the updated list in place
-        } else {
-          alert("List name cannot be empty.");
-        }
-      });
-  
-      buttonRow.appendChild(cancelRenameButton);
-      buttonRow.appendChild(confirmRenameButton);
-      renameContainer.appendChild(renameInput);
-      renameContainer.appendChild(buttonRow);
-      list.appendChild(renameContainer);
-      renameInput.focus();
-    });
-  
-    // Add Task button
-    const addTaskButton = document.createElement("p");
-    addTaskButton.textContent = "add a task";
-    addTaskButton.addEventListener("click", () => {
-      console.log("Add task clicked.");
-      taskPopupOverlay.classList.remove("hidden");
-      settingsPopup.classList.add("hidden");
-    });
-  
-    // Delete List button
-    const deleteButton = document.createElement("p");
-    deleteButton.textContent = "delete list";
-    deleteButton.classList.add("delete");
-    deleteButton.addEventListener("click", () => {
-      console.log("Delete list clicked.");
-      list.remove();
-      listCount--;
-      updateAddListButtonPosition();
-    });
-  
-    settingsPopup.appendChild(renameButton);
-    settingsPopup.appendChild(addTaskButton);
-    settingsPopup.appendChild(deleteButton);
-  
-    // Add event listener to settings icon
-    listSettingsIcon.addEventListener("click", (event) => {
-      event.stopPropagation(); // Prevent click propagation
-      const isHidden = settingsPopup.classList.contains("hidden");
-      document.querySelectorAll(".list-settings-popup").forEach((popup) =>
-        popup.classList.add("hidden")
-      );
-  
-      if (isHidden) {
-        const rect = listSettingsIcon.getBoundingClientRect();
-        settingsPopup.style.top = `${rect.top + window.scrollY}px`; // Adjust for upward offset
-        settingsPopup.style.left = `${rect.left + window.scrollX + 55}px`; // Adjust for rightward offset
-        settingsPopup.classList.remove("hidden");
-      }
-    });
-  
-    document.addEventListener("click", () => {
-      settingsPopup.classList.add("hidden");
-    });
-  
-    titleContainer.appendChild(title);
-    titleContainer.appendChild(listSettingsIcon);
-    list.appendChild(titleContainer);
-  
-    // Add Task button inside the list
-    const addTaskButtonInList = document.createElement("button");
-    addTaskButtonInList.textContent = "+ add a task";
-    addTaskButtonInList.classList.add("add-task-button");
-    addTaskButtonInList.addEventListener("click", () => {
-      console.log("Add task clicked (from list).");
-      taskPopupOverlay.classList.remove("hidden");
-    });
-  
-    list.appendChild(addTaskButtonInList);
-  
-    // Replace the existing list if provided
-    if (existingList) {
-      container.replaceChild(list, existingList);
-    } else {
-      container.appendChild(list);
-    }
-  
-    // Append the settings popup to the body for absolute positioning
-    document.body.appendChild(settingsPopup);
-  }  
-  
-
-  addListButton.addEventListener("click", createNewListInputBox);
-  updateAddListButtonPosition();
-}
diff --git a/client/components/member.js b/client/components/member.js
deleted file mode 100644
index b90f751..0000000
--- a/client/components/member.js
+++ /dev/null
@@ -1,97 +0,0 @@
-export function Member(members) {
-    const memberPopup = document.getElementById("member-popup");
-    const doneMemberButton = document.getElementById("done-member-button");
-    const addMemberButton = document.getElementById("add-member-button");
-    const memberOptionsContainer = document.querySelector(".member-options");
-
-    let selectedMemberButton = null;
-
-    // Populate Members
-    function populateMembers(memberList) {
-        console.log("Populating members:", memberList);
-
-        if (!memberOptionsContainer) {
-            console.error("Member options container not found.");
-            return;
-        }
-
-        memberOptionsContainer.innerHTML = ""; // Clear existing options
-
-        memberList.forEach((member, index) => {
-            if (!member || !member.profilePicture || !member.name) {
-                console.error(`Invalid member at index ${index}:`, member);
-                return; // Skip invalid member
-            }
-
-            console.log(`Adding member ${index + 1}:`, member);
-
-            const memberOption = document.createElement("div");
-            memberOption.className = "member-option";
-            memberOption.setAttribute("data-member-id", member.id);
-
-            const profilePicture = document.createElement("img");
-            profilePicture.src = member.profilePicture;
-            profilePicture.alt = member.name;
-            profilePicture.className = "member-profile-picture";
-
-            const username = document.createElement("span");
-            username.textContent = member.name;
-            username.className = "member-username";
-
-            memberOption.appendChild(profilePicture);
-            memberOption.appendChild(username);
-            memberOptionsContainer.appendChild(memberOption);
-        });
-
-        console.log("Members successfully added to member-options.");
-    }
-
-    // Show Member Popup
-    function showMemberPopup() {
-        if (memberPopup) {
-            console.log("Showing member popup.");
-            memberPopup.classList.remove("hidden");
-        } else {
-            console.error("Member popup element not found.");
-        }
-    }
-
-    // Hide Member Popup
-    function hideMemberPopup() {
-        if (memberPopup) {
-            console.log("Hiding member popup.");
-            memberPopup.classList.add("hidden");
-        }
-    }
-
-    // Done Button Logic
-    doneMemberButton.addEventListener("click", () => {
-        if (selectedMemberButton) {
-            const selectedMemberName = selectedMemberButton.querySelector(".member-username").textContent;
-            addMemberButton.textContent = selectedMemberName;
-            addMemberButton.style.backgroundColor = "#53D1F0";
-            addMemberButton.style.color = "#fff";
-            hideMemberPopup();
-        } else {
-            alert("Please select a member before clicking 'Done'.");
-        }
-    });
-
-    // Close Popup on Outside Click
-    document.addEventListener("click", (event) => {
-        if (
-            memberPopup &&
-            !memberPopup.contains(event.target) &&
-            event.target.id !== "add-member-button"
-        ) {
-            hideMemberPopup();
-        }
-    });
-
-    // Populate members during initialization
-    populateMembers(members);
-
-    return {
-        showMemberPopup,
-    };
-}
diff --git a/client/components/projectPopup.js b/client/components/projectPopup.js
deleted file mode 100644
index 49073a2..0000000
--- a/client/components/projectPopup.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import { ConfirmationPopup } from './confirmationPopup.js';
-
-export function ProjectPopup() {
-  const projectListContainer = document.getElementById("project-list-container");
-  const createProjectButton = document.getElementById("create-project-button");
-  const createProjectButtonForm = document.getElementById("create-project-button-form");
-  const projectPopupOverlay = document.getElementById("project-popup-overlay");
-  const closeProjectPopupButton = document.getElementById("close-project-popup-button");
-  const cancelProjectButton = document.getElementById("cancel-project-button");
-  const projectNameInput = document.getElementById("project-name");
-  const projectDescriptionInput = document.getElementById("project-description");
-  const projectNameDisplay = document.getElementById("projectname"); // Display area for project name
-  const projectDescriptionDisplay = document.getElementById("projectdescription"); // Display area for project description
-  const { showConfirmationPopup, hideConfirmationPopup } = ConfirmationPopup();
-
-  // Function to reset and hide the project popup overlay
-  function resetProjectPopupOverlay() {
-    projectPopupOverlay.classList.add("hidden");
-    projectNameInput.value = ""; // Clear the input field
-    projectDescriptionInput.value = ""; // Clear the description field
-  }
-
-  // Function to handle the confirmation logic
-  function handleConfirmation(action) {
-    if (action === "discard") {
-      resetProjectPopupOverlay();
-    }
-    hideConfirmationPopup();
-  }
-
-  // Attach event listeners to confirmation popup buttons
-  document.getElementById("cancel-discard-button").addEventListener("click", () => {
-    hideConfirmationPopup();
-  });
-
-  document.getElementById("discard-button").addEventListener("click", () => {
-    handleConfirmation("discard");
-  });
-
-  // Show the project popup
-  function showProjectPopup() {
-    projectPopupOverlay.classList.remove("hidden");
-  }
-
-  // Function to dynamically position the line
-  function createOrUpdateDynamicLine() {
-    const projectSection = document.getElementById("project-section");
-    let dynamicLine = document.querySelector(".dynamic-line");
-
-    if (!dynamicLine) {
-      dynamicLine = document.createElement("div");
-      dynamicLine.className = "dynamic-line";
-      projectSection.appendChild(dynamicLine);
-    }
-
-    const lastProjectButton = projectListContainer.querySelector(".project-button:last-child");
-    if (lastProjectButton) {
-      const lastButtonRect = lastProjectButton.getBoundingClientRect();
-      const projectSectionRect = projectSection.getBoundingClientRect();
-      const offsetVh = ((lastButtonRect.bottom - projectSectionRect.top) / window.innerHeight) * 100;
-      dynamicLine.style.top = `calc(${offsetVh}vh + 2.5vh)`; // Adjust for spacing
-      dynamicLine.style.left = "0";
-      dynamicLine.style.width = "100%";
-      dynamicLine.style.display = "block";
-    } else {
-      dynamicLine.style.display = "none"; // Hide if no projects
-    }
-  }
-
-  // Handle creating a new project button
-  function handleCreateProject(event) {
-    event.preventDefault();
-
-    const projectName = projectNameInput.value.trim();
-    const projectDescription = projectDescriptionInput.value.trim();
-    if (projectName) {
-      const newProjectButton = document.createElement("button");
-      newProjectButton.className = "project-button";
-      newProjectButton.innerHTML = `
-        <span class="checkmark hidden">✓</span>
-        <span class="project-name">${projectName}</span>
-      `;
-
-      // Store the project description as a data attribute (hidden)
-      newProjectButton.dataset.description = projectDescription;
-
-      // Add event listener to select the project and update projectbox
-      newProjectButton.addEventListener("click", () => {
-        document.querySelectorAll(".project-button").forEach((btn) => {
-          btn.classList.remove("active");
-          btn.querySelector(".checkmark").classList.add("hidden");
-        });
-        newProjectButton.classList.add("active");
-        newProjectButton.querySelector(".checkmark").classList.remove("hidden");
-
-        // Update the projectbox with the selected project's name and description
-        projectNameDisplay.textContent = projectName;
-        projectDescriptionDisplay.textContent = projectDescription || "No description.";
-      });
-
-      projectListContainer.appendChild(newProjectButton);
-      resetProjectPopupOverlay();
-      createOrUpdateDynamicLine();
-    } else {
-      alert("Please enter a project name.");
-    }
-  }
-
-  // Show confirmation popup for specific actions
-  function showConfirmationOnAction(event) {
-    event.stopPropagation();
-    showConfirmationPopup();
-  }
-
-  // Add event listeners
-  createProjectButton.addEventListener("click", showProjectPopup);
-  createProjectButtonForm.addEventListener("click", handleCreateProject);
-  closeProjectPopupButton.addEventListener("click", showConfirmationOnAction);
-  cancelProjectButton.addEventListener("click", showConfirmationOnAction);
-
-  projectPopupOverlay.addEventListener("click", (event) => {
-    if (event.target === projectPopupOverlay) {
-      showConfirmationPopup();
-    }
-  });
-
-  // Optional: Handle dynamic line updates on window resize
-  window.addEventListener("resize", createOrUpdateDynamicLine);
-}
diff --git a/client/components/settings.js b/client/components/settings.js
deleted file mode 100644
index 82b45c4..0000000
--- a/client/components/settings.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function SettingsPopup() {
-  const settingsIcon = document.getElementById("settings-icon");
-  const settingsPopup = document.getElementById("settings-popup");
-
-  settingsIcon.addEventListener("click", (event) => {
-    event.stopPropagation();
-    settingsPopup.style.display =
-      settingsPopup.style.display === "none" || settingsPopup.style.display === "" ? "flex" : "none";
-  });
-
-  document.addEventListener("click", (event) => {
-    if (!settingsIcon.contains(event.target) && !settingsPopup.contains(event.target)) {
-      settingsPopup.style.display = "none";
-    }
-  });
-}
\ No newline at end of file
diff --git a/client/components/task.js b/client/components/task.js
deleted file mode 100644
index 52c7e89..0000000
--- a/client/components/task.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import { TaskLabel } from "./taskLabel.js";
-import { Member } from "./member.js";
-import { ConfirmationPopup } from "./confirmationPopup.js";
-
-export function Task() {
-  // DOM References
-  const taskPopupOverlay = document.getElementById("task-popup-overlay");
-  const closeTaskPopupButton = document.getElementById("close-task-popup-button");
-  const cancelTaskButton = document.getElementById("cancel-task-button");
-  const addTaskForm = document.getElementById("add-task-form");
-  const fileContainer = document.getElementById("file-container");
-  const addMemberButton = document.getElementById("add-member-button");
-  const startDateButton = document.getElementById("start-date-button");
-  const dueDateButton = document.getElementById("due-date-button");
-  const setLabelButton = document.getElementById("set-label-button");
-  const reminderInput = document.getElementById("reminder");
-
-  const { showConfirmationPopup, hideConfirmationPopup } = ConfirmationPopup();
-
-  const projectMembers = [
-    { id: "1", name: "Alice", profilePicture: "https://via.placeholder.com/40" },
-    { id: "2", name: "Bob", profilePicture: "https://via.placeholder.com/40" },
-    { id: "3", name: "Charlie", profilePicture: "https://via.placeholder.com/40" },
-  ];
-
-  const { showMemberPopup } = Member(projectMembers);
-  const { showLabelPopup } = TaskLabel();
-
-  let uploadedFiles = [];
-  let taskData = {};
-  document.getElementById("task-popup-content").style.height = "75vh";
-
-  // Show Task Popup
-  function showTaskPopup() {
-    taskPopupOverlay.classList.remove("hidden");
-  }
-
-  // Close Task Popup with Confirmation
-  function closeTaskPopupWithConfirmation() {
-    showConfirmationPopup();
-
-    // Attach event listener to confirm button in confirmation popup
-    const discardButton = document.querySelector("#discard-button");
-    discardButton.addEventListener("click", () => {
-      closeTaskPopup(); // Close the popup and reset the inputs
-      hideConfirmationPopup(); // Hide the confirmation popup
-    });
-
-    // Cancel button simply hides the confirmation popup
-    const cancelDiscardButton = document.querySelector("#cancel-discard-button");
-    cancelDiscardButton.addEventListener("click", () => {
-      hideConfirmationPopup();
-    });
-  }
-
-  // Close Task Popup (without confirmation, for confirmed discard)
-  function closeTaskPopup() {
-    taskPopupOverlay.classList.add("hidden");
-    resetTaskPopupInputs(); // Reset all inputs
-  }
-
-  // Reset Task Popup Inputs
-  function resetTaskPopupInputs() {
-    if (addTaskForm) addTaskForm.reset();
-
-    // Clear file container
-    fileContainer.innerHTML = "";
-
-    // Restore "Add File" button
-    const addFileButtonElement = document.createElement("button");
-    addFileButtonElement.id = "add-file-button";
-    addFileButtonElement.type = "button";
-    addFileButtonElement.textContent = "+ add file";
-    addFileButtonElement.classList.add("file-button-class");
-
-    fileContainer.appendChild(addFileButtonElement);
-    initializeFileHandler(addFileButtonElement);
-
-    // Reset date and label buttons
-    startDateButton.textContent = "dd/mm/yy";
-    startDateButton.style.backgroundColor = "";
-    startDateButton.style.color = "#949AA0";
-
-    dueDateButton.textContent = "dd/mm/yy";
-    dueDateButton.style.backgroundColor = "";
-    dueDateButton.style.color = "#949AA0";
-
-    setLabelButton.textContent = "set label";
-    setLabelButton.style.backgroundColor = "";
-    setLabelButton.style.color = "#949AA0";
-
-    addMemberButton.textContent = "+ add member";
-    addMemberButton.style.backgroundColor = "";
-    addMemberButton.style.color = "#949AA0";
-
-    uploadedFiles = [];
-    taskData = {};
-  }
-
-  // Initialize File Handling Logic
-  function initializeFileHandler(button) {
-    const fileInput = document.createElement("input");
-    fileInput.type = "file";
-    fileInput.style.display = "none";
-
-    button.addEventListener("click", () => {
-      fileInput.value = "";
-      fileInput.click();
-    });
-
-    fileInput.addEventListener("change", (event) => {
-      const file = event.target.files[0];
-      if (file) {
-        displayFile(file);
-      }
-    });
-
-    fileContainer.appendChild(fileInput);
-  }
-
-  // Display Selected File
-  function displayFile(file) {
-    uploadedFiles.push(file);
-
-    const fileDisplay = document.createElement("div");
-    fileDisplay.classList.add("file-display");
-    fileDisplay.innerHTML = `
-      <span class="file-name">${file.name}</span>
-      <button class="remove-file-button">X</button>
-    `;
-
-    const removeButton = fileDisplay.querySelector(".remove-file-button");
-    removeButton.addEventListener("click", () => {
-      uploadedFiles = uploadedFiles.filter((f) => f !== file);
-      fileDisplay.remove();
-    });
-
-    fileContainer.appendChild(fileDisplay);
-  }
-
-  // Restrict Reminder Input to Numbers Only
-  reminderInput.addEventListener("input", () => {
-    reminderInput.value = reminderInput.value.replace(/\D/g, "");
-    if (parseInt(reminderInput.value) > 100) {
-      reminderInput.value = "99";
-    }
-  });
-
-  reminderInput.addEventListener("blur", () => {
-    if (!reminderInput.value || parseInt(reminderInput.value) <= 0) {
-      reminderInput.value = "";
-    }
-  });
-
-  // Attach Event Listeners
-  closeTaskPopupButton.addEventListener("click", closeTaskPopupWithConfirmation);
-  cancelTaskButton.addEventListener("click", closeTaskPopupWithConfirmation);
-
-  taskPopupOverlay.addEventListener("click", (event) => {
-    if (event.target === taskPopupOverlay) {
-      closeTaskPopupWithConfirmation();
-    }
-  });
-
-  // Show Label Popup when setLabelButton is clicked
-  setLabelButton.addEventListener("click", () => {
-    showLabelPopup();
-  });
-
-  // Show Member Popup when addMemberButton is clicked
-  addMemberButton.addEventListener("click", () => {
-    console.log("Add member button clicked.");
-    showMemberPopup();
-  });
-
-  console.log("Task module initialized.");
-  resetTaskPopupInputs();
-}
diff --git a/client/components/taskLabel.js b/client/components/taskLabel.js
deleted file mode 100644
index d24e865..0000000
--- a/client/components/taskLabel.js
+++ /dev/null
@@ -1,80 +0,0 @@
-export function TaskLabel() {
-  const labelPopup = document.getElementById("label-popup");
-  const doneLabelButton = document.getElementById("done-label-button");
-  const labelOptions = document.querySelectorAll(".label-option");
-  const setLabelButton = document.getElementById("set-label-button");
-
-  let selectedColorButton = null; // Track the currently selected color button
-
-  // Show the Label Popup
-  function showLabelPopup() {
-    if (labelPopup) {
-      labelPopup.style.display = "block"; // Show the popup
-      labelPopup.classList.remove("hidden");
-      console.log("Showing label popup.");
-      console.log(labelPopup);
-    } else {
-      console.error("Label popup element not found.");
-    }
-  }
-
-  // Hide the Label Popup
-  function hideLabelPopup() {
-    if (labelPopup) {
-      labelPopup.style.display = "none"; // Hide the popup
-    }
-  }
-
-  // Handle Label Selection
-  labelOptions.forEach((button) => {
-    button.addEventListener("click", () => {
-      // Clear the previous selection
-      if (selectedColorButton) {
-        selectedColorButton.innerHTML = ""; // Remove the checkmark
-      }
-
-      // Mark the clicked button as selected
-      selectedColorButton = button;
-      button.innerHTML = "✓"; // Add the checkmark symbol
-
-      console.log("Selected color:", button.getAttribute("data-color"));
-    });
-  });
-
-  // Handle Done Button Click
-  doneLabelButton.addEventListener("click", () => {
-    if (selectedColorButton) {
-      const selectedColor = selectedColorButton.getAttribute("data-color");
-
-    // Update the "set-label-button" with the selected color
-    setLabelButton.style.backgroundColor = selectedColor;
-    setLabelButton.style.border = "none"; // Remove border for a clean look
-    setLabelButton.textContent = ""; // Clear any existing text
-
-    // Ensure the button retains its original size
-    setLabelButton.style.width = "27%"; // Adjust width as needed
-    setLabelButton.style.height = "35%";
-    setLabelButton.style.borderRadius = "12px"; // Optional: add rounded corners
-    setLabelButton.style.border = "1px solid #949AA0"; // Optional: add border to the button
-
-      hideLabelPopup(); // Close the popup
-    } else {
-      alert("Please select a color before clicking 'Done'.");
-    }
-  });
-
-  // Hide the popup on outside click
-  document.addEventListener("click", (event) => {
-    if (
-      labelPopup &&
-      !labelPopup.contains(event.target) &&
-      event.target.id !== "set-label-button"
-    ) {
-      hideLabelPopup();
-    }
-  });
-
-  return {
-    showLabelPopup,
-  };
-}
diff --git a/client/style.css b/client/index.css
similarity index 99%
rename from client/style.css
rename to client/index.css
index 540558a..734924a 100644
--- a/client/style.css
+++ b/client/index.css
@@ -1,4 +1,4 @@
-/* style.css */
+/* index.css */
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
diff --git a/client/index.html b/client/index.html
index e77f5d6..5948f75 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,30 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Planify</title>
-  
-  <!-- Specific styles for different components -->
-  <link rel="stylesheet" href="styles/board.css">
-  <link rel="stylesheet" href="styles/calendar.css">
-  <link rel="stylesheet" href="styles/confirmation.css">
-  <link rel="stylesheet" href="styles/label.css">
-  <link rel="stylesheet" href="styles/popup.css">
-  <link rel="stylesheet" href="styles/sidebar.css">
-  <link rel="stylesheet" href="styles/project.css">
-  <link rel="stylesheet" href="styles/list.css">
-  <link rel="stylesheet" href="styles/task.css">
-  <link rel="stylesheet" href="styles/settings.css">
-  <link rel="stylesheet" href="./style.css">
-  <link rel="stylesheet" href="styles/member.css">
-  
-</head>
-<body>
-  <div id="app"></div>
-
-  <!-- Including the necessary JS files -->
-  <script type="module" src="main.js"></script>
-  
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="
+  default-src 'self';
+  connect-src 'self' 
+    wss://1322956099464462358.discordsays.com/.proxy/ 
+    wss://discord.com/api/ 
+    wss://canary.discord.com/api/ 
+    wss://ptb.discord.com/api/ 
+    https://cdn.discordapp.com/ 
+    https://discordapp.com/ 
+    https://media.discordapp.net/ 
+    data: 
+    blob:;
+">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.jsx"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/client/index.jsx b/client/index.jsx
new file mode 100644
index 0000000..6639d64
--- /dev/null
+++ b/client/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';  // Correct import for React 18+
+import App from './App';
+import './index.css';
+
+const root = document.getElementById('root');
+const rootElement = ReactDOM.createRoot(root);  // Use the correct method
+rootElement.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/client/main.js b/client/main.js
deleted file mode 100644
index ddbafab..0000000
--- a/client/main.js
+++ /dev/null
@@ -1,92 +0,0 @@
-  import { DiscordSDK } from "@discord/embedded-app-sdk";
-  import { Interface } from "./components/interface.js";
-  import { Calendar } from "./components/calendar.js";
-  import { Task } from "./components/task.js";
-  import { Board } from "./components/board.js";
-  import { SettingsPopup } from "./components/settings.js";
-  import { ProjectPopup } from "./components/projectPopup.js";
-  import { ConfirmationPopup } from "./components/confirmationPopup.js";
-  import { TaskLabel } from "./components/taskLabel.js";
-  import { BoardProject } from "./components/boardproject.js";
-  import { List } from "./components/list.js";
-  import { Member } from "./components/member.js";
-
-  import "./style.css";
-
-  const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID);
-  let user = {};
-
-  // Setup the Discord SDK
-  async function setupDiscordSdk() {
-    try {
-      await discordSdk.ready();
-      console.log("Discord SDK is ready");
-
-      const { code } = await discordSdk.commands.authorize({
-        client_id: import.meta.env.VITE_DISCORD_CLIENT_ID,
-        response_type: "code",
-        state: "",
-        prompt: "none",
-        scope: ["identify", "guilds", "applications.commands"],
-      });
-
-      const response = await fetch("/.proxy/api/token", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ code }),
-      });
-
-      const { access_token } = await response.json();
-      await discordSdk.commands.authenticate({ access_token });
-
-      const userProfile = await fetchUserProfile(access_token);
-      user = {
-        username: userProfile.username,
-        avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
-      };
-
-      renderApp();
-    } catch (error) {
-      console.error("Error setting up Discord SDK:", error);
-    }
-  }
-
-  // Fetch user profile from Discord API
-  async function fetchUserProfile(token) {
-    const response = await fetch("https://discord.com/api/users/@me", {
-      headers: { Authorization: `Bearer ${token}` },
-    });
-
-    if (!response.ok) {
-      throw new Error("Failed to fetch user profile");
-    }
-
-    return await response.json();
-  }
-
-  // Main render function
-  function renderApp() {
-    try {
-      document.querySelector("#app").innerHTML = Interface(user);
-
-      // Initialize all components
-      console.log("Initializing components...");
-      Calendar();
-      Task();
-      Board();
-      SettingsPopup();
-      ProjectPopup();
-      ConfirmationPopup();
-      TaskLabel();
-      BoardProject();
-      List();
-      Member();
-
-      console.log("Components initialized successfully.");
-    } catch (error) {
-      console.error("Error during app rendering:", error);
-    }
-  }
-
-  // Start the Discord SDK setup
-  setupDiscordSdk().catch(console.error);
\ No newline at end of file
diff --git a/client/package-lock.json b/client/package-lock.json
index a24fe01..18c2376 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,11 +9,300 @@
       "version": "0.0.0",
       "dependencies": {
         "@discord/embedded-app-sdk": "^1.9.0",
-        "flatpickr": "^4.6.13",
-        "pikaday": "^1.8.2"
+        "crypto": "^1.0.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^7.1.3"
       },
       "devDependencies": {
-        "vite": "^5.4.14"
+        "@vitejs/plugin-react": "^4.3.4",
+        "vite": "^6.0.11"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.5.tgz",
+      "integrity": "sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.7.tgz",
+      "integrity": "sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.5",
+        "@babel/helper-compilation-targets": "^7.26.5",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.7",
+        "@babel/parser": "^7.26.7",
+        "@babel/template": "^7.25.9",
+        "@babel/traverse": "^7.26.7",
+        "@babel/types": "^7.26.7",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz",
+      "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.26.5",
+        "@babel/types": "^7.26.5",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz",
+      "integrity": "sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.26.5",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
+      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.7.tgz",
+      "integrity": "sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
+      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz",
+      "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz",
+      "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz",
+      "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.5",
+        "@babel/parser": "^7.26.7",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.7",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
+      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@discord/embedded-app-sdk": {
@@ -33,9 +322,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
       "cpu": [
         "ppc64"
       ],
@@ -46,13 +335,13 @@
         "aix"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
       "cpu": [
         "arm"
       ],
@@ -63,13 +352,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
       "cpu": [
         "arm64"
       ],
@@ -80,13 +369,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
       "cpu": [
         "x64"
       ],
@@ -97,13 +386,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
       "cpu": [
         "arm64"
       ],
@@ -114,13 +403,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
       "cpu": [
         "x64"
       ],
@@ -131,13 +420,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
       "cpu": [
         "arm64"
       ],
@@ -148,13 +437,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
       "cpu": [
         "x64"
       ],
@@ -165,13 +454,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
       "cpu": [
         "arm"
       ],
@@ -182,13 +471,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
       "cpu": [
         "arm64"
       ],
@@ -199,13 +488,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
       "cpu": [
         "ia32"
       ],
@@ -216,13 +505,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
       "cpu": [
         "loong64"
       ],
@@ -233,13 +522,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
       "cpu": [
         "mips64el"
       ],
@@ -250,13 +539,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
       "cpu": [
         "ppc64"
       ],
@@ -267,13 +556,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
       "cpu": [
         "riscv64"
       ],
@@ -284,13 +573,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
       "cpu": [
         "s390x"
       ],
@@ -301,13 +590,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
       "cpu": [
         "x64"
       ],
@@ -318,13 +607,30 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
       "cpu": [
         "x64"
       ],
@@ -335,13 +641,30 @@
         "netbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
       "cpu": [
         "x64"
       ],
@@ -352,13 +675,13 @@
         "openbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
       "cpu": [
         "x64"
       ],
@@ -369,13 +692,13 @@
         "sunos"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
       "cpu": [
         "arm64"
       ],
@@ -386,13 +709,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
       "cpu": [
         "ia32"
       ],
@@ -403,13 +726,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
       "cpu": [
         "x64"
       ],
@@ -420,13 +743,66 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.30.1.tgz",
-      "integrity": "sha512-pSWY+EVt3rJ9fQ3IqlrEUtXh3cGqGtPDH1FQlNZehO2yYxCHEX1SPsz1M//NXwYfbTlcKr9WObLnJX9FsS9K1Q==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.0.tgz",
+      "integrity": "sha512-G2fUQQANtBPsNwiVFg4zKiPQyjVKZCUdQUol53R8E71J7AsheRMV/Yv/nB8giOcOVqP7//eB5xPqieBYZe9bGg==",
       "cpu": [
         "arm"
       ],
@@ -438,9 +814,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.30.1.tgz",
-      "integrity": "sha512-/NA2qXxE3D/BRjOJM8wQblmArQq1YoBVJjrjoTSBS09jgUisq7bqxNHJ8kjCHeV21W/9WDGwJEWSN0KQ2mtD/w==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.32.0.tgz",
+      "integrity": "sha512-qhFwQ+ljoymC+j5lXRv8DlaJYY/+8vyvYmVx074zrLsu5ZGWYsJNLjPPVJJjhZQpyAKUGPydOq9hRLLNvh1s3A==",
       "cpu": [
         "arm64"
       ],
@@ -452,9 +828,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.30.1.tgz",
-      "integrity": "sha512-r7FQIXD7gB0WJ5mokTUgUWPl0eYIH0wnxqeSAhuIwvnnpjdVB8cRRClyKLQr7lgzjctkbp5KmswWszlwYln03Q==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.32.0.tgz",
+      "integrity": "sha512-44n/X3lAlWsEY6vF8CzgCx+LQaoqWGN7TzUfbJDiTIOjJm4+L2Yq+r5a8ytQRGyPqgJDs3Rgyo8eVL7n9iW6AQ==",
       "cpu": [
         "arm64"
       ],
@@ -466,9 +842,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.30.1.tgz",
-      "integrity": "sha512-x78BavIwSH6sqfP2xeI1hd1GpHL8J4W2BXcVM/5KYKoAD3nNsfitQhvWSw+TFtQTLZ9OmlF+FEInEHyubut2OA==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.32.0.tgz",
+      "integrity": "sha512-F9ct0+ZX5Np6+ZDztxiGCIvlCaW87HBdHcozUfsHnj1WCUTBUubAoanhHUfnUHZABlElyRikI0mgcw/qdEm2VQ==",
       "cpu": [
         "x64"
       ],
@@ -480,9 +856,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.30.1.tgz",
-      "integrity": "sha512-HYTlUAjbO1z8ywxsDFWADfTRfTIIy/oUlfIDmlHYmjUP2QRDTzBuWXc9O4CXM+bo9qfiCclmHk1x4ogBjOUpUQ==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.32.0.tgz",
+      "integrity": "sha512-JpsGxLBB2EFXBsTLHfkZDsXSpSmKD3VxXCgBQtlPcuAqB8TlqtLcbeMhxXQkCDv1avgwNjF8uEIbq5p+Cee0PA==",
       "cpu": [
         "arm64"
       ],
@@ -494,9 +870,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.30.1.tgz",
-      "integrity": "sha512-1MEdGqogQLccphhX5myCJqeGNYTNcmTyaic9S7CG3JhwuIByJ7J05vGbZxsizQthP1xpVx7kd3o31eOogfEirw==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.32.0.tgz",
+      "integrity": "sha512-wegiyBT6rawdpvnD9lmbOpx5Sph+yVZKHbhnSP9MqUEDX08G4UzMU+D87jrazGE7lRSyTRs6NEYHtzfkJ3FjjQ==",
       "cpu": [
         "x64"
       ],
@@ -508,9 +884,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.30.1.tgz",
-      "integrity": "sha512-PaMRNBSqCx7K3Wc9QZkFx5+CX27WFpAMxJNiYGAXfmMIKC7jstlr32UhTgK6T07OtqR+wYlWm9IxzennjnvdJg==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.32.0.tgz",
+      "integrity": "sha512-3pA7xecItbgOs1A5H58dDvOUEboG5UfpTq3WzAdF54acBbUM+olDJAPkgj1GRJ4ZqE12DZ9/hNS2QZk166v92A==",
       "cpu": [
         "arm"
       ],
@@ -522,9 +898,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.30.1.tgz",
-      "integrity": "sha512-B8Rcyj9AV7ZlEFqvB5BubG5iO6ANDsRKlhIxySXcF1axXYUyqwBok+XZPgIYGBgs7LDXfWfifxhw0Ik57T0Yug==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.32.0.tgz",
+      "integrity": "sha512-Y7XUZEVISGyge51QbYyYAEHwpGgmRrAxQXO3siyYo2kmaj72USSG8LtlQQgAtlGfxYiOwu+2BdbPjzEpcOpRmQ==",
       "cpu": [
         "arm"
       ],
@@ -536,9 +912,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.30.1.tgz",
-      "integrity": "sha512-hqVyueGxAj3cBKrAI4aFHLV+h0Lv5VgWZs9CUGqr1z0fZtlADVV1YPOij6AhcK5An33EXaxnDLmJdQikcn5NEw==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.32.0.tgz",
+      "integrity": "sha512-r7/OTF5MqeBrZo5omPXcTnjvv1GsrdH8a8RerARvDFiDwFpDVDnJyByYM/nX+mvks8XXsgPUxkwe/ltaX2VH7w==",
       "cpu": [
         "arm64"
       ],
@@ -550,9 +926,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.30.1.tgz",
-      "integrity": "sha512-i4Ab2vnvS1AE1PyOIGp2kXni69gU2DAUVt6FSXeIqUCPIR3ZlheMW3oP2JkukDfu3PsexYRbOiJrY+yVNSk9oA==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.32.0.tgz",
+      "integrity": "sha512-HJbifC9vex9NqnlodV2BHVFNuzKL5OnsV2dvTw6e1dpZKkNjPG6WUq+nhEYV6Hv2Bv++BXkwcyoGlXnPrjAKXw==",
       "cpu": [
         "arm64"
       ],
@@ -564,9 +940,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.30.1.tgz",
-      "integrity": "sha512-fARcF5g296snX0oLGkVxPmysetwUk2zmHcca+e9ObOovBR++9ZPOhqFUM61UUZ2EYpXVPN1redgqVoBB34nTpQ==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.32.0.tgz",
+      "integrity": "sha512-VAEzZTD63YglFlWwRj3taofmkV1V3xhebDXffon7msNz4b14xKsz7utO6F8F4cqt8K/ktTl9rm88yryvDpsfOw==",
       "cpu": [
         "loong64"
       ],
@@ -578,9 +954,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.30.1.tgz",
-      "integrity": "sha512-GLrZraoO3wVT4uFXh67ElpwQY0DIygxdv0BNW9Hkm3X34wu+BkqrDrkcsIapAY+N2ATEbvak0XQ9gxZtCIA5Rw==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.32.0.tgz",
+      "integrity": "sha512-Sts5DST1jXAc9YH/iik1C9QRsLcCoOScf3dfbY5i4kH9RJpKxiTBXqm7qU5O6zTXBTEZry69bGszr3SMgYmMcQ==",
       "cpu": [
         "ppc64"
       ],
@@ -592,9 +968,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.30.1.tgz",
-      "integrity": "sha512-0WKLaAUUHKBtll0wvOmh6yh3S0wSU9+yas923JIChfxOaaBarmb/lBKPF0w/+jTVozFnOXJeRGZ8NvOxvk/jcw==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.32.0.tgz",
+      "integrity": "sha512-qhlXeV9AqxIyY9/R1h1hBD6eMvQCO34ZmdYvry/K+/MBs6d1nRFLm6BOiITLVI+nFAAB9kUB6sdJRKyVHXnqZw==",
       "cpu": [
         "riscv64"
       ],
@@ -606,9 +982,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.30.1.tgz",
-      "integrity": "sha512-GWFs97Ruxo5Bt+cvVTQkOJ6TIx0xJDD/bMAOXWJg8TCSTEK8RnFeOeiFTxKniTc4vMIaWvCplMAFBt9miGxgkA==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.32.0.tgz",
+      "integrity": "sha512-8ZGN7ExnV0qjXa155Rsfi6H8M4iBBwNLBM9lcVS+4NcSzOFaNqmt7djlox8pN1lWrRPMRRQ8NeDlozIGx3Omsw==",
       "cpu": [
         "s390x"
       ],
@@ -620,9 +996,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.30.1.tgz",
-      "integrity": "sha512-UtgGb7QGgXDIO+tqqJ5oZRGHsDLO8SlpE4MhqpY9Llpzi5rJMvrK6ZGhsRCST2abZdBqIBeXW6WPD5fGK5SDwg==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.32.0.tgz",
+      "integrity": "sha512-VDzNHtLLI5s7xd/VubyS10mq6TxvZBp+4NRWoW+Hi3tgV05RtVm4qK99+dClwTN1McA6PHwob6DEJ6PlXbY83A==",
       "cpu": [
         "x64"
       ],
@@ -634,9 +1010,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.30.1.tgz",
-      "integrity": "sha512-V9U8Ey2UqmQsBT+xTOeMzPzwDzyXmnAoO4edZhL7INkwQcaW1Ckv3WJX3qrrp/VHaDkEWIBWhRwP47r8cdrOow==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.32.0.tgz",
+      "integrity": "sha512-qcb9qYDlkxz9DxJo7SDhWxTWV1gFuwznjbTiov289pASxlfGbaOD54mgbs9+z94VwrXtKTu+2RqwlSTbiOqxGg==",
       "cpu": [
         "x64"
       ],
@@ -648,9 +1024,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.30.1.tgz",
-      "integrity": "sha512-WabtHWiPaFF47W3PkHnjbmWawnX/aE57K47ZDT1BXTS5GgrBUEpvOzq0FI0V/UYzQJgdb8XlhVNH8/fwV8xDjw==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.32.0.tgz",
+      "integrity": "sha512-pFDdotFDMXW2AXVbfdUEfidPAk/OtwE/Hd4eYMTNVVaCQ6Yl8et0meDaKNL63L44Haxv4UExpv9ydSf3aSayDg==",
       "cpu": [
         "arm64"
       ],
@@ -662,9 +1038,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.30.1.tgz",
-      "integrity": "sha512-pxHAU+Zv39hLUTdQQHUVHf4P+0C47y/ZloorHpzs2SXMRqeAWmGghzAhfOlzFHHwjvgokdFAhC4V+6kC1lRRfw==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.32.0.tgz",
+      "integrity": "sha512-/TG7WfrCAjeRNDvI4+0AAMoHxea/USWhAzf9PVDFHbcqrQ7hMMKp4jZIy4VEjk72AAfN5k4TiSMRXRKf/0akSw==",
       "cpu": [
         "ia32"
       ],
@@ -676,9 +1052,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.30.1.tgz",
-      "integrity": "sha512-D6qjsXGcvhTjv0kI4fU8tUuBDF/Ueee4SVX79VfNDXZa64TfCW1Slkb6Z7O1p7vflqZjcmOVdZlqf8gvJxc6og==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.32.0.tgz",
+      "integrity": "sha512-5hqO5S3PTEO2E5VjCePxv40gIgyS2KvO7E7/vvC/NbIW4SIRamkMr1hqj+5Y67fbBWv/bQLB6KelBQmXlyCjWA==",
       "cpu": [
         "x64"
       ],
@@ -689,6 +1065,57 @@
         "win32"
       ]
     },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
+      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -717,6 +1144,26 @@
       "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
       "license": "MIT"
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
+      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
+        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
+      }
+    },
     "node_modules/big-integer": {
       "version": "1.6.52",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
@@ -726,16 +1173,118 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001695",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz",
+      "integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/crypto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/crypto/-/crypto-1.0.1.tgz",
+      "integrity": "sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==",
+      "deprecated": "This package is no longer supported. It's now a built-in Node module. If you've depended on crypto, you should switch to the one that's built-in.",
+      "license": "ISC"
+    },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
       "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.88",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.88.tgz",
+      "integrity": "sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/esbuild": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -743,32 +1292,44 @@
         "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.21.5",
-        "@esbuild/android-arm": "0.21.5",
-        "@esbuild/android-arm64": "0.21.5",
-        "@esbuild/android-x64": "0.21.5",
-        "@esbuild/darwin-arm64": "0.21.5",
-        "@esbuild/darwin-x64": "0.21.5",
-        "@esbuild/freebsd-arm64": "0.21.5",
-        "@esbuild/freebsd-x64": "0.21.5",
-        "@esbuild/linux-arm": "0.21.5",
-        "@esbuild/linux-arm64": "0.21.5",
-        "@esbuild/linux-ia32": "0.21.5",
-        "@esbuild/linux-loong64": "0.21.5",
-        "@esbuild/linux-mips64el": "0.21.5",
-        "@esbuild/linux-ppc64": "0.21.5",
-        "@esbuild/linux-riscv64": "0.21.5",
-        "@esbuild/linux-s390x": "0.21.5",
-        "@esbuild/linux-x64": "0.21.5",
-        "@esbuild/netbsd-x64": "0.21.5",
-        "@esbuild/openbsd-x64": "0.21.5",
-        "@esbuild/sunos-x64": "0.21.5",
-        "@esbuild/win32-arm64": "0.21.5",
-        "@esbuild/win32-ia32": "0.21.5",
-        "@esbuild/win32-x64": "0.21.5"
+        "@esbuild/aix-ppc64": "0.24.2",
+        "@esbuild/android-arm": "0.24.2",
+        "@esbuild/android-arm64": "0.24.2",
+        "@esbuild/android-x64": "0.24.2",
+        "@esbuild/darwin-arm64": "0.24.2",
+        "@esbuild/darwin-x64": "0.24.2",
+        "@esbuild/freebsd-arm64": "0.24.2",
+        "@esbuild/freebsd-x64": "0.24.2",
+        "@esbuild/linux-arm": "0.24.2",
+        "@esbuild/linux-arm64": "0.24.2",
+        "@esbuild/linux-ia32": "0.24.2",
+        "@esbuild/linux-loong64": "0.24.2",
+        "@esbuild/linux-mips64el": "0.24.2",
+        "@esbuild/linux-ppc64": "0.24.2",
+        "@esbuild/linux-riscv64": "0.24.2",
+        "@esbuild/linux-s390x": "0.24.2",
+        "@esbuild/linux-x64": "0.24.2",
+        "@esbuild/netbsd-arm64": "0.24.2",
+        "@esbuild/netbsd-x64": "0.24.2",
+        "@esbuild/openbsd-arm64": "0.24.2",
+        "@esbuild/openbsd-x64": "0.24.2",
+        "@esbuild/sunos-x64": "0.24.2",
+        "@esbuild/win32-arm64": "0.24.2",
+        "@esbuild/win32-ia32": "0.24.2",
+        "@esbuild/win32-x64": "0.24.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/eventemitter3": {
@@ -777,18 +1338,13 @@
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
-    "node_modules/flatpickr": {
-      "version": "4.6.13",
-      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
-      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
-      "license": "MIT"
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -797,12 +1353,93 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
       "integrity": "sha512-LO37ZnhmBVx0GvOU/caQuipEh4GN82TcWv3yHlebGDgOxbxiwwzW5Pcx2AcvpIv2WmvmSMoC492yQFNhy/l/UQ==",
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -822,23 +1459,24 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/pikaday": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/pikaday/-/pikaday-1.8.2.tgz",
-      "integrity": "sha512-TNtsE+34BIax3WtkB/qqu5uepV1McKYEgvL3kWzU7aqPCpMEN6rBF3AOwu4WCwAealWlBGobXny/9kJb49C1ew==",
-      "license": "(0BSD OR MIT)"
-    },
     "node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "dev": true,
       "funding": [
         {
@@ -856,18 +1494,93 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.1.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/rollup": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.30.1.tgz",
-      "integrity": "sha512-mlJ4glW020fPuLi7DkM/lN97mYEZGWeqBnrljzN0gs7GLctqX3lNWxKQ7Gl712UAX+6fog/L3jh4gb7R6aVi3w==",
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
+      "integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -881,28 +1594,53 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.30.1",
-        "@rollup/rollup-android-arm64": "4.30.1",
-        "@rollup/rollup-darwin-arm64": "4.30.1",
-        "@rollup/rollup-darwin-x64": "4.30.1",
-        "@rollup/rollup-freebsd-arm64": "4.30.1",
-        "@rollup/rollup-freebsd-x64": "4.30.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.30.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.30.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.30.1",
-        "@rollup/rollup-linux-arm64-musl": "4.30.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.30.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.30.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.30.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.30.1",
-        "@rollup/rollup-linux-x64-gnu": "4.30.1",
-        "@rollup/rollup-linux-x64-musl": "4.30.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.30.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.30.1",
-        "@rollup/rollup-win32-x64-msvc": "4.30.1",
+        "@rollup/rollup-android-arm-eabi": "4.32.0",
+        "@rollup/rollup-android-arm64": "4.32.0",
+        "@rollup/rollup-darwin-arm64": "4.32.0",
+        "@rollup/rollup-darwin-x64": "4.32.0",
+        "@rollup/rollup-freebsd-arm64": "4.32.0",
+        "@rollup/rollup-freebsd-x64": "4.32.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.32.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.32.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.32.0",
+        "@rollup/rollup-linux-arm64-musl": "4.32.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.32.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.32.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.32.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.32.0",
+        "@rollup/rollup-linux-x64-gnu": "4.32.0",
+        "@rollup/rollup-linux-x64-musl": "4.32.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.32.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.32.0",
+        "@rollup/rollup-win32-x64-msvc": "4.32.0",
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -913,6 +1651,43 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
+      "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
@@ -927,21 +1702,21 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.14",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
-      "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
+      "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.21.3",
-        "postcss": "^8.4.43",
-        "rollup": "^4.20.0"
+        "esbuild": "^0.24.2",
+        "postcss": "^8.4.49",
+        "rollup": "^4.23.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -950,19 +1725,25 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
         "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
-        "terser": "^5.4.0"
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
       },
       "peerDependenciesMeta": {
         "@types/node": {
           "optional": true
         },
+        "jiti": {
+          "optional": true
+        },
         "less": {
           "optional": true
         },
@@ -983,9 +1764,22 @@
         },
         "terser": {
           "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
         }
       }
     },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/zod": {
       "version": "3.24.1",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
diff --git a/client/package.json b/client/package.json
index 671347d..3a8d243 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,9 +9,14 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.4.14"
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.11"
   },
   "dependencies": {
-    "@discord/embedded-app-sdk": "^1.9.0"
+    "@discord/embedded-app-sdk": "^1.9.0",
+    "crypto": "^1.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3"
   }
 }
diff --git a/client/reportWebVitals.jsx b/client/reportWebVitals.jsx
new file mode 100644
index 0000000..f78fb1f
--- /dev/null
+++ b/client/reportWebVitals.jsx
@@ -0,0 +1,16 @@
+// reportWebVitals.js
+
+const reportWebVitals = (onPerfEntry) => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+      import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+        getCLS(onPerfEntry);
+        getFID(onPerfEntry);
+        getFCP(onPerfEntry);
+        getLCP(onPerfEntry);
+        getTTFB(onPerfEntry);
+      });
+    }
+  };
+  
+  export default reportWebVitals;
+  
\ No newline at end of file
diff --git a/client/styles/board.css b/client/styles/board.css
index 273d922..88208a1 100644
--- a/client/styles/board.css
+++ b/client/styles/board.css
@@ -1,22 +1,93 @@
 /* Board Section Styling */
+.board-section {
+  position: fixed;
+  top: 23.3vh;
+  left: 0;
+  width: 20%; /* 1/5 of the screen width */
+  height: 5vh; /* Full height of the screen */
+  background-color: #1C2025;
+  padding: 20px;
+  border-right: 1px solid #474E55; /* Right edge line color */
+  z-index: 2;
+  display: none; /* Hidden by default */
+}
 #board-section {
   position: fixed;
-    top: 23.3vh;
-    left: 0;
-    width: 20%; /* 1/5 of the screen width */
-    height: 5vh; /* Full height of the screen */
-    background-color: #1C2025;
-    padding: 20px;
-    border-right: 1px solid #474E55; /* Right edge line color */
-    z-index: 2;
-  }
-  #board-text {
-  position: relative;
-  left: 1.1vw;
-  font-size: calc(1.4vw);
-  color: white;
-  letter-spacing: 1px;
-  }
+  top: 23.3vh;
+  left: 0;
+  width: 20%; /* 1/5 of the screen width */
+  height: 5vh; /* Full height of the screen */
+  background-color: #1C2025;
+  padding: 20px;
+  border-right: 1px solid #474E55; /* Right edge line color */
+  z-index: 2;
+  display: none; /* Hidden by default */
+}
+
+.board-section.active {
+  display: block; /* Show only the active board section */
+}
+
+.board-section , #board-list-container , .board-list-container {
+  max-height: 53.5vh; /* Adjust as needed */
+  overflow-y: auto; /* Allow scrolling if content exceeds container height */
+  position: relative; /* Ensure the container's position can be adjusted */
+  top: -1vh; /* Moves the container 1vh higher */
+}
+
+/* Styling for Board Buttons */
+.board-button {
+  display: block;
+  z-index: 5;
+  width: 100%;
+  padding: 10px 15px;
+  margin: 4px 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  text-align: left;
+  font-size: calc(1.3vw);
+  color: #f3f3f3;
+  cursor: pointer;
+  text-indent: 2.5vw; /* Moves text to the right */
+  margin-bottom: 1.5vh;
+  overflow: hidden; /* Hide overflow text */
+  white-space: nowrap; /* Prevent text wrapping */
+  text-overflow: ellipsis; /* Show ellipsis for overflow */
+}
+
+.board-button:hover {
+  background-color: #25282D;
+}
+
+.board-button.active {
+  background-color: #1C2B41;
+  color: #3C90E2;
+}
+
+/* Scrollbar for Board List Container */
+.board-section .board-list-container::-webkit-scrollbar {
+  width: 6px; /* Optional scrollbar width */
+  border-radius: 4px;
+}
+
+.board-section .board-list-container::-webkit-scrollbar-thumb {
+  background-color: #33363B; /* Scrollbar thumb color */
+  border-radius: 4px;
+}
+
+.board-section .board-list-container::-webkit-scrollbar-track {
+  background-color: #25282D; /* Scrollbar track color */
+}
+
+
+  .board-text {
+    position: relative;
+    left: 1.1vw;
+    font-size: calc(1.4vw);
+    color: white;
+    letter-spacing: 1px;
+    }
   
   #create-board-button {
   position: relative;
@@ -31,6 +102,7 @@
   letter-spacing: 1px;
   cursor: pointer;
   outline: none;
+  display: block; /* Ensure it is visible */
   /* Center the text inside the button */
   display: flex;
   align-items: center;
@@ -250,49 +322,6 @@ border: 1.5px solid #2594E3;
   top: -1vh; /* Moves the container 1vh higher */
 }
 
-.board-button {
-  display: block;
-  z-index: 5;
-  width: 100%;
-  padding: 10px 15px;
-  margin: 4px 0;
-  background-color: transparent;
-  border: none;
-  border-radius: 4px;
-  text-align: left;
-  font-size: calc(1.3vw);
-  color: #f3f3f3;
-  cursor: pointer;
-  text-indent: 2.5vw; /* Moves text 3vw to the left */
-  margin-bottom: 1.5vh;
-  overflow: hidden; /* Hide overflow text */
-  white-space: nowrap; /* Prevent text wrapping */
-  text-overflow: ellipsis; /* Show ellipsis for overflow */
-}
-
-.board-button:hover {
-  background-color: #25282D;
-}
-
-.board-button.active {
-  background-color: #1C2B41;
-  color: #3C90E2;
-}
-
-#board-list-container::-webkit-scrollbar {
-  width: 6px; /* Optional scrollbar width */
-  border-radius: 4px;
-}
-
-#board-list-container::-webkit-scrollbar-thumb {
-  background-color: #33363B; /* Scrollbar thumb color */
-  border-radius: 4px;
-}
-
-#board-list-container::-webkit-scrollbar-track {
-  background-color: #25282D; /* Scrollbar track color */
-}
-
 #board-page {
   position: relative;
   width: 100%;
diff --git a/client/vite.config.js b/client/vite.config.js
index ea9fda9..d4254f5 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -1,20 +1,28 @@
-import {defineConfig} from 'vite';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  envDir: '../',
+  define: {
+    'process.env': {}, // To avoid issues with process usage
+  },
+  plugins: [react()],
+  envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ["existence-fatty-vic-patrick.trycloudflare.com"],
+    allowedHosts: ['scholars-survivor-joining-peripheral.trycloudflare.com'],
     proxy: {
       '/api': {
-        target: 'http://localhost:3001',
+        target: 'http://localhost:3001', // Ensure this matches your backend API URL
         changeOrigin: true,
-        secure: false,
-        ws: true,
+        secure: false, // Disable SSL verification for dev environment
+        ws: true,  // Proxy WebSocket connections
+      },
+      '/socket': {
+        target: 'wss://discord.com/api/', // Proxy Discord WebSocket API requests
+        ws: true, // Ensure WebSocket is properly proxied
       },
     },
     hmr: {
-      clientPort: 443,
+      clientPort: 5173, // Adjust this if your frontend is on a different port
     },
   },
 });
diff --git a/package-lock.json b/package-lock.json
index fc02dc3..5445875 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,8 +6,12 @@
     "": {
       "dependencies": {
         "@discord/embedded-app-sdk": "^1.9.0",
+        "cors": "^2.8.5",
         "flatpickr": "^4.6.13",
-        "pikaday": "^1.8.2"
+        "pikaday": "^1.8.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^7.1.3"
       }
     },
     "node_modules/@discord/embedded-app-sdk": {
@@ -26,6 +30,12 @@
         "zod": "^3.9.8"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.14",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
@@ -56,6 +66,28 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -74,18 +106,131 @@
       "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
       "license": "MIT"
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
       "integrity": "sha512-LO37ZnhmBVx0GvOU/caQuipEh4GN82TcWv3yHlebGDgOxbxiwwzW5Pcx2AcvpIv2WmvmSMoC492yQFNhy/l/UQ==",
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pikaday": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/pikaday/-/pikaday-1.8.2.tgz",
       "integrity": "sha512-TNtsE+34BIax3WtkB/qqu5uepV1McKYEgvL3kWzU7aqPCpMEN6rBF3AOwu4WCwAealWlBGobXny/9kJb49C1ew==",
       "license": "(0BSD OR MIT)"
     },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.1.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
@@ -99,6 +244,15 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/zod": {
       "version": "3.24.1",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
diff --git a/package.json b/package.json
index 3d65368..9fdd43e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,11 @@
 {
   "dependencies": {
     "@discord/embedded-app-sdk": "^1.9.0",
+    "cors": "^2.8.5",
     "flatpickr": "^4.6.13",
-    "pikaday": "^1.8.2"
+    "pikaday": "^1.8.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3"
   }
 }
diff --git a/server/package-lock.json b/server/package-lock.json
index a26cfd7..5340709 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -9,11 +9,19 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "cors": "^2.8.5",
         "dotenv": "^16.4.1",
         "express": "^4.21.2",
-        "node-fetch": "^3.3.2"
+        "node-fetch": "^3.3.2",
+        "react-router-dom": "^7.1.3"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -116,6 +124,19 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -569,6 +590,15 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -653,6 +683,78 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.1.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -678,6 +780,13 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/send": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
@@ -732,6 +841,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -788,6 +903,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
diff --git a/server/package.json b/server/package.json
index 8500952..f34e32f 100644
--- a/server/package.json
+++ b/server/package.json
@@ -11,8 +11,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "cors": "^2.8.5",
     "dotenv": "^16.4.1",
     "express": "^4.21.2",
-    "node-fetch": "^3.3.2"
+    "node-fetch": "^3.3.2",
+    "react-router-dom": "^7.1.3"
   }
 }
diff --git a/server/server.js b/server/server.js
index 34d1803..29ce80f 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1,41 +1,64 @@
-import express from "express";
-import dotenv from "dotenv";
-import fetch from "node-fetch";
-dotenv.config({ path: "../.env" });
+import express from 'express';
+import dotenv from 'dotenv';
+import fetch from 'node-fetch';
+import cors from 'cors';
+
+dotenv.config({ path: '../.env' });
 
 const app = express();
 const port = 3001;
 
-// Allow express to parse JSON bodies
+// Enable CORS (you can restrict it if needed)
+app.use(cors({
+  origin: 'http://localhost:5173', // Adjust this to match the URL of your frontend
+  methods: ['GET', 'POST'],
+  allowedHeaders: ['Content-Type'],
+}));
+
+// Parse JSON bodies
 app.use(express.json());
 
-app.post("/api/token", async (req, res) => {
-  
-  // Exchange the code for an access_token
-  const response = await fetch(`https://discord.com/api/oauth2/token`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    body: new URLSearchParams({
-      client_id: process.env.VITE_DISCORD_CLIENT_ID,
-      client_secret: process.env.DISCORD_CLIENT_SECRET,
-      grant_type: "authorization_code",
-      code: req.body.code,
-    }),
-  });
-
-  // Retrieve the access_token from the response
-  const resp = await response.json();
-  const { access_token } = resp
-
-  // Return the access_token to our client as { access_token: "..."}
-  console.log(resp)
-  res.send({access_token});
-});
+// Exchange authorization code for access token
+app.post('/api/token', async (req, res) => {
+  try {
+    const { code } = req.body;
+
+    if (!code) {
+      return res.status(400).send({ error: 'Code is required' });
+    }
 
-console.log(process.env)
+    // Exchange the authorization code for an access token
+    const response = await fetch(`https://discord.com/api/oauth2/token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: new URLSearchParams({
+        client_id: process.env.DISCORD_CLIENT_ID,
+        client_secret: process.env.DISCORD_CLIENT_SECRET,
+        grant_type: 'authorization_code',
+        code: code,
+        redirect_uri: process.env.REDIRECT_URI, // Ensure this matches your Discord app settings
+      }),
+    });
+
+    if (!response.ok) {
+      return res.status(500).send({ error: 'Failed to exchange code for token' });
+    }
+
+    // Get the access token from the response
+    const data = await response.json();
+    const { access_token } = data;
+
+    // Send the access token back to the frontend
+    res.send({ access_token });
+  } catch (error) {
+    console.error('Error during token exchange:', error);
+    res.status(500).send({ error: 'Internal Server Error' });
+  }
+});
 
+// Start the backend server
 app.listen(port, () => {
   console.log(`Server listening at http://localhost:${port}`);
 });

From ab240195224d9bb38888b34a26b24fe258b246c0 Mon Sep 17 00:00:00 2001
From: cj <cjcoolsuper@gmail.com>
Date: Sun, 26 Jan 2025 17:31:46 +0700
Subject: [PATCH 02/14] dont. ever. expose. the client secret. please

---
 client/App.jsx   | 7 +++----
 server/server.js | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/App.jsx b/client/App.jsx
index ae5eaa7..1516671 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -24,10 +24,9 @@ const App = () => {
     const setupDiscordSdk = async () => {
       try {
         const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
-        const discordClientSecret = import.meta.env.VITE_DISCORD_CLIENT_SECRET;
 
-        if (!discordClientId || !discordClientSecret) {
-          throw new Error('Discord Client ID or Client Secret is missing');
+        if (!discordClientId) {
+          throw new Error('Discord Client ID is missing');
         }
 
         console.log('Setting up Discord SDK...');
@@ -50,7 +49,7 @@ const App = () => {
         console.log('Authorization code received...');
 
         // Exchange authorization code for access token
-        const response = await fetch('/api/token', {
+        const response = await fetch('/.proxy/api/token', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ code }),
diff --git a/server/server.js b/server/server.js
index 29ce80f..0307282 100644
--- a/server/server.js
+++ b/server/server.js
@@ -34,7 +34,7 @@ app.post('/api/token', async (req, res) => {
         'Content-Type': 'application/x-www-form-urlencoded',
       },
       body: new URLSearchParams({
-        client_id: process.env.DISCORD_CLIENT_ID,
+        client_id: process.env.VITE_DISCORD_CLIENT_ID,
         client_secret: process.env.DISCORD_CLIENT_SECRET,
         grant_type: 'authorization_code',
         code: code,

From 87bbe8029df2ef5872518a0eed7059cc44b387bb Mon Sep 17 00:00:00 2001
From: cj <cjcoolsuper@gmail.com>
Date: Sun, 26 Jan 2025 18:01:44 +0700
Subject: [PATCH 03/14] token-working-double-tunnel

---
 README.md             |  9 +++++++--
 client/App.jsx        |  2 +-
 client/vite.config.js |  2 +-
 server/server.js      | 12 ++++++++++--
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 4390707..261e612 100644
--- a/README.md
+++ b/README.md
@@ -4,5 +4,10 @@ This template is used in the [Building An Activity](https://discord.com/develope
 
 Read more about building Discord Activities with the Embedded App SDK at [https://discord.com/developers/docs/activities/overview](https://discord.com/developers/docs/activities/overview).
 
-# web-app
-# web-app
+# installation
+WIP
+
+run
+npm run dev in ./server and ./client
+cloudflared tunnel --url http://localhost:5173
+then fix the discord app and vite.config.js
diff --git a/client/App.jsx b/client/App.jsx
index 1516671..057a96e 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -49,7 +49,7 @@ const App = () => {
         console.log('Authorization code received...');
 
         // Exchange authorization code for access token
-        const response = await fetch('/.proxy/api/token', {
+        const response = await fetch('/.proxy/token/token', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ code }),
diff --git a/client/vite.config.js b/client/vite.config.js
index d4254f5..15abd57 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [react()],
   envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ['scholars-survivor-joining-peripheral.trycloudflare.com'],
+    allowedHosts: ['lbs-field-barriers-grenada.trycloudflare.com'],
     proxy: {
       '/api': {
         target: 'http://localhost:3001', // Ensure this matches your backend API URL
diff --git a/server/server.js b/server/server.js
index 0307282..c45bfd4 100644
--- a/server/server.js
+++ b/server/server.js
@@ -19,7 +19,7 @@ app.use(cors({
 app.use(express.json());
 
 // Exchange authorization code for access token
-app.post('/api/token', async (req, res) => {
+app.post('/token', async (req, res) => {
   try {
     const { code } = req.body;
 
@@ -38,11 +38,19 @@ app.post('/api/token', async (req, res) => {
         client_secret: process.env.DISCORD_CLIENT_SECRET,
         grant_type: 'authorization_code',
         code: code,
-        redirect_uri: process.env.REDIRECT_URI, // Ensure this matches your Discord app settings
       }),
     });
 
     if (!response.ok) {
+      console.log(response)
+      console.log(
+        {
+          client_id: process.env.VITE_DISCORD_CLIENT_ID,
+          client_secret: process.env.DISCORD_CLIENT_SECRET,
+          grant_type: 'authorization_code',
+          code: code
+        }
+      )
       return res.status(500).send({ error: 'Failed to exchange code for token' });
     }
 

From a0a6992d42f0f2dc4f8bd007fb2b1cb24f2be75f Mon Sep 17 00:00:00 2001
From: cj <cjcoolsuper@gmail.com>
Date: Sun, 26 Jan 2025 18:09:09 +0700
Subject: [PATCH 04/14] fixed even more, now to fix render..

---
 client/index.html | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/client/index.html b/client/index.html
index 5948f75..320bc32 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,19 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="
-  default-src 'self';
-  connect-src 'self' 
-    wss://1322956099464462358.discordsays.com/.proxy/ 
-    wss://discord.com/api/ 
-    wss://canary.discord.com/api/ 
-    wss://ptb.discord.com/api/ 
-    https://cdn.discordapp.com/ 
-    https://discordapp.com/ 
-    https://media.discordapp.net/ 
-    data: 
-    blob:;
-">
   </head>
   <body>
     <div id="root"></div>

From 3f9cb53feb8589b6ea1e691abef2edff4110caec Mon Sep 17 00:00:00 2001
From: cj <cjcoolsuper@gmail.com>
Date: Sun, 26 Jan 2025 18:57:32 +0700
Subject: [PATCH 05/14] minimally working routing system to quell the error

---
 client/index.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/index.jsx b/client/index.jsx
index 6639d64..054820b 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';  // Correct import for React 18+
 import App from './App';
+import { MemoryRouter ,Routes ,Route} from 'react-router-dom';
 import './index.css';
 
 const root = document.getElementById('root');
 const rootElement = ReactDOM.createRoot(root);  // Use the correct method
 rootElement.render(
   <React.StrictMode>
-    <App />
+    <MemoryRouter>
+      
+      <Routes>
+        <Route path="/" element={<App />} /> 
+      </Routes>
+    </MemoryRouter>
   </React.StrictMode>
 );

From 3c893e97f116464789c6f10ae6ccd1413fbe568d Mon Sep 17 00:00:00 2001
From: cj <cjcoolsuper@gmail.com>
Date: Sun, 26 Jan 2025 18:59:51 +0700
Subject: [PATCH 06/14] deprecated server, moved its api to main server

---
 client/App.jsx           |   2 +-
 server/package-lock.json | 957 ---------------------------------------
 server/package.json      |  20 -
 server/server.js         |  72 ---
 4 files changed, 1 insertion(+), 1050 deletions(-)
 delete mode 100644 server/package-lock.json
 delete mode 100644 server/package.json
 delete mode 100644 server/server.js

diff --git a/client/App.jsx b/client/App.jsx
index 057a96e..382b549 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -49,7 +49,7 @@ const App = () => {
         console.log('Authorization code received...');
 
         // Exchange authorization code for access token
-        const response = await fetch('/.proxy/token/token', {
+        const response = await fetch('/.proxy/api/api/v1/token', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ code }),
diff --git a/server/package-lock.json b/server/package-lock.json
deleted file mode 100644
index 5340709..0000000
--- a/server/package-lock.json
+++ /dev/null
@@ -1,957 +0,0 @@
-{
-  "name": "getting-starter-activity-server",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "getting-starter-activity-server",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "cors": "^2.8.5",
-        "dotenv": "^16.4.1",
-        "express": "^4.21.2",
-        "node-fetch": "^3.3.2",
-        "react-router-dom": "^7.1.3"
-      }
-    },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-      "license": "MIT"
-    },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
-    },
-    "node_modules/body-parser": {
-      "version": "1.20.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.13.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-    },
-    "node_modules/cors": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
-      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4",
-        "vary": "^1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "16.4.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.1.tgz",
-      "integrity": "sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/motdotla/dotenv?sponsor=1"
-      }
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
-    },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/express": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
-      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.3",
-        "content-disposition": "0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "0.7.1",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.3.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.3",
-        "methods": "~1.1.2",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.12",
-        "proxy-addr": "~2.0.7",
-        "qs": "6.13.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "0.19.0",
-        "serve-static": "1.16.2",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
-      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "license": "MIT",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
-    "node_modules/node-fetch": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
-      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
-      "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/path-to-regexp": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
-      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
-      "license": "MIT"
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/react": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
-      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
-      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "scheduler": "^0.25.0"
-      },
-      "peerDependencies": {
-        "react": "^19.0.0"
-      }
-    },
-    "node_modules/react-router": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
-      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/cookie": "^0.6.0",
-        "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0",
-        "turbo-stream": "2.4.0"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
-      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
-      "license": "MIT",
-      "dependencies": {
-        "react-router": "7.1.3"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/react-router/node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
-    },
-    "node_modules/scheduler": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
-      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/send": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/serve-static": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
-      "license": "MIT",
-      "dependencies": {
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.19.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/set-cookie-parser": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
-      "license": "MIT"
-    },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "license": "MIT",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-    },
-    "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/turbo-stream": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
-      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
-      "license": "ISC"
-    },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.2.tgz",
-      "integrity": "sha512-3pRGuxRF5gpuZc0W+EpwQRmCD7gRqcDOMt688KmdlDAgAyaB1XlN0zq2njfDNm44XVdIouE7pZ6GzbdyH47uIQ==",
-      "engines": {
-        "node": ">= 8"
-      }
-    }
-  }
-}
diff --git a/server/package.json b/server/package.json
deleted file mode 100644
index f34e32f..0000000
--- a/server/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "getting-starter-activity-server",
-  "version": "1.0.0",
-  "description": "",
-  "main": "server.js",
-  "type": "module",
-  "scripts": {
-    "dev": "npm start"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "cors": "^2.8.5",
-    "dotenv": "^16.4.1",
-    "express": "^4.21.2",
-    "node-fetch": "^3.3.2",
-    "react-router-dom": "^7.1.3"
-  }
-}
diff --git a/server/server.js b/server/server.js
deleted file mode 100644
index c45bfd4..0000000
--- a/server/server.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import express from 'express';
-import dotenv from 'dotenv';
-import fetch from 'node-fetch';
-import cors from 'cors';
-
-dotenv.config({ path: '../.env' });
-
-const app = express();
-const port = 3001;
-
-// Enable CORS (you can restrict it if needed)
-app.use(cors({
-  origin: 'http://localhost:5173', // Adjust this to match the URL of your frontend
-  methods: ['GET', 'POST'],
-  allowedHeaders: ['Content-Type'],
-}));
-
-// Parse JSON bodies
-app.use(express.json());
-
-// Exchange authorization code for access token
-app.post('/token', async (req, res) => {
-  try {
-    const { code } = req.body;
-
-    if (!code) {
-      return res.status(400).send({ error: 'Code is required' });
-    }
-
-    // Exchange the authorization code for an access token
-    const response = await fetch(`https://discord.com/api/oauth2/token`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        client_id: process.env.VITE_DISCORD_CLIENT_ID,
-        client_secret: process.env.DISCORD_CLIENT_SECRET,
-        grant_type: 'authorization_code',
-        code: code,
-      }),
-    });
-
-    if (!response.ok) {
-      console.log(response)
-      console.log(
-        {
-          client_id: process.env.VITE_DISCORD_CLIENT_ID,
-          client_secret: process.env.DISCORD_CLIENT_SECRET,
-          grant_type: 'authorization_code',
-          code: code
-        }
-      )
-      return res.status(500).send({ error: 'Failed to exchange code for token' });
-    }
-
-    // Get the access token from the response
-    const data = await response.json();
-    const { access_token } = data;
-
-    // Send the access token back to the frontend
-    res.send({ access_token });
-  } catch (error) {
-    console.error('Error during token exchange:', error);
-    res.status(500).send({ error: 'Internal Server Error' });
-  }
-});
-
-// Start the backend server
-app.listen(port, () => {
-  console.log(`Server listening at http://localhost:${port}`);
-});

From 70b0f585c2cfa3ba0517a759581de403420ef926 Mon Sep 17 00:00:00 2001
From: cj <cjcoolsuper@gmail.com>
Date: Sun, 26 Jan 2025 19:15:56 +0700
Subject: [PATCH 07/14] more "proper" router

---
 client/App.jsx                      | 142 +++-------------------------
 client/components/pages/Project.jsx | 130 +++++++++++++++++++++++++
 client/index.jsx                    |   7 +-
 3 files changed, 145 insertions(+), 134 deletions(-)
 create mode 100644 client/components/pages/Project.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 382b549..465ccc8 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -1,132 +1,18 @@
-import React, { useState, useEffect } from 'react';
-import { DiscordSDK } from '@discord/embedded-app-sdk';
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import AppProject from './components/pages/Project';
 import './styles/sidebar.css';
 import './index.css';
-import Interface from './components/Interface.jsx';
-import Calendar from './components/Calendar.jsx';
-import Task from './components/Task.jsx';
-import Board from './components/Board.jsx';
-import SettingsPopup from './components/Settings.jsx';
-import ProjectPopup from './components/ProjectPopup.jsx';
-import ConfirmationPopup from './components/ConfirmationPopup.jsx';
-import TaskLabel from './components/TaskLabel.jsx';
-import BoardProject from './components/BoardProject.jsx';
-import List from './components/List.jsx';
-import Member from './components/Member.jsx';
-
-const App = () => {
-  const [discordSdk, setDiscordSdk] = useState(null);
-  const [user, setUser] = useState(null);
-  const [isConfirmationVisible, setIsConfirmationVisible] = useState(false);
-  const [labelPopupVisible, setLabelPopupVisible] = useState(false);
-
-  useEffect(() => {
-    const setupDiscordSdk = async () => {
-      try {
-        const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
-
-        if (!discordClientId) {
-          throw new Error('Discord Client ID is missing');
-        }
-
-        console.log('Setting up Discord SDK...');
-
-        // Initialize Discord SDK
-        const sdk = new DiscordSDK(discordClientId);
-        await sdk.ready();
-
-        console.log('Discord SDK Ready...');
-
-        // Authorize with Discord OAuth
-        const { code } = await sdk.commands.authorize({
-          client_id: discordClientId,
-          response_type: 'code',
-          state: '',
-          prompt: 'none',
-          scope: ['identify', 'guilds', 'applications.commands'],
-        });
-
-        console.log('Authorization code received...');
-
-        // Exchange authorization code for access token
-        const response = await fetch('/.proxy/api/api/v1/token', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ code }),
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch access token');
-        }
-
-        const { access_token } = await response.json();
-        console.log('Access Token received...');
-
-        // Authenticate with Discord SDK using the access token
-        await sdk.commands.authenticate({ access_token });
-
-        console.log('Authentication successful...');
-
-        // Fetch the user profile
-        const userProfile = await fetchUserProfile(access_token);
-        console.log('User Profile:', userProfile);
-
-        setUser({
-          username: userProfile.username,
-          avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
-        });
-
-        setDiscordSdk(sdk);
-      } catch (error) {
-        console.error('Error setting up Discord SDK:', error);
-      }
-    };
-
-    const fetchUserProfile = async (token) => {
-      const response = await fetch('https://discord.com/api/users/@me', {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      if (!response.ok) {
-        throw new Error('Failed to fetch user profile');
-      }
-      return await response.json();
-    };
-
-    setupDiscordSdk();
-  }, []);
-
-  const handleConfirmation = () => {
-    setIsConfirmationVisible(false);
-  };
-
-  if (!user) {
-    console.log('User data is still loading...');
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div id="app">
-      <Interface user={user} />
-      <Calendar />
-      <Task />
-      <Board />
-      <SettingsPopup />
-      <ProjectPopup />
-      <ConfirmationPopup
-        isVisible={isConfirmationVisible}
-        onConfirm={handleConfirmation}
-        onCancel={() => setIsConfirmationVisible(false)}
-      />
-      <TaskLabel
-        isVisible={labelPopupVisible}
-        onLabelSelect={(label) => console.log('Selected label:', label)}
-        onClose={() => setLabelPopupVisible(false)}
-      />
-      <BoardProject />
-      <List />
-      <Member members={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />
+// Example components for different routes
+
+const App = () => (
+  <MemoryRouter>
+    <div>
+      <Routes>
+        <Route path="/" element={<AppProject />} />
+      </Routes>
     </div>
-  );
-};
+  </MemoryRouter>
+);
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/client/components/pages/Project.jsx b/client/components/pages/Project.jsx
new file mode 100644
index 0000000..bdf7d66
--- /dev/null
+++ b/client/components/pages/Project.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { DiscordSDK } from '@discord/embedded-app-sdk';
+import Interface from '../Interface.jsx';
+import Calendar from '../Calendar.jsx';
+import Task from '../Task.jsx';
+import Board from '../Board.jsx';
+import SettingsPopup from '../Settings.jsx';
+import ProjectPopup from '../ProjectPopup.jsx';
+import ConfirmationPopup from '../ConfirmationPopup.jsx';
+import TaskLabel from '../TaskLabel.jsx';
+import BoardProject from '../BoardProject.jsx';
+import List from '../List.jsx';
+import Member from '../Member.jsx';
+
+const Project = () => {
+  const [discordSdk, setDiscordSdk] = useState(null);
+  const [user, setUser] = useState(null);
+  const [isConfirmationVisible, setIsConfirmationVisible] = useState(false);
+  const [labelPopupVisible, setLabelPopupVisible] = useState(false);
+
+  useEffect(() => {
+    const setupDiscordSdk = async () => {
+      try {
+        const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
+
+        if (!discordClientId) {
+          throw new Error('Discord Client ID is missing');
+        }
+
+        console.log('Setting up Discord SDK...');
+
+        // Initialize Discord SDK
+        const sdk = new DiscordSDK(discordClientId);
+        await sdk.ready();
+
+        console.log('Discord SDK Ready...');
+
+        // Authorize with Discord OAuth
+        const { code } = await sdk.commands.authorize({
+          client_id: discordClientId,
+          response_type: 'code',
+          state: '',
+          prompt: 'none',
+          scope: ['identify', 'guilds', 'applications.commands'],
+        });
+
+        console.log('Authorization code received...');
+
+        // Exchange authorization code for access token
+        const response = await fetch('/.proxy/api/api/v1/token', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch access token');
+        }
+
+        const { access_token } = await response.json();
+        console.log('Access Token received...');
+
+        // Authenticate with Discord SDK using the access token
+        await sdk.commands.authenticate({ access_token });
+
+        console.log('Authentication successful...');
+
+        // Fetch the user profile
+        const userProfile = await fetchUserProfile(access_token);
+        console.log('User Profile:', userProfile);
+
+        setUser({
+          username: userProfile.username,
+          avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
+        });
+
+        setDiscordSdk(sdk);
+      } catch (error) {
+        console.error('Error setting up Discord SDK:', error);
+      }
+    };
+
+    const fetchUserProfile = async (token) => {
+      const response = await fetch('https://discord.com/api/users/@me', {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch user profile');
+      }
+      return await response.json();
+    };
+
+    setupDiscordSdk();
+  }, []);
+
+  const handleConfirmation = () => {
+    setIsConfirmationVisible(false);
+  };
+
+  if (!user) {
+    console.log('User data is still loading...');
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div id="app">
+      <Interface user={user} />
+      <Calendar />
+      <Task />
+      <Board />
+      <SettingsPopup />
+      <ProjectPopup />
+      <ConfirmationPopup
+        isVisible={isConfirmationVisible}
+        onConfirm={handleConfirmation}
+        onCancel={() => setIsConfirmationVisible(false)}
+      />
+      <TaskLabel
+        isVisible={labelPopupVisible}
+        onLabelSelect={(label) => console.log('Selected label:', label)}
+        onClose={() => setLabelPopupVisible(false)}
+      />
+      <BoardProject />
+      <List />
+      <Member members={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />
+    </div>
+  );
+};
+
+export default Project;
diff --git a/client/index.jsx b/client/index.jsx
index 054820b..c727aed 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -8,11 +8,6 @@ const root = document.getElementById('root');
 const rootElement = ReactDOM.createRoot(root);  // Use the correct method
 rootElement.render(
   <React.StrictMode>
-    <MemoryRouter>
-      
-      <Routes>
-        <Route path="/" element={<App />} /> 
-      </Routes>
-    </MemoryRouter>
+    <App />
   </React.StrictMode>
 );

From 4d9f79d7cd5a772f720b2d81b211f5c76067f4bb Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Mon, 27 Jan 2025 04:30:33 +0700
Subject: [PATCH 08/14] Add uuid package and update component imports; modify
 sidebar structure

---
 client/components/Task.jsx => Task.jsx  |   4 +-
 client/components/Board.jsx             | 154 +++++++++++++++---------
 client/components/ConfirmationPopup.jsx |  20 ++-
 client/components/Interface.jsx         |   2 +-
 client/components/Sidebar.jsx           |  36 ++----
 client/components/pages/Project.jsx     |   6 +-
 client/package-lock.json                |  24 +++-
 client/package.json                     |   3 +-
 client/styles/board.css                 |  55 +++------
 client/vite.config.js                   |   8 +-
 package-lock.json                       |  24 +++-
 package.json                            |   3 +-
 12 files changed, 182 insertions(+), 157 deletions(-)
 rename client/components/Task.jsx => Task.jsx (97%)

diff --git a/client/components/Task.jsx b/Task.jsx
similarity index 97%
rename from client/components/Task.jsx
rename to Task.jsx
index 4b1909d..3fbcfea 100644
--- a/client/components/Task.jsx
+++ b/Task.jsx
@@ -1,7 +1,7 @@
 // Task.js (React Component)
 import React, { useState } from 'react';
-import TaskLabel from './TaskLabel';
-import Member from './Member';
+import TaskLabel from './client/components/TaskLabel';
+import Member from './client/components/Member';
 import '/styles/popup.css';
 import '/styles/task.css';
 
diff --git a/client/components/Board.jsx b/client/components/Board.jsx
index 26799b4..13c523b 100644
--- a/client/components/Board.jsx
+++ b/client/components/Board.jsx
@@ -1,57 +1,78 @@
-import React, { useState } from "react";
-import ConfirmationPopup from "./ConfirmationPopup.jsx";
-import '/styles/board.css';
-
-const Board = () => {
-  const [boards, setBoards] = useState([]);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const [confirmationVisible, setConfirmationVisible] = useState(false);
-  const [newBoard, setNewBoard] = useState({ name: "", description: "" });
-  const [activeBoard, setActiveBoard] = useState(null);
-
-  const handleCreateBoard = () => {
-    const trimmedName = newBoard.name.trim();
-    if (trimmedName === "") {
-      alert("Board name cannot be empty.");
-      return;
-    }
+// Board.jsx
+import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import '/styles/board.css'; 
+import ConfirmationPopup from './ConfirmationPopup'; 
 
-    const newBoardData = {
-      id: crypto.randomUUID(), // Use UUID for unique IDs
-      name: trimmedName,
-      description: newBoard.description.trim(),
-    };
+export function Board() {
+  // State management
+  const [boards, setBoards] = useState([]); // State to store boards
+  const [popupVisible, setPopupVisible] = useState(false); // State to control popup visibility
+  const [confirmationVisible, setConfirmationVisible] = useState(false); // State for confirmation popup
+  const [newBoard, setNewBoard] = useState({ name: '', description: '' }); // State for new board input
+  const [activeBoard, setActiveBoard] = useState(null); // State to store the currently selected active board
 
-    setBoards([...boards, newBoardData]);
+  // Function to reset and hide the popup overlay
+  const resetPopupOverlay = () => {
     setPopupVisible(false);
-    setNewBoard({ name: "", description: "" });
+    setNewBoard({ name: '', description: '' }); // Reset the input fields
+  };
+
+  // Function to create a new board
+  const createBoard = (event) => {
+    event.preventDefault(); 
+    const boardName = newBoard.name.trim();
+    const boardDescription = newBoard.description.trim();
+
+    if (boardName) {
+      const newBoardData = {
+        id: uuidv4(),
+        name: boardName,
+        description: boardDescription,
+      };
+
+      setBoards((prevBoards) => [...prevBoards, newBoardData]);
+      resetPopupOverlay(); // Close the popup and reset inputs
+    } else {
+      alert('Please enter a board name.');
+    }
   };
 
+  // Function to handle board selection
   const handleSelectBoard = (board) => {
     setActiveBoard(board);
   };
 
+  // Function to handle deletion of the active board
   const handleDeleteBoard = () => {
     if (activeBoard) {
-      setBoards(boards.filter((board) => board.id !== activeBoard.id));
+      setBoards((prevBoards) => prevBoards.filter((board) => board.id !== activeBoard.id));
       setActiveBoard(null);
     }
-    setConfirmationVisible(false);
+    setConfirmationVisible(false); // Close the confirmation popup
+    resetPopupOverlay(); // Close the board popup and reset the input fields
+  };
+
+  // Function to show the confirmation popup
+  const handleShowConfirmation = () => {
+    setConfirmationVisible(true);
   };
 
   return (
-    <div className="board-container">
-      {/* Header Section */}
-      <div className="board-header">
-        <button onClick={() => setPopupVisible(true)}>+ Create New Board</button>
+    <div className="board-section" id="board-section">
+      <span className="board-text" id="board-text">Boards</span>
+
+      <div id="create-board-container">
+        <button id="create-board-button" onClick={() => setPopupVisible(true)}>
+          + Create New Board
+        </button>
       </div>
 
-      {/* Board List Section */}
-      <div className="board-list">
+      <div id="board-list-container">
         {boards.map((board) => (
           <button
             key={board.id}
-            className={`board-button ${activeBoard?.id === board.id ? "active" : ""}`}
+            className={`board-button ${activeBoard && activeBoard.id === board.id ? 'active' : ''}`}
             onClick={() => handleSelectBoard(board)}
           >
             {board.name}
@@ -59,49 +80,72 @@ const Board = () => {
         ))}
       </div>
 
-      {/* Popup for Creating Board */}
+      {/* Board Popup */}
       {popupVisible && (
-        <div className="popup-overlay">
-          <div className="popup-content">
-            <h3>Create New Board</h3>
-            <input
-              type="text"
-              placeholder="Board Name"
-              value={newBoard.name}
-              onChange={(e) => setNewBoard({ ...newBoard, name: e.target.value })}
-            />
-            <textarea
-              placeholder="Board Description (Optional)"
-              value={newBoard.description}
-              onChange={(e) => setNewBoard({ ...newBoard, description: e.target.value })}
-            />
+        <div className="popup-overlay" id="popup-overlay" onClick={handleShowConfirmation}>
+          <div className="popup-content" id="popup-content" onClick={(e) => e.stopPropagation()}>
+            <button className="close-popup-button" id="close-popup-button" onClick={handleShowConfirmation}>
+              &times;
+            </button>
+
+            <div className="header-title" id="header-title">Create New Board</div>
+
+            <div className="input-wrapper">
+              <label htmlFor="board-name" className="popup-label">Board Name</label>
+              <input
+                className="popup-input"
+                id="board-name"
+                type="text"
+                placeholder="Enter Board Name"
+                value={newBoard.name}
+                onChange={(e) => setNewBoard({ ...newBoard, name: e.target.value })}
+              />
+            </div>
+
+            <div className="input-wrapper">
+              <label htmlFor="board-description" className="popup-label">Board Description</label>
+              <textarea
+                className="popup-textarea"
+                id="board-description"
+                placeholder="Enter Board Description (Optional)"
+                value={newBoard.description}
+                onChange={(e) => setNewBoard({ ...newBoard, description: e.target.value })}
+              />
+            </div>
+
             <div className="popup-buttons">
-              <button onClick={handleCreateBoard}>Create</button>
-              <button onClick={() => setPopupVisible(false)}>Cancel</button>
+              <button className="cancel-button" id="cancel-button" onClick={handleShowConfirmation}>
+                Cancel
+              </button>
+              <button className="create-board-button-form" id="create-board-button-form" onClick={createBoard}>
+                Create Board
+              </button>
             </div>
           </div>
         </div>
       )}
 
-      {/* Confirmation Popup for Deleting Board */}
+      {/* Confirmation Popup */}
       {confirmationVisible && (
         <ConfirmationPopup
           message="Are you sure you want to delete this board?"
+          subMessage="This action cannot be undone."
           onConfirm={handleDeleteBoard}
-          onCancel={() => setConfirmationVisible(false)}
+          onCancel={() => setConfirmationVisible(false)} // Close only confirmation popup
+          isVisible={confirmationVisible}
         />
       )}
 
       {/* Active Board Details Section */}
       {activeBoard && (
         <div className="board-details">
-          <h2>{activeBoard.name}</h2>
-          <p>{activeBoard.description || "No description available."}</p>
+          <h2 id="board-topic">{activeBoard.name}</h2>
+          <p id="board-topic-description">{activeBoard.description || 'No description available.'}</p>
           <button onClick={() => setConfirmationVisible(true)}>Delete Board</button>
         </div>
       )}
     </div>
   );
-};
+}
 
 export default Board;
diff --git a/client/components/ConfirmationPopup.jsx b/client/components/ConfirmationPopup.jsx
index 24620a9..f1a9dfc 100644
--- a/client/components/ConfirmationPopup.jsx
+++ b/client/components/ConfirmationPopup.jsx
@@ -1,11 +1,7 @@
-// ConfirmationPopup.js (React Component)
 import React from 'react';
-import '/styles/confirmation.css';
-
+import '/styles/confirmation.css'; // Ensure this path is correct for your CSS
 
 const ConfirmationPopup = ({
-  message = "Are you sure?",
-  subMessage = "This action cannot be undone.",
   onConfirm,
   onCancel,
   isVisible,
@@ -13,16 +9,16 @@ const ConfirmationPopup = ({
   if (!isVisible) return null;
 
   return (
-    <div className="confirmation-popup-overlay">
-      <div className="confirmation-popup">
-        <h3>{message}</h3>
-        <p>{subMessage}</p>
+    <div id="confirmation-popup" className="confirmation-popup-overlay">
+      <div id="confirmation-content" className="confirmation-popup">
+        <h3>Discard changes?</h3>
+        <p>If you go back now, you will lose any changes you’ve made.</p>
         <div className="confirmation-buttons">
-          <button className="cancel-button" onClick={onCancel} aria-label="Cancel action">
+          <button id="cancel-discard-button" className="cancel-button" onClick={onCancel} aria-label="Cancel action">
             Cancel
           </button>
-          <button className="confirm-button" onClick={onConfirm} aria-label="Confirm action">
-            Confirm
+          <button id="discard-button" className="confirm-button" onClick={onConfirm} aria-label="Confirm action">
+            Discard
           </button>
         </div>
       </div>
diff --git a/client/components/Interface.jsx b/client/components/Interface.jsx
index 5a98530..d916f60 100644
--- a/client/components/Interface.jsx
+++ b/client/components/Interface.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Board from './Board';
 import Calendar from './Calendar';
-import Task from './Task';
+import Task from '../../Task';
 import SettingsPopup from './Settings';
 import ProjectPopup from './ProjectPopup';
 import ConfirmationPopup from './ConfirmationPopup';
diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx
index 47acb18..b64049b 100644
--- a/client/components/Sidebar.jsx
+++ b/client/components/Sidebar.jsx
@@ -1,48 +1,26 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';  // Optional if using React Router for navigation
+import { Link } from 'react-router-dom'; // Optional if using React Router for navigation
 import '/styles/sidebar.css';
 
 const Sidebar = ({ user }) => {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true); // Track sidebar visibility
-
-  const toggleSidebar = () => {
-    setIsSidebarOpen(!isSidebarOpen);
-  };
-
+  
   return (
-    <div className={`sidebar ${isSidebarOpen ? 'open' : 'closed'}`}>
-      {/* Sidebar Toggle Button */}
-      <button className="sidebar-toggle" onClick={toggleSidebar}>
-        {isSidebarOpen ? 'Close Sidebar' : 'Open Sidebar'}
-      </button>
+    <div id="sidebar">
 
       {/* Sidebar Content */}
       <div className="sidebar-content">
         {/* User Profile */}
-        <div className="user-profile">
+        <div id="userbox">
           <img
             src={user.avatarUrl}
-            alt={user.username}
-            className="user-avatar"
+            alt="Profile Picture"
+            id="profile-pic"
           />
-          <h3 className="user-name">{user.username}</h3>
+          <span id="username">{user.username}</span>
         </div>
-
-        {/* Navigation Links */}
-        <nav className="sidebar-nav">
-          <ul>
-            <li><Link to="/dashboard">Dashboard</Link></li>
-            <li><Link to="/projects">Projects</Link></li>
-            <li><Link to="/tasks">Tasks</Link></li>
-            <li><Link to="/settings">Settings</Link></li>
-          </ul>
-        </nav>
       </div>
 
       {/* Optional: Footer or additional content */}
-      <div className="sidebar-footer">
-        <p>Planify App</p>
-      </div>
     </div>
   );
 };
diff --git a/client/components/pages/Project.jsx b/client/components/pages/Project.jsx
index bdf7d66..8cb0ebb 100644
--- a/client/components/pages/Project.jsx
+++ b/client/components/pages/Project.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { DiscordSDK } from '@discord/embedded-app-sdk';
 import Interface from '../Interface.jsx';
 import Calendar from '../Calendar.jsx';
-import Task from '../Task.jsx';
+import Task from '../../../Task.jsx';
 import Board from '../Board.jsx';
 import SettingsPopup from '../Settings.jsx';
 import ProjectPopup from '../ProjectPopup.jsx';
@@ -11,6 +11,8 @@ import TaskLabel from '../TaskLabel.jsx';
 import BoardProject from '../BoardProject.jsx';
 import List from '../List.jsx';
 import Member from '../Member.jsx';
+import '/styles/sidebar.css';
+
 
 const Project = () => {
   const [discordSdk, setDiscordSdk] = useState(null);
@@ -47,7 +49,7 @@ const Project = () => {
         console.log('Authorization code received...');
 
         // Exchange authorization code for access token
-        const response = await fetch('/.proxy/api/api/v1/token', {
+        const response = await fetch('/.proxy/api/v1/token', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ code }),
diff --git a/client/package-lock.json b/client/package-lock.json
index 18c2376..b4d959c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,7 +12,8 @@
         "crypto": "^1.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^7.1.3"
+        "react-router-dom": "^7.1.3",
+        "uuid": "^11.0.5"
       },
       "devDependencies": {
         "@vitejs/plugin-react": "^4.3.4",
@@ -321,6 +322,19 @@
         "zod": "^3.9.8"
       }
     },
+    "node_modules/@discord/embedded-app-sdk/node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
@@ -1689,16 +1703,16 @@
       }
     },
     "node_modules/uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
+      "integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
       ],
       "license": "MIT",
       "bin": {
-        "uuid": "dist/bin/uuid"
+        "uuid": "dist/esm/bin/uuid"
       }
     },
     "node_modules/vite": {
diff --git a/client/package.json b/client/package.json
index 3a8d243..8830573 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,6 +17,7 @@
     "crypto": "^1.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3"
+    "react-router-dom": "^7.1.3",
+    "uuid": "^11.0.5"
   }
 }
diff --git a/client/styles/board.css b/client/styles/board.css
index 88208a1..61f3073 100644
--- a/client/styles/board.css
+++ b/client/styles/board.css
@@ -7,33 +7,9 @@
   height: 5vh; /* Full height of the screen */
   background-color: #1C2025;
   padding: 20px;
-  border-right: 1px solid #474E55; /* Right edge line color */
   z-index: 2;
-  display: none; /* Hidden by default */
-}
-#board-section {
-  position: fixed;
-  top: 23.3vh;
-  left: 0;
-  width: 20%; /* 1/5 of the screen width */
-  height: 5vh; /* Full height of the screen */
-  background-color: #1C2025;
-  padding: 20px;
-  border-right: 1px solid #474E55; /* Right edge line color */
-  z-index: 2;
-  display: none; /* Hidden by default */
 }
 
-.board-section.active {
-  display: block; /* Show only the active board section */
-}
-
-.board-section , #board-list-container , .board-list-container {
-  max-height: 53.5vh; /* Adjust as needed */
-  overflow-y: auto; /* Allow scrolling if content exceeds container height */
-  position: relative; /* Ensure the container's position can be adjusted */
-  top: -1vh; /* Moves the container 1vh higher */
-}
 
 /* Styling for Board Buttons */
 .board-button {
@@ -81,7 +57,7 @@
 }
 
 
-  .board-text {
+.board-text {
     position: relative;
     left: 1.1vw;
     font-size: calc(1.4vw);
@@ -137,14 +113,14 @@
   
   /* Form Labels and Inputs Spacing */
   /* Form Labels and Inputs Spacing */
-form label {
+.popup-label {
   display: block;
   margin-bottom: 15px; /* Space between label and input/textarea */
   font-size: calc(1.1vw);
   }
   
-  form input,
-  form textarea {
+  .popup-input,
+  .popup-textarea {
   width: 85%;
   padding: 10px;
   border: 1px solid #6D7276;
@@ -155,7 +131,7 @@ form label {
   }
   
   /* Fixed height for textarea */
-  form textarea {
+  .popup-textarea {
   height: 110px !important;
   resize: none; /* Prevent textarea resizing */
   margin-bottom: 25px;
@@ -216,15 +192,16 @@ form label {
   }
   
 
-  #popup-content {
+  .popup-content {
+    position: relative;
     background-color: #33363B;
-    padding: 0; /* Remove padding to align header and buttons */
+    padding: 2vh 2vw; /* Remove padding to align header and buttons */
     border-radius: 12px;
     width: 60vw !important;
-    max-height: 70vh; /* Set a maximum height */
+    max-height: 75vh; /* Set a maximum height */
     display: flex;
     flex-direction: column;
-    color: #fff;
+    box-sizing: border-box; /* Ensure padding is accounted for in the width/height calculation */
     font-family: 'Inter', sans-serif;
     overflow: hidden; /* Prevent popup overflow */  
   }
@@ -240,23 +217,27 @@ form label {
   #header-title {
     font-size: calc(1.8vw) !important;
     margin-left: 2.5vw; /* Adjust alignment */
+    margin-top: 2vh;
+    margin-bottom: 2vh;
     letter-spacing: 1px;
     color: white;
     font-weight: normal;
   }
+
+.input-wrapper {
+  margin-left: 5.5vw;
+}
   
   
   /* Close Button Styling */
-  #close-project-popup-button,
-  #close-popup-button,
-  #close-task-popup-button {
+  .close-popup-button {
   position: absolute;
   top: 2.5vh;
   right: 3.5vh;
   background: none;
   border: none;
   color: #949AA0;
-  font-size: 16px;
+  font-size: calc(1.8vw);
   cursor: pointer;
   outline: none;
   }
diff --git a/client/vite.config.js b/client/vite.config.js
index 15abd57..116952f 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -8,14 +8,8 @@ export default defineConfig({
   plugins: [react()],
   envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ['lbs-field-barriers-grenada.trycloudflare.com'],
+    allowedHosts: ['boxing-problem-prime-floor.trycloudflare.com'],
     proxy: {
-      '/api': {
-        target: 'http://localhost:3001', // Ensure this matches your backend API URL
-        changeOrigin: true,
-        secure: false, // Disable SSL verification for dev environment
-        ws: true,  // Proxy WebSocket connections
-      },
       '/socket': {
         target: 'wss://discord.com/api/', // Proxy Discord WebSocket API requests
         ws: true, // Ensure WebSocket is properly proxied
diff --git a/package-lock.json b/package-lock.json
index 5445875..b5bfd59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "pikaday": "^1.8.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^7.1.3"
+        "react-router-dom": "^7.1.3",
+        "uuid": "^11.0.5"
       }
     },
     "node_modules/@discord/embedded-app-sdk": {
@@ -30,6 +31,19 @@
         "zod": "^3.9.8"
       }
     },
+    "node_modules/@discord/embedded-app-sdk/node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -232,16 +246,16 @@
       "license": "ISC"
     },
     "node_modules/uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
+      "integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
       ],
       "license": "MIT",
       "bin": {
-        "uuid": "dist/bin/uuid"
+        "uuid": "dist/esm/bin/uuid"
       }
     },
     "node_modules/vary": {
diff --git a/package.json b/package.json
index 9fdd43e..c57fa07 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "pikaday": "^1.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3"
+    "react-router-dom": "^7.1.3",
+    "uuid": "^11.0.5"
   }
 }

From ee9a662ceb717037d6a6ea3e9d186be088a05f71 Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Wed, 29 Jan 2025 02:02:56 +0700
Subject: [PATCH 09/14] Refactor project structure: update allowedHosts in vite
 config, fix typo in SettingsPopup, implement ErrorBoundary, and create
 BoardProject component

---
 client/ErrorBoundary.jsx            |  35 ++++++
 client/components/Board.jsx         |  90 ++++++++-------
 client/components/BoardProject.jsx  | 138 +++++++++++++++++++----
 client/components/BoardProject2.jsx |  35 ++++++
 client/components/Interface.jsx     |   6 +-
 client/components/ProjectPopup.jsx  | 163 +++++++++++++++++++---------
 client/components/Settings.jsx      |   2 +-
 client/components/pages/Project.jsx |  10 +-
 client/styles/board.css             |  63 +++++------
 client/styles/project.css           |  39 +++++--
 client/styles/sidebar.css           | 126 ++++++++++++++-------
 client/vite.config.js               |   2 +-
 12 files changed, 496 insertions(+), 213 deletions(-)
 create mode 100644 client/ErrorBoundary.jsx
 create mode 100644 client/components/BoardProject2.jsx

diff --git a/client/ErrorBoundary.jsx b/client/ErrorBoundary.jsx
new file mode 100644
index 0000000..49cf56a
--- /dev/null
+++ b/client/ErrorBoundary.jsx
@@ -0,0 +1,35 @@
+// ErrorBoundary.js
+import React, { Component } from 'react';
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, errorMessage: '' };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state to display fallback UI
+    return { hasError: true, errorMessage: error.message };
+  }
+
+  componentDidCatch(error, info) {
+    // Log error information to an external service (e.g., Sentry, LogRocket)
+    console.error('Error caught by Error Boundary:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Display custom error message or fallback UI
+      return (
+        <div>
+          <h1>Something went wrong.</h1>
+          <p>{this.state.errorMessage}</p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/client/components/Board.jsx b/client/components/Board.jsx
index 13c523b..d2647c4 100644
--- a/client/components/Board.jsx
+++ b/client/components/Board.jsx
@@ -1,4 +1,3 @@
-// Board.jsx
 import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import '/styles/board.css'; 
@@ -84,40 +83,54 @@ export function Board() {
       {popupVisible && (
         <div className="popup-overlay" id="popup-overlay" onClick={handleShowConfirmation}>
           <div className="popup-content" id="popup-content" onClick={(e) => e.stopPropagation()}>
-            <button className="close-popup-button" id="close-popup-button" onClick={handleShowConfirmation}>
-              &times;
-            </button>
-
             <div className="header-title" id="header-title">Create New Board</div>
+            <button
+              className="close-popup-button"
+              id="close-popup-button"
+              onClick={handleShowConfirmation}
+            >
+              ✖
+            </button>
 
-            <div className="input-wrapper">
-              <label htmlFor="board-name" className="popup-label">Board Name</label>
-              <input
-                className="popup-input"
-                id="board-name"
-                type="text"
-                placeholder="Enter Board Name"
-                value={newBoard.name}
-                onChange={(e) => setNewBoard({ ...newBoard, name: e.target.value })}
-              />
-            </div>
-
-            <div className="input-wrapper">
-              <label htmlFor="board-description" className="popup-label">Board Description</label>
-              <textarea
-                className="popup-textarea"
-                id="board-description"
-                placeholder="Enter Board Description (Optional)"
-                value={newBoard.description}
-                onChange={(e) => setNewBoard({ ...newBoard, description: e.target.value })}
-              />
+            {/* Scrollable body */}
+            <div className="popup-body">
+              <div className="input-wrapper">
+                <label htmlFor="board-name" className="popup-label">Board Name</label>
+                <input
+                  className="popup-input"
+                  id="board-name"
+                  type="text"
+                  placeholder="Enter Board Name"
+                  value={newBoard.name}
+                  onChange={(e) => setNewBoard({ ...newBoard, name: e.target.value })}
+                />
+              </div>
+
+              <div className="input-wrapper">
+                <label htmlFor="board-description" className="popup-label">Board Description</label>
+                <textarea
+                  className="popup-textarea"
+                  id="board-description"
+                  placeholder="Enter Board Description (Optional)"
+                  value={newBoard.description}
+                  onChange={(e) => setNewBoard({ ...newBoard, description: e.target.value })}
+                />
+              </div>
             </div>
 
-            <div className="popup-buttons">
-              <button className="cancel-button" id="cancel-button" onClick={handleShowConfirmation}>
+            <div className="popup-buttons" id="popup-buttons">
+              <button
+                className="cancel-button"
+                id="cancel-button"
+                onClick={handleShowConfirmation}
+              >
                 Cancel
               </button>
-              <button className="create-board-button-form" id="create-board-button-form" onClick={createBoard}>
+              <button
+                className="create-board-button-form"
+                id="create-board-button-form"
+                onClick={createBoard}
+              >
                 Create Board
               </button>
             </div>
@@ -128,24 +141,17 @@ export function Board() {
       {/* Confirmation Popup */}
       {confirmationVisible && (
         <ConfirmationPopup
-          message="Are you sure you want to delete this board?"
-          subMessage="This action cannot be undone."
-          onConfirm={handleDeleteBoard}
-          onCancel={() => setConfirmationVisible(false)} // Close only confirmation popup
           isVisible={confirmationVisible}
+          onConfirm={() => {
+            setConfirmationVisible(false); // Close the confirmation popup
+            resetPopupOverlay(); // Close the board popup and reset inputs
+          }}
+          onCancel={() => setConfirmationVisible(false)} // Just close the confirmation popup
         />
       )}
-
-      {/* Active Board Details Section */}
-      {activeBoard && (
-        <div className="board-details">
-          <h2 id="board-topic">{activeBoard.name}</h2>
-          <p id="board-topic-description">{activeBoard.description || 'No description available.'}</p>
-          <button onClick={() => setConfirmationVisible(true)}>Delete Board</button>
-        </div>
-      )}
     </div>
   );
 }
 
 export default Board;
+  
\ No newline at end of file
diff --git a/client/components/BoardProject.jsx b/client/components/BoardProject.jsx
index be45f0a..a0e1d25 100644
--- a/client/components/BoardProject.jsx
+++ b/client/components/BoardProject.jsx
@@ -1,6 +1,6 @@
-// BoardProject.js (React Component)
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import '/styles/project.css';
+import '/styles/sidebar.css';
 
 const BoardProject = () => {
   const [projects, setProjects] = useState([]);
@@ -8,6 +8,100 @@ const BoardProject = () => {
   const [settingsVisible, setSettingsVisible] = useState(false);
   const [newProject, setNewProject] = useState({ name: '', description: '' });
 
+  const projectBoxRef = useRef(null);
+  const projectNameDisplayRef = useRef(null);
+  const projectDescriptionDisplayRef = useRef(null);
+  const projectListContainerRef = useRef(null);
+  const boardSectionRef = useRef(null);
+  const projectSectionRef = useRef(null);
+
+  const defaultProjectName = 'No Project Selected';
+  const defaultProjectDescription = 'No description available';
+
+  // Create and append the triangle symbol and project settings icon
+  useEffect(() => {
+    if (projectBoxRef.current) {
+      // Create and add the triangle symbol
+      const triangleSymbol = document.createElement('div');
+      triangleSymbol.id = 'triangle-symbol';
+      triangleSymbol.classList.add('triangle-right'); // Default direction
+      projectBoxRef.current.prepend(triangleSymbol);
+
+      // Create and add the project settings icon
+      const projectSettingsIcon = document.createElement('img');
+      projectSettingsIcon.id = 'project-settings-icon';
+      projectSettingsIcon.src = 'assets/setting.svg'; // Path to your settings.svg
+      projectSettingsIcon.alt = 'Project Settings';
+      projectSettingsIcon.classList.add('project-settings-icon');
+      projectBoxRef.current.appendChild(projectSettingsIcon);
+
+      // Create the project settings popup
+      const projectSettingsPopup = document.createElement('div');
+      projectSettingsPopup.id = 'project-settings-popup';
+      projectSettingsPopup.classList.add('hidden', 'project-settings-popup');
+      projectSettingsPopup.innerHTML = `
+        <p class="project-settings-option" id="share-project">Share Project</p>
+        <p class="project-settings-option" id="edit-project">Edit Project</p>
+        <p class="project-settings-option delete" id="delete-project">Delete Project</p>
+      `;
+      document.body.appendChild(projectSettingsPopup);
+
+      // Position the popup near the settings icon
+      const positionPopup = () => {
+        const rect = projectSettingsIcon.getBoundingClientRect();
+        projectSettingsPopup.style.top = `${rect.bottom + window.scrollY}px`;
+        projectSettingsPopup.style.left = `${rect.left + window.scrollX}px`;
+      };
+
+      // Toggle the popup visibility
+      projectSettingsIcon.addEventListener('click', (event) => {
+        event.stopPropagation(); // Prevent click propagation
+        if (projectSettingsPopup.classList.contains('hidden')) {
+          document.querySelectorAll('.project-settings-popup').forEach((popup) =>
+            popup.classList.add('hidden')
+          );
+          positionPopup();
+          projectSettingsPopup.classList.remove('hidden');
+        } else {
+          projectSettingsPopup.classList.add('hidden');
+        }
+      });
+
+      // Hide the popup when clicking outside
+      document.addEventListener('click', () => {
+        projectSettingsPopup.classList.add('hidden');
+      });
+
+      // Update dynamic line position
+      const updateDynamicLine = () => {
+        let dynamicLine = document.querySelector('.dynamic-line');
+        if (!dynamicLine) {
+          dynamicLine = document.createElement('div');
+          dynamicLine.className = 'dynamic-line';
+          if (projectSectionRef.current) {
+            projectSectionRef.current.appendChild(dynamicLine);
+          }
+        }
+
+        const lastProjectButton = projectListContainerRef.current.querySelector('.project-button:last-child');
+        if (lastProjectButton) {
+          const lastButtonRect = lastProjectButton.getBoundingClientRect();
+          const projectSectionRect = projectSectionRef.current.getBoundingClientRect();
+          const offsetVh = ((lastButtonRect.bottom - projectSectionRect.top) / window.innerHeight) * 100;
+          dynamicLine.style.top = `calc(${offsetVh}vh + 2.5vh)`; // Adjust for spacing
+          dynamicLine.style.left = '0';
+          dynamicLine.style.width = '100%';
+          dynamicLine.style.display = 'block';
+        } else {
+          dynamicLine.style.display = 'none';
+        }
+      };
+
+      // Initial dynamic line setup
+      updateDynamicLine();
+    }
+  }, []);  // Empty dependency array ensures the effect runs only once after the first render
+
   const handleCreateProject = () => {
     const trimmedName = newProject.name.trim();
     if (trimmedName === '') {
@@ -27,6 +121,8 @@ const BoardProject = () => {
 
   const handleSelectProject = (project) => {
     setActiveProject(project);
+    projectNameDisplayRef.current.textContent = project.name;
+    projectDescriptionDisplayRef.current.textContent = project.description || defaultProjectDescription;
   };
 
   const handleDeleteProject = (projectId) => {
@@ -38,23 +134,23 @@ const BoardProject = () => {
     }
   };
 
+  const toggleSettingsVisibility = () => {
+    setSettingsVisible(!settingsVisible);
+  };
+
   return (
-    <div className="project-container">
-      {/* Project Header */}
-      <div className="project-header">
-        <button onClick={() => setSettingsVisible(!settingsVisible)}>
-          Project Settings
-        </button>
+    <div id="project-container" className="clickable">
+      {/* Project Box with id and class */}
+      <div id="projectbox" ref={projectBoxRef} className="projectbox">
+        <div id="projectname" ref={projectNameDisplayRef}>Project Name</div>
+        <div id="projectdescription" ref={projectDescriptionDisplayRef}>Project Description</div>
       </div>
 
-      {/* Project List */}
-      <div className="project-list">
+      <div id="project-list-container" className="project-list" ref={projectListContainerRef}>
         {projects.map((project) => (
           <button
             key={project.id}
-            className={`project-button ${
-              activeProject?.id === project.id ? 'active' : ''
-            }`}
+            className={`project-button ${activeProject && activeProject.id === project.id ? 'active' : ''}`}
             onClick={() => handleSelectProject(project)}
           >
             {project.name}
@@ -62,20 +158,18 @@ const BoardProject = () => {
         ))}
       </div>
 
-      {/* Active Project Details */}
       {activeProject && (
-        <div className="project-details">
-          <h2>{activeProject.name}</h2>
-          <p>{activeProject.description || 'No description available.'}</p>
-          <button
-            onClick={() => handleDeleteProject(activeProject.id)}
-          >
+        <div id="project-section" className="project-details" ref={projectSectionRef}>
+          <h2 id="projectname" ref={projectNameDisplayRef}>{activeProject.name}</h2>
+          <p id="projectdescription" ref={projectDescriptionDisplayRef}>
+            {activeProject.description || 'No description available.'}
+          </p>
+          <button onClick={() => handleDeleteProject(activeProject.id)}>
             Delete Project
           </button>
         </div>
       )}
 
-      {/* Create Project Popup */}
       {settingsVisible && (
         <div className="popup-overlay">
           <div className="popup-content">
@@ -102,6 +196,8 @@ const BoardProject = () => {
           </div>
         </div>
       )}
+
+      <button onClick={toggleSettingsVisibility}>Create New Project</button>
     </div>
   );
 };
diff --git a/client/components/BoardProject2.jsx b/client/components/BoardProject2.jsx
new file mode 100644
index 0000000..bdc0a4a
--- /dev/null
+++ b/client/components/BoardProject2.jsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import '/styles/project.css';
+import '/styles/sidebar.css';
+import '/styles/board.css';
+import Board from './Board'; // Ensure it's not rendered elsewhere
+import ProjectPopup from './ProjectPopup'; // Ensure it's not rendered elsewhere
+
+const BoardProject = () => {
+  const [isBoardVisible, setIsBoardVisible] = useState(true); // True = Show Board, False = Show Project
+
+  const toggleSection = () => {
+    setIsBoardVisible((prev) => !prev);
+  };
+
+  return (
+    <div id="main-container">
+      {/* ProjectBox: Always Visible */}
+      <div id="project-container" className="clickable" onClick={toggleSection}>
+        <div id="project-box" className="projectbox">
+          <div id="project-box-name">Project Name</div>
+          <div id="project-box-description">Click to toggle between Board and Project</div>
+        </div>
+      </div>
+
+      {/* Conditionally render Board or ProjectPopup */}
+      {isBoardVisible ? (
+        <Board />
+      ) : (
+        <ProjectPopup />
+      )}
+    </div>
+  );
+};
+
+export default BoardProject;
diff --git a/client/components/Interface.jsx b/client/components/Interface.jsx
index d916f60..f5c02a4 100644
--- a/client/components/Interface.jsx
+++ b/client/components/Interface.jsx
@@ -30,16 +30,14 @@ const Interface = ({ user }) => {
 
       {/* Main Content */}
       <main className="main-content">
-        {/* Board */}
-        <Board />
-
+    
         {/* Conditional Rendering for Popup Components */}
         {showCalendar && <Calendar />}
         {showTaskPopup && <Task />}
         {showSettingsPopup && <SettingsPopup />}
         {showProjectPopup && <ProjectPopup />}
         {showConfirmationPopup && <ConfirmationPopup />}
-        {showLabelPopup && <TaskLabel />}
+        {showLabelPopup && <TaskLabel />} 
 
         {/* Task List and Member Components */}
         <List />
diff --git a/client/components/ProjectPopup.jsx b/client/components/ProjectPopup.jsx
index 04facfb..abc5c8e 100644
--- a/client/components/ProjectPopup.jsx
+++ b/client/components/ProjectPopup.jsx
@@ -1,68 +1,129 @@
-// ProjectPopup.js (React Component)
 import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import '/styles/popup.css';
+import '/styles/project.css';
+import ConfirmationPopup from './ConfirmationPopup';
 
+export function ProjectPopup() {
+  // State management
+  const [projects, setProjects] = useState([]); // State to store projects
+  const [popupVisible, setPopupVisible] = useState(false); // State to control popup visibility
+  const [confirmationVisible, setConfirmationVisible] = useState(false); // State for confirmation popup
+  const [newProject, setNewProject] = useState({ name: '', description: '' }); // State for new project input
+  const [activeProject, setActiveProject] = useState(null); // State to store the currently selected active project
 
-const ProjectPopup = ({
-  isVisible,
-  onClose,
-  onCreateProject,
-}) => {
-  const [projectName, setProjectName] = useState("");
-  const [projectDescription, setProjectDescription] = useState("");
+  // Function to reset and hide the popup overlay
+  const resetPopupOverlay = () => {
+    setPopupVisible(false);
+    setNewProject({ name: '', description: '' }); // Reset the input fields
+  };
 
-  const handleCreateProject = (event) => {
+  // Function to create a new project
+  const createProject = (event) => {
     event.preventDefault();
-    if (projectName.trim()) {
-      onCreateProject({ name: projectName, description: projectDescription });
-      setProjectName("");
-      setProjectDescription("");
-      onClose();
+    const projectName = newProject.name.trim();
+    const projectDescription = newProject.description.trim();
+
+    if (projectName) {
+      const newProjectData = {
+        id: uuidv4(),
+        name: projectName,
+        description: projectDescription,
+      };
+
+      setProjects((prevProjects) => [...prevProjects, newProjectData]);
+      resetPopupOverlay(); // Close the popup and reset inputs
     } else {
-      alert("Please enter a project name.");
+      alert('Please enter a project name.');
     }
   };
 
-  if (!isVisible) return null;
-
   return (
-    <div className="project-popup-overlay">
-      <div className="project-popup">
-        <div className="popup-header">
-          <h3>Create New Project</h3>
-          <button className="close-popup-button" onClick={onClose} aria-label="Close project creation popup">
-            ✖
+    <div className="project-section" id="project-section">
+      <div id="create-project-container">
+        <button id="create-project-button" className="create-project-button" onClick={() => setPopupVisible(true)}>
+          + Create New Project
+        </button>
+      </div>
+
+      <div id="project-list-container">
+        {projects.map((project) => (
+          <button
+            key={project.id}
+            className={`project-button ${activeProject && activeProject.id === project.id ? 'active' : ''}`}
+            onClick={() => setActiveProject(project)}
+          >
+            {project.name}
           </button>
-        </div>
-        <form onSubmit={handleCreateProject} className="popup-form">
-          <label htmlFor="project-name">Project Name</label>
-          <input
-            id="project-name"
-            type="text"
-            placeholder="Enter project name"
-            value={projectName}
-            onChange={(e) => setProjectName(e.target.value)}
-            required
-          />
-          <label htmlFor="project-description">Project Description (Optional)</label>
-          <textarea
-            id="project-description"
-            placeholder="Enter project description"
-            value={projectDescription}
-            onChange={(e) => setProjectDescription(e.target.value)}
-          />
-          <div className="popup-buttons">
-            <button type="button" className="cancel-button" onClick={onClose} aria-label="Cancel project creation">
-              Cancel
-            </button>
-            <button type="submit" className="create-button" aria-label="Create project">
-              Create Project
-            </button>
-          </div>
-        </form>
+        ))}
       </div>
+
+      {/* Project Popup Overlay */}
+      {popupVisible && (
+        <div className="project-popup-overlay" id="project-popup-overlay">
+          <div className="project-popup" id="project-popup">
+            <div className="popup-header" id="popup-header">
+              <div className="header-title" id="header-title">Create New Project</div>
+              <button className="close-popup-button" onClick={() => setPopupVisible(false)} aria-label="Close project creation popup">
+                ✖
+              </button>
+            </div>
+            <div className="input-wrapper">
+              <label htmlFor="project-name" className="popup-label">Project Name</label>
+              <input
+                className="popup-input"
+                id="project-name"
+                type="text"
+                placeholder="Enter project name"
+                value={newProject.name}
+                onChange={(e) => setNewProject({ ...newProject, name: e.target.value })}
+                required
+              />
+            </div>
+
+            <div className="input-wrapper">
+              <label htmlFor="project-description" className="popup-label">Project Description (Optional)</label>
+              <textarea
+                className="popup-textarea"
+                id="project-description"
+                placeholder="Enter project description"
+                value={newProject.description}
+                onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}
+              />
+              <div className="popup-buttons">
+                <button type="button" className="cancel-button" id="cancel-button" onClick={() => setPopupVisible(false)} aria-label="Cancel project creation">
+                  Cancel
+                </button>
+                <button type="submit" className="create-project-button-form" id="create-project-button-form" onClick={createProject}>
+                  Create Project
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Confirmation Popup */}
+      {confirmationVisible && (
+        <ConfirmationPopup
+          message="Are you sure you want to delete this project?"
+          subMessage="This action cannot be undone."
+          onConfirm={() => setConfirmationVisible(false)}
+          onCancel={() => setConfirmationVisible(false)}
+          isVisible={confirmationVisible}
+        />
+      )}
+
+      {/* Active Project Details Section */}
+      {activeProject && (
+        <div className="project-details">
+          <h2 id="project-topic">{activeProject.name}</h2>
+          <p id="project-topic-description">{activeProject.description || 'No description available.'}</p>
+          <button onClick={() => setConfirmationVisible(true)}>Delete Project</button>
+        </div>
+      )}
     </div>
   );
-};
+}
 
 export default ProjectPopup;
diff --git a/client/components/Settings.jsx b/client/components/Settings.jsx
index 63f0671..4154158 100644
--- a/client/components/Settings.jsx
+++ b/client/components/Settings.jsx
@@ -20,7 +20,7 @@ const SettingsPopup = ({ isVisible, onClose, onEditBoard, onDeleteBoard }) => {
 
   return (
     <div className="settings-popup-overlay" onClick={onClose}>
-      <div className="settings-popup" onClick={(e) => e.stopPropagation()}>
+      <div className="settings-popup" onClick={(e) => e.stoppagation()}>
         <p className="settings-option" onClick={handleEditBoard}>
           Edit Board
         </p>
diff --git a/client/components/pages/Project.jsx b/client/components/pages/Project.jsx
index 8cb0ebb..1f4b964 100644
--- a/client/components/pages/Project.jsx
+++ b/client/components/pages/Project.jsx
@@ -8,9 +8,10 @@ import SettingsPopup from '../Settings.jsx';
 import ProjectPopup from '../ProjectPopup.jsx';
 import ConfirmationPopup from '../ConfirmationPopup.jsx';
 import TaskLabel from '../TaskLabel.jsx';
-import BoardProject from '../BoardProject.jsx';
+import BoardProject from '../BoardProject2.jsx';
 import List from '../List.jsx';
 import Member from '../Member.jsx';
+import ErrorBoundary from '/ErrorBoundary.jsx';
 import '/styles/sidebar.css';
 
 
@@ -107,11 +108,8 @@ const Project = () => {
   return (
     <div id="app">
       <Interface user={user} />
-      <Calendar />
       <Task />
-      <Board />
       <SettingsPopup />
-      <ProjectPopup />
       <ConfirmationPopup
         isVisible={isConfirmationVisible}
         onConfirm={handleConfirmation}
@@ -122,7 +120,9 @@ const Project = () => {
         onLabelSelect={(label) => console.log('Selected label:', label)}
         onClose={() => setLabelPopupVisible(false)}
       />
-      <BoardProject />
+      <ErrorBoundary>
+        <BoardProject />
+      </ErrorBoundary>
       <List />
       <Member members={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />
     </div>
diff --git a/client/styles/board.css b/client/styles/board.css
index 61f3073..975575e 100644
--- a/client/styles/board.css
+++ b/client/styles/board.css
@@ -162,7 +162,7 @@
   display: flex;
   justify-content: flex-end;
   position: sticky;
-  bottom: 15px;
+  bottom: 2vh;
   padding-right: 40px;
   z-index: 1;
   }
@@ -198,31 +198,41 @@
     padding: 2vh 2vw; /* Remove padding to align header and buttons */
     border-radius: 12px;
     width: 60vw !important;
-    max-height: 75vh; /* Set a maximum height */
+    max-height: 80vh !important; /* Set a maximum height */
     display: flex;
     flex-direction: column;
     box-sizing: border-box; /* Ensure padding is accounted for in the width/height calculation */
     font-family: 'Inter', sans-serif;
-    overflow: hidden; /* Prevent popup overflow */  
+    overflow: none; /* Prevent popup overflow */  
+    z-index: 999;
   }
   
+  .popup-body {
+    flex: 1;
+    overflow-y: hidden; /* Enable only vertical scrolling if needed */
+    padding: 10px;
+    max-height: 50vh; /* Prevent it from taking too much space */
+  }
+
   .popup-header {
     background-color: #33363B;
     position: sticky;
-    top: 4vh;
+    top: 1vh;
     z-index: 1;
     margin: 1vh 0;
   }
-  
-  #header-title {
-    font-size: calc(1.8vw) !important;
-    margin-left: 2.5vw; /* Adjust alignment */
-    margin-top: 2vh;
-    margin-bottom: 2vh;
-    letter-spacing: 1px;
-    color: white;
-    font-weight: normal;
-  }
+
+/* Ensure header title spacing is applied */
+.header-title {
+  font-size: calc(1.8vw) !important;
+  margin: 1vh 2vw; /* Adjust spacing: Top and bottom = 3vh, Left and right = 2vw */
+  padding: 0vh 0; /* Add some internal space */
+  letter-spacing: 1px;
+  color: white;
+  font-weight: normal;
+  display: block; /* Ensure it behaves as a block element */
+}
+
 
 .input-wrapper {
   margin-left: 5.5vw;
@@ -273,28 +283,6 @@ color: white;
 border: 1.5px solid #2594E3;
 }
 
-/* Popup Body (Scrollable) */
-#popup-body-main {
-  position: relative;
-  flex: 1;
-  top: -3.5vh;
-  padding: 40px;
-  overflow-y: hidden; /* Allow vertical scrolling */
-  overflow-x: hidden; /* Prevent horizontal scrolling */
-}
-
-#popup-body-main::-webkit-scrollbar {
-  width: 8px; /* Optional scrollbar width */
-}
-
-#popup-body-main::-webkit-scrollbar-thumb {
-  background-color: #6D7276; /* Scrollbar thumb color */
-  border-radius: 4px;
-}
-
-#popup-body-main::-webkit-scrollbar-track {
-  background-color: #3A3E42; /* Scrollbar track color */
-}
 
 #board-list-container {
   max-height: 53.5vh; /* Adjust as needed */
@@ -337,4 +325,5 @@ border: 1.5px solid #2594E3;
   white-space: nowrap; /* Prevent text wrapping */
   text-overflow: ellipsis; /* Show ellipsis for overflow */
   max-width: 40vw; /* Adjust max width as per layout */
-}
\ No newline at end of file
+}
+
diff --git a/client/styles/project.css b/client/styles/project.css
index 51c7f9d..aa0ac49 100644
--- a/client/styles/project.css
+++ b/client/styles/project.css
@@ -16,8 +16,12 @@
   display: flex; /* Show the popup */
 }
 
+.create-project-container {
+  display: flex;
+}
+
 /* Main and Project Popup Content */
-#popup-content {
+#project-popup {
   background-color: #33363B;
   padding: 2vh; /* Padding using vh for responsive spacing */
   border-radius: 1.5vw; /* Border radius using vw */
@@ -31,6 +35,16 @@
   overflow: hidden;
 }
 
+#header-title {
+  font-size: calc(1.8vw) !important;
+  margin-left: 2.5vw; /* Adjust alignment */
+  margin-top: 2vh;
+  margin-bottom: 2vh;
+  letter-spacing: 1px;
+  color: white;
+  font-weight: normal;
+}
+
 #project-section {
   position: fixed;
   top: 23.3vh;
@@ -41,12 +55,11 @@
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
   border-right: 1px solid #474E55;
-  display: none;
   z-index: 2;
   }
   
   /* Create Project Button Styling */
-  #create-project-button {
+  .create-project-button {
   position: relative;
   top: -1vh;
   left: 0.2vw;
@@ -75,20 +88,20 @@ form label {
   font-size: 14px;
   }
   
-  form input,
-  form textarea {
-  width: 87%;
+  .popup-input,
+  .popup-textarea {
+  width: 85%;
   padding: 10px;
   border: 1px solid #6D7276;
   border-radius: 12px; /* Rounded corners for input and textarea */
   background-color: #3A3E42;
   color: #fff;
-  font-size: 14px;
+  font-size: calc(1.1vw);
   }
   
   /* Fixed height for textarea */
-  form textarea {
-  height: 110px;
+  .popup-textarea {
+  height: 110px !important;
   resize: none; /* Prevent textarea resizing */
   margin-bottom: 25px;
   }
@@ -123,6 +136,10 @@ form label {
   z-index: 1;
   }
   
+  .input-wrapper {
+    margin-left: 5.5vw;
+  }
+
   #cancel-button ,
   #cancel-project-button ,
   #cancel-task-button {
@@ -182,7 +199,7 @@ form label {
   margin: 0vh auto 0 auto; /* 1vh gap and centered line */
   }
 
-  #project-list-container {
+  .project-list-container {
     margin-top: 1vh;
     max-height: 52.5vh; 
     overflow-y: auto; 
@@ -225,7 +242,7 @@ form label {
   .project-button.active .checkmark {
     visibility: visible; /* Make the checkmark visible */
   }
-  .project-button .project-name {
+  .project-button  {
     flex-grow: 1; /* Ensure the text takes the remaining space */
     width: 2vw;
     overflow: hidden; /* Hide overflow text */
diff --git a/client/styles/sidebar.css b/client/styles/sidebar.css
index 2df2e3e..b341bc4 100644
--- a/client/styles/sidebar.css
+++ b/client/styles/sidebar.css
@@ -10,13 +10,17 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 20%; /* 1/5 of the screen width */
-  height: 100vh; /* Full height of the screen */
+  width: 20%;
+  /* 1/5 of the screen width */
+  height: 100vh;
+  /* Full height of the screen */
   background-color: #1C2025;
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid #474E55; /* Right edge line color */
-  overflow-y: auto; /* Allows scrolling if content overflows */
+  border-right: 1px solid #474E55;
+  /* Right edge line color */
+  overflow-y: auto;
+  /* Allows scrolling if content overflows */
   z-index: 1;
 }
 
@@ -24,58 +28,79 @@
   position: fixed;
   top: 0vh;
   left: 0;
-  width: 20%; /* 1/5 of the screen width */
-  height: 5vh; /* Full height of the screen */
+  width: 20%;
+  /* 1/5 of the screen width */
+  height: 5vh;
+  /* Full height of the screen */
   background-color: #1C2025;
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid #474E55; /* Right edge line color */
-  border-bottom: 1px solid #474E55; /* Right edge line color */
+  border-right: 1px solid #474E55;
+  /* Right edge line color */
+  border-bottom: 1px solid #474E55;
+  /* Right edge line color */
   z-index: 4;
 }
 
-#projectbox {
+#project-container {
   position: fixed;
   top: 11vh;
   left: 0;
-  width: 20%; /* 1/5 of the screen width */
-  height: 6vh; /* Full height of the screen */
+  width: 20%;
+  height: 6vh;
   background-color: #1C2025;
   padding: 3.5vh 20px;
-  border-right: 1px solid #474E55; /* Right edge line color */
-  border-bottom: 1px solid #474E55; /* Right edge line color */
-  z-index: 3;
-  font-size: calc(1.3vw); 
+  border-bottom: 1px solid #474E55;
+  z-index: 2;
+  /* Ensure it's on top */
+  font-size: calc(1.3vw);
+  cursor: pointer;
+  /* Ensures it's clickable */
+}
+
+.projectbox {
+  z-index: 2;
+  /* Keep it above other elements */
 }
 
-#projectbox:hover {
-background-color: #25282D;
+.projectbox:hover {
+  background-color: #25282D;
 }
 
+/* Other styles remain unchanged... */
+
+
 #projectname {
   position: fixed;
   top: 13.75vh;
   color: white;
   left: 5vw;
   z-index: 4;
-  font-size: calc(1.3vw); 
+  font-size: calc(1.3vw);
   letter-spacing: 1px;
-  white-space: nowrap; /* Prevent text wrapping */
-  overflow: hidden; /* Hide overflowing text */
-  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
+  white-space: nowrap;
+  /* Prevent text wrapping */
+  overflow: hidden;
+  /* Hide overflowing text */
+  text-overflow: ellipsis;
+  /* Add ellipsis for overflowing text */
   max-width: 13vw;
 }
+
 #projectdescription {
   position: fixed;
   top: 18.25vh;
   color: #BEBEBE;
   left: 7.5vw;
   z-index: 4;
-  font-size: calc(1vw); 
+  font-size: calc(1vw);
   letter-spacing: 1px;
-  white-space: nowrap; /* Prevent text wrapping */
-  overflow: hidden; /* Hide overflowing text */
-  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
+  white-space: nowrap;
+  /* Prevent text wrapping */
+  overflow: hidden;
+  /* Hide overflowing text */
+  text-overflow: ellipsis;
+  /* Add ellipsis for overflowing text */
   max-width: 11vw;
 }
 
@@ -83,13 +108,17 @@ background-color: #25282D;
   position: fixed;
   top: 87vh;
   left: 0;
-  width: 20%; /* 1/5 of the screen width */
-  height: 5vh; /* Full height of the screen */
+  width: 20%;
+  /* 1/5 of the screen width */
+  height: 5vh;
+  /* Full height of the screen */
   background-color: #1C2025;
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid #474E55; /* Right edge line color */
-  border-top: 1px solid #474E55; /* Right edge line color */
+  border-right: 1px solid hsl(210, 9%, 31%);
+  /* Right edge line color */
+  border-top: 1px solid #474E55;
+  /* Right edge line color */
   z-index: 10;
 }
 
@@ -107,7 +136,8 @@ background-color: #25282D;
   top: 92vh;
   left: 9vw;
   color: white;
-  font-size: calc(1.3vw); /* Dynamically adjusts font size */
+  font-size: calc(1.3vw);
+  /* Dynamically adjusts font size */
 }
 
 /* Triangle symbol base style */
@@ -119,10 +149,14 @@ background-color: #25282D;
   border-top: 1vh solid #B6CADB;
   display: inline-block;
   transform-origin: center;
-  transition: transform 0.2s ease; /* Smooth transition */  
-  position: absolute; /* Use absolute positioning */
-  top: 50%; /* Center vertically */
-  left: 2vw; /* Adjust distance from the left */
+  transition: transform 0.2s ease;
+  /* Smooth transition */
+  position: absolute;
+  /* Use absolute positioning */
+  top: 50%;
+  /* Center vertically */
+  left: 2vw;
+  /* Adjust distance from the left */
 }
 
 /* Triangle facing right */
@@ -142,9 +176,12 @@ background-color: #25282D;
   width: 10px;
   height: 10px;
   position: absolute;
-  top: 35%; /* Center vertically */
-  right: 1vw; /* Align to the right */
-  z-index: 1; /* Ensure it’s above other elements */
+  top: 35%;
+  /* Center vertically */
+  right: 1vw;
+  /* Align to the right */
+  z-index: 1;
+  /* Ensure it’s above other elements */
   display: inline-block;
   transform-origin: center;
 }
@@ -174,16 +211,20 @@ background-color: #25282D;
   display: none;
 }
 
+.hidden {
+  display: none;
+}
+
 /* Options inside the popup */
 .project-settings-option {
   padding: 4px 0px;
   padding-left: 20px;
   font-size: 12px;
-  margin: 4px ;
+  margin: 4px;
   color: white;
   font-size: 14px;
   cursor: pointer;
-  text-align: left; 
+  text-align: left;
   border-radius: 4px;
   letter-spacing: 1px;
 }
@@ -203,4 +244,9 @@ background-color: #25282D;
 
 .project-settings-option.delete:hover {
   background-color: #1B2128;
-}
\ No newline at end of file
+}
+
+.section-wrapper {
+  display: block;
+  margin-top: 20px;
+}
diff --git a/client/vite.config.js b/client/vite.config.js
index 116952f..7d697d2 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [react()],
   envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ['boxing-problem-prime-floor.trycloudflare.com'],
+    allowedHosts: ["backed-count-findlaw-lighter.trycloudflare.com"],
     proxy: {
       '/socket': {
         target: 'wss://discord.com/api/', // Proxy Discord WebSocket API requests

From df36dcf6d30d3958d2d88be0495616056920d7aa Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Wed, 29 Jan 2025 04:25:56 +0700
Subject: [PATCH 10/14] Refactor Board and Sidebar components; update styles
 and remove deprecated BoardProject2 component

---
 client/components/Board.jsx         |   2 +-
 client/components/BoardProject.jsx  | 209 +++-------------------------
 client/components/BoardProject2.jsx |  35 -----
 client/components/ProjectPopup.jsx  |  99 ++++++++-----
 client/components/Sidebar.jsx       |   3 +
 client/components/pages/Project.jsx |   2 +-
 client/index.css                    |  47 -------
 client/styles/board.css             |  31 ++---
 client/styles/popup.css             |  17 ++-
 client/styles/project.css           |  51 ++++---
 client/styles/sidebar.css           |  30 ++--
 11 files changed, 154 insertions(+), 372 deletions(-)
 delete mode 100644 client/components/BoardProject2.jsx

diff --git a/client/components/Board.jsx b/client/components/Board.jsx
index d2647c4..878cb16 100644
--- a/client/components/Board.jsx
+++ b/client/components/Board.jsx
@@ -67,7 +67,7 @@ export function Board() {
         </button>
       </div>
 
-      <div id="board-list-container">
+      <div id="board-list-container" className='board-list-container'>
         {boards.map((board) => (
           <button
             key={board.id}
diff --git a/client/components/BoardProject.jsx b/client/components/BoardProject.jsx
index a0e1d25..192ed65 100644
--- a/client/components/BoardProject.jsx
+++ b/client/components/BoardProject.jsx
@@ -1,203 +1,34 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import '/styles/project.css';
 import '/styles/sidebar.css';
+import '/styles/board.css';
+import Board from './Board';
+import ProjectPopup from './ProjectPopup';
 
 const BoardProject = () => {
-  const [projects, setProjects] = useState([]);
-  const [activeProject, setActiveProject] = useState(null);
-  const [settingsVisible, setSettingsVisible] = useState(false);
-  const [newProject, setNewProject] = useState({ name: '', description: '' });
+  const [isBoardVisible, setIsBoardVisible] = useState(true); // Toggle between Board and Project
+  const [selectedProject, setSelectedProject] = useState({ name: 'Project Name', description: 'Project Description' }); // Selected project state
 
-  const projectBoxRef = useRef(null);
-  const projectNameDisplayRef = useRef(null);
-  const projectDescriptionDisplayRef = useRef(null);
-  const projectListContainerRef = useRef(null);
-  const boardSectionRef = useRef(null);
-  const projectSectionRef = useRef(null);
-
-  const defaultProjectName = 'No Project Selected';
-  const defaultProjectDescription = 'No description available';
-
-  // Create and append the triangle symbol and project settings icon
-  useEffect(() => {
-    if (projectBoxRef.current) {
-      // Create and add the triangle symbol
-      const triangleSymbol = document.createElement('div');
-      triangleSymbol.id = 'triangle-symbol';
-      triangleSymbol.classList.add('triangle-right'); // Default direction
-      projectBoxRef.current.prepend(triangleSymbol);
-
-      // Create and add the project settings icon
-      const projectSettingsIcon = document.createElement('img');
-      projectSettingsIcon.id = 'project-settings-icon';
-      projectSettingsIcon.src = 'assets/setting.svg'; // Path to your settings.svg
-      projectSettingsIcon.alt = 'Project Settings';
-      projectSettingsIcon.classList.add('project-settings-icon');
-      projectBoxRef.current.appendChild(projectSettingsIcon);
-
-      // Create the project settings popup
-      const projectSettingsPopup = document.createElement('div');
-      projectSettingsPopup.id = 'project-settings-popup';
-      projectSettingsPopup.classList.add('hidden', 'project-settings-popup');
-      projectSettingsPopup.innerHTML = `
-        <p class="project-settings-option" id="share-project">Share Project</p>
-        <p class="project-settings-option" id="edit-project">Edit Project</p>
-        <p class="project-settings-option delete" id="delete-project">Delete Project</p>
-      `;
-      document.body.appendChild(projectSettingsPopup);
-
-      // Position the popup near the settings icon
-      const positionPopup = () => {
-        const rect = projectSettingsIcon.getBoundingClientRect();
-        projectSettingsPopup.style.top = `${rect.bottom + window.scrollY}px`;
-        projectSettingsPopup.style.left = `${rect.left + window.scrollX}px`;
-      };
-
-      // Toggle the popup visibility
-      projectSettingsIcon.addEventListener('click', (event) => {
-        event.stopPropagation(); // Prevent click propagation
-        if (projectSettingsPopup.classList.contains('hidden')) {
-          document.querySelectorAll('.project-settings-popup').forEach((popup) =>
-            popup.classList.add('hidden')
-          );
-          positionPopup();
-          projectSettingsPopup.classList.remove('hidden');
-        } else {
-          projectSettingsPopup.classList.add('hidden');
-        }
-      });
-
-      // Hide the popup when clicking outside
-      document.addEventListener('click', () => {
-        projectSettingsPopup.classList.add('hidden');
-      });
-
-      // Update dynamic line position
-      const updateDynamicLine = () => {
-        let dynamicLine = document.querySelector('.dynamic-line');
-        if (!dynamicLine) {
-          dynamicLine = document.createElement('div');
-          dynamicLine.className = 'dynamic-line';
-          if (projectSectionRef.current) {
-            projectSectionRef.current.appendChild(dynamicLine);
-          }
-        }
-
-        const lastProjectButton = projectListContainerRef.current.querySelector('.project-button:last-child');
-        if (lastProjectButton) {
-          const lastButtonRect = lastProjectButton.getBoundingClientRect();
-          const projectSectionRect = projectSectionRef.current.getBoundingClientRect();
-          const offsetVh = ((lastButtonRect.bottom - projectSectionRect.top) / window.innerHeight) * 100;
-          dynamicLine.style.top = `calc(${offsetVh}vh + 2.5vh)`; // Adjust for spacing
-          dynamicLine.style.left = '0';
-          dynamicLine.style.width = '100%';
-          dynamicLine.style.display = 'block';
-        } else {
-          dynamicLine.style.display = 'none';
-        }
-      };
-
-      // Initial dynamic line setup
-      updateDynamicLine();
-    }
-  }, []);  // Empty dependency array ensures the effect runs only once after the first render
-
-  const handleCreateProject = () => {
-    const trimmedName = newProject.name.trim();
-    if (trimmedName === '') {
-      alert('Project name cannot be empty.');
-      return;
-    }
-
-    const newProjectData = {
-      id: crypto.randomUUID(),
-      name: trimmedName,
-      description: newProject.description.trim(),
-    };
-
-    setProjects([...projects, newProjectData]);
-    setNewProject({ name: '', description: '' });
-  };
-
-  const handleSelectProject = (project) => {
-    setActiveProject(project);
-    projectNameDisplayRef.current.textContent = project.name;
-    projectDescriptionDisplayRef.current.textContent = project.description || defaultProjectDescription;
-  };
-
-  const handleDeleteProject = (projectId) => {
-    if (window.confirm('Are you sure you want to delete this project?')) {
-      setProjects(projects.filter((project) => project.id !== projectId));
-      if (activeProject?.id === projectId) {
-        setActiveProject(null);
-      }
-    }
-  };
-
-  const toggleSettingsVisibility = () => {
-    setSettingsVisible(!settingsVisible);
+  const toggleSection = () => {
+    setIsBoardVisible((prev) => !prev);
   };
 
   return (
-    <div id="project-container" className="clickable">
-      {/* Project Box with id and class */}
-      <div id="projectbox" ref={projectBoxRef} className="projectbox">
-        <div id="projectname" ref={projectNameDisplayRef}>Project Name</div>
-        <div id="projectdescription" ref={projectDescriptionDisplayRef}>Project Description</div>
-      </div>
-
-      <div id="project-list-container" className="project-list" ref={projectListContainerRef}>
-        {projects.map((project) => (
-          <button
-            key={project.id}
-            className={`project-button ${activeProject && activeProject.id === project.id ? 'active' : ''}`}
-            onClick={() => handleSelectProject(project)}
-          >
-            {project.name}
-          </button>
-        ))}
-      </div>
-
-      {activeProject && (
-        <div id="project-section" className="project-details" ref={projectSectionRef}>
-          <h2 id="projectname" ref={projectNameDisplayRef}>{activeProject.name}</h2>
-          <p id="projectdescription" ref={projectDescriptionDisplayRef}>
-            {activeProject.description || 'No description available.'}
-          </p>
-          <button onClick={() => handleDeleteProject(activeProject.id)}>
-            Delete Project
-          </button>
+    <div id="main-container">
+      {/* Project Box */}
+      <div id="project-container" className="clickable" onClick={toggleSection}>
+        <div id="project-box" className="projectbox">
+          <div id="project-box-name">{selectedProject.name}</div>
+          <div id="project-box-description">{selectedProject.description}</div>
         </div>
-      )}
+      </div>
 
-      {settingsVisible && (
-        <div className="popup-overlay">
-          <div className="popup-content">
-            <h3>Create New Project</h3>
-            <input
-              type="text"
-              placeholder="Project Name"
-              value={newProject.name}
-              onChange={(e) =>
-                setNewProject({ ...newProject, name: e.target.value })
-              }
-            />
-            <textarea
-              placeholder="Project Description (Optional)"
-              value={newProject.description}
-              onChange={(e) =>
-                setNewProject({ ...newProject, description: e.target.value })
-              }
-            />
-            <div className="popup-buttons">
-              <button onClick={handleCreateProject}>Create</button>
-              <button onClick={() => setSettingsVisible(false)}>Cancel</button>
-            </div>
-          </div>
-        </div>
+      {/* Conditionally Render Board or ProjectPopup */}
+      {isBoardVisible ? (
+        <Board />
+      ) : (
+        <ProjectPopup setSelectedProject={setSelectedProject} />
       )}
-
-      <button onClick={toggleSettingsVisibility}>Create New Project</button>
     </div>
   );
 };
diff --git a/client/components/BoardProject2.jsx b/client/components/BoardProject2.jsx
deleted file mode 100644
index bdc0a4a..0000000
--- a/client/components/BoardProject2.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-import '/styles/project.css';
-import '/styles/sidebar.css';
-import '/styles/board.css';
-import Board from './Board'; // Ensure it's not rendered elsewhere
-import ProjectPopup from './ProjectPopup'; // Ensure it's not rendered elsewhere
-
-const BoardProject = () => {
-  const [isBoardVisible, setIsBoardVisible] = useState(true); // True = Show Board, False = Show Project
-
-  const toggleSection = () => {
-    setIsBoardVisible((prev) => !prev);
-  };
-
-  return (
-    <div id="main-container">
-      {/* ProjectBox: Always Visible */}
-      <div id="project-container" className="clickable" onClick={toggleSection}>
-        <div id="project-box" className="projectbox">
-          <div id="project-box-name">Project Name</div>
-          <div id="project-box-description">Click to toggle between Board and Project</div>
-        </div>
-      </div>
-
-      {/* Conditionally render Board or ProjectPopup */}
-      {isBoardVisible ? (
-        <Board />
-      ) : (
-        <ProjectPopup />
-      )}
-    </div>
-  );
-};
-
-export default BoardProject;
diff --git a/client/components/ProjectPopup.jsx b/client/components/ProjectPopup.jsx
index abc5c8e..44de43c 100644
--- a/client/components/ProjectPopup.jsx
+++ b/client/components/ProjectPopup.jsx
@@ -4,21 +4,23 @@ import '/styles/popup.css';
 import '/styles/project.css';
 import ConfirmationPopup from './ConfirmationPopup';
 
-export function ProjectPopup() {
-  // State management
-  const [projects, setProjects] = useState([]); // State to store projects
-  const [popupVisible, setPopupVisible] = useState(false); // State to control popup visibility
-  const [confirmationVisible, setConfirmationVisible] = useState(false); // State for confirmation popup
-  const [newProject, setNewProject] = useState({ name: '', description: '' }); // State for new project input
-  const [activeProject, setActiveProject] = useState(null); // State to store the currently selected active project
+export function ProjectPopup({ setSelectedProject }) {
+  const [projects, setProjects] = useState([]);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [confirmationVisible, setConfirmationVisible] = useState(false);
+  const [newProject, setNewProject] = useState({ name: '', description: '' });
+  const [activeProject, setActiveProject] = useState(null);
 
-  // Function to reset and hide the popup overlay
   const resetPopupOverlay = () => {
     setPopupVisible(false);
-    setNewProject({ name: '', description: '' }); // Reset the input fields
+    setNewProject({ name: '', description: '' });
+  };
+
+  const handleConfirmClose = () => {
+    setConfirmationVisible(false);
+    resetPopupOverlay();
   };
 
-  // Function to create a new project
   const createProject = (event) => {
     event.preventDefault();
     const projectName = newProject.name.trim();
@@ -30,20 +32,25 @@ export function ProjectPopup() {
         name: projectName,
         description: projectDescription,
       };
-
       setProjects((prevProjects) => [...prevProjects, newProjectData]);
-      resetPopupOverlay(); // Close the popup and reset inputs
+      resetPopupOverlay();
     } else {
       alert('Please enter a project name.');
     }
   };
 
+  const handleProjectClick = (project) => {
+    setActiveProject(project);
+    setSelectedProject(project); // Update the selected project in the parent component
+  };
+
   return (
     <div className="project-section" id="project-section">
       <div id="create-project-container">
         <button id="create-project-button" className="create-project-button" onClick={() => setPopupVisible(true)}>
           + Create New Project
         </button>
+        <div className="dynamic-line" id="dynamic-line"></div>
       </div>
 
       <div id="project-list-container">
@@ -51,23 +58,41 @@ export function ProjectPopup() {
           <button
             key={project.id}
             className={`project-button ${activeProject && activeProject.id === project.id ? 'active' : ''}`}
-            onClick={() => setActiveProject(project)}
+            onClick={() => handleProjectClick(project)}
           >
+            {/* Checkmark/Icon */}
+            <span className="checkmark">
+              {activeProject && activeProject.id === project.id && '✔'}
+            </span>
             {project.name}
           </button>
         ))}
+
+        {/* Dynamic line positioned at the bottom */}
+        <div className="dynamic-line1" id="dynamic-line1"></div>
       </div>
 
-      {/* Project Popup Overlay */}
+      {/* Project Popup */}
       {popupVisible && (
-        <div className="project-popup-overlay" id="project-popup-overlay">
-          <div className="project-popup" id="project-popup">
-            <div className="popup-header" id="popup-header">
-              <div className="header-title" id="header-title">Create New Project</div>
-              <button className="close-popup-button" onClick={() => setPopupVisible(false)} aria-label="Close project creation popup">
-                ✖
-              </button>
-            </div>
+        <div
+          className="project-popup-overlay"
+          id="project-popup-overlay"
+          onClick={() => setConfirmationVisible(true)}
+        >
+          <div
+            className="project-popup"
+            id="project-popup"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="header-title" id="header-title">Create New Project</div>
+            <button
+              className="close-popup-button"
+              onClick={() => setConfirmationVisible(true)}
+              aria-label="Close project creation popup"
+            >
+              ✖
+            </button>
+
             <div className="input-wrapper">
               <label htmlFor="project-name" className="popup-label">Project Name</label>
               <input
@@ -91,10 +116,21 @@ export function ProjectPopup() {
                 onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}
               />
               <div className="popup-buttons">
-                <button type="button" className="cancel-button" id="cancel-button" onClick={() => setPopupVisible(false)} aria-label="Cancel project creation">
+                <button
+                  type="button"
+                  className="cancel-button"
+                  id="cancel-button"
+                  onClick={() => setConfirmationVisible(true)}
+                  aria-label="Cancel project creation"
+                >
                   Cancel
                 </button>
-                <button type="submit" className="create-project-button-form" id="create-project-button-form" onClick={createProject}>
+                <button
+                  type="submit"
+                  className="create-project-button-form"
+                  id="create-project-button-form"
+                  onClick={createProject}
+                >
                   Create Project
                 </button>
               </div>
@@ -106,22 +142,11 @@ export function ProjectPopup() {
       {/* Confirmation Popup */}
       {confirmationVisible && (
         <ConfirmationPopup
-          message="Are you sure you want to delete this project?"
-          subMessage="This action cannot be undone."
-          onConfirm={() => setConfirmationVisible(false)}
-          onCancel={() => setConfirmationVisible(false)}
           isVisible={confirmationVisible}
+          onConfirm={handleConfirmClose}
+          onCancel={() => setConfirmationVisible(false)}
         />
       )}
-
-      {/* Active Project Details Section */}
-      {activeProject && (
-        <div className="project-details">
-          <h2 id="project-topic">{activeProject.name}</h2>
-          <p id="project-topic-description">{activeProject.description || 'No description available.'}</p>
-          <button onClick={() => setConfirmationVisible(true)}>Delete Project</button>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx
index b64049b..df30f36 100644
--- a/client/components/Sidebar.jsx
+++ b/client/components/Sidebar.jsx
@@ -18,6 +18,9 @@ const Sidebar = ({ user }) => {
           />
           <span id="username">{user.username}</span>
         </div>
+        <div className='logo' id='logo'>
+          <img alt='Planify'></img>
+        </div>  
       </div>
 
       {/* Optional: Footer or additional content */}
diff --git a/client/components/pages/Project.jsx b/client/components/pages/Project.jsx
index 1f4b964..717af57 100644
--- a/client/components/pages/Project.jsx
+++ b/client/components/pages/Project.jsx
@@ -8,7 +8,7 @@ import SettingsPopup from '../Settings.jsx';
 import ProjectPopup from '../ProjectPopup.jsx';
 import ConfirmationPopup from '../ConfirmationPopup.jsx';
 import TaskLabel from '../TaskLabel.jsx';
-import BoardProject from '../BoardProject2.jsx';
+import BoardProject from '../BoardProject.jsx';
 import List from '../List.jsx';
 import Member from '../Member.jsx';
 import ErrorBoundary from '/ErrorBoundary.jsx';
diff --git a/client/index.css b/client/index.css
index 734924a..a022dc7 100644
--- a/client/index.css
+++ b/client/index.css
@@ -14,16 +14,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   display: flex;
@@ -48,21 +38,6 @@ h1 {
   text-align: left;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #f7df1eaa);
-}
-
 button {
   border-radius: 8px;
   border: 1px solid transparent;
@@ -75,28 +50,6 @@ button {
   transition: border-color 0.25s;
 }
 
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
 /* Ensure the entire area is clickable */
 #tasks-checkbox {
   position: fixed;
diff --git a/client/styles/board.css b/client/styles/board.css
index 975575e..9d2b54c 100644
--- a/client/styles/board.css
+++ b/client/styles/board.css
@@ -1,13 +1,13 @@
 /* Board Section Styling */
 .board-section {
   position: fixed;
-  top: 23.3vh;
+  top: 24.5vh;
   left: 0;
   width: 20%; /* 1/5 of the screen width */
   height: 5vh; /* Full height of the screen */
   background-color: #1C2025;
-  padding: 20px;
-  z-index: 2;
+  padding: 16px;
+  z-index: 1;
 }
 
 
@@ -41,18 +41,25 @@
   color: #3C90E2;
 }
 
+.board-list-container {
+  max-height: 52vh; /* Adjust as needed */
+  overflow-y: auto; /* Allow scrolling if content exceeds container height */
+  position: relative; /* Ensure the container's position can be adjusted */
+  top: -1vh; /* Moves the container 1vh higher */
+}
+
 /* Scrollbar for Board List Container */
-.board-section .board-list-container::-webkit-scrollbar {
+.board-list-container::-webkit-scrollbar {
   width: 6px; /* Optional scrollbar width */
   border-radius: 4px;
 }
 
-.board-section .board-list-container::-webkit-scrollbar-thumb {
+.board-list-container::-webkit-scrollbar-thumb {
   background-color: #33363B; /* Scrollbar thumb color */
   border-radius: 4px;
 }
 
-.board-section .board-list-container::-webkit-scrollbar-track {
+.board-list-container::-webkit-scrollbar-track {
   background-color: #25282D; /* Scrollbar track color */
 }
 
@@ -103,7 +110,7 @@
     display: none;
     align-items: center;
     justify-content: center;
-    z-index: 999;
+    z-index: 1000;
     }
     
     #popup-overlay:not(.hidden) {
@@ -204,7 +211,7 @@
     box-sizing: border-box; /* Ensure padding is accounted for in the width/height calculation */
     font-family: 'Inter', sans-serif;
     overflow: none; /* Prevent popup overflow */  
-    z-index: 999;
+    z-index: 1001;
   }
   
   .popup-body {
@@ -283,14 +290,6 @@ color: white;
 border: 1.5px solid #2594E3;
 }
 
-
-#board-list-container {
-  max-height: 53.5vh; /* Adjust as needed */
-  overflow-y: auto; /* Allow scrolling if content exceeds container height */
-  position: relative; /* Ensure the container's position can be adjusted */
-  top: -1vh; /* Moves the container 1vh higher */
-}
-
 #board-page {
   position: relative;
   width: 100%;
diff --git a/client/styles/popup.css b/client/styles/popup.css
index 7c4e4cf..2e7571e 100644
--- a/client/styles/popup.css
+++ b/client/styles/popup.css
@@ -18,15 +18,18 @@
 
 /* Popup Content */
 #popup-content, #task-popup-content, #project-popup-content {
+  position: relative;
   background-color: #33363B;
-  padding: 2vh; /* Vertical padding using vh */
-  border-radius: 1.5vw; /* Border radius in vw */
-  width: 50vw; /* Responsive width based on viewport width */
-  max-height: 75vh; /* Max height using vh */
-  color: white;
+  padding: 2vh 2vw; /* Remove padding to align header and buttons */
+  border-radius: 12px;
+  width: 60vw !important;
+  max-height: 80vh !important; /* Set a maximum height */
   display: flex;
-  flex-direction: column; /* Ensures header and content are stacked vertically */
-  overflow-y: auto; /* Make sure it doesn't overflow */
+  flex-direction: column;
+  box-sizing: border-box; /* Ensure padding is accounted for in the width/height calculation */
+  font-family: 'Inter', sans-serif;
+  overflow: none; /* Prevent popup overflow */  
+  z-index: 999;
 }
 
 /* Popup Header */
diff --git a/client/styles/project.css b/client/styles/project.css
index aa0ac49..a7c1f86 100644
--- a/client/styles/project.css
+++ b/client/styles/project.css
@@ -9,7 +9,7 @@
   display: none;
   align-items: center;
   justify-content: center;
-  z-index: 1001;
+  z-index: 1000;
 }
 
 #project-popup-overlay:not(.hidden) {
@@ -21,18 +21,19 @@
 }
 
 /* Main and Project Popup Content */
-#project-popup {
+.project-popup {
+  position: relative;
   background-color: #33363B;
-  padding: 2vh; /* Padding using vh for responsive spacing */
-  border-radius: 1.5vw; /* Border radius using vw */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  width: 50vw; /* Width using vw for responsive sizing */
-  max-height: 75vh; /* Max height in vh for responsiveness */
+  padding: 2vh 2vw; /* Remove padding to align header and buttons */
+  border-radius: 12px;
+  width: 60vw !important;
+  max-height: 80vh !important; /* Set a maximum height */
   display: flex;
   flex-direction: column;
-  color: #fff;
+  box-sizing: border-box; /* Ensure padding is accounted for in the width/height calculation */
   font-family: 'Inter', sans-serif;
-  overflow: hidden;
+  overflow: none; /* Prevent popup overflow */  
+  z-index: 1001;
 }
 
 #header-title {
@@ -47,21 +48,20 @@
 
 #project-section {
   position: fixed;
-  top: 23.3vh;
+  top: 24.5vh;
   left: 0;
   width: 20%;
   height: 5vh;
   background-color: #1C2025;
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid #474E55;
   z-index: 2;
   }
   
   /* Create Project Button Styling */
   .create-project-button {
   position: relative;
-  top: -1vh;
+  top: -1.5vh;
   left: 0.2vw;
   background-color: transparent;
   color: white;
@@ -76,7 +76,7 @@
   margin-bottom: 1vh;
   }
 
-  #create-project-button:hover {
+  .create-project-button:hover {
     background-color: #2594E3;
     color: white;
   }
@@ -205,7 +205,7 @@ form label {
     overflow-y: auto; 
     position: relative;
   }
-  .project-button {
+  #project-list-container .project-button {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -221,11 +221,15 @@ form label {
     width: 100%;
     margin-bottom: 1.5vh;
     margin-top: 1.5vh;
-    overflow: hidden; /* Hide overflow text */
-    white-space: nowrap; /* Prevent text wrapping */
-    text-overflow: ellipsis; /* Show ellipsis for overflow */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
-  .project-button:hover {
+  
+  #project-list-container .project-button:hover {
+    background-color: #2594E3;
+  }
+      .project-button:hover {
     background-color: #2594E3;
   }
   .project-button .checkmark {
@@ -261,9 +265,16 @@ form label {
     background-color: #25282D; /* Scrollbar track color */
   }
   .dynamic-line {
-    width: 100%;
+    width: 86%;
     height: 1px;  
     background-color: #474E55;
     margin: 0vh auto 0 auto; /* 1vh gap and centered line */
     position: absolute; /* Allow dynamic positioning */
-  }
\ No newline at end of file
+  }
+.dynamic-line1 {
+  width: 100%;
+  height: 1px;  
+  margin-left: -20px;
+  background-color: #474E55;
+  position: absolute; /* Allow dynamic positioning */
+}
\ No newline at end of file
diff --git a/client/styles/sidebar.css b/client/styles/sidebar.css
index b341bc4..7cbf8cc 100644
--- a/client/styles/sidebar.css
+++ b/client/styles/sidebar.css
@@ -16,7 +16,6 @@
   /* Full height of the screen */
   background-color: #1C2025;
   padding: 20px;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
   border-right: 1px solid #474E55;
   /* Right edge line color */
   overflow-y: auto;
@@ -30,16 +29,14 @@
   left: 0;
   width: 20%;
   /* 1/5 of the screen width */
-  height: 5vh;
+  height: 3.5vh;
   /* Full height of the screen */
   background-color: #1C2025;
   padding: 20px;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid #474E55;
   /* Right edge line color */
   border-bottom: 1px solid #474E55;
   /* Right edge line color */
-  z-index: 4;
+  z-index: 3;
 }
 
 #project-container {
@@ -50,8 +47,8 @@
   height: 6vh;
   background-color: #1C2025;
   padding: 3.5vh 20px;
-  border-bottom: 1px solid #474E55;
-  z-index: 2;
+  border-bottom: 1px solid #474E55; 
+  z-index: 1;
   /* Ensure it's on top */
   font-size: calc(1.3vw);
   cursor: pointer;
@@ -59,23 +56,19 @@
 }
 
 .projectbox {
-  z-index: 2;
+  z-index: 1;
   /* Keep it above other elements */
 }
 
-.projectbox:hover {
-  background-color: #25282D;
-}
-
 /* Other styles remain unchanged... */
 
 
-#projectname {
+#project-box-name {
   position: fixed;
   top: 13.75vh;
   color: white;
   left: 5vw;
-  z-index: 4;
+  z-index: 1;
   font-size: calc(1.3vw);
   letter-spacing: 1px;
   white-space: nowrap;
@@ -87,12 +80,12 @@
   max-width: 13vw;
 }
 
-#projectdescription {
+#project-box-description {
   position: fixed;
   top: 18.25vh;
   color: #BEBEBE;
   left: 7.5vw;
-  z-index: 4;
+  z-index: 1;
   font-size: calc(1vw);
   letter-spacing: 1px;
   white-space: nowrap;
@@ -115,11 +108,10 @@
   background-color: #1C2025;
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid hsl(210, 9%, 31%);
   /* Right edge line color */
   border-top: 1px solid #474E55;
   /* Right edge line color */
-  z-index: 10;
+  z-index: 1;;
 }
 
 #userbox img {
@@ -200,7 +192,7 @@
   border: 1px solid transparent;
   border-radius: 8px;
   padding: 4px;
-  z-index: 2000;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 2px;

From c9ae01e4b986b9c57c42a79fafcf98a675fd83f7 Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Wed, 29 Jan 2025 04:41:24 +0700
Subject: [PATCH 11/14] Refactor project components: rename Board and
 ProjectPopup to BoardSection and ProjectSection; implement ProjectSection for
 project management functionality

---
 client/components/BoardProject.jsx            | 18 ++++++++------
 .../{Board.jsx => BoardSection.jsx}           |  4 ++--
 client/components/Interface.jsx               | 12 +++++-----
 .../{ProjectPopup.jsx => ProjectSection.jsx}  | 24 ++++---------------
 client/components/pages/Project.jsx           |  4 ++--
 5 files changed, 25 insertions(+), 37 deletions(-)
 rename client/components/{Board.jsx => BoardSection.jsx} (98%)
 rename client/components/{ProjectPopup.jsx => ProjectSection.jsx} (87%)

diff --git a/client/components/BoardProject.jsx b/client/components/BoardProject.jsx
index 192ed65..f3c6b75 100644
--- a/client/components/BoardProject.jsx
+++ b/client/components/BoardProject.jsx
@@ -2,12 +2,16 @@ import React, { useState } from 'react';
 import '/styles/project.css';
 import '/styles/sidebar.css';
 import '/styles/board.css';
-import Board from './Board';
-import ProjectPopup from './ProjectPopup';
+import BoardSection from './BoardSection';
+import ProjectSection from './ProjectSection';
 
 const BoardProject = () => {
-  const [isBoardVisible, setIsBoardVisible] = useState(true); // Toggle between Board and Project
-  const [selectedProject, setSelectedProject] = useState({ name: 'Project Name', description: 'Project Description' }); // Selected project state
+  const [isBoardVisible, setIsBoardVisible] = useState(true);
+  const [selectedProject, setSelectedProject] = useState({
+    id: null,
+    name: 'Project Name',
+    description: 'Project Description',
+  });
 
   const toggleSection = () => {
     setIsBoardVisible((prev) => !prev);
@@ -17,7 +21,7 @@ const BoardProject = () => {
     <div id="main-container">
       {/* Project Box */}
       <div id="project-container" className="clickable" onClick={toggleSection}>
-        <div id="project-box" className="projectbox">
+        <div id={`project-box-${selectedProject.id}`} className="projectbox">
           <div id="project-box-name">{selectedProject.name}</div>
           <div id="project-box-description">{selectedProject.description}</div>
         </div>
@@ -25,9 +29,9 @@ const BoardProject = () => {
 
       {/* Conditionally Render Board or ProjectPopup */}
       {isBoardVisible ? (
-        <Board />
+        <BoardSection />
       ) : (
-        <ProjectPopup setSelectedProject={setSelectedProject} />
+        <ProjectSection setSelectedProject={setSelectedProject} />
       )}
     </div>
   );
diff --git a/client/components/Board.jsx b/client/components/BoardSection.jsx
similarity index 98%
rename from client/components/Board.jsx
rename to client/components/BoardSection.jsx
index 878cb16..5926344 100644
--- a/client/components/Board.jsx
+++ b/client/components/BoardSection.jsx
@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import '/styles/board.css'; 
 import ConfirmationPopup from './ConfirmationPopup'; 
 
-export function Board() {
+export function BoardSection() {
   // State management
   const [boards, setBoards] = useState([]); // State to store boards
   const [popupVisible, setPopupVisible] = useState(false); // State to control popup visibility
@@ -153,5 +153,5 @@ export function Board() {
   );
 }
 
-export default Board;
+export default BoardSection;
   
\ No newline at end of file
diff --git a/client/components/Interface.jsx b/client/components/Interface.jsx
index f5c02a4..dbbdfcd 100644
--- a/client/components/Interface.jsx
+++ b/client/components/Interface.jsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import Board from './Board';
+import BoardSection from './BoardSection';
 import Calendar from './Calendar';
 import Task from '../../Task';
 import SettingsPopup from './Settings';
-import ProjectPopup from './ProjectPopup';
+import ProjectSection from './ProjectSection';
 import ConfirmationPopup from './ConfirmationPopup';
 import TaskLabel from './TaskLabel';
 import List from './List';
@@ -14,7 +14,7 @@ const Interface = ({ user }) => {
   const [showCalendar, setShowCalendar] = useState(false);
   const [showTaskPopup, setShowTaskPopup] = useState(false);
   const [showSettingsPopup, setShowSettingsPopup] = useState(false);
-  const [showProjectPopup, setShowProjectPopup] = useState(false);
+  const [showProjectSection, setShowProjectSection] = useState(false);
   const [showConfirmationPopup, setShowConfirmationPopup] = useState(false);
   const [showLabelPopup, setShowLabelPopup] = useState(false);
 
@@ -30,14 +30,14 @@ const Interface = ({ user }) => {
 
       {/* Main Content */}
       <main className="main-content">
-    
+
         {/* Conditional Rendering for Popup Components */}
         {showCalendar && <Calendar />}
         {showTaskPopup && <Task />}
         {showSettingsPopup && <SettingsPopup />}
-        {showProjectPopup && <ProjectPopup />}
+        {showProjectSection && <ProjectSection />}
         {showConfirmationPopup && <ConfirmationPopup />}
-        {showLabelPopup && <TaskLabel />} 
+        {showLabelPopup && <TaskLabel />}
 
         {/* Task List and Member Components */}
         <List />
diff --git a/client/components/ProjectPopup.jsx b/client/components/ProjectSection.jsx
similarity index 87%
rename from client/components/ProjectPopup.jsx
rename to client/components/ProjectSection.jsx
index 44de43c..c81f03e 100644
--- a/client/components/ProjectPopup.jsx
+++ b/client/components/ProjectSection.jsx
@@ -2,9 +2,8 @@ import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import '/styles/popup.css';
 import '/styles/project.css';
-import ConfirmationPopup from './ConfirmationPopup';
 
-export function ProjectPopup({ setSelectedProject }) {
+export function ProjectSection({ setSelectedProject }) {
   const [projects, setProjects] = useState([]);
   const [popupVisible, setPopupVisible] = useState(false);
   const [confirmationVisible, setConfirmationVisible] = useState(false);
@@ -16,11 +15,6 @@ export function ProjectPopup({ setSelectedProject }) {
     setNewProject({ name: '', description: '' });
   };
 
-  const handleConfirmClose = () => {
-    setConfirmationVisible(false);
-    resetPopupOverlay();
-  };
-
   const createProject = (event) => {
     event.preventDefault();
     const projectName = newProject.name.trim();
@@ -41,7 +35,7 @@ export function ProjectPopup({ setSelectedProject }) {
 
   const handleProjectClick = (project) => {
     setActiveProject(project);
-    setSelectedProject(project); // Update the selected project in the parent component
+    setSelectedProject(project); // Update selected project
   };
 
   return (
@@ -57,6 +51,7 @@ export function ProjectPopup({ setSelectedProject }) {
         {projects.map((project) => (
           <button
             key={project.id}
+            id={`project-button-${project.id}`}
             className={`project-button ${activeProject && activeProject.id === project.id ? 'active' : ''}`}
             onClick={() => handleProjectClick(project)}
           >
@@ -67,8 +62,6 @@ export function ProjectPopup({ setSelectedProject }) {
             {project.name}
           </button>
         ))}
-
-        {/* Dynamic line positioned at the bottom */}
         <div className="dynamic-line1" id="dynamic-line1"></div>
       </div>
 
@@ -138,17 +131,8 @@ export function ProjectPopup({ setSelectedProject }) {
           </div>
         </div>
       )}
-
-      {/* Confirmation Popup */}
-      {confirmationVisible && (
-        <ConfirmationPopup
-          isVisible={confirmationVisible}
-          onConfirm={handleConfirmClose}
-          onCancel={() => setConfirmationVisible(false)}
-        />
-      )}
     </div>
   );
 }
 
-export default ProjectPopup;
+export default ProjectSection;
diff --git a/client/components/pages/Project.jsx b/client/components/pages/Project.jsx
index 717af57..50dc736 100644
--- a/client/components/pages/Project.jsx
+++ b/client/components/pages/Project.jsx
@@ -3,9 +3,9 @@ import { DiscordSDK } from '@discord/embedded-app-sdk';
 import Interface from '../Interface.jsx';
 import Calendar from '../Calendar.jsx';
 import Task from '../../../Task.jsx';
-import Board from '../Board.jsx';
+import Board from '../BoardSection.jsx';
 import SettingsPopup from '../Settings.jsx';
-import ProjectPopup from '../ProjectPopup.jsx';
+import ProjectSection from '../ProjectSection.jsx';
 import ConfirmationPopup from '../ConfirmationPopup.jsx';
 import TaskLabel from '../TaskLabel.jsx';
 import BoardProject from '../BoardProject.jsx';

From 04b891c02ff2e5f9e7f529f4a650d08eadb25647 Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Thu, 30 Jan 2025 02:23:53 +0700
Subject: [PATCH 12/14] Enhance BoardProject and ProjectSection components: add
 settings popup with options, implement click outside to close functionality,
 and update styles for better layout and visibility

---
 client/components/BoardProject.jsx   | 71 ++++++++++++++++++++++++----
 client/components/ProjectSection.jsx | 12 +++++
 client/components/Sidebar.jsx        |  2 -
 client/styles/sidebar.css            | 34 ++++++-------
 client/vite.config.js                |  2 +-
 5 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/client/components/BoardProject.jsx b/client/components/BoardProject.jsx
index f3c6b75..a228ef8 100644
--- a/client/components/BoardProject.jsx
+++ b/client/components/BoardProject.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import '/styles/project.css';
 import '/styles/sidebar.css';
 import '/styles/board.css';
@@ -13,8 +13,27 @@ const BoardProject = () => {
     description: 'Project Description',
   });
 
+  const [settingsVisible, setSettingsVisible] = useState(false);
+  const settingsRef = useRef(null);
+
+  // Close settings popup when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (settingsRef.current && !settingsRef.current.contains(event.target)) {
+        setSettingsVisible(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   const toggleSection = () => {
-    setIsBoardVisible((prev) => !prev);
+    // Prevent toggling section if settings popup is open
+    if (!settingsVisible) {
+      setIsBoardVisible((prev) => !prev);
+    }
   };
 
   return (
@@ -22,19 +41,51 @@ const BoardProject = () => {
       {/* Project Box */}
       <div id="project-container" className="clickable" onClick={toggleSection}>
         <div id={`project-box-${selectedProject.id}`} className="projectbox">
-          <div id="project-box-name">{selectedProject.name}</div>
-          <div id="project-box-description">{selectedProject.description}</div>
+          {/* Triangle Symbol */}
+          <div className={`triangle-symbol ${isBoardVisible ? 'triangle-right' : 'triangle-down'}`}></div>
+          
+          {/* Project Text Content */}
+          <div id="project-box-content">
+            <div id="project-box-name">{selectedProject.name}</div>
+            <div id="project-box-description">{selectedProject.description}</div>
+          </div>
+
+          {/* Project Settings Icon (Click to Toggle Popup) */}
+          <img
+            src="/assets/setting.svg"
+            alt="Settings"
+            className="project-settings-icon"
+            onClick={(e) => {
+              e.stopPropagation(); // Prevents toggleSection from being triggered
+              setSettingsVisible(!settingsVisible);
+            }}
+          />
+
+          {/* Settings Popup */}
+          {settingsVisible && (
+            <div 
+              className="project-settings-popup" 
+              ref={settingsRef} 
+              onClick={(e) => e.stopPropagation()} // Prevents toggling the board/project
+            >
+              <div className="project-settings-option" onClick={() => alert("Share Project Clicked")}>
+                Share Project
+              </div>
+              <div className="project-settings-option" onClick={() => alert("Edit Project Clicked")}>
+                Edit Project
+              </div>
+              <div className="project-settings-option delete" onClick={() => alert("Delete Project Clicked")}>
+                Delete Project
+              </div>
+            </div>
+          )}
         </div>
       </div>
 
       {/* Conditionally Render Board or ProjectPopup */}
-      {isBoardVisible ? (
-        <BoardSection />
-      ) : (
-        <ProjectSection setSelectedProject={setSelectedProject} />
-      )}
+      {isBoardVisible ? <BoardSection /> : <ProjectSection setSelectedProject={setSelectedProject} />}
     </div>
   );
 };
 
-export default BoardProject;
+export default BoardProject;  
\ No newline at end of file
diff --git a/client/components/ProjectSection.jsx b/client/components/ProjectSection.jsx
index c81f03e..fb3ce14 100644
--- a/client/components/ProjectSection.jsx
+++ b/client/components/ProjectSection.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import '/styles/popup.css';
 import '/styles/project.css';
+import ConfirmationPopup from './ConfirmationPopup';
 
 export function ProjectSection({ setSelectedProject }) {
   const [projects, setProjects] = useState([]);
@@ -131,6 +132,17 @@ export function ProjectSection({ setSelectedProject }) {
           </div>
         </div>
       )}
+      {/* Confirmation Popup (Fix) */}
+      {confirmationVisible && (
+        <ConfirmationPopup
+          isVisible={confirmationVisible}
+          onConfirm={() => {
+            setConfirmationVisible(false);
+            resetPopupOverlay();
+          }}
+          onCancel={() => setConfirmationVisible(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx
index df30f36..df49078 100644
--- a/client/components/Sidebar.jsx
+++ b/client/components/Sidebar.jsx
@@ -22,8 +22,6 @@ const Sidebar = ({ user }) => {
           <img alt='Planify'></img>
         </div>  
       </div>
-
-      {/* Optional: Footer or additional content */}
     </div>
   );
 };
diff --git a/client/styles/sidebar.css b/client/styles/sidebar.css
index 7cbf8cc..0b8641b 100644
--- a/client/styles/sidebar.css
+++ b/client/styles/sidebar.css
@@ -56,12 +56,17 @@
 }
 
 .projectbox {
-  z-index: 1;
-  /* Keep it above other elements */
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-left: 2vw; /* Ensure space for the triangle */
 }
 
-/* Other styles remain unchanged... */
-
+#project-box-content {
+  margin-left: 2.5vw; /* Push text away from the triangle */
+  display: flex;
+  flex-direction: column;
+}
 
 #project-box-name {
   position: fixed;
@@ -133,7 +138,7 @@
 }
 
 /* Triangle symbol base style */
-#triangle-symbol {
+.triangle-symbol {
   width: 0;
   height: 0;
   border-left: 1vh solid transparent;
@@ -142,13 +147,10 @@
   display: inline-block;
   transform-origin: center;
   transition: transform 0.2s ease;
-  /* Smooth transition */
   position: absolute;
-  /* Use absolute positioning */
-  top: 50%;
-  /* Center vertically */
-  left: 2vw;
-  /* Adjust distance from the left */
+  top: 2vh;
+  left: 0.7vw;
+  z-index: 5;
 }
 
 /* Triangle facing right */
@@ -170,7 +172,7 @@
   position: absolute;
   top: 35%;
   /* Center vertically */
-  right: 1vw;
+  right: -0.5vw;
   /* Align to the right */
   z-index: 1;
   /* Ensure it’s above other elements */
@@ -185,15 +187,15 @@
 /* Popup container */
 .project-settings-popup {
   position: absolute;
-  top: 40px;
-  right: 10px;
+  top: 0px;
+  right: -190px;
   width: 150px;
   background-color: #11161C;
   border: 1px solid transparent;
   border-radius: 8px;
   padding: 4px;
-  z-index: 1;
-  display: flex;
+  z-index: 5;
+  display: flex;  
   flex-direction: column;
   gap: 2px;
 }
diff --git a/client/vite.config.js b/client/vite.config.js
index 7d697d2..0b434fe 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [react()],
   envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ["backed-count-findlaw-lighter.trycloudflare.com"],
+    allowedHosts: ["ira-fell-less-nil.trycloudflare.com"],
     proxy: {
       '/socket': {
         target: 'wss://discord.com/api/', // Proxy Discord WebSocket API requests

From b90385001659e001b4b036c6be858bd0ffe84d7c Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Fri, 31 Jan 2025 03:50:47 +0700
Subject: [PATCH 13/14] Enhance BoardProject and BoardSection components:
 implement project management functionality, update project selection logic,
 and add a prompt for creating a project when none exists

---
 client/components/BoardProject.jsx   |  45 +++--
 client/components/BoardSection.jsx   |  44 ++---
 client/components/ProjectSection.jsx | 261 +++++++++++++--------------
 client/styles/sidebar.css            |  10 +
 client/vite.config.js                |   2 +-
 5 files changed, 190 insertions(+), 172 deletions(-)

diff --git a/client/components/BoardProject.jsx b/client/components/BoardProject.jsx
index a228ef8..7731474 100644
--- a/client/components/BoardProject.jsx
+++ b/client/components/BoardProject.jsx
@@ -7,11 +7,13 @@ import ProjectSection from './ProjectSection';
 
 const BoardProject = () => {
   const [isBoardVisible, setIsBoardVisible] = useState(true);
-  const [selectedProject, setSelectedProject] = useState({
-    id: null,
-    name: 'Project Name',
-    description: 'Project Description',
-  });
+  
+  // Store boards and active board
+  const [boards, setBoards] = useState([]);
+  const [activeBoard, setActiveBoard] = useState(null);
+
+  const [projects, setProjects] = useState([]);   
+  const [activeProject, setActiveProject] = useState(null);
 
   const [settingsVisible, setSettingsVisible] = useState(false);
   const settingsRef = useRef(null);
@@ -40,14 +42,14 @@ const BoardProject = () => {
     <div id="main-container">
       {/* Project Box */}
       <div id="project-container" className="clickable" onClick={toggleSection}>
-        <div id={`project-box-${selectedProject.id}`} className="projectbox">
+      <div id={`project-box-${activeProject ? activeProject.id : 'none'}`} className="projectbox">
           {/* Triangle Symbol */}
           <div className={`triangle-symbol ${isBoardVisible ? 'triangle-right' : 'triangle-down'}`}></div>
           
-          {/* Project Text Content */}
+          {/* Project Text Content */} 
           <div id="project-box-content">
-            <div id="project-box-name">{selectedProject.name}</div>
-            <div id="project-box-description">{selectedProject.description}</div>
+            <div id="project-box-name">{activeProject ? activeProject.name : 'project name'}</div>
+            <div id="project-box-description">{activeProject ? activeProject.description : 'project description'}</div>
           </div>
 
           {/* Project Settings Icon (Click to Toggle Popup) */}
@@ -82,8 +84,29 @@ const BoardProject = () => {
         </div>
       </div>
 
-      {/* Conditionally Render Board or ProjectPopup */}
-      {isBoardVisible ? <BoardSection /> : <ProjectSection setSelectedProject={setSelectedProject} />}
+      {/* Conditionally Render Board or Project Section */}
+      {isBoardVisible ? (
+        activeProject ? ( // ✅ Only pass projectId if activeProject exists
+          <BoardSection 
+            projectId={activeProject.id}
+            boards={boards[activeProject.id] || []} 
+            setBoards={setBoards} 
+            activeBoard={activeBoard} 
+            setActiveBoard={setActiveBoard} 
+          />
+        ) : (
+          <div className='please-create-project' id='please-create-project'>
+            Please Create Project
+          </div>
+        )
+      ) : (
+        <ProjectSection 
+          projects={projects} 
+          setProjects={setProjects} 
+          activeProject={activeProject} 
+          setActiveProject={setActiveProject} 
+        />
+      )}
     </div>
   );
 };
diff --git a/client/components/BoardSection.jsx b/client/components/BoardSection.jsx
index 5926344..f719810 100644
--- a/client/components/BoardSection.jsx
+++ b/client/components/BoardSection.jsx
@@ -3,13 +3,10 @@ import { v4 as uuidv4 } from 'uuid';
 import '/styles/board.css'; 
 import ConfirmationPopup from './ConfirmationPopup'; 
 
-export function BoardSection() {
-  // State management
-  const [boards, setBoards] = useState([]); // State to store boards
-  const [popupVisible, setPopupVisible] = useState(false); // State to control popup visibility
-  const [confirmationVisible, setConfirmationVisible] = useState(false); // State for confirmation popup
-  const [newBoard, setNewBoard] = useState({ name: '', description: '' }); // State for new board input
-  const [activeBoard, setActiveBoard] = useState(null); // State to store the currently selected active board
+export function BoardSection({ projectId, boards, setBoards, activeBoard, setActiveBoard }) {
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [confirmationVisible, setConfirmationVisible] = useState(false);
+  const [newBoard, setNewBoard] = useState({ name: '', description: '' });
 
   // Function to reset and hide the popup overlay
   const resetPopupOverlay = () => {
@@ -17,21 +14,20 @@ export function BoardSection() {
     setNewBoard({ name: '', description: '' }); // Reset the input fields
   };
 
-  // Function to create a new board
   const createBoard = (event) => {
-    event.preventDefault(); 
-    const boardName = newBoard.name.trim();
-    const boardDescription = newBoard.description.trim();
-
-    if (boardName) {
+    event.preventDefault();
+    if (newBoard.name.trim()) {
       const newBoardData = {
         id: uuidv4(),
-        name: boardName,
-        description: boardDescription,
+        name: newBoard.name,
+        description: newBoard.description,
       };
 
-      setBoards((prevBoards) => [...prevBoards, newBoardData]);
-      resetPopupOverlay(); // Close the popup and reset inputs
+      setBoards((prevBoards) => ({
+        ...prevBoards,
+        [projectId]: [...(prevBoards[projectId] || []), newBoardData],
+      }));
+      resetPopupOverlay();
     } else {
       alert('Please enter a board name.');
     }
@@ -42,23 +38,13 @@ export function BoardSection() {
     setActiveBoard(board);
   };
 
-  // Function to handle deletion of the active board
-  const handleDeleteBoard = () => {
-    if (activeBoard) {
-      setBoards((prevBoards) => prevBoards.filter((board) => board.id !== activeBoard.id));
-      setActiveBoard(null);
-    }
-    setConfirmationVisible(false); // Close the confirmation popup
-    resetPopupOverlay(); // Close the board popup and reset the input fields
-  };
-
   // Function to show the confirmation popup
   const handleShowConfirmation = () => {
     setConfirmationVisible(true);
   };
 
   return (
-    <div className="board-section" id="board-section">
+    <div className="board-section" id={`board-section-${projectId}`}>
       <span className="board-text" id="board-text">Boards</span>
 
       <div id="create-board-container">
@@ -153,5 +139,5 @@ export function BoardSection() {
   );
 }
 
-export default BoardSection;
+export default BoardSection;  
   
\ No newline at end of file
diff --git a/client/components/ProjectSection.jsx b/client/components/ProjectSection.jsx
index fb3ce14..5890e8b 100644
--- a/client/components/ProjectSection.jsx
+++ b/client/components/ProjectSection.jsx
@@ -1,150 +1,149 @@
-import React, { useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import '/styles/popup.css';
-import '/styles/project.css';
-import ConfirmationPopup from './ConfirmationPopup';
+    import React, { useState } from 'react';
+    import { v4 as uuidv4 } from 'uuid';
+    import '/styles/popup.css';
+    import '/styles/project.css';
+    import ConfirmationPopup from './ConfirmationPopup';
 
-export function ProjectSection({ setSelectedProject }) {
-  const [projects, setProjects] = useState([]);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const [confirmationVisible, setConfirmationVisible] = useState(false);
-  const [newProject, setNewProject] = useState({ name: '', description: '' });
-  const [activeProject, setActiveProject] = useState(null);
+    export function ProjectSection({ projects, setProjects, activeProject, setActiveProject, setSelectedProject }) {
+      const [popupVisible, setPopupVisible] = useState(false);
+      const [confirmationVisible, setConfirmationVisible] = useState(false);
+      const [newProject, setNewProject] = useState({ name: '', description: '' });
 
-  const resetPopupOverlay = () => {
-    setPopupVisible(false);
-    setNewProject({ name: '', description: '' });
-  };
+      const resetPopupOverlay = () => {
+        setPopupVisible(false);
+        setNewProject({ name: '', description: '' });
+      };
 
-  const createProject = (event) => {
-    event.preventDefault();
-    const projectName = newProject.name.trim();
-    const projectDescription = newProject.description.trim();
+      const createProject = (event) => {
+        event.preventDefault();
+        const projectName = newProject.name.trim();
+        const projectDescription = newProject.description.trim();
 
-    if (projectName) {
-      const newProjectData = {
-        id: uuidv4(),
-        name: projectName,
-        description: projectDescription,
+        if (projectName) {
+          const newProjectData = {
+            id: uuidv4(),
+            name: projectName,
+            description: projectDescription,
+          };
+          setProjects((prevProjects) => [...prevProjects, newProjectData]);
+          resetPopupOverlay();
+        } else {
+          alert('Please enter a project name.');
+        }
       };
-      setProjects((prevProjects) => [...prevProjects, newProjectData]);
-      resetPopupOverlay();
-    } else {
-      alert('Please enter a project name.');
-    }
-  };
 
-  const handleProjectClick = (project) => {
-    setActiveProject(project);
-    setSelectedProject(project); // Update selected project
-  };
+      const handleProjectClick = (project) => {
+        console.log('project id :',project.id)
+        setActiveProject(project);
+        setSelectedProject(project); // Update selected project
+      };
 
-  return (
-    <div className="project-section" id="project-section">
-      <div id="create-project-container">
-        <button id="create-project-button" className="create-project-button" onClick={() => setPopupVisible(true)}>
-          + Create New Project
-        </button>
-        <div className="dynamic-line" id="dynamic-line"></div>
-      </div>
+      return (
+        <div className="project-section" id="project-section">
+          <div id="create-project-container">
+            <button id="create-project-button" className="create-project-button" onClick={() => setPopupVisible(true)}>
+              + Create New Project
+            </button>
+            <div className="dynamic-line" id="dynamic-line"></div>
+          </div>
 
-      <div id="project-list-container">
-        {projects.map((project) => (
-          <button
-            key={project.id}
-            id={`project-button-${project.id}`}
-            className={`project-button ${activeProject && activeProject.id === project.id ? 'active' : ''}`}
-            onClick={() => handleProjectClick(project)}
-          >
-            {/* Checkmark/Icon */}
-            <span className="checkmark">
-              {activeProject && activeProject.id === project.id && '✔'}
-            </span>
-            {project.name}
-          </button>
-        ))}
-        <div className="dynamic-line1" id="dynamic-line1"></div>
-      </div>
+          <div id="project-list-container">
+            {projects.map((project) => (
+              <button
+                key={project.id}
+                id={`project-button-${project.id}`}
+                className={`project-button ${activeProject && activeProject.id === project.id ? 'active' : ''}`}
+                onClick={() => handleProjectClick(project)}
+              >
+                {/* Checkmark/Icon */}
+                <span className="checkmark">
+                  {activeProject && activeProject.id === project.id && '✔'}
+                </span>
+                {project.name}
+              </button>
+            ))}
+            <div className="dynamic-line1" id="dynamic-line1"></div>
+          </div>
 
-      {/* Project Popup */}
-      {popupVisible && (
-        <div
-          className="project-popup-overlay"
-          id="project-popup-overlay"
-          onClick={() => setConfirmationVisible(true)}
-        >
-          <div
-            className="project-popup"
-            id="project-popup"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="header-title" id="header-title">Create New Project</div>
-            <button
-              className="close-popup-button"
+          {/* Project Popup */}
+          {popupVisible && (
+            <div
+              className="project-popup-overlay"
+              id="project-popup-overlay"
               onClick={() => setConfirmationVisible(true)}
-              aria-label="Close project creation popup"
             >
-              ✖
-            </button>
-
-            <div className="input-wrapper">
-              <label htmlFor="project-name" className="popup-label">Project Name</label>
-              <input
-                className="popup-input"
-                id="project-name"
-                type="text"
-                placeholder="Enter project name"
-                value={newProject.name}
-                onChange={(e) => setNewProject({ ...newProject, name: e.target.value })}
-                required
-              />
-            </div>
-
-            <div className="input-wrapper">
-              <label htmlFor="project-description" className="popup-label">Project Description (Optional)</label>
-              <textarea
-                className="popup-textarea"
-                id="project-description"
-                placeholder="Enter project description"
-                value={newProject.description}
-                onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}
-              />
-              <div className="popup-buttons">
+              <div
+                className="project-popup"
+                id="project-popup"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="header-title" id="header-title">Create New Project</div>
                 <button
-                  type="button"
-                  className="cancel-button"
-                  id="cancel-button"
+                  className="close-popup-button"
                   onClick={() => setConfirmationVisible(true)}
-                  aria-label="Cancel project creation"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="create-project-button-form"
-                  id="create-project-button-form"
-                  onClick={createProject}
+                  aria-label="Close project creation popup"
                 >
-                  Create Project
+                  ✖
                 </button>
+
+                <div className="input-wrapper">
+                  <label htmlFor="project-name" className="popup-label">Project Name</label>
+                  <input
+                    className="popup-input"
+                    id="project-name"
+                    type="text"
+                    placeholder="Enter project name"
+                    value={newProject.name}
+                    onChange={(e) => setNewProject({ ...newProject, name: e.target.value })}
+                    required
+                  />
+                </div>
+
+                <div className="input-wrapper">
+                  <label htmlFor="project-description" className="popup-label">Project Description (Optional)</label>
+                  <textarea
+                    className="popup-textarea"
+                    id="project-description"
+                    placeholder="Enter project description"
+                    value={newProject.description}
+                    onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}
+                  />
+                  <div className="popup-buttons">
+                    <button
+                      type="button"
+                      className="cancel-button"
+                      id="cancel-button"
+                      onClick={() => setConfirmationVisible(true)}
+                      aria-label="Cancel project creation"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="submit"
+                      className="create-project-button-form"
+                      id="create-project-button-form"
+                      onClick={createProject}
+                    >
+                      Create Project
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
+          )}
+          {/* Confirmation Popup (Fix) */}
+          {confirmationVisible && (
+            <ConfirmationPopup
+              isVisible={confirmationVisible}
+              onConfirm={() => {
+                setConfirmationVisible(false);
+                resetPopupOverlay();
+              }}
+              onCancel={() => setConfirmationVisible(false)}
+            />
+          )}
         </div>
-      )}
-      {/* Confirmation Popup (Fix) */}
-      {confirmationVisible && (
-        <ConfirmationPopup
-          isVisible={confirmationVisible}
-          onConfirm={() => {
-            setConfirmationVisible(false);
-            resetPopupOverlay();
-          }}
-          onCancel={() => setConfirmationVisible(false)}
-        />
-      )}
-    </div>
-  );
-}
+      );
+    }
 
-export default ProjectSection;
+    export default ProjectSection;
diff --git a/client/styles/sidebar.css b/client/styles/sidebar.css
index 0b8641b..73b1297 100644
--- a/client/styles/sidebar.css
+++ b/client/styles/sidebar.css
@@ -244,3 +244,13 @@
   display: block;
   margin-top: 20px;
 }
+
+.please-create-project {
+  position: relative;
+  top: 22vh;
+  left: 4vw;
+  font-size: calc(1.4vw);
+  color: white;
+  letter-spacing: 1px;
+  z-index: 8;
+  }
\ No newline at end of file
diff --git a/client/vite.config.js b/client/vite.config.js
index 0b434fe..0000ecc 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [react()],
   envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ["ira-fell-less-nil.trycloudflare.com"],
+    allowedHosts: ["citizen-lesser-promptly-cds.trycloudflare.com"],
     proxy: {
       '/socket': {
         target: 'wss://discord.com/api/', // Proxy Discord WebSocket API requests

From 2a0e9403cab50ec5b1b213eb515776a1c83e8a60 Mon Sep 17 00:00:00 2001
From: ltaht <specter15564@gmail.com>
Date: Fri, 31 Jan 2025 23:08:25 +0700
Subject: [PATCH 14/14] Implement project deletion functionality in
 BoardProject component and update allowedHosts in vite config

---
 client/components/BoardProject.jsx | 19 ++++++++++++++++++-
 client/vite.config.js              |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/components/BoardProject.jsx b/client/components/BoardProject.jsx
index 7731474..e64b3e6 100644
--- a/client/components/BoardProject.jsx
+++ b/client/components/BoardProject.jsx
@@ -38,6 +38,23 @@ const BoardProject = () => {
     }
   };
 
+  const deleteProject = () => {
+    if (!activeProject) return; // No project selected
+
+    const updatedProjects = projects.filter((project) => project.id !== activeProject.id);
+    setProjects(updatedProjects); // Update the project list
+
+    // Remove boards associated with this project
+    const updatedBoards = { ...boards };
+    delete updatedBoards[activeProject.id];
+    setBoards(updatedBoards);
+
+    // Reset active project and active board
+    setActiveProject(null);
+    setActiveBoard(null);
+    setSettingsVisible(false); // Close the settings popup
+  };
+
   return (
     <div id="main-container">
       {/* Project Box */}
@@ -76,7 +93,7 @@ const BoardProject = () => {
               <div className="project-settings-option" onClick={() => alert("Edit Project Clicked")}>
                 Edit Project
               </div>
-              <div className="project-settings-option delete" onClick={() => alert("Delete Project Clicked")}>
+              <div className="project-settings-option delete" onClick={deleteProject}>
                 Delete Project
               </div>
             </div>
diff --git a/client/vite.config.js b/client/vite.config.js
index 0000ecc..0c859d4 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [react()],
   envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ["citizen-lesser-promptly-cds.trycloudflare.com"],
+    allowedHosts: ["businesses-ski-fundamentals-pulling.trycloudflare.com"],
     proxy: {
       '/socket': {
         target: 'wss://discord.com/api/', // Proxy Discord WebSocket API requests