feat: QR code for public reports

truc9 · Dec 13, 2024 · 473ae18 · 473ae18
1 parent 7b34fd9
commit 473ae18
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/package.json b/frontend/package.json
@@ -34,6 +34,7 @@
     "mantine-form-zod-resolver": "^1.1.0",
     "match-sorter": "^6.3.4",
     "numerable": "^0.3.15",
+    "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.2.1",

diff --git a/frontend/src/screens/reporting/index.tsx b/frontend/src/screens/reporting/index.tsx
@@ -3,6 +3,7 @@ import { IconMoneybag, IconTimeline } from "@tabler/icons-react";
 import { lazy, Suspense, useState } from "react";
 import Page from "../../components/page";
 import SectionLoading from "../../components/section-loading";
+import { IoQrCodeOutline } from "react-icons/io5";
 
 type TabType = "unpaid" | "activity-log" | "share-codes";
 
@@ -34,7 +35,7 @@ export default function Reporting() {
           </Tabs.Tab>
           <Tabs.Tab
             value="share-codes"
-            leftSection={<IconTimeline style={iconStyle} />}
+            leftSection={<IoQrCodeOutline style={iconStyle} />}
             onClick={() => setTab("share-codes")}
           >
             Share Codes

diff --git a/frontend/src/screens/reporting/sharecodes.tsx b/frontend/src/screens/reporting/sharecodes.tsx
@@ -5,6 +5,7 @@ import { FiTrash } from "react-icons/fi";
 import { useApi } from "../../hooks/useApi";
 import { ShareUrlModel } from "./models";
 import DataTableSkeleton from "../../components/skeleton/data-table-skeleton";
+import { QRCodeSVG } from "qrcode.react";
 
 export default function ShareCodes() {
   const { get, del } = useApi();
@@ -22,7 +23,7 @@ export default function ShareCodes() {
     <Table striped highlightOnHover withRowBorders={false}>
       <Table.Thead>
         <Table.Tr>
-          <Table.Th>ID</Table.Th>
+          <Table.Th>QR Code</Table.Th>
           <Table.Th>URL</Table.Th>
           <Table.Th></Table.Th>
         </Table.Tr>
@@ -34,7 +35,9 @@ export default function ShareCodes() {
           data?.map((item) => {
             return (
               <Table.Tr key={item.id}>
-                <Table.Td>{item.id}</Table.Td>
+                <Table.Td>
+                  <QRCodeSVG value={item.fullUrl} />
+                </Table.Td>
                 <Table.Td>{item.fullUrl}</Table.Td>
                 <Table.Td>
                   <Button