Working on add accounts modal in account apge

apps/www/components/accounts/components/accounts-display.tsx

@@ -48,6 +48,7 @@ import { TransactionsReviewTable } from "@/components/new-dashboard/components/t
 
 import { Mail } from "../data";
 import { AccountsReviewTable } from "./accounts-review-table";
+import { AddNewAccountDialog } from "./add-new-account";
 
 interface MailDisplayProps {
   mail: Mail | null;
@@ -148,6 +149,16 @@ export function AccountsDisplay({ mail }: MailDisplayProps) {
             </Popover>
             <TooltipContent>Snooze</TooltipContent>
           </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <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>

apps/www/components/accounts/components/add-new-account.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+const frameworks = [
+  { value: "chase", label: "Chase" },
+  { value: "wells_fargo", label: "Wells Fargo" },
+  { value: "bank_of_america", label: "Bank of America" },
+  { value: "citi_bank", label: "Citi Bank" },
+  { value: "us_bank", label: "US Bank" },
+];
+
+function ComboboxDemo({ onFrameworkSelect }) {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select bank..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0">
+        <Command>
+          <CommandInput placeholder="Search banks..." />
+          <CommandEmpty>Bank not found.</CommandEmpty>
+          <CommandGroup>
+            {frameworks.map((framework) => (
+              <CommandItem
+                key={framework.value}
+                value={framework.value}
+                onSelect={() => {
+                  setValue(framework.value);
+                  setOpen(false);
+                  if (onFrameworkSelect) {
+                    onFrameworkSelect(framework.value);
+                  }
+                }}
+              >
+                <Check
+                  className={`mr-2 h-4 w-4 ${value === framework.value ? "opacity-100" : "opacity-0"}`}
+                />
+                {framework.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function AddNewAccountDialog() {
+  const [selectedFramework, setSelectedFramework] = useState("");
+
+  const handleFrameworkSelect = (framework) => {
+    setSelectedFramework(framework);
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Placeholder</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Select Bank Integration</DialogTitle>
+          <DialogDescription>
+            Select the bank you want to connect to ProjectX.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="col-span-4">
+            <ComboboxDemo onFrameworkSelect={handleFrameworkSelect} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Select</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/www/components/transactions/components/mail-display.tsx

@@ -137,6 +137,15 @@ export function MailDisplay({ mail }: MailDisplayProps) {
             </Popover>
             <TooltipContent>Snooze</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>
         </div>
         <div className="ml-auto flex items-center gap-2">
           <Tooltip>