new ui and daily report

src/app/calendar/page.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { api } from '@/lib/api'
 import { getCurrentPersianYear } from '@/lib/persian-date'
 import { Calendar as CalendarIcon, ChevronRight, Database, TrendingUp } from 'lucide-react'
@@ -22,6 +23,7 @@ function useQueryParam(name: string) {
 }
 
 export default function CalendarPage() {
+    const router = useRouter()
     const deviceIdParam = useQueryParam('deviceId')
     const [deviceId, setDeviceId] = useState<number>(1)
     const [year, setYear] = useState<number>(getCurrentPersianYear())
@@ -131,9 +133,10 @@ export default function CalendarPage() {
                             const isActive = activeMonths.includes(m)
                             const stats = monthDays[m]
                             return (
-                                <Link
+                                <button
                                     key={m}
-                                    href={`/day-details?deviceId=${deviceId}&year=${year}&month=${m}`}
+                                    onClick={() => isActive && router.replace(`/day-details?deviceId=${deviceId}&year=${year}&month=${m}`)}
+                                    disabled={!isActive}
                                     className={`group relative rounded-xl border-2 p-5 text-center transition-all duration-300 ${
                                         isActive
                                             ? 'bg-white border-green-200 hover:border-green-400 hover:shadow-lg hover:-translate-y-1'
@@ -159,7 +162,7 @@ export default function CalendarPage() {
                                     {isActive && (
                                         <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-500 to-green-600 rounded-b-xl transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
                                     )}
-                                </Link>
+                                </button>
                             )
                         })}
                     </div>