/packages/react_ui/src/pages/:workspace/summary/page.tsx at 3afd26fe3e48ab7629ecc8c41fc6795ac42e5c1a

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import * as proto from "@bufbuild/protobuf";
import { tz } from "@date-fns/tz";
import { CaretLeftIcon, CaretRightIcon } from "@radix-ui/react-icons";
import {
	Button,
	Box,
	Container,
	DropdownMenu,
	Flex,
	Link,
	Table,
	Text,
	Tooltip,
} from "@radix-ui/themes";
import { DateSchema } from "@yamori/proto/yamori/type/v1/date_pb.js";
import { LeaveSchema } from "@yamori/proto/yamori/work_record/v1/leave_pb.js";
import { WorkspaceSchema } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { GetRequestSchema } from "@yamori/proto/yamori/workspace/v1/get_request_pb.js";
import { GetResponseSchema } from "@yamori/proto/yamori/workspace/v1/get_response_pb.js";
import { WorkerSchema } from "@yamori/proto/yamori/worker/v1/worker_pb.js";
import { ListRequestSchema } from "@yamori/proto/yamori/worker/v1/list_request_pb.js";
import { ListResponseSchema } from "@yamori/proto/yamori/worker/v1/list_response_pb.js";
import { addMonths, startOfMonth, endOfMonth } from "date-fns";
import { type FC, type ReactNode, use, useEffect, useMemo } from "react";

import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts";
import { NavigationContext, URLContext } from "../../../contexts/Router.tsx";
import { useMethodQuery } from "../../../contexts/Service.tsx";
import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";
import { fromProtoDate, toProtoDate } from "../../../helpers.ts";
import * as workerDashboard from "../workers/:id/Dashboard.tsx";
import { Layout } from "../Layout.tsx";

import { buildSearchParams, deserializeDate, href } from "./meta.ts";
import css from "./page.module.css";

export { href, pattern } from "./meta.ts";

export const Title: FC = () => "日数明細";

interface DateRange {
	since: proto.MessageShape<typeof DateSchema>;
	until: proto.MessageShape<typeof DateSchema>;
}

interface DayCountProps {
	suffix?: ReactNode;

	count: number;
}

const DayCount: FC<DayCountProps> = ({ suffix = "日", count }) => {
	if (!count) {
		return (
			<Text size="2" color="gray" style={{ opacity: 0.2 }}>
				---
			</Text>
		);
	}

	return (
		<Text size="3">
			{count}
			<Text ml="1" size="1">
				{suffix}
			</Text>
		</Text>
	);
};

const monthFormatter = new Intl.DateTimeFormat(navigator.language, {
	year: "numeric",
	month: "numeric",
});

interface BodyProps {
	workspace: proto.MessageShape<typeof WorkspaceSchema>;

	range: DateRange;

	onChangeDateRange(range: DateRange): void;
}

const Body: FC<BodyProps> = ({
	workspace,
	range: { since, until },
	onChangeDateRange,
}) => {
	const workspaceConfig = useMethodQuery({
		service: "yamori.workspace.v1.WorkspaceService",
		method: "Get",
		request: {
			schema: GetRequestSchema,
			data: {
				workspaceId: workspace.id,
				readMask: {
					fields: [
						WorkspaceSchema.field.abbreviations.number,
						WorkspaceSchema.field.leaveDefinitions.number,
					],
					leaveDefinitionsMask: {
						fields: [
							LeaveSchema.field.id.number,
							LeaveSchema.field.displayName.number,
							LeaveSchema.field.abbreviationName.number,
						],
					},
				},
			},
		},
		response: {
			schema: GetResponseSchema,
		},
		mapResponse(resp) {
			switch (resp.result.case) {
				case "ok":
					return resp.result.value;
				case undefined:
					throw new IllegalMessageError(resp);
				default:
					throw resp.result.value;
			}
		},
	});

	const workers = useMethodQuery({
		service: "yamori.worker.v1.WorkerService",
		method: "List",
		request: {
			schema: ListRequestSchema,
			data: {
				workspaceId: workspace.id,
				workRecordFilter: {
					since,
					until,
				},
				readMask: {
					fields: [
						WorkerSchema.field.id.number,
						WorkerSchema.field.displayName.number,
						WorkerSchema.field.workRecords.number,
					],
					workRecordsMask: {
						workspaceDefinedLeaveMask: {
							fields: [LeaveSchema.field.id.number],
						},
					},
				},
			},
		},
		response: {
			schema: ListResponseSchema,
		},
		mapResponse(resp) {
			switch (resp.result.case) {
				case "ok":
					return resp.result.value.workers;
				case undefined:
					throw new IllegalMessageError(resp);
				default:
					throw resp.result.value;
			}
		},
	});

	const prevMonth = useMemo(() => {
		// TODO: TZ をどこか共通の場所で定義する
		return addMonths(fromProtoDate(since), -1, { in: tz("Asia/Tokyo") });
	}, [since]);

	const nextMonth = useMemo(() => {
		// TODO: TZ をどこか共通の場所で定義する
		return addMonths(fromProtoDate(since), 1, { in: tz("Asia/Tokyo") });
	}, [since]);

	return (
		<Flex position="absolute" inset="0" direction="column">
			{workspaceConfig.isError && (
				<ManagedErrorCallout
					error={workspaceConfig.error}
					title="ワークスペース設定が取得できませんでした"
					actions={
						<Button
							size="1"
							loading={workspaceConfig.isFetching}
							onClick={() => void workspaceConfig.refetch()}
						>
							再試行
						</Button>
					}
				/>
			)}
			{workers.isError && (
				<ManagedErrorCallout
					error={workers.error}
					title="労働者一覧を取得できませんでした"
					actions={
						<Button
							size="1"
							loading={workspaceConfig.isFetching}
							onClick={() => void workers.refetch()}
						>
							再試行
						</Button>
					}
				/>
			)}
			<Container p="3" flexShrink="0" flexGrow="0">
				<Flex align="center" justify="end" gap="1">
					<Button
						variant="soft"
						onClick={() => {
							onChangeDateRange({
								// TODO: TZ をどこか共通の場所で定義する
								since: toProtoDate(startOfMonth(prevMonth, { in: tz("Asia/Tokyo") })),
								until: toProtoDate(endOfMonth(prevMonth, { in: tz("Asia/Tokyo") })),
							});
						}}
					>
						<CaretLeftIcon />
						{monthFormatter.format(prevMonth)}
					</Button>
					<Button
						variant="soft"
						onClick={() => {
							onChangeDateRange({
								// TODO: TZ をどこか共通の場所で定義する
								since: toProtoDate(startOfMonth(nextMonth, { in: tz("Asia/Tokyo") })),
								until: toProtoDate(endOfMonth(nextMonth, { in: tz("Asia/Tokyo") })),
							});
						}}
					>
						{monthFormatter.format(nextMonth)}
						<CaretRightIcon />
					</Button>
					<DropdownMenu.Root>
						<DropdownMenu.Trigger>
							<Button>
								ダウンロード
								<DropdownMenu.TriggerIcon />
							</Button>
						</DropdownMenu.Trigger>
						<DropdownMenu.Content align="end">
							<DropdownMenu.Item disabled>TSVファイル</DropdownMenu.Item>
							<DropdownMenu.Item disabled>CSVファイル</DropdownMenu.Item>
						</DropdownMenu.Content>
					</DropdownMenu.Root>
				</Flex>
			</Container>
			<Box mt="2" p="2" flexGrow="1" flexShrink="1" minWidth="0" minHeight="0">
				<Table.Root style={{ maxHeight: "100%" }}>
					<Table.Header>
						<Table.Row>
							<Table.ColumnHeaderCell className={css.rowColumnHeader}>
								労働者名
							</Table.ColumnHeaderCell>
							<Table.ColumnHeaderCell className={css.columnHeader} justify="center">
								{workspaceConfig.data?.abbreviations?.worked ?? "出勤"}
							</Table.ColumnHeaderCell>
							<Table.ColumnHeaderCell className={css.columnHeader} justify="center">
								{workspaceConfig.data?.abbreviations?.dayoff ?? "休日"}
							</Table.ColumnHeaderCell>
							<Table.ColumnHeaderCell className={css.columnHeader} justify="center">
								{workspaceConfig.data?.abbreviations?.skipWork ?? "欠勤"}
							</Table.ColumnHeaderCell>
							<Table.ColumnHeaderCell className={css.columnHeader} justify="center">
								<Tooltip content="年次有給休暇">
									<Text>
										{workspaceConfig.data?.abbreviations?.paidLeave ?? "年次有給休暇"}
									</Text>
								</Tooltip>
							</Table.ColumnHeaderCell>
							{workspaceConfig.data?.leaveDefinitions.map((def) => {
								return (
									<Table.ColumnHeaderCell
										key={def.id?.value}
										className={css.columnHeader}
										justify="center"
									>
										<Tooltip content={def.displayName}>
											<Text>{def.abbreviationName || def.displayName}</Text>
										</Tooltip>
									</Table.ColumnHeaderCell>
								);
							})}
						</Table.Row>
					</Table.Header>
					<Table.Body>
						{workers.data?.map((worker) => {
							let worked = 0;
							let dayoff = 0;
							let skipped = 0;
							let paidLeave = 0;
							const workspaceDefinedLeaves = new Map<string, number>();

							for (const record of worker.workRecords) {
								switch (record.record.case) {
									case "workingDay":
										if (record.record.value.hasWorkerWorked) {
											worked++;
										} else {
											skipped++;
										}
										break;
									case "dayOff":
										dayoff++;
										break;
									case "paidLeave":
										paidLeave++;
										break;
									case "workspaceDefinedLeave":
										if (record.record.value.id?.value) {
											const current = workspaceDefinedLeaves.get(
												record.record.value.id.value,
											);
											workspaceDefinedLeaves.set(
												record.record.value.id.value,
												(current ?? 0) + 1,
											);
										}
										break;
								}
							}

							return (
								<Table.Row key={worker.id?.value}>
									<Table.RowHeaderCell className={css.rowHeader}>
										<Link href={workerDashboard.href({ workspace, worker })}>
											{worker.displayName}
										</Link>
									</Table.RowHeaderCell>
									<Table.Cell className={css.cell} justify="center">
										<DayCount count={worked} />
									</Table.Cell>
									<Table.Cell className={css.cell} justify="center">
										<DayCount count={dayoff} />
									</Table.Cell>
									<Table.Cell className={css.cell} justify="center">
										<DayCount count={skipped} />
									</Table.Cell>
									<Table.Cell className={css.cell} justify="center">
										<DayCount count={paidLeave} />
									</Table.Cell>
									{workspaceConfig.data?.leaveDefinitions.map((def) => {
										return (
											<Table.Cell
												key={def.id?.value}
												className={css.cell}
												justify="center"
											>
												<DayCount
													count={
														(def.id && workspaceDefinedLeaves.get(def.id.value)) || 0
													}
												/>
											</Table.Cell>
										);
									})}
								</Table.Row>
							);
						})}
					</Table.Body>
				</Table.Root>
			</Box>
		</Flex>
	);
};

export interface PageProps {
	workspace: proto.MessageShape<typeof WorkspaceSchema>;
}

export const Page: FC<PageProps> = ({ workspace }) => {
	const navigation = use(NavigationContext);
	const url = use(URLContext);

	const searchParams = useMemo(() => new URLSearchParams(url.search), [url.search]);

	const range = useMemo<DateRange>(() => {
		const parseOr = (
			paramName: string,
			fallback: Date,
		): proto.MessageShape<typeof DateSchema> => {
			const param = searchParams.get(paramName);
			if (!param) {
				return toProtoDate(fallback);
			}

			return deserializeDate(param) || toProtoDate(fallback);
		};

		// TODO: TZ をどこか共通の場所で定義する
		const since = parseOr("since", startOfMonth(Date.now(), { in: tz("Asia/Tokyo") }));
		const until = parseOr("until", endOfMonth(Date.now(), { in: tz("Asia/Tokyo") }));

		return { since, until };
	}, [searchParams]);

	// ブラウザのクエリパラメータと since/until が違う場合はブラウザのクエリパラメータを
	// 書き換える。
	useEffect(() => {
		const next = buildSearchParams({ since: range.since, until: range.until });
		if (next.toString() === searchParams.toString()) {
			return;
		}

		navigation.replace(href({ workspace, since: range.since, until: range.until }));
	}, [searchParams, range]);

	return (
		<Layout workspace={workspace} title={<Title />}>
			<Body
				workspace={workspace}
				range={range}
				onChangeDateRange={({ since, until }) => {
					navigation.replace(
						href({
							workspace,
							since,
							until,
						}),
					);
				}}
			/>
		</Layout>
	);
};