Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: stitch transaction modal to apis #220

Closed
wants to merge 4 commits into from
Closed

feat: stitch transaction modal to apis #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba5e711
feat: stitch transaction modal to apis
alexghirelli Mar 22, 2024
201ce0c
feat: improve transaction from, query and db
alexghirelli Mar 25, 2024
c5a70cd
feat: add transaction and account dynamic data
alexghirelli Mar 29, 2024
efdcecc
feat: account dynamic data
alexghirelli Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/www/app/(dashboard)/(workspaceId)/_components/sidebar-nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export function SidebarNav({ isCollapsed }: { isCollapsed: boolean }) {

{sideNavItems.map((group) => {
return (
<>
<div key={group.group}>
<Separator />
<div className="flex flex-col gap-1 p-2" key={group.group}>
{group.items.map((link, idx) => {
Expand All @@ -116,7 +116,7 @@ export function SidebarNav({ isCollapsed }: { isCollapsed: boolean }) {
);
})}
</div>
</>
</div>
);
})}
</nav>
Expand Down
32 changes: 10 additions & 22 deletions apps/www/app/(dashboard)/(workspaceId)/banking/accounts/_components/accounts-dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,19 @@ import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TooltipProvider } from "@/components/ui/tooltip";

import { Mail } from "../data";
import { Transaction } from "../../transactions/data";
import { Account, Mail } from "../data";
import { useMail } from "../use-mail";
import { AccountsDisplay } from "./accounts-display";
import { AccountsList } from "./accounts-list";

interface AccountsDashboardProps {
mails: Mail[];
accountList: Account[];
defaultLayout: number[] | undefined;
}

export function AccountsDashboard({
mails,
accountList,
defaultLayout = [20, 40, 40],
}: AccountsDashboardProps) {
const [mail] = useMail();
Expand All @@ -49,34 +50,21 @@ export function AccountsDashboard({
<Input placeholder="Search" className="pl-8" />
</div>
</form>
<TabsList className="ml-auto">
<TabsTrigger
value="all"
className="text-zinc-600 dark:text-zinc-200"
>
All accounts
</TabsTrigger>
<TabsTrigger
value="unread"
className="text-zinc-600 dark:text-zinc-200"
>
New accounts
</TabsTrigger>
</TabsList>
</div>
<Separator />
<TabsContent value="all" className="m-0">
<AccountsList items={mails} />
</TabsContent>
<TabsContent value="unread" className="m-0">
<AccountsList items={mails.filter((item) => !item.read)} />
<AccountsList items={accountList} />
</TabsContent>
</Tabs>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={defaultLayout[2]}>
<AccountsDisplay
mail={mails.find((item) => item.id === mail.selected) || null}
account={
accountList.find(
(item) => item.id.toString() === mail.selected,
) || null
}
/>
</ResizablePanel>
</ResizablePanelGroup>
Expand Down
176 changes: 35 additions & 141 deletions apps/www/app/(dashboard)/(workspaceId)/banking/accounts/_components/accounts-display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { use } from "react";
import { api } from "@/trpc/client";
import { formatDistanceToNow } from "date-fns";
import addDays from "date-fns/addDays";
import addHours from "date-fns/addHours";
Expand Down Expand Up @@ -44,155 +46,44 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { TransactionsReviewTable } from "@/app/(dashboard)/(workspaceId)/dashboard/_components/transaction-review-table";
import { AddButton } from "@/components/buttons/AddButton";
import AddTransactionModal from "@/components/modals/add-transaction";

import { Mail } from "../data";
import { Account } from "../data";
import { AccountsReviewTable } from "./accounts-review-table";
import { AddNewAccountDialog } from "./add-new-account";

interface MailDisplayProps {
mail: Mail | null;
interface AccountDisplayProps {
account: Account | null;
}

export function AccountsDisplay({ mail }: MailDisplayProps) {
const today = new Date();
const data = mail ? mail.monthlyIncomeData : [];
export function AccountsDisplay({ account }: AccountDisplayProps) {
const listTransactions = account?.id
? use(
api.transaction.listTransactionsByAccountId.query(
account?.id.toString(),
),
)
: [];

return (
<div className="flex h-full flex-col">
<div className="flex items-center p-2">
<div className="flex items-center gap-2">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<Archive className="h-4 w-4" />
<span className="sr-only">Archive</span>
</Button>
</TooltipTrigger>
<TooltipContent>Split</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<ArchiveX className="h-4 w-4" />
<span className="sr-only">Move to junk</span>
</Button>
</TooltipTrigger>
<TooltipContent>Recurring</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<Trash2 className="h-4 w-4" />
<span className="sr-only">Move to trash</span>
</Button>
</TooltipTrigger>
<TooltipContent>Move to trash</TooltipContent>
</Tooltip>
<Separator orientation="vertical" className="mx-1 h-6" />
<Tooltip>
<Popover>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<Clock className="h-4 w-4" />
<span className="sr-only">Snooze</span>
</Button>
</TooltipTrigger>
</PopoverTrigger>
<PopoverContent className="flex w-[535px] p-0">
<div className="flex flex-col gap-2 border-r px-2 py-4">
<div className="px-4 text-sm font-medium">Snooze until</div>
<div className="grid min-w-[250px] gap-1">
<Button
variant="ghost"
className="justify-start font-normal"
>
Later today{" "}
<span className="ml-auto text-muted-foreground">
{format(addHours(today, 4), "E, h:m b")}
</span>
</Button>
<Button
variant="ghost"
className="justify-start font-normal"
>
Tomorrow
<span className="ml-auto text-muted-foreground">
{format(addDays(today, 1), "E, h:m b")}
</span>
</Button>
<Button
variant="ghost"
className="justify-start font-normal"
>
This weekend
<span className="ml-auto text-muted-foreground">
{format(nextSaturday(today), "E, h:m b")}
</span>
</Button>
<Button
variant="ghost"
className="justify-start font-normal"
>
Next week
<span className="ml-auto text-muted-foreground">
{format(addDays(today, 7), "E, h:m b")}
</span>
</Button>
</div>
</div>
<div className="p-2">
<Calendar />
</div>
</PopoverContent>
</Popover>
<TooltipContent>Snooze</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">
<Button variant="ghost" size="icon" disabled={!account}>
<Trash2 className="h-4 w-4" />
<span className="sr-only">Add new account</span>
</Button>
</TooltipTrigger>
<TooltipContent>Move to trash</TooltipContent>
</Tooltip>
<AddNewAccountDialog />
</div>
<div className="ml-auto flex items-center gap-2">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<Reply className="h-4 w-4" />
<span className="sr-only">Reply</span>
</Button>
</TooltipTrigger>
<TooltipContent>Reply</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<ReplyAll className="h-4 w-4" />
<span className="sr-only">Reply all</span>
</Button>
</TooltipTrigger>
<TooltipContent>Reply all</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<Forward className="h-4 w-4" />
<span className="sr-only">Forward</span>
<span className="sr-only">Delete</span>
</Button>
</TooltipTrigger>
<TooltipContent>Forward</TooltipContent>
<TooltipContent>Delete</TooltipContent>
</Tooltip>
</div>
<div className="ml-auto flex items-center gap-2"></div>
<Separator orientation="vertical" className="mx-2 h-6" />
<DropdownMenu>
{/* <DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" disabled={!mail}>
<Button variant="ghost" size="icon" disabled={!account}>
<MoreVertical className="h-4 w-4" />
<span className="sr-only">More</span>
</Button>
Expand All @@ -203,11 +94,14 @@ export function AccountsDisplay({ mail }: MailDisplayProps) {
<DropdownMenuItem>Add label</DropdownMenuItem>
<DropdownMenuItem>Mute thread</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</DropdownMenu> */}
<AddButton triggerLabel="Add Transaction">
<AddTransactionModal />
</AddButton>
</div>
<Separator />

{mail ? (
{account ? (
<div className="flex flex-1 flex-col">
{/* Top bar with avatar, text, and badge */}
<div className="flex items-center justify-between p-4">
Expand All @@ -219,24 +113,24 @@ export function AccountsDisplay({ mail }: MailDisplayProps) {
alt={mail.name}
/> */}
<AvatarFallback delayMs={600}>
{mail.name
{account.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
<div>
<p className="text-sm text-gray-500">
{formatDistanceToNow(new Date(mail.date), {
{/* <p className="text-sm text-gray-500">
{formatDistanceToNow(account.date, {
addSuffix: true,
})}
</p>
<h1 className="text-xl font-semibold">{mail.name}</h1>
</p> */}
<h1 className="text-xl font-semibold">{account.name}</h1>
</div>
</div>

{/* Right section with badge */}
{mail.date && (
{/* {mail.date && (
<div className="flex flex-col items-end">
<Badge
variant={mail.change >= 0 ? "default" : "destructive"}
Expand All @@ -255,13 +149,13 @@ export function AccountsDisplay({ mail }: MailDisplayProps) {
</span>
</div>
</div>
)}
)} */}
</div>

<div className="mx-6 h-[160px]">
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={data}
// data={account}
margin={{ top: 5, right: 10, left: 10, bottom: 0 }}
>
<Line
Expand Down Expand Up @@ -302,7 +196,7 @@ export function AccountsDisplay({ mail }: MailDisplayProps) {
</div>

<Separator className="" />
<AccountsReviewTable mailId={mail ? mail.id : null} />
<AccountsReviewTable transactions={listTransactions} />
</div>
) : (
<div className="p-8 text-center text-muted-foreground">
Expand Down
Loading