From 09c692dcdc5269229645798ebedae332099c20d2 Mon Sep 17 00:00:00 2001
From: Omar Abdelrahman Abbas <omar.abbas.7001@gmail.com>
Date: Tue, 1 Jul 2025 21:36:15 +0300
Subject: [PATCH 1/2] refactor: update TrainingOverviewPage and
 TrainingNavigation for improved UI and navigation links

---
 .../protected/trainings/[trainingId]/page.tsx | 68 ++++++-------------
 .../training/TrainingNavigation.tsx           | 28 +++-----
 2 files changed, 32 insertions(+), 64 deletions(-)

diff --git a/src/app/protected/trainings/[trainingId]/page.tsx b/src/app/protected/trainings/[trainingId]/page.tsx
index 058462f7..6ff7eb06 100644
--- a/src/app/protected/trainings/[trainingId]/page.tsx
+++ b/src/app/protected/trainings/[trainingId]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { BookOpen, Users, Trophy, Bell } from "lucide-react";
+import { BookOpen, Users, Trophy } from "lucide-react";
 import { TypographyH1 } from "@/components/ui/typography";
 import { useTrainingContext } from "@/providers/training";
 import { useParams } from "next/navigation";
@@ -73,29 +73,8 @@ export default function TrainingOverviewPage() {
         </Card>
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Bell className="h-5 w-5" />
-              Announcements
-            </CardTitle>
-            <CardDescription>
-              Important updates and news about this training
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="text-center py-8">
-              <Bell className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-              <p className="text-muted-foreground">No announcements yet.</p>
-              <p className="text-sm text-muted-foreground mt-2">
-                Check back later for updates
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card className="md:col-span-2 lg:col-span-3">
           <CardHeader>
             <CardTitle>Quick Actions</CardTitle>
             <CardDescription>
@@ -103,28 +82,25 @@ export default function TrainingOverviewPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between p-3 rounded-lg border">
-                <div>
-                  <p className="font-medium">View Materials</p>
-                  <p className="text-sm text-muted-foreground">Access training resources</p>
-                </div>
-                <BookOpen className="h-4 w-4 text-muted-foreground" />
-              </div>
-              <div className="flex items-center justify-between p-3 rounded-lg border">
-                <div>
-                  <p className="font-medium">Join Contests</p>
-                  <p className="text-sm text-muted-foreground">Participate in competitions</p>
-                </div>
-                <Trophy className="h-4 w-4 text-muted-foreground" />
-              </div>
-              <div className="flex items-center justify-between p-3 rounded-lg border">
-                <div>
-                  <p className="font-medium">Check Leaderboard</p>
-                  <p className="text-sm text-muted-foreground">See your ranking</p>
-                </div>
-                <Users className="h-4 w-4 text-muted-foreground" />
-              </div>
+            <div className="flex flex-col gap-3">
+              <a href={`/protected/trainings/${trainingIdNumber}/materials`}>
+                <button className="flex items-center gap-2 w-full px-4 py-2 rounded border hover:bg-muted transition">
+                  <BookOpen className="h-5 w-5 text-muted-foreground" />
+                  <span className="font-medium">Materials</span>
+                </button>
+              </a>
+              <a href={`/protected/trainings/${trainingIdNumber}/contests`}>
+                <button className="flex items-center gap-2 w-full px-4 py-2 rounded border hover:bg-muted transition">
+                  <Trophy className="h-5 w-5 text-muted-foreground" />
+                  <span className="font-medium">Contests</span>
+                </button>
+              </a>
+              <a href={`/protected/trainings/${trainingIdNumber}/leaderboard`}>
+                <button className="flex items-center gap-2 w-full px-4 py-2 rounded border hover:bg-muted transition">
+                  <Users className="h-5 w-5 text-muted-foreground" />
+                  <span className="font-medium">Leaderboard</span>
+                </button>
+              </a>
             </div>
           </CardContent>
         </Card>
diff --git a/src/components/training/TrainingNavigation.tsx b/src/components/training/TrainingNavigation.tsx
index f0a9b46a..62b26b49 100644
--- a/src/components/training/TrainingNavigation.tsx
+++ b/src/components/training/TrainingNavigation.tsx
@@ -3,11 +3,7 @@ import Link from "next/link";
 import React from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-
-export type TrainingNavLink = {
-  href: string;
-  label: string;
-};
+import { Home, BookOpen, Trophy, Users } from "lucide-react";
 
 export async function TrainingNavigation({
   trainingId,
@@ -19,17 +15,11 @@ export async function TrainingNavigation({
   // Fetch permissions for the user
 
   // Define navigation links
-  const links: TrainingNavLink[] = [
-    { href: `/protected/trainings/${trainingId}`, label: "Overview" },
-    {
-      href: `/protected/trainings/${trainingId}/materials`,
-      label: "Materials",
-    },
-    { href: `/protected/trainings/${trainingId}/contests`, label: "Contests" },
-    {
-      href: `/protected/trainings/${trainingId}/leaderboard`,
-      label: "Leaderboard",
-    },
+  const links = [
+    { href: `/protected/trainings/${trainingId}`, label: "Overview", icon: <Home className="w-4 h-4" /> },
+    { href: `/protected/trainings/${trainingId}/materials`, label: "Materials", icon: <BookOpen className="w-4 h-4" /> },
+    { href: `/protected/trainings/${trainingId}/contests`, label: "Contests", icon: <Trophy className="w-4 h-4" /> },
+    { href: `/protected/trainings/${trainingId}/leaderboard`, label: "Leaderboard", icon: <Users className="w-4 h-4" /> },
   ];
 
   // Only show links the user has permission for, or always Overview if any permission
@@ -42,9 +32,11 @@ export async function TrainingNavigation({
           variant="ghost"
           size="sm"
           asChild
-          className="font-medium"
+          className="font-medium flex items-center gap-2"
         >
-          <Link href={link.href}>{link.label}</Link>
+          <Link href={link.href} className="flex items-center gap-2">
+            {link.icon} {link.label}
+          </Link>
         </Button>
       ))}
     </nav>

From 1a6cd36533defe586f6183a016817d9b1fa03942 Mon Sep 17 00:00:00 2001
From: Omar Abdelrahman Abbas <omar.abbas.7001@gmail.com>
Date: Tue, 1 Jul 2025 21:41:48 +0300
Subject: [PATCH 2/2] refactor: remove async from TrainingNavigation component
 for cleaner implementation

---
 src/components/training/TrainingNavigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/training/TrainingNavigation.tsx b/src/components/training/TrainingNavigation.tsx
index 62b26b49..c89f601e 100644
--- a/src/components/training/TrainingNavigation.tsx
+++ b/src/components/training/TrainingNavigation.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { Home, BookOpen, Trophy, Users } from "lucide-react";
 
-export async function TrainingNavigation({
+export function TrainingNavigation({
   trainingId,
   className = "",
 }: {