web/src/app/admin/bills/page.tsx

'use client'
import {useEffect, useState} from 'react'
import {PageRecord} from '@/lib/api'
import {Bill} from '@/lib/models'
import {useStatus} from '@/lib/states'
import {listBills} from '@/actions/bill'
import {Search, Eraser, CreditCard} from 'lucide-react'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
import {Button} from '@/components/ui/button'
import DataTable from '@/components/data-table'
import {format} from 'date-fns'
import DatePicker from '@/components/date-picker'
import {Form, FormField} from '@/components/ui/form'
import {useForm} from 'react-hook-form'
import zod from 'zod'
import {zodResolver} from '@hookform/resolvers/zod'
import {Label} from '@/components/ui/label'
import Page from '@/components/page'
import {PaymentStatusCell} from '@/components/composites/payment'

const filterSchema = zod.object({
  type: zod.enum(['all', '3', '1', '2']).default('all'),
  create_after: zod.date().optional(),
  create_before: zod.date().optional(),
})

type FilterSchema = zod.infer<typeof filterSchema>

export type BillsPageProps = {}

export default function BillsPage(props: BillsPageProps) {
  const [status, setStatus] = useStatus()
  const [data, setData] = useState<PageRecord<Bill>>({
    page: 1,
    size: 10,
    total: 0,
    list: [],
  })

  const refresh = async (page: number, size: number) => {
    setStatus('load')
    try {
      const typeValue = form.getValues('type')
      const type = typeValue === 'all' ? undefined : parseInt(typeValue)
      const create_after = form.getValues('create_after')
      const create_before = form.getValues('create_before')

      const res = await listBills({
        page, size, type, create_after, create_before,
      })

      if (res.success) {
        setData(res.data)
        setStatus('done')
      }
      else {
        throw new Error('Failed to load bills')
      }
    }
    catch (e) {
      setStatus('fail')
    }
  }

  useEffect(() => {
    refresh(1, 10).then()
  }, [])

  const form = useForm<FilterSchema>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      type: 'all',
    },
  })

  const onSubmit = async (value: FilterSchema) => {
    console.log(value)
    await refresh(1, data.size)
  }

  return (
    <Page>
      <section className="flex justify-between flex-wrap">
        <div>
        </div>

        <Form form={form} onSubmit={onSubmit} className="flex items-end gap-4 flex-wrap">
          <FormField name="type" label={<span className="text-sm">账单类型</span>}>
            {({id, field}) => (
              <Select value={field.value} onValueChange={field.onChange}>
                <SelectTrigger className="w-24 h-9">
                  <SelectValue placeholder="选择类型"/>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部</SelectItem>
                  <SelectItem value="3">充值</SelectItem>
                  <SelectItem value="1">消费</SelectItem>
                  <SelectItem value="2">退款</SelectItem>
                </SelectContent>
              </Select>
            )}
          </FormField>
          <div className="flex flex-col gap-2">
            <Label className="text-sm">创建时间</Label>
            <div className="flex items-center">
              <FormField name="create_after">
                {({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>
            </div>
          </div>
          <Button className="h-9" type="submit">
            <Search/>
            <span>筛选</span>
          </Button>
          <Button theme="outline" className="h-9" type="button" onClick={() => form.reset()}>
            <Eraser/>
            <span>重置</span>
          </Button>
        </Form>
      </section>

      <DataTable
        data={data.list}
        status={status}
        pagination={{
          total: data.total,
          page: data.page,
          size: data.size,
          onPageChange: async (page: number) => {
            await refresh(page, data.size)
          },
          onSizeChange: async (size: number) => {
            await refresh(data.page, size)
          },
        }}
        columns={[
          {
            accessorKey: 'bill_no', header: `账单编号`,
          }, {
            accessorKey: 'type', header: `类型`, cell: ({row}) => (
              <div className="flex gap-2 items-center">
                {row.original.type === 1 && (
                  <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
                    <CreditCard size={16}/>
                    <span>消费</span>
                  </div>
                )}
                {row.original.type === 2 && (
                  <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
                    <CreditCard size={16}/>
                    <span>退款</span>
                  </div>
                )}
                {row.original.type === 3 && (
                  <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
                    <CreditCard size={16}/>
                    <span>充值</span>
                  </div>
                )}
              </div>
            ),
          },
          {
            accessorKey: 'info', header: `账单详情`,
          },
          {
            accessorKey: 'status',
            header: `状态`,
            cell: ({row}) => (
              <PaymentStatusCell trade={{
                ...row.original.trade,
                amount: row.original.amount,
              }}/>
            ),
          },
          {
            accessorKey: 'amount',
            header: '支付信息',
            cell: ({row}) => {
              const amount = typeof row.original.amount === 'string'
                ? parseFloat(row.original.amount)
                : row.original.amount || 0
              return (
                <div className="flex gap-1">
                  <span className="text-sm">
                    {!row.original.trade && '余额'}
                    {row.original.trade && row.original.trade.method === 1 && '支付宝'}
                    {row.original.trade && row.original.trade.method === 2 && '微信'}
                  </span>
                  <span className={amount > 0 ? 'text-green-400' : 'text-orange-400'}>
                    ￥
                    {amount.toFixed(2)}
                  </span>
                </div>
              )
            },
          },
          {
            accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (
              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm')
            ),
          },
          {
            accessorKey: 'action', header: `操作`, cell: item => (
              <div className="flex gap-2">
                -
              </div>
            ),
          },
        ]}
      />
    </Page>
  )
}