elpatron/cat-sitting-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement i18n with German and English support (default DE)

Browse Source
This commit is contained in:
elpatron
2026-01-12 21:38:05 +01:00
parent a60d456b3b
commit 62e1f5f1b4
14 changed files with 471 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/dashboard/[planId]/_components/plan-dashboard.tsx → app/[lang]/dashboard/[planId]/_components/plan-dashboard.tsx
View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from "react"
import { format, eachDayOfInterval, isSameDay } from "date-fns"
import { de, enUS } from "date-fns/locale"
import { CalendarIcon, User, Home, X, Info } from "lucide-react"
import { toast } from "sonner"
@@ -38,13 +39,22 @@ type Plan = {
bookings: Booking[]
}
export function PlanDashboard({ plan }: { plan: Plan }) {
interface PlanDashboardProps {
plan: Plan;
dict: any;
settingsDict: any;
lang: string;
}
export function PlanDashboard({ plan, dict, settingsDict, lang }: PlanDashboardProps) {
const [selectedDate, setSelectedDate] = useState<Date | null>(null)
const [sitterName, setSitterName] = useState("")
const [bookingType, setBookingType] = useState<"SITTER" | "OWNER_HOME">("SITTER")
const [isDialogOpen, setIsDialogOpen] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const dateLocale = lang === "de" ? de : enUS
// Load saved name from localStorage
useEffect(() => {
const savedName = localStorage.getItem("sitter_name")
@@ -60,38 +70,36 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
const handleBook = async () => {
if (!selectedDate) return
if (bookingType === "SITTER" && !sitterName.trim()) {
toast.error("Please enter your name")
toast.error(dict.namePlaceholder) // Could use a more specific key if needed
return
}
setIsSubmitting(true)
try {
await createBooking(plan.id, selectedDate, bookingType === "SITTER" ? sitterName : "Owner", bookingType)
await createBooking(plan.id, selectedDate, bookingType === "SITTER" ? sitterName : "Owner", bookingType, lang)
// Save name to localStorage if it's a sitter booking
if (bookingType === "SITTER") {
localStorage.setItem("sitter_name", sitterName)
}
toast.success("Spot booked!")
toast.success(dict.bookedSuccess)
setIsDialogOpen(false)
// We keep the sitterName in state for the next booking
} catch (error) {
toast.error("Failed to book spot. Maybe it was just taken?")
toast.error(dict.bookError)
} finally {
setIsSubmitting(false)
}
}
const handleCancel = async (bookingId: number) => {
// Optimistic UI could stay here, but relying on revalidatePath is safer for simple apps
if (!confirm("Are you sure you want to remove this entry?")) return
if (!confirm(dict.cancelConfirm)) return
try {
await deleteBooking(bookingId, plan.id)
toast.success("Entry removed")
await deleteBooking(bookingId, plan.id, lang)
toast.success(dict.cancelSuccess)
} catch {
toast.error("Failed to remove entry")
toast.error(dict.cancelError)
}
}
@@ -99,18 +107,18 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
<div className="space-y-4">
<div className="flex justify-between items-center bg-muted/50 p-4 rounded-lg">
<div className="flex items-center gap-2">
<h2 className="text-lg font-semibold">Overview</h2>
<h2 className="text-lg font-semibold">{dict.overview}</h2>
{plan.instructions && (
<Dialog>
<DialogTrigger asChild>
<Button variant="ghost" size="sm" className="gap-2">
<Info className="w-4 h-4" />
Instructions
{dict.instructions}
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Cat Care Instructions</DialogTitle>
<DialogTitle>{dict.instructionsTitle}</DialogTitle>
</DialogHeader>
<div className="whitespace-pre-wrap">{plan.instructions}</div>
</DialogContent>
@@ -121,7 +129,7 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
<Button variant="outline" size="sm" asChild>
<a href={`/api/plan/${plan.id}/ics`} target="_blank" rel="noopener noreferrer">
<CalendarIcon className="w-4 h-4 mr-2" />
Export
{dict.export}
</a>
</Button>
<PlanSettings
@@ -129,6 +137,8 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
initialWebhookUrl={plan.webhookUrl}
initialInstructions={plan.instructions}
initialNotifyAll={plan.notifyAll}
dict={settingsDict}
lang={lang}
/>
</div>
</div>
@@ -151,7 +161,7 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
<div className="flex justify-between items-start mb-2">
<div className="font-semibold flex items-center gap-2">
<CalendarIcon className="w-4 h-4 opacity-70" />
{format(day, "EEEE, MMMM do")}
{format(day, "PPPP", { locale: dateLocale })}
</div>
{booking && (
<Button
@@ -171,7 +181,7 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
{isOwnerHome ? (
<>
<Home className="w-5 h-5 text-blue-500" />
<span className="font-medium text-blue-700 dark:text-blue-300">Owner Home</span>
<span className="font-medium text-blue-700 dark:text-blue-300">{dict.ownerHome}</span>
</>
) : (
<>
@@ -187,13 +197,13 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
else setSelectedDate(null)
}}>
<DialogTrigger asChild>
<Button variant="outline" className="w-full dashed border-2">I'll do it!</Button>
<Button variant="outline" className="w-full dashed border-2">{dict.illDoIt}</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Book {format(day, "MMMM do")}</DialogTitle>
<DialogTitle>{dict.bookTitle.replace("{date}", format(day, "PPP", { locale: dateLocale }))}</DialogTitle>
<DialogDescription>
Who is taking care of the cats?
{dict.bookDesc}
</DialogDescription>
</DialogHeader>
@@ -201,22 +211,22 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
<RadioGroup value={bookingType} onValueChange={(v: any) => setBookingType(v)} className="flex gap-4">
<div className="flex items-center space-x-2">
<RadioGroupItem value="SITTER" id="r1" />
<Label htmlFor="r1">I am Sitting</Label>
<Label htmlFor="r1">{dict.imSitting}</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="OWNER_HOME" id="r2" />
<Label htmlFor="r2">Owner is Home</Label>
<Label htmlFor="r2">{dict.ownerIsHome}</Label>
</div>
</RadioGroup>
{bookingType === "SITTER" && (
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Label htmlFor="name">{dict.nameLabel}</Label>
<Input
id="name"
value={sitterName}
onChange={(e) => setSitterName(e.target.value)}
placeholder="Your Name"
placeholder={dict.namePlaceholder}
autoFocus
/>
</div>
@@ -225,7 +235,7 @@ export function PlanDashboard({ plan }: { plan: Plan }) {
<DialogFooter>
<Button onClick={handleBook} disabled={isSubmitting}>
{isSubmitting ? "Saving..." : "Confirm Booking"}
{isSubmitting ? dict.saving : dict.confirmBooking}
</Button>
</DialogFooter>
</DialogContent>

22
app/dashboard/[planId]/page.tsx → app/[lang]/dashboard/[planId]/page.tsx
View File

@@ -2,11 +2,17 @@ import { notFound } from "next/navigation"
import { cookies } from "next/headers"
import prisma from "@/lib/prisma"
import { PlanLoginForm } from "@/components/plan-login-form"
import { Toaster } from "@/components/ui/sonner"
import { PlanDashboard } from "./_components/plan-dashboard"
import { getDictionary } from "@/get-dictionary"
export default async function DashboardPage({
params
}: {
params: Promise<{ planId: string, lang: string }>
}) {
const { planId, lang } = await params
const dict = await getDictionary(lang as any)
export default async function DashboardPage({ params }: { params: Promise<{ planId: string }> }) {
const { planId } = await params
const plan = await prisma.plan.findUnique({
where: { id: planId },
include: { bookings: true },
@@ -22,7 +28,7 @@ export default async function DashboardPage({ params }: { params: Promise<{ plan
if (!isAuthenticated) {
return (
<main className="flex min-h-screen flex-col items-center p-4">
<PlanLoginForm planId={plan.id} />
<PlanLoginForm planId={plan.id} dict={dict.login} />
</main>
)
}
@@ -32,18 +38,18 @@ export default async function DashboardPage({ params }: { params: Promise<{ plan
<div className="w-full max-w-4xl space-y-6">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>
<h1 className="text-2xl font-bold">Cat Sitting Plan</h1>
<h1 className="text-2xl font-bold">{dict.home.title}</h1>
<p className="text-muted-foreground text-sm">
{plan.startDate.toLocaleDateString()} - {plan.endDate.toLocaleDateString()}
{plan.startDate.toLocaleDateString(lang)} - {plan.endDate.toLocaleDateString(lang)}
</p>
</div>
<div className="text-sm bg-muted px-3 py-1 rounded-md">
Group ID: <span className="font-mono font-bold">{plan.id}</span>
Plan ID: <span className="font-mono font-bold">{plan.id}</span>
</div>
</div>
<div className="p-4 border rounded-lg bg-card text-card-foreground shadow-sm">
<PlanDashboard plan={plan} />
<PlanDashboard plan={plan} dict={dict.dashboard} settingsDict={dict.settings} lang={lang} />
</div>
</div>
</main>

51
app/[lang]/layout.tsx Normal file
View File

@@ -0,0 +1,51 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "../globals.css";
import { Toaster } from "@/components/ui/sonner";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
import { getDictionary } from "@/get-dictionary";
export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
const { lang } = await params;
const dict = await getDictionary(lang as any);
return {
title: dict.home.title,
description: dict.home.description,
};
}
export async function generateStaticParams() {
return [{ lang: "en" }, { lang: "de" }];
}
export default async function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ lang: string }>;
}) {
const { lang } = await params;
return (
<html lang={lang}>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<Toaster />
</body>
</html>
);
}

21
app/page.tsx → app/[lang]/page.tsx
View File

@@ -1,8 +1,16 @@
import Image from "next/image";
import { CreatePlanForm } from "@/components/create-plan-form";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { getDictionary } from "@/get-dictionary";
export default async function Home({
params,
}: {
params: Promise<{ lang: string }>;
}) {
const { lang } = await params;
const dict = await getDictionary(lang as any);
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-4 bg-muted/20">
<div className="w-full max-w-md space-y-4">
@@ -19,22 +27,21 @@ export default function Home() {
</div>
</div>
<div className="space-y-2">
<h1 className="text-3xl font-bold tracking-tighter">Cat Sitting Planner</h1>
<p className="text-muted-foreground">Coordinate care for your furry friends while you're away.</p>
<h1 className="text-3xl font-bold tracking-tighter">{dict.home.title}</h1>
<p className="text-muted-foreground">{dict.home.description}</p>
</div>
</div>
<Card>
<CardHeader>
<CardTitle>Create a New Plan</CardTitle>
<CardDescription>Select your travel dates and set a group password.</CardDescription>
<CardTitle>{dict.home.createPlan}</CardTitle>
<CardDescription>{dict.home.createPlanDesc}</CardDescription>
</CardHeader>
<CardContent>
<CreatePlanForm />
<CreatePlanForm dict={dict.createPlanForm} lang={lang} />
</CardContent>
</Card>
</div>
</main>
);
}

33
app/actions/booking.ts
View File

@@ -4,8 +4,11 @@ import prisma from "@/lib/prisma"
import { revalidatePath } from "next/cache"
import { headers } from "next/headers"
import { sendNotification } from "@/lib/notifications"
import { getDictionary } from "@/get-dictionary"
export async function createBooking(planId: string, date: Date, name: string, type: "SITTER" | "OWNER_HOME" = "SITTER", lang: string = "en") {
const dict = await getDictionary(lang as any)
export async function createBooking(planId: string, date: Date, name: string, type: "SITTER" | "OWNER_HOME" = "SITTER") {
// Simple check to ensure no double booking on server side
const existing = await prisma.booking.findFirst({
where: {
@@ -34,19 +37,22 @@ export async function createBooking(planId: string, date: Date, name: string, ty
if (plan?.webhookUrl && plan.notifyAll) {
const host = (await headers()).get("host")
const protocol = host?.includes("localhost") ? "http" : "https"
const planUrl = `${protocol}://${host}/dashboard/${planId}`
const planUrl = `${protocol}://${host}/${lang}/dashboard/${planId}`
const dateStr = date.toLocaleDateString()
const dateStr = date.toLocaleDateString(lang)
const message = type === "OWNER_HOME"
? `🏠 OWNER HOME: Marked for ${dateStr}.\nPlan: ${planUrl}`
: `✅ NEW BOOKING: ${name} is sitting on ${dateStr}.\nPlan: ${planUrl}`
? dict.notifications.ownerHome.replace("{date}", dateStr).replace("{url}", planUrl)
: dict.notifications.newBooking.replace("{name}", name).replace("{date}", dateStr).replace("{url}", planUrl)
await sendNotification(plan.webhookUrl, message)
}
revalidatePath(`/dashboard/${planId}`)
revalidatePath(`/${lang}/dashboard/${planId}`)
}
export async function deleteBooking(bookingId: number, planId: string) {
export async function deleteBooking(bookingId: number, planId: string, lang: string = "en") {
const dict = await getDictionary(lang as any)
const booking = await prisma.booking.findUnique({
where: { id: bookingId },
include: { plan: true }
@@ -61,11 +67,16 @@ export async function deleteBooking(bookingId: number, planId: string) {
if (booking.plan.webhookUrl) {
const host = (await headers()).get("host")
const protocol = host?.includes("localhost") ? "http" : "https"
const planUrl = `${protocol}://${host}/dashboard/${planId}`
const planUrl = `${protocol}://${host}/${lang}/dashboard/${planId}`
const dateStr = booking.date.toLocaleDateString()
await sendNotification(booking.plan.webhookUrl, `🚨 CANCELLATION: ${booking.sitterName} removed their booking for ${dateStr}.\nPlan: ${planUrl}`)
const dateStr = booking.date.toLocaleDateString(lang)
const message = dict.notifications.cancellation
.replace("{name}", booking.sitterName || "Someone")
.replace("{date}", dateStr)
.replace("{url}", planUrl)
await sendNotification(booking.plan.webhookUrl, message)
}
revalidatePath(`/dashboard/${planId}`)
revalidatePath(`/${lang}/dashboard/${planId}`)
}

19
app/actions/plan.ts
View File

@@ -4,8 +4,15 @@ import prisma from "@/lib/prisma"
import { revalidatePath } from "next/cache"
import { headers } from "next/headers"
import { sendNotification } from "@/lib/notifications"
import { getDictionary } from "@/get-dictionary"
export async function updatePlan(
planId: string,
data: { instructions?: string; webhookUrl?: string; notifyAll?: boolean },
lang: string = "en"
) {
const dict = await getDictionary(lang as any)
export async function updatePlan(planId: string, data: { instructions?: string; webhookUrl?: string; notifyAll?: boolean }) {
const plan = await prisma.plan.update({
where: { id: planId },
data: {
@@ -18,9 +25,13 @@ export async function updatePlan(planId: string, data: { instructions?: string;
if (data.instructions && plan.webhookUrl && plan.notifyAll) {
const host = (await headers()).get("host")
const protocol = host?.includes("localhost") ? "http" : "https"
const planUrl = `${protocol}://${host}/dashboard/${planId}`
await sendNotification(plan.webhookUrl, `📝 UPDATED: Cat instructions have been modified.\nPlan: ${planUrl}`)
const planUrl = `${protocol}://${host}/${lang}/dashboard/${planId}`
await sendNotification(
plan.webhookUrl,
dict.notifications.instructionsUpdated.replace("{url}", planUrl)
)
}
revalidatePath(`/dashboard/${planId}`)
revalidatePath(`/${lang}/dashboard/${planId}`)
}

36
app/layout.tsx
View File

@@ -1,36 +0,0 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/sonner";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Cat Sitting Planner",
description: "Simple and collaborative cat sitting coordination for your neighborhood.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<Toaster />
</body>
</html>
);
}