diff --git a/packages/reservation-platform/src/app/globals.css b/packages/reservation-platform/src/app/globals.css index da52d48..1e99d8f 100644 --- a/packages/reservation-platform/src/app/globals.css +++ b/packages/reservation-platform/src/app/globals.css @@ -2,76 +2,60 @@ @tailwind components; @tailwind utilities; + @layer base { :root { --background: 0 0% 100%; - --foreground: 0 0% 3.9%; - + --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; - + --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; - - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; - - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - - --muted: 0 0% 90.1%; - --muted-foreground: 0 0% 45.1%; - - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; - + --popover-foreground: 222.2 84% 4.9%; + --primary: 221.2 83.2% 53.3%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; - - --radius: 0.5rem; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 221.2 83.2% 53.3%; + --radius: 0.75rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; } .dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; - + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 224.3 76.3% 48%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; } } - -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - } -} \ No newline at end of file diff --git a/packages/reservation-platform/src/app/layout.tsx b/packages/reservation-platform/src/app/layout.tsx index 1593c7d..06d5c38 100644 --- a/packages/reservation-platform/src/app/layout.tsx +++ b/packages/reservation-platform/src/app/layout.tsx @@ -24,7 +24,7 @@ export default function RootLayout(props: RootLayoutProps) { return ( - +
{children} diff --git a/packages/reservation-platform/src/app/page.tsx b/packages/reservation-platform/src/app/page.tsx index adcd5da..38f3146 100644 --- a/packages/reservation-platform/src/app/page.tsx +++ b/packages/reservation-platform/src/app/page.tsx @@ -1,11 +1,12 @@ import { columns } from "@/app/my/jobs/columns"; import { JobsTable } from "@/app/my/jobs/data-table"; import { DynamicPrinterCards } from "@/components/dynamic-printer-cards"; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { validateRequest } from "@/server/auth"; import { db } from "@/server/db"; import { printJobs } from "@/server/db/schema"; import { desc, eq } from "drizzle-orm"; +import { BoxesIcon, NewspaperIcon } from "lucide-react"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -43,8 +44,10 @@ export default async function HomePage() { {/* NEEDS TO BE FIXED FOR A NEW / EMPTY USER {isLoggedIn && } */} - Druckerbelegung - ({printers.length} Verfügbar) + + + Druckerbelegung + @@ -53,8 +56,10 @@ export default async function HomePage() { {userIsLoggedIn && ( - Druckaufträge - Deine aktuellen Druckaufträge + + + Druckaufträge + diff --git a/packages/reservation-platform/src/app/printer/[printerId]/reserve/form.tsx b/packages/reservation-platform/src/app/printer/[printerId]/reserve/form.tsx index d5f6e29..06d78dc 100644 --- a/packages/reservation-platform/src/app/printer/[printerId]/reserve/form.tsx +++ b/packages/reservation-platform/src/app/printer/[printerId]/reserve/form.tsx @@ -34,7 +34,7 @@ export function PrinterReserveForm(props: PrinterReserveFormProps) { const { userId, printerId, isDialog } = props; const router = useRouter(); const { toast } = useToast(); - const [lock, setLocked] = useState(false); + const [isLocked, setLocked] = useState(false); const form = useForm>({ resolver: zodResolver(formSchema), @@ -46,8 +46,11 @@ export function PrinterReserveForm(props: PrinterReserveFormProps) { }); async function onSubmit(values: z.infer) { - if (!lock) { + if (!isLocked) { setLocked(true); + setTimeout(() => { + setLocked(false); + }, 1000 * 5); } else { toast({ description: "Bitte warte ein wenig, bevor du eine weitere Reservierung tätigst...", diff --git a/packages/reservation-platform/src/components/header/index.tsx b/packages/reservation-platform/src/components/header/index.tsx index 6bdcabd..709fdde 100644 --- a/packages/reservation-platform/src/components/header/index.tsx +++ b/packages/reservation-platform/src/components/header/index.tsx @@ -1,7 +1,7 @@ import { HeaderNavigation } from "@/components/header/navigation"; +import { LoginButton } from "@/components/login-button"; import { LogoutButton } from "@/components/logout-button"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; -import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, @@ -13,7 +13,7 @@ import { } from "@/components/ui/dropdown-menu"; import { validateRequest } from "@/server/auth"; import { UserRole, hasRole } from "@/server/auth/permissions"; -import { ScanFaceIcon, StickerIcon, UserIcon, WrenchIcon } from "lucide-react"; +import { StickerIcon, UserIcon, WrenchIcon } from "lucide-react"; import Link from "next/link"; import { If, Then } from "react-if"; @@ -78,14 +78,7 @@ export async function Header() { )} - {user == null && ( - - )} + {user == null && }
); diff --git a/packages/reservation-platform/src/components/header/navigation.tsx b/packages/reservation-platform/src/components/header/navigation.tsx index 8bd6a2c..30e3bea 100644 --- a/packages/reservation-platform/src/components/header/navigation.tsx +++ b/packages/reservation-platform/src/components/header/navigation.tsx @@ -1,10 +1,12 @@ "use client"; import { cn } from "@/utils/styles"; +import { ContactRoundIcon, LayersIcon } from "lucide-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; interface Site { name: string; + icon: JSX.Element; path: string; } @@ -12,7 +14,8 @@ export function HeaderNavigation() { const pathname = usePathname(); const sites: Site[] = [ { - name: "Mein Dashboard", + name: "Dashboard", + icon: , path: "/", }, /* { @@ -21,6 +24,7 @@ export function HeaderNavigation() { }, */ { name: "Mein Profil", + icon: , path: "/my/profile", }, ]; @@ -31,12 +35,13 @@ export function HeaderNavigation() { - {site.name} + {site.icon} + {site.name} ))} diff --git a/packages/reservation-platform/src/components/login-button.tsx b/packages/reservation-platform/src/components/login-button.tsx new file mode 100644 index 0000000..ce26b36 --- /dev/null +++ b/packages/reservation-platform/src/components/login-button.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { useToast } from "@/components/ui/use-toast"; +import { ScanFaceIcon } from "lucide-react"; +import Link from "next/link"; +import { useState } from "react"; + +export function LoginButton() { + const { toast } = useToast(); + const [isLocked, setLocked] = useState(false); + function onClick() { + if (!isLocked) { + toast({ + description: "Du wirst angemeldet...", + }); + + // Prevent multiple clicks because of login delay... + setLocked(true); + setTimeout(() => { + setLocked(false); + }, 1000 * 5); + } + toast({ + description: "Bitte warte einen Moment...", + }); + } + + return ( + + ); +} diff --git a/packages/reservation-platform/src/components/logout-button.tsx b/packages/reservation-platform/src/components/logout-button.tsx index ffcfaaf..c23afa8 100644 --- a/packages/reservation-platform/src/components/logout-button.tsx +++ b/packages/reservation-platform/src/components/logout-button.tsx @@ -1,12 +1,21 @@ "use client"; +import { useToast } from "@/components/ui/use-toast"; import { logout } from "@/server/actions/authentication/logout"; import { LogOutIcon } from "lucide-react"; import Link from "next/link"; export function LogoutButton() { + const { toast } = useToast(); + function onClick() { + toast({ + description: "Du wirst nun abgemeldet...", + }); + logout(); + } + return ( - logout()} className="flex items-center gap-2"> + Abmelden diff --git a/packages/reservation-platform/src/components/printer-card/index.tsx b/packages/reservation-platform/src/components/printer-card/index.tsx index 2477bf4..c275baf 100644 --- a/packages/reservation-platform/src/components/printer-card/index.tsx +++ b/packages/reservation-platform/src/components/printer-card/index.tsx @@ -33,23 +33,25 @@ export function PrinterCard(props: PrinterCardProps) { "opacity-50 select-none cursor-not-allowed": status === PrinterStatus.OUT_OF_ORDER, })} > - -
- {printer.name} - {printer.description} + +
+
+ {printer.name} + {printer.description} +
+ + {status === PrinterStatus.RESERVED && } + + {translatePrinterStatus(status)} + +
- - {status === PrinterStatus.RESERVED && } - - {translatePrinterStatus(status)} - -