added frontent authentication,backend ticket service, frontend ticket creation

frontend/src/components/BackButton.jsx

@@ -0,0 +1,11 @@
+import { FaArrowCircleLeft } from "react-icons/fa";
+import { Link } from "react-router-dom";
+
+export const BackButton = ({ url }) => {
+  return (
+    <Link to={url} className="btn btn-reverse btn-back">
+      <FaArrowCircleLeft />
+      Back
+    </Link>
+  );
+};

frontend/src/components/Header.jsx

@@ -0,0 +1,47 @@
+import { FaSignInAlt, FaSignOutAlt, FaUser } from "react-icons/fa";
+import { Link, useNavigate } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { reset, logout } from "../features/auth/authSlice";
+
+function Header() {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { user } = useSelector((state) => state.auth);
+
+  const onLogout = () => {
+    dispatch(logout());
+    dispatch(reset());
+    navigate("/");
+  };
+  return (
+    <header className="header">
+      <div className="logo">
+        <Link to="/">Support Desk</Link>
+      </div>
+      <ul>
+        {user ? (
+          <li>
+            <button onClick={onLogout} className="btn">
+              <FaSignOutAlt />
+              Logout
+            </button>
+          </li>
+        ) : (
+          <>
+            <li>
+              <Link to="login">
+                <FaSignInAlt /> Login
+              </Link>
+            </li>
+            <li>
+              <Link to="register">
+                <FaUser /> Register
+              </Link>
+            </li>
+          </>
+        )}
+      </ul>
+    </header>
+  );
+}
+export default Header;

frontend/src/components/PrivateRoute.jsx

@@ -0,0 +1,13 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuthStatus } from "../hooks/useAuthStatus";
+import Spinner from "./Spinner";
+
+function PrivateRoute() {
+  const { loggedIn, checkingStatus } = useAuthStatus();
+  if (checkingStatus) {
+    return <Spinner />;
+  }
+
+  return loggedIn ? <Outlet /> : <Navigate to="/login" />;
+}
+export default PrivateRoute;

frontend/src/components/Spinner.jsx

@@ -0,0 +1,8 @@
+function Spinner() {
+  return (
+    <div className="=loadingSpinnerContainer">
+      <div className="loadingSpinner"></div>
+    </div>
+  );
+}
+export default Spinner;