feat: implement dynamic mobile header with centered page title and adaptive layout

app/(backend)/layout.tsx

@@ -3,6 +3,7 @@
 import Header from "@/components/Header/index";
 import Sidebar from "@/components/Sidebar";
 import React, { useState } from "react";
+import { usePathname } from "next/navigation";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -10,6 +11,21 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const pathname = usePathname();
+
+  const getPageTitle = (path: string) => {
+    if (path === "/") return "Overview";
+    
+    const titles: Record<string, string> = {
+      "/users": "Users",
+      "/settings": "Settings",
+      "/profile": "Profile",
+      "/songs": "Songs Database",
+      "/events": "Worship & Events",
+    };
+
+    return titles[path] || "Dashboard";
+  };
 
   return (
     <div className="dashboard">
@@ -26,7 +42,11 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       <div
         className={`flex min-h-screen flex-col transition-all duration-300 md:pl-64`}
       >
-        <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+        <Header 
+          onMenuClick={() => setSidebarOpen(!sidebarOpen)} 
+          pageTitle={getPageTitle(pathname)} 
+        />
+        
         <main className="animate-in fade-in flex-1 p-4 duration-500 md:p-8">
           {children}
         </main>
@@ -35,4 +55,4 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   );
 };
 
-export default Layout;
+export default Layout;

app/(backend)/users/components/UserMobileCard/index.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { MoreVertical, Mail, Shield, Calendar } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface UserMobileCardProps {
+    name: string;
+    email: string;
+    role: string;
+    joinedAt?: string;
+    status: 'active' | 'inactive';
+}
+
+export const UserMobileCard: React.FC<UserMobileCardProps> = ({ name, email, role, joinedAt, status }) => {
+
+    return (
+        <div className="bg-card border border-border rounded-xl p-4 shadow-sm md:hidden active:scale-[0.99] transition-all">
+            {/* Header section */}
+            <div className="flex items-start justify-between">
+                <div className="flex items-center gap-3">
+                    {/* Avatar will be here */}
+                    <div className="size-11 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
+                        <span className="text-primary font-bold text-sm">
+                            {name.split(" ").map(n => n[0]).join("")}
+                        </span>
+                    </div>
+                    <div className="flex flex-col">
+                        <span className="font-semibold text-foreground leading-none">{name}</span>
+                        <span className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                            <Mail className="size-3" />
+                            {email}
+                        </span>
+                    </div>
+                </div>
+
+                <Badge
+                    variant={status === "active" ? "default" : "secondary"}
+                    className="text-[10px] px-2 py-0 h-5"
+                >
+                    {status}
+                </Badge>
+            </div>
+
+            {/* Footer section: role and options */}
+            <div className="flex items-center justify-between mt-5 pt-3 border-t border-border/50">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Shield className="size-3 text-primary/70" />
+                    <span>Role: <b className="text-foreground font-medium">{role}</b></span>
+                </div>
+                <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/80">
+                    <Calendar className="size-3" />
+                    <span>Joined: {joinedAt}</span>
+                </div>
+                <Button variant="ghost" size="icon-xs" className="text-muted-foreground">
+                    <MoreVertical className="size-4" />
+                </Button>
+            </div>
+        </div>
+    )
+
+}

app/(backend)/users/page.tsx

@@ -3,103 +3,134 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Search, Plus, MoreVertical, Filter } from "lucide-react";
+import { UserMobileCard } from "./components/UserMobileCard";
+
+const tempUsers = [
+    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", joinedAt: "2023-01-01", status: "active" },
+    { id: 2, name: "Alice Smith", email: "alice@test.com", role: "Editor", joinedAt: "2023-02-15", status: "active" },
+    { id: 3, name: "Bob Johnson", email: "bob@community.com", role: "Member", joinedAt: "2023-03-10", status: "inactive" },
+    { id: 4, name: "Charlie Brown", email: "charlie@community.com", role: "Member", joinedAt: "2023-04-20", status: "active" },
+];
 
 export default function UsersPage() {
-  
+
     const [open, setOpen] = useState(false)
-  
+
     return (
         <div className="space-y-6">
-        {/* Header */}
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <div>
-            <h1 className="text-3xl font-bold tracking-tight text-foreground">Users</h1>
-            <p className="text-muted-foreground mt-1">Manage your community members and their permissions.</p>
-            </div>
-            <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
-                <Plus />
-                Add User
-            </Button>
-        </div>
+            <div className="flex flex-col gap-6 md:gap-10 p-0">
 
-        {/* Filters & Search */}
-        <div className="flex flex-col md:flex-row gap-4">
-            <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <input 
-                className="w-full bg-card border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
-                placeholder="Search users by name or email..."
-            />
-            </div>
-            <Button variant="outline" size="sm">
-                <Filter className="mr-2" />
-                Filters
-            </Button>
-        </div>
+                {/* Header: Title + Button for Desktop only */}
+                <div className="hidden md:flex items-center justify-between">
+                    <div className="space-y-1">
+                        <h1 className="text-4xl font-bold tracking-tight text-white">
+                            Users
+                        </h1>
+                        <p className="hidden md:block text-muted-foreground text-lg mt-3 max-w-2xl">
+                            Manage your community members, roles, and permissions here.
+                        </p>
+                    </div>
 
-        {/* Users List / Table */}
-        <div className="bg-card border border-border rounded-xl overflow-hidden shadow-sm">
-            <table className="w-full text-left">
-            <thead className="bg-muted/50 border-b border-border">
-                <tr>
-                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">User</th>
-                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Role</th>
-                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Status</th>
-                <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Joined</th>
-                <th className="px-6 py-3"></th>
-                </tr>
-            </thead>
-            <tbody className="divide-y divide-border">
-                {/* Example Row */}
-                <tr className="hover:bg-muted/20 transition-colors cursor-pointer">
-                    <td className="px-6 py-4">
-                        <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">JD</div>
-                        <div>
-                            <div className="text-sm font-medium text-foreground">John Doe</div>
-                            <div className="text-xs text-muted-foreground">john@example.com</div>
+                    {/* Кнопка: на мобилке круглая, на десктопе — солидная и яркая */}
+                    <Button 
+                        variant="default"
+                        className="bg-secondary hover:bg-secondary/90 border border-border rounded-lg cursor-pointer">
+                        <Plus className="text-muted-foreground size-5 mr-2" />
+                        <span className="text-sm text-muted-foreground">
+                            Add New User
+                        </span>
+                    </Button>
+                </div>
+
+                {/* Search + Filter */}
+                <div className="flex gap-3 md:gap-4">
+                    <div className="relative w-full group">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                        <input
+                            className="w-full bg-card border border-border rounded-lg py-1 pl-10 pr-12 focus:outline-1"
+                            placeholder="Search users..."
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="size-8 md:size-10 hover:bg-muted text-muted-foreground hover:text-white transition-colors"
+                            >
+                                <Filter className="size-4 md:size-5" />
+                                <span className="sr-only">Filters</span>
+                            </Button>
                         </div>
-                        </div>
-                    </td>
-                    <td className="px-6 py-4">
-                        <span className="text-sm text-muted-foreground">Administrator</span>
-                    </td>
-                    <td className="px-6 py-4">
-                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-500">Active</span>
-                    </td>
-                    <td className="px-6 py-4 text-sm text-muted-foreground">Jan 29, 2026</td>
-                    <td className="px-6 py-4 text-right">
-                        <button className="p-2 hover:bg-muted rounded-full transition-colors">
-                        <MoreVertical className="w-4 h-4 text-muted-foreground" />
-                        </button>
-                    </td>
-                </tr>
-                <tr className="hover:bg-muted/20 transition-colors cursor-pointer">
-                    <td className="px-6 py-4">
-                        <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">JD</div>
-                        <div>
-                            <div className="text-sm font-medium text-foreground">Ivan Ivanowitsch</div>
-                            <div className="text-xs text-muted-foreground">ivan@example.com</div>
-                        </div>
-                        </div>
-                    </td>
-                    <td className="px-6 py-4">
-                        <span className="text-sm text-muted-foreground">User</span>
-                    </td>
-                    <td className="px-6 py-4">
-                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-500/10 text-red-500">not active</span>
-                    </td>
-                    <td className="px-6 py-4 text-sm text-muted-foreground">May 20, 2025</td>
-                    <td className="px-6 py-4 text-right">
-                        <button className="p-2 hover:bg-muted rounded-full transition-colors">
-                        <MoreVertical className="w-4 h-4 text-muted-foreground" />
-                        </button>
-                    </td>
-                </tr>
-            </tbody>
-            </table>
+                    </div>
+                    {/* Кнопка: на мобилке круглая, на десктопе — солидная и яркая */}
+                    <Button 
+                        variant="default"
+                        className="md:hidden bg-secondary rounded-lg text-muted-foreground border border-border"
+                    >
+                        <Plus className="size-6 md:size-5 md:mr-2" />
+                    </Button>
+                </div>
+            </div>
+
+            {/* --- For Mobile Phones --- */}
+            <div className="flex flex-col gap-4 md:hidden">
+                {tempUsers.map((user) => (
+                    <UserMobileCard
+                        key={user.id}
+                        name={user.name}
+                        email={user.email}
+                        role={user.role}
+                        joinedAt={user.joinedAt}
+                        status={user.status as "active" | "inactive"}
+                    />
+                ))}
+            </div>
+
+            {/* Users List / Table */}
+            <div className="hidden md:block bg-card border border-border rounded-xl overflow-hidden shadow-sm">
+                <table className="w-full text-left">
+                    <thead className="bg-muted/50 border-b border-border">
+                        <tr>
+                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">User</th>
+                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Role</th>
+                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Status</th>
+                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Joined</th>
+                            <th className="px-6 py-3"></th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-border">
+                        {/* Example Row */}
+                        {tempUsers.map((user) => (
+                            <tr key={user.id} className="hover:bg-muted/20 transition-colors cursor-pointer">
+                                <td className="px-6 py-4">
+                                    <div className="flex items-center gap-3">
+                                        <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">{user.name.charAt(0)}</div>
+                                        <div>
+                                            <div className="text-sm font-medium text-foreground">{user.name}</div>
+                                            <div className="text-xs text-muted-foreground">{user.email}</div>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td className="px-6 py-4">
+                                    <span className="text-sm text-muted-foreground">{user.role}</span>
+                                </td>
+                                <td className="px-6 py-4">
+                                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${user.status === "active"
+                                        ? "bg-green-500/10 text-green-500"
+                                        : "bg-red-500/10 text-red-500"}`}>
+                                        {user.status}
+                                    </span>
+                                </td>
+                                <td className="px-6 py-4 text-sm text-muted-foreground">{user.joinedAt}</td>
+                                <td className="px-6 py-4 text-right">
+                                    <button className="p-2 hover:bg-muted rounded-full transition-colors">
+                                        <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                                    </button>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
         </div>
-        </div>
-  );
+    );
 }

components/Header/index.tsx

@@ -3,15 +3,17 @@ import React from "react";
 
 interface HeaderProps {
   onMenuClick: () => void;
+  pageTitle?: string;
 }
 
-const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
+const Header: React.FC<HeaderProps> = ({ onMenuClick, pageTitle }) => {
   return (
     <header
       data-cmp="Header"
-      className="header border-border sticky top-0 z-20 flex h-16 items-center justify-between border-b px-4 md:px-8"
+      className="header border-border bg-background/95 sticky top-0 z-20 flex h-16 items-center border-b px-4 backdrop-blur md:px-8"
     >
-      <div className="flex items-center md:hidden">
+      {/* 1. Left: Menu button (only on mobile) */}
+      <div className="flex flex-1 items-center md:hidden">
         <button
           title="Menu"
           onClick={onMenuClick}
@@ -21,6 +23,14 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
         </button>
       </div>
 
+      {/* 2. Center: Title (only on mobile) */}
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 md:hidden">
+        <span className="text-xl font-bold tracking-tight text-white">
+          {pageTitle}
+        </span>
+      </div>
+
+      {/* 3. Desktop: Search */}
       <div className="relative hidden max-w-xl flex-1 md:flex">
         <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
         <input
@@ -30,7 +40,8 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
         />
       </div>
 
-      <div className="flex items-center space-x-4">
+      {/* 4. RIGHT SIDE: Notifications and Profile */}
+      <div className="flex flex-1 items-center justify-end space-x-4">
         <button
           title="Notifications"
           className="text-muted-foreground hover:text-foreground hover:bg-muted relative rounded-full p-2 transition-colors"
@@ -40,13 +51,11 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
         </button>
 
         <div className="border-border/50 flex items-center space-x-3 border-l pl-4">
-          <div className="hidden text-right sm:block">
-            <p className="text-foreground text-sm font-medium">
-              Community Admin
-            </p>
+          <div className="hidden text-right sm:block text-nowrap">
+            <p className="text-foreground text-sm font-medium">Community Admin</p>
             <p className="text-muted-foreground text-xs">Super Administrator</p>
           </div>
-          <div className="bg-primary/10 border-primary/20 flex h-9 w-9 items-center justify-center rounded-full border">
+          <div className="bg-primary/10 border-primary/20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border">
             <User className="text-primary h-5 w-5" />
           </div>
         </div>
@@ -55,4 +64,4 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
   );
 };
 
-export default Header;
+export default Header;

components/ui/calendar.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} 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:--spacing(8)] [[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(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", 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 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

package-lock.json

@@ -13,10 +13,12 @@
                 "@radix-ui/react-slot": "^1.2.4",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
+                "date-fns": "^4.1.0",
                 "lucide-react": "^0.563.0",
                 "next": "16.1.4",
                 "next-themes": "^0.4.6",
                 "react": "19.2.3",
+                "react-day-picker": "^9.13.0",
                 "react-dom": "19.2.3",
                 "tailwind-merge": "^3.4.0"
             },
@@ -288,6 +290,12 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@date-fns/tz": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+            "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+            "license": "MIT"
+        },
         "node_modules/@emnapi/core": {
             "version": "1.8.1",
             "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -3446,6 +3454,22 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/date-fns": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+            "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
+        "node_modules/date-fns-jalali": {
+            "version": "4.1.0-0",
+            "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+            "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+            "license": "MIT"
+        },
         "node_modules/debug": {
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -6269,6 +6293,27 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-day-picker": {
+            "version": "9.13.0",
+            "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.13.0.tgz",
+            "integrity": "sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@date-fns/tz": "^1.4.1",
+                "date-fns": "^4.1.0",
+                "date-fns-jalali": "^4.1.0-0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://github.com/sponsors/gpbl"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
         "node_modules/react-dom": {
             "version": "19.2.3",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",

package.json

@@ -14,10 +14,12 @@
         "@radix-ui/react-slot": "^1.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "lucide-react": "^0.563.0",
         "next": "16.1.4",
         "next-themes": "^0.4.6",
         "react": "19.2.3",
+        "react-day-picker": "^9.13.0",
         "react-dom": "19.2.3",
         "tailwind-merge": "^3.4.0"
     },