aplp.frontend.lms/src/pages/Dashboard/DashboardPage.jsx

import PageHeader from '../../components/PageHeader.jsx';
import StatGrid from '../../components/StatGrid.jsx';
import { Typography, SearchField, Separator } from '@heroui/react';
import {
  BellIcon,
  QuestionMarkCircleIcon,
  UserCircleIcon
} 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%' }
];

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.SearchIcon />

            <SearchField.Input
              className="flex-1"
              placeholder="Search LMS Author"
            />

            <SearchField.ClearButton />
          </SearchField.Group>
        </SearchField>
        <div className="flex flex-row items-center gap-2">
          <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>
      <StatGrid items={stats} />
    </>
  );
}

export default DashboardPage;