Order Form

1"use client";
2 
3import React from "react";
4import { NumericFormat } from "react-number-format";
5import { Button } from "@/components/ui/button";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import { Input } from "@/components/ui/input";
14import { Separator } from "@/components/ui/separator";
15import type { DetailRow } from "@/registry/lib/types";
16import { cn } from "@/lib/utils";
17 
18type OrderFormDetail = DetailRow;
19 
20interface OrderFormProps {
21  title?: string;
22  description?: string;
23  entryPrice?: number;
24  details?: OrderFormDetail[];
25  onSubmit?: (values: {
26    tpPrice: string;
27    tpPercent: string;
28    slPrice: string;
29    slPercent: string;
30  }) => void;
31  className?: string;
32}
33 
34const OrderForm = ({
35  title = "Edit TP/SL",
36  description = "Adjust the parameters on your order",
37  entryPrice,
38  details,
39  onSubmit,
40  className,
41}: OrderFormProps) => {
42  const [tpPrice, setTpPrice] = React.useState("");
43  const [tpPercent, setTpPercent] = React.useState("");
44  const [slPrice, setSlPrice] = React.useState("");
45  const [slPercent, setSlPercent] = React.useState("");
46 
47  const entryNum = entryPrice ?? 0;
48 
49  const handleTpPriceChange = (value: string) => {
50    setTpPrice(value);
51    if (entryNum > 0) {
52      const priceNum = Number.parseFloat(value);
53      if (!Number.isNaN(priceNum)) {
54        setTpPercent((((priceNum - entryNum) / entryNum) * 100).toFixed(2));
55      } else {
56        setTpPercent("");
57      }
58    }
59  };
60 
61  const handleTpPercentChange = (value: string) => {
62    setTpPercent(value);
63    if (entryNum > 0) {
64      const pctNum = Number.parseFloat(value);
65      if (!Number.isNaN(pctNum)) {
66        setTpPrice((entryNum * (1 + pctNum / 100)).toFixed(2));
67      } else {
68        setTpPrice("");
69      }
70    }
71  };
72 
73  const handleSlPriceChange = (value: string) => {
74    setSlPrice(value);
75    if (entryNum > 0) {
76      const priceNum = Number.parseFloat(value);
77      if (!Number.isNaN(priceNum)) {
78        setSlPercent((((entryNum - priceNum) / entryNum) * 100).toFixed(2));
79      } else {
80        setSlPercent("");
81      }
82    }
83  };
84 
85  const handleSlPercentChange = (value: string) => {
86    setSlPercent(value);
87    if (entryNum > 0) {
88      const pctNum = Number.parseFloat(value);
89      if (!Number.isNaN(pctNum)) {
90        setSlPrice((entryNum * (1 - pctNum / 100)).toFixed(2));
91      } else {
92        setSlPrice("");
93      }
94    }
95  };
96 
97  const handleClearTp = () => {
98    setTpPrice("");
99// … truncated