feat: migrate to Next.js for Mini App and enhance project structure
- Replaced the previous webapp with a new Mini App built using Next.js, improving performance and maintainability. - Updated the `.gitignore` to exclude Next.js build artifacts and node modules. - Revised documentation in `AGENTS.md`, `README.md`, and `architecture.md` to reflect the new Mini App structure and technology stack. - Enhanced Dockerfile to support the new build process for the Next.js application. - Updated CI workflow to build and test the Next.js application. - Added new configuration options for the Mini App, including `MINI_APP_SHORT_NAME` for improved deep linking. - Refactored frontend testing setup to accommodate the new structure and testing framework. - Removed legacy webapp files and dependencies to streamline the project.
This commit is contained in:
195
webapp-next/src/components/day-detail/DayDetailContent.tsx
Normal file
195
webapp-next/src/components/day-detail/DayDetailContent.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
/**
|
||||
* Shared content for day detail: title and sections (duty, unavailable, vacation, events).
|
||||
* Ported from webapp/js/dayDetail.js buildDayDetailContent.
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "@/i18n/use-translation";
|
||||
import { localDateString, dateKeyToDDMM } from "@/lib/date-utils";
|
||||
import { getDutyMarkerRows } from "@/lib/duty-marker-rows";
|
||||
import { ContactLinks } from "@/components/contact";
|
||||
import type { DutyWithUser } from "@/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const NBSP = "\u00a0";
|
||||
|
||||
export interface DayDetailContentProps {
|
||||
/** YYYY-MM-DD key for the day. */
|
||||
dateKey: string;
|
||||
/** Duties overlapping this day. */
|
||||
duties: DutyWithUser[];
|
||||
/** Calendar event summary strings for this day. */
|
||||
eventSummaries: string[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function DayDetailContent({
|
||||
dateKey,
|
||||
duties,
|
||||
eventSummaries,
|
||||
className,
|
||||
}: DayDetailContentProps) {
|
||||
const { t } = useTranslation();
|
||||
const todayKey = localDateString(new Date());
|
||||
const ddmm = dateKeyToDDMM(dateKey);
|
||||
const title =
|
||||
dateKey === todayKey ? t("duty.today") + ", " + ddmm : ddmm;
|
||||
|
||||
const fromLabel = t("hint.from");
|
||||
const toLabel = t("hint.to");
|
||||
|
||||
const dutyList = useMemo(
|
||||
() =>
|
||||
duties
|
||||
.filter((d) => d.event_type === "duty")
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(a.start_at || 0).getTime() -
|
||||
new Date(b.start_at || 0).getTime()
|
||||
),
|
||||
[duties]
|
||||
);
|
||||
|
||||
const unavailableList = useMemo(
|
||||
() => duties.filter((d) => d.event_type === "unavailable"),
|
||||
[duties]
|
||||
);
|
||||
|
||||
const vacationList = useMemo(
|
||||
() => duties.filter((d) => d.event_type === "vacation"),
|
||||
[duties]
|
||||
);
|
||||
|
||||
const dutyRows = useMemo(() => {
|
||||
const hasTimes = dutyList.some((it) => it.start_at || it.end_at);
|
||||
return hasTimes
|
||||
? getDutyMarkerRows(dutyList, dateKey, NBSP, fromLabel, toLabel)
|
||||
: dutyList.map((d) => ({
|
||||
id: d.id,
|
||||
timePrefix: "",
|
||||
fullName: d.full_name ?? "",
|
||||
phone: d.phone,
|
||||
username: d.username,
|
||||
}));
|
||||
}, [dutyList, dateKey, fromLabel, toLabel]);
|
||||
|
||||
const uniqueUnavailable = useMemo(
|
||||
() => [
|
||||
...new Set(
|
||||
unavailableList.map((d) => d.full_name ?? "").filter(Boolean)
|
||||
),
|
||||
],
|
||||
[unavailableList]
|
||||
);
|
||||
|
||||
const uniqueVacation = useMemo(
|
||||
() => [
|
||||
...new Set(vacationList.map((d) => d.full_name ?? "").filter(Boolean)),
|
||||
],
|
||||
[vacationList]
|
||||
);
|
||||
|
||||
const summaries = eventSummaries ?? [];
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-4", className)}>
|
||||
<h2
|
||||
id="day-detail-title"
|
||||
className="text-[1.1rem] font-semibold leading-tight m-0"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
{dutyList.length > 0 && (
|
||||
<section
|
||||
className="day-detail-section-duty"
|
||||
aria-labelledby="day-detail-duty-heading"
|
||||
>
|
||||
<h3
|
||||
id="day-detail-duty-heading"
|
||||
className="text-[0.8rem] font-semibold text-duty m-0 mb-1"
|
||||
>
|
||||
{t("event_type.duty")}
|
||||
</h3>
|
||||
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-2.5 [&_li]:flex [&_li]:flex-col [&_li]:gap-1">
|
||||
{dutyRows.map((r) => (
|
||||
<li key={r.id}>
|
||||
{r.timePrefix && (
|
||||
<span className="text-muted-foreground">{r.timePrefix} — </span>
|
||||
)}
|
||||
<span className="font-semibold">{r.fullName}</span>
|
||||
<ContactLinks
|
||||
phone={r.phone}
|
||||
username={r.username}
|
||||
layout="inline"
|
||||
showLabels={true}
|
||||
className="text-[0.85rem] mt-0.5"
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{uniqueUnavailable.length > 0 && (
|
||||
<section
|
||||
className="day-detail-section-unavailable"
|
||||
aria-labelledby="day-detail-unavailable-heading"
|
||||
>
|
||||
<h3
|
||||
id="day-detail-unavailable-heading"
|
||||
className="text-[0.8rem] font-semibold text-unavailable m-0 mb-1"
|
||||
>
|
||||
{t("event_type.unavailable")}
|
||||
</h3>
|
||||
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
|
||||
{uniqueUnavailable.map((name) => (
|
||||
<li key={name}>{name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{uniqueVacation.length > 0 && (
|
||||
<section
|
||||
className="day-detail-section-vacation"
|
||||
aria-labelledby="day-detail-vacation-heading"
|
||||
>
|
||||
<h3
|
||||
id="day-detail-vacation-heading"
|
||||
className="text-[0.8rem] font-semibold text-vacation m-0 mb-1"
|
||||
>
|
||||
{t("event_type.vacation")}
|
||||
</h3>
|
||||
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
|
||||
{uniqueVacation.map((name) => (
|
||||
<li key={name}>{name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{summaries.length > 0 && (
|
||||
<section
|
||||
className="day-detail-section-events"
|
||||
aria-labelledby="day-detail-events-heading"
|
||||
>
|
||||
<h3
|
||||
id="day-detail-events-heading"
|
||||
className="text-[0.8rem] font-semibold text-accent m-0 mb-1"
|
||||
>
|
||||
{t("hint.events")}
|
||||
</h3>
|
||||
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
|
||||
{summaries.map((s) => (
|
||||
<li key={String(s)}>{String(s)}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user