From 772db1b362953f014af5260fa0d6f938d7686072 Mon Sep 17 00:00:00 2001
From: AlexanderWangY <alexander.yisu.wang@outlook.com>
Date: Sat, 3 Jan 2026 15:00:09 -0600
Subject: [PATCH] feat: app closed ui

---
 .../events/$eventId/application.tsx           | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/routes/_protected/events/$eventId/application.tsx b/apps/web/src/routes/_protected/events/$eventId/application.tsx
index 155b4c7d..259049e5 100644
--- a/apps/web/src/routes/_protected/events/$eventId/application.tsx
+++ b/apps/web/src/routes/_protected/events/$eventId/application.tsx
@@ -1,8 +1,10 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
 import { ErrorBoundary } from "react-error-boundary";
 import { ApplicationForm } from "@/features/Application/components/ApplicationForm";
 import TablerAlertCircle from "~icons/tabler/alert-circle";
 import { useEffect } from "react";
+import { useEvent } from "@/features/Event/hooks/useEvent";
+import { Button } from "@/components/ui/Button";
 
 export const Route = createFileRoute("/_protected/events/$eventId/application")(
   {
@@ -11,7 +13,9 @@ export const Route = createFileRoute("/_protected/events/$eventId/application")(
 );
 
 function RouteComponent() {
+  const router = useRouter();
   const { eventId } = Route.useParams();
+  const event = useEvent(eventId);
 
   // Show a confirmation dialog when the user closes the tab
   useEffect(() => {
@@ -26,6 +30,38 @@ function RouteComponent() {
     };
   }, []);
 
+  if (event.isLoading) {
+    return null;
+  }
+
+  if (event.isError || event.error || !event.data) {
+    return (
+      <div className="w-full h-full bg-surface flex justify-center items-center gap-2 text-red-400">
+        <TablerAlertCircle />
+        <p>Something went wrong while loading event info :(</p>
+      </div>
+    );
+  }
+
+  if (new Date() > event.data.application_close) {
+    return (
+      <div className="max-w-xs mx-auto h-full flex flex-col justify-center items-center gap-8 text-text-secondary">
+        <div className="flex flex-row items-center justify-center gap-2">
+          <TablerAlertCircle />
+          <p>Applications have closed for this event...</p>
+        </div>
+
+        <Button
+          variant="secondary"
+          className="w-full"
+          onPress={() => router.navigate({ to: "/portal" })}
+        >
+          Go Back
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <ErrorBoundary FallbackComponent={Fallback}>
       <div className="w-full h-screen bg-white dark:bg-background">