test datatable with mock data

apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx

@@ -7,8 +7,10 @@ export const HackathonDashboardPage: FC = (): ReactElement => {
         <h1 className="text-p2 font-semibold">Hackathon Dashboard</h1>
       </header>
 
-      <section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
+      <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>
+        <p className="text-label1 text-neutral-600">
+          Boilerplate page for hackathon dashboard. Add KPIs and actions here.
+        </p>
       </section>
     </main>
   );

apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx

@@ -1,15 +1,266 @@
-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 { 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';
 
 export const HackathonTeamsPage: 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: TeamType[] = Array.from({ length: 90 }, (_, i) => ({
+    id: `team-${i + 1}`,
+    name: `Team ${i + 1} - ${i % 3 === 0 ? 'Innovators' : 'Hackers'}`,
+    city: i % 2 === 0 ? 'Jakarta' : 'Bandung',
+    visibility: i % 4 === 0 ? 'private' : 'public',
+    member_count: Math.floor(Math.random() * 4) + 1,
+    has_submission: i % 3 !== 0,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+    leader: {
+      user: {
+        fullname: `Leader User ${i}`,
+        email: `leader${i}@example.com`,
+      },
+    },
+  }));
+
+  interface TeamType {
+    id: string;
+    name: string;
+    city: string;
+    visibility: 'public' | 'private';
+    member_count: number;
+    has_submission: boolean;
+    created_at: string;
+    updated_at: string;
+    leader?: {
+      user: {
+        fullname: string;
+        email: string;
+      };
+    };
+  }
+
+  const columns: ColumnDef<TeamType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn('w-12') },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      accessorKey: 'name',
+      header: 'Team Name',
+      cell: ({ row }) => (
+        <div>
+          <div className="font-medium text-gray-900">{row.original.name}</div>
+          <div className="text-xs text-gray-500">{row.original.id}</div>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'city',
+      header: 'City',
+    },
+    {
+      accessorKey: 'visibility',
+      header: 'Visibility',
+      cell: ({ row }) => {
+        const isPublic = row.original.visibility === 'public';
+        return (
+          <span
+            className={cn(
+              'px-2 py-1 rounded-full text-xs font-medium',
+              isPublic
+                ? 'bg-green-100 text-green-700'
+                : 'bg-gray-100 text-gray-700'
+            )}
+          >
+            {isPublic ? 'Public' : 'Private'}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'member_count',
+      header: 'Members',
+      cell: ({ row }) => (
+        <div className="flex items-center gap-1">
+          <span className="font-medium">{row.getValue('member_count')}</span>
+          <span className="text-gray-500 text-xs">members</span>
+        </div>
+      ),
+    },
+    {
+      id: 'leader',
+      header: 'Leader',
+      cell: ({ row }) => {
+        const leader = row.original.leader?.user;
+        return leader ? (
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              {leader.fullname}
+            </div>
+            <div className="text-xs text-gray-500">{leader.email}</div>
+          </div>
+        ) : (
+          <span className="text-gray-400 italic">No leader</span>
+        );
+      },
+    },
+    {
+      accessorKey: 'has_submission',
+      header: 'Submission',
+      cell: ({ row }) => {
+        const hasSubmission = row.original.has_submission;
+        return (
+          <span
+            className={cn(
+              'px-2 py-1 rounded-full text-xs font-medium',
+              hasSubmission
+                ? 'bg-blue-100 text-blue-700'
+                : 'bg-orange-100 text-orange-700'
+            )}
+          >
+            {hasSubmission ? 'Yes' : 'No'}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: 'updated_at',
+      header: 'Last Updated',
+      cell: ({ row }) => {
+        return (
+          <span className="text-sm text-gray-500">
+            {new Date(row.original.updated_at).toLocaleDateString()}
+          </span>
+        );
+      },
+    },
+    {
+      id: 'actions',
+      header: 'Action',
+      meta: { cellClassName: cn('w-48') },
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="text"
+            size="sm"
+            className="text-primary-600 hover:text-primary-700 p-0"
+            onClick={() => {
+              // View detail logic
+            }}
+          >
+            View
+          </Button>
+          <span className="text-gray-300">|</span>
+          <Button
+            variant="text"
+            size="sm"
+            className="text-gray-600 hover:text-gray-700 p-0"
+            onClick={() => {
+              // Manage logic
+            }}
+          >
+            Manage
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  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,
+  });
+
   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">
+      {/* Filters and actions */}
-        <p className="text-label1 text-neutral-600">Boilerplate page for managing teams. Add table, filters, and forms here.</p>
+      <section className="bg-white rounded-lg 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>
+
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
       </section>
+
+      {/* Modals extracted into shared backoffice components */}
+      <ModalUserDetail
+        isOpen={showDetailModal}
+        onClose={() => setShowDetailModal(false)}
+      />
+      <ModalSuspendOrBan
+        isOpen={showSuspendModal}
+        onClose={() => setShowSuspendModal(false)}
+      />
+      <ModalDeleteUser
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+      />
     </main>
   );
 };

apps/backoffice/src/app/(protected)/hackathon-users/page.tsx

@@ -1,15 +1,190 @@
-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 { 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,
+  });
+
   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">
+      {/* Filters and actions */}
-        <p className="text-label1 text-neutral-600">Boilerplate page for managing users. Add table, filters, and forms here.</p>
+      <section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100 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>
+
+        {/* Table */}
+        <DataTable data={mockData} columns={columns} table={table} />
       </section>
+
+      {/* Modals extracted into shared backoffice components */}
+      <ModalUserDetail
+        isOpen={showDetailModal}
+        onClose={() => setShowDetailModal(false)}
+      />
+      <ModalSuspendOrBan
+        isOpen={showSuspendModal}
+        onClose={() => setShowSuspendModal(false)}
+      />
+      <ModalDeleteUser
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+      />
     </main>
   );
 };

apps/backoffice/src/app/(protected)/layout.tsx

@@ -16,14 +16,14 @@ export const AppLayout: FC = (): ReactElement => {
           {/* Sticky top header */}
           <header
             className={
-              'sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
+              'lg:hidden sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
               (mobileSidebarOpen ? 'z-0' : 'z-30')
             }
           >
             {/* Mobile menu button (shown on small screens) */}
             <button
               type="button"
-              className="md:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700"
+              className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700"
               onClick={() => setMobileSidebarOpen(true)}
               aria-label="Open sidebar"
             >

apps/backoffice/src/components/modal-delete-user.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ModalDeleteUser: FC<ModalProps> = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow w-full max-w-md">
+          <div className="border-b px-6 py-4 flex justify-between items-center">
+            <h2 className="text-p3 font-semibold">Delete User</h2>
+            <button className="p-2" onClick={onClose}>
+              ✕
+            </button>
+          </div>
+          <div className="p-6">
+            <p className="text-label2 text-neutral-700">
+              Are you sure you want to delete this user? This action cannot be
+              undone.
+            </p>
+            <div className="flex justify-end gap-2 mt-4">
+              <button className="px-3 py-2 rounded-md border" onClick={onClose}>
+                Cancel
+              </button>
+              <button className="px-3 py-2 rounded-md bg-red-600 text-white">
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalDeleteUser;

apps/backoffice/src/components/modal-suspend-or-ban.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ModalSuspendOrBan: FC<ModalProps> = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow w-full max-w-lg">
+          <div className="border-b px-6 py-4 flex justify-between items-center">
+            <h2 className="text-p3 font-semibold">Suspend or Ban User</h2>
+            <button className="p-2" onClick={onClose}>
+              ✕
+            </button>
+          </div>
+          <div className="p-6 flex flex-col gap-4">
+            <label className="text-label2 text-neutral-700">Reason</label>
+            <textarea
+              className="border border-neutral-200 rounded-md px-3 py-2"
+              rows={4}
+            />
+            <div className="flex justify-end gap-2 mt-2">
+              <button className="px-3 py-2 rounded-md border" onClick={onClose}>
+                Cancel
+              </button>
+              <button className="px-3 py-2 rounded-md bg-amber-600 text-white">
+                Suspend
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalSuspendOrBan;

apps/backoffice/src/components/modal-user-detail.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow w-full max-w-3xl">
+          <div className="border-b px-6 py-4 flex justify-between items-center">
+            <h2 className="text-p3 font-semibold">User Detail</h2>
+            <button className="p-2" onClick={onClose}>
+              ✕
+            </button>
+          </div>
+          <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-label1 font-medium mb-2">Account Profile</h3>
+              <div className="text-label2 text-neutral-600">
+                Email, provider, createdAt
+              </div>
+            </div>
+            <div>
+              <h3 className="text-label1 font-medium mb-2">Detail Profile</h3>
+              <div className="text-label2 text-neutral-600">
+                Name, phone, city
+              </div>
+            </div>
+            <div className="md:col-span-2">
+              <h3 className="text-label1 font-medium mb-2">Activity Log</h3>
+              <div className="text-label2 text-neutral-600">
+                Recent actions...
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalUserDetail;

libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx

@@ -157,9 +157,9 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
   };
 
   const sidebarContent = (
-    <div className="w-[280px] bg-white h-svh py-10 md:py-[60px] px-7 shadow-xl flex flex-col justify-between">
+    <div className="w-[280px] bg-white h-svh py-10 lg:py-[60px] px-7 shadow-xl flex flex-col justify-between">
-      <div className="flex flex-col gap-10 md:gap-20 justify-between items-center">
+      <div className="flex flex-col gap-10 lg:gap-20 justify-between items-center">
-        <div className="flex justify-between md:justify-center items-center w-full">
+        <div className="flex justify-around lg:justify-center items-center w-full">
           <img
             src="/logos/simple.svg"
             alt="IMPHNEN Logo"
@@ -168,7 +168,7 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
           {onClose && (
             <button
               onClick={onClose}
-              className="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
+              className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
               aria-label="Close sidebar"
             >
               <svg
@@ -275,13 +275,13 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
   return (
     <>
       {/* Desktop Sidebar - visible on lg+, sticky */}
-      <div className="hidden md:block sticky top-0 h-screen overflow-y-auto">
+      <div className="hidden lg:block sticky top-0 h-screen overflow-y-auto shadow">
         {sidebarContent}
       </div>
 
       {/* Mobile Sidebar - overlay */}
       {isOpen && (
-        <div className="md:hidden fixed inset-0 z-50">
+        <div className="lg:hidden fixed inset-0 z-50">
           {/* Backdrop */}
           <div
             className="fixed inset-0 bg-black/50 transition-opacity"