Preview

midday-ai · Dec 17, 2023 · ee2a98a · ee2a98a
1 parent 25a4e1a
commit ee2a98a
Show file tree

Hide file tree

Showing 14 changed files with 154 additions and 115 deletions.
diff --git a/apps/dashboard/src/app/[locale]/@dashboard/(root)/transactions/page.tsx b/apps/dashboard/src/app/[locale]/@dashboard/(root)/transactions/page.tsx
@@ -1,4 +1,3 @@
-import { ExportButton } from "@/components/export-button";
 import { Filter } from "@/components/filter";
 import { TransactionsModal } from "@/components/modals/transactions-modal";
 import { Table } from "@/components/tables/transactions";
@@ -32,7 +31,6 @@ export default async function Transactions({
     <>
       <div className="flex justify-between py-6">
         <Filter sections={sections} />
-        <ExportButton />
       </div>
 
       <div className={cn(empty && "opacity-20 pointer-events-none")}>

diff --git a/apps/dashboard/src/components/attachments.tsx b/apps/dashboard/src/components/attachments.tsx
@@ -29,10 +29,11 @@ const Item = ({ file, onDelete, id }) => {
             <div className="rounded-md border w-[40px] h-[40px] flex items-center justify-center overflow-hidden cursor-pointer">
               <FilePreview
                 src={`/api/proxy?filePath=vault/${file.path}`}
-                className="w-[40px] h-[40px]"
                 name={file.name}
                 type={file.type}
                 preview
+                width={40}
+                height={40}
               />
             </div>
           </HoverCardTrigger>
@@ -47,6 +48,8 @@ const Item = ({ file, onDelete, id }) => {
                 downloadUrl={`/api/download/file?path=transactions/${id}/${file.name}&filename=${file.name}`}
                 name={file.name}
                 type={file.type}
+                width={300}
+                height={315}
               />
             </HoverCardContent>
           )}

diff --git a/apps/dashboard/src/components/export-button.tsx b/apps/dashboard/src/components/export-button.tsx
@@ -5,7 +5,7 @@ import { Button } from "@midday/ui/button";
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 
-export function ExportButton() {
+export function ExportButton({ totalMissingAttachments }) {
   const [isOpen, setOpen] = useState();
 
   const searchParams = useSearchParams();
@@ -23,7 +23,11 @@ export function ExportButton() {
       >
         Export
       </Button>
-      <ExportTransactionsModal isOpen={isOpen} setOpen={setOpen} />
+      <ExportTransactionsModal
+        isOpen={isOpen}
+        setOpen={setOpen}
+        totalMissingAttachments={totalMissingAttachments}
+      />
     </>
   );
 }
diff --git a/apps/dashboard/src/components/file-preview.tsx b/apps/dashboard/src/components/file-preview.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@midday/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@midday/ui/dialog";
 import { Icons } from "@midday/ui/icons";
 import { Skeleton } from "@midday/ui/skeleton";
 import { cn } from "@midday/ui/utils";
@@ -19,6 +20,9 @@ type Props = {
   preview?: boolean;
   src: string;
   downloadUrl: string;
+  width: number;
+  height: number;
+  disableFullscreen?: boolean;
 };
 
 export const isSupportedFilePreview = (type: FileType) => {
@@ -49,6 +53,9 @@ export function FilePreview({
   type,
   preview,
   downloadUrl,
+  width,
+  height,
+  disableFullscreen,
 }: Props) {
   const [isLoaded, setLoaded] = useState(false);
   const [error, setError] = useState(false);
@@ -65,7 +72,7 @@ export function FilePreview({
     content = (
       <div
         className={cn(
-          "flex items-center justify-center w-[300px] h-[315px]",
+          `flex items-center justify-center  w-[${width}px] h-[${height}px]`,
           className
         )}
       >
@@ -82,80 +89,87 @@ export function FilePreview({
 
   if (type === FileType.Pdf) {
     content = (
-      <div
-        className={cn(
-          "overflow-hidden",
-          !preview && "w-[300px] h-[317px]",
-          className
-        )}
-      >
-        <iframe
-          src={`${src}#toolbar=0`}
-          className={cn(
-            !preview && "-ml-[3px] -mt-[3px] w-[305px] h-[327px]",
-            className
-          )}
-          title={name}
-          onLoad={handleOnLoaded}
-        />
-      </div>
+      <iframe
+        src={`${src}#toolbar=0`}
+        className={cn(`w-[${width}px] h-[${height}px]`, className)}
+        title={name}
+        onLoad={handleOnLoaded}
+      />
     );
   }
 
   return (
-    <div className={cn(className, "relative")}>
-      {!preview && isLoaded && (
-        <AnimatePresence>
-          <div className="absolute bottom-2 left-2 flex space-x-2">
-            <motion.div
-              initial={{ y: 50, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              exit={{ y: -50, opacity: 0 }}
-            >
-              <Button
-                variant="secondary"
-                className="w-[32px] h-[32px] bg-black/60 hover:bg-black"
-                size="icon"
-              >
-                <Icons.OpenInFull />
-              </Button>
-            </motion.div>
-            <motion.div
-              initial={{ y: 50, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              exit={{ y: -50, opacity: 0 }}
-              transition={{ delay: 0.04 }}
-            >
-              <a href={downloadUrl} download>
-                <Button
-                  variant="secondary"
-                  className="w-[32px] h-[32px] bg-black/60 hover:bg-black"
-                  size="icon"
+    <Dialog>
+      <div className={cn(className, "relative")}>
+        {!preview && isLoaded && (
+          <AnimatePresence>
+            <div className="absolute bottom-2 left-2 flex space-x-2">
+              {!disableFullscreen && (
+                <motion.div
+                  initial={{ y: 50, opacity: 0 }}
+                  animate={{ y: 0, opacity: 1 }}
+                  exit={{ y: -50, opacity: 0 }}
                 >
-                  <Icons.FileDownload />
-                </Button>
-              </a>
-            </motion.div>
-          </div>
-        </AnimatePresence>
-      )}
-
-      <Skeleton
-        className={cn(
-          "absolute top-0 left-0 z-50 pointer-events-none w-full h-full",
-          isLoaded && "hidden",
-          error && "hidden"
-        )}
-      />
-      <div
-        className={cn(
-          "bg-primary/10 w-full h-full items-center flex justify-center",
-          !isLoaded && "opacity-0",
-          error && "opacity-1 bg-transparent"
+                  <DialogTrigger asChild>
+                    <Button
+                      variant="secondary"
+                      className="w-[32px] h-[32px] bg-black/60 hover:bg-black"
+                      size="icon"
+                    >
+                      <Icons.OpenInFull />
+                    </Button>
+                  </DialogTrigger>
+                </motion.div>
+              )}
+              <motion.div
+                initial={{ y: 50, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: -50, opacity: 0 }}
+                transition={{ delay: 0.04 }}
+              >
+                <a href={downloadUrl} download>
+                  <Button
+                    variant="secondary"
+                    className="w-[32px] h-[32px] bg-black/60 hover:bg-black"
+                    size="icon"
+                  >
+                    <Icons.FileDownload />
+                  </Button>
+                </a>
+              </motion.div>
+            </div>
+          </AnimatePresence>
         )}
-      >
-        {error ? <Icons.Image size={16} /> : content}
+
+        <Skeleton
+          className={cn(
+            "absolute top-0 left-0 z-50 pointer-events-none w-full h-full",
+            isLoaded && "hidden",
+            error && "hidden"
+          )}
+        />
+        <div
+          className={cn(
+            "bg-primary/10 w-full h-full items-center flex justify-center",
+            !isLoaded && "opacity-0",
+            error && "opacity-1 bg-transparent"
+          )}
+        >
+          {error ? <Icons.Image size={16} /> : content}
+        </div>
       </div>
-    </div>
+
+      <DialogContent>
+        <FilePreview
+          src={src}
+          name={name}
+          type={type}
+          downloadUrl={downloadUrl}
+          width={620}
+          height={650}
+          disableFullscreen
+        />
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/dashboard/src/components/modals/export-transactions-modal.tsx b/apps/dashboard/src/components/modals/export-transactions-modal.tsx
@@ -2,6 +2,7 @@
 
 import { exportTransactionsAction } from "@/actions/export-transactions-action";
 import { useExportStore } from "@/store/export";
+import { Alert, AlertDescription } from "@midday/ui/alert";
 import { Button } from "@midday/ui/button";
 import {
   Dialog,
@@ -13,10 +14,15 @@ import {
 } from "@midday/ui/dialog";
 import { Loader2 } from "lucide-react";
 import { useAction } from "next-safe-action/hook";
+import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 
-export function ExportTransactionsModal({ isOpen, setOpen }) {
+export function ExportTransactionsModal({
+  isOpen,
+  setOpen,
+  totalMissingAttachments,
+}) {
   const searchParams = useSearchParams();
   const { setExportId } = useExportStore();
   const filter = searchParams.get("filter");
@@ -40,9 +46,28 @@ export function ExportTransactionsModal({ isOpen, setOpen }) {
         <div className="p-6">
           <DialogHeader className="mb-8">
             <DialogTitle>Export</DialogTitle>
+
+            {totalMissingAttachments && (
+              <div className="pb-4">
+                <Alert variant="warning">
+                  <AlertDescription>
+                    Heads up, we’ve noticed that {totalMissingAttachments} of
+                    your transactions are missing attachments.
+                  </AlertDescription>
+                </Alert>
+              </div>
+            )}
+
             <DialogDescription>
-              Heads up, we’ve noticed that 12 of your transactions are missing
-              receipts.
+              You can share or download once completed then you can find it in
+              your{" "}
+              <Link
+                href="/vault/exports"
+                className="underline underline-offset-1"
+              >
+                exports
+              </Link>{" "}
+              folder.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>

diff --git a/apps/dashboard/src/components/modals/file-modal.tsx b/apps/dashboard/src/components/modals/file-modal.tsx
diff --git a/apps/dashboard/src/components/tables/transactions/index.tsx b/apps/dashboard/src/components/tables/transactions/index.tsx
@@ -1,3 +1,4 @@
+import { ExportButton } from "@/components/export-button";
 import { Pagination } from "@/components/pagination";
 import { DataTable } from "@/components/tables/transactions/data-table";
 import { getTransactions, getUser } from "@midday/supabase/cached-queries";
@@ -35,7 +36,10 @@ export async function Table({
   const hasNextPage = meta.count + 1 * page > pageSize;
 
   return (
-    <>
+    <div className="relative">
+      <div className="absolute right-0 -top-14">
+        <ExportButton totalMissingAttachments={meta.totalMissingAttachments} />
+      </div>
       <DataTable
         data={data}
         teamId={userData.team_id}
@@ -65,6 +69,6 @@ export async function Table({
           currency={meta.currency}
         />
       )}
-    </>
+    </div>
   );
 }
diff --git a/apps/dashboard/src/components/tables/vault/data-table-row.tsx b/apps/dashboard/src/components/tables/vault/data-table-row.tsx
@@ -86,7 +86,7 @@ function RowTitle({ isEditing, name: initialName, path, href }) {
     },
   });
 
-  const handleOnBlur = (evt) => {
+  const handleOnBlur = () => {
     createFolder.execute({ path, name });
   };
 
@@ -213,8 +213,10 @@ export function DataTableRow({ data, teamId }) {
                 {filePreviewSupported && (
                   <HoverCardContent className="w-70 h-[350px]">
                     <FilePreview
+                      width={300}
+                      height={315}
                       src={`/api/proxy?filePath=vault/${teamId}/${filepath}`}
-                      downloadUrl={`/api/download/zip?path=${filepath}/${data.name}&filename=${data.name}`}
+                      downloadUrl={`/api/download/file?path=${filepath}&filename=${data.name}`}
                       name={data.name}
                       type={data?.metadata?.mimetype}
                     />

diff --git a/packages/supabase/src/queries/cached-queries.ts b/packages/supabase/src/queries/cached-queries.ts
@@ -20,18 +20,15 @@ export const getTransactions = async (params) => {
     return null;
   }
 
-  return getTransactionsQuery(supabase, { ...params, teamId });
-
-  // return unstable_cache(
-  //   async () => {
-  //     return getTransactionsQuery(supabase, { ...params, teamId });
-  //   },
-  //   ["transactions", teamId],
-  //   {
-  //     tags: [`transactions_${teamId}`],
-  //     revalidate: 10,
-  //   }
-  // )(params);
+  return unstable_cache(
+    async () => {
+      return getTransactionsQuery(supabase, { ...params, teamId });
+    },
+    ["transactions", teamId],
+    {
+      tags: [`transactions_${teamId}`],
+    }
+  )(params);
 };
 
 export const getUser = async () => {