web/src/app/admin/(dashboard)/_client/charts.tsx

'use client'
import {Tabs, TabsList, TabsTrigger, TabsContent} from '@/components/ui/tabs'
import DashboardChart from './chart'
import Image from 'next/image'
import soon from '../_assets/coming-soon.svg'
import DatePicker from '@/components/date-picker'
import {Card, CardHeader, CardTitle, CardContent} from '@/components/ui/card'
import {Form, FormField} from '@/components/ui/form'
import {Input} from '@/components/ui/input'
import {zodResolver} from '@hookform/resolvers/zod'
import {useForm} from 'react-hook-form'
import zod from 'zod'
import {merge} from '@/lib/utils'
import mask from '../_assets/Mask group.webp'
import {Button} from '@/components/ui/button'
import {useStatus} from '@/lib/states'
import {useState} from 'react'
import {useSearchParams} from 'next/navigation'
import {log} from 'console'
import {listAccount} from '@/actions/dashboard'
import {ExtraReq, ExtraResp} from '@/lib/api'
import {toast} from 'sonner'
import {addDays, format} from 'date-fns'
export default function Charts() {
  const dateStr = '2025-03-05'
  const dateStrA = '2024-03-05'
  const date = new Date(dateStr)
  const dateA = new Date(dateStrA)
  // const [submittedData, setSubmittedData] = useState<ExtraReq<typeof listAccount>>()
  const [submittedData, setSubmittedData] = useState<ExtraResp<typeof listAccount>>([
    {time: new Date(), count: 80},
    {time: date, count: 100},
    {time: dateA, count: 50},
    // {time: `2023-10-03`, count: 80},
    // {time: `2023-10-04`, count: 200},
    // {time: `2023-10-05`, count: 150},
  ])
  const data = [
    {time: `2023-10-01`, count: 100},
    {time: `2023-10-02`, count: 50},
    {time: `2023-10-03`, count: 80},
    {time: `2023-10-04`, count: 200},
    {time: `2023-10-05`, count: 150},
  ]

  const formSchema = zod.object({
    resource_no: zod.number().min(11, '请输入正确的套餐编号').max(11, '请输入正确的套餐编号').optional(),
    create_after: zod.date().optional(),
    create_before: zod.date().optional(),
  })
  type FormValues = zod.infer<typeof formSchema>

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
    },
  })
  const handler = form.handleSubmit(
    async (value) => {
      const res = {
        resource_no: value.resource_no ?? 0,
        create_after: value.create_after ?? new Date(),
        create_before: value.create_before ?? new Date(),
      }
      const resp = await listAccount(res)
      if (!resp.success) {
        toast.error('接口请求失败：' + resp.message)
        return
      }
      resp.data.map((_, i) => {
        let time = new Date()
        time = addDays(time, i)
        return {
          time: format(time, `MM/dd`),
          count: Math.floor(Math.random() * 100) + 1,
        }
      })
      setSubmittedData(resp.data)
    },
  )

  return (
    <Card className="col-start-1 row-start-3 col-span-3 row-span-2">
      <CardContent className="overflow-hidden">
        <Tabs defaultValue="dynamic" className="h-full gap-4">
          <TabsList className="h-9">
            <TabsTrigger value="dynamic" className="data-[state=active]:text-primary">
              {/* <Image src={mask} alt={`Mask group`} width={35} height={35} priority /> */}
              动态 IP 套餐
            </TabsTrigger>
            <TabsTrigger value="static" className="data-[state=active]:text-primary">静态 IP 套餐</TabsTrigger>
          </TabsList>
          <Form<FormValues>
            className={merge(`grid grid-cols-3 gap-4 items-start`)}
            handler={handler}
            form={form}
          >
            <FormField
              name="resource_no"
              label={<span className="w-full flex justify-end">套餐编号</span>}
              className={`grid grid-cols-[70px_1fr] grid-rows-[auto_auto] `}
              classNames={{
                message: `col-start-2`,
              }}
            >
              {({field}) => (
                <Input {...field} className="w-52"/>
              )}
            </FormField>
            <div className={`flex items-center `} >
              <FormField
                name="create_after"
                label={<span className="w-full flex justify-end">时间范围筛选</span>}
                className={`grid grid-cols-[100px_1fr] `}
                classNames={{
                  message: `col-start-2`,
                }}
              >
                {({field}) => (
                  <DatePicker
                    {...field}
                    className="w-36"
                    placeholder="开始时间"
                    format="yyyy-MM-dd"
                  />
                )}
              </FormField>
              <span className="px-1">-</span>
              <FormField name="create_before">
                {({field}) => (
                  <DatePicker
                    {...field}
                    className="w-36"
                    placeholder="结束时间"
                    format="yyyy-MM-dd"
                  />
                )}
              </FormField>
              <Button className="h-9 w-20" type="submit">
                <span>查询</span>
              </Button>
            </div>
          </Form>
          <TabsContent value="dynamic" className="overflow-hidden">
            {submittedData && <DashboardChart data={submittedData}/>}
          </TabsContent>
          <TabsContent value="static" className="flex flex-col items-center justify-center gap-2">
            <Image alt="coming soon" src={soon}/>
            <p>敬请期待</p>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}