/packages/react_ui/src/pages/:workspace/summary/page.tsx at 427faaf9f3f1bdcdf431a523fb5e6326cf5493ec

// 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,
	type TextProps,
	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, differenceInCalendarDays, 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 { createCSV, createTSV } from "./exports.ts";
import { buildSearchParams, deserializeDate, serializeDate, 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 extends Pick<TextProps, "color"> {
	suffix?: ReactNode;

	count: number;
}

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

	return (
		<Text size="3">
			<Text color={color}>{count}</Text>
			<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]);

	const datesCount = useMemo<number>(() => {
		return differenceInCalendarDays(fromProtoDate(until), fromProtoDate(since)) + 1;
	}, [since, until]);

	const header = useMemo<{ name: string; abbr?: string }[]>(() => {
		return [
			{
				name: "労働者名",
			},
			{
				name: workspaceConfig.data?.abbreviations?.worked || "出勤",
			},
			{
				name: workspaceConfig.data?.abbreviations?.dayoff || "休日",
			},
			{
				name: workspaceConfig.data?.abbreviations?.skipWork || "欠勤",
			},
			{
				name: "年次有給休暇",
				abbr: workspaceConfig.data?.abbreviations?.paidLeave,
			},
			...(workspaceConfig.data?.leaveDefinitions.map((def) => {
				return {
					name: def.displayName,
					abbr: def.abbreviationName,
				};
			}) ?? []),
			{
				name: "未入力",
			},
		];
	}, [workspaceConfig.data]);

	const body = useMemo<[proto.MessageShape<typeof WorkerSchema>, ...number[]][]>(() => {
		return (
			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;
					}
				}

				const emptyDates =
					datesCount - worker.workRecords.filter((r) => !!r.record.case).length;

				return [
					worker,
					worked,
					dayoff,
					skipped,
					paidLeave,
					...(workspaceConfig.data?.leaveDefinitions.map((def) => {
						return (def.id && workspaceDefinedLeaves.get(def.id.value)) || 0;
					}) ?? []),
					emptyDates,
				];
			}) ?? []
		);
	}, [workers.data, workspaceConfig.data]);

	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={!workers.isFetched || !workspaceConfig.isFetched}
								onClick={() => {
									const tsv = createTSV([
										header.map(({ name }) => name),
										...body.map(([worker, ...cells]) => [worker.displayName, ...cells]),
									]);

									const file = new Blob([tsv], {
										type: "text/tab-separated-values;charset=UTF-8",
									});

									const anchor = document.createElement("a");
									anchor.download = `${serializeDate(since)}_${serializeDate(until)}.tsv`;
									anchor.href = URL.createObjectURL(file);

									anchor.click();
								}}
							>
								TSVファイル
							</DropdownMenu.Item>
							<DropdownMenu.Item
								disabled={!workers.isFetched || !workspaceConfig.isFetched}
								onClick={() => {
									const csv = createCSV([
										header.map(({ name }) => name),
										...body.map(([worker, ...cells]) => [worker.displayName, ...cells]),
									]);

									const file = new Blob([csv], { type: "text/csv;charset=UTF-8" });

									const anchor = document.createElement("a");
									anchor.download = `${serializeDate(since)}_${serializeDate(until)}.csv`;
									anchor.href = URL.createObjectURL(file);

									anchor.click();
								}}
							>
								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>
							{header.map(({ name, abbr }, i) => {
								return (
									<Table.ColumnHeaderCell
										key={i}
										className={i === 0 ? css.rowColumnHeader : css.columnHeader}
										justify={i === 0 ? "start" : "center"}
									>
										{abbr ? (
											<Tooltip content={name}>
												<Text>{abbr}</Text>
											</Tooltip>
										) : (
											name
										)}
									</Table.ColumnHeaderCell>
								);
							})}
						</Table.Row>
					</Table.Header>
					<Table.Body>
						{body.map((row, i) => {
							return (
								<Table.Row key={i}>
									{row.map((cell, j, cells) => {
										if (typeof cell !== "number") {
											return (
												<Table.RowHeaderCell key={j} className={css.rowHeader}>
													<Link href={workerDashboard.href({ workspace, worker: cell })}>
														{cell.displayName}
													</Link>
												</Table.RowHeaderCell>
											);
										}

										return (
											<Table.Cell key={j} className={css.cell} justify="center">
												<DayCount
													color={j === cells.length - 1 ? "red" : undefined}
													count={cell}
												/>
											</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>
	);
};