Add missing features: Login, Middleware, Tags Management, Edit Listing
This commit is contained in:
AI
parent
8a0a28443b
commit
bd68daec83
349
src/app/(protected)/admin/listings/[slug]/page.tsx
Normal file
349
src/app/(protected)/admin/listings/[slug]/page.tsx
Normal file
@ -0,0 +1,349 @@
|
|||||||
|
import { prisma } from "@/lib/prisma";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { updateListing, deleteListing, addNote, addTagToListing, removeTagFromListing } from "../actions";
|
||||||
|
|
||||||
|
export default async function EditListingPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: { slug: string };
|
||||||
|
}) {
|
||||||
|
const listing = await prisma.listing.findUnique({
|
||||||
|
where: { slug: params.slug },
|
||||||
|
include: {
|
||||||
|
tags: {
|
||||||
|
include: { tag: true },
|
||||||
|
},
|
||||||
|
notes: {
|
||||||
|
orderBy: { createdAt: "desc" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!listing) {
|
||||||
|
redirect("/listings");
|
||||||
|
}
|
||||||
|
|
||||||
|
const allTags = await prisma.tag.findMany({
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const listingTagIds = listing.tags.map((t) => t.tagId);
|
||||||
|
const availableTags = allTags.filter((t) => !listingTagIds.includes(t.id));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 p-8">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="flex justify-between items-center mb-8">
|
||||||
|
<h1 className="text-3xl font-bold">✏️ Listing bearbeiten</h1>
|
||||||
|
<a
|
||||||
|
href={`/listings/${listing.slug}`}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
← Zurück zur Detailseite
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Main Form */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Grunddaten</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form action={updateListing} className="space-y-4">
|
||||||
|
<input type="hidden" name="id" value={listing.id} />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="title">Titel</Label>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
name="title"
|
||||||
|
defaultValue={listing.title}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="locationText">Ort</Label>
|
||||||
|
<Input
|
||||||
|
id="locationText"
|
||||||
|
name="locationText"
|
||||||
|
defaultValue={listing.locationText || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="nightlyPrice">Preis pro Nacht (€)</Label>
|
||||||
|
<Input
|
||||||
|
id="nightlyPrice"
|
||||||
|
name="nightlyPrice"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
defaultValue={listing.nightlyPrice || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="rating">Bewertung</Label>
|
||||||
|
<Input
|
||||||
|
id="rating"
|
||||||
|
name="rating"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
max="5"
|
||||||
|
defaultValue={listing.rating || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="bedrooms">Schlafzimmer</Label>
|
||||||
|
<Input
|
||||||
|
id="bedrooms"
|
||||||
|
name="bedrooms"
|
||||||
|
type="number"
|
||||||
|
defaultValue={listing.bedrooms || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="beds">Betten</Label>
|
||||||
|
<Input
|
||||||
|
id="beds"
|
||||||
|
name="beds"
|
||||||
|
type="number"
|
||||||
|
defaultValue={listing.beds || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="bathrooms">Badezimmer</Label>
|
||||||
|
<Input
|
||||||
|
id="bathrooms"
|
||||||
|
name="bathrooms"
|
||||||
|
type="number"
|
||||||
|
step="0.5"
|
||||||
|
defaultValue={listing.bathrooms || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="guestCount">Gäste (offiziell)</Label>
|
||||||
|
<Input
|
||||||
|
id="guestCount"
|
||||||
|
name="guestCount"
|
||||||
|
type="number"
|
||||||
|
defaultValue={listing.guestCount || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="maxSleepingPlaces">Max Schlafplätze</Label>
|
||||||
|
<Input
|
||||||
|
id="maxSleepingPlaces"
|
||||||
|
name="maxSleepingPlaces"
|
||||||
|
type="number"
|
||||||
|
defaultValue={listing.maxSleepingPlaces || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="hostName">Host Name</Label>
|
||||||
|
<Input
|
||||||
|
id="hostName"
|
||||||
|
name="hostName"
|
||||||
|
defaultValue={listing.hostName || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="description">Beschreibung</Label>
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
name="description"
|
||||||
|
rows={4}
|
||||||
|
className="w-full p-2 border rounded-md"
|
||||||
|
defaultValue={listing.description || ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="status">Status</Label>
|
||||||
|
<select
|
||||||
|
id="status"
|
||||||
|
name="status"
|
||||||
|
defaultValue={listing.status}
|
||||||
|
className="w-full p-2 border rounded-md"
|
||||||
|
>
|
||||||
|
<option value="NEW">Neu</option>
|
||||||
|
<option value="INTERESTING">Interessant</option>
|
||||||
|
<option value="SHORTLIST">Kurzliste</option>
|
||||||
|
<option value="BOOKED">Gebucht</option>
|
||||||
|
<option value="REJECTED">Abgelehnt</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="isFavorite">Favorit</Label>
|
||||||
|
<select
|
||||||
|
id="isFavorite"
|
||||||
|
name="isFavorite"
|
||||||
|
defaultValue={listing.isFavorite.toString()}
|
||||||
|
className="w-full p-2 border rounded-md"
|
||||||
|
>
|
||||||
|
<option value="false">Nein</option>
|
||||||
|
<option value="true">Ja</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 pt-4">
|
||||||
|
<Button type="submit" className="flex-1">
|
||||||
|
Änderungen speichern
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action={deleteListing} className="mt-4">
|
||||||
|
<input type="hidden" name="id" value={listing.id} />
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="destructive"
|
||||||
|
className="w-full"
|
||||||
|
onClick={(e) => {
|
||||||
|
if (!confirm("Möchten Sie dieses Listing wirklich löschen?")) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
🗑️ Listing löschen
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Tags */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>🏷️ Tags</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{listing.tags.map((lt) => (
|
||||||
|
<div
|
||||||
|
key={lt.tag.id}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 rounded-full text-white text-sm"
|
||||||
|
style={{ backgroundColor: lt.tag.color || "#6366f1" }}
|
||||||
|
>
|
||||||
|
{lt.tag.name}
|
||||||
|
<form action={removeTagFromListing}>
|
||||||
|
<input type="hidden" name="listingId" value={listing.id} />
|
||||||
|
<input type="hidden" name="tagId" value={lt.tag.id} />
|
||||||
|
<button type="submit" className="hover:opacity-70">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{listing.tags.length === 0 && (
|
||||||
|
<p className="text-slate-500 text-sm">Keine Tags</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{availableTags.length > 0 && (
|
||||||
|
<form action={addTagToListing}>
|
||||||
|
<input type="hidden" name="listingId" value={listing.id} />
|
||||||
|
<select
|
||||||
|
name="tagId"
|
||||||
|
className="w-full p-2 border rounded-md text-sm"
|
||||||
|
>
|
||||||
|
<option value="">Tag hinzufügen...</option>
|
||||||
|
{availableTags.map((tag) => (
|
||||||
|
<option key={tag.id} value={tag.id}>
|
||||||
|
{tag.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<Button type="submit" size="sm" className="mt-2 w-full">
|
||||||
|
Tag hinzufügen
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>📝 Notizen</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||||
|
{listing.notes.map((note) => (
|
||||||
|
<div key={note.id} className="p-2 bg-slate-50 rounded text-sm">
|
||||||
|
{note.body}
|
||||||
|
<p className="text-xs text-slate-400 mt-1">
|
||||||
|
{new Date(note.createdAt).toLocaleDateString("de-DE")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{listing.notes.length === 0 && (
|
||||||
|
<p className="text-slate-500 text-sm">Keine Notizen</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action={addNote}>
|
||||||
|
<input type="hidden" name="listingId" value={listing.id} />
|
||||||
|
<textarea
|
||||||
|
name="body"
|
||||||
|
placeholder="Neue Notiz..."
|
||||||
|
rows={2}
|
||||||
|
className="w-full p-2 border rounded-md text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Button type="submit" size="sm" className="mt-2 w-full">
|
||||||
|
Notiz hinzufügen
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>ℹ️ Info</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-sm space-y-2">
|
||||||
|
<p>
|
||||||
|
<span className="text-slate-500">Importiert:</span>{" "}
|
||||||
|
{new Date(listing.importedAt).toLocaleDateString("de-DE")}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="text-slate-500">Airbnb URL:</span>
|
||||||
|
<br />
|
||||||
|
<a
|
||||||
|
href={listing.airbnbUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-600 hover:underline truncate block"
|
||||||
|
>
|
||||||
|
{listing.airbnbUrl}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
117
src/app/(protected)/admin/listings/actions.ts
Normal file
117
src/app/(protected)/admin/listings/actions.ts
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { prisma } from "@/lib/prisma";
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
|
export async function updateListing(formData: FormData) {
|
||||||
|
const id = formData.get("id") as string;
|
||||||
|
const title = formData.get("title") as string;
|
||||||
|
const locationText = formData.get("locationText") as string;
|
||||||
|
const nightlyPrice = parseFloat(formData.get("nightlyPrice") as string) || null;
|
||||||
|
const rating = parseFloat(formData.get("rating") as string) || null;
|
||||||
|
const reviewCount = parseInt(formData.get("reviewCount") as string) || null;
|
||||||
|
const bedrooms = parseInt(formData.get("bedrooms") as string) || null;
|
||||||
|
const beds = parseInt(formData.get("beds") as string) || null;
|
||||||
|
const bathrooms = parseFloat(formData.get("bathrooms") as string) || null;
|
||||||
|
const guestCount = parseInt(formData.get("guestCount") as string) || null;
|
||||||
|
const maxSleepingPlaces = parseInt(formData.get("maxSleepingPlaces") as string) || null;
|
||||||
|
const hostName = formData.get("hostName") as string;
|
||||||
|
const description = formData.get("description") as string;
|
||||||
|
const status = formData.get("status") as string;
|
||||||
|
const isFavorite = formData.get("isFavorite") === "true";
|
||||||
|
|
||||||
|
await prisma.listing.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
title,
|
||||||
|
locationText,
|
||||||
|
nightlyPrice,
|
||||||
|
rating,
|
||||||
|
reviewCount,
|
||||||
|
bedrooms,
|
||||||
|
beds,
|
||||||
|
bathrooms,
|
||||||
|
guestCount,
|
||||||
|
maxSleepingPlaces,
|
||||||
|
hostName,
|
||||||
|
description,
|
||||||
|
status,
|
||||||
|
isFavorite,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath("/listings");
|
||||||
|
revalidatePath(`/listings/${id}`);
|
||||||
|
redirect(`/listings`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteListing(formData: FormData) {
|
||||||
|
const id = formData.get("id") as string;
|
||||||
|
|
||||||
|
await prisma.listing.delete({
|
||||||
|
where: { id },
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath("/listings");
|
||||||
|
redirect("/listings");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function toggleFavorite(formData: FormData) {
|
||||||
|
const id = formData.get("id") as string;
|
||||||
|
const isFavorite = formData.get("isFavorite") === "true";
|
||||||
|
|
||||||
|
await prisma.listing.update({
|
||||||
|
where: { id },
|
||||||
|
data: { isFavorite: !isFavorite },
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath("/listings");
|
||||||
|
revalidatePath(`/listings/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addNote(formData: FormData) {
|
||||||
|
const listingId = formData.get("listingId") as string;
|
||||||
|
const body = formData.get("body") as string;
|
||||||
|
|
||||||
|
if (!body?.trim()) return;
|
||||||
|
|
||||||
|
await prisma.adminNote.create({
|
||||||
|
data: {
|
||||||
|
listingId,
|
||||||
|
body: body.trim(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath(`/listings/${listingId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addTagToListing(formData: FormData) {
|
||||||
|
const listingId = formData.get("listingId") as string;
|
||||||
|
const tagId = formData.get("tagId") as string;
|
||||||
|
|
||||||
|
await prisma.listingTag.create({
|
||||||
|
data: {
|
||||||
|
listingId,
|
||||||
|
tagId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath(`/listings/${listingId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function removeTagFromListing(formData: FormData) {
|
||||||
|
const listingId = formData.get("listingId") as string;
|
||||||
|
const tagId = formData.get("tagId") as string;
|
||||||
|
|
||||||
|
await prisma.listingTag.delete({
|
||||||
|
where: {
|
||||||
|
listingId_tagId: {
|
||||||
|
listingId,
|
||||||
|
tagId,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath(`/listings/${listingId}`);
|
||||||
|
}
|
||||||
33
src/app/(protected)/admin/tags/actions.ts
Normal file
33
src/app/(protected)/admin/tags/actions.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { prisma } from "@/lib/prisma";
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
|
||||||
|
export async function createTag(formData: FormData) {
|
||||||
|
const name = formData.get("name") as string;
|
||||||
|
const color = formData.get("color") as string;
|
||||||
|
|
||||||
|
if (!name) return;
|
||||||
|
|
||||||
|
const slug = name.toLowerCase().replace(/\s+/g, "-");
|
||||||
|
|
||||||
|
await prisma.tag.upsert({
|
||||||
|
where: { slug },
|
||||||
|
update: { color },
|
||||||
|
create: { name, slug, color },
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath("/admin/tags");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteTag(formData: FormData) {
|
||||||
|
const tagId = formData.get("tagId") as string;
|
||||||
|
|
||||||
|
if (!tagId) return;
|
||||||
|
|
||||||
|
await prisma.tag.delete({
|
||||||
|
where: { id: tagId },
|
||||||
|
});
|
||||||
|
|
||||||
|
revalidatePath("/admin/tags");
|
||||||
|
}
|
||||||
119
src/app/(protected)/admin/tags/page.tsx
Normal file
119
src/app/(protected)/admin/tags/page.tsx
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import { prisma } from "@/lib/prisma";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { createTag, deleteTag } from "./actions";
|
||||||
|
|
||||||
|
export default async function TagsPage() {
|
||||||
|
const tags = await prisma.tag.findMany({
|
||||||
|
include: {
|
||||||
|
_count: {
|
||||||
|
select: { listings: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultColors = [
|
||||||
|
"#6366f1", // Indigo
|
||||||
|
"#10b981", // Emerald
|
||||||
|
"#f59e0b", // Amber
|
||||||
|
"#ef4444", // Red
|
||||||
|
"#8b5cf6", // Violet
|
||||||
|
"#ec4899", // Pink
|
||||||
|
"#14b8a6", // Teal
|
||||||
|
"#f97316", // Orange
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 p-8">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<h1 className="text-3xl font-bold mb-8">🏷️ Tags verwalten</h1>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
{/* Create Tag Form */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Neuen Tag erstellen</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form action={createTag} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="name">Name</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
placeholder="z.B. Günstig, Luxus, Favorit"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="color">Farbe</Label>
|
||||||
|
<div className="flex gap-2 mt-2">
|
||||||
|
{defaultColors.map((color) => (
|
||||||
|
<label key={color} className="cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="color"
|
||||||
|
value={color}
|
||||||
|
className="sr-only"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="w-8 h-8 rounded-full border-2 border-transparent hover:border-slate-400 transition"
|
||||||
|
style={{ backgroundColor: color }}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full">
|
||||||
|
Tag erstellen
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Existing Tags */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Alle Tags ({tags.length})</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<div
|
||||||
|
key={tag.id}
|
||||||
|
className="flex items-center justify-between p-3 bg-slate-50 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
className="w-4 h-4 rounded-full"
|
||||||
|
style={{ backgroundColor: tag.color || "#6366f1" }}
|
||||||
|
/>
|
||||||
|
<span className="font-medium">{tag.name}</span>
|
||||||
|
<span className="text-sm text-slate-500">
|
||||||
|
({tag._count.listings} Listings)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<form action={deleteTag}>
|
||||||
|
<input type="hidden" name="tagId" value={tag.id} />
|
||||||
|
<Button variant="destructive" size="sm">
|
||||||
|
Löschen
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{tags.length === 0 && (
|
||||||
|
<p className="text-slate-500 text-center py-4">
|
||||||
|
Noch keine Tags vorhanden
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
89
src/app/(protected)/layout.tsx
Normal file
89
src/app/(protected)/layout.tsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import { auth, signOut } from "@/lib/auth";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
export default async function ProtectedLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const session = await auth();
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
redirect("/login");
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50">
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="bg-white border-b border-slate-200 sticky top-0 z-50">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<Link href="/dashboard" className="text-xl font-bold">
|
||||||
|
🏠 Airbnb Finder
|
||||||
|
</Link>
|
||||||
|
<div className="hidden md:flex items-center gap-4">
|
||||||
|
<Link
|
||||||
|
href="/dashboard"
|
||||||
|
className="text-slate-600 hover:text-slate-900 transition"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/listings"
|
||||||
|
className="text-slate-600 hover:text-slate-900 transition"
|
||||||
|
>
|
||||||
|
Listings
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/compare"
|
||||||
|
className="text-slate-600 hover:text-slate-900 transition"
|
||||||
|
>
|
||||||
|
Vergleich
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/map"
|
||||||
|
className="text-slate-600 hover:text-slate-900 transition"
|
||||||
|
>
|
||||||
|
Karte
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/admin/import"
|
||||||
|
className="text-slate-600 hover:text-slate-900 transition"
|
||||||
|
>
|
||||||
|
Import
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/admin/tags"
|
||||||
|
className="text-slate-600 hover:text-slate-900 transition"
|
||||||
|
>
|
||||||
|
Tags
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="text-sm text-slate-500 hidden sm:block">
|
||||||
|
{session.user?.name || "Admin"}
|
||||||
|
</span>
|
||||||
|
<form
|
||||||
|
action={async () => {
|
||||||
|
"use server";
|
||||||
|
await signOut();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main>{children}</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
3
src/app/api/auth/[...nextauth]/route.ts
Normal file
3
src/app/api/auth/[...nextauth]/route.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { handlers } from "@/lib/auth";
|
||||||
|
|
||||||
|
export const { GET, POST } = handlers;
|
||||||
53
src/app/login/page.tsx
Normal file
53
src/app/login/page.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import { signIn } from "@/lib/auth";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-slate-100">
|
||||||
|
<Card className="w-full max-w-md">
|
||||||
|
<CardHeader className="text-center">
|
||||||
|
<CardTitle className="text-2xl">🏠 Airbnb Finder</CardTitle>
|
||||||
|
<p className="text-slate-500">Admin Login</p>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form
|
||||||
|
action={async (formData) => {
|
||||||
|
"use server";
|
||||||
|
await signIn("credentials", formData);
|
||||||
|
}}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="username">Benutzername</Label>
|
||||||
|
<Input
|
||||||
|
id="username"
|
||||||
|
name="username"
|
||||||
|
type="text"
|
||||||
|
placeholder="admin"
|
||||||
|
required
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="password">Passwort</Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
required
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full">
|
||||||
|
Anmelden
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,65 +1,5 @@
|
|||||||
import Image from "next/image";
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
redirect("/dashboard");
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
|
||||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js logo"
|
|
||||||
width={100}
|
|
||||||
height={20}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
|
||||||
To get started, edit the page.tsx file.
|
|
||||||
</h1>
|
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Templates
|
|
||||||
</a>{" "}
|
|
||||||
or the{" "}
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Learning
|
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Deploy Now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
29
src/middleware.ts
Normal file
29
src/middleware.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
export default auth((req) => {
|
||||||
|
const isLoggedIn = !!req.auth;
|
||||||
|
const isOnLogin = req.nextUrl.pathname.startsWith("/login");
|
||||||
|
const isApiRoute = req.nextUrl.pathname.startsWith("/api");
|
||||||
|
|
||||||
|
// Allow API routes (they handle their own auth)
|
||||||
|
if (isApiRoute) {
|
||||||
|
return NextResponse.next();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to login if not authenticated
|
||||||
|
if (!isLoggedIn && !isOnLogin) {
|
||||||
|
return NextResponse.redirect(new URL("/login", req.nextUrl));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to dashboard if already logged in and on login page
|
||||||
|
if (isLoggedIn && isOnLogin) {
|
||||||
|
return NextResponse.redirect(new URL("/dashboard", req.nextUrl));
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.next();
|
||||||
|
});
|
||||||
|
|
||||||
|
export const config = {
|
||||||
|
matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user