UI Aupdate

frontend/package.json

@@ -9,6 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "axios": "^1.5.1",
     "class-variance-authority": "^0.7.0",

frontend/src/App.tsx

@@ -9,6 +9,7 @@ function App() {
       <Route path="/login" element={<LoginPage />} />
       <Route element={<ProtectedRoute />}>
         <Route path="/admin" element={<AdminPage />} />
+        <Route path="/jobs" element={<AdminPage />} />
       </Route>
       <Route path="*" element={<Navigate to="/admin" replace />} />
     </Routes>

frontend/src/components/ThemeToggle.tsx

@@ -1,12 +1,26 @@
 import { Moon, Sun } from "lucide-react";
-import { Button } from "./ui/button";
+import { Button, type ButtonProps } from "./ui/button";
 import { useTheme } from "../providers/theme-provider";
 
-export function ThemeToggle() {
+export function ThemeToggle({
+  className,
+  size = "icon",
+  variant = "outline"
+}: {
+  className?: string;
+  size?: ButtonProps["size"];
+  variant?: ButtonProps["variant"];
+}) {
   const { theme, toggleTheme } = useTheme();
 
   return (
-    <Button variant="outline" size="icon" aria-label="Tema değiştir" onClick={toggleTheme}>
+    <Button
+      variant={variant}
+      size={size}
+      aria-label="Tema değiştir"
+      onClick={toggleTheme}
+      className={className}
+    >
       {theme === "light" ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
     </Button>
   );

frontend/src/index.css

@@ -9,7 +9,7 @@
   --card-foreground: 0 0% 4%;
   --popover: 0 0% 100%;
   --popover-foreground: 0 0% 4%;
-  --primary: 0 0% 4%;
+  --primary: 180 1.2% 16.3%;
   --primary-foreground: 0 0% 98%;
   --secondary: 0 0% 96.1%;
   --secondary-foreground: 0 0% 9%;

frontend/src/pages/AdminPage.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { io, Socket } from "socket.io-client";
 import { toast } from "sonner";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHouse, faBriefcase, faArrowRightFromBracket, faUser } from "@fortawesome/free-solid-svg-icons";
 import { Button } from "../components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
 import { ThemeToggle } from "../components/ThemeToggle";
 import { useAuth } from "../providers/auth-provider";
 import { apiClient } from "../api/client";
+import { cn } from "../lib/utils";
 
 export function AdminPage() {
   const { user, token, logout } = useAuth();
@@ -48,22 +51,54 @@ export function AdminPage() {
     socket.emit("ping");
   };
 
+  const navigation = [
+    { label: "Home", to: "/admin", icon: faHouse },
+    { label: "Jobs", to: "/jobs", icon: faBriefcase }
+  ];
+
   return (
     <div className="min-h-screen bg-background text-foreground">
-      <header className="flex items-center justify-between border-b border-border px-6 py-4">
-        <div className="flex items-center gap-3">
-          <div className="text-lg font-semibold">Yönetim Paneli</div>
-          {user?.username && <span className="text-sm text-muted-foreground">Hoş geldin, {user.username}</span>}
+      <div className="flex min-h-screen">
+        <aside className="hidden w-64 flex-col border-r border-border bg-card/40 md:flex">
+          <div className="flex h-16 items-center border-b border-border px-6">
+            <span className="text-lg font-semibold tracking-tight">Wisecolt CI</span>
           </div>
-        <div className="flex items-center gap-3">
-          <ThemeToggle />
-          <Button variant="outline" onClick={handleLogout}>
+          <nav className="flex-1 space-y-1 px-3 py-4">
+            {navigation.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                className={({ isActive }) =>
+                  cn(
+                    "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition",
+                    isActive
+                      ? "bg-primary text-primary-foreground shadow-sm"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  )
+                }
+              >
+                <FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
+                <span>{item.label}</span>
+              </NavLink>
+            ))}
+          </nav>
+          <div className="mt-auto space-y-3 border-t border-border px-4 py-4">
+            <div className="flex gap-3">
+              <ThemeToggle size="icon" className="h-10 w-10 justify-center" />
+              <div className="flex h-10 flex-1 items-center gap-3 rounded-md border border-border bg-background px-3">
+                <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium text-foreground">{user?.username ?? "-"}</span>
+              </div>
+            </div>
+            <Button variant="outline" className="w-full justify-center gap-2" onClick={handleLogout}>
+              <FontAwesomeIcon icon={faArrowRightFromBracket} className="h-4 w-4" />
               Çıkış Yap
             </Button>
           </div>
-      </header>
+        </aside>
 
-      <main className="mx-auto grid max-w-4xl gap-6 px-6 py-10 md:grid-cols-2">
+        <main className="flex-1">
+          <div className="mx-auto grid max-w-5xl gap-6 px-6 py-10 md:grid-cols-2">
             <Card className="border-border card-shadow">
               <CardHeader>
                 <CardTitle>Bağlantı</CardTitle>
@@ -107,7 +142,9 @@ export function AdminPage() {
                 </div>
               </CardContent>
             </Card>
+          </div>
         </main>
       </div>
+    </div>
   );
 }