Position Table

1"use client";
2 
3import {
4  ChevronDownIcon,
5  ChevronUpIcon,
6  PencilIcon,
7  XIcon,
8} from "lucide-react";
9import React from "react";
10import { ActionBox } from "@/registry/sol/action-box";
11import { OrderForm } from "@/registry/sol/order-form";
12import { TokenIcon } from "@/registry/sol/token-icon";
13import { Button } from "@/components/ui/button";
14import {
15  Dialog,
16  DialogContent,
17  DialogDescription,
18  DialogTitle,
19  DialogTrigger,
20} from "@/components/ui/dialog";
21import {
22  Table,
23  TableBody,
24  TableCell,
25  TableHead,
26  TableHeader,
27  TableRow,
28} from "@/components/ui/table";
29import type { SortDirection } from "@/registry/lib/sort-utils";
30import { compareValues } from "@/registry/lib/sort-utils";
31import { cn } from "@/lib/utils";
32 
33interface PositionTablePosition {
34  symbol: string;
35  icon: string;
36  side: "long" | "short";
37  size: string;
38  value: string;
39  leverage: string;
40  entryPrice: string;
41  markPrice: string;
42  liquidationPrice?: string;
43  pnl: string;
44  pnlPercent?: string;
45  pnlTrend?: "up" | "down";
46}
47 
48interface PositionTableProps {
49  positions: PositionTablePosition[];
50  onEditTpSl?: (
51    position: PositionTablePosition,
52    values: {
53      tpPrice: string;
54      tpPercent: string;
55      slPrice: string;
56      slPercent: string;
57    },
58  ) => void;
59  onClosePosition?: (position: PositionTablePosition) => void;
60  className?: string;
61}
62 
63const SORT_KEYS = [
64  "side",
65  "symbol",
66  "size",
67  "value",
68  "entryPrice",
69  "markPrice",
70  "leverage",
71  "pnl",
72] as const;
73 
74type SortKey = (typeof SORT_KEYS)[number];
75 
76const SortableHeader = ({
77  label,
78  sortKey,
79  activeSortKey,
80  sortDirection,
81  onSort,
82  className,
83}: {
84  label: string;
85  sortKey: SortKey;
86  activeSortKey: SortKey | null;
87  sortDirection: SortDirection;
88  onSort: (key: SortKey) => void;
89  className?: string;
90}) => {
91  const isActive = activeSortKey === sortKey;
92  return (
93    <TableHead className={className}>
94      <button
95        type="button"
96        onClick={() => onSort(sortKey)}
97        className={cn(
98          "inline-flex items-center gap-1 cursor-pointer hover:text-foreground transition-colors",
99          isActive ? "text-foreground" : "text-muted-foreground",
100        )}
101      >
102        {label}
103        {isActive && sortDirection === "asc" && (
104          <ChevronUpIcon className="size-3.5" />
105        )}
106        {isActive && sortDirection === "desc" && (
107          <ChevronDownIcon className="size-3.5" />
108        )}
109      </button>
110    </TableHead>
111  );
112};
113 
114// … truncated