From f5ad55235c589bbaa37991db3bc49b7b72d1a19b Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Sun, 30 Nov 2025 12:29:58 +0700
Subject: [PATCH] feat(backoffice): create a boilerplate page for Hackathon
 dashboard

- Create an empty page for Hackathon dashboard
- Comment out and hide the existing backoffice sidebar
---
 .../(protected)/hackathon-dashboard/page.tsx  | 17 +++++
 .../hackathon-submissions/page.tsx            | 17 +++++
 .../app/(protected)/hackathon-teams/page.tsx  | 17 +++++
 .../app/(protected)/hackathon-users/page.tsx  | 17 +++++
 apps/backoffice/src/middleware.ts             |  2 +-
 .../backoffice-sidebar/backoffice-sidebar.tsx | 63 +++++++++++++------
 6 files changed, 114 insertions(+), 19 deletions(-)
 create mode 100644 apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
 create mode 100644 apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
 create mode 100644 apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
 create mode 100644 apps/backoffice/src/app/(protected)/hackathon-users/page.tsx

diff --git a/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
new file mode 100644
index 0000000..61bb59b
--- /dev/null
+++ b/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactElement } from 'react';
+
+export const HackathonDashboardPage: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-12 py-10 flex flex-col gap-8">
+      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+        <h1 className="text-p2 font-semibold">Hackathon Dashboard</h1>
+      </header>
+
+      <section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
+        <p className="text-label1 text-neutral-600">Boilerplate page for hackathon dashboard. Add KPIs and actions here.</p>
+      </section>
+    </main>
+  );
+};
+
+export default HackathonDashboardPage;
diff --git a/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
new file mode 100644
index 0000000..0951dce
--- /dev/null
+++ b/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactElement } from 'react';
+
+export const HackathonSubmissionsPage: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-12 py-10 flex flex-col gap-8">
+      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+        <h1 className="text-p2 font-semibold">Hackathon Submissions</h1>
+      </header>
+
+      <section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
+        <p className="text-label1 text-neutral-600">Boilerplate page for managing submissions. Add table, filters, and review workspace here.</p>
+      </section>
+    </main>
+  );
+};
+
+export default HackathonSubmissionsPage;
diff --git a/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
new file mode 100644
index 0000000..59d9cc7
--- /dev/null
+++ b/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactElement } from 'react';
+
+export const HackathonTeamsPage: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-12 py-10 flex flex-col gap-8">
+      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+        <h1 className="text-p2 font-semibold">Hackathon Teams</h1>
+      </header>
+
+      <section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
+        <p className="text-label1 text-neutral-600">Boilerplate page for managing teams. Add table, filters, and forms here.</p>
+      </section>
+    </main>
+  );
+};
+
+export default HackathonTeamsPage;
diff --git a/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
new file mode 100644
index 0000000..9707728
--- /dev/null
+++ b/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
@@ -0,0 +1,17 @@
+import { FC, ReactElement } from 'react';
+
+export const HackathonUsersPage: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-12 py-10 flex flex-col gap-8">
+      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+        <h1 className="text-p2 font-semibold">Hackathon Users</h1>
+      </header>
+
+      <section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
+        <p className="text-label1 text-neutral-600">Boilerplate page for managing users. Add table, filters, and forms here.</p>
+      </section>
+    </main>
+  );
+};
+
+export default HackathonUsersPage;
diff --git a/apps/backoffice/src/middleware.ts b/apps/backoffice/src/middleware.ts
index f47b40b..a1760a2 100644
--- a/apps/backoffice/src/middleware.ts
+++ b/apps/backoffice/src/middleware.ts
@@ -88,7 +88,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
     return null;
   }
 
-  if (!session) return redirect('/auth/login');
+  // if (!session) return redirect('/auth/login');
 
   const matchedRoute = mappingRoutePermissions.find(
     (route) => route.path === pathname
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
index ff42883..25079ee 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -18,27 +18,52 @@ import { Link, useLocation } from 'react-router-dom';
 import { cn, For, useSession } from '@imphnen-frontend-service/utils';
 
 const MENUS = [
-  { label: 'Dashboard & Set Gacha', href: '/dashboard', icon: <AppstoreOutlined className="text-[20px]" /> },
-  { label: 'Dashboard - Dimentorin', href: '/dashboard-dimentorin', icon: <AppstoreOutlined className="text-[20px]" /> },
-  { label: 'Gacha Roll', href: '/gacha-roll', icon: <ReloadOutlined className="text-[20px]" /> },
-  { label: 'Permissions', href: '/permissions', icon: <UserSwitchOutlined className="text-[20px]" /> },
-  { label: 'Roles', href: '/roles', icon: <UsergroupAddOutlined className="text-[20px]" /> },
-  { label: 'Data Akun', href: '/accounts', icon: <UserOutlined className="text-[20px]" /> },
-  { label: 'Validasi Transaksi', href: '/transactions', icon: <AuditOutlined className="text-[20px]" /> },
-  { label: 'Data Pengiriman Hadiah', href: '/prizes', icon: <InboxOutlined className="text-[20px]" /> },
-  { label: 'User - Dimentorin', href: '/users-dimentorin', icon: <UserSwitchOutlined className="text-[20px]" /> },
-  { label: 'Session - Dimentorin', href: '/session-dimentorin', icon: <ScheduleOutlined className="text-[20px]" /> },
-  { label: 'Content & Roadmap', href: '/roadmap-dimentorin', icon: <BookOutlined className="text-[20px]" /> },
-  { label: 'Feedback & Review', href: '/feedback-review-dimentorin', icon: <CommentOutlined className="text-[20px]" /> },
-  { label: 'Settings - Dimentorin', href: '/settings-dimentorin', icon: <SettingOutlined className="text-[20px]" /> },
-]
+  {
+    label: 'Dashboard & Set Gacha',
+    href: '/dashboard',
+    icon: <AppstoreOutlined className="text-[20px]" />,
+  },
+  {
+    label: 'Hackathon Dashboard',
+    href: '/hackathon-dashboard',
+    icon: <AppstoreOutlined className="text-p3" />,
+  },
+  {
+    label: 'Hackathon Users',
+    href: '/hackathon-users',
+    icon: <UserOutlined className="text-p3" />,
+  },
+  {
+    label: 'Hackathon Teams',
+    href: '/hackathon-teams',
+    icon: <UsergroupAddOutlined className="text-p3" />,
+  },
+  {
+    label: 'Hackathon Submissions',
+    href: '/hackathon-submissions',
+    icon: <AuditOutlined className="text-p3" />,
+  },
+  // { label: 'Dashboard - Dimentorin', href: '/dashboard-dimentorin', icon: <AppstoreOutlined className="text-[20px]" /> },
+  // { label: 'Gacha Roll', href: '/gacha-roll', icon: <ReloadOutlined className="text-[20px]" /> },
+  // { label: 'Permissions', href: '/permissions', icon: <UserSwitchOutlined className="text-[20px]" /> },
+  // { label: 'Roles', href: '/roles', icon: <UsergroupAddOutlined className="text-[20px]" /> },
+  // { label: 'Data Akun', href: '/accounts', icon: <UserOutlined className="text-[20px]" /> },
+  // { label: 'Validasi Transaksi', href: '/transactions', icon: <AuditOutlined className="text-[20px]" /> },
+  // { label: 'Data Pengiriman Hadiah', href: '/prizes', icon: <InboxOutlined className="text-[20px]" /> },
+  // { label: 'User - Dimentorin', href: '/users-dimentorin', icon: <UserSwitchOutlined className="text-[20px]" /> },
+  // { label: 'Session - Dimentorin', href: '/session-dimentorin', icon: <ScheduleOutlined className="text-[20px]" /> },
+  // { label: 'Content & Roadmap', href: '/roadmap-dimentorin', icon: <BookOutlined className="text-[20px]" /> },
+  // { label: 'Feedback & Review', href: '/feedback-review-dimentorin', icon: <CommentOutlined className="text-[20px]" /> },
+  // { label: 'Settings - Dimentorin', href: '/settings-dimentorin', icon: <SettingOutlined className="text-[20px]" /> },
+];
 
 export const BackofficeSidebar: FC = (): ReactElement => {
   const { signOut } = useSession();
   const location = useLocation();
   const isActive = (path: string) => {
-    if (path === '/dashboard' && location.pathname === '/dashboard-dimentorin') return false
-    return location.pathname.includes(path)
+    if (path === '/dashboard' && location.pathname === '/dashboard-dimentorin')
+      return false;
+    return location.pathname.includes(path);
   };
 
   return (
@@ -53,8 +78,10 @@ export const BackofficeSidebar: FC = (): ReactElement => {
                 key={href}
                 to={href}
                 className={cn(
-                  "flex items-center justify-items-start gap-3 px-[8px] py-[10px]",
-                  isActive(href) ? "bg-primary-500 text-white rounded-md" : "text-gray-700 hover:bg-gray-100"
+                  'flex items-center justify-items-start gap-3 px-[8px] py-[10px]',
+                  isActive(href)
+                    ? 'bg-primary-500 text-white rounded-md'
+                    : 'text-gray-700 hover:bg-gray-100'
                 )}
               >
                 {icon}