Skip to content

Commit

Permalink
Vault widget
Browse files Browse the repository at this point in the history
  • Loading branch information
pontusab committed Sep 5, 2024
1 parent 0385350 commit 1ebbc02
Show file tree
Hide file tree
Showing 13 changed files with 153 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function TransactionListItem({ transaction, disabled }: Props) {
return (
<>
<div onClick={() => setOpen(true)} className="w-full">
<div className="flex items-center p-3">
<div className="flex items-center py-3">
<div className="w-[50%] flex space-x-2">
<span
className={cn(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
"use client";

import { TransactionListItem } from "@/components/charts/transaction-list-item";

export function TransactionsItemList({ transactions, disabled }) {
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/components/charts/transactions-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { TransactionsItemList } from "./transactions-item-list";

export function TransactionsListHeader() {
return (
<div className="flex p-3 border-b-[1px]">
<div className="flex py-3 border-b-[1px]">
<span className="font-medium text-sm w-[50%]">Description</span>
<span className="font-medium text-sm w-[35%]">Amount</span>
<span className="font-medium text-sm ml-auto">Status</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/components/charts/transactions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export async function Transactions({ disabled }) {
<div className="border aspect-square overflow-hidden relative p-4 md:p-8">
<TransactionsPeriod type={type} disabled={disabled} />

<div className="mt-8">
<div className="mt-4">
<TransactionsListHeader />
<ErrorBoundary errorComponent={ErrorFallback}>
<Suspense key={type} fallback={<TransactionsListSkeleton />}>
Expand Down
7 changes: 5 additions & 2 deletions apps/dashboard/src/components/file-preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const RenderComponent = ({
className?: string;
width: number;
height: number;
preview: boolean;
preview?: boolean;
onLoaded: (loaded: boolean) => void;
setError: (error: boolean) => void;
}) => {
Expand Down Expand Up @@ -174,7 +174,10 @@ export function FilePreview({

return (
<Dialog>
<div className={cn(className, "relative h-full overflow-hidden")}>
<div
className={cn(className, "relative h-full overflow-hidden")}
style={preview ? { width: width - 2, height: height - 5 } : undefined}
>
{!isLoaded && !error && (
<div className="w-full h-full flex items-center justify-center pointer-events-none">
<Skeleton
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/components/inbox-status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function InboxStatus({ item }) {
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex space-x-1 items-center border rounded-full text-xs py-1 px-2 h-[22px] text-[#878787]">
<div className="p-1 text-[#878787] bg-[#F2F1EF] text-[11px] dark:bg-[#1D1D1D] px-3 py-1 rounded-full cursor-default font-mono inline-block">
<span>Pending</span>
</div>
</TooltipTrigger>
Expand Down
4 changes: 2 additions & 2 deletions apps/dashboard/src/components/tables/vault/tag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export function Tag({
name,
isLoading,
}: {
name: string;
isLoading: boolean;
name?: string;
isLoading?: boolean;
}) {
const t = useI18n();

Expand Down
10 changes: 2 additions & 8 deletions apps/dashboard/src/components/widgets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,14 @@ import { AccountBalance } from "./widgets/account-balance";
import { Inbox } from "./widgets/inbox";
import { Insights } from "./widgets/insights";
import { Tracker } from "./widgets/tracker";
import { Vault } from "./widgets/vault";

type Props = {
disabled: boolean;
initialPeriod: Date | string;
searchParams: { [key: string]: string | string[] | undefined };
};

export const initialWidgetsVisibility = {
insights: true,
spending: true,
tracker: true,
inbox: false,
transactions: false,
};

export function Widgets({ disabled, initialPeriod, searchParams }: Props) {
const items = [
<Insights key="insights" />,
Expand All @@ -39,6 +32,7 @@ export function Widgets({ disabled, initialPeriod, searchParams }: Props) {
<Transactions key="transactions" disabled={disabled} />,
<Inbox key="inbox" disabled={disabled} />,
<AccountBalance key="account-balance" />,
<Vault key="vault" />,
];

return (
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/components/widgets/inbox/inbox-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function InboxList({ data }) {
</div>
</div>
<div className="ml-auto text-xs text-muted-foreground">
{item.date && format(new Date(item.date), "PP")}
{item.date && format(new Date(item.date), "MMM d")}
</div>
</div>
<div className="flex">
Expand Down
22 changes: 22 additions & 0 deletions apps/dashboard/src/components/widgets/vault/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { ErrorFallback } from "@/components/error-fallback";
import { ErrorBoundary } from "next/dist/client/components/error-boundary";
import { Suspense } from "react";
import {
VaultWidget,
VaultWidgetHeader,
VaultWidgetSkeleton,
} from "./vault-widget";

export function Vault() {
return (
<div className="border aspect-square overflow-hidden relative p-4 md:p-8">
<VaultWidgetHeader />

<ErrorBoundary errorComponent={ErrorFallback}>
<Suspense fallback={<VaultWidgetSkeleton />}>
<VaultWidget />
</Suspense>
</ErrorBoundary>
</div>
);
}
57 changes: 57 additions & 0 deletions apps/dashboard/src/components/widgets/vault/vault-widget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { getUser } from "@midday/supabase/cached-queries";
import { getVaultActivityQuery } from "@midday/supabase/queries";
import { createClient } from "@midday/supabase/server";
import { Vault } from "./vault";

export function VaultWidgetSkeleton() {
return null;
}

export function VaultWidgetHeader() {
return (
<div>
<h2 className="text-lg">Recent files</h2>

<div className="flex py-3 border-b-[1px] justify-between mt-4">
<span className="font-medium text-sm">Name</span>
<span className="font-medium text-sm">Tag</span>
</div>
</div>
);
}

export async function VaultWidget() {
const supabase = createClient();
const { data: userData } = await getUser();

const { data: storageData } = await getVaultActivityQuery(
supabase,
userData?.team_id,
);

const files = storageData
?.filter((file) => file?.path_tokens.pop() !== ".emptyFolderPlaceholder")
.map((file) => {
const [_, ...pathWithoutTeamId] = file?.path_tokens ?? [];

return {
id: file.id,
name: file.name?.split("/").at(-1),
path: file.path_tokens,
mimetype: file.metadata?.mimetype,
team_id: file.team_id,
tag: file.tag,
filePath: pathWithoutTeamId?.join("/"),
};
});

if (!files?.length) {
return (
<div className="flex items-center justify-center aspect-square">
<p className="text-sm text-[#606060] -mt-12">No files found</p>
</div>
);
}

return <Vault files={files} />;
}
59 changes: 59 additions & 0 deletions apps/dashboard/src/components/widgets/vault/vault.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { FilePreview } from "@/components/file-preview";
import { Tag } from "@/components/tables/vault/tag";
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@midday/ui/hover-card";
import { isSupportedFilePreview } from "@midday/utils";

type Props = {
files: {
id: string;
name: string;
tag?: string;
mimetype: string;
team_id: string;
filePath: string;
}[];
};

export function Vault({ files }: Props) {
return (
<ul className="bullet-none divide-y cursor-pointer overflow-auto scrollbar-hide aspect-square pb-24">
{files?.map((file) => {
const filePreviewSupported = isSupportedFilePreview(file.mimetype);

return (
<li key={file.id}>
<HoverCard openDelay={200}>
<HoverCardTrigger asChild>
<div className="flex items-center py-3">
<div className="w-[55%]">
<span className="text-sm line-clamp-1">{file.name}</span>
</div>

<div className="ml-auto">
<Tag name={file.tag} />
</div>
</div>
</HoverCardTrigger>
{filePreviewSupported && (
<HoverCardContent className="w-[273px] h-[358px] p-0 overflow-hidden">
<FilePreview
width={280}
height={365}
src={`/api/proxy?filePath=vault/${file.team_id}/${file.filePath}/${file.name}`}
downloadUrl={`/api/download/file?path=${file.filePath}/${file.name}&filename=${file.name}`}
name={file.name}
type={file?.mimetype}
/>
</HoverCardContent>
)}
</HoverCard>
</li>
);
})}
</ul>
);
}
2 changes: 1 addition & 1 deletion packages/supabase/src/queries/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -613,7 +613,7 @@ export async function getVaultQuery(supabase: Client, params: GetVaultParams) {
export async function getVaultActivityQuery(supabase: Client, teamId: string) {
return supabase
.from("documents")
.select("id, name, metadata, path_tokens")
.select("id, name, metadata, path_tokens, tag, team_id")
.eq("team_id", teamId)
.limit(20)
.not("name", "ilike", "%.folderPlaceholder")
Expand Down

0 comments on commit 1ebbc02

Please sign in to comment.