labelmain/app/person/dashboard/page.tsx

"use client"

import { getCurrentPersonData } from "@/components/label/api/project"
import {
  BackgroundImage,
  Center,
  Group,
  Paper,
  SimpleGrid,
  Stack,
  Text,
  Title,
} from "@mantine/core"
import dayjs from "dayjs"
import duration from "dayjs/plugin/duration"
import { JSX, useEffect, useMemo, useState } from "react"
import { DataIcon, HourIcon, ReviewIcon } from "./components/Icon"
import PersonalProjectTable from "./components/PersonalProjectTable"
import PersonalTaskTable from "./components/PersonalTaskTable"
import DataImage from "./resource/images/data.png"
import DataLogoImage from "./resource/images/data_logo.png"
import HourImage from "./resource/images/hour.png"
import HourLogoImage from "./resource/images/hour_logo.png"
import ReviewImage from "./resource/images/review.png"
import ReviewLogoImage from "./resource/images/review_logo.png"

dayjs.extend(duration)

function monthText(month: string) {
  const list = [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ]
  const idx = Number(month) - 1
  return list[idx] ?? ""
}

function formatDurationSeconds(seconds?: number | null) {
  const value = seconds ?? 0
  if (!value) return "-"
  const durationObj = dayjs.duration(value, "seconds")
  const hours = durationObj.hours()
  const minutes = durationObj.minutes()
  if (hours) return `${hours}小时${minutes}分钟`
  if (minutes) return `${minutes}分钟`
  return "-"
}

function StatCard(props: {
  title: string
  timeText: string
  sizeTitle: string
  sizeValue: number
  sizeColor: string
  background: string
  backgroundLogo: string
  Icon: () => JSX.Element
}) {
  const {
    title,
    timeText,
    sizeTitle,
    sizeValue,
    sizeColor,
    background,
    backgroundLogo,
    Icon,
  } = props
  return (
    <Paper
      shadow="xs"
      p="md"
      withBorder
      radius={"md"}
      pos="relative"
      style={{
        borderColor:
          "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
        overflow: "hidden",
        display: "flex",
      }}>
      <BackgroundImage
        src={background}
        w="100%"
        h="100%"
        style={{ position: "absolute", top: 0, left: 0, zIndex: 0 }}
      />
      <BackgroundImage
        src={backgroundLogo}
        w={108}
        h={108}
        style={{
          position: "absolute",
          bottom: 0,
          right: 8,
          zIndex: 0,
          backgroundRepeat: "no-repeat",
        }}
      />
      <Group gap="md" align="flex-start" style={{ flex: 1, zIndex: 1 }}>
        <div style={{ width: 32 }}>
          <Icon />
        </div>
        <Stack gap={6} style={{ flex: 1 }}>
          <div>
            <Text fw={700} fz="lg" lh={1.4}>
              {title}
            </Text>
            <Title order={3} style={{ marginTop: 6 }}>
              {timeText}
            </Title>
          </div>
          <Stack gap={6}>
            <Text fw={700} fz="lg">
              {sizeTitle}
            </Text>
            <Paper
              shadow="xs"
              px={8}
              py={4}
              radius="sm"
              style={{
                background: "#fff",
                width: "fit-content",
                color: sizeColor,
                fontWeight: 700,
                fontSize: 16,
              }}>
              {sizeValue}
            </Paper>
          </Stack>
        </Stack>
      </Group>
    </Paper>
  )
}

export default function PersonDashboardPage() {
  const [data, setData] = useState<{
    label_data_size: number
    label_work_time: number
    review1_data_size: number
    review1_work_time: number
    review2_data_size: number
    review2_work_time: number
  } | null>(null)

  useEffect(() => {
    const run = async () => {
      const res = await getCurrentPersonData({
        date: dayjs().format("YYYY-MM-DD"),
      })
      setData(res)
    }
    run()
  }, [])

  const dataText = useMemo(() => {
    return {
      label: formatDurationSeconds(data?.label_work_time ?? 0),
      review1: formatDurationSeconds(data?.review1_work_time ?? 0),
      review2: formatDurationSeconds(data?.review2_work_time ?? 0),
    }
  }, [data])

  return (
    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
      <Group align="stretch" gap="md" wrap="nowrap" h={180}>
        <Paper
          shadow="xs"
          withBorder
          p="md"
          style={{
            width: 160,
            borderColor:
              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
            display: "flex",
            flexDirection: "column",
            gap: 16,
          }}>
          <Text fz="lg" fw={700}>
            今日
          </Text>
          <Center>
            <Paper
              radius="md"
              p="sm"
              style={{
                width: 72,
                height: 72,
                background: "rgba(0, 161, 255, 0.08)",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                gap: 4,
              }}>
              <Text fz={24} fw={700} lh={1}>
                {dayjs().format("DD")}
              </Text>
              <Text fz={16}>{monthText(dayjs().format("MM"))}</Text>
            </Paper>
          </Center>
        </Paper>

        <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md" style={{ flex: 1 }}>
          <StatCard
            title="标注工时"
            timeText={dataText.label}
            sizeTitle="标注数据量"
            sizeValue={data?.label_data_size ?? 0}
            sizeColor="#E03131"
            background={DataImage.src}
            backgroundLogo={DataLogoImage.src}
            Icon={DataIcon}
          />
          <StatCard
            title="审核工时"
            timeText={dataText.review1}
            sizeTitle="审核数据量"
            sizeValue={data?.review1_data_size ?? 0}
            sizeColor="#2F9E44"
            background={HourImage.src}
            backgroundLogo={HourLogoImage.src}
            Icon={HourIcon}
          />
          <StatCard
            title="复审工时"
            timeText={dataText.review2}
            sizeTitle="复审数据量"
            sizeValue={data?.review2_data_size ?? 0}
            sizeColor="#F08C00"
            background={ReviewImage.src}
            backgroundLogo={ReviewLogoImage.src}
            Icon={ReviewIcon}
          />
        </SimpleGrid>
      </Group>

      <SimpleGrid
        cols={{ base: 1, lg: 2 }}
        spacing="md"
        style={{ flex: 1, maxHeight: "calc(100% - 194px)" }}>
        <Paper
          shadow="xs"
          withBorder
          p="md"
          style={{
            borderColor:
              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
            display: "flex",
            flexDirection: "column",
            minHeight: 0,
          }}>
          <div style={{ flex: 1, minHeight: 0 }}>
            <PersonalTaskTable />
          </div>
        </Paper>

        <Paper
          shadow="xs"
          withBorder
          p="md"
          style={{
            borderColor:
              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
            display: "flex",
            flexDirection: "column",
            minHeight: 0,
          }}>
          <div style={{ flex: 1, minHeight: 0 }}>
            <PersonalProjectTable />
          </div>
        </Paper>
      </SimpleGrid>
    </Stack>
  )
}