react_ui: 集計画面に未入力日数を表示する

Changes

1 changed files (+18/-4)

• packages/react_ui/src/pages/:workspace/summary/page.tsx
  • @@ -13,6 +13,7 @@ Flex,
    Link, Table, Text, + type TextProps, Tooltip, } from "@radix-ui/themes"; import { DateSchema } from "@yamori/proto/yamori/type/v1/date_pb.js";
  • @@ -23,7 +24,7 @@ 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 { addMonths, differenceInCalendarDays, startOfMonth, endOfMonth } from "date-fns"; import { type FC, type ReactNode, use, useEffect, useMemo } from "react"; import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts";
  • @@ -46,13 +47,13 @@ since: proto.MessageShape<typeof DateSchema>;
    until: proto.MessageShape<typeof DateSchema>; } - interface DayCountProps { + interface DayCountProps extends Pick<TextProps, "color"> { suffix?: ReactNode; count: number; } - const DayCount: FC<DayCountProps> = ({ suffix = "日", count }) => { + const DayCount: FC<DayCountProps> = ({ suffix = "日", color, count }) => { if (!count) { return ( <Text size="2" color="gray" style={{ opacity: 0.2 }}>
  • @@ -63,7 +64,7 @@ }
    return ( <Text size="3"> - {count} + <Text color={color}>{count}</Text> <Text ml="1" size="1"> {suffix} </Text>
  • @@ -176,6 +177,10 @@ // 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]); + return ( <Flex position="absolute" inset="0" direction="column"> {workspaceConfig.isError && (
  • @@ -286,6 +291,9 @@ </Tooltip>
    </Table.ColumnHeaderCell> ); })} + <Table.ColumnHeaderCell className={css.columnHeader} justify="center"> + 未入力 + </Table.ColumnHeaderCell> </Table.Row> </Table.Header> <Table.Body>
  • @@ -325,6 +333,9 @@ break;
    } } + const emptyDates = + datesCount - worker.workRecords.filter((r) => !!r.record.case).length; + return ( <Table.Row key={worker.id?.value}> <Table.RowHeaderCell className={css.rowHeader}>
  • @@ -359,6 +370,9 @@ />
    </Table.Cell> ); })} + <Table.Cell className={css.cell} justify="center"> + <DayCount color="red" count={emptyDates} /> + </Table.Cell> </Table.Row> ); })}