From 2d80ed05db67c415bbfdeabd3ad65590c6ea2b03 Mon Sep 17 00:00:00 2001
From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com>
Date: Tue, 2 Dec 2025 18:11:34 +0700
Subject: [PATCH] feat(backoffice): little adjustment in hackathon users
 management UI and API contract

---
 .../_components/modal-user-detail.tsx         | 24 +++---
 .../app/(protected)/hackathon-users/page.tsx  | 86 ++++++++++---------
 docs/api/hackathon_backoffice_api_contract.md | 17 ++--
 libs/ui/src/organisms/datatable/datatable.tsx |  4 +-
 4 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx b/apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx
index a678d51..8182c5f 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx
@@ -195,7 +195,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
           <div className="border-b border-neutral-200 px-8 py-6 flex justify-between items-start">
             <div className="flex items-center gap-4">
               {/* Interactive User Avatar */}
-              <div className="relative group">
+              <div className="relative group ">
                 <div className="w-16 h-16 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden border-2 border-transparent group-hover:border-primary-300 transition-colors">
                   {formData.avatar ? (
                     <img
@@ -211,7 +211,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                 {/* Avatar Hover Overlay */}
                 <button
                   onClick={() => setShowAvatarMenu(!showAvatarMenu)}
-                  className="absolute inset-0 bg-black/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                  className="absolute inset-0 bg-neutral-400 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                 >
                   <CameraOutlined className="text-white text-lg" />
                 </button>
@@ -221,7 +221,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                   <div className="absolute top-full left-0 mt-2 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[140px] z-10">
                     <button
                       onClick={triggerFileUpload}
-                      className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2"
+                      className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2 cursor-pointer"
                     >
                       <UploadOutlined className="text-sm" />
                       {formData.avatar ? 'Change Photo' : 'Upload Photo'}
@@ -229,7 +229,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                     {formData.avatar && (
                       <button
                         onClick={handleRemoveAvatar}
-                        className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
+                        className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer"
                       >
                         <DeleteOutlined className="text-sm" />
                         Remove Photo
@@ -244,7 +244,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                     {user ? 'Edit User Profile' : 'Create New User'}
                   </h2>
                   {user && (
-                    <span className="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
+                    <span className="px-3 py-1 bg-info-100 text-info-700 text-xs font-medium rounded-2xl">
                       Hover avatar to change
                     </span>
                   )}
@@ -265,7 +265,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                 handleCancel();
               }}
             >
-              <CloseOutlined className="text-neutral-400 text-lg" />
+              <CloseOutlined className="text-neutral-400 text-lg cursor-pointer" />
             </button>
           </div>
 
@@ -397,7 +397,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                     <button
                       onClick={() => handleInputChange('is_active', true)}
                       className={cn(
-                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200',
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
                         formData.is_active
                           ? 'bg-white text-success-700 shadow-sm ring-1 ring-success-200'
                           : 'text-neutral-600 hover:text-neutral-800'
@@ -418,7 +418,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                     <button
                       onClick={() => handleInputChange('is_active', false)}
                       className={cn(
-                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200',
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
                         !formData.is_active
                           ? 'bg-white text-neutral-700 shadow-sm ring-1 ring-neutral-200'
                           : 'text-neutral-600 hover:text-neutral-800'
@@ -458,7 +458,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                         formData.skills.map((skill, index) => (
                           <span
                             key={index}
-                            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800"
+                            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl text-sm font-medium bg-blue-100 text-blue-800"
                           >
                             {skill}
                             <button
@@ -467,9 +467,9 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                                   formData.skills.filter((_, i) => i !== index)
                                 )
                               }
-                              className="text-blue-600 hover:text-blue-800 ml-1"
+                              className="text-blue-600 hover:text-blue-800 ml-1 cursor-pointer"
                             >
-                              ×
+                              ✕
                             </button>
                           </span>
                         ))
@@ -558,7 +558,7 @@ const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
                 {user && (
                   <button
                     onClick={() => setShowDeleteConfirm(true)}
-                    className="text-red-600 hover:text-red-700 text-sm font-medium transition-colors"
+                    className="text-red-600 hover:text-red-700 text-sm font-medium transition-colors cursor-pointer"
                   >
                     Delete Account
                   </button>
diff --git a/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
index ca86f91..500f9eb 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx
@@ -178,13 +178,13 @@ export const HackathonUsersPage: FC = (): ReactElement => {
             {row.original.skills.slice(0, 2).map((skill, index) => (
               <span
                 key={index}
-                className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-blue-100 text-blue-800"
+                className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
               >
                 {skill.replace(' Developer', '').replace(' Engineer', '')}
               </span>
             ))}
             {row.original.skills.length > 2 && (
-              <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-neutral-100 text-neutral-600">
+              <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
                 +{row.original.skills.length - 2}
               </span>
             )}
@@ -287,14 +287,14 @@ export const HackathonUsersPage: FC = (): ReactElement => {
       {/* 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 justify-between">
-          {/* Left side - Filters */}
+          {/* Left side - Search & filters */}
           <div className="flex flex-wrap gap-3 items-center">
-            {/* Global Search with Icon */}
+            {/* Search bar */}
             <div className="relative">
               <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
               <input
                 type="text"
-                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-72 focus:border-primary-500 focus:outline-none"
+                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-80 focus:border-primary-500 focus:outline-none"
                 placeholder="Search users by name or location..."
                 value={globalFilter}
                 onChange={(e) => setGlobalFilter(e.target.value)}
@@ -302,35 +302,41 @@ export const HackathonUsersPage: FC = (): ReactElement => {
             </div>
 
             {/* Status Filter */}
-            <select
-              className="border border-neutral-200 rounded-lg px-4 py-2.5 pr-10 text-sm w-full sm:w-36 focus:border-primary-500 focus:outline-none appearance-none bg-white"
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
-            >
-              <option value="all">All Status</option>
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-            </select>
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-36 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+              >
+                <option value="all">All Status</option>
+                <option value="active">Active</option>
+                <option value="inactive">Inactive</option>
+              </select>
+            </div>
 
             {/* Location Filter */}
-            <select
-              className="border border-neutral-200 rounded-lg px-4 py-2.5 pr-10 text-sm w-full sm:w-40 focus:border-primary-500 focus:outline-none appearance-none bg-white"
-              value={locationFilter}
-              onChange={(e) => setLocationFilter(e.target.value)}
-            >
-              <option value="all">All Locations</option>
-              {locations.map((location) => (
-                <option key={location} value={location}>
-                  {location}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+              <select
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+                value={locationFilter}
+                onChange={(e) => setLocationFilter(e.target.value)}
+              >
+                <option value="all">All Locations</option>
+                {locations.map((location) => (
+                  <option key={location} value={location}>
+                    {location}
+                  </option>
+                ))}
+              </select>
+            </div>
 
             {/* Skills Filter with Icon */}
             <div className="relative">
               <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
               <select
-                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white"
+                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
                 value=""
                 onChange={(e) => {
                   if (
@@ -357,9 +363,6 @@ export const HackathonUsersPage: FC = (): ReactElement => {
 
           {/* Right side - Add User Button */}
           <div className="flex items-center gap-3">
-            <span className="text-sm text-neutral-500">
-              {filteredData.length} users found
-            </span>
             <Button
               variant="primary"
               size="md"
@@ -381,26 +384,26 @@ export const HackathonUsersPage: FC = (): ReactElement => {
 
             {/* Status filter badge */}
             {statusFilter !== 'all' && (
-              <span className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">
+              <span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
                 Status: {statusFilter}
                 <button
                   onClick={() => setStatusFilter('all')}
-                  className="text-blue-600 hover:text-blue-800"
+                  className="text-info-600 hover:text-info-800 cursor-pointer"
                 >
-                  ×
+                  ✕
                 </button>
               </span>
             )}
 
             {/* Location filter badge */}
             {locationFilter !== 'all' && (
-              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
+              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
                 Location: {locationFilter}
                 <button
                   onClick={() => setLocationFilter('all')}
-                  className="text-green-600 hover:text-green-800"
+                  className="text-green-600 hover:text-green-800 cursor-pointer"
                 >
-                  ×
+                  ✕
                 </button>
               </span>
             )}
@@ -409,16 +412,16 @@ export const HackathonUsersPage: FC = (): ReactElement => {
             {skillsFilter.map((skill) => (
               <span
                 key={skill}
-                className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs"
+                className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-2xl text-sm"
               >
                 {skill.replace(' Developer', '').replace(' Engineer', '')}
                 <button
                   onClick={() =>
                     setSkillsFilter((prev) => prev.filter((s) => s !== skill))
                   }
-                  className="text-purple-600 hover:text-purple-800"
+                  className="text-purple-600 hover:text-purple-800 cursor-pointer"
                 >
-                  ×
+                  ✕
                 </button>
               </span>
             ))}
@@ -433,7 +436,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
                 setSkillsFilter([]);
                 setGlobalFilter('');
               }}
-              className="text-xs text-neutral-600"
+              className="text-sm text-neutral-600"
             >
               Clear All
             </Button>
@@ -445,8 +448,7 @@ export const HackathonUsersPage: FC = (): ReactElement => {
           <div className="text-sm text-neutral-600">
             Showing {Math.min(pageSize, filteredData.length)} of{' '}
             {filteredData.length} users
-            {filteredData.length > pageSize &&
-              ' (filtered results paginated below)'}
+            {filteredData.length > pageSize}
           </div>
         )}
 
diff --git a/docs/api/hackathon_backoffice_api_contract.md b/docs/api/hackathon_backoffice_api_contract.md
index c6adb6e..a576134 100644
--- a/docs/api/hackathon_backoffice_api_contract.md
+++ b/docs/api/hackathon_backoffice_api_contract.md
@@ -64,7 +64,7 @@ Retrieve paginated list of hackathon participants with filtering, searching, and
 | Parameter    | Type    | Required | Default      | Description                                                   |
 | ------------ | ------- | -------- | ------------ | ------------------------------------------------------------- |
 | `page`       | integer | No       | 1            | Page number (1-based)                                         |
-| `limit`      | integer | No       | 20           | Items per page (1-100)                                        |
+| `limit`      | integer | No       | 10           | Items per page (1-100)                                        |
 | `search`     | string  | No       | -            | Search by name or location (case-insensitive)                 |
 | `status`     | string  | No       | `all`        | Filter by status: `all`, `active`, `inactive`                 |
 | `location`   | string  | No       | `all`        | Filter by location or `all`                                   |
@@ -95,7 +95,7 @@ GET /api/v1/admin/users?sort_by=fullname&sort_order=asc
         "bio": "Passionate developer with 5+ years experience", // Optional
         "location": "Jakarta",
         "is_active": true,
-        "skills": ["Frontend Developer", "UI/UX Designer"],
+        "skills": ["Frontend Developer", "UI/UX Designer"], // Optional
         "created_at": "2024-11-15T08:30:00Z",
         "updated_at": "2024-11-30T14:22:00Z"
       }
@@ -123,7 +123,7 @@ GET /api/v1/admin/users?sort_by=fullname&sort_order=asc
 | ------------------------- | ------- | ------------------------------ |
 | `data.users[].id`         | string  | UUID format                    |
 | `data.users[].avatar`     | string  | URL, nullable                  |
-| `data.users[].fullname`   | string  | Required, 1-100 chars          |
+| `data.users[].fullname`   | string  | Required                       |
 | `data.users[].bio`        | string  | Optional, max 500 chars        |
 | `data.users[].location`   | string  | Required, from predefined list |
 | `data.users[].is_active`  | boolean | Account status                 |
@@ -195,7 +195,7 @@ Create a new user account in the hackathon system.
   "location": "Jakarta", // Required, from predefined list
   "is_active": true, // Required, boolean
   "skills": ["Backend Developer"], // Optional, array of valid skills
-  "avatar": "data:image/..." // Optional, base64 or URL
+  "avatar": "https://example.com/images/..." // Optional, URL
 }
 ```
 
@@ -211,7 +211,7 @@ Content-Type: application/json
   "location": "Jakarta",
   "is_active": true,
   "skills": ["Backend Developer", "Data Scientist"],
-  "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..."
+  "avatar": "https://example.com/images/..."
 }
 ```
 
@@ -260,7 +260,7 @@ Update an existing user's profile information.
   "location": "Bandung", // Optional, from predefined list
   "is_active": false, // Optional, boolean
   "skills": ["Full Stack Developer"], // Optional, array of valid skills
-  "avatar": "data:image/..." // Optional, base64/URL, null to remove
+  "avatar": "https://example.com/images/..." // Optional, URL, null to remove
 }
 ```
 
@@ -302,7 +302,7 @@ Content-Type: application/json
 
 ### Purpose
 
-Permanently delete a user account from the hackathon system.
+(Soft) Delete a user account from the hackathon system.
 
 ### Authentication & Authorization
 
@@ -387,7 +387,6 @@ DELETE /api/v1/admin/users/550e8400-e29b-41d4-a716-446655440000
 - **Max file size**: 5MB
 - **Recommended dimensions**: 400x400px
 - **Storage**: Uploaded avatars are processed and stored with generated URLs
-- **Base64 support**: Accept `data:image/*;base64,` format in requests
 - **URL response**: Always return publicly accessible HTTPS URLs
 
 ---
@@ -395,4 +394,4 @@ DELETE /api/v1/admin/users/550e8400-e29b-41d4-a716-446655440000
 **Revision History**
 
 - v1.0.0 (2025-11-30): Initial contract drafted.
-- v2.0.0 (2025-12-01): Added comprehensive user management endpoints with filtering, pagination, CRUD operations, and avatar handling.
+- v2.0.0 (2025-12-01): Added user management endpoints with filtering, pagination, CRUD operations, and avatar handling.
diff --git a/libs/ui/src/organisms/datatable/datatable.tsx b/libs/ui/src/organisms/datatable/datatable.tsx
index e2f2e93..0338398 100644
--- a/libs/ui/src/organisms/datatable/datatable.tsx
+++ b/libs/ui/src/organisms/datatable/datatable.tsx
@@ -119,9 +119,7 @@ export const DataTable = <T extends RowData>({
                       <span className="ml-2 text-xs text-gray-500">
                         {header.column.getIsSorted() === 'asc' && '▲'}
                         {header.column.getIsSorted() === 'desc' && '▼'}
-                        {!header.column.getIsSorted() && (
-                          <span className="opacity-50">⇅</span>
-                        )}
+                        {!header.column.getIsSorted() && <span>⇅</span>}
                       </span>
                     )}
                   </th>