chore: quote data in table

Author: mjkeaton

src/components/Breadcrumbs.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/breadcrumb"
 import { Link } from "react-router"
 
-export function Breadcrumbs({ children }: PropsWithChildren<unknown>) {
+export function Breadcrumbs({ parents, children }: PropsWithChildren<{ parents?: React.ReactNode[] }>) {
   return (
     <Breadcrumb>
       <BreadcrumbList>
@@ -19,6 +19,20 @@ export function Breadcrumbs({ children }: PropsWithChildren<unknown>) {
           </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
+        {parents && (
+          <>
+            {parents.map((it, index) => (
+              <>
+                <BreadcrumbItem key={index}>
+                  <BreadcrumbLink asChild>
+                    <Link to="/">{it}</Link>
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+              </>
+            ))}
+          </>
+        )}
         <BreadcrumbItem>
           <BreadcrumbPage>{children}</BreadcrumbPage>
         </BreadcrumbItem>

src/pages/quotes/QuotePage.tsx

@@ -1,12 +1,13 @@
 import { Breadcrumbs } from "@/components/Breadcrumbs"
 import { PageTitle } from "@/components/PageTitle"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"
 import { InfoReply } from "@/generated/client"
 import useApiClient from "@/hooks/use-api-client"
 import useLocalStorage from "@/hooks/use-local-storage"
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { Suspense } from "react"
-import { useParams } from "react-router"
+import { Link, useParams } from "react-router"
 
 function Loader() {
   return (
@@ -20,7 +21,26 @@ function Quote({ value }: { value: InfoReply }) {
   return (
     <>
       <div className="flex flex-col gap-1">
-        <div className="flex-1">{value.id}</div>
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell>id: </TableCell>
+              <TableCell>{value.id}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>status: </TableCell>
+              <TableCell>{value.status}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>endorser: </TableCell>
+              <TableCell>{value.endorser || "(empty)"}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>bill: </TableCell>
+              <TableCell>{value.bill || "(empty)"}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
       </div>
     </>
   )
@@ -87,7 +107,15 @@ export default function QuotePage() {
 
   return (
     <>
-      <Breadcrumbs>Quote {id}</Breadcrumbs>
+      <Breadcrumbs
+        parents={[
+          <>
+            <Link to="/quotes">Quotes</Link>
+          </>,
+        ]}
+      >
+        {id}
+      </Breadcrumbs>
       <PageTitle>Quote {id}</PageTitle>
       <Suspense fallback={<Loader />}>
         <PageBody id={id} />

src/pages/quotes/QuotesPage.tsx

@@ -8,6 +8,7 @@ import useLocalStorage from "@/hooks/use-local-storage"
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { ViewIcon } from "lucide-react"
 import { Suspense } from "react"
+import { Link, useNavigate } from "react-router"
 
 function Loader() {
   return (
@@ -35,6 +36,7 @@ function QuoteListPendingRaw() {
 }
 
 function QuoteListPending() {
+  const navigate = useNavigate()
   const client = useApiClient()
 
   const { data } = useSuspenseQuery({
@@ -49,8 +51,13 @@ function QuoteListPending() {
           data.data.quotes.map((it, index) => {
             return (
               <div key={index} className="flex gap-1 items-center text-sm">
-                <span>{it}</span>
-                <Button size="sm">
+                <Link to={"/quotes/:id".replace(":id", it)}>{it}</Link>
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    void navigate("/quotes/:id".replace(":id", it))
+                  }}
+                >
                   <ViewIcon />
                 </Button>
               </div>