From 5faba43728b72bbcd731b9997abd9220f67f7005 Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Sun, 30 Nov 2025 17:22:47 +0700
Subject: [PATCH] base UI for Hackathon backoffice

TODO:
- Organize table schema for users, teams, and submissions management
- Create API Contract for additional back-end endpoint
---
 .../(protected)/hackathon-dashboard/page.tsx  |  31 ++-
 .../hackathon-submissions/page.tsx            | 197 +++++++++++++++++-
 .../app/(protected)/hackathon-teams/page.tsx  |  20 +-
 .../app/(protected)/hackathon-users/page.tsx  |  18 +-
 .../app/(protected)/users-dimentorin/page.tsx |  69 +++---
 .../backoffice-sidebar/backoffice-sidebar.tsx |   4 +-
 6 files changed, 275 insertions(+), 64 deletions(-)

diff --git a/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
index 190ff52..c9262c8 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx
@@ -1,18 +1,31 @@
+import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
 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>
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">Dashboard</h1>
 
-      <section className="bg-white rounded-lg shadow p-8">
-        <p className="text-label1 text-neutral-600">
-          Boilerplate page for hackathon dashboard. Add KPIs and actions here.
-        </p>
+      <section className="grid grid-cols-5 gap-5">
+        {/* Participant */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
+            1261
+          </h3>
+          <p className="text-neutral-400 text-p3">Total Participants</p>
+        </div>
+        {/* Team */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">206</h3>
+          <p className="text-neutral-400 text-p3">Total Teams</p>
+        </div>
+        {/* Project Submitted */}
+        <div className="bg-white px-6 py-4 rounded-md shadow">
+          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
+          <p className="text-neutral-400 text-p3">Total Project Submitted</p>
+        </div>
       </section>
-    </main>
+    </BackofficeWrapper>
   );
 };
 
diff --git a/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
index 0951dce..1099a2c 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
@@ -1,17 +1,194 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useState } from 'react';
+import ModalUserDetail from '../../../components/modal-user-detail';
+import ModalSuspendOrBan from '../../../components/modal-suspend-or-ban';
+import ModalDeleteUser from '../../../components/modal-delete-user';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import { SearchOutlined } from '@ant-design/icons';
+
+export const HackathonUsersPage: FC = (): ReactElement => {
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [showSuspendModal, setShowSuspendModal] = useState(false);
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const mockData: any[] = Array.from({ length: 90 }, (_, i) => ({
+    id: i + 1,
+    name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
+    email: 'fullname23@gmail.com',
+    rating: 4.5,
+    status: i % 2 === 0 ? 'active' : 'inactive',
+  }));
+
+  type UserStatus = 'active' | 'inactive';
+
+  interface UserType {
+    id: number;
+    name: string;
+    email: string;
+    rating: number;
+    status: UserStatus;
+  }
+
+  const columns: ColumnDef<UserType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn('w-20') },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'name',
+      header: 'Name',
+      accessorKey: 'name',
+    },
+    {
+      id: 'email',
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      accessorKey: 'rating',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<UserStatus, string> = {
+          active: 'bg-success-200 text-success-500',
+          inactive: 'bg-danger-200 text-danger-500',
+        };
+        const statusText: Record<UserStatus, string> = {
+          active: 'Active',
+          inactive: 'Inactive',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn('w-72') },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={
+            (e) => {}
+            //   {
+            //   e.stopPropagation();
+            //   setSelectedUserId(row.original.id);
+            //   setShowDetail(true);
+            // }
+          }
+          className="flex items-center gap-2 w-max"
+        >
+          <SearchOutlined className="text-[16px]" /> Lihat Detail & Action
+        </Button>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
 
-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>
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        Project Submission
+      </h1>
+      {/* Filters and actions */}
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
+        <div className="flex flex-wrap gap-3 items-center">
+          <input
+            type="text"
+            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
+            placeholder="Search name or email"
+          />
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="suspended">Suspended</option>
+          </select>
+          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+            <option value="all">All City</option>
+            <option value="jakarta">Jakarta</option>
+            <option value="bandung">Bandung</option>
+          </select>
+        </div>
 
-      <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>
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
       </section>
-    </main>
+
+      {/* Modals extracted into shared backoffice components */}
+      <ModalUserDetail
+        isOpen={showDetailModal}
+        onClose={() => setShowDetailModal(false)}
+      />
+      <ModalSuspendOrBan
+        isOpen={showSuspendModal}
+        onClose={() => setShowSuspendModal(false)}
+      />
+      <ModalDeleteUser
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+      />
+    </BackofficeWrapper>
   );
 };
 
-export default HackathonSubmissionsPage;
+export default HackathonUsersPage;
diff --git a/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
index afe4a71..9efec8e 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx
@@ -2,7 +2,10 @@ import { FC, ReactElement, useState } from 'react';
 import ModalUserDetail from '../../../components/modal-user-detail';
 import ModalSuspendOrBan from '../../../components/modal-suspend-or-ban';
 import ModalDeleteUser from '../../../components/modal-delete-user';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
 import {
   ColumnDef,
   getCoreRowModel,
@@ -219,13 +222,12 @@ 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>
-
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        Team Management
+      </h1>
       {/* Filters and actions */}
-      <section className="bg-white rounded-lg shadow p-8 flex flex-col gap-6">
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
         <div className="flex flex-wrap gap-3 items-center">
           <input
             type="text"
@@ -243,11 +245,9 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
             <option value="bandung">Bandung</option>
           </select>
         </div>
-
         {/* Table */}
         <DataTable data={mockData} columns={columns} table={table} />
       </section>
-
       {/* Modals extracted into shared backoffice components */}
       <ModalUserDetail
         isOpen={showDetailModal}
@@ -261,7 +261,7 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
         isOpen={showDeleteModal}
         onClose={() => setShowDeleteModal(false)}
       />
-    </main>
+    </BackofficeWrapper>
   );
 };
 
diff --git a/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
index 3816975..8cb3ab1 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
@@ -2,7 +2,10 @@ import { FC, ReactElement, useState } from 'react';
 import ModalUserDetail from '../../../components/modal-user-detail';
 import ModalSuspendOrBan from '../../../components/modal-suspend-or-ban';
 import ModalDeleteUser from '../../../components/modal-delete-user';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
 import {
   ColumnDef,
   getCoreRowModel,
@@ -143,13 +146,12 @@ 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>
-
+    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
+      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
+        User Management
+      </h1>
       {/* Filters and actions */}
-      <section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100 flex flex-col gap-6">
+      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
         <div className="flex flex-wrap gap-3 items-center">
           <input
             type="text"
@@ -185,7 +187,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
         isOpen={showDeleteModal}
         onClose={() => setShowDeleteModal(false)}
       />
-    </main>
+    </BackofficeWrapper>
   );
 };
 
diff --git a/apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx b/apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx
index 071da5f..bea5c17 100644
--- a/apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx
+++ b/apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx
@@ -1,19 +1,29 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-import { cn, For } from "@imphnen-frontend-service/utils";
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-import { ReactElement, useState } from "react";
-import { ModalDetailUser } from "./_components/modal/detail";
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
+import {
+  BackofficeWrapper,
+  DataTable,
+} from '@imphnen-frontend-service/ui/organisms';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ReactElement, useState } from 'react';
+import { ModalDetailUser } from './_components/modal/detail';
 
 type UserStatus = 'active' | 'inactive';
 
 interface UserType {
-  id: number
-  name: string
-  email: string
-  rating: number
-  status: UserStatus
+  id: number;
+  name: string;
+  email: string;
+  rating: number;
+  status: UserStatus;
 }
 
 const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
@@ -22,15 +32,15 @@ const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
   email: 'fullname23@gmail.com',
   rating: 4.5,
   status: i % 2 === 0 ? 'active' : 'inactive',
-}))
+}));
 
 export default function Components(): ReactElement {
-  const TABS = ['mentor', 'mentee'] as const
-  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor')
-  const [showDetail, setShowDetail] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
+  const TABS = ['mentor', 'mentee'] as const;
+  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor');
+  const [showDetail, setShowDetail] = useState(false);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
@@ -39,7 +49,7 @@ export default function Components(): ReactElement {
   const columns: ColumnDef<UserType>[] = [
     {
       id: 'select',
-      meta: { cellClassName: cn("w-20") },
+      meta: { cellClassName: cn('w-20') },
       header: ({ table }) => (
         <input
           type="checkbox"
@@ -97,7 +107,7 @@ export default function Components(): ReactElement {
     },
     {
       header: 'Action',
-      meta: { cellClassName: cn("w-72") },
+      meta: { cellClassName: cn('w-72') },
       cell: ({ row }) => (
         <Button
           variant="primary"
@@ -113,7 +123,7 @@ export default function Components(): ReactElement {
         </Button>
       ),
     },
-  ]
+  ];
 
   const table = useReactTable({
     data: mockData,
@@ -134,14 +144,19 @@ export default function Components(): ReactElement {
   return (
     <BackofficeWrapper title="Dimentorin.dev">
       <div className="mb-8 flex justify-between items-center">
-        <h1 className="text-p1 font-semibold text-neutral-700">User Management</h1>
+        <h1 className="text-p1 font-semibold text-neutral-700 mb-8">
+          User Management
+        </h1>
         <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
           <For data={TABS}>
             {(tab) => (
               <Button
                 key={tab}
                 variant="text"
-                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                className={cn(
+                  'px-3 py-2 capitalize',
+                  activeTab === tab && 'bg-white'
+                )}
                 onClick={() => setActiveTab(tab)}
               >
                 {tab}
@@ -163,12 +178,16 @@ export default function Components(): ReactElement {
             </div>
           </div>
           <Select>
-            <option selected disabled>Rating</option>
+            <option selected disabled>
+              Rating
+            </option>
             <option value="4.5">4.5</option>
             <option value="5">5</option>
           </Select>
           <Select>
-            <option selected disabled>Status</option>
+            <option selected disabled>
+              Status
+            </option>
             <option value="active">Active</option>
             <option value="inactive">Inactive</option>
           </Select>
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
index 7bb1c32..7b33b8f 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -199,7 +199,7 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
                     className={cn(
                       'flex items-center justify-between w-full gap-3 px-2 py-2.5 rounded-md cursor-pointer',
                       openGroups[menu.label]
-                        ? 'bg-primary-500 text-white'
+                        ? 'bg-primary-400 hover:bg-primary-500 text-white'
                         : 'text-gray-700 hover:bg-gray-100'
                     )}
                   >
@@ -225,7 +225,7 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
                           className={cn(
                             'flex items-center gap-3 px-2 py-2.5 rounded-md',
                             isActive(child.href)
-                              ? 'bg-primary-100 text-primary-700'
+                              ? 'bg-primary-100 text-primary-700 hover:bg-primary-200'
                               : 'text-gray-700 hover:bg-gray-100'
                           )}
                         >