update pay function

src/views/AgentChat/neuratalk/components/Chart/index.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import {
+    ResponsiveContainer,
+    AreaChart,
+    Area,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+} from "recharts";
+import millify from "millify";
+import Select from "@/components/Select";
+import Icon from "@/components/Icon";
+
+import { data } from "./data";
+
+const durationOptions = [
+    { id: 1, name: "Last 7 days" },
+    { id: 2, name: "Last 14 days" },
+    { id: 3, name: "Last 21 days" },
+];
+
+const Chart = ({}) => {
+    const [duration, setDuration] = useState(durationOptions[0]);
+
+    const formatterYAxis = (value: number) => {
+        if (value === 0) {
+            return "$0";
+        }
+        return `$${millify(value, {
+            lowercase: false,
+        })}`;
+    };
+
+    const CustomTooltip = ({ payload }: { payload: { value: number }[] }) => {
+        if (payload && payload.length) {
+            return (
+                <div className="p-1.5 bg-strong-950 rounded-md text-label-xs text-white-0">
+                    Bitcoin : ${payload[0].value}
+                </div>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <div className="">
+            <div className="border border-soft-200 px-4.5 py-3 rounded-lg max-md:px-3">
+                <div className="flex items-center mb-2">
+                    <div className="mr-auto text-h6">Bitcoin</div>
+                    <div className="flex">
+                        <Select
+                            className=""
+                            classButton="rounded-r-none max-md:rounded-lg"
+                            value={duration}
+                            onChange={setDuration}
+                            options={durationOptions}
+                        />
+                        <div className="flex items-center gap-2 pl-2 pr-4 border-l-0 rounded-r-xl border border-stroke-soft-200 text-label-sm text-sub-600 max-md:hidden">
+                            <Icon className="fill-sub-600" name="calendar" />
+                            Oct 16 - Oct 22 2025
+                        </div>
+                    </div>
+                </div>
+                <div className="flex items-center gap-2 mb-4">
+                    <div className="text-h5 max-md:text-[1.5rem]">$94,112</div>
+                    <div className="flex items-center text-label-xs text-[#009934]">
+                        <Icon
+                            className="-rotate-90 !size-4 fill-[#009934]"
+                            name="arrow"
+                        />
+                        12%
+                    </div>
+                    <div className="text-label-sm text-soft-400 max-md:hidden">
+                        vs last Week
+                    </div>
+                </div>
+                <div className="h-44 -ml-3">
+                    <ResponsiveContainer width="100%" height="100%">
+                        <AreaChart
+                            width={730}
+                            height={250}
+                            data={data}
+                            margin={{ top: 10, right: 5, left: 0, bottom: 0 }}
+                        >
+                            <defs>
+                                <linearGradient
+                                    id="color"
+                                    x1="0"
+                                    y1="0"
+                                    x2="0"
+                                    y2="1"
+                                >
+                                    <stop
+                                        offset="0%"
+                                        stopColor="#335CFF"
+                                        stopOpacity={0.12}
+                                    />
+                                    <stop
+                                        offset="95%"
+                                        stopColor="#335CFF"
+                                        stopOpacity={0}
+                                    />
+                                </linearGradient>
+                            </defs>
+                            <CartesianGrid
+                                vertical={false}
+                                strokeDasharray="5 2"
+                                stroke="var(--stroke-soft-200)"
+                                strokeOpacity={0.5}
+                            />
+                            <XAxis
+                                dataKey="name"
+                                axisLine={false}
+                                tickLine={false}
+                                tick={{
+                                    fontSize: "0.875rem",
+                                    fill: "var(--text-soft-400)",
+                                }}
+                                height={32}
+                                dy={8}
+                            />
+                            <YAxis
+                                tickFormatter={formatterYAxis}
+                                axisLine={false}
+                                tickLine={false}
+                                tick={{
+                                    fontSize: "0.875rem",
+                                    fill: "var(--text-soft-400)",
+                                }}
+                            />
+                            <Tooltip
+                                content={<CustomTooltip payload={[]} />}
+                                cursor={{
+                                    stroke: "var(--strong-950)",
+                                    strokeDasharray: "5 5",
+                                }}
+                            />
+                            <Area
+                                type="linear"
+                                dataKey="tp"
+                                stroke="#335CFF"
+                                strokeWidth={2}
+                                fillOpacity={1}
+                                fill="url(#color)"
+                                dot={false}
+                                activeDot={{
+                                    r: 5,
+                                    fill: "var(--strong-950)",
+                                    stroke: "var(--white-0)",
+                                    strokeWidth: 2,
+                                }}
+                            />
+                        </AreaChart>
+                    </ResponsiveContainer>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Chart;