feat: book qr print and import

Author: agmmtoo

.env.example

@@ -11,6 +11,11 @@ GOOGLE_APPLICATION_CREDENTIALS=/path/to/serviceAccountKey.json
 
 CLIENT_ID=
 
+# Redis Configuration
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_PASSWORD=
+REDIS_DB=0
 
 OTEL_RESOURCE_ATTRIBUTES=
 OTEL_EXPORTER_OTLP_ENDPOINT=

app/(protected)/admin/books/import/layout.tsx

@@ -1,3 +1,4 @@
+import { BtnDownloadTemplate } from '@/components/books/BtnDownloadTemplate'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
   Breadcrumb,
@@ -7,19 +8,13 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
 import { FileText } from 'lucide-react'
-import { DownloadTemplateButton } from '@/components/books/DownloadTemplateButton'
-import { cookies } from 'next/headers'
 
 export default async function BorrowDetailsLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
   params: Promise<{}>
 }>) {
-  const cookieStore = await cookies()
-  const cookieName = process.env.LIBRARY_COOKIE_NAME as string
-  const libraryId = cookieStore.get(cookieName)?.value
-
   return (
     <div className="space-y-4">
       <nav className="backdrop-blur-sm sticky top-0 z-10">
@@ -63,7 +58,7 @@ export default async function BorrowDetailsLayout({
                 <strong>year</strong> - Year of publication (optional)
               </li>
             </ul>
-            <DownloadTemplateButton libraryId={libraryId} />
+            <BtnDownloadTemplate />
           </div>
         </AlertDescription>
       </Alert>

app/(protected)/admin/books/manage/page.tsx

@@ -15,15 +15,71 @@ import {
 } from '@/components/ui/pagination'
 import { getListBooks } from '@/lib/api/book'
 import type { Metadata } from 'next'
-import { SITE_NAME } from '@/lib/consts'
+import { REDIS_KEY_BOOK_PRINT_PREFIX, SITE_NAME } from '@/lib/consts'
 import { Badge } from '@/components/ui/badge'
 import { cookies } from 'next/headers'
 import { Verify } from '@/lib/firebase/firebase'
 import { BookSelectPanel } from '@/components/books/book-select-panel'
 import { SearchInput } from '@/components/common/SearchInput'
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
-import { QrCode } from 'lucide-react'
+import { cache } from '@/lib/redis-helpers'
+import { getBookImportTemplate } from '@/lib/book-utils'
+
+async function onPrintAction(
+  bookIDs: string[]
+): Promise<{ key: string } | { error: string }> {
+  'use server'
+
+  // hash the key
+  const hash = await crypto.subtle.digest(
+    'SHA-256',
+    new TextEncoder().encode(bookIDs.toSorted().join(','))
+  )
+  const key = Array.from(new Uint8Array(hash))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+    .slice(0, 16) // Shorten to 16 characters
+
+  const success = await cache.set(
+    `${REDIS_KEY_BOOK_PRINT_PREFIX}:${key}`,
+    bookIDs,
+    300
+  )
+  if (!success) {
+    return {
+      error: 'Failed to store print data in cache',
+    }
+  }
+  return { key }
+}
+
+async function downloadImportTemplateAction(
+  bookIDs: string[]
+): Promise<{ csv: string } | { error: string }> {
+  'use server'
+
+  if (!bookIDs) {
+    return { error: 'No book IDs provided' }
+  }
+
+  const cookieStore = await cookies()
+  const cookieName = process.env.LIBRARY_COOKIE_NAME as string
+  const libID = cookieStore.get(cookieName)?.value
+
+  const res = await getListBooks(
+    bookIDs ? { ids: bookIDs, library_id: libID } : { library_id: libID }
+  )
+  if ('error' in res) {
+    return { error: res.error }
+  }
+
+  const csv = getBookImportTemplate(res.data)
+  if (!csv) {
+    return {
+      error: 'Failed to generate CSV',
+    }
+  }
+  return { csv }
+}
 
 export const metadata: Metadata = {
   title: `Books · ${SITE_NAME}`,
@@ -100,15 +156,13 @@ export default async function BooksSelectPage({
           placeholder="Search by title"
           name="title"
         />
-        <Button variant="outline" asChild>
-          <Link href="/admin/books/print-qr">
-            <QrCode className="mr-2 h-4 w-4" />
-            Print QR Codes
-          </Link>
-        </Button>
       </div>
 
-      <BookSelectPanel books={res.data} />
+      <BookSelectPanel
+        books={res.data}
+        onPrintAction={onPrintAction}
+        downloadImportTemplateAction={downloadImportTemplateAction}
+      />
 
       <Pagination>
         <PaginationContent>

app/(protected)/admin/books/print-qr/[key]/page.tsx

@@ -0,0 +1,73 @@
+import { getListBooks } from '@/lib/api/book'
+import { REDIS_KEY_BOOK_PRINT_PREFIX } from '@/lib/consts'
+import { cache } from '@/lib/redis-helpers'
+import qrcode from 'qrcode'
+import { cookies } from 'next/headers'
+
+export default async function BooksPrintQRPage({
+  params,
+}: {
+  params: Promise<{ key: string }>
+}) {
+  const { key } = await params
+  const bookIDs = await cache.get<string[]>(
+    `${REDIS_KEY_BOOK_PRINT_PREFIX}:${key}`
+  )
+
+  if (!bookIDs) {
+    return <div>No books found for the provided key.</div>
+  }
+
+  const cookieStore = await cookies()
+  const cookieName = process.env.LIBRARY_COOKIE_NAME as string
+  const libID = cookieStore.get(cookieName)?.value
+
+  const res = await getListBooks(
+    bookIDs ? { ids: bookIDs, library_id: libID } : { library_id: libID }
+  )
+  if ('error' in res) {
+    return <div>Error loading books: {res.error}</div>
+  }
+
+  const qrPromises = res.data.map(async (book) => {
+    try {
+      const svg = await qrcode.toString(book.id, {
+        margin: 0,
+        width: 100,
+        errorCorrectionLevel: 'L',
+        type: 'svg',
+      })
+      return { id: book.id, code: book.code, svg }
+    } catch (err) {
+      console.error(`Failed to generate QR code for ${book.id}:`, err)
+      return { id: book.id, svg: '' }
+    }
+  })
+
+  const results = await Promise.all(qrPromises)
+
+  return (
+    <div className="grid grid-cols-4 gap-2">
+      {results
+        .filter((b) => b.svg)
+        .map((b) => {
+          return (
+            <figure
+              key={b.id}
+              className="flex flex-col items-center border border-dashed justify-center p-2 rounded-lg"
+            >
+              <span
+                dangerouslySetInnerHTML={{ __html: b.svg }}
+                className="aspect-square border-1 rounded-md p-2"
+              />
+              <figcaption className="text-center">
+                <p className="text-black dark:text-white font-mono font-medium text-xs">
+                  {b.code}
+                </p>
+              </figcaption>
+            </figure>
+          )
+        })}
+    </div>
+  )
+}

components/books/BtnDownloadTemplate.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { Download } from 'lucide-react'
+import { Button } from '../ui/button'
+import { downloadCSV, getBookImportTemplate } from '@/lib/book-utils'
+import Link from 'next/link'
+
+export const BtnDownloadTemplate: React.FC = () => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="link"
+        className="p-0 h-auto"
+        onClick={() => downloadCSV(getBookImportTemplate([]))}
+      >
+        <Download className="h-3 w-3 mr-1" />
+        Download Template
+      </Button>
+      <span>or</span>
+      <Button variant="link">
+        <Link href="/admin/books/manage">Get Edit Template</Link>
+      </Button>
+    </div>
+  )
+}