fix(src-conflic): fix src conflic

package.json

@@ -11,30 +11,58 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.90.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.19",
+    "embla-carousel-react": "^8.6.0",
     "html-react-parser": "^5.2.7",
     "lucide-react": "^0.548.0",
     "next": "16.0.1",
     "next-nprogress-bar": "^2.4.7",
+    "next-themes": "^0.4.6",
     "react": "19.2.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.65.0",
-    "swiper": "^12.0.3",
+    "react-resizable-panels": "^3.0.6",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^13.0.0",
+    "vaul": "^1.1.2",
     "zod": "^4.1.12",
-    "zustand": "^5.0.8"
+    "zustand": "^5.0.8",
+     "swiper": "^12.0.3",
+     "uuid": "^13.0.0"
+
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/api/types/NewsPage.type.ts

+export interface NewsItem {
+    id: string
+    title: string
+    thumbnail: string
+    external_link: string
+    description: string
+    release_at: string
+    is_active: boolean
+    created_at: string
+    created_by: string | null
+    updated_at: string
+    updated_by: string | null
+    mode: 'NOW' | string
+    category: string
+}
+
+export interface NewsResponseData {
+    count: number
+    rows: NewsItem[]
+    totalPages: number
+    currentPage: number
+}
+
+export interface GetNewsResponseType {
+    message: string
+    message_en: string
+    responseData: NewsResponseData
+    status: 'success' | 'error'
+    timeStamp: string
+    violations: string | null
+}
\ No newline at end of file

src/api/types/news.ts

@@ -28,5 +28,5 @@ export interface GetNewsAdminResponseType {
   responseData: NewsAdminResponseData
   status: 'success' | 'error'
   timeStamp: string
-  violations: any | null
+  violations: string | null
 }

src/app/(main)/dai-dien-gioi-chu/components/card-news/index.tsx

+
+import { NewsItem } from '@app/dai-dien-gioi-chu/lib/types/NewsPage.type';
+import Links from '@links/index'
+import dayjs from 'dayjs';
+import parse from 'html-react-parser'
+function NewsContent({ news }: { news: NewsItem }) {
+
+  return (
+    <a
+      href={`/tin-tuc/${news.id}`}
+      className="flex flex-col hover:no-underline sm:flex-row gap-2 mb-6 bg-white rounded-lg shadow-sm p-4 border items-start min-w-0"
+    >
+      <img
+        src={`${Links.imageEndpoint}${news.thumbnail}`}
+        alt={news.title}
+        className="w-full sm:w-56 md:w-64 h-40 md:h-36 object-cover shrink-0"
+      />
+
+      <div className="flex-1 min-w-0 pl-0 sm:pl-4">
+        <p className="text-primary font-semibold text-base md:text-lg hover:underline line-clamp-2 wrap-break-word hover:no-underline">
+          {news.title}
+        </p>
+
+        <div className="text-sm my-2 text-[#00AED5]">{dayjs(news.release_at).format('DD/MM/YYYY')}</div>
+
+        <div className="text-sm text-[#777] line-clamp-3">
+          <div className="text-sm prose tiptap">{parse(news.description)}</div>
+        </div>
+      </div>
+    </a>
+  )
+}
+
+export default NewsContent;
\ No newline at end of file

src/app/(main)/dai-dien-gioi-chu/components/event-calendar/index.tsx

+
+"use client";
+import React, { useState } from "react";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+export default function EventCalendar() {
+      const mockCalendar = {
+    month: 10,
+    year: 2025,
+    highlighted: [6, 9, 12],
+  };
+  const [month, setMonth] = useState<number>(mockCalendar.month);
+  const [year, setYear] = useState<number>(mockCalendar.year);
+
+  return (
+    <div className="bg-white border rounded-md p-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-sm font-medium">
+          THÁNG {month}/{year}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="group">
+            <button
+              aria-label="Tháng trước"
+              onClick={() => {
+                // prev month
+                if (month === 1) {
+                  setMonth(12);
+                  setYear((y) => y - 1);
+                } else {
+                  setMonth((m) => m - 1);
+                }
+              }}
+              className="group-hover:border-primary p-1 h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636] "
+            >
+              <ArrowLeft
+                size={24}
+                className="group-hover:text-muted-foreground text-[#363636]"
+              />
+            </button>
+          </div>
+          <div className="group">
+            <button
+              aria-label="Tháng sau"
+              onClick={() => {
+                // next month
+                if (month === 12) {
+                  setMonth(1);
+                  setYear((y) => y + 1);
+                } else {
+                  setMonth((m) => m + 1);
+                }
+              }}
+              className="p-1 group-hover:border-primary h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636]"
+            >
+              <ArrowRight
+                size={24}
+                className="group-hover:text-muted-foreground"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-1 text-center text-xs">
+        {["CN", "T2", "T3", "T4", "T5", "T6", "T7"].map((d) => (
+          <div key={d} className="text-gray-400 py-1">
+            {d}
+          </div>
+        ))}
+        {
+          (() => {
+            const totalDays = new Date(year, month, 0).getDate()
+            const firstDayIndex = new Date(year, month - 1, 1).getDay() // 0 (Sun) - 6 (Sat)
+            // previous month total days
+            const prevMonthTotalDays = new Date(year, month - 1, 0).getDate()
+            const totalCells = firstDayIndex + totalDays
+            const trailingCount = (7 - (totalCells % 7)) % 7
+
+            return (
+              <>
+                {Array.from({ length: firstDayIndex }).map((_, i) => {
+                  const dayNum = prevMonthTotalDays - (firstDayIndex - 1) + i
+                  return (
+                    <div key={`prev-${i}`} className="py-2 text-sm text-gray-300">
+                      {dayNum}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: totalDays }, (_, i) => i + 1).map((day) => {
+                  const isHighlighted = mockCalendar.highlighted.includes(day)
+                  return (
+                    <div
+                      key={day}
+                      className={`py-2 rounded-full w-10 h-10 flex flex-col justify-center items-center text-sm ${
+                        isHighlighted ? 'bg-yellow-500 text-white' : 'text-gray-700'
+                      }`}
+                    >
+                      {day}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: trailingCount }).map((_, i) => (
+                  <div key={`next-${i}`} className="py-2 text-sm text-gray-300">
+                    {i + 1}
+                  </div>
+                ))}
+              </>
+            )
+          })()
+        }
+      </div>
+    </div>
+  );
+}

src/app/(main)/dai-dien-gioi-chu/components/event-filter/index.tsx

+"use client"
+import React, { useState } from 'react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+
+type Category = { id: string; title: string }
+
+const MOCK_CATEGORIES: Category[] = [
+  { id: 'topic', title: 'Chuyên đề' },
+  { id: 'training', title: 'Tập huấn NSDLĐ' },
+  { id: 'law', title: 'Xây dựng và Phổ biến pháp luật' },
+  { id: 'trade', title: 'Xúc tiến thương mại và Đầu tư' }
+]
+
+type FilterPayload = {
+  upcoming: boolean
+  past: boolean
+  query: string
+  categories: string[]
+  fromDate: string
+  toDate: string
+}
+
+export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void; onReset?: () => void }> = ({ onFilter, onReset }) => {
+  const [upcoming, setUpcoming] = useState(false)
+  const [past, setPast] = useState(false)
+  const [query, setQuery] = useState('')
+  const [categories, setCategories] = useState<Record<string, boolean>>(() => {
+    const map: Record<string, boolean> = {}
+    MOCK_CATEGORIES.forEach((c) => (map[c.id] = false))
+    return map
+  })
+  const [fromDate, setFromDate] = useState('')
+  const [toDate, setToDate] = useState('')
+
+  const toggleCategory = (id: string) => {
+    setCategories((s) => ({ ...s, [id]: !s[id] }))
+  }
+
+  const handleFilter = () => {
+    const payload = {
+      upcoming,
+      past,
+      query,
+      categories: Object.keys(categories).filter((k) => categories[k]),
+      fromDate,
+      toDate
+    }
+    onFilter?.(payload)
+  }
+
+  const handleReset = () => {
+    setUpcoming(false)
+    setPast(false)
+    setQuery('')
+    setCategories(Object.keys(categories).reduce((acc, k) => ({ ...acc, [k]: false }), {} as Record<string, boolean>))
+    setFromDate('')
+    setToDate('')
+    onReset?.()
+  }
+
+  return (
+    <aside className="p-6 bg-white border rounded-md">
+      <h3 className="text-lg font-semibold mb-4">Tìm kiếm sự kiện</h3>
+
+      <div className="flex flex-col gap-3 mb-4">
+        <label className="flex items-center gap-2">
+          <Checkbox checked={upcoming} onCheckedChange={() => setUpcoming((v) => !v)} />
+          <span className="text-sm">Sự kiện sắp diễn ra</span>
+        </label>
+        <label className="flex items-center gap-2">
+          <Checkbox checked={past} onCheckedChange={() => setPast((v) => !v)} />
+          <span className="text-sm">Sự kiện đã diễn ra</span>
+        </label>
+      </div>
+
+      <div className="mb-4">
+        <Input
+          placeholder="Tên sự kiện ..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+
+      <div className="mb-4">
+        {MOCK_CATEGORIES.map((c) => (
+          <label key={c.id} className="flex items-center gap-2 mb-2">
+            <Checkbox checked={!!categories[c.id]} onCheckedChange={() => toggleCategory(c.id)} />
+            <span className="text-sm">{c.title}</span>
+          </label>
+        ))}
+      </div>
+
+      <div className="mb-4">
+  <Label className="block text-sm mb-1">Từ ngày:</Label>
+  <Input value={fromDate} onChange={(e) => setFromDate(e.target.value)} type="date" />
+      </div>
+
+      <div className="mb-4">
+  <Label className="block text-sm mb-1">Đến ngày:</Label>
+  <Input value={toDate} onChange={(e) => setToDate(e.target.value)} type="date" />
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Button onClick={handleFilter} className="flex-1">Lọc sự kiện</Button>
+        <Button variant="outline" onClick={handleReset} className="flex-1">Bỏ lọc</Button>
+      </div>
+    </aside>
+  )
+}
+
+export default EventFilter

src/app/(main)/dai-dien-gioi-chu/components/list-category/index.tsx

+"use client"
+
+import { usePathname } from "next/navigation"
+import React from "react"
+import { MenuItem } from '../menu-category'
+import {PATHS} from '@constants/paths'
+// Local Menu shape compatible with MenuItem
+type Menu = {
+    id: string | number
+    name: string
+    link?: string
+}
+
+type Category = {
+    title: string
+    href: string
+}
+
+const CATEGORIES: Category[] = [
+    { title: "Chức năng Đại diện Người sử dụng lao động", href: "/dai-dien-gioi-chu" },
+    { title: "Sự kiện – Tập huấn NSDLĐ", href: `${PATHS.ownerRepresentatives}/su-kien` },
+    { title: "Tin liên quan", href: `${PATHS.ownerRepresentatives}/tin-lien-quan` },
+    { title: "Chủ đề", href: `${PATHS.ownerRepresentatives}/chu-de` },
+
+]
+
+const ListCategory: React.FC = () => {
+    const pathname = usePathname() || ""
+
+    const isActive = (href: string) => {
+        // treat the base path as active for nested routes as well
+        if (href === "/gioi-thieu") return pathname === href || pathname.startsWith(href + "/")
+        return pathname === href
+    }
+
+    return (
+        <div className="border-t border-gray-200 bg-white p-2.5">
+            <div className="w-full px-4 sm:px-6 lg:px-8">
+                <div className="py-3">
+                    <div className="flex flex-wrap gap-4 sm:gap-8 items-center max-w-full overflow-x-auto">
+                        {CATEGORIES.map((c) => {
+                            const menu: Menu = { id: c.href, name: c.title, link: c.href }
+                            const active = isActive(c.href)
+                            return (
+                                <div key={c.href} className="shrink-0">
+                                    <MenuItem menu={menu} active={active} />
+                                </div>
+                            )
+                        })}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ListCategory
\ No newline at end of file

src/app/(main)/dai-dien-gioi-chu/components/list-filter/index.tsx

+"use client"
+import React, { useState } from 'react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+
+type Category = { id: string; title: string; count: number }
+
+const DEFAULT_CATEGORIES: Category[] = [
+  { id: 'ceo', title: 'CEO', count: 4 },
+  { id: 'policy', title: 'Hỏi đáp về chính sách', count: 0 },
+  { id: 'biz', title: 'Tin Doanh Nghiệp', count: 9 },
+  { id: 'member', title: 'Tin Hội Viên', count: 17 },
+  { id: 'law', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 }
+]
+
+export const ListFilter: React.FC<{
+  categories?: Category[]
+  onSearch?: (q: string) => void
+  onReset?: () => void
+}> = ({ categories = DEFAULT_CATEGORIES, onSearch, onReset }) => {
+  const [query, setQuery] = useState('')
+  const [selected, setSelected] = useState<Record<string, boolean>>(() => {
+    const map: Record<string, boolean> = {}
+    categories.forEach((c) => (map[c.id] = false))
+    return map
+  })
+
+  const toggle = (id: string) => setSelected((s) => ({ ...s, [id]: !s[id] }))
+
+  return (
+    <aside className="p-6 bg-white border rounded-md">
+      <h3 className="text-lg font-semibold mb-3">Tìm kiếm</h3>
+
+      <div className="mb-4">
+        <Input
+          placeholder="Tên văn bản ..."
+          value={query}
+          className='text-black placeholder:text-gray-400 rounded-none py-2.5 px-2'
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              onSearch?.(query)
+            }
+          }}
+        />
+      </div>
+
+      {/* <div className="flex flex-col gap-3 mb-6">
+        {categories.map((c) => (
+          <label key={c.id} className="flex items-center gap-3">
+            <Checkbox checked={!!selected[c.id]} onCheckedChange={() => toggle(c.id)} />
+            <div className="flex justify-between w-full items-center">
+              <span className="text-sm">{c.title}</span>
+              <span className="text-sm text-gray-400">({c.count})</span>
+            </div>
+          </label>
+        ))}
+      </div> */}
+
+      <div className="flex gap-3">
+        <Button className="flex-1 rounded-none font-medium text-lg text-white hover:bg-muted-foreground hover:outline-1 outline-primary hover:text-primary" onClick={() => onSearch?.(query)}>
+          Tìm kiếm
+        </Button>
+        <Button
+          className="flex-1 rounded-none font-medium text-lg text-white hover:bg-muted-foreground hover:outline-1 outline-primary hover:text-primary"
+          onClick={() => {
+            setQuery('')
+            // restore initial map
+            const map: Record<string, boolean> = {}
+            categories.forEach((c) => (map[c.id] = false))
+            setSelected(map)
+            onReset?.()
+          }}
+        >
+          Bỏ tìm
+        </Button>
+      </div>
+    </aside>
+  )
+}
+
+export default ListFilter

src/app/(main)/dai-dien-gioi-chu/components/menu-category/index.tsx

+'use client'
+// Local simplified menu type instead of importing HeaderMenu
+type Menu = {
+  id: string | number
+  name: string
+  link?: string
+  children?: Array<{ id: string | number; name: string; link?: string }>
+}
+
+import { buttonVariants } from '@components/ui/button'
+import { cn } from '@lib/utils'
+import { useCallback, useMemo } from 'react'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@components/ui/hover-card'
+import { cva } from 'class-variance-authority'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function MenuItem(props: { variant?: 'main' | 'secondary' ; menu: Menu; active?: boolean }) {
+  const { menu, variant = 'main', active } = props
+
+  const pathname = usePathname()
+  const linkId = useMemo(() => `trigger_${menu.id}`, [menu.id])
+  const hoverCardRef = useCallback(
+    (element: HTMLDivElement) => {
+      if (!element) return
+      element.style.minWidth = `${document.getElementById(linkId)?.offsetWidth ?? 0}px`
+    },
+    [linkId]
+  )
+
+  return (
+    <HoverCard openDelay={0} closeDelay={0}>
+      <HoverCardTrigger asChild>
+        <Link
+          aria-selected={active || pathname == menu.link}
+          id={linkId}
+          target={(menu.link ?? '').startsWith('/') ? '_self' : '_blank'}
+          href={menu.link ?? '/'}
+          className={menuItemTriggerVariant({ variant })}
+        >
+          {menu.name}
+        </Link>
+      </HoverCardTrigger>
+
+      {menu.children && (
+        <HoverCardContent ref={hoverCardRef} className={menuItemHoverBoxVariant({ variant })}>
+          {menu.children.map((subMenu) => (
+            <Link key={subMenu.id} href={subMenu.link ?? '/'} className={menuItemChildVariant({ variant })}>
+              {subMenu.name}
+            </Link>
+          ))}
+        </HoverCardContent>
+      )}
+    </HoverCard>
+  )
+}
+
+const menuItemTriggerVariant = cva(
+  cn(buttonVariants({ variant: 'ghost' }), 'font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 py-'),
+  {
+    variants: {
+      variant: {
+        main: cn(
+          'font-semibold text-[#363636] text-2xl hover:text-muted-foreground hover:bg-white py-3.5 px-5',
+          'aria-selected:text-muted-foreground'
+        ),
+        secondary: cn(
+          'font-boldtext-primary border-t-2 border-t-transparent rounded-none',
+          'hover:text-primary/90',
+          'aria-selected:border-t-secondary aria-selected:bg-accent',
+          'aria-selected:bg-[#E9C826]'
+        )
+      }
+    },
+    defaultVariants: {
+      variant: 'main'
+    }
+  }
+)
+
+const menuItemHoverBoxVariant = cva('flex w-full flex-col gap-2 p-0', {
+  variants: {
+    variant: {
+      main: 'bg-secondary',
+      secondary: 'bg-muted '
+    }
+  },
+  defaultVariants: {
+    variant: 'main'
+  }
+})
+
+const menuItemChildVariant = cva(cn(buttonVariants({ variant: 'ghost' }), 'justify-start'), {
+  variants: {
+    variant: {
+      main: 'text-secondary-foreground hover:text-muted-foreground hover:bg-secondary',
+      secondary: 'text-accent-foreground hover:text-primary/90 '
+    }
+  },
+  defaultVariants: {
+    variant: 'main'
+  }
+})

src/app/(main)/dai-dien-gioi-chu/lib/sampleHtml.ts

+export const SAMPLE_HTML = `
+<div class="document">
+  <h1  style="font-size:18px; font-weight:700; margin-bottom:8px;">Chức năng Đại diện Người sử dụng lao động</h1>
+
+  <p>Chức năng Đại diện Người sử dụng lao động (NSDLĐ):</p>
+
+  <p>
+    Sau Đại hội đại biểu toàn quốc lần thứ tư của Phòng Thương mại và Công nghiệp Việt nam tháng 4/2003 và theo Quyết định số 123/2003/QĐ – TTg (tháng 6/2003) của Thủ tướng Chính phủ phê duyệt Điều lệ sửa đổi của Phòng Thương mại và Công nghiệp Việt Nam, vai trò của Phòng đã được bổ sung thêm chức năng mới là tổ chức đại diện để thúc đẩy và bảo vệ quyền lợi hợp pháp chính đáng của Người sử dụng lao động (NSDLĐ) ở Việt Nam trong các quan hệ lao động trong nước và quốc tế.
+  </p>
+    <p>
+    Trước đó từ tháng 05/1997 Văn phòng Giới sử dụng Lao động đã được thành lập để tham mưu cho lãnh đạo Phòng Thương mại và Công nghiệp Việt Nam về các vấn đề lao động, đồng thời duy trì quan hệ ba bên về lao động với các đối tác xã hội như Bộ Lao động-Thương binh và Xã hội, Tổng Liên đoàn lao động Việt Nam. Hiện nay Phòng Thương mại và Công nghiệp Việt Nam là thành viên chính thức của Tổ chức Giới chủ thế giới (IOE) và Liên đoàn Giới chủ Châu Á – Thái Bình Dưong (CAPE).
+    </p>
+     <p>Nhiệm vụ:</p>
+     <p>Văn phòng Giới sử dụng lao động là cơ quan chuyên môn của Phòng Thương mại và Công nghiệp Việt Nam (BEA-VCCI) thực hiện công tác đại diện để thúc đẩy và bảo vệ quyền lợi của người sử dụng lao động, xúc tiến quan hệ lao động tiến tiến ở Việt Nam:</p>
+  <ul>
+    <li>Đại diện cho giới sử dụng lao động Việt Nam trong cơ chế tư vấn ba bên về lao động ở trong nước và phối hợp với tổ chức đại diện của người lao động như Tổng Liên đoàn lao động Việt Nam (VGCL) và Bộ Lao động-Thương binh và Xã hội (MOLISA).</li>
+    <li>Tư vấn tạo một môi trường lao động thuận lợi cho sự phát triển doanh nghiệp, đóng vai trò như một tổ chức đại diện phản ánh ý kiến của giới sử dụng lao động về những khó khăn, vướng mắc trong quá trình thực hiện pháp luật lao động, từ đó bảo vệ lợi ích của giới sử dụng lao động.</li>
+    <li>Hỗ trợ phát triển hiệp hội người sử dụng lao động cấp tỉnh.</li>
+    <li>Cung cấp các dịch vụ và đào tạo cho cộng đồng doanh nghiệp về:</li>
+  </ul>
+
+  <h2 style="font-size:16px; font-weight:600; margin-top:16px;">Thông tin liên hệ</h2>
+  <p>
+    Địa chỉ: 42 Đường ABC, Quận 1, TP. Hồ Chí Minh<br />
+    Điện thoại: <a href="tel:+842823922025">(+84) 28 2392 2025</a><br />
+    Email: <a href="mailto:info@vcci-hcm.vn">info@vcci-hcm.vn</a>
+  </p>
+
+  <div class="notice" style="margin-top:16px; padding:10px; background:#fafafa; border-left:4px solid #ffd54f;">
+    <strong>Ghi chú:</strong> Thông tin trên mang tính tham khảo và cần được kiểm tra lại trước khi sử dụng chính thức.
+  </div>
+</div>
+`;
+
+export default SAMPLE_HTML;

src/app/(main)/dai-dien-gioi-chu/lib/types/NewsPage.type.ts

+export interface NewsItem {
+    id: string
+    title: string
+    thumbnail: string
+    external_link: string
+    description: string
+    release_at: string
+    is_active: boolean
+    created_at: string
+    created_by: string | null
+    updated_at: string
+    updated_by: string | null
+    mode: 'NOW' | string
+    category: string
+}
+
+export interface NewsResponseData {
+    count: number
+    rows: NewsItem[]
+    totalPages: number
+    currentPage: number
+}
+
+export interface GetNewsResponseType {
+    message: string
+    message_en: string
+    responseData: NewsResponseData
+    status: 'success' | 'error'
+    timeStamp: string
+    violations: string | null
+}
\ No newline at end of file

src/app/(main)/dai-dien-gioi-chu/page.tsx

+// Core
+
+import Image from "next/image";
+import ListCategory from "./components/list-category";
+import ListFilter from "./components/list-filter";
+import parse from 'html-react-parser'
+import {SAMPLE_HTML} from './lib/sampleHtml'
+
+const Page: React.FC = () => {
+
+  return (
+    <div className="min-h-screen container mx-auto p-4">
+      <div className="w-full flex flex-col gap-5">
+        <ListCategory />
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main content */}
+          <main className="lg:col-span-2 bg-white border rounded-md p-6">
+          <div className="p-7.5 prose tiptap">{parse(SAMPLE_HTML)}</div>
+          </main>
+
+          {/* Sidebar */}
+          <aside className="space-y-6">
+            <ListFilter />
+
+            <div className="bg-white border rounded-md overflow-hidden">
+              <div className="w-full h-56 relative bg-gray-100">
+                <Image
+                  src="/banner.webp"
+                  alt="Quảng cáo"
+                  fill
+                  className="object-cover"
+                />
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

src/app/(main)/dai-dien-gioi-chu/tin-lien-quan/page.tsx

+"use client";
+import React, { useState } from "react";
+import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
+import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter";
+import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
+import {Pagination} from '@components/base/pagination'
+import Image from "next/image";
+import { useGetNews } from '@api/endpoints/news'
+import { GetNewsResponseType } from '@api/types/NewsPage.type'
+export default function Page() {
+  const [submitSearch] = useState('')
+  const [page, setPage] = useState(1)
+
+  const pageSize = 5
+  const { data: allData, isLoading } = useGetNews<GetNewsResponseType>({
+    pageSize: String(pageSize),
+    currentPage: String(page),
+    filters: submitSearch ? `title @=${submitSearch}` : undefined,
+  })
+  return ( 
+
+    <div className="min-h-screen container mx-auto p-4">
+      <div className="w-full flex flex-col gap-5">
+        <ListCategory />
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main content */}
+          <main className="lg:col-span-2 bg-background p-6">
+                              <div className='pb-5 overflow-hidden'>
+                      {allData?.responseData.rows.map((news) => (
+                        <NewsContent key={news.id} news={news} />
+                      ))}
+
+                      <div className='w-full flex justify-center mt-4'>
+                        <Pagination
+                          current={allData?.responseData.currentPage ?? page}
+                          total={allData?.responseData.totalPages ?? 1}
+                          onChange={(p) => setPage(p)}
+                        />
+                      </div>
+                    </div>
+          </main>
+
+          {/* Sidebar */}
+          <aside className="space-y-6">
+            <ListFilter />
+
+            <div className="bg-white border rounded-md overflow-hidden">
+              <div className="w-full h-56 relative bg-gray-100">
+                <Image
+                  src="/banner.webp"
+                  alt="Quảng cáo"
+                  fill
+                  className="object-cover"
+                />
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

src/app/(main)/gioi-thieu/components/list-category/index.tsx

+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import React from "react"
+
+type Category = {
+    title: string
+    href: string
+}
+
+const CATEGORIES: Category[] = [
+    { title: "Về VCCI-HCM", href: "/gioi-thieu" },
+    { title: "Chức năng và Nhiệm vụ", href: "/gioi-thieu/chuc-nang" },
+    { title: "Sơ đồ Tổ chức", href: "/gioi-thieu/so-do" },
+    { title: "Dịch vụ cung cấp", href: "/gioi-thieu/dich-vu" },
+]
+
+const ListCategory: React.FC = () => {
+    const pathname = usePathname() || ""
+
+    const isActive = (href: string) => {
+        // treat the base path as active for nested routes as well
+        if (href === "/gioi-thieu") return pathname === href || pathname.startsWith(href + "/")
+        return pathname === href
+    }
+
+    return (
+        <div className="border-t border-gray-200 bg-white p-2.5">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <nav aria-label="Danh mục" className="py-3">
+                    <ul className="flex gap-8 items-center">
+                        {CATEGORIES.map((c) => {
+                            const active = isActive(c.href)
+                            return (
+                                <li key={c.href}>
+                                    <Link
+                                        href={c.href}
+                                        className={
+                                            "text-sm font-medium py-3.5 px-5 transition-colors duration-150 " +
+                                            (active
+                                                ? "text-yellow-500 font-semibold decoration-yellow-300 "
+                                                : "text-gray-600 hover:text-gray-800 hover:underline")
+                                        }
+                                    >
+                                        {c.title}
+                                    </Link>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    )
+}
+
+export default ListCategory
\ No newline at end of file

src/app/(main)/layout.tsx

+import Header from "@/app/(main)/_lib/layout/header"
+import Footer from "@/app/(main)/_lib/layout/footer"
+import React from "react";
+
+
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+      <main className="bg-background">
+          <Header />
+          {children}
+          <Footer />
+      </main>
+  );
+}

src/app/layout.tsx

 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./styles.css";
 import { Providers } from "./_providers";
 import React from "react";
-import Header from "@/components/ui/layout/header";
-import Footer from "@/components/ui/layout/footer";
+import links from "@links/index";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'VCCI',
+  description: 'Liên đoàn Thương mại và Công nghiệp Việt Nam - Chi nhánh TP.HCM',
+  metadataBase: new URL(links.siteURL),
+  alternates: { canonical: links.siteURL },
+  openGraph: {
+    title: 'VCCI - TP.HCM',
+    description: 'Tin tức và sự kiện từ Liên đoàn Thương mại và Công nghiệp Việt Nam - Chi nhánh TP.HCM',
+    url: links.siteURL,
+    siteName: 'VCCI HCM',
+     images: [
+      {
+        url: `${links.siteURL}/thumbnail.png`,
+        width: 1200,
+        height: 630,
+        alt: 'VCCI HCM'
+      }
+    ],
+    locale: 'vi_VN',
+    type: 'website'
+  },
+  twitter: { card: 'summary_large_image', title: 'VCCI HCM', description: 'Tin tức và sự kiện từ VCCI HCM', creator: '@vcci_hcm' },
+  robots: { index: true, follow: true, googleBot: { index: true, follow: true } }
 };
 
 export default function RootLayout({
@@ -28,13 +38,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body>
         <Providers>
-          <Header />
           {children}
-          <Footer />
         </Providers>
       </body>
     </html>

src/components/base/event-calendar/index.tsx

+
+"use client";
+import React, { useState } from "react";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+export default function EventCalendar() {
+  const mockCalendar = {
+    month: 10,
+    year: 2025,
+    highlighted: [6, 9, 12],
+  };
+  const [month, setMonth] = useState<number>(mockCalendar.month);
+  const [year, setYear] = useState<number>(mockCalendar.year);
+
+  return (
+    <div className="bg-white border rounded-md p-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-sm font-medium">
+          THÁNG {month}/{year}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="group">
+            <button
+              aria-label="Tháng trước"
+              onClick={() => {
+                // prev month
+                if (month === 1) {
+                  setMonth(12);
+                  setYear((y) => y - 1);
+                } else {
+                  setMonth((m) => m - 1);
+                }
+              }}
+              className="group-hover:border-primary p-1 h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636] "
+            >
+              <ArrowLeft
+                size={24}
+                className="group-hover:text-muted-foreground text-[#363636]"
+              />
+            </button>
+          </div>
+          <div className="group">
+            <button
+              aria-label="Tháng sau"
+              onClick={() => {
+                // next month
+                if (month === 12) {
+                  setMonth(1);
+                  setYear((y) => y + 1);
+                } else {
+                  setMonth((m) => m + 1);
+                }
+              }}
+              className="p-1 group-hover:border-primary h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636]"
+            >
+              <ArrowRight
+                size={24}
+                className="group-hover:text-muted-foreground"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-1 text-center text-xs">
+        {["CN", "T2", "T3", "T4", "T5", "T6", "T7"].map((d) => (
+          <div key={d} className="text-gray-400 py-1">
+            {d}
+          </div>
+        ))}
+        {
+          (() => {
+            const totalDays = new Date(year, month, 0).getDate()
+            const firstDayIndex = new Date(year, month - 1, 1).getDay() // 0 (Sun) - 6 (Sat)
+            // previous month total days
+            const prevMonthTotalDays = new Date(year, month - 1, 0).getDate()
+            const totalCells = firstDayIndex + totalDays
+            const trailingCount = (7 - (totalCells % 7)) % 7
+
+            return (
+              <>
+                {Array.from({ length: firstDayIndex }).map((_, i) => {
+                  const dayNum = prevMonthTotalDays - (firstDayIndex - 1) + i
+                  return (
+                    <div key={`prev-${i}`} className="py-2 text-sm text-gray-300">
+                      {dayNum}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: totalDays }, (_, i) => i + 1).map((day) => {
+                  const isHighlighted = mockCalendar.highlighted.includes(day)
+                  return (
+                    <div
+                      key={day}
+                      className={`py-2 rounded-full w-10 h-10 flex flex-col justify-center items-center text-sm ${
+                        isHighlighted ? 'bg-yellow-500 text-white' : 'text-gray-700'
+                      }`}
+                    >
+                      {day}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: trailingCount }).map((_, i) => (
+                  <div key={`next-${i}`} className="py-2 text-sm text-gray-300">
+                    {i + 1}
+                  </div>
+                ))}
+              </>
+            )
+          })()
+        }
+      </div>
+    </div>
+  );
+}

src/components/base/event-filter/index.tsx

+"use client"
+import React, { useState } from 'react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+
+type Category = { id: string; title: string }
+
+const MOCK_CATEGORIES: Category[] = [
+  { id: 'topic', title: 'Chuyên đề' },
+  { id: 'training', title: 'Tập huấn NSDLĐ' },
+  { id: 'law', title: 'Xây dựng và Phổ biến pháp luật' },
+  { id: 'trade', title: 'Xúc tiến thương mại và Đầu tư' }
+]
+
+type FilterPayload = {
+  upcoming: boolean
+  past: boolean
+  query: string
+  categories: string[]
+  fromDate: string
+  toDate: string
+}
+
+export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void; onReset?: () => void }> = ({ onFilter, onReset }) => {
+  const [upcoming, setUpcoming] = useState(false)
+  const [past, setPast] = useState(false)
+  const [query, setQuery] = useState('')
+  const [categories, setCategories] = useState<Record<string, boolean>>(() => {
+    const map: Record<string, boolean> = {}
+    MOCK_CATEGORIES.forEach((c) => (map[c.id] = false))
+    return map
+  })
+  const [fromDate, setFromDate] = useState('')
+  const [toDate, setToDate] = useState('')
+
+  const toggleCategory = (id: string) => {
+    setCategories((s) => ({ ...s, [id]: !s[id] }))
+  }
+
+  const handleFilter = () => {
+    const payload = {
+      upcoming,
+      past,
+      query,
+      categories: Object.keys(categories).filter((k) => categories[k]),
+      fromDate,
+      toDate
+    }
+    onFilter?.(payload)
+  }
+
+  const handleReset = () => {
+    setUpcoming(false)
+    setPast(false)
+    setQuery('')
+    setCategories(Object.keys(categories).reduce((acc, k) => ({ ...acc, [k]: false }), {} as Record<string, boolean>))
+    setFromDate('')
+    setToDate('')
+    onReset?.()
+  }
+
+  return (
+    <aside className="p-6 bg-white border rounded-md">
+      <h3 className="text-lg font-semibold mb-4">Tìm kiếm sự kiện</h3>
+
+      <div className="flex flex-col gap-3 mb-4">
+        <label className="flex items-center gap-2">
+          <Checkbox checked={upcoming} onCheckedChange={() => setUpcoming((v) => !v)} />
+          <span className="text-sm">Sự kiện sắp diễn ra</span>
+        </label>
+        <label className="flex items-center gap-2">
+          <Checkbox checked={past} onCheckedChange={() => setPast((v) => !v)} />
+          <span className="text-sm">Sự kiện đã diễn ra</span>
+        </label>
+      </div>
+
+      <div className="mb-4">
+        <Input
+          placeholder="Tên sự kiện ..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+
+      <div className="mb-4">
+        {MOCK_CATEGORIES.map((c) => (
+          <label key={c.id} className="flex items-center gap-2 mb-2">
+            <Checkbox checked={!!categories[c.id]} onCheckedChange={() => toggleCategory(c.id)} />
+            <span className="text-sm">{c.title}</span>
+          </label>
+        ))}
+      </div>
+
+      <div className="mb-4">
+  <Label className="block text-sm mb-1">Từ ngày:</Label>
+  <Input value={fromDate} onChange={(e) => setFromDate(e.target.value)} type="date" />
+      </div>
+
+      <div className="mb-4">
+  <Label className="block text-sm mb-1">Đến ngày:</Label>
+  <Input value={toDate} onChange={(e) => setToDate(e.target.value)} type="date" />
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Button onClick={handleFilter} className="flex-1">Lọc sự kiện</Button>
+        <Button variant="outline" onClick={handleReset} className="flex-1">Bỏ lọc</Button>
+      </div>
+    </aside>
+  )
+}
+
+export default EventFilter

src/components/base/list-category/index.tsx

+"use client"
+
+import { usePathname } from "next/navigation"
+import React from "react"
+import { MenuItem } from '../menu-category'
+
+// Local Menu shape compatible with MenuItem
+type Menu = {
+    id: string | number
+    name: string
+    link?: string
+}
+
+type Category = {
+    title: string
+    href: string
+}
+
+const CATEGORIES: Category[] = [
+    { title: "Về VCCI-HCM", href: "/dai-dien-gioi-chu" },
+    { title: "Chức năng và Nhiệm vụ", href: "/gioi-thieu/chuc-nang" },
+    { title: "Sơ đồ Tổ chức", href: "/gioi-thieu/so-do" },
+    { title: "Dịch vụ cung cấp", href: "/gioi-thieu/dich-vu" },
+    { title: "Dịch vụ cung cấp", href: "/gioi-thieu/dich-vu" },
+    { title: "Dịch vụ cung cấp", href: "/gioi-thieu/dich-vu" },
+    { title: "Dịch vụ cung cấp", href: "/gioi-thieu/dich-vu" },
+    { title: "Dịch vụ cung cấp", href: "/gioi-thieu/dich-vu" },
+
+]
+
+const ListCategory: React.FC = () => {
+    const pathname = usePathname() || ""
+
+    const isActive = (href: string) => {
+        // treat the base path as active for nested routes as well
+        if (href === "/gioi-thieu") return pathname === href || pathname.startsWith(href + "/")
+        return pathname === href
+    }
+
+    return (
+        <div className="border-t border-gray-200 bg-white p-2.5">
+            <div className="w-full px-4 sm:px-6 lg:px-8">
+                <nav aria-label="Danh mục" className="py-3">
+                    <ul className="flex flex-wrap gap-4 sm:gap-8 items-center max-w-full overflow-x-auto">
+                        {CATEGORIES.map((c) => {
+                            const menu: Menu = { id: c.href, name: c.title, link: c.href }
+                            const active = isActive(c.href)
+                            return (
+                                <li key={c.href} className="shrink-0">
+                                    <MenuItem menu={menu} active={active} />
+                                </li>
+                            )
+                        })}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    )
+}
+
+export default ListCategory
\ No newline at end of file

src/components/base/list-filter/index.tsx

+"use client"
+import React, { useState } from 'react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+
+type Category = { id: string; title: string; count: number }
+
+const DEFAULT_CATEGORIES: Category[] = [
+  { id: 'ceo', title: 'CEO', count: 4 },
+  { id: 'policy', title: 'Hỏi đáp về chính sách', count: 0 },
+  { id: 'biz', title: 'Tin Doanh Nghiệp', count: 9 },
+  { id: 'member', title: 'Tin Hội Viên', count: 17 },
+  { id: 'law', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 }
+]
+
+export const ListFilter: React.FC<{
+  categories?: Category[]
+  onSearch?: (q: string) => void
+  onReset?: () => void
+}> = ({ categories = DEFAULT_CATEGORIES, onSearch, onReset }) => {
+  const [query, setQuery] = useState('')
+  const [selected, setSelected] = useState<Record<string, boolean>>(() => {
+    const map: Record<string, boolean> = {}
+    categories.forEach((c) => (map[c.id] = false))
+    return map
+  })
+
+  const toggle = (id: string) => setSelected((s) => ({ ...s, [id]: !s[id] }))
+
+  return (
+    <aside className="p-6 bg-white border rounded-md">
+      <h3 className="text-lg font-semibold mb-3">Tìm kiếm</h3>
+
+      <div className="mb-4">
+        <Input
+          placeholder="Tên văn bản ..."
+          value={query}
+          className='text-black placeholder:text-gray-400'
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              onSearch?.(query)
+            }
+          }}
+        />
+      </div>
+
+      <div className="flex flex-col gap-3 mb-6">
+        {categories.map((c) => (
+          <label key={c.id} className="flex items-center gap-3">
+            <Checkbox checked={!!selected[c.id]} onCheckedChange={() => toggle(c.id)} />
+            <div className="flex justify-between w-full items-center">
+              <span className="text-sm">{c.title}</span>
+              <span className="text-sm text-gray-400">({c.count})</span>
+            </div>
+          </label>
+        ))}
+      </div>
+
+      <div className="flex gap-3">
+        <Button className="flex-1 rounded-none font-medium text-lg text-white hover:bg-muted-foreground hover:outline-1 outline-primary hover:text-primary" onClick={() => onSearch?.(query)}>
+          Tìm kiếm
+        </Button>
+        <Button
+          className="flex-1 rounded-none font-medium text-lg text-white hover:bg-muted-foreground hover:outline-1 outline-primary hover:text-primary"
+          onClick={() => {
+            setQuery('')
+            // restore initial map
+            const map: Record<string, boolean> = {}
+            categories.forEach((c) => (map[c.id] = false))
+            setSelected(map)
+            onReset?.()
+          }}
+        >
+          Bỏ tìm
+        </Button>
+      </div>
+    </aside>
+  )
+}
+
+export default ListFilter

src/components/base/menu-category/index.tsx

+'use client'
+// Local simplified menu type instead of importing HeaderMenu
+type Menu = {
+  id: string | number
+  name: string
+  link?: string
+  children?: Array<{ id: string | number; name: string; link?: string }>
+}
+
+import { buttonVariants } from '@components/ui/button'
+import { cn } from '@lib/utils'
+import { useCallback, useMemo } from 'react'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@components/ui/hover-card'
+import { cva } from 'class-variance-authority'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function MenuItem(props: { variant?: 'main' | 'secondary' ; menu: Menu; active?: boolean }) {
+  const { menu, variant = 'main', active } = props
+
+  const pathname = usePathname()
+  const linkId = useMemo(() => `trigger_${menu.id}`, [menu.id])
+  const hoverCardRef = useCallback(
+    (element: HTMLDivElement) => {
+      if (!element) return
+      element.style.minWidth = `${document.getElementById(linkId)?.offsetWidth ?? 0}px`
+    },
+    [linkId]
+  )
+
+  return (
+    <HoverCard openDelay={0} closeDelay={0}>
+      <HoverCardTrigger asChild>
+        <Link
+          aria-selected={active || pathname == menu.link}
+          id={linkId}
+          target={(menu.link ?? '').startsWith('/') ? '_self' : '_blank'}
+          href={menu.link ?? '/'}
+          className={menuItemTriggerVariant({ variant })}
+        >
+          {menu.name}
+        </Link>
+      </HoverCardTrigger>
+
+      {menu.children && (
+        <HoverCardContent ref={hoverCardRef} className={menuItemHoverBoxVariant({ variant })}>
+          {menu.children.map((subMenu) => (
+            <Link key={subMenu.id} href={subMenu.link ?? '/'} className={menuItemChildVariant({ variant })}>
+              {subMenu.name}
+            </Link>
+          ))}
+        </HoverCardContent>
+      )}
+    </HoverCard>
+  )
+}
+
+const menuItemTriggerVariant = cva(
+  cn(buttonVariants({ variant: 'ghost' }), 'font-semibold focus-visible:ring-0 focus-visible:ring-offset-0 py-'),
+  {
+    variants: {
+      variant: {
+        main: cn(
+          'font-semibold text-[#363636] text-2xl hover:text-muted-foreground hover:bg-white py-3.5 px-5',
+          'aria-selected:text-muted-foreground'
+        ),
+        secondary: cn(
+          'font-boldtext-primary border-t-2 border-t-transparent rounded-none',
+          'hover:text-primary/90',
+          'aria-selected:border-t-secondary aria-selected:bg-accent',
+          'aria-selected:bg-[#E9C826]'
+        )
+      }
+    },
+    defaultVariants: {
+      variant: 'main'
+    }
+  }
+)
+
+const menuItemHoverBoxVariant = cva('flex w-full flex-col gap-2 p-0', {
+  variants: {
+    variant: {
+      main: 'bg-secondary',
+      secondary: 'bg-muted '
+    }
+  },
+  defaultVariants: {
+    variant: 'main'
+  }
+})
+
+const menuItemChildVariant = cva(cn(buttonVariants({ variant: 'ghost' }), 'justify-start'), {
+  variants: {
+    variant: {
+      main: 'text-secondary-foreground hover:text-muted-foreground hover:bg-secondary',
+      secondary: 'text-accent-foreground hover:text-primary/90 '
+    }
+  },
+  defaultVariants: {
+    variant: 'main'
+  }
+})

src/components/base/pagination/index.tsx

+import React from 'react'
+import { Button } from '@/components/ui/button'
+
+type PaginationProps = {
+  current: number
+  total: number
+  onChange?: (page: number) => void
+}
+
+export const Pagination: React.FC<PaginationProps> = ({ current, total, onChange }) => {
+  if (total <= 1) return null
+
+  const handle = (p: number) => () => onChange?.(p)
+
+  const pages: (number | '...')[] = []
+  const delta = 2
+  const left = Math.max(1, current - delta)
+  const right = Math.min(total, current + delta)
+
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || (i >= left && i <= right)) {
+      pages.push(i)
+    } else if (pages[pages.length - 1] !== '...') {
+      pages.push('...')
+    }
+  }
+
+  return (
+    <nav className="flex items-center justify-center space-x-2 py-4" aria-label="Pagination">
+      <Button variant="ghost" onClick={handle(Math.max(1, current - 1))} disabled={current === 1}>
+        «
+      </Button>
+
+      {pages.map((p, idx) => (
+        <React.Fragment key={`${p}-${idx}`}>
+          {p === '...'
+            ? <span className="px-2 text-muted-foreground">{p}</span>
+            : (
+              p === current
+                ? (
+                  <span
+                    aria-current="page"
+                    className="px-3 py-1 rounded text-yellow-500 font-semibold"
+                  >
+                    {p}
+                  </span>
+                )
+                : (
+                  <Button
+                    variant="ghost"
+                    onClick={handle(p as number)}
+                  >
+                    {p}
+                  </Button>
+                ))}
+        </React.Fragment>
+      ))}
+
+      <Button variant="ghost" onClick={handle(Math.min(total, current + 1))} disabled={current === total}>
+        »
+      </Button>
+    </nav>
+  )
+}
+
+export default Pagination

src/components/ui/accordion.tsx

+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert.tsx

+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.tsx

+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

src/components/ui/avatar.tsx

+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

-import React from 'react'
-import cn from './utils'
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
-type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-  variant?: 'default' | 'secondary'
-}
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
 
-export function Badge({ className, variant = 'default', ...props }: BadgeProps) {
-  const variantClass = variant === 'secondary' ? 'badge-secondary' : 'badge'
-  return <span className={cn(variantClass, className)} {...props} />
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
 }
 
-export default Badge
+export { Badge, badgeVariants }

src/components/ui/breadcrumb.tsx

+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

src/components/ui/button.tsx

@@ -5,28 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
@@ -36,25 +34,24 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
 }
 
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
 export { Button, buttonVariants }

src/components/ui/calendar.tsx

+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

-import React from 'react'
-import cn from './utils'
+import * as React from "react"
 
-type CardProps = React.HTMLAttributes<HTMLDivElement>
+import { cn } from "@/lib/utils"
 
-export function Card({ className, children, ...props }: CardProps) {
-  return (
-    <div className={cn('card', className)} {...props}>
-      {children}
-    </div>
-  )
-}
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
 
-export default Card
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/carousel.tsx

+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/components/ui/collapsible.tsx

+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/command.tsx

+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/context-menu.tsx

+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/components/ui/drawer.tsx

+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

src/components/ui/dropdown-menu.tsx

+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

src/components/ui/hover-card.tsx

+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/components/ui/menubar.tsx

+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}

src/components/ui/navigation-menu.tsx

+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

src/components/ui/pagination.tsx

+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    {/* <span>Previous</span> */}
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "«"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    {/* <span>Next</span> */}
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "»"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

src/constants/editor-change-date.ts

+const EDITOR_CHANGE_DATE = '2024-01-01'
+export default EDITOR_CHANGE_DATE