I fixed the filter for all the leads

src/app/(dashboard)/dashboard/page.tsx

@@ -1,12 +1,13 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { PageHeader } from "@/components/shared/page-header"
 import { StatCard } from "@/components/dashboard/stat-card"
+import { StatCardSkeleton } from "@/components/dashboard/stat-card-skeleton"
 import { RecentLeadsTable } from "@/components/dashboard/recent-leads-table"
 import { LeadStatusChart } from "@/components/dashboard/lead-status-chart"
 import { LeadsPerMonthChart } from "@/components/dashboard/leads-per-month-chart"
-import { dashboardStats } from "@/data/dashboard"
+import { getDashboardStats } from "@/data/dashboard"
 import {
   Users,
   UserPlus,
@@ -23,19 +24,26 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { DashboardStats } from "@/types"
 
 export default function DashboardPage() {
-  const stats = dashboardStats
   const [period, setPeriod] = useState("6months")
+  const [stats, setStats] = useState<DashboardStats | null>(null)
 
-  const statCards = [
-    { title: "Total Leads", value: stats.totalLeads, icon: Users, variant: "blue" as const, description: "All time" },
-    { title: "Open Leads", value: stats.openLeads, icon: UserPlus, variant: "blue" as const, description: "Needs attention" },
-    { title: "Contacted", value: stats.contactedLeads, icon: PhoneCall, variant: "amber" as const, description: "In conversation" },
-    { title: "Pending", value: stats.pendingLeads, icon: Clock, variant: "purple" as const, description: "Awaiting decision" },
-    { title: "Closed", value: stats.closedLeads, icon: CheckCircle2, variant: "emerald" as const, description: "Won" },
-    { title: "Conversion Rate", value: `${stats.conversionRate}%`, icon: TrendingUp, variant: "emerald" as const, description: `${stats.closedLeads} of ${stats.totalLeads} leads` },
-  ]
+  useEffect(() => {
+    setStats(getDashboardStats(period))
+  }, [period])
+
+  const statCards = stats
+    ? [
+        { title: "Total Leads", value: stats.totalLeads, icon: Users, variant: "blue" as const, description: stats.periodLabel },
+        { title: "Open Leads", value: stats.openLeads, icon: UserPlus, variant: "blue" as const, description: "Needs attention" },
+        { title: "Contacted", value: stats.contactedLeads, icon: PhoneCall, variant: "amber" as const, description: "In conversation" },
+        { title: "Pending", value: stats.pendingLeads, icon: Clock, variant: "purple" as const, description: "Awaiting decision" },
+        { title: "Closed", value: stats.closedLeads, icon: CheckCircle2, variant: "emerald" as const, description: "Won" },
+        { title: "Conversion Rate", value: `${stats.conversionRate}%`, icon: TrendingUp, variant: "emerald" as const, description: `${stats.closedLeads} of ${stats.totalLeads} leads` },
+      ]
+    : []
 
   return (
     <div className="space-y-6">
@@ -55,17 +63,20 @@ export default function DashboardPage() {
       </PageHeader>
 
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
-        {statCards.map((card, i) => (
-          <StatCard key={card.title} {...card} index={i} />
-        ))}
+        {stats
+          ? statCards.map((card, i) => (
+              <StatCard key={card.title} {...card} index={i} />
+            ))
+          : Array.from({ length: 6 }).map((_, i) => <StatCardSkeleton key={i} />)
+        }
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2">
-        <LeadStatusChart data={stats.statusDistribution} />
-        <LeadsPerMonthChart data={stats.leadsPerMonth} />
+        <LeadStatusChart data={stats?.statusDistribution ?? []} />
+        <LeadsPerMonthChart data={stats?.leadsPerMonth ?? []} />
       </div>
 
-      <RecentLeadsTable leads={stats.recentLeads} />
+      <RecentLeadsTable leads={stats?.recentLeads ?? []} />
     </div>
   )
 }

src/app/(dashboard)/leads/page.tsx

@@ -6,15 +6,21 @@ import { LeadsTable } from "@/components/leads/leads-table"
 import { LeadsTableToolbar } from "@/components/leads/leads-table-toolbar"
 import { LeadFormDialog } from "@/components/leads/lead-form-dialog"
 import { leads } from "@/data/leads"
+import { filterLeadsByPeriod } from "@/lib/date-utils"
 
 export default function LeadsPage() {
   const [search, setSearch] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
+  const [periodFilter, setPeriodFilter] = useState("all")
   const [createOpen, setCreateOpen] = useState(false)
 
   const filteredLeads = useMemo(() => {
     let result = leads
 
+    if (periodFilter && periodFilter !== "all") {
+      result = filterLeadsByPeriod(result, periodFilter)
+    }
+
     if (search) {
       const q = search.toLowerCase()
       result = result.filter(
@@ -31,7 +37,7 @@ export default function LeadsPage() {
     }
 
     return result
-  }, [search, statusFilter])
+  }, [search, statusFilter, periodFilter])
 
   return (
     <div className="space-y-4">
@@ -47,6 +53,8 @@ export default function LeadsPage() {
             onSearchChange={setSearch}
             statusFilter={statusFilter}
             onStatusFilterChange={setStatusFilter}
+            periodFilter={periodFilter}
+            onPeriodFilterChange={setPeriodFilter}
             onCreateClick={() => setCreateOpen(true)}
           />
         </div>