nexus auth integrated

frontend/app/Auth.js

@@ -1,322 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const Auth = ({
-  username,
-  setUsername,
-  password,
-  setPassword,
-  confirmPassword,
-  setConfirmPassword,
-  isLoading,
-  setIsLoading,
-  error,
-  setError,
-  isSignup,
-  setIsSignup,
-  ws,
-  status,
-  setSessionToken,
-}) => {
-  const [usernameValid, setUsernameValid] = useState(false);
-  const [passwordValid, setPasswordValid] = useState(false);
-  const [passwordsMatch, setPasswordsMatch] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  useEffect(() => {
-    // Check for existing session token in localStorage or cookie when component loads
-    const token = localStorage.getItem('sessionToken');
-    if (token) {
-      setSessionToken(token);
-    }
-  }, [setSessionToken]);
-
-  // Handle login and signup requests
-  const connectAndAuthenticate = (data) => {
-    setError('');
-    if (!username || !password) {
-      setError('Please enter both username and password');
-      return;
-    }
-
-    setIsLoading(true);
-
-    // Send authentication data over WebSocket if connection is open
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(data);
-    } else {
-      setError('WebSocket connection is not established');
-      setIsLoading(false);
-    }
-  };
-
-  // Handle session token update from the server response
-  const handleSessionToken = (response) => {
-    const { token, success } = JSON.parse(response);
-
-    if (success && token) {
-      localStorage.setItem('sessionToken', token); // Store token in localStorage
-      setSessionToken(token); // Update token state
-      setIsLoading(false);
-    } else {
-      setError('Authentication failed');
-      setIsLoading(false);
-    }
-  };
-
-  // Validation for signup form
-  const validateSignup = () => {
-    if (!username || !password || !confirmPassword) {
-      setError('Please fill in all fields');
-      return false;
-    }
-    if (username.length < 4) {
-      setError('Username must be at least 4 characters');
-      return false;
-    }
-    if (password.length < 8) {
-      setError('Password must be at least 8 characters');
-      return false;
-    }
-    if (password !== confirmPassword) {
-      setError('Passwords do not match');
-      return false;
-    }
-    return true;
-  };
-
-  // Signup handler
-  const handleSignup = () => {
-    if (!validateSignup()) return;
-
-    const signupData = JSON.stringify({ username, password, action: 'signup' });
-    connectAndAuthenticate(signupData);
-  };
-
-  // Login handler
-  const handleLogin = () => {
-    if (!username || !password) {
-      setError('Please enter both username and password');
-      return;
-    }
-
-    const loginData = JSON.stringify({ username, password, action: 'login' });
-    connectAndAuthenticate(loginData);
-  };
-
-  // Validations to dynamically update conditions
-  const checkUsername = (value) => {
-    setUsername(value);
-    setUsernameValid(value.length >= 4);
-  };
-
-  const checkPassword = (value) => {
-    setPassword(value);
-    setPasswordValid(value.length >= 8);
-  };
-
-  const checkPasswordsMatch = (value) => {
-    setConfirmPassword(value);
-    setPasswordsMatch(value === password);
-  };
-
-  return (
-    <div style={inputContainerStyle}>
-      {isSignup ? (
-        // Signup Form
-        <div style={inputContainerStyle}>
-          <h2 style={headingStyle}>Signup</h2>
-          <input
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => checkUsername(e.target.value)}
-            style={inputStyle}
-          />
-          <div style={passwordInputContainerStyle}>
-            <input
-              type={showPassword ? 'text' : 'password'}
-              placeholder="Password"
-              value={password}
-              onChange={(e) => checkPassword(e.target.value)}
-              style={inputStyle}
-            />
-            <span
-              onClick={() => setShowPassword(!showPassword)}
-              style={eyeIconStyle}
-            >
-              👁️
-            </span>
-          </div>
-          <div style={passwordInputContainerStyle}>
-            <input
-              type={showConfirmPassword ? 'text' : 'password'}
-              placeholder="Confirm Password"
-              value={confirmPassword}
-              onChange={(e) => checkPasswordsMatch(e.target.value)}
-              style={inputStyle}
-            />
-            <span
-              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              style={eyeIconStyle}
-            >
-              👁️
-            </span>
-          </div>
-          <div style={buttonContainerStyle}>
-            <button
-              onClick={handleSignup}
-              style={loginButtonStyle}
-            >
-              {isLoading ? 'Processing...' : 'Signup'}
-            </button>
-          </div>
-        </div>
-      ) : (
-        // Login Form
-        <div style={inputContainerStyle}>
-          <h2 style={headingStyle}>Login</h2>
-          <input
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            style={inputStyle}
-          />
-          <div style={passwordInputContainerStyle}>
-            <input
-              type={showPassword ? 'text' : 'password'}
-              placeholder="Password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              style={inputStyle}
-            />
-            <span
-              onClick={() => setShowPassword(!showPassword)}
-              style={eyeIconStyle}
-            >
-              👁️
-            </span>
-          </div>
-          <div style={buttonContainerStyle}>
-            <button
-              onClick={handleLogin}
-              style={loginButtonStyle}
-            >
-              {isLoading ? 'Processing...' : 'Login'}
-            </button>
-          </div>
-        </div>
-      )}
-
-      {isSignup && (
-        <div style={conditionsContainerStyle}>
-          <h3 style={conditionsHeaderStyle}>Signup Conditions</h3>
-          <ul>
-            <li style={{ color: usernameValid ? 'green' : 'red' }}>
-              {usernameValid ? '✔ Username must be at least 4 characters' : '✘ Username must be at least 4 characters'}
-            </li>
-            <li style={{ color: passwordValid ? 'green' : 'red' }}>
-              {passwordValid ? '✔ Password must be at least 8 characters' : '✘ Password must be at least 8 characters'}
-            </li>
-            <li style={{ color: passwordsMatch ? 'green' : 'red' }}>
-              {passwordsMatch ? '✔ Passwords match' : '✘ Passwords do not match'}
-            </li>
-          </ul>
-        </div>
-      )}
-
-      <div style={buttonContainerStyle}>
-        <button
-          onClick={() => setIsSignup(!isSignup)}
-          style={switchButtonStyle}
-        >
-          {isSignup ? 'Already have an Account? Login' : 'Don\'t have an Account? Signup'}
-        </button>
-      </div>
-
-      {error && <div style={{ color: 'red', display: 'flex', alignItems: 'center' }}>
-        <div style={{ width: '8px', height: '8px', backgroundColor: 'red', borderRadius: '50px', marginRight: '5px' }} />
-        {error}
-      </div>}
-    </div>
-  );
-};
-
-// Styles (as before)
-const inputContainerStyle = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '15px',
-  maxWidth: '400px',
-  width: '100%',
-};
-
-const headingStyle = {
-  color: '#d4a5ff',
-  fontSize: '36px',
-};
-
-const inputStyle = {
-  padding: '10px',
-  fontSize: '16px',
-  borderRadius: '5px',
-  border: '1px solid #4b2e83',
-  marginBottom: '10px',
-  backgroundColor: '#2e2e4f',
-  color: '#fff',
-};
-
-const passwordInputContainerStyle = {
-  position: 'relative',
-  display: 'grid',
-};
-
-const eyeIconStyle = {
-  position: 'absolute',
-  right: '10px',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  cursor: 'pointer',
-};
-
-const loginButtonStyle = {
-  padding: '12px 20px',
-  backgroundColor: '#6a4c9c',
-  color: '#fff',
-  border: 'none',
-  borderRadius: '5px',
-  fontSize: '16px',
-  cursor: 'pointer',
-  transition: 'background-color 0.3s',
-};
-
-const switchButtonStyle = {
-  marginTop: '10px',
-  color: '#fff',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  textDecoration: 'underline',
-};
-
-const buttonContainerStyle = {
-  display: 'flex',
-  justifyContent: 'center',
-};
-
-const conditionsContainerStyle = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '10px',
-  marginTop: '15px',
-  maxWidth: '300px',
-};
-
-const conditionsHeaderStyle = {
-  color: '#d4a5ff',
-  fontSize: '20px',
-  marginBottom: '5px',
-};
-
-export default Auth;

frontend/app/Sidebar.js

@@ -1,222 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import Image from 'next/image';
-
-export default function Sidebar({
-  searchQuery,
-  setSearchQuery,
-  filteredUsers,
-  handleUserSelect,
-  setFilteredUsers,
-}) {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [me, setMe] = useState('');
-  const [allChats, setAllChats] = useState([]);
-
-  useEffect(() => {
-    // Retrieve 'me' from localStorage
-    const storedMe = localStorage.getItem('me');
-    if (storedMe) {
-      setMe(storedMe);
-    }
-
-    // Retrieve all chats stored in localStorage
-    const allKeys = Object.keys(localStorage);
-    const chats = allKeys.filter((key) => key !== 'me' && key !== 'sessionToken' && key !== 'ally-supports-cache').map((key) => {
-      return {
-        username: key,
-        chatData: JSON.parse(localStorage.getItem(key)),
-      };
-    });
-
-    setAllChats(chats);
-  }, []);
-
-  const toggleSidebar = () => {
-    setIsSidebarOpen((prev) => !prev);
-  };
-
-  const handleSearchChange = async (e) => {
-    const query = e.target.value;
-    setSearchQuery(query);
-
-    if (!query) {
-      setFilteredUsers([]); // No search query, show nothing in search results
-      return;
-    }
-
-    const servicesUrl = process.env.NEXT_PUBLIC_SERVICES_URL;
-    if (!servicesUrl) {
-      console.error('Environment variable NEXT_PUBLIC_SERVICES_URL is not defined.');
-      return;
-    }
-
-    if (query.length > 2) {
-      try {
-        const response = await fetch(`${servicesUrl}/search?query=${query}`);
-        const data = await response.json();
-        setFilteredUsers(Array.isArray(data) ? data : []); // Ensure that filteredUsers is always an array
-      } catch (error) {
-        console.error('Error fetching search results:', error);
-        setFilteredUsers([]); // In case of error, clear filteredUsers
-      }
-    } else {
-      setFilteredUsers([]);
-    }
-  };
-
-  return (
-    <>
-      {/* Hamburger Menu Button */}
-      <button
-        onClick={toggleSidebar}
-        style={{
-          position: 'fixed',
-          top: '10px',
-          left: isSidebarOpen ? '210px' : '10px',
-          transform: isSidebarOpen ? 'rotate(90deg)' : 'none',
-          zIndex: 1000,
-          backgroundColor: '#352e83',
-          color: '#fff',
-          border: 'none',
-          borderRadius: '10px',
-          padding: '10px',
-          cursor: 'pointer',
-          transition: 'left .4s ease',
-        }}
-      >
-        ☰
-      </button>
-
-      {/* Sidebar */}
-      <div
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: isSidebarOpen ? 0 : '-260px',
-          width: '250px',
-          height: '100%',
-          backgroundColor: '#333',
-          padding: '20px',
-          boxShadow: '2px 0 5px rgba(0, 0, 0, 0.5)',
-          transition: 'left 0.3s ease',
-          zIndex: 999,
-        }}
-      >
-        <h3 style={{ color: '#fff', marginBottom: '20px' }}>Find Chats</h3>
-
-        <input
-          type="text"
-          placeholder="Search Users..."
-          value={searchQuery}
-          onChange={handleSearchChange}
-          style={searchInputStyle}
-        />
-
-        <div style={{ marginBottom: '20px' }}>
-          {/* Display search results */}
-          {searchQuery && (
-            <div>
-              <h4 style={{ color: '#fff', marginBottom: '10px' }}>Search Results</h4>
-              <ul style={{ listStyleType: 'none', padding: 0 }}>
-                {Array.isArray(filteredUsers) && filteredUsers.map((recipient, index) => (
-                  <li
-                    key={index}
-                    style={{
-                      color: '#fff',
-                      cursor: 'pointer',
-                      marginBottom: '15px',
-                      display: 'flex',
-                      alignItems: 'center',
-                    }}
-                    onClick={() => handleUserSelect(recipient)}
-                  >
-                    {/* Profile Picture */}
-                    <div
-                      style={{
-                        width: '40px',
-                        height: '40px',
-                        position: 'relative',
-                        marginRight: '10px',
-                      }}
-                    >
-                      <Image
-                        src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
-                          recipient
-                        )}`}
-                        alt={`${recipient}'s avatar`}
-                        layout="fill"
-                        objectFit="cover"
-                        style={{ borderRadius: '50%' }}
-                      />
-                    </div>
-                    {/* Username */}
-                    <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
-                      {recipient} {recipient === me ? '(Me)' : ''}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-
-        <div>
-          {/* Display localStorage chats */}
-          <h4 style={{ color: '#fff', marginBottom: '10px' }}>Chats</h4>
-          <ul style={{ listStyleType: 'none', padding: 0 }}>
-            {allChats.map((chat, index) => (
-              <li
-                key={index}
-                style={{
-                  color: '#fff',
-                  cursor: 'pointer',
-                  marginBottom: '15px',
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-                onClick={() => handleUserSelect(chat.username)}
-              >
-                {/* Profile Picture */}
-                <div
-                  style={{
-                    width: '40px',
-                    height: '40px',
-                    position: 'relative',
-                    marginRight: '10px',
-                  }}
-                >
-                  <Image
-                    src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
-                      chat.username
-                    )}`}
-                    alt={`${chat.username}'s avatar`}
-                    layout="fill"
-                    objectFit="cover"
-                    style={{ borderRadius: '50%' }}
-                  />
-                </div>
-                {/* Username */}
-                <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
-                  {chat.username} {chat.username === me ? '(Me)' : ''}
-                </span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </>
-  );
-}
-
-const searchInputStyle = {
-  width: '100%',
-  padding: '10px',
-  fontSize: '16px',
-  borderRadius: '5px',
-  border: '1px solid #4b2e83',
-  backgroundColor: '#2e2e4f',
-  color: '#fff',
-  marginBottom: '15px',
-};

frontend/app/WebSocketContext.js

@@ -1,86 +0,0 @@
-import { createContext, useContext, useState, useEffect } from 'react';
-
-const WebSocketContext = createContext(null);
-
-export const useWebSocket = () => {
-  return useContext(WebSocketContext);
-};
-
-export const WebSocketProvider = ({ children }) => {
-  const [ws, setWs] = useState(null);
-  const [status, setStatus] = useState('Disconnected');
-  const [retryCount, setRetryCount] = useState(0); // For retrying WebSocket connection
-  const [timeoutError, setTimeoutError] = useState(false); // Timeout error state
-
-  const maxRetries = 5; // Max retry attempts
-
-  useEffect(() => {
-    const relayUrl = process.env.NEXT_PUBLIC_RELAY_URL;
-
-    if (!relayUrl) {
-      console.error('Environment variable NEXT_PUBLIC_RELAY_URL is not defined.');
-      return;
-    }
-
-    const connectWebSocket = () => {
-      const socket = new WebSocket(relayUrl);
-
-      socket.onopen = () => {
-        console.log('WebSocket connection opened.');
-        setStatus('Connected');
-        setRetryCount(0); // Reset retry count on successful connection
-        setTimeoutError(false); // Reset timeout error
-      };
-
-      socket.onclose = () => {
-        console.log('WebSocket connection closed.');
-        setStatus('Disconnected');
-        handleReconnection();
-      };
-
-      socket.onerror = (error) => {
-        console.error('WebSocket error:', error);
-        setStatus('Error');
-        handleReconnection();
-      };
-
-      setWs(socket);
-    };
-
-    // Function to handle reconnection with retry
-    const handleReconnection = () => {
-      if (retryCount < maxRetries) {
-        setRetryCount(retryCount + 1);
-        setStatus('Reconnecting...');
-        console.log(`Attempting reconnect ${retryCount + 1}/${maxRetries}`);
-        setTimeout(() => connectWebSocket(), 2000 * (retryCount + 1)); // Retry with increasing delay
-      } else {
-        console.error('Max retries reached. WebSocket connection failed.');
-        setStatus('Failed');
-      }
-    };
-
-    connectWebSocket();
-
-    // Timeout mechanism to handle stuck connections
-    const timeout = setTimeout(() => {
-      if (status === 'Connecting' || status === 'Reconnecting') {
-        setTimeoutError(true);
-        setStatus('Timeout - Could not connect');
-      }
-    }, 10000); // 10 seconds timeout
-
-    return () => {
-      clearTimeout(timeout); // Cleanup timeout on unmount
-      if (ws) {
-        ws.close();
-      }
-    };
-  }, [status, retryCount]);
-
-  return (
-    <WebSocketContext.Provider value={{ ws, status, timeoutError }}>
-      {children}
-    </WebSocketContext.Provider>
-  );
-};

frontend/app/globals.css

@@ -1,12 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #15171f;
+  /* Deeper dark background */
+  --foreground: #E0E0E0;
+  /* Light gray text */
+  --sidebar-background: #14141b;
+  /* Darker sidebar background */
+  --primary: #1f202a;
+  --secondary: #2a2b3b;
+  /* Soft secondary background for content */
+  --accent: #4a557f;
+  --hover-accent: #5c608a;
+  /* Slightly lighter accent color for hover */
+  --button-background: #3a3b4c;
+  /* Button background */
+  --button-hover: #2D2D38;
+  /* Darker button hover */
+  --shadow-dark: rgba(0, 0, 0, 0.15);
+  /* Shadow for depth */
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #15171f;
+    /* Deeper dark background */
+    --foreground: #E0E0E0;
+    /* Light gray text */
+    --sidebar-background: #14141b;
+    /* Darker sidebar background */
+    --primary: #1f202a;
+    --secondary: #2a2b3b;
+    /* Soft secondary background for content */
+    --accent: #4a557f;
+    --hover-accent: #5c608a;
+    /* Slightly lighter accent color for hover */
+    --button-background: #3a3b4c;
+    /* Button background */
+    --button-hover: #2D2D38;
+    /* Darker button hover */
+    --shadow-dark: rgba(0, 0, 0, 0.15);
+    /* Shadow for depth */
   }
 }
 
@@ -40,3 +76,31 @@ a {
     color-scheme: dark;
   }
 }
+
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.025);
+  }
+}
+
+.pulse-and-fade {
+  animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
+}

frontend/app/layout.js

@@ -1,164 +1,43 @@
 'use client';
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { WebSocketProvider, useWebSocket } from './WebSocketContext';
+
 import './globals.css';
-import Sidebar from './Sidebar';
-import Auth from './Auth';
+import Sidebar from '@/components/Sidebar';
+import { NexusAuthWrapper } from "@components/NexusAuth";
+import { ToastContainer, Flip } from 'react-toastify';
+import { CheckCircleIcon, InformationCircleIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
 
-export default function RootLayout({ children }) {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [recipientList, setRecipientList] = useState([]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filteredUsers, setFilteredUsers] = useState([]);
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [isSignup, setIsSignup] = useState('');
-  const [sessionToken, setSessionToken] = useState(''); // Initialize sessionToken state
+import { ToastProvider } from "@lib/ToastContext";
 
-  useEffect(() => {
-    // Check if there's a valid session token in localStorage
-    const sessionToken = localStorage.getItem('sessionToken');
-    if (sessionToken) {
-      setIsLoggedIn(true);
-      setUsername(localStorage.getItem('me'));
-    }
-  }, []);
+export default function RootLayout({ children }) {
 
   return (
     <html lang="en">
       <body>
-        <WebSocketProvider>
-          <WebSocketLayout
-            username={username}
-            setUsername={setUsername}
-            password={password}
-            setPassword={setPassword}
-            confirmPassword={confirmPassword}
-            setConfirmPassword={setConfirmPassword}
-            isLoading={isLoading}
-            setIsLoading={setIsLoading}
-            error={error}
-            setError={setError}
-            recipientList={recipientList}
-            setRecipientList={setRecipientList}
-            searchQuery={searchQuery}
-            setSearchQuery={setSearchQuery}
-            filteredUsers={filteredUsers}
-            setFilteredUsers={setFilteredUsers}
-            isLoggedIn={isLoggedIn}
-            setIsLoggedIn={setIsLoggedIn}
-            isSignup={isSignup}
-            setIsSignup={setIsSignup}
-            sessionToken={sessionToken} // Pass sessionToken down to WebSocketLayout
-            setSessionToken={setSessionToken} // Pass setSessionToken down to WebSocketLayout
-          >
+        <ToastProvider>
+          <ToastContainer
+            transition={Flip}
+            theme="dark"
+            icon={({ type, theme }) => {
+              switch (type) {
+                case 'info':
+                  return <InformationCircleIcon className="text-indigo-400" />;
+                case 'error':
+                  return <InformationCircleIcon className="text-red-500" />;
+                case 'success':
+                  return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+                case 'warning':
+                  return <ExclamationCircleIcon className="text-yellow-500" />;
+                default:
+                  return null;
+              }
+            }}
+          />
+          <NexusAuthWrapper>
+            <Sidebar />
             {children}
-          </WebSocketLayout>
-        </WebSocketProvider>
+          </NexusAuthWrapper>
+        </ToastProvider>
       </body>
     </html>
   );
-}
-
-function WebSocketLayout({
-  username,
-  setUsername,
-  password,
-  setPassword,
-  confirmPassword,
-  setConfirmPassword,
-  isLoading,
-  setIsLoading,
-  error,
-  setError,
-  recipientList,
-  setRecipientList,
-  searchQuery,
-  setSearchQuery,
-  filteredUsers,
-  setFilteredUsers,
-  isLoggedIn,
-  setIsLoggedIn,
-  isSignup,
-  setIsSignup,
-  sessionToken,
-  setSessionToken, // Receive setSessionToken
-  children,
-}) {
-  const { ws, status } = useWebSocket();
-  const router = useRouter();
-
-  const handleUserSelect = (recipient) => {
-    router.push(`/u/${recipient}`);
-  };
-
-  useEffect(() => {
-    if (ws) {
-      ws.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        console.log('Received message:', data);
-
-        if (data.status === 'success') {
-          setIsLoading(false);
-          setIsLoggedIn(true);
-          setRecipientList(data.recipients || []);
-          localStorage.setItem('me', username);
-          localStorage.setItem('sessionToken', data.token); // Store session token
-          setSessionToken(data.token); // Update sessionToken state
-        } else if (data.status === 'error') {
-          setError(data.message);
-          setIsLoading(false);
-        }
-      };
-    }
-  }, [ws, username]);
-
-  return (
-    <div>
-      {isLoggedIn ? (
-        <div style={{ display: 'flex', minHeight: '100vh' }}>
-          <Sidebar
-            searchQuery={searchQuery}
-            setSearchQuery={setSearchQuery}
-            setFilteredUsers={setFilteredUsers}
-            filteredUsers={filteredUsers}
-            handleUserSelect={handleUserSelect}
-          />
-          <div style={{ flex: 1 }}>{children}</div>
-        </div>
-      ) : (
-        <div style={loginContainerStyle}>
-          <Auth
-            username={username}
-            setUsername={setUsername}
-            password={password}
-            setPassword={setPassword}
-            confirmPassword={confirmPassword}
-            setConfirmPassword={setConfirmPassword}
-            isLoading={isLoading}
-            setIsLoading={setIsLoading}
-            error={error}
-            setError={setError}
-            isSignup={isSignup}
-            setIsSignup={setIsSignup}
-            ws={ws}
-            status={status}
-            setSessionToken={setSessionToken} // Pass setSessionToken to Auth
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-const loginContainerStyle = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100vh',
-  backgroundColor: '#1c1c37',
-};
+}

frontend/app/not-found.js

@@ -0,0 +1,69 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+export default function Custom404() {
+  const router = useRouter();
+
+  const handleGoBack = () => {
+    router.back();
+  };
+
+  return (
+    <div style={styles.container}>
+      <h1 className='pulse-and-fade' style={styles.heading}>404 - Page Not Found</h1>
+      <p className='pulse-and-fade' style={styles.message}>
+        Oops! The page you're looking for doesn't exist. Let’s get you back on track!
+      </p>
+      <div className='pulse-and-fade' style={styles.buttons}>
+        <button onClick={handleGoBack} style={styles.button}>
+          Go Back
+        </button>
+        <button onClick={() => router.push('/')} style={styles.button}>
+          Go to Home
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    backgroundColor: 'var(--background)',
+    color: 'var(--foreground)',
+    textAlign: 'center',
+  },
+  heading: {
+    fontSize: '48px',
+    fontWeight: 'bold',
+    marginBottom: '20px',
+  },
+  message: {
+    fontSize: '18px',
+    marginBottom: '30px',
+    maxWidth: '400px',
+    color: 'var(--foreground)',
+  },
+  buttons: {
+    display: 'flex',
+    gap: '15px',
+  },
+  button: {
+    padding: '10px 20px',
+    fontSize: '16px',
+    borderRadius: '5px',
+    border: 'none',
+    cursor: 'pointer',
+    backgroundColor: 'var(--button-background)',
+    color: 'var(--foreground)',
+    transition: 'background-color 0.3s',
+  },
+  buttonHover: {
+    backgroundColor: 'var(--button-hover)',
+  },
+};

frontend/app/page.js

@@ -1,6 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import UserSearch from '@components/SearchUsers';
+import RecentChats from '@/components/RecentChats';
 
 export default function ChatPage() {
   const [me, setMe] = useState('');
@@ -16,16 +18,11 @@ export default function ChatPage() {
   }, []);
 
   return (
-    <div style={{ width: '100%', padding: '20px', backgroundColor: 'rgb(28, 28, 47)', minHeight: '100vh' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%', width: '100%' }}>
+    <div style={{ width: '100%', padding: '20px', backgroundColor: 'rgb(28, 28, 47)', height: '100dvh' }}>
+      <div className='pulse-and-fade' style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', width: '100%' }}>
         <div style={{ textAlign: 'center' }}>
-          <h1 style={{ color: '#4a4a4a', fontSize: '24px', marginBottom: '20px' }}>Welcome, {me || 'Stranger'} to Nexus!</h1>
-          <p style={{ color: '#7d7d7d', fontSize: '16px', marginBottom: '20px' }}>
-            Open the sidebar to find and start conversations with your contacts (or your future best friends).
-          </p>
-          <div style={{ fontSize: '14px', color: '#aaa' }}>
-            <p>{me ? 'No chats selected yet. Choose a conversation from the sidebar to get started.' : 'Log in to start chatting!'}</p>
-          </div>
+          <h1 style={{ color: '#4a4a4a', fontSize: '24px', marginBottom: '20px' }}>Nexus MS</h1>
+          <RecentChats/>
         </div>
       </div>
     </div>

frontend/app/search/page.js

@@ -0,0 +1,29 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import UserSearch from '@components/SearchUsers';
+
+export default function SearchUsersPage() {
+  const [me, setMe] = useState('');
+
+  useEffect(() => {
+    // Retrieve 'me' from localStorage because who doesn't like remembering things?
+    const storedMe = localStorage.getItem('me');
+    if (storedMe) {
+      setMe(storedMe);
+    } else {
+      toast.warn("Hey, there's no 'me' in localStorage. Are you sure you're logged in?");
+    }
+  }, []);
+
+  return (
+    <div className='search-page' style={{ width: '100%', padding: '20px', backgroundColor: 'rgb(28, 28, 47)', height: '100dvh' }}>
+      <div className='pulse-and-fade' style={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
+        <div style={{ textAlign: 'center' }}>
+          <h1 style={{ color: '#4a4a4a', fontSize: '24px', marginBottom: '20px' }}>Nexus MS</h1>
+          <UserSearch />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/u/[recipientusername]/page.js

@@ -2,61 +2,40 @@
 
 import { useState, useEffect } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { useWebSocket } from "../../WebSocketContext";
 import Image from "next/image";
+import NexusAuthApi from "@/lib/Nexus_Auth_API";
+import { toast } from "react-toastify";
 
 export default function ChatPage() {
   const { recipientusername } = useParams();
   const [recipient, setRecipient] = useState(null);
   const [message, setMessage] = useState("");
   const [chatLog, setChatLog] = useState([]);
-  const { ws } = useWebSocket();
 
   const [me, setMe] = useState("");
   const [recipientExists, setRecipientExists] = useState(true);
-  const router = useRouter(); // Hook to navigate
-
-  const servicesUrl = process.env.NEXT_PUBLIC_SERVICES_URL;
-  if (!servicesUrl) {
-    console.error('Environment variable NEXT_PUBLIC_SERVICES_URL is not defined.');
-    return;
-  }
-
-  useEffect(() => {
-    // Retrieve 'me' from localStorage
-    const storedMe = localStorage.getItem("me");
-    if (storedMe) {
-      setMe(storedMe);
-    }
-  }, []);
+  const router = useRouter();
 
   useEffect(() => {
-    if (recipientusername) {
+    const fetchRecipientData = async () => {
+      // Retrieve 'me' from localStorage
+      const storedMe = localStorage.getItem("me");
+      if (storedMe) {
+        setMe(storedMe);
+      }
+      // Check if the recipient exists
+      const response = await NexusAuthApi.isUsernameAvailable(recipientusername);
+      // Set the recipient from the URL
       setRecipient(recipientusername);
-    }
-  }, [recipientusername]);
+      if (response.username === recipientusername && response.is_available === false) {
+        setRecipientExists(true);
+      } else if (response.username === recipientusername && response.is_available === true) {
+        setRecipientExists(false);
+      }
+    };
 
-  useEffect(() => {
-    if (recipient) {
-      // Check if recipient exists by making an API request to the server
-      const checkUserExistence = async () => {
-        try {
-          const response = await fetch(`${servicesUrl}/api/user/${recipient}`);
-          if (response.ok) {
-            setRecipientExists(true);
-            const storedMessages = JSON.parse(localStorage.getItem(recipient)) || [];
-            setChatLog(formatMessages(storedMessages));
-          } else {
-            setRecipientExists(false);
-          }
-        } catch (error) {
-          console.error("Error checking user existence:", error);
-          setRecipientExists(false);
-        }
-      };
-      checkUserExistence();
-    }
-  }, [recipient, servicesUrl]);
+    fetchRecipientData();
+  }, []);
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -70,15 +49,6 @@ export default function ChatPage() {
   }, [recipient]);
 
   const handleSendMessage = () => {
-    if (!ws) {
-      alert("WebSocket is not connected.");
-      return;
-    }
-
-    if (!message.trim()) {
-      alert("Message cannot be empty.");
-      return;
-    }
 
     if (recipient && ws) {
       const msgData = JSON.stringify({ recipient, message });
@@ -115,6 +85,7 @@ export default function ChatPage() {
 
   return (
     <div
+      className='pulse-and-fade'
       style={{
         backgroundColor: "#1a1a2e",
         minHeight: "100vh",
@@ -197,11 +168,11 @@ export default function ChatPage() {
                       src={
                         entry.from === "You"
                           ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
-                              me
-                            )}&background=random`
+                            me
+                          )}&background=random`
                           : `https://ui-avatars.com/api/?name=${encodeURIComponent(
-                              recipient
-                            )}&background=random`
+                            recipient
+                          )}&background=random`
                       }
                       alt={`${entry.from}'s avatar`}
                       width={30}
@@ -230,7 +201,7 @@ export default function ChatPage() {
                   </div>
                 ))
               ) : (
-                <p>No messages yet</p>
+                <p className='page-content'>No messages yet</p>
               )}
             </div>
 
@@ -277,10 +248,10 @@ export default function ChatPage() {
             </div>
           </>
         ) : (
-          <p>User does not exist.</p>
+          <p className="className='page-content' flex justify-center">User does not exist.</p>
         )
       ) : (
-        <p>Loading recipient...</p>
+        <p className="className='page-content' flex justify-center">Loading recipient...</p>
       )}
     </div>
   );

frontend/components/NexusAuth.css

@@ -0,0 +1,193 @@
+/* Container Styling */
+.nexus-auth-form {
+    max-width: 400px;
+    margin: 10px auto;
+    padding: 20px;
+    border: none;
+    border-radius: 12px;
+    background: linear-gradient(145deg, var(--accent), var(--secondary));
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
+    color: var(--foreground);
+    animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
+}
+
+/* Header Styling */
+.nexus-auth-form h2 {
+    text-align: center;
+    margin-bottom: 10px;
+    color: var(--foreground);
+    font-size: 1.4rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    border-bottom: 2px solid var(--primary);
+    padding-bottom: 5px;
+}
+
+/* Form Group Styling */
+.form-group {
+    margin-bottom: 5px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    color: var(--foreground);
+    font-size: 1rem;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 10px;
+    background-color: var(--secondary);
+    color: var(--foreground);
+    border: 2px solid var(--primary);
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.form-group input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+    outline: none;
+}
+
+/* Error Message Styling */
+.error-message {
+    color: #ff6b6b; /* Vibrant red for errors */
+    font-size: 0.9rem;
+    margin-top: 5px;
+    font-weight: bold;
+}
+
+/* Submit Button Styling */
+.submit-button {
+    width: 100%;
+    padding: 14px;
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--foreground);
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+}
+
+.submit-button:hover {
+    background: linear-gradient(135deg, var(--secondary), var(--accent));
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+}
+
+.submit-button:disabled {
+    background-color: var(--primary);
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Signup/Login Section Styling */
+.nexus-auth-signup-login {
+    text-align: center;
+    margin-top: 40px;
+    animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
+}
+
+.nexus-auth-signup-login h1 {
+    margin-bottom: 20px;
+    color: var(--foreground);
+    font-size: 1.5rem;
+    font-weight: bold;
+    letter-spacing: 0.8px;
+}
+
+.nexus-auth-signup-login button {
+    padding: 12px 30px;
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--foreground);
+    background: linear-gradient(145deg, var(--primary), var(--secondary));
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.nexus-auth-signup-login button:hover {
+    background: linear-gradient(145deg, var(--secondary), var(--accent));
+    transform: translateY(-2px);
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nexus-auth-form {
+        padding: 20px;
+        max-width: 90%;
+    }
+
+    .nexus-auth-form h2 {
+        font-size: 1.5rem;
+    }
+
+    .form-group label {
+        font-size: 0.9rem;
+    }
+
+    .form-group input {
+        padding: 10px;
+        font-size: 0.95rem;
+    }
+
+    .submit-button {
+        padding: 12px;
+        font-size: 0.9rem;
+    }
+
+    .nexus-auth-signup-login h1 {
+        font-size: 1.3rem;
+    }
+
+    .nexus-auth-signup-login button {
+        font-size: 0.9rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .nexus-auth-form {
+        padding: 10px;
+        max-width: 90%;
+    }
+
+    .nexus-auth-form h2 {
+        font-size: 1.3rem;
+    }
+
+    .form-group label {
+        font-size: 0.8rem;
+    }
+
+    .form-group input {
+        padding: 8px;
+        font-size: 0.85rem;
+    }
+
+    .submit-button {
+        padding: 10px;
+        font-size: 0.85rem;
+    }
+
+    .nexus-auth-signup-login h1 {
+        font-size: 1.2rem;
+    }
+
+    .nexus-auth-signup-login button {
+        padding: 10px 20px;
+        font-size: 0.85rem;
+    }
+}

frontend/components/NexusAuth.js

@@ -0,0 +1,334 @@
+'use client';
+import './NexusAuth.css';
+import { useState, useEffect } from 'react';
+import NexusAuthApi from '@lib/Nexus_Auth_API';
+import SplashScreen from '@components/SplashScreen';
+import { useToast } from '@lib/ToastContext';
+import { CheckCircleIcon } from '@heroicons/react/20/solid';
+
+const SignupForm = ({ onSignup }) => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [email, setEmail] = useState('');
+    const [usernameAvailable, setUsernameAvailable] = useState(null); // null for initial state
+    const [doesUsernameContainInvalidChars, setDoesUsernameContainInvalidChars] = useState(false);
+    const [doesUsernameExceedMinLength, setDoesUsernameExceedMinLength] = useState(false);
+    const [passwordValid, setPasswordValid] = useState(false); // Initially invalid
+    const [formValid, setFormValid] = useState(false);
+    const [debounceTimeout, setDebounceTimeout] = useState(null); // Store timeout ID
+
+    const minUsernameLength = 3;
+
+    const validatePassword = (password) => {
+        return password.length >= 8;
+    };
+
+    const handleUsernameChange = (e) => {
+        const newUsername = e.target.value;
+        setUsername(newUsername);
+
+        // Reset username availability while typing
+        setUsernameAvailable(null);
+
+        // Clear any existing debounce timeout
+        if (debounceTimeout) {
+            clearTimeout(debounceTimeout);
+        }
+
+        // Check for invalid characters
+        const invalidChars = /[^a-zA-Z0-9_]/g;
+        if (invalidChars.test(newUsername)) {
+            setDoesUsernameContainInvalidChars(true);
+            setTimeout(() => {
+                setDoesUsernameContainInvalidChars(false);
+            }, 2000); // Show error for 2 seconds
+        }
+
+        // Basic sanitization to prevent SQL injection
+        const sanitizedUsername = newUsername.replace(invalidChars, '');
+
+        if (sanitizedUsername.length < minUsernameLength) {
+            setDoesUsernameExceedMinLength(false);
+            return;
+        } else {
+            setDoesUsernameExceedMinLength(true);}
+
+        if (sanitizedUsername.trim().length > 0) {
+            // Set a new timeout to check availability
+            const newTimeout = setTimeout(async () => {
+                try {
+                    const response = await NexusAuthApi.isUsernameAvailable(sanitizedUsername);
+                    setUsernameAvailable(response?.is_available === true);
+                } catch (error) {
+                    console.error('Error checking username availability:', error);
+                    setUsernameAvailable(null); // Fallback state
+                }
+            }, 1000); // 1-second debounce delay
+
+            setDebounceTimeout(newTimeout);
+        } else {
+            setUsernameAvailable(null); // Reset availability check when input is empty
+        }
+
+        // Set sanitized username
+        setUsername(sanitizedUsername);
+    };
+
+    const handlePasswordChange = (e) => {
+        const newPassword = e.target.value;
+        setPassword(newPassword);
+        setPasswordValid(validatePassword(newPassword));
+    };
+
+    const handleConfirmPasswordChange = (e) => {
+        setConfirmPassword(e.target.value);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        // Set email to null if it's empty
+        const emailValue = email.trim() === '' ? null : email;
+
+        if (password === confirmPassword && passwordValid) {
+            onSignup({ username, password, email: emailValue });
+        }
+    };
+
+    useEffect(() => {
+        setFormValid(
+            usernameAvailable === true &&
+            password === confirmPassword &&
+            passwordValid &&
+            username.length >= minUsernameLength &&
+            !doesUsernameContainInvalidChars
+        );
+    }, [username, password, confirmPassword, usernameAvailable, passwordValid]);
+
+    return (
+        <form onSubmit={handleSubmit} className="nexus-auth-form">
+            <h2>Signup</h2>
+            <div className="form-group">
+                <label>Username:</label>
+                <input
+                    type="text"
+                    value={username}
+                    onChange={handleUsernameChange}
+                    required
+                    className={usernameAvailable === false ? 'error' : ''} />
+                {usernameAvailable === true && username.length > 0 && (
+                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
+                )}
+                {doesUsernameExceedMinLength === false && (
+                    <p className="error-message text-red-500">Username must have more than {minUsernameLength} characters.</p>
+                )}
+                {doesUsernameContainInvalidChars === true && (
+                    <p className="error-message text-red-500">Username cannot contain invalid characters.</p>
+                )}
+                {usernameAvailable === false && (
+                    <p className="error-message text-red-500">Username is already taken</p>
+                )}
+                {usernameAvailable === null && username.length > 0 && (
+                    <p className="typing-message text-green-500">Checking username availability...</p>
+                )}
+            </div>
+            <div className="form-group">
+                <label>Password:</label>
+                <input
+                    type="password"
+                    value={password}
+                    onChange={handlePasswordChange}
+                    required
+                    className={passwordValid ? '' : 'error'} />
+                {passwordValid && (
+                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
+                )}
+                {!passwordValid && (
+                    <p className="error-message text-yellow-500">Password must be at least 8 characters long</p>
+                )}
+            </div>
+            <div className="form-group">
+                <label>Confirm Password:</label>
+                <input
+                    type="password"
+                    value={confirmPassword}
+                    onChange={handleConfirmPasswordChange}
+                    required
+                    className={password === confirmPassword ? '' : 'error'} />
+                {password === confirmPassword && confirmPassword.length > 0 && (
+                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
+                )}
+                {password !== confirmPassword && confirmPassword.length > 0 && (
+                    <p className="error-message text-red-500">Passwords do not match</p>
+                )}
+            </div>
+            <div className="form-group">
+                <label>Email (optional):</label>
+                <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)} />
+            </div>
+            <button type="submit" className="submit-button" disabled={!formValid}>
+                Signup
+            </button>
+        </form>
+    );
+};
+
+const LoginForm = ({ onLogin }) => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onLogin({ username, password });
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="nexus-auth-form">
+            <h2>Login</h2>
+            <div className="form-group">
+                <label>Username:</label>
+                <input
+                    type="text"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required />
+            </div>
+            <div className="form-group">
+                <label>Password:</label>
+                <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required />
+            </div>
+            <button type="submit" className="submit-button">
+                Login
+            </button>
+        </form>
+    );
+};
+
+export const NexusAuthWrapper = ({ children }) => {
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [isSignup, setIsSignup] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const toast = useToast();
+
+    useEffect(() => {
+        const validateUserSession = async () => {
+            const storedUsername = localStorage.getItem("me");
+            const storedToken = localStorage.getItem("s_tkn");
+            const storedUserID = localStorage.getItem("u_id");
+
+            if (storedUsername && storedToken && storedUserID) {
+                try {
+                    // Validate the token with the NexusAuthApi
+                    const response = await NexusAuthApi.validateToken(storedUserID, storedToken);
+
+                    if (response.data && response.data.user_id) {
+                        // Token is valid; response contains user details
+                        console.log("User is already logged in.");
+                        toast.info("Welcome back, " + response.data.username + "!");
+                        setIsLoggedIn(true);
+
+                        // Optionally, update localStorage with new details if needed
+                        localStorage.setItem("me", response.data.username);
+                        localStorage.setItem("s_tkn", response.data.access_token);
+                        localStorage.setItem("u_id", response.data.user_id);
+                        localStorage.setItem("a_l", response.data.access_level);
+                    } else if (response.status === 401) {
+                        // Token is invalid; clear local storage
+                        console.error("Token validation failed with status 401:");
+                        clearLocalStorage();
+                    } else {
+                        // Handle other errors (e.g., network issues)
+                        console.error("Token validation failed due to an unexpected error:", response.data);
+                        toast.error("Unable to validate token. Please check your connection.");
+                    }
+                } catch (error) {
+                    // Handle other errors (e.g., network issues)
+                    console.error("Token validation failed due to an unexpected error:", error);
+                    toast.error("Unable to validate token. Please check your connection.");
+
+                }
+            }
+            setIsLoading(false);
+
+        };
+
+        const clearLocalStorage = () => {
+            localStorage.removeItem("me");
+            localStorage.removeItem("s_tkn");
+            localStorage.removeItem("u_id");
+            localStorage.removeItem("a_l");
+            setIsLoggedIn(false);
+            toast.error("Session expired. Please login again.");
+        };
+
+        validateUserSession();
+    }, []);
+
+    const handleSignup = async (data) => {
+        setIsLoading(true);
+        try {
+            const response = await NexusAuthApi.signup(data.username, data.password, data.email);
+            console.log("Signup successful:", response);
+            setIsLoading(false);
+            toast.success('Signup successful. Please login to continue');
+            setIsSignup(false);
+        } catch (error) {
+            setIsLoading(false);
+            console.error("Signup failed:", error);
+            toast.error("Signup failed");
+        }
+    };
+
+    const handleLogin = async (data) => {
+        setIsLoading(true);
+        try {
+            const response = await NexusAuthApi.login(data.username, data.password);
+            console.log("Login successful:", response);
+            toast.success('Login successful.');
+            // Save username and token to localStorage
+            localStorage.setItem("me", response.username);
+            localStorage.setItem("s_tkn", response.access_token);
+            localStorage.setItem("u_id", response.user_id);
+            localStorage.setItem("a_l", response.access_level);
+
+            setIsLoggedIn(true);
+            setIsLoading(false);
+        } catch (error) {
+            setIsLoading(false);
+            console.error("Login failed:", error);
+            toast.error("Login failed");
+        }
+    };
+
+    if (isLoading) {
+        return <SplashScreen />;
+    }
+
+    return (
+        <div>
+            {isLoggedIn ? (
+                children
+            ) : (
+                <div className="nexus-auth-signup-login">
+                    <h1>Nexus Accounts</h1>
+                    <button onClick={() => setIsSignup(!isSignup)}>
+                        {isSignup ? "Already have an Account? Login" : "Don't have an Account? Signup"}
+                    </button>
+                    {isSignup ? (
+                        <SignupForm onSignup={handleSignup} />
+                    ) : (
+                        <LoginForm onLogin={handleLogin} />
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};

frontend/components/RecentChats.js

@@ -0,0 +1,82 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useState, useEffect } from 'react';
+
+export default function RecentChats() {
+    const router = useRouter();
+    const [me, setMe] = useState('');
+    const [allChats, setAllChats] = useState([]);
+    useEffect(() => {
+        // Retrieve 'me' from localStorage
+        const storedMe = localStorage.getItem('me');
+        if (storedMe) {
+            setMe(storedMe);
+        }
+
+        // Retrieve all chats stored in localStorage
+        const allKeys = Object.keys(localStorage);
+        const chats = allKeys.filter((key) => key !== 'me' && key !== 's_tkn' && key !== 'a_l' && key !== 'u_id' && key !== 'ally-supports-cache').map((key) => {
+            return {
+                username: key,
+                chatData: JSON.parse(localStorage.getItem(key)),
+            };
+        });
+
+        setAllChats(chats);
+    }, []);
+
+    const handleUserSelect = (username) => {
+        router.push(`/u/${username}`);
+    };
+
+    return (
+        <div>
+            <h1 style={{ color: '#fff', marginBottom: '10px' }}>Chats</h1>
+            {allChats.length === 0 ? (
+                <div className='pulse-and-fade' style={{ color: '#7d7d7d', fontSize: '16px', marginBottom: '20px' }}>
+                    <p>{me ? 'This looks empty. Open sidebar to go to the find page to look for someone to chat.' : 'Log in to start chatting!'}</p>
+                </div>
+            ) : (
+                <ul style={{ listStyleType: 'none', padding: 0 }}>
+                    {allChats.map((chat, index) => (
+                        <li
+                            key={index}
+                            style={{
+                                color: '#fff',
+                                cursor: 'pointer',
+                                marginBottom: '15px',
+                                display: 'flex',
+                                alignItems: 'center',
+                            }}
+                            onClick={() => handleUserSelect(chat.username)}
+                        >
+                            <div
+                                style={{
+                                    width: '40px',
+                                    height: '40px',
+                                    position: 'relative',
+                                    marginRight: '10px',
+                                }}
+                            >
+                                <Image
+                                    src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
+                                        chat.username
+                                    )}`}
+                                    alt={`${chat.username}'s avatar`}
+                                    layout="fill"
+                                    objectFit="cover"
+                                    style={{ borderRadius: '50%' }}
+                                />
+                            </div>
+                            <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
+                                {chat.username} {chat.username === me ? '(Me)' : ''}
+                            </span>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}

frontend/components/RelayAPI.js

@@ -0,0 +1,132 @@
+// RelayAPI.js - Next.js Wrapper for the WebSocket Server
+
+import { useEffect, useState, useCallback, useRef } from "react";
+
+const useWebSocket = (userId) => {
+  const [socket, setSocket] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [connectedChannels, setConnectedChannels] = useState(new Set());
+  const reconnectInterval = useRef(null);
+
+  const connect = useCallback(() => {
+    const ws = new WebSocket(`${process.env.NEXT_PUBLIC_WS_URL}/ws?user_id=${userId}`);
+
+    ws.onopen = () => {
+      console.debug("WebSocket connected.");
+      clearInterval(reconnectInterval.current);
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.debug("Received message:", data);
+        setMessages((prev) => [...prev, data]);
+      } catch (error) {
+        console.error("Failed to parse WebSocket message:", event.data);
+      }
+    };
+
+    ws.onclose = () => {
+      console.warn("WebSocket closed. Reconnecting...");
+      reconnectInterval.current = setInterval(() => connect(), 5000);
+    };
+
+    ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      ws.close();
+    };
+
+    setSocket(ws);
+  }, [userId]);
+
+  useEffect(() => {
+    if (!userId) return;
+
+    connect();
+
+    return () => {
+      clearInterval(reconnectInterval.current);
+      if (socket) socket.close();
+    };
+  }, [connect, userId, socket]);
+
+  const sendMessage = useCallback(
+    (action, channel, message, targetUserId = null) => {
+      if (!socket || socket.readyState !== WebSocket.OPEN) {
+        console.warn("WebSocket is not connected.");
+        return;
+      }
+
+      const payload = { action, channel, message, sender: userId };
+      if (targetUserId) payload.target_user_id = targetUserId;
+
+      try {
+        socket.send(JSON.stringify(payload));
+        console.debug("Sent message:", payload);
+      } catch (error) {
+        console.error("Failed to send WebSocket message:", error);
+      }
+    },
+    [socket, userId]
+  );
+
+  const joinChannel = useCallback(
+    (channel) => {
+      if (connectedChannels.has(channel)) return;
+
+      sendMessage("join", channel);
+      setConnectedChannels((prev) => new Set(prev).add(channel));
+    },
+    [sendMessage, connectedChannels]
+  );
+
+  const leaveChannel = useCallback(
+    (channel) => {
+      if (!connectedChannels.has(channel)) return;
+
+      sendMessage("leave", channel);
+      setConnectedChannels((prev) => {
+        const updated = new Set(prev);
+        updated.delete(channel);
+        return updated;
+      });
+    },
+    [sendMessage, connectedChannels]
+  );
+
+  const broadcast = useCallback(
+    (channel, message) => {
+      sendMessage("broadcast", channel, message);
+    },
+    [sendMessage]
+  );
+
+  const sendToUser = useCallback(
+    (targetUserId, message) => {
+      sendMessage("send_to_user", null, message, targetUserId);
+    },
+    [sendMessage]
+  );
+
+  return { messages, joinChannel, leaveChannel, broadcast, sendToUser };
+};
+
+export const RelayAPIProvider = ({ userId, children }) => {
+  const contextValue = useWebSocket(userId);
+
+  return (
+    <RelayAPIContext.Provider value={contextValue}>{children}</RelayAPIContext.Provider>
+  );
+};
+
+import React, { useContext } from "react";
+
+const RelayAPIContext = React.createContext(null);
+
+export const useRelayAPI = () => {
+  const context = useContext(RelayAPIContext);
+  if (!context) {
+    throw new Error("useRelayAPI must be used within a RelayAPIProvider");
+  }
+  return context;
+};

frontend/components/SearchUsers.js

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import NexusAuthApi from '@lib/Nexus_Auth_API';
+
+export default function UserSearch({ me }) {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filteredUsers, setFilteredUsers] = useState([]);
+    const router = useRouter();
+    const debounceTimeout = useRef(null);
+
+    const handleSearchChange = (e) => {
+        const query = e.target.value;
+        setSearchQuery(query);
+
+        if (debounceTimeout.current) {
+            clearTimeout(debounceTimeout.current);
+        }
+
+        debounceTimeout.current = setTimeout(async () => {
+            if (!query) {
+                setFilteredUsers([]);
+                return;
+            }
+
+            if (query.length > 2) {
+                try {
+                    const data = await NexusAuthApi.searchUsers(query);
+                    setFilteredUsers(Array.isArray(data) ? data : []);
+                } catch (error) {
+                    console.error('Error fetching search results:', error);
+                    setFilteredUsers([]);
+                }
+            } else {
+                setFilteredUsers([]);
+            }
+        }, 500); // Debounce delay of 500ms
+    };
+
+    const handleUserSelect = (recipient) => {
+        router.push(`/u/${recipient}`);
+    };
+
+    return (
+        <div style={styles.container}>
+            <input
+                type="text"
+                placeholder="Find People..."
+                value={searchQuery}
+                onChange={handleSearchChange}
+                style={styles.searchInput}
+            />
+
+            {searchQuery && (
+                <div
+                    style={{
+                        ...styles.searchResults,
+                        height: filteredUsers.length ? '70dvh' : '200px',
+                    }}
+                >
+                    {filteredUsers.length === 0 ? <h4 style={styles.searchResultsHeading}>Found Nothing</h4> : <h4 style={styles.searchResultsHeading}>Found</h4>}
+                    <ul style={styles.userList}>
+                        {Array.isArray(filteredUsers) &&
+                            filteredUsers.map((recipient, index) => (
+                                <li
+                                    className="pulse-and-fade"
+                                    key={index}
+                                    style={styles.userItem}
+                                    onClick={() => handleUserSelect(recipient)}
+                                >
+                                    <div style={styles.avatarContainer}>
+                                        <Image
+                                            src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
+                                                recipient
+                                            )}`}
+                                            alt={`${recipient}'s avatar`}
+                                            layout="fill"
+                                            objectFit="cover"
+                                            style={styles.avatar}
+                                        />
+                                    </div>
+                                    <span style={styles.username}>
+                                        {recipient} {recipient === me ? '(Me)' : ''}
+                                    </span>
+                                </li>
+                            ))}
+                    </ul>
+
+                </div>
+            )}
+        </div>
+    );
+}
+
+const styles = {
+    container: {
+        backgroundColor: 'var(--background)',
+        color: 'var(--foreground)',
+        padding: '20px',
+        borderRadius: '12px',
+        boxShadow: '0px 6px 12px rgba(0, 0, 0, 0.2)',
+        maxWidth: '600px',
+        margin: 'auto',
+        transition: 'all 0.5s ease',
+    },
+    searchInput: {
+        width: '100%',
+        padding: '12px',
+        fontSize: '16px',
+        borderRadius: '8px',
+        border: '1px solid var(--hover-accent)',
+        backgroundColor: 'var(--secondary)',
+        color: 'var(--foreground)',
+        marginBottom: '15px',
+        boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.1)',
+    },
+    searchResults: {
+        overflow: 'hidden',
+        transition: 'height 0.3s ease',
+        backgroundColor: 'var(--secondary)',
+        borderRadius: '8px',
+        padding: '10px',
+        boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+    },
+    searchResultsHeading: {
+        color: 'var(--foreground)',
+        marginBottom: '10px',
+        fontSize: '18px',
+        fontWeight: 'bold',
+    },
+    userList: {
+        listStyleType: 'none',
+        padding: 0,
+        maxHeight: '60dvh',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+    },
+    userItem: {
+        cursor: 'pointer',
+        marginBottom: '15px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '10px',
+        borderRadius: '8px',
+        backgroundColor: 'var(--hover-accent)',
+        color: 'var(--foreground)',
+        transition: 'background-color 0.3s',
+    },
+    avatarContainer: {
+        width: '50px',
+        height: '50px',
+        position: 'relative',
+        marginRight: '15px',
+        borderRadius: '50%',
+        overflow: 'hidden',
+    },
+    avatar: {
+        borderRadius: '50%',
+    },
+    username: {
+        fontSize: '16px',
+        fontWeight: '500',
+    },
+    noResults: {
+        color: 'var(--foreground-muted)',
+        fontSize: '14px',
+        textAlign: 'center',
+        marginTop: '10px',
+    },
+    recentChatsContainer: {
+        textAlign: 'center',
+        color: 'var(--foreground-muted)',
+        fontSize: '16px',
+        padding: '20px',
+    },
+};

frontend/components/Sidebar.js

@@ -0,0 +1,161 @@
+"use client";
+import { usePathname } from "next/navigation";
+import { Bars3Icon, Cog6ToothIcon, ArrowRightStartOnRectangleIcon, MagnifyingGlassIcon, ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import logo from "@assets/logo.jpg";
+
+export default function ChatSidebar() {
+  const pathname = usePathname();
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const sidebarRef = useRef(null);
+  const router = useRouter();
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
+        setIsCollapsed(true);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const logoStyle = {
+    width: isCollapsed ? "60px" : "150px",
+    borderRadius: "50px",
+    transition: "width 0.3s ease, height 0.3s ease",
+    marginBottom: 0,
+    marginTop: "35px",
+  };
+
+  const sidebarStyle = {
+    width: "180px",
+    left: isCollapsed ? "-180px" : "0",
+    backgroundColor: "var(--sidebar-background)",
+    color: "var(--foreground)",
+    padding: isCollapsed ? "15px" : "20px",
+    position: "fixed",
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    borderRight: "1px solid rgba(255, 255, 255, 0.1)",
+    transition: "left 0.3s ease, width 0.3s ease, padding 0.3s ease",
+    zIndex: 10,
+  };
+
+  const navLinkStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "5px",
+    padding: "10px 5px",
+    transition: "all 0.3s ease",
+    color: "var(--foreground)",
+    fontSize: "1em",
+  };
+
+  const activeNavLinkStyle = {
+    backgroundColor: "var(--hover-accent)",
+    borderRadius: "5px",
+    animation: "fadeIn .5s ease-in-out, pulse .5s ease-in-out",
+  };
+
+  const textStyle = {
+    opacity: isCollapsed ? 0 : 1,
+    transition: "opacity 0.3s ease",
+    pointerEvents: isCollapsed ? "none" : "auto",
+  };
+
+  const iconStyle = {
+    width: "30px",
+    height: "30px",
+    flexShrink: 0,
+  };
+
+  const toggleButtonStyle = {
+    position: "absolute",
+    top: "20px",
+    right: isCollapsed ? "-50px" : "10px",
+    width: "35px",
+    height: "35px",
+    backgroundColor: "var(--button-background)",
+    color: "var(--foreground)",
+    border: "none",
+    borderRadius: "10px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
+    transition: "background-color 0.3s ease, right 0.3s ease",
+  };
+
+  const handleLogout = () => {
+    const userID = localStorage.getItem('u_id');
+    const token = localStorage.getItem('s_tkn');
+    NexusAuthApi.logout(userID, token)
+      .then(() => {
+        clearLocalStorage();
+        router.push('/');
+        window.location.reload();
+      })
+      .catch((error) => {
+        console.error("Logout failed", error);
+      });
+  };
+
+  return (
+    <div ref={sidebarRef} className="sidebar-container" style={sidebarStyle}>
+      <div className="logo-container" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+        <Image style={logoStyle} src={logo} alt="Chat App Logo" />
+        <button
+          style={toggleButtonStyle}
+          onClick={() => toggleSidebar(!isCollapsed)}
+        >
+          <Bars3Icon style={{ transform: `rotate(${isCollapsed ? 0 : 90}deg)`, transition: "transform .3s", width: "20px" }} />
+        </button>
+      </div>
+      <ul className="nav-links" style={{ listStyleType: "none", marginTop: "20px", paddingLeft: "0" }}>
+        <li>
+          <Link href="/" legacyBehavior>
+            <a style={{ ...navLinkStyle, ...(pathname === "/" && activeNavLinkStyle) }}>
+              <ChatBubbleOvalLeftEllipsisIcon style={iconStyle} />
+              <span style={textStyle}>Chats</span>
+            </a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/search" legacyBehavior>
+            <a style={{ ...navLinkStyle, ...(pathname === "/search" && activeNavLinkStyle) }}>
+              <MagnifyingGlassIcon style={iconStyle} />
+              <span style={textStyle}>Find</span>
+            </a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/settings" legacyBehavior>
+            <a style={{ ...navLinkStyle, ...(pathname === "/settings" && activeNavLinkStyle) }}>
+              <Cog6ToothIcon style={iconStyle} />
+              <span style={textStyle}>Settings</span>
+            </a>
+          </Link>
+        </li>
+        <li>
+        <Link href="#logout" legacyBehavior>
+        <a style={{ ...navLinkStyle, ...(pathname === "#logout" && activeNavLinkStyle) }} onClick={handleLogout}>
+          <ArrowRightStartOnRectangleIcon style={iconStyle} />
+          <span style={textStyle}>Logout</span>
+          </a>
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+}

frontend/components/SplashScreen.js

@@ -0,0 +1,57 @@
+'use client';
+import logo from "@assets/logo.jpg";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+const SplashScreen = () => {
+    const [loadingMessage, setLoadingMessage] = useState("Initializing...");
+
+    useEffect(() => {
+        // Optionally update the loading message over time
+        const messages = ["Loading...", "Please wait...", "Almost there..."];
+        let index = 0;
+        const interval = setInterval(() => {
+            setLoadingMessage(messages[index]);
+            index = (index + 1) % messages.length;
+        }, 1500);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const splashScreenStyle = {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        width: "100vw",
+        backgroundColor: "var(--background)",
+        color: "white",
+        fontFamily: "'Poppins', sans-serif",
+        animation: "fadeIn 1.5s ease-in-out",
+    };
+
+    const logoStyle = {
+        width: "300px",
+        height: "300px",
+        marginBottom: "1rem",
+        borderRadius: "50%",
+        animation: "pulse 2s infinite",
+    };
+
+    const messageStyle = {
+        fontSize: "1.2rem",
+        fontWeight: "400",
+        textAlign: "center",
+        opacity: 0.8,
+    };
+
+    return (
+        <div style={splashScreenStyle}>
+            <Image style={logoStyle} src={logo} alt="App Logo" />
+            <p style={messageStyle}>{loadingMessage}</p>
+        </div>
+    );
+};
+
+export default SplashScreen;

frontend/jsconfig.json

@@ -1,7 +1,10 @@
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@components/*": ["./components/*"],
+      "@lib/*": ["./lib/*"],
+      "@assets/*": ["./assets/*"],
     }
   }
 }

frontend/lib/Nexus_Auth_API.js

@@ -0,0 +1,196 @@
+import axios from "axios";
+import { API_BASE_URL, DEBUG } from "./config";
+
+function debugLog(message, data = null) {
+  if (DEBUG) {
+    console.log(`[DEBUG] ${message}`);
+    if (data) {
+      console.log(data);
+    }
+  }
+}
+
+const NexusAuthApi = {
+  async signup(username, password, email = null) {
+    debugLog("Attempting signup", { username, email });
+
+    try {
+      // Construct the payload dynamically to exclude `email` if it's null
+      const payload = { username, password };
+      if (email) {
+        payload.email = email;
+      }
+
+      const response = await axios.post(`${API_BASE_URL}/auth/signup`, payload);
+      debugLog("Signup successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Signup failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async login(username, password) {
+    debugLog("Attempting login", { username });
+    try {
+      const response = await axios.post(
+        `${API_BASE_URL}/auth/login`,
+        { username, password }
+      );
+      debugLog("Login successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Login failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async logout(userId, token) {
+    debugLog("Attempting logout", { userId });
+    try {
+      const response = await axios.post(
+        `${API_BASE_URL}/auth/logout?user_id=${encodeURIComponent(userId)}&token=${encodeURIComponent(token)}`
+      );
+      debugLog("Logout successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Logout failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+
+  async validateToken(userId, token) {
+    debugLog("Validating token", { userId, token });
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/auth/validate?user_id=${encodeURIComponent(userId)}&token=${encodeURIComponent(token)}`
+      );
+      debugLog("Token validation successful", response);
+      return response;
+    } catch (error) {
+      debugLog("Token validation failed", error.response?.data || error);
+      return error;
+    }
+  },
+
+
+  async searchUsers(query) {
+    debugLog("Searching users", { query });
+    try {
+      const response = await axios.get(`${API_BASE_URL}/auth/search-users`, {
+        params: { query },
+      });
+      debugLog("User search successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("User search failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async isUsernameAvailable(query) {
+    debugLog("Searching users", { query });
+    try {
+      const response = await axios.get(`${API_BASE_URL}/auth/is-username-available`, {
+        params: { query },
+      });
+      debugLog("User search successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("User search failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async getUserId(username) {
+    debugLog("Fetching user ID", { username });
+    try {
+      const response = await axios.get(`${API_BASE_URL}/auth/get-user-id`, {
+        params: { username },
+      });
+      debugLog("User ID fetch successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("User ID fetch failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async updateOwnData(userId, updateData, token) {
+    debugLog("Updating own data", { userId, updateData });
+    try {
+      const response = await axios.put(`${API_BASE_URL}/auth/user/update`, updateData, {
+        params: { user_id: userId, token },
+      });
+      debugLog("Update own data successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Update own data failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  // Admin API
+  async getAllUsers(adminId, token) {
+    debugLog("Fetching all users", { adminId });
+    try {
+      const response = await axios.get(`${API_BASE_URL}/admin/users`, {
+        params: { user_id: adminId, token }
+      });
+      debugLog("Fetch all users successful", response.data);
+      return response;
+    } catch (error) {
+      debugLog("Fetch all users failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async getUser(adminId, token, userId) {
+    debugLog("Fetching user details", { adminId, userId });
+    try {
+      const response = await axios.get(`${API_BASE_URL}/admin/user/${userId}`, {
+        params: { admin_id: adminId, token },
+      });
+      debugLog("Fetch user details successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Fetch user details failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async updateUser(adminId, token, userId, updateData) {
+    debugLog("Updating user", { adminId, userId, updateData });
+    try {
+      const response = await axios.put(`${API_BASE_URL}/admin/user/${userId}`, updateData, {
+        params: { admin_id: adminId, token }
+      });
+      debugLog("Update user successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Update user failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  async updateAccessLevel(adminId, token, userId, accessLevel) {
+    debugLog("Updating access level", { adminId, userId, accessLevel });
+    try {
+      const response = await axios.put(
+        `${API_BASE_URL}/admin/user/${userId}/access-level`,
+        { access_level: accessLevel },
+        {
+          params: { admin_id: adminId, token }
+        }
+      );
+      debugLog("Update access level successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Update access level failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+};
+
+export default NexusAuthApi;

frontend/lib/ToastContext.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { createContext, useContext } from "react";
+import { toast } from "react-toastify";
+
+const ToastContext = createContext();
+
+export function ToastProvider({ children }) {
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}

frontend/lib/config.js

@@ -0,0 +1,6 @@
+export const API_BASE_URL = "https://hans-r-d-auth-nexus.hf.space/v1/api";
+export const DEBUG = true;
+export const VERSION = "v0.0.1 Debug";
+export const AUTH_VERSION = "v0.0.3 Debug";
+export const APP_NAME = "Nexus MS";
+export const APP_DESCRIPTION = "A privacy focused chat application";

frontend/package-lock.json

@@ -8,10 +8,31 @@
       "name": "nex-com",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.2.0",
+        "axios": "^1.7.9",
         "env-cmd": "^10.1.0",
         "next": "15.1.4",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-toastify": "^11.0.3"
+      },
+      "devDependencies": {
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.5.1",
+        "tailwindcss": "^3.4.17"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@emnapi/runtime": {
@@ -24,6 +45,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -385,6 +415,77 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "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/@next/env": {
       "version": "15.1.4",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.4.tgz",
@@ -519,6 +620,55 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -534,6 +684,191 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "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/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -545,6 +880,16 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001692",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz",
@@ -565,12 +910,59 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -589,8 +981,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -602,8 +994,8 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT",
-      "optional": true
+      "devOptional": true,
+      "license": "MIT"
     },
     "node_modules/color-string": {
       "version": "1.9.1",
@@ -616,6 +1008,18 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -639,6 +1043,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -649,6 +1075,41 @@
         "node": ">=8"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.87",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.87.tgz",
+      "integrity": "sha512-mPFwmEWmRivw2F8x3w3l2m6htAUN97Gy0kwpO++2m9iT1Gt8RCFVUfv9U/sIbHJ6rY4P6/ooqFL/eL7ock+pPg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/env-cmd": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
@@ -665,50 +1126,458 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+    "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",
-      "optional": true
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC"
+      "engines": {
+        "node": ">=6"
+      }
     },
-    "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
       "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": ">=8.6.0"
       }
     },
-    "node_modules/next": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.1.4.tgz",
-      "integrity": "sha512-mTaq9dwaSuwwOrcu3ebjDYObekkxRnXpuVL21zotM8qE2W0HBOdVIdg2Li9QjMEZrj73LN96LcWcz62V19FjAg==",
-      "license": "MIT",
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@next/env": "15.1.4",
-        "@swc/counter": "0.1.3",
-        "@swc/helpers": "0.5.15",
-        "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001579",
-        "postcss": "8.4.31",
-        "styled-jsx": "5.1.6"
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
+      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "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"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "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==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.1.4.tgz",
+      "integrity": "sha512-mTaq9dwaSuwwOrcu3ebjDYObekkxRnXpuVL21zotM8qE2W0HBOdVIdg2Li9QjMEZrj73LN96LcWcz62V19FjAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.1.4",
+        "@swc/counter": "0.1.3",
+        "@swc/helpers": "0.5.15",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -750,6 +1619,88 @@
         }
       }
     },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "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/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "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==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -759,25 +1710,182 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
-    "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
           "url": "https://opencollective.com/postcss/"
         },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
@@ -785,14 +1893,63 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "postcss-selector-parser": "^6.1.1"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
@@ -814,6 +1971,98 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.3.tgz",
+      "integrity": "sha512-cbPtHJPfc0sGqVwozBwaTrTu1ogB9+BLLjd4dDXd863qYLj7DGrQ2sg5RAChjFUB4yc3w8iXOtWcJqPK/6xqRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
@@ -894,6 +2143,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -921,6 +2183,110 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -944,12 +2310,167 @@
         }
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "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/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -964,6 +2485,117 @@
       "engines": {
         "node": ">= 8"
       }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
     }
   }
 }

frontend/package.json

@@ -9,9 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "axios": "^1.7.9",
     "env-cmd": "^10.1.0",
     "next": "15.1.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-toastify": "^11.0.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}