+
+ );
+}
diff --git a/src/components/common/avatar.tsx b/src/components/common/avatar.tsx
new file mode 100644
index 0000000..c98512d
--- /dev/null
+++ b/src/components/common/avatar.tsx
@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+
+interface AvatarProps {
+ firstName: string;
+ lastName: string;
+ color: string;
+ size?: "sm" | "md" | "lg";
+ className?: string;
+}
+
+const sizes = {
+ sm: "h-8 w-8 text-xs",
+ md: "h-10 w-10 text-sm",
+ lg: "h-16 w-16 text-xl",
+};
+
+export function Avatar({
+ firstName,
+ lastName,
+ color,
+ size = "md",
+ className,
+}: AvatarProps) {
+ const initials =
+ `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase() || "?";
+
+ return (
+
+
+
+
+
+
+
+
+ {filtered.length} Eintraege
+
+
+
+
+
+
+
+
+ | User | +Route | +Zeit | +Typ | +Plaetze | +Erstellt | +Aktionen | +
|---|---|---|---|---|---|---|
| + {p ? `${p.first_name} ${p.last_name}` : "–"} + | +
+
+
+ {listing.origin_city}
+
+ |
+ + {formatDateTime(listing.departure_at)} + | +
+ |
+ {listing.seats} | ++ {formatDateTime(listing.created_at)} + | +
+
+
+
+
+ |
+
| + Keine Eintraege gefunden. + | +
+ {initials}
+
+ );
+}
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
new file mode 100644
index 0000000..3f6c5d8
--- /dev/null
+++ b/src/components/layout/app-shell.tsx
@@ -0,0 +1,29 @@
+import { useNavigate } from "react-router";
+import { Plus } from "lucide-react";
+import { Header } from "./header";
+import { ROUTES } from "@/lib/constants";
+
+interface AppShellProps {
+ children: React.ReactNode;
+ showFab?: boolean;
+}
+
+export function AppShell({ children, showFab = false }: AppShellProps) {
+ const navigate = useNavigate();
+
+ return (
+
+ {children}
+ {showFab && (
+
+ )}
+
+ );
+}
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
new file mode 100644
index 0000000..b8281d0
--- /dev/null
+++ b/src/components/layout/header.tsx
@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router";
+import { Settings } from "lucide-react";
+import { Avatar } from "@/components/common/avatar";
+import { useAuthContext } from "@/hooks/use-auth-context";
+import { ROUTES } from "@/lib/constants";
+
+export function Header() {
+ const { profile } = useAuthContext();
+ const navigate = useNavigate();
+
+ return (
+
+ 
navigate(ROUTES.HOME)}
+ />
+
+ navigate(ROUTES.HOME)}
+ />
+
+
+ {profile && (
+
+ )}
+
+
+
+
+
+
+ {profile?.show_phone && (
+
+
+ {profile?.first_name ?? "Unbekannt"}
+
+
+ {listing.type === "angebot" ? "Angebot" : "Anfrage"}
+
+
+
+
+ {listing.origin_label}
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+ {profile?.show_phone && !isOwner && (
+
+
+
+ {listing.notes && (
+
+
+ )}
+
+ {canEdit && (
+
+ );
+}
diff --git a/src/components/listing/listing-form.tsx b/src/components/listing/listing-form.tsx
new file mode 100644
index 0000000..fef18e7
--- /dev/null
+++ b/src/components/listing/listing-form.tsx
@@ -0,0 +1,197 @@
+import { useState } from "react";
+import { Car, Hand, Minus, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { AutocompleteInput } from "@/components/location/autocomplete-input";
+import { GpsButton } from "@/components/location/gps-button";
+import type { GeocodingResult } from "@/hooks/use-geocoding";
+import type { ListingType } from "@/types";
+
+export interface ListingFormData {
+ type: ListingType;
+ origin: GeocodingResult;
+ destination: GeocodingResult;
+ departureAt: string;
+ seats: number;
+ notes: string;
+}
+
+interface ListingFormProps {
+ initialData?: Partial
+
+ {listing.type === "angebot" ? "Angebot" : "Anfrage"}
+
+
+
+ {profile && (
+
+ {listing.origin_label}
+
+
+
+ + {profile.first_name} {profile.last_name} +
++ Mitglied seit{" "} + {new Date(profile.created_at).toLocaleDateString("de-DE", { + month: "long", + year: "numeric", + })} +
+
+
+
+
+ )}
+
+
+
+
+
+
+ {listing.type === "angebot" ? (
+
+ {listing.notes}
+
+
+
+
+ )}
+