feat: dashboard filter

Author: agmmtoo

app/(protected)/dashboard/page.tsx

@@ -17,12 +17,17 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { LibrarySelector } from '@/components/dashboard/LibrarySelector'
 import { DateRangeSelector } from '@/components/dashboard/DateRangeSelector'
+import { IsLoggedIn } from '@/lib/firebase/firebase'
+import { redirect } from 'next/navigation'
+import { format, subMonths, parse } from 'date-fns'
+import { getListLibraries } from '@/lib/api/library'
+import { DateRange } from 'react-day-picker'
 
 export const metadata: Metadata = {
   title: `Dashboard · ${SITE_NAME}`,
 }
 
-export default async function Dashboard({
+export default async function DashboardPage({
   searchParams,
 }: {
   searchParams: Promise<{
@@ -33,25 +38,75 @@ export default async function Dashboard({
     skip: number
   }>
 }) {
+  const claims = await IsLoggedIn()
+  if (!claims) redirect('/login?from=/dashboard')
+
   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,
-    skip,
+    library_id,
     from,
     to,
-    library_id,
-  })
-  console.log(res)
+    // limit = 5,
+    // skip,
+  } = await searchParams
+
+  if (claims.librarease.role != 'USER' && (!to || !from || !library_id)) {
+    const now = new Date()
+    const to = format(now, 'dd-MM-yyyy')
+    const from = format(subMonths(now, 4), 'dd-MM-yyyy')
+    const libID = claims.librarease.admin_libs.concat(
+      claims.librarease.staff_libs
+    )
+    const sp = new URLSearchParams()
+    sp.set('from', from)
+    sp.set('to', to)
+    sp.set('library_id', libID[0])
+
+    redirect('?' + sp.toString())
+  }
+
+  const [res, libsRes] = await Promise.all([
+    getAnalysis({
+      skip: 0,
+      limit: 5,
+      from: parse(from, 'dd-MM-yyyy', new Date()).toJSON(),
+      to: parse(to, 'dd-MM-yyyy', new Date()).toJSON(),
+      library_id,
+    }),
+    getListLibraries({ limit: 5 }),
+  ])
 
   if ('error' in res) {
-    console.log(res)
-    return <div>{JSON.stringify(res.message)}</div>
+    return <div>{res.error}</div>
+  }
+  if ('error' in libsRes) {
+    return <div>{libsRes.error}</div>
+  }
+
+  async function onLibraryChange(libraryID: string) {
+    'use server'
+
+    const p = await searchParams
+    // @ts-expect-error: skip and imit are not used now
+    const sp = new URLSearchParams(p)
+    sp.set('library_id', libraryID)
+
+    redirect('/dashboard?' + sp.toString())
+  }
+
+  const fromDate = parse(from, 'dd-MM-yyyy', new Date())
+  const toDate = parse(to, 'dd-MM-yyyy', new Date())
+
+  async function onDateRangeChange(range?: DateRange) {
+    'use server'
+
+    const p = await searchParams
+    // @ts-expect-error: skip and imit are not used now
+    const sp = new URLSearchParams(p)
+    if (!range) return
+    if (range.from) sp.set('from', format(range.from, 'dd-MM-yyyy'))
+    if (range.to) sp.set('to', format(range.to, 'dd-MM-yyyy'))
+
+    redirect('/dashboard?' + sp.toString())
   }
 
   return (
@@ -73,8 +128,15 @@ export default async function Dashboard({
       </Breadcrumb>
 
       <div className="grid my-4 grid-cols-1 gap-4 md:grid-cols-2">
-        <LibrarySelector />
-        <DateRangeSelector />
+        <LibrarySelector
+          libs={libsRes.data}
+          lib={library_id}
+          onChangeAction={onLibraryChange}
+        />
+        <DateRangeSelector
+          range={{ from: fromDate, to: toDate }}
+          onChangeAction={onDateRangeChange}
+        />
         <MostBorrowedBookChart data={res.data.book} />
         <TopMembershipChart data={res.data.membership} />
         <MontlyBorrowChart data={res.data.borrowing} />

components/dashboard/DateRangeSelector.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { addDays, format } from 'date-fns'
+import { format, subMonths, startOfMonth, endOfMonth } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
 import { DateRange } from 'react-day-picker'
 
@@ -13,17 +13,37 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
 
 export function DateRangeSelector({
   className,
-}: React.HTMLAttributes<HTMLDivElement>) {
+  range,
+  onChangeAction,
+}: React.HTMLAttributes<HTMLDivElement> & {
+  range: DateRange
+  onChangeAction: (range?: DateRange) => void
+}) {
   const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
+    from: range.from,
+    to: range.to,
   })
 
+  const onInteractOutside = onChangeAction.bind(null, date)
+
+  const onPresetChange = React.useCallback(
+    (label: string) =>
+      setDate(rangePresets.find((r) => r.label === label)?.date),
+    []
+  )
+
   return (
-    <div className={cn('grid gap-2', className)}>
+    <div className={cn('grid gap-2 justify-self-end', className)}>
       <Popover>
         <PopoverTrigger asChild>
           <Button
@@ -49,7 +69,23 @@ export function DateRangeSelector({
             )}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        <PopoverContent
+          onInteractOutside={onInteractOutside}
+          className="flex w-auto flex-col space-y-2 p-2"
+          align="start"
+        >
+          <Select onValueChange={onPresetChange}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent position="popper">
+              {rangePresets.map((r) => (
+                <SelectItem key={r.label} value={r.label}>
+                  {r.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           <Calendar
             initialFocus
             mode="range"
@@ -63,3 +99,17 @@ export function DateRangeSelector({
     </div>
   )
 }
+
+const rangePresets: { label: string; date: DateRange }[] = [
+  {
+    label: 'Last Month',
+    date: {
+      from: startOfMonth(subMonths(new Date(), 1)),
+      to: endOfMonth(subMonths(new Date(), 1)),
+    },
+  },
+  {
+    label: 'Past 4 Months',
+    date: { from: subMonths(new Date(), 4), to: new Date() },
+  },
+]

components/dashboard/LibrarySelector.tsx

@@ -1,5 +1,36 @@
 'use client'
 
-export function LibrarySelector() {
-  return <div>Select library</div>
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Library } from '@/lib/types/library'
+
+export const LibrarySelector: React.FC<{
+  libs: Library[]
+  lib: string
+  onChangeAction: (libID: string) => void
+}> = ({ libs, lib, onChangeAction: onChange }) => {
+  return (
+    <Select value={lib} onValueChange={onChange}>
+      <SelectTrigger className="w-1/2 justify-self-end">
+        <SelectValue placeholder="Select a library" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Library</SelectLabel>
+          {libs.map((lib) => (
+            <SelectItem value={lib.id} key={lib.id}>
+              {lib.name}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
 }