changed project struture.

Also addded a functional JWT token service.

Also added user react frontend

frontend_admin/other/components/Header.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import bike from "../../src/assets/bicycle-solid.svg";
+import user from "../../src/assets/circle-user-solid.svg";
+
+type HeaderProps = {
+  onLoginClick: () => void;
+};
+
+const Header: React.FC<HeaderProps> = ({ onLoginClick }) => (
+  <header className="fixed top-0 left-0 w-full h-20 bg-[#101c5e] flex items-center justify-between px-10 z-50 shadow">
+    <div className="flex items-center gap-3">
+      <img src={bike} alt="Bike Logo" className="h-10 w-10" />
+      <span className="text-white text-2xl font-semibold select-none">
+        Bikelane <b>Web</b>
+      </span>
+    </div>
+    <div className="flex items-center gap-4">
+      <img src={user} alt="User Icon" className="h-8 w-8" />
+      <button
+        onClick={onLoginClick}
+        className="bg-white text-[#101c5e] font-bold px-5 py-1 rounded-lg text-lg border-2 border-white hover:bg-gray-200 transition"
+      >
+        Login
+      </button>
+    </div>
+  </header>
+);
+
+export default Header;

frontend_admin/other/components/LoginCard.tsx

@@ -0,0 +1,72 @@
+import React, { useRef, useEffect } from "react";
+
+type LoginCardProps = {
+  onClose: () => void;
+  onSubmit: (username: string, password: string) => void;
+};
+
+const LoginCard: React.FC<LoginCardProps> = ({ onClose, onSubmit }) => {
+  const [username, setUsername] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (cardRef.current && !cardRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-40">
+      <div
+        ref={cardRef}
+        className="bg-gray-200 rounded-xl shadow-lg w-full max-w-md flex flex-col"
+      >
+        <div className="bg-[#101c5e] text-white rounded-t-xl px-8 py-4 text-center text-2xl font-bold">
+          Login
+        </div>
+        <form
+          className="flex flex-col gap-5 px-8 py-6"
+          onSubmit={(e) => {
+            e.preventDefault();
+            onSubmit(username, password);
+          }}
+        >
+          <label className="font-bold">
+            username
+            <input
+              type="text"
+              className="mt-2 w-full rounded-full px-5 py-2 bg-gray-400 outline-none"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoFocus
+              required
+            />
+          </label>
+          <label className="font-bold">
+            password
+            <input
+              type="password"
+              className="mt-2 w-full rounded-full px-5 py-2 bg-gray-400 outline-none"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </label>
+          <button
+            type="submit"
+            className="bg-[#101c5e] text-white font-bold rounded-lg py-3 mt-6 text-xl hover:bg-[#203080] transition"
+          >
+            Login
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginCard;