feat: update UI dashboard page

src/pages/Dashboard/DashboardPage.jsx

@@ -1,29 +1,54 @@
-import PageHeader from '../../components/PageHeader.jsx';
-import StatGrid from '../../components/StatGrid.jsx';
-import { Typography, SearchField, Separator } from '@heroui/react';
+import CourseCard from '../../components/CourseCard.jsx';
+import {
+  Typography,
+  SearchField,
+  Separator,
+  Button,
+  Tabs
+} from '@heroui/react';
 import {
   BellIcon,
   QuestionMarkCircleIcon,
-  UserCircleIcon
+  UserCircleIcon,
+  FunnelIcon,
+  PlusIcon
 } from '@heroicons/react/16/solid';
 
 const stats = [
-  { label: 'Khoa hoc dang mo', value: '24' },
-  { label: 'Hoc vien', value: '1,248' },
-  { label: 'Lop trong tuan', value: '18' },
-  { label: 'Ty le hoan thanh', value: '82%' }
+  {
+    code: 'LDR-101',
+    title: 'Foundations of Modern Leadership',
+    description:
+      'An introductory course covering essential leadership principles for new managers.',
+    status: 'Published',
+    lastUpdate: '2026-08-19'
+  },
+  {
+    code: 'TEC-204',
+    title: 'Advanced Cloud Architecture Patterns',
+    description:
+      'Deep dive into scalable cloud infrastructure design and implementation strategies.',
+    status: 'Draft',
+    lastUpdate: '2026-08-19'
+  },
+  {
+    code: 'CMP-099',
+    title: '2022 Annual Compliance Review',
+    description: 'Outdated compliance materials from the previous fiscal year.',
+    status: 'Archived',
+    lastUpdate: '2026-08-19'
+  }
 ];
 
+const courseImage =
+  'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=80';
+
 function DashboardPage() {
   return (
     <>
-      {/* <PageHeader
-        title="Tong quan"
-        description="Theo doi nhanh tinh hinh dao tao va cac chi so LMS."
-      /> */}
       <div className="mb-3 flex flex-row items-center justify-between">
         <SearchField name="search">
-          <SearchField.Group className="w-[280px]">
+          <SearchField.Group className="rounded-xl border border-gray-300 w-100">
             <SearchField.SearchIcon />
 
             <SearchField.Input
@@ -34,22 +59,90 @@ function DashboardPage() {
             <SearchField.ClearButton />
           </SearchField.Group>
         </SearchField>
-        <div className="flex flex-row items-center gap-2">
+        <div className="flex flex-row items-center gap-5">
           <BellIcon className="mr-1 inline h-6 w-6" />
           <QuestionMarkCircleIcon className="mr-1 inline h-6 w-6" />
           <UserCircleIcon className="mr-1 inline h-6 w-6" />
         </div>
       </div>
       <Separator className="my-4" />
-      <div className="mb-4">
-        <Typography variant="h3" className="mb-2">
-          Course
-        </Typography>
-        <Typography variant="body1" className="text-gray-600">
-          Manage and organize your learning content.
-        </Typography>
+      <div className="mb-4 flex flex-row items-center justify-between">
+        <div>
+          <Typography variant="h3" className="mb-2">
+            Course
+          </Typography>
+          <Typography variant="body1" className="text-gray-600">
+            Manage and organize your learning content.
+          </Typography>
+        </div>
+        <div className="flex flex-row item-center gap-2">
+          <Button variant="outline" className="rounded-lg">
+            <FunnelIcon />
+            Filter
+          </Button>
+          <Button className="rounded-lg">
+            <PlusIcon />
+            New Course
+          </Button>
+        </div>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex flex-row items-center justify-between my-3 bg-white rounded-md border p-3">
+        <Tabs defaultSelectedKey="all" className="w-fit">
+          <Tabs.ListContainer>
+            <Tabs.List
+              aria-label="Course status"
+              className="gap-1 rounded-md bg-gray-100"
+            >
+              <Tabs.Tab
+                id="all"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-700"
+              >
+                All
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+
+              <Tabs.Tab
+                id="draft"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
+              >
+                Draft
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+
+              <Tabs.Tab
+                id="published"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
+              >
+                Published
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+
+              <Tabs.Tab
+                id="archived"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
+              >
+                Archived
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+            </Tabs.List>
+          </Tabs.ListContainer>
+        </Tabs>
+        <SearchField name="search">
+          <SearchField.Group className="rounded-xl border border-gray-300 w-100">
+            <SearchField.SearchIcon />
+
+            <SearchField.Input placeholder="Search course by title or code..." />
+
+            <SearchField.ClearButton />
+          </SearchField.Group>
+        </SearchField>
+      </div>
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
+        {stats.map((course) => (
+          <CourseCard key={course.code} course={course} image={courseImage} />
+        ))}
       </div>
-      <StatGrid items={stats} />
     </>
   );
 }