106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
import { redirect } from "next/navigation";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { api } from "@/server/api/client";
|
|
import { getServerAuthSession } from "@/server/auth";
|
|
import { ZDay } from "@lifetracker/shared/types/days";
|
|
import EditableDayComment from "./EditableDayComment";
|
|
import { MoodStars } from "./MoodStars";
|
|
import { format, addDays } from "date-fns";
|
|
import { ButtonWithTooltip } from "@/components/ui/button";
|
|
import { router } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
|
|
import { UTCDate, utc } from "@date-fns/utc";
|
|
import spacetime from "spacetime";
|
|
import EditableHour from "@/components/dashboard/hours/EditableHour";
|
|
|
|
export default async function DayView({
|
|
day,
|
|
}: {
|
|
day: ZDay;
|
|
}) {
|
|
const session = await getServerAuthSession();
|
|
if (!session) {
|
|
redirect("/");
|
|
}
|
|
|
|
const prevDay = spacetime(day.date).subtract(1, "day").format("iso-short");
|
|
const nextDay = spacetime(day.date).add(1, "day").format("iso-short");
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
|
|
<div className="flex justify-between">
|
|
<div className="flex">
|
|
<Link
|
|
href={`/dashboard/day/${prevDay}`}
|
|
className={cn(
|
|
"flex-0 items-center rounded-[inherit] px-3 py-2",
|
|
)}
|
|
>
|
|
<div className="flex w-full justify-between">
|
|
<ArrowLeftSquare size={18} />
|
|
</div>
|
|
</Link>
|
|
<span className="text-2xl flex-1">
|
|
{spacetime(day.date).format("{day}, {month} {date}, {year}")}
|
|
</span>
|
|
<Link
|
|
href={`/dashboard/day/${nextDay}`}
|
|
className={cn(
|
|
"flex-0 items-center rounded-[inherit] px-3 py-2",
|
|
)}
|
|
>
|
|
<div className="flex w-full justify-between">
|
|
<ArrowRightSquare size={18} />
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<MoodStars
|
|
day={day}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<EditableDayComment day={day}
|
|
className="text-xl"
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<ul>
|
|
<li>
|
|
<div className={cn(
|
|
"p-4 grid justify-between",
|
|
)}
|
|
style={{
|
|
fontFamily: "inherit",
|
|
gridTemplateColumns: "100px 1fr 200px"
|
|
}}
|
|
>
|
|
<span className="text-right">
|
|
Time
|
|
</span>
|
|
<span className="text-center">
|
|
Category
|
|
</span>
|
|
<div className="text-right">
|
|
Actions
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{day.hours.map((hour) => (
|
|
<li key={hour.time} id={"hour-" + hour.time.toString()}>
|
|
<EditableHour hour={hour} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
</div>
|
|
);
|
|
}
|