PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Booking Panel auf Dashboard

Browse Source
This commit is contained in:
PxlLoewe
2025-09-27 22:25:31 +02:00
parent cf199150fe
commit ebeb2cf93a
6 changed files with 110 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/hub/app/(app)/_components/Badges.tsx
View File

@@ -8,11 +8,10 @@ export const Badges: () => Promise<JSX.Element> = async () => {
if (!session) return <div />;
return (
<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
<div className="card-body">
<h2 className="card-title justify-between">
<span className="card-title">
<Award className="w-4 h-4" /> Verdiente Abzeichen
<Award className="h-4 w-4" /> Verdiente Abzeichen
</span>
</h2>
<div className="flex flex-wrap gap-2">
@@ -27,6 +26,5 @@ export const Badges: () => Promise<JSX.Element> = async () => {
})}
</div>
</div>
</div>
);
};

67
apps/hub/app/(app)/_components/Bookings.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Calendar } from "lucide-react";
import { getServerSession } from "../../api/auth/[...nextauth]/auth";
import { Badge } from "@repo/shared-components";
import { JSX } from "react";
import { getPublicUser, prisma } from "@repo/db";
import { formatTimeRange } from "../../../helper/timerange";
export const Bookings: () => Promise<JSX.Element> = async () => {
const session = await getServerSession();
const futureBookings = await prisma.booking.findMany({
where: {
userId: session?.user.id,
startTime: {
gte: new Date(),
},
},
orderBy: {
startTime: "asc",
},
include: {
User: true,
Station: true,
},
});
if (!session) return <div />;
return (
<div className="card-body">
<h2 className="card-title justify-between">
<span className="card-title">
<Calendar className="h-4 w-4" /> Zukünftige Buchungen
</span>
</h2>
<div className="flex flex-wrap gap-2">
{futureBookings.length === 0 && (
<span className="text-sm text-gray-500">
Keine zukünftigen Buchungen. Du kannst dir welche im Buchungssystem erstellen.
</span>
)}
{futureBookings.map((booking) => {
return (
<div
key={booking.id}
className={`alert alert-horizontal ${booking.type.startsWith("LST_") ? "alert-success" : "alert-info"} alert-soft px-3 py-2`}
>
<div className="flex items-center gap-3">
<span className="badge badge-outline text-xs">
{booking.type.startsWith("LST_")
? "LST"
: booking.Station?.bosCallsignShort || booking.Station?.bosCallsign}
</span>
<span className="text-sm font-medium">{getPublicUser(booking.User).fullName}</span>
</div>
<div className="flex items-center gap-2">
<div className="text-right">
<p className="text-xs font-medium">
{formatTimeRange(booking, { includeDate: true })}
</p>
</div>
</div>
</div>
);
})}
</div>
</div>
);
};

8
apps/hub/app/(app)/page.tsx
View File

@@ -2,6 +2,7 @@ import Events from "./_components/FeaturedEvents";
import { Stats } from "./_components/Stats";
import { Badges } from "./_components/Badges";
import { RecentFlights } from "(app)/_components/RecentFlights";
import { Bookings } from "(app)/_components/Bookings";
export default async function Home({
searchParams,
@@ -14,11 +15,16 @@ export default async function Home({
<div>
<Stats stats={view} />
<div className="grid grid-cols-6 gap-4">
<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
<RecentFlights />
</div>
<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
<Badges />
</div>
<div className="card bg-base-200 col-span-6 mb-4 shadow-xl xl:col-span-3">
<Bookings />
</div>
</div>
<Events />
</div>
);

13
apps/hub/app/_components/BookingTimelineModal.tsx
View File

@@ -2,10 +2,11 @@
import { useState } from "react";
import { CalendarIcon, Plus, X, ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
import { Booking, getPublicUser, PublicUser, Station, User } from "@repo/db";
import { Booking, PublicUser, Station, User } from "@repo/db";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { deleteBookingAPI, getBookingsAPI } from "(app)/_querys/bookings";
import { Button } from "@repo/shared-components";
import { formatTimeRange } from "../../helper/timerange";
interface BookingTimelineModalProps {
isOpen: boolean;
@@ -227,18 +228,10 @@ export const BookingTimelineModal = ({
return sortedGroups;
};
const formatTimeRange = (booking: Booking) => {
const start = new Date(booking.startTime);
const end = new Date(booking.endTime);
return `${start.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })} - ${end.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })}`;
};
if (!isOpen) return null;
const groupedBookings = groupBookingsByResource();
console.log("Grouped Bookings:", groupedBookings);
return (
<div className="modal modal-open">
<div className="modal-box flex max-h-[83vh] w-11/12 max-w-7xl flex-col">
@@ -298,7 +291,7 @@ export const BookingTimelineModal = ({
<div className="flex items-center gap-3">
<span className="badge badge-outline text-xs">
{booking.type.startsWith("LST_")
? ""
? "LST"
: booking.Station.bosCallsignShort || booking.Station.bosCallsign}
</span>
<span className="text-sm font-medium">{booking.User.fullName}</span>

15
apps/hub/app/_components/NewBookingModal.tsx
View File

@@ -7,6 +7,8 @@ import toast from "react-hot-toast";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getStationsAPI } from "(app)/_querys/stations";
import { createBookingAPI } from "(app)/_querys/bookings";
import { Button } from "@repo/shared-components";
import { useRouter } from "next/navigation";
interface Station {
id: number;
@@ -39,14 +41,12 @@ export const NewBookingModal = ({
onBookingCreated,
userPermissions,
}: NewBookingModalProps) => {
const [submitting, setSubmitting] = useState(false);
const queryClient = useQueryClient();
const { data: stations, isLoading: isLoadingStations } = useQuery({
queryKey: ["stations"],
queryFn: () => getStationsAPI({}),
});
const router = useRouter();
const { mutate: createBooking, isPending: isCreateBookingLoading } = useMutation({
mutationKey: ["createBooking"],
mutationFn: createBookingAPI,
@@ -91,7 +91,6 @@ export const NewBookingModal = ({
}, [isOpen, reset, setValue]);
const onSubmit = async (data: NewBookingFormData) => {
setSubmitting(true);
try {
// Validate that end time is after start time
if (new Date(data.endTime) <= new Date(data.startTime)) {
@@ -106,11 +105,10 @@ export const NewBookingModal = ({
toast.success("Buchung erfolgreich erstellt!");
onBookingCreated();
onClose();
router.refresh();
} catch (error) {
console.error("Error creating booking:", error);
toast.error("Fehler beim Erstellen der Buchung");
} finally {
setSubmitting(false);
}
};
@@ -231,10 +229,9 @@ export const NewBookingModal = ({
{/* Actions */}
<div className="modal-action">
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting && <span className="loading loading-spinner loading-sm"></span>}
<Button type="submit" className="btn btn-primary" isLoading={isCreateBookingLoading}>
Buchung erstellen
</button>
</Button>
<button type="button" className="btn" onClick={onClose}>
Abbrechen
</button>

11
apps/hub/helper/timerange.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Booking } from "@repo/db";
export const formatTimeRange = (booking: Booking, options?: { includeDate?: boolean }) => {
const start = new Date(booking.startTime);
const end = new Date(booking.endTime);
const timeRange = `${start.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })} - ${end.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })}`;
if (options?.includeDate) {
return `${start.toLocaleDateString("de-DE")} ${timeRange}`;
}
return timeRange;
};