"use client";

import { Activity, CircleDollarSign } from "lucide-react";
import { useState } from "react";
import { Label, PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";

import { Card } from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";

type Period = "last-day" | "last-week" | "last-month" | "last-year" | "year-to-date";

interface SpendingData {
  total: number;
  budget: number;
  shopping: number;
  utilities: number;
  bills: number;
  savingsPercent: number;
}

const periodData: Record<Period, SpendingData> = {
  "last-day": {
    total: 24,
    budget: 120,
    shopping: 10,
    utilities: 6,
    bills: 8,
    savingsPercent: 80,
  },
  "last-week": {
    total: 195,
    budget: 650,
    shopping: 78,
    utilities: 35,
    bills: 82,
    savingsPercent: 70,
  },
  "last-month": {
    total: 2000,
    budget: 2700,
    shopping: 900,
    utilities: 300,
    bills: 800,
    savingsPercent: 26,
  },
  "last-year": {
    total: 31000,
    budget: 33000,
    shopping: 13950,
    utilities: 4650,
    bills: 12400,
    savingsPercent: 6,
  },
  "year-to-date": {
    total: 23000,
    budget: 24750,
    shopping: 10350,
    utilities: 3450,
    bills: 9200,
    savingsPercent: 7,
  },
};

export function SpendingBalance1() {
  const [selectedPeriod, setSelectedPeriod] = useState<Period>("last-month");
  const data = periodData[selectedPeriod];

  return (
    <Card className="w-full max-w-sm min-w-72 gap-4 p-4">
      {/* Header with Select */}
      <div className="flex items-center justify-between gap-2.5">
        <div className="flex items-center gap-1.5">
          <CircleDollarSign className="size-6 text-muted-foreground" />
          <h3 className="text-sm font-medium text-foreground">Spending Balance</h3>
        </div>

        <Select
          value={selectedPeriod}
          onValueChange={(value) => setSelectedPeriod(value as Period)}
        >
          <SelectTrigger size="sm" className="text-xs font-medium">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="last-day">Last 24 hours</SelectItem>
            <SelectItem value="last-week">Last 7 days</SelectItem>
            <SelectItem value="last-month">Last month</SelectItem>
            <SelectItem value="last-year">Last year</SelectItem>
            <SelectItem value="year-to-date">Year to date</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Separator />

      <SpendRadialChart total={data.total} max={data.budget} />

      <Separator />

      {/* Spending Balance Items */}
      <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr] gap-2.5">
        {/* Shopping Item */}
        <div className="flex flex-col items-center gap-3">
          <div className="flex size-7 items-center justify-center rounded-full border border-info/25 bg-info-foreground">
            <Activity className="size-3 text-info" />
          </div>
          <div className="flex flex-col items-center gap-1">
            <span className="text-xs font-medium text-muted-foreground">Shopping</span>
            <span className="text-sm font-medium tabular-nums">
              ${data.shopping.toFixed(2)}
            </span>
          </div>
        </div>

        <Separator orientation="vertical" />

        {/* Utilities Item */}
        <div className="flex flex-col items-center gap-3">
          <div className="flex size-7 items-center justify-center rounded-full border border-success/25 bg-success-foreground">
            <Activity className="size-3 text-success" />
          </div>
          <div className="flex flex-col items-center gap-1">
            <span className="text-xs font-medium text-muted-foreground">Utilities</span>
            <span className="text-sm font-medium tabular-nums">
              ${data.utilities.toFixed(2)}
            </span>
          </div>
        </div>

        <Separator orientation="vertical" />

        {/* Bills Item */}
        <div className="flex flex-col items-center gap-3">
          <div className="flex size-7 items-center justify-center rounded-full border border-warning/25 bg-warning-foreground">
            <Activity className="size-3 text-warning" />
          </div>
          <div className="flex flex-col items-center gap-1">
            <span className="text-xs font-medium text-muted-foreground">Bills</span>
            <span className="text-sm font-medium tabular-nums">
              ${data.bills.toFixed(2)}
            </span>
          </div>
        </div>
      </div>

      {/* Savings Percentage */}
      <span className="text-center text-xs font-medium text-muted-foreground">
        You saved <span className="font-semibold">{data.savingsPercent}</span>% of your
        salary!
      </span>
    </Card>
  );
}

const chartConfig = {
  spend: {
    label: "Spend",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig;

function SpendRadialChart({ total, max }: { total: number; max: number }) {
  // Calculate the percentage and adjust endAngle accordingly
  // The arc goes clockwise from 90° (top) downward
  const percentage = Math.min(total / max, 1);
  const startAngle = 90;
  // Calculate endAngle: startAngle (90°) minus the arc length (percentage * 360°)
  const dynamicEndAngle = startAngle - percentage * 360;

  const chartData = [{ spend: total, max, fill: "var(--chart-2)" }];

  return (
    <ChartContainer
      config={chartConfig}
      className="mx-auto aspect-square size-full max-h-[250px]"
    >
      <RadialBarChart
        data={chartData}
        startAngle={90}
        endAngle={dynamicEndAngle}
        innerRadius={80}
        outerRadius={90}
      >
        <PolarGrid
          gridType="circle"
          radialLines={false}
          stroke="none"
          className="first:fill-muted last:fill-card"
          polarRadius={[90, 80]}
        />
        <RadialBar dataKey="spend" background cornerRadius={10} />
        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
          <Label
            content={({ viewBox }) => {
              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                return (
                  <text
                    x={viewBox.cx}
                    y={viewBox.cy}
                    textAnchor="middle"
                    dominantBaseline="middle"
                  >
                    <tspan
                      x={viewBox.cx}
                      y={viewBox.cy}
                      className="fill-foreground text-3xl leading-none font-bold tracking-tight tabular-nums"
                    >
                      ${formatCompactNumber(total)}
                    </tspan>
                    <tspan
                      x={viewBox.cx}
                      y={(viewBox.cy || 0) + 24}
                      className="fill-muted-foreground"
                    >
                      Spend
                    </tspan>
                  </text>
                );
              }
            }}
          />
        </PolarRadiusAxis>
      </RadialBarChart>
    </ChartContainer>
  );
}

function formatCompactNumber(value: number): string {
  if (value >= 1000000) {
    const millions = value / 1000000;
    return millions % 1 === 0 ? `${millions}M` : `${millions.toFixed(1)}M`;
  }
  if (value >= 1000) {
    const thousands = value / 1000;
    return thousands % 1 === 0 ? `${thousands}k` : `${thousands.toFixed(1)}k`;
  }
  return value.toString();
}
Spending Balance

Spending Balance 1

Get access to these components and the full library

Built for real interfaces

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

More Components

Real support from the team behind shadcncraft
