testing 101

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/modules/client/pages/CourseList.jsx

@@ -17,6 +17,7 @@ import { PageMeta } from "@/contexts/MetadataContext";
 import { useDateFormat } from "@/hooks/useDateFormat";
 import api from "@/utils/api.util";
 import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { Building2 } from "lucide-react";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -169,11 +170,16 @@ const CoursesList = () => {
     const [modalOpen,      setModalOpen]      = useState(false);
     const [selectedCourse, setSelectedCourse] = useState(null);
 
+    const [allCategories, setAllCategories] = useState([]);
+
     useEffect(() => {
         getCourses();
         api.get("/client/tiers/categories")
             .then(({ data }) => setTierCategories(data.data ?? []))
             .catch(() => {});
+        api.get("/client/courses/categories")
+            .then(({ data }) => setAllCategories(data.data ?? []))
+            .catch(() => {});
     }, []);
 
     // slug → category info map
@@ -183,13 +189,6 @@ const CoursesList = () => {
         return m;
     }, [tierCategories]);
 
-    // Collect unique product categories from loaded courses
-    const allCategories = useMemo(() => {
-        const map = new Map();
-        courses.forEach((c) => (c.categories ?? []).forEach((cat) => map.set(cat.id, cat)));
-        return [...map.values()];
-    }, [courses]);
-
     const filtered = useMemo(() =>
         courses
             .filter((c) => {
@@ -228,7 +227,7 @@ const CoursesList = () => {
         <div>
             <PageMeta title="Courses - STARR" description="Browse your available training courses." />
             <div className="py-24 bg-accent/70 min-h-screen">
-                <div className="flex flex-col gap-8 justify-between lg:container lg:mx-auto pt-2">
+                <div className="flex flex-col gap-4 justify-between lg:container lg:mx-auto pt-2">
                     <AppBreadcrumb items={items} />
 
                     {/* Search & Filters */}
@@ -298,10 +297,8 @@ const CoursesList = () => {
                         </div>
                     ) : paginated.length === 0 ? (
                         <div className="flex flex-col items-center justify-center py-20">
-                            <svg className="w-10 h-10 mb-3" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                            <p className="text-sm">No courses found</p>
+                            <Building2 className="size-40 text-primary" />
+                            <p className="text-md">No courses found</p>
                         </div>
                     ) : (
                         <div className="xs:pt-12 lg:pt-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-4">