1 files changed, 137 insertions, 0 deletions
diff --git a/lib/rfqs-tech/vendor-table/vendors-table-floating-bar.tsx b/lib/rfqs-tech/vendor-table/vendors-table-floating-bar.tsx
new file mode 100644
index 00000000..9b32cf5f
--- /dev/null
+++ b/lib/rfqs-tech/vendor-table/vendors-table-floating-bar.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+import {  vendors } from "@/db/schema/vendors"
+import { MatchedVendorRow } from "@/config/vendorRfbColumnsConfig"
+
+interface VendorsTableFloatingBarProps {
+  table: Table<MatchedVendorRow>
+}
+
+
+export function VendorsTableFloatingBar({ table }: VendorsTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-status" | "export" | "delete"
+  >()
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+
+
+
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-status")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-status"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}