adsdasd

frontend/app/dashboard/page.tsx

@@ -1,21 +1,22 @@
 import { redirect } from "next/navigation";
 import { cookies } from "next/headers";
 import { apiFetch, ApiError } from "@/lib/api";
-import { BlogPost, User, UserRole, CurrentUser } from "@/lib/types";
+import { BlogPost, User, UserRole, CurrentUser, PostStatus } from "@/lib/types";
 import { PostsTable } from "./components/posts-table";
 import { UsersTable } from "./components/users-table";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
-import { LayoutDashboard, Users, FileText, ShieldAlert } from "lucide-react";
+  FileText,
+  Users,
+  Eye,
+  TrendingUp,
+  CheckCircle2,
+  Clock,
+  Archive,
+} from "lucide-react";
 
-// ── Decode JWT payload without verification (public payload info only) ─────────
+// ── JWT decode (no verification — display only) ────────────────────────────
 function decodeJwtPayload(token: string): CurrentUser | null {
   try {
     const base64Payload = token.split(".")[1];
@@ -26,179 +27,217 @@ function decodeJwtPayload(token: string): CurrentUser | null {
   }
 }
 
-const roleColor: Record<UserRole, string> = {
-  [UserRole.ADMIN]: "bg-red-100 text-red-800 border-red-200",
-  [UserRole.MANAGER]: "bg-amber-100 text-amber-800 border-amber-200",
+const rolePill: Record<UserRole, string> = {
+  [UserRole.ADMIN]: "bg-red-100 text-red-700 border-red-200",
+  [UserRole.MANAGER]: "bg-amber-100 text-amber-700 border-amber-200",
   [UserRole.MEMBER]: "bg-blue-100 text-blue-700 border-blue-200",
 };
 
+// ── Stat card ──────────────────────────────────────────────────────────────
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  sub,
+  accent,
+}: {
+  icon: React.ElementType;
+  label: string;
+  value: number | string;
+  sub?: string;
+  accent?: string;
+}) {
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between gap-2">
+          <div>
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
+              {label}
+            </p>
+            <p className={`text-3xl font-bold tracking-tight ${accent ?? ""}`}>
+              {value}
+            </p>
+            {sub && (
+              <p className="text-xs text-muted-foreground mt-1">{sub}</p>
+            )}
+          </div>
+          <div className="h-9 w-9 rounded-lg bg-muted flex items-center justify-center shrink-0">
+            <Icon className="h-4.5 w-4.5 text-muted-foreground" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ── Page ───────────────────────────────────────────────────────────────────
 export default async function DashboardPage() {
-  // ── Auth check ─────────────────────────────────────────────────────────────
+  /* Auth */
   const cookieStore = await cookies();
   const accessToken = cookieStore.get("accessToken")?.value;
-
-  if (!accessToken) {
-    redirect("/auth");
-  }
+  if (!accessToken) redirect("/auth");
 
   const currentUser = decodeJwtPayload(accessToken);
-  if (!currentUser) {
-    redirect("/auth");
-  }
+  if (!currentUser) redirect("/auth");
 
-  // ── Fetch posts ────────────────────────────────────────────────────────────
+  /* Posts */
   let posts: BlogPost[] = [];
   try {
     const data = await apiFetch<{ posts: BlogPost[]; total: number }>(
-      "/blog-posts?pageSize=50"
+      "/blog-posts?pageSize=100"
     );
     posts = data.posts;
   } catch (err) {
-    if (err instanceof ApiError && err.status === 401) {
-      redirect("/auth");
-    }
-    // Non-fatal — show empty list
+    if (err instanceof ApiError && err.status === 401) redirect("/auth");
   }
 
-  // ── Fetch users (ADMIN only) ───────────────────────────────────────────────
+  /* Users (ADMIN only) */
   let users: User[] = [];
   if (currentUser.role === UserRole.ADMIN) {
     try {
       const data = await apiFetch<{ users: User[]; total: number }>(
-        "/users?pageSize=50"
+        "/users?pageSize=100"
       );
       users = data.users;
-    } catch {
-      // Non-fatal — show empty list
-    }
+    } catch { /* non-fatal */ }
   }
 
+  /* Stats */
+  const published = posts.filter((p) => p.status === PostStatus.PUBLISHED).length;
+  const drafts = posts.filter((p) => p.status === PostStatus.DRAFT).length;
+  const archived = posts.filter((p) => p.status === PostStatus.ARCHIVED).length;
+  const totalViews = posts.reduce((s, p) => s + (p.views ?? 0), 0);
+
   const displayName = currentUser.name || currentUser.email;
+  const isAdmin = currentUser.role === UserRole.ADMIN;
 
   return (
-    <div className="space-y-6">
-      {/* ── Header ──────────────────────────────────────────────────────────── */}
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="flex items-center gap-3">
-          <LayoutDashboard className="h-6 w-6 text-muted-foreground" />
+    <div className="min-h-screen bg-muted/20">
+      {/* ── Top header bar ──────────────────────────────────────────────────── */}
+      <div className="border-b bg-background">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex flex-wrap items-center justify-between gap-3">
           <div>
-            <h1 className="text-2xl font-bold">Dashboard</h1>
-            <p className="text-sm text-muted-foreground">
-              Manage your blog content and users
+            <h1 className="text-xl font-bold">Dashboard</h1>
+            <p className="text-xs text-muted-foreground">
+              Welcome back, <span className="font-medium text-foreground">{displayName}</span>
             </p>
           </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground">{displayName}</span>
           <span
-            className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${roleColor[currentUser.role as UserRole]}`}
+            className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold ${rolePill[currentUser.role as UserRole]}`}
           >
             {currentUser.role}
           </span>
         </div>
       </div>
 
-      {/* ── Stats strip ─────────────────────────────────────────────────────── */}
-      <div className="grid gap-4 sm:grid-cols-3">
-        <Card>
-          <CardContent className="pt-5">
-            <div className="flex items-center gap-3">
-              <FileText className="h-8 w-8 text-muted-foreground/60" />
-              <div>
-                <p className="text-2xl font-bold">{posts.length}</p>
-                <p className="text-xs text-muted-foreground">Total posts</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-5">
-            <div className="flex items-center gap-3">
-              <FileText className="h-8 w-8 text-emerald-500/60" />
-              <div>
-                <p className="text-2xl font-bold">
-                  {posts.filter((p) => p.status === "published").length}
-                </p>
-                <p className="text-xs text-muted-foreground">Published</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-5">
-            <div className="flex items-center gap-3">
-              <FileText className="h-8 w-8 text-zinc-400/60" />
-              <div>
-                <p className="text-2xl font-bold">
-                  {posts.filter((p) => p.status === "draft").length}
-                </p>
-                <p className="text-xs text-muted-foreground">Drafts</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-6 space-y-6">
 
-      <Separator />
-
-      {/* ── Posts section ───────────────────────────────────────────────────── */}
-      <section className="space-y-4">
-        <div className="flex items-center gap-2">
-          <FileText className="h-5 w-5 text-muted-foreground" />
-          <h2 className="text-xl font-semibold">Posts</h2>
-          <Badge variant="secondary" className="text-xs">
-            {posts.length}
-          </Badge>
+        {/* ── Stats grid ────────────────────────────────────────────────────── */}
+        <div className={`grid gap-4 ${isAdmin ? "sm:grid-cols-2 lg:grid-cols-4" : "sm:grid-cols-3"}`}>
+          <StatCard
+            icon={FileText}
+            label="Total posts"
+            value={posts.length}
+            sub={`${published} published`}
+          />
+          <StatCard
+            icon={CheckCircle2}
+            label="Published"
+            value={published}
+            accent="text-emerald-600"
+          />
+          <StatCard
+            icon={Clock}
+            label="Drafts"
+            value={drafts}
+            accent="text-zinc-500"
+          />
+          {isAdmin && (
+            <>
+              <StatCard
+                icon={Eye}
+                label="Total views"
+                value={totalViews.toLocaleString()}
+                sub="across all posts"
+                accent="text-primary"
+              />
+            </>
+          )}
         </div>
-        <PostsTable initialPosts={posts} userRole={currentUser.role as UserRole} />
-      </section>
 
-      {/* ── Users section (ADMIN only) ───────────────────────────────────────── */}
-      {currentUser.role === UserRole.ADMIN && (
-        <>
-          <Separator />
-          <section className="space-y-4">
-            <div className="flex items-center gap-2">
-              <Users className="h-5 w-5 text-muted-foreground" />
-              <h2 className="text-xl font-semibold">Users</h2>
-              <Badge variant="secondary" className="text-xs">
-                {users.length}
-              </Badge>
-            </div>
-            {users.length === 0 ? (
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-base">
-                    <ShieldAlert className="h-4 w-4" /> No users loaded
-                  </CardTitle>
-                  <CardDescription>
-                    Unable to fetch user list. Check your backend connection.
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-            ) : (
-              <UsersTable initialUsers={users} />
+        {/* Second row for admin — archived + users */}
+        {isAdmin && (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <StatCard
+              icon={Archive}
+              label="Archived"
+              value={archived}
+              accent="text-amber-600"
+            />
+            <StatCard
+              icon={Users}
+              label="Total users"
+              value={users.length}
+              sub={`${users.filter((u) => u.isActive).length} active`}
+            />
+            <StatCard
+              icon={TrendingUp}
+              label="Avg. views / post"
+              value={posts.length ? Math.round(totalViews / posts.length).toLocaleString() : "—"}
+            />
+          </div>
+        )}
+
+        {/* ── Tabs ──────────────────────────────────────────────────────────── */}
+        <Tabs defaultValue="posts" className="space-y-4">
+          <TabsList className={isAdmin ? "" : "w-auto"}>
+            <TabsTrigger value="posts" className="gap-1.5">
+              <FileText className="h-3.5 w-3.5" />
+              Posts
+              <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground ml-0.5">
+                {posts.length}
+              </span>
+            </TabsTrigger>
+            {isAdmin && (
+              <TabsTrigger value="users" className="gap-1.5">
+                <Users className="h-3.5 w-3.5" />
+                Users
+                <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground ml-0.5">
+                  {users.length}
+                </span>
+              </TabsTrigger>
             )}
-          </section>
-        </>
-      )}
+          </TabsList>
 
-      {/* ── Member notice ───────────────────────────────────────────────────── */}
-      {currentUser.role === UserRole.MEMBER && (
-        <Card className="border-dashed">
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <ShieldAlert className="h-4 w-4 text-muted-foreground" />
-              Read-only access
-            </CardTitle>
-            <CardDescription>
-              You have the <strong>MEMBER</strong> role. You can view posts but
-              cannot create, edit, or delete them. Contact an admin to upgrade
-              your role.
-            </CardDescription>
-          </CardHeader>
-        </Card>
-      )}
+          {/* Posts tab */}
+          <TabsContent value="posts" className="mt-0">
+            <PostsTable
+              initialPosts={posts}
+              userRole={currentUser.role as UserRole}
+            />
+          </TabsContent>
+
+          {/* Users tab (admin only) */}
+          {isAdmin && (
+            <TabsContent value="users" className="mt-0">
+              <UsersTable initialUsers={users} />
+            </TabsContent>
+          )}
+        </Tabs>
+
+        {/* Member read-only notice */}
+        {currentUser.role === UserRole.MEMBER && (
+          <Card className="border-dashed border-muted-foreground/30 bg-muted/20">
+            <CardContent className="py-4 px-5">
+              <p className="text-sm text-muted-foreground">
+                <span className="font-semibold text-foreground">Read-only access.</span>{" "}
+                You can view posts but cannot create, edit, or delete them. Contact an admin to upgrade your role.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
     </div>
   );
 }