Vault

midday-ai · Dec 16, 2023 · e4d5ad0 · e4d5ad0
1 parent 13eaf55
commit e4d5ad0
Show file tree

Hide file tree

Showing 44 changed files with 100 additions and 3,952 deletions.
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -52,7 +52,7 @@
     "@t3-oss/env-nextjs": "^0.7.1",
     "@types/node": "^20.10.4",
     "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "typescript": "^5.3.3"
   }
 }
diff --git a/apps/dashboard/src/components/attachments.tsx b/apps/dashboard/src/components/attachments.tsx
@@ -16,9 +16,11 @@ import { cn } from "@midday/ui/utils";
 import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
-import { FilePreview } from "./file-preview";
+import { FilePreview, isSupportedFilePreview } from "./file-preview";
 
 const Item = ({ file, onDelete, id }) => {
+  const filePreviewSupported = isSupportedFilePreview(file.type);
+
   return (
     <div className="flex items-center justify-between">
       <div className="flex space-x-4 items-center">
@@ -34,27 +36,24 @@ const Item = ({ file, onDelete, id }) => {
               />
             </div>
           </HoverCardTrigger>
-          <HoverCardContent
-            className="w-70 h-[350px]"
-            side="left"
-            sideOffset={55}
-          >
-            <FilePreview
-              src={`/api/proxy?filePath=vault/${file.path}`}
-              name={file.name}
-              type={file.type}
-            />
-          </HoverCardContent>
+          {filePreviewSupported && (
+            <HoverCardContent
+              className="w-70 h-[350px]"
+              side="left"
+              sideOffset={55}
+            >
+              <FilePreview
+                src={`/api/proxy?filePath=vault/${file.path}`}
+                downloadUrl={`/api/download/file?path=transactions/${id}/${file.name}&filename=${file.name}`}
+                name={file.name}
+                type={file.type}
+              />
+            </HoverCardContent>
+          )}
         </HoverCard>
 
         <div className="flex flex-col space-y-0.5 w-80">
-          <a
-            href={`/api/download/file?path=transactions/${id}/${file.name}&filename=${file.name}`}
-            download
-            className="truncate"
-          >
-            {file.name}
-          </a>
+          <span className="truncate">{file.name}</span>
           <span className="text-xs text-[#606060]">
             {file.size && formatSize(file.size)}
           </span>

diff --git a/apps/dashboard/src/components/charts/spending-list.tsx b/apps/dashboard/src/components/charts/spending-list.tsx
@@ -1,18 +1,21 @@
 import { getSpending } from "@midday/supabase/cached-queries";
+import Link from "next/link";
 import { Category } from "../category";
 import { spendingData } from "./data";
 import { SpendingChart } from "./spending-chart";
 
 function SpendingCategoryList({ categories }) {
   return (
-    <ul className="absolute left-8 bottom-8 space-y-2">
+    <ul className="absolute z-10 left-8 bottom-8 space-y-2">
       {categories.map(({ category }) => (
         <li key={category}>
-          <Category
-            key={category}
-            name={category}
-            className="text-sm text-[#606060] space-x-3"
-          />
+          <Link href={`/transactions?filter=${JSON.stringify({ category })}`}>
+            <Category
+              key={category}
+              name={category}
+              className="text-sm text-[#606060] space-x-3"
+            />
+          </Link>
         </li>
       ))}
     </ul>

diff --git a/apps/dashboard/src/components/file-preview.tsx b/apps/dashboard/src/components/file-preview.tsx
@@ -18,6 +18,7 @@ type Props = {
   className?: string;
   preview?: boolean;
   src: string;
+  downloadUrl: string;
 };
 
 export const isSupportedFilePreview = (type: FileType) => {
@@ -36,23 +37,30 @@ export const isSupportedFilePreview = (type: FileType) => {
   switch (type) {
     case FileType.Pdf:
       return true;
-
     default:
       return false;
   }
 };
 
-export function FilePreview({ src, className, name, type, preview }: Props) {
+export function FilePreview({
+  src,
+  className,
+  name,
+  type,
+  preview,
+  downloadUrl,
+}: Props) {
   const [isLoaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  let content;
 
   const handleOnLoaded = () => {
     setTimeout(() => {
       setLoaded(true);
     }, 150);
   };
 
-  let content;
-
   if (type?.startsWith("image")) {
     content = (
       <div
@@ -65,6 +73,7 @@ export function FilePreview({ src, className, name, type, preview }: Props) {
           src={src}
           className="object-contain"
           alt={name}
+          onError={() => setError(true)}
           onLoad={handleOnLoaded}
         />
       </div>
@@ -73,10 +82,19 @@ export function FilePreview({ src, className, name, type, preview }: Props) {
 
   if (type === FileType.Pdf) {
     content = (
-      <div className={cn("overflow-hidden w-[300px] h-[317px]", className)}>
+      <div
+        className={cn(
+          "overflow-hidden",
+          !preview && "w-[300px] h-[317px]",
+          className
+        )}
+      >
         <iframe
           src={`${src}#toolbar=0`}
-          className={cn("-ml-[3px] -mt-[3px] w-[305px] h-[327px]", className)}
+          className={cn(
+            !preview && "-ml-[3px] -mt-[3px] w-[305px] h-[327px]",
+            className
+          )}
           title={name}
           onLoad={handleOnLoaded}
         />
@@ -108,13 +126,15 @@ export function FilePreview({ src, className, name, type, preview }: Props) {
               exit={{ y: -50, opacity: 0 }}
               transition={{ delay: 0.04 }}
             >
-              <Button
-                variant="secondary"
-                className="w-[32px] h-[32px] bg-black/60 hover:bg-black"
-                size="icon"
-              >
-                <Icons.FileDownload />
-              </Button>
+              <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>
@@ -123,13 +143,18 @@ export function FilePreview({ src, className, name, type, preview }: Props) {
       <Skeleton
         className={cn(
           "absolute top-0 left-0 z-50 pointer-events-none w-full h-full",
-          isLoaded && "hidden"
+          isLoaded && "hidden",
+          error && "hidden"
         )}
       />
       <div
-        className={cn("bg-primary/10 w-full h-full", !isLoaded && "opacity-0")}
+        className={cn(
+          "bg-primary/10 w-full h-full items-center flex justify-center",
+          !isLoaded && "opacity-0",
+          error && "opacity-1 bg-transparent"
+        )}
       >
-        {content}
+        {error ? <Icons.Image size={16} /> : content}
       </div>
     </div>
   );

diff --git a/apps/dashboard/src/components/modals/file-modal.tsx b/apps/dashboard/src/components/modals/file-modal.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { Dialog, DialogContent } from "@midday/ui/dialog";
+import { useState } from "react";
+import { FilePreview } from "../file-preview";
+
+export function FileModal({ src, type }) {
+  const [isOpen, setOpen] = useState(false);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={() => setOpen(false)}>
+      <DialogContent>
+        <FilePreview src={src} type={type} className="w-[500px] h-[500px]" />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/dashboard/src/components/tables/vault/data-table-row.tsx b/apps/dashboard/src/components/tables/vault/data-table-row.tsx
@@ -214,6 +214,7 @@ export function DataTableRow({ data, teamId }) {
                   <HoverCardContent className="w-70 h-[350px]">
                     <FilePreview
                       src={`/api/proxy?filePath=vault/${teamId}/${filepath}`}
+                      downloadUrl={`/api/download/zip?path=${filepath}/${data.name}&filename=${data.name}`}
                       name={data.name}
                       type={data?.metadata?.mimetype}
                     />

diff --git a/apps/dashboard/src/utils/format.ts b/apps/dashboard/src/utils/format.ts
@@ -10,13 +10,13 @@ export function formatSize(bytes: number): string {
 
   const unitIndex = Math.max(
     0,
-    Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1),
+    Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
   );
 
   return Intl.NumberFormat(locale, {
     style: "unit",
     unit: units[unitIndex],
-  }).format(bytes / 1024 ** unitIndex);
+  }).format(+Math.round(bytes / 1024 ** unitIndex));
 }
 
 type FormatAmountParams = {

diff --git a/apps/desktop/.gitignore b/apps/desktop/.gitignore
diff --git a/apps/desktop/README.md b/apps/desktop/README.md
@@ -1,7 +0,0 @@
-# Tauri + React + Typescript
-
-This template should help get you started developing with Tauri, React and Typescript in Vite.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)

diff --git a/apps/desktop/app-icon.png b/apps/desktop/app-icon.png
diff --git a/apps/desktop/index.html b/apps/desktop/index.html
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
diff --git a/apps/desktop/public/tauri.svg b/apps/desktop/public/tauri.svg
diff --git a/apps/desktop/public/vite.svg b/apps/desktop/public/vite.svg
diff --git a/apps/desktop/src-tauri/.gitignore b/apps/desktop/src-tauri/.gitignore