feat: dashboard search queries

Author: agmmtoo

app/(protected)/dashboard/page.tsx

@@ -20,13 +20,30 @@ export const metadata: Metadata = {
   title: `Dashboard · ${SITE_NAME}`,
 }
 
-export default async function Dashboard() {
+export default async function Dashboard({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    library_id: string
+    from: string
+    to: string
+    limit: number
+    skip: number
+  }>
+}) {
+  const {
+    library_id = 'a32af9bd-74b0-4ef2-8974-4570e2bfb4bb',
+    from = '2024-01-05T17:00:47.680Z',
+    to = new Date().toJSON(),
+    limit = 5,
+    skip,
+  } = await searchParams
   const res = await getAnalysis({
-    limit: 50,
-    skip: 0,
-    from: '2024-01-05T17:00:47.680Z',
-    to: '2025-06-05T17:00:47.680Z',
-    library_id: 'd7385c3e-05f7-4d0d-88c8-74fdc830ec87',
+    limit,
+    skip,
+    from,
+    to,
+    library_id,
   })
   console.log(res)
 

components/dashboard/MonthlyRevenueChart.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { TrendingUp } from 'lucide-react'
+// import { TrendingUp } from 'lucide-react'
 import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
 
 import {
@@ -107,11 +107,11 @@ export function MonthlyRevenueChart({ data }: { data: Analysis['revenue'] }) {
       <CardFooter>
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
-            <div className="flex items-center gap-2 font-medium leading-none">
+            {/* <div className="flex items-center gap-2 font-medium leading-none">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-            </div>
+            </div> */}
             <div className="flex items-center gap-2 leading-none text-muted-foreground">
-              January - June 2024
+              Showing total revenue from subscriptions and fines
             </div>
           </div>
         </div>

components/dashboard/MostBorrowedBookChart.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { TrendingUp } from 'lucide-react'
+// import { TrendingUp } from 'lucide-react'
 import { Bar, BarChart, XAxis, YAxis } from 'recharts'
 
 import {
@@ -69,11 +69,11 @@ export function MostBorrowedBookChart({ data }: { data: Analysis['book'] }) {
         </ChartContainer>
       </CardContent>
       <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 font-medium leading-none">
+        {/* <div className="flex gap-2 font-medium leading-none">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
+        </div> */}
         <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
+          Showing top most borrowed books
         </div>
       </CardFooter>
     </Card>

components/dashboard/TopMembershipChart.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { TrendingUp } from 'lucide-react'
+// import { TrendingUp } from 'lucide-react'
 import { Pie, PieChart } from 'recharts'
 
 import {
@@ -52,11 +52,11 @@ export function TopMembershipChart({ data }: { data: Analysis['membership'] }) {
         </ChartContainer>
       </CardContent>
       <CardFooter className="flex-col gap-2 text-sm">
-        <div className="flex items-center gap-2 font-medium leading-none">
+        {/* <div className="flex items-center gap-2 font-medium leading-none">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
+        </div> */}
         <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
+          Showing top most purchased membership
         </div>
       </CardFooter>
     </Card>