'use client'

import { useState } from "react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export default function AlertDialogWithAction() {
  const [isOpen, setIsOpen] = useState(false)
  const [actionResult, setActionResult] = useState<string | null>(null)

  // 模拟一个危险操作
  const performDangerousAction = () => {
    // 这里是实际的危险操作逻辑
    setActionResult("危险操作已执行！")
  }

  const handleConfirm = () => {
    performDangerousAction()
    setIsOpen(false)
  }

  const handleCancel = () => {
    setActionResult("操作已取消")
    setIsOpen(false)
  }

  return (
    <div className="space-y-4">
      <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
        <AlertDialogTrigger asChild>
          <Button 
            variant="destructive" 
            onClick={() => setIsOpen(true)}
          >
            执行危险操作
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>您确定要执行此操作吗？</AlertDialogTitle>
            <AlertDialogDescription>
              此操作可能会导致不可逆的结果。请确认您真的要执行此操作。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={handleCancel}>取消</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirm}>确认</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      {actionResult && (
        <div className="mt-4 p-4 bg-muted rounded-md">
          <p>操作结果: {actionResult}</p>
        </div>
      )}
    </div>
  )
}

import React, { ChangeEvent,useRef } from 'react';

import { Button } from '@/components/ui/button';
import { TreeDataItem } from '@/lib/utils';

interface Question {
...
}

interface Option {
...
}

type Props = {
  disabled: boolean;
  onUpload: ( result: any ) => void;
};

const UploadButton = ( { disabled, onUpload }: Props ) => {
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const handleButtonClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const parseQuestions = (content: string): { questions: Question[] } => {
    ...
  };

  const generateTreeData = ( questions:  Question[]) : { data: TreeDataItem[] } => {
    ...
  };

  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    
    const file = e.target.files?.[0];
    if (!file) return;

    try {
      const content = await file.text();
      
      const { questions } = parseQuestions(content);
      const { data } = generateTreeData(questions);

      const results = {
        data: data,
        jsondata: questions
      };

      onUpload( results );
    } catch (error) {
      console.error('Error processing file:', error);
    }
  }

  return (
    <div className="w-full lg:w-auto">
      <input
        type="file"
        ref={fileInputRef}
        accept=".txt"
        onChange={handleFileChange}
        className="hidden"
      />
      <Button
        disabled={disabled}
        onClick={handleButtonClick} 
        size="sm"
        className="w-full lg:w-auto"
      >
        Import TXT
      </Button>
    </div>
  );
};

export default UploadButton;

docker volume create --driver local --opt device=C:\10.VM\data\pg01 --opt type=none --opt o=bind pg01

docker pull postgres

docker run --name pgsql --privileged -e POSTGRES_PASSWORD=xxxxx -p 15333:5432 -v pg01:/var/lib/postgresql/data -d postgres

create user fintest01 with password 'xxxxxx';
create database fintest01 with owner fintest01; 

DATABASE_URL=postgresql://fintest01:[email protected]:15333/fintest01

npm i query-string

import React from 'react'
import { AccountFilter } from '@/components/account-filter'
import { DateFilter } from '@/components/date-filter'

export const Filters = () => {
  return (
    <div className="flex flex-col lg:flex-row items-center gap-y-2 lg:gap-y-0 lg:gap-x-2">
      <AccountFilter />
      <DateFilter />
    </div>
  )
}

import { useState } from "react";
import { FileSearch, Loader2, PieChart, Radar, Target  } from "lucide-react";
  
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
  
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { PieVariant } from "@/components/pie-variant";
import { RadialVariant } from "@/components/radial-variant";
import { RadarVariant } from "./radar-variant";
import { Skeleton } from "./ui/skeleton";

  
type Props = {
  data?: {
    name: string;
    value: number;
  }[];
};
  
export const SpendingPie = ( { data = []} : Props) => {
  const [chartType, setChartType] = useState("pie");

  const onTypeChange = ( type: string) => {
    // TODO: Add paywall
    setChartType(type);
  }
  return(
    <Card className="border-none drop-shadow-sm">
      <CardHeader className="flex space-y-2 lg:space-y-0 lg:flex-row lg:items-center justify-between">
        <CardTitle className="text-xl line-clamp-1">
          Categories
        </CardTitle>
        <Select
          defaultValue={chartType}
          onValueChange={onTypeChange}
        >
          <SelectTrigger className="lg:w-auto h-9 rounded-md px-3">
            <SelectValue placeholder="Chart type" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="pie">
              <div className="flex items-center">
                <PieChart className="size-4 mr-2 shrink-0" />
                <p className="line-clamp-1">
                  Pie chart
                </p>
              </div>
            </SelectItem>
            <SelectItem value="radar">
              <div className="flex items-center">
                <Radar className="size-4 mr-2 shrink-0" />
                <p className="line-clamp-1">
                  Radar chart
                </p>
              </div>
            </SelectItem> 
            <SelectItem value="radial">
              <div className="flex items-center">
                <Target className="size-4 mr-2 shrink-0" />
                <p className="line-clamp-1">
                  Radial chart
                </p>
              </div>
            </SelectItem>            
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent>
        {data.length === 0 ? (
          <div className="felx flex-col gap-y-4 items-center justify-center h-[350px] w-full">
            <FileSearch className="size-6 text-muted-foreground" />
            <p className="text-muted-foreground text-sm">
              No data for this period
            </p>
          </div>
        ) :  (
          <>
            { chartType === "pie" && <PieVariant data={data} /> }
            { chartType === "radar" && <RadarVariant data={data} /> } 
            { chartType === "radial" && <RadialVariant data={data} /> } 
          </>
        )}
      </CardContent>
    </Card>
  )
}

export const SpendingPieLoading =() => {
  return (
    <Card className="border-none drop-shadow-sm">
      <CardHeader className="flex space-y-2 lg:space-y-0 lg:flex-row lg:items-center justify-between">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-8 lg:w-[120px] w-full" />
      </CardHeader>
      <CardContent>
        <div className="h-[350px] w-full flex items-center justify-center">
          <Loader2 className="h-6 w-6 text-slate-300 animate-spin"/>
        </div>
      </CardContent>
    </Card>
  );
};