feat: display expired quotes

Author: mjkeaton

src/components/AppSidebar.tsx

@@ -51,7 +51,6 @@ const data = {
         {
           title: "Expired",
           url: "/quotes/expired",
-          disabled: true,
         },
       ],
     },

src/main.tsx

@@ -18,6 +18,7 @@ import EarningsPage from "./pages/balances/EarningsPage"
 import CashFlowPage from "./pages/balances/CashFlowPage"
 import OfferedQuotesPage from "./pages/quotes/OfferedQuotesPage"
 import DeniedQuotesPage from "./pages/quotes/DeniedQuotesPage"
+import ExpiredQuotesPage from "./pages/quotes/ExpiredQuotesPage"
 
 const queryClient = new QueryClient()
 
@@ -44,6 +45,7 @@ void prepare().then(() => {
               <Route path="quotes/accepted" element={<AcceptedQuotesPage />} />
               <Route path="quotes/offered" element={<OfferedQuotesPage />} />
               <Route path="quotes/denied" element={<DeniedQuotesPage />} />
+              <Route path="quotes/expired" element={<ExpiredQuotesPage />} />
               <Route path="quotes/:id" element={<QuotePage />} />
               <Route path="settings" element={<SettingsPage />} />
               <Route path="info" element={<InfoPage />} />

src/pages/quotes/ExpiredQuotesPage.tsx

@@ -0,0 +1,136 @@
+import { Breadcrumbs } from "@/components/Breadcrumbs"
+import { PageTitle } from "@/components/PageTitle"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import { ListQuotesData } from "@/generated/client"
+import { listQuotesOptions } from "@/generated/client/@tanstack/react-query.gen"
+import useLocalStorage from "@/hooks/use-local-storage"
+import { cn } from "@/lib/utils"
+import { useSuspenseQuery } from "@tanstack/react-query"
+import { LoaderIcon } from "lucide-react"
+import { Suspense } from "react"
+import { Link, useNavigate } from "react-router"
+
+function Loader() {
+  return (
+    <div className="flex flex-col gap-1.5 py-2">
+      <Skeleton className="h-4 rounded-lg" />
+      <Skeleton className="h-16 rounded-lg" />
+      <Skeleton className="h-16 rounded-lg" />
+      <Skeleton className="h-16 rounded-lg" />
+      <Skeleton className="h-16 rounded-lg" />
+      <Skeleton className="h-16 rounded-lg" />
+    </div>
+  )
+}
+
+function QuoteListExpired() {
+  const navigate = useNavigate()
+
+  const { data, isFetching } = useSuspenseQuery({
+    ...listQuotesOptions({
+      query: {
+        status: "expired",
+      } as unknown as ListQuotesData["query"],
+    }),
+  })
+
+  return (
+    <>
+      <div className="flex items-center gap-1">
+        <LoaderIcon
+          className={cn("stroke-1 animate-spin", {
+            "animate-spin": isFetching,
+            invisible: !isFetching,
+          })}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1 my-2">
+        {data.quotes.length === 0 && <div className="py-2 font-bold">No expired quotes.</div>}
+        {data.quotes.map((it, index) => {
+          return (
+            <div key={index} className="flex gap-1 items-center text-sm">
+              <span className="font-mono">
+                {isFetching ? (
+                  <>{it.id}</>
+                ) : (
+                  <>
+                    <Link to={"/quotes/:id".replace(":id", it.id)}>{it.id}</Link>
+                  </>
+                )}
+              </span>
+
+              <Button
+                size="sm"
+                disabled={isFetching}
+                onClick={() => {
+                  void navigate("/quotes/:id".replace(":id", it.id))
+                }}
+              >
+                View
+              </Button>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+
+function DevSection() {
+  const [devMode] = useLocalStorage("devMode", false)
+
+  const { data: quotesExpired } = useSuspenseQuery({
+    ...listQuotesOptions({
+      query: {
+        status: "expired",
+      } as unknown as ListQuotesData["query"],
+    }),
+  })
+
+  return (
+    <>
+      {devMode && (
+        <>
+          <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
+            {JSON.stringify(quotesExpired, null, 2)}
+          </pre>
+        </>
+      )}
+    </>
+  )
+}
+
+function PageBody() {
+  return (
+    <div className="flex flex-col gap-2">
+      <div>
+        <QuoteListExpired />
+      </div>
+    </div>
+  )
+}
+
+export default function ExpiredQuotesPage() {
+  return (
+    <>
+      <Breadcrumbs
+        parents={[
+          <>
+            <Link to="/quotes">Quotes</Link>
+          </>,
+        ]}
+      >
+        Expired
+      </Breadcrumbs>
+      <PageTitle>Expired Quotes</PageTitle>
+      <Suspense fallback={<Loader />}>
+        <PageBody />
+      </Suspense>
+      <Suspense>
+        <DevSection />
+      </Suspense>
+    </>
+  )
+}

src/pages/quotes/QuotesPage.tsx

@@ -16,6 +16,8 @@ function Loader() {
       <Skeleton className="h-32 rounded-lg" />
       <Skeleton className="h-32 rounded-lg" />
       <Skeleton className="h-32 rounded-lg" />
+      <Skeleton className="h-32 rounded-lg" />
+      <Skeleton className="h-32 rounded-lg" />
     </div>
   )
 }
@@ -49,6 +51,14 @@ function PageBody() {
     }),
   })
 
+  const { data: quotesExpired } = useSuspenseQuery({
+    ...listQuotesOptions({
+      query: {
+        status: "expired",
+      } as unknown as ListQuotesData["query"],
+    }),
+  })
+
   return (
     <div className="flex flex-col gap-1.5 my-2">
       <Link to={"/quotes/pending"}>
@@ -122,6 +132,21 @@ function PageBody() {
           </div>
         </Card>
       </Link>
+      <Link to={"/quotes/expired"}>
+        <Card className="flex-1 self-stretch">
+          <div className="flex items-center">
+            <div className="flex-1 flex flex-col justify-center">
+              <CardHeader>
+                <CardTitle>Expired quotes</CardTitle>
+              </CardHeader>
+              <CardContent className="text-2xl">{quotesExpired.quotes.length} expired</CardContent>
+            </div>
+            <div className="flex p-8">
+              <ChevronRight size={48} className="text-neutral-400" />
+            </div>
+          </div>
+        </Card>
+      </Link>
     </div>
   )
 }