feat(backoffice): update page hackathon user management

- update data table component
- update filtering & pagination
- add modal display to edit and add user
- hide notification icon in backoffice wrapper

apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx

@@ -1,43 +1,647 @@
-import { FC } from 'react';
+import { FC, useState, useEffect, useMemo, useRef } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import {
+  UserOutlined,
+  EnvironmentOutlined,
+  CalendarOutlined,
+  SaveOutlined,
+  CloseOutlined,
+  ExclamationOutlined,
+  CameraOutlined,
+  DeleteOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+
+interface UserType {
+  id: string;
+  avatar?: string;
+  fullname: string;
+  bio?: string;
+  location: string;
+  is_active: boolean;
+  skills: string[];
+  created_at: string;
+  updated_at: string;
+}
 
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
+  user: UserType | null;
 }
 
-const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose }) => {
+const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
-  if (!isOpen) return null;
+  const [formData, setFormData] = useState<UserType | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showAvatarMenu, setShowAvatarMenu] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Initialize form data when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      if (user) {
+        // Edit existing user
+        setFormData({ ...user });
+      } else {
+        // Create new user
+        setFormData({
+          id: '', // Will be generated by backend
+          fullname: '',
+          bio: '',
+          location: '',
+          is_active: true,
+          skills: [],
+          avatar: undefined,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+        });
+      }
+    }
+  }, [isOpen, user]);
+
+  // Check if form has changes
+  const hasChanges = useMemo(() => {
+    if (!formData) return false;
+    if (!user) return true; // New user always has changes
+    return (
+      formData.fullname !== user.fullname ||
+      formData.location !== user.location ||
+      formData.is_active !== user.is_active ||
+      formData.avatar !== user.avatar ||
+      JSON.stringify(formData.skills) !== JSON.stringify(user.skills) ||
+      formData.bio !== user.bio
+    );
+  }, [formData, user]);
+
+  // Check if required fields are filled
+  const isFormValid = useMemo(() => {
+    if (!formData) return false;
+    return formData.fullname.trim() !== '' && formData.location.trim() !== '';
+  }, [formData]);
+
+  const canSave = hasChanges && isFormValid;
+
+  if (!isOpen || !formData) return null;
+
+  const handleInputChange = (
+    field: keyof UserType,
+    value: string | boolean | string[] | undefined
+  ) => {
+    setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
+  };
+
+  const handleSkillsChange = (skills: string[]) => {
+    setFormData((prev) => (prev ? { ...prev, skills } : null));
+  };
+
+  const handleSave = () => {
+    if (!formData) return;
+
+    if (user) {
+      // Update existing user
+      console.log('Update user data:', formData);
+    } else {
+      // Create new user
+      console.log('Create new user:', formData);
+    }
+    // Here you would typically make an API call to save the data
+    onClose();
+  };
+
+  const handleCancel = () => {
+    if (user) {
+      setFormData({ ...user }); // Reset to original for edit mode
+    }
+    onClose();
+  };
+
+  const handleDeleteAccount = () => {
+    if (!user) return; // Can't delete new user
+    console.log('Delete user:', user.id);
+    setShowDeleteConfirm(false);
+    onClose();
+  };
+
+  const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        alert('Please select an image file');
+        return;
+      }
+
+      // Validate file size (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        alert('Image size must be less than 5MB');
+        return;
+      }
+
+      // Create preview URL
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const avatarUrl = e.target?.result as string;
+        handleInputChange('avatar', avatarUrl);
+        setShowAvatarMenu(false);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemoveAvatar = () => {
+    handleInputChange('avatar', undefined);
+    setShowAvatarMenu(false);
+  };
+
+  const triggerFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const availableSkills = [
+    'Frontend Developer',
+    'Backend Developer',
+    'Full Stack Developer',
+    'DevOps Engineer',
+    'UI/UX Designer',
+    'Product Manager',
+    'Data Scientist',
+    'Mobile Developer',
+  ];
+
   return (
     <div className="fixed inset-0 z-50">
-      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={(e) => {
+          setShowAvatarMenu(false);
+          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
-          <div className="border-b px-6 py-4 flex justify-between items-center">
+          className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"
-            <h2 className="text-p3 font-semibold">User Detail</h2>
+          onClick={(e) => e.stopPropagation()}
-            <button className="p-2 cursor-pointer" onClick={onClose}>
+        >
-              ✕
+          {/* Hidden File Input */}
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleAvatarUpload}
+            accept="image/*"
+            className="hidden"
+          />
+          {/* Header */}
+          <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="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
+                      src={formData.avatar}
+                      alt={formData.fullname}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <UserOutlined className="text-neutral-500 text-2xl" />
+                  )}
+                </div>
+
+                {/* 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"
+                >
+                  <CameraOutlined className="text-white text-lg" />
+                </button>
+
+                {/* Avatar Menu Dropdown */}
+                {showAvatarMenu && (
+                  <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"
+                    >
+                      <UploadOutlined className="text-sm" />
+                      {formData.avatar ? 'Change Photo' : 'Upload Photo'}
+                    </button>
+                    {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"
+                      >
+                        <DeleteOutlined className="text-sm" />
+                        Remove Photo
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div>
+                <div className="flex items-center gap-3 mb-2">
+                  <h2 className="text-2xl font-bold text-neutral-900">
+                    {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">
+                      Hover avatar to change
+                    </span>
+                  )}
+                </div>
+                <div className="text-sm text-neutral-500">
+                  {user
+                    ? `Make changes to ${
+                        formData.fullname || 'this user'
+                      }'s profile information`
+                    : 'Fill in the information below to create a new user account'}
+                </div>
+              </div>
+            </div>
+            <button
+              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+              onClick={() => {
+                setShowAvatarMenu(false);
+                handleCancel();
+              }}
+            >
+              <CloseOutlined className="text-neutral-400 text-lg" />
             </button>
           </div>
-          <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+
-            <div>
+          {/* Content */}
-              <h3 className="text-label1 font-medium mb-2">Account Profile</h3>
+          <div className="p-8" onClick={() => setShowAvatarMenu(false)}>
-              <div className="text-label2 text-neutral-600">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                Email, provider, createdAt
+              {/* Left Column - Basic Info */}
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Basic Information
+                  </h3>
+                  <div className="space-y-4">
+                    {/* Full Name - Required */}
+                    <div className="flex items-center gap-3">
+                      <UserOutlined className="text-neutral-400" />
+                      <div className="flex-1">
+                        <label className="text-sm text-neutral-500 block mb-1">
+                          Full Name <span className="text-red-500">*</span>
+                        </label>
+                        <input
+                          type="text"
+                          value={formData.fullname}
+                          onChange={(e) =>
+                            handleInputChange('fullname', e.target.value)
+                          }
+                          className={cn(
+                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none',
+                            formData.fullname.trim() === ''
+                              ? 'border-red-300 bg-red-50'
+                              : 'border-neutral-300'
+                          )}
+                          placeholder="Enter full name"
+                        />
+                        {formData.fullname.trim() === '' && (
+                          <p className="text-red-500 text-xs mt-1">
+                            Full name is required
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Location - Required */}
+                    <div className="flex items-center gap-3">
+                      <EnvironmentOutlined className="text-neutral-400" />
+                      <div className="flex-1">
+                        <label className="text-sm text-neutral-500 block mb-1">
+                          Location <span className="text-red-500">*</span>
+                        </label>
+                        <select
+                          value={formData.location}
+                          onChange={(e) =>
+                            handleInputChange('location', e.target.value)
+                          }
+                          className={cn(
+                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white',
+                            formData.location.trim() === ''
+                              ? 'border-red-300 bg-red-50'
+                              : 'border-neutral-300'
+                          )}
+                        >
+                          <option value="">Select location</option>
+                          <option value="Jakarta">Jakarta</option>
+                          <option value="Bandung">Bandung</option>
+                          <option value="Surabaya">Surabaya</option>
+                          <option value="Medan">Medan</option>
+                          <option value="Yogyakarta">Yogyakarta</option>
+                        </select>
+                        {formData.location.trim() === '' && (
+                          <p className="text-red-500 text-xs mt-1">
+                            Location is required
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Joined Date - Read Only - Only show for existing users */}
+                    {user && (
+                      <div className="flex items-center gap-3">
+                        <CalendarOutlined className="text-neutral-400" />
+                        <div>
+                          <p className="text-sm text-neutral-500">
+                            Joined Date
+                          </p>
+                          <p className="font-medium">
+                            {new Date(formData.created_at).toLocaleDateString(
+                              'en-US',
+                              {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric',
+                              }
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Bio Section - Optional */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-3">
+                    Bio{' '}
+                    <span className="text-neutral-400 text-sm font-normal">
+                      (Optional)
+                    </span>
+                  </h3>
+                  <textarea
+                    value={formData.bio || ''}
+                    onChange={(e) =>
+                      handleInputChange('bio', e.target.value || undefined)
+                    }
+                    placeholder="Tell us about yourself..."
+                    rows={4}
+                    className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
+                  />
+                </div>
               </div>
-            </div>
+
-            <div>
+              {/* Right Column - Skills & Status */}
-              <h3 className="text-label1 font-medium mb-2">Detail Profile</h3>
+              <div className="space-y-6">
-              <div className="text-label2 text-neutral-600">
+                {/* Account Status - Enhanced Tab Design */}
-                Name, phone, city
+                <div>
-              </div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
-            </div>
+                    Account Status
-            <div className="md:col-span-2">
+                  </h3>
-              <h3 className="text-label1 font-medium mb-2">Activity Log</h3>
+                  <div className="flex bg-neutral-100 p-1 rounded-lg">
-              <div className="text-label2 text-neutral-600">
+                    <button
-                Recent actions...
+                      onClick={() => handleInputChange('is_active', true)}
+                      className={cn(
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200',
+                        formData.is_active
+                          ? 'bg-white text-success-700 shadow-sm ring-1 ring-success-200'
+                          : 'text-neutral-600 hover:text-neutral-800'
+                      )}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <div
+                          className={cn(
+                            'w-2 h-2 rounded-full',
+                            formData.is_active
+                              ? 'bg-success-500'
+                              : 'bg-neutral-400'
+                          )}
+                        />
+                        Active
+                      </div>
+                    </button>
+                    <button
+                      onClick={() => handleInputChange('is_active', false)}
+                      className={cn(
+                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200',
+                        !formData.is_active
+                          ? 'bg-white text-neutral-700 shadow-sm ring-1 ring-neutral-200'
+                          : 'text-neutral-600 hover:text-neutral-800'
+                      )}
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <div
+                          className={cn(
+                            'w-2 h-2 rounded-full',
+                            !formData.is_active
+                              ? 'bg-neutral-500'
+                              : 'bg-neutral-400'
+                          )}
+                        />
+                        Inactive
+                      </div>
+                    </button>
+                  </div>
+                  <p className="text-xs text-neutral-500 mt-2">
+                    {formData.is_active
+                      ? 'User can access their account and participate in activities'
+                      : 'User account is suspended and cannot access services'}
+                  </p>
+                </div>
+
+                {/* Skills Section - Optional */}
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                    Skills & Expertise{' '}
+                    <span className="text-neutral-400 text-sm font-normal">
+                      (Optional)
+                    </span>
+                  </h3>
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2 min-h-10 p-3 border border-neutral-300 rounded-lg bg-neutral-50">
+                      {formData.skills.length > 0 ? (
+                        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"
+                          >
+                            {skill}
+                            <button
+                              onClick={() =>
+                                handleSkillsChange(
+                                  formData.skills.filter((_, i) => i !== index)
+                                )
+                              }
+                              className="text-blue-600 hover:text-blue-800 ml-1"
+                            >
+                              ×
+                            </button>
+                          </span>
+                        ))
+                      ) : (
+                        <span className="text-neutral-400 text-sm">
+                          No skills added yet
+                        </span>
+                      )}
+                    </div>
+                    <select
+                      value=""
+                      onChange={(e) => {
+                        if (
+                          e.target.value &&
+                          !formData.skills.includes(e.target.value)
+                        ) {
+                          handleSkillsChange([
+                            ...formData.skills,
+                            e.target.value,
+                          ]);
+                        }
+                      }}
+                      className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white"
+                    >
+                      <option value="">Add a skill...</option>
+                      {availableSkills
+                        .filter((skill) => !formData.skills.includes(skill))
+                        .map((skill) => (
+                          <option key={skill} value={skill}>
+                            {skill}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                </div>
+
+                {/* Account Details - Read Only - Only show for existing users */}
+                {user && (
+                  <div>
+                    <h3 className="text-lg font-semibold text-neutral-900 mb-4">
+                      Account Details
+                    </h3>
+                    <div className="space-y-3 bg-neutral-50 p-4 rounded-lg">
+                      <div className="flex justify-between items-center py-1">
+                        <span className="text-neutral-600 text-sm">
+                          User ID
+                        </span>
+                        <span className="font-mono text-sm text-neutral-800">
+                          {formData.id}
+                        </span>
+                      </div>
+                      <div className="flex justify-between items-center py-1">
+                        <span className="text-neutral-600 text-sm">
+                          Last Updated
+                        </span>
+                        <span className="text-sm text-neutral-800">
+                          {new Date(formData.updated_at).toLocaleDateString(
+                            'en-US',
+                            {
+                              month: 'short',
+                              day: 'numeric',
+                              year: 'numeric',
+                            }
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </div>
+
+          {/* Footer Actions */}
+          <div className="border-t border-neutral-200 px-8 py-6">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-4">
+                <div className="text-sm text-neutral-500">
+                  {canSave
+                    ? 'Ready to save changes'
+                    : hasChanges
+                    ? 'Please fill required fields'
+                    : 'No changes made'}
+                </div>
+                {/* Delete Account Button - Only show for existing users */}
+                {user && (
+                  <button
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="text-red-600 hover:text-red-700 text-sm font-medium transition-colors"
+                  >
+                    Delete Account
+                  </button>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleCancel}
+                  className="px-6"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={!canSave}
+                  className={cn(
+                    'flex items-center gap-2 px-6',
+                    !canSave && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <SaveOutlined className="text-sm" />
+                  {user ? 'Save Changes' : 'Create User'}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Delete Confirmation Modal */}
+          {showDeleteConfirm && (
+            <div className="fixed inset-0 z-60">
+              <div
+                className="fixed inset-0 bg-black/50"
+                onClick={() => setShowDeleteConfirm(false)}
+              />
+              <div className="fixed inset-0 flex items-center justify-center p-4">
+                <div className="bg-white rounded-xl shadow-2xl w-full max-w-md">
+                  <div className="p-6">
+                    <div className="flex items-center gap-3 mb-4">
+                      <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
+                        <ExclamationOutlined className="text-red-600 text-lg" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-neutral-900">
+                          Delete Account
+                        </h3>
+                        <p className="text-sm text-neutral-500">
+                          This action cannot be undone
+                        </p>
+                      </div>
+                    </div>
+                    <p className="text-neutral-700 mb-6">
+                      Are you sure you want to permanently delete{' '}
+                      <strong>{formData.fullname}</strong>'s account? This will
+                      remove all their data and cannot be reversed.
+                    </p>
+                    <div className="flex gap-3 justify-end">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => setShowDeleteConfirm(false)}
+                        className="px-4"
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        onClick={handleDeleteAccount}
+                        className="px-4 bg-red-600 hover:bg-red-700 border-red-600"
+                      >
+                        Delete Account
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

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

@@ -1,127 +1,283 @@
-import { FC, ReactElement, useState } from 'react';
+import { FC, ReactElement, useState, useMemo, useCallback } from 'react';
 import ModalUserDetail from './_components/modal-user-detail';
 import {
   BackofficeWrapper,
   DataTable,
 } from '@imphnen-frontend-service/ui/organisms';
-import {
+import { ColumnDef } from '@tanstack/react-table';
-  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 { EditOutlined } from '@ant-design/icons';
+import {
+  EditOutlined,
+  UserOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
 // Removed unused SearchOutlined icon after schema revision
 
+// Define interface outside component
+interface UserType {
+  id: string; // UUID
+  avatar?: string;
+  fullname: string;
+  bio?: string;
+  location: string;
+  is_active: boolean; // admin can deactivate
+  skills: string[]; // Frontend Developer, Backend Developer, etc.
+  created_at: string;
+  updated_at: string;
+}
+
+// Move mock data outside component to prevent recreation
+const skillsOptions = [
+  'Frontend Developer',
+  'Backend Developer',
+  'Full Stack Developer',
+  'DevOps Engineer',
+  'UI/UX Designer',
+  'Product Manager',
+  'Data Scientist',
+  'Mobile Developer',
+];
+
+const locations = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
+const bios = [
+  'Passionate developer with 5+ years experience',
+  'Tech enthusiast and problem solver',
+  'Building scalable solutions for modern problems',
+  'Creative designer with technical background',
+  'Data-driven decision maker',
+];
+
+const mockData: UserType[] = Array.from({ length: 50 }, (_, i) => {
+  const randomSkillsCount = Math.floor(Math.random() * 3) + 1; // 1-3 skills
+  const randomSkills = skillsOptions
+    .sort(() => 0.5 - Math.random())
+    .slice(0, randomSkillsCount);
+
+  return {
+    id: `24db9e4d-ca4c-46aa-ac36-8ef04bbe01${String(i).padStart(2, '0')}`,
+    avatar:
+      i % 4 === 0
+        ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
+            i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana'
+          )}&background=random`
+        : undefined,
+    fullname:
+      i % 3 === 0
+        ? 'Ahmad Wijuana'
+        : i % 3 === 1
+        ? 'Sofia Wijuana'
+        : 'Budi Santoso',
+    bio: i % 4 === 0 ? bios[i % bios.length] : undefined,
+    location: locations[i % locations.length],
+    is_active: i % 7 !== 0, // More realistic distribution
+    skills: randomSkills,
+    created_at: new Date(
+      Date.now() - i * 86400000 * (Math.random() * 30 + 1)
+    ).toISOString(), // Random within last 30-60 days
+    updated_at: new Date().toISOString(),
+  };
+});
+
 export const HackathonUsersPage: FC = (): ReactElement => {
   const [showDetailModal, setShowDetailModal] = useState(false);
+  const [showNewUserModal, setShowNewUserModal] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
+  const [globalFilter, setGlobalFilter] = useState('');
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  // Advanced filtering states
-  const [pagination, setPagination] = useState<PaginationState>({
+  const [statusFilter, setStatusFilter] = useState('all');
-    pageIndex: 0,
+  const [locationFilter, setLocationFilter] = useState('all');
-    pageSize: 9,
+  const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
-  });
 
-  // Mock data aligned to API user schema
+  // Constants
-  interface UserType {
+  const pageSize = 10;
-    id: string;
-    fullname: string;
-    email: string;
-    is_active: boolean;
-    location: string;
-    created_at: string;
-    updated_at: string;
-    avatar?: string;
-    phone_number?: string;
-  }
 
-  const mockData: UserType[] = Array.from({ length: 50 }, (_, i) => ({
+  // Memoize the callback to prevent recreation
-    id: `24db9e4d-ca4c-46aa-ac36-8ef04bbe015f`,
+  const handleShowDetailModal = useCallback((user: UserType) => {
-    fullname: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
+    setSelectedUser(user);
-    email: `user${i + 1}@example.com`,
+    setShowDetailModal(true);
-    is_active: i % 5 !== 0,
+  }, []);
-    location: i % 2 === 0 ? 'Jakarta' : 'Bandung',
-    created_at: new Date(Date.now() - i * 86400000).toISOString(),
-    updated_at: new Date().toISOString(),
-    avatar: undefined,
-    phone_number: '+62-812-0000-000',
-  }));
 
-  const columns: ColumnDef<UserType>[] = [
+  const handleCloseDetailModal = useCallback(() => {
-    {
+    setShowDetailModal(false);
-      accessorKey: 'id',
+    setSelectedUser(null);
-      header: 'ID',
+  }, []);
-    },
-    {
-      accessorKey: 'fullname',
-      header: 'Full Name',
-    },
-    {
-      accessorKey: 'email',
-      header: 'Email',
-    },
-    {
-      accessorKey: 'location',
-      header: 'Location',
-    },
-    {
-      accessorKey: 'is_active',
-      header: 'Status',
-      cell: ({ row }) => (
-        <div
-          className={cn(
-            'py-2 px-4 text-sm rounded-2xl text-center',
-            row.original.is_active
-              ? 'bg-success-200 text-success-700'
-              : 'bg-danger-200 text-danger-700'
-          )}
-        >
-          {row.original.is_active ? 'Active' : 'Inactive'}
-        </div>
-      ),
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Joined',
-      cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString(),
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn('w-72') },
-      cell: ({ row }) => (
-        <Button
-          variant="primary"
-          size="sm"
-          className="flex items-center gap-2 w-max"
-          onClick={() => {
-            // View detail logic
-          }}
-        >
-          <EditOutlined className="text-base" /> View & Manage
-        </Button>
-      ),
-    },
-  ];
 
-  const table = useReactTable({
+  const handleShowNewUserModal = useCallback(() => {
-    data: mockData,
+    setShowNewUserModal(true);
-    columns,
+  }, []);
-    state: {
+
-      pagination,
+  const handleCloseNewUserModal = useCallback(() => {
-      rowSelection,
+    setShowNewUserModal(false);
-    },
+  }, []);
-    enableRowSelection: true,
+
-    onRowSelectionChange: setRowSelection,
+  // Filter data based on current filter states
-    getCoreRowModel: getCoreRowModel(),
+  const filteredData = useMemo(() => {
-    getPaginationRowModel: getPaginationRowModel(),
+    return mockData.filter((user) => {
-    onPaginationChange: setPagination,
+      // Status filter
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+      if (statusFilter !== 'all') {
-    manualPagination: false,
+        const isActive = statusFilter === 'active';
-  });
+        if (user.is_active !== isActive) return false;
+      }
+
+      // Location filter
+      if (locationFilter !== 'all' && user.location !== locationFilter) {
+        return false;
+      }
+
+      // Skills filter
+      if (skillsFilter.length > 0) {
+        const hasMatchingSkill = skillsFilter.some((skill) =>
+          user.skills.includes(skill)
+        );
+        if (!hasMatchingSkill) return false;
+      }
+
+      return true;
+    });
+  }, [statusFilter, locationFilter, skillsFilter]);
+
+  // Memoize columns to prevent recreation on every render
+  const columns: ColumnDef<UserType>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'fullname',
+        header: 'User',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3">
+            {/* Avatar */}
+            <div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden shrink-0">
+              {row.original.avatar ? (
+                <img
+                  src={row.original.avatar}
+                  alt={row.original.fullname}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <UserOutlined className="text-neutral-500 text-lg" />
+              )}
+            </div>
+            {/* Name only */}
+            <div className="min-w-0 flex-1">
+              <p className="font-medium text-neutral-900 truncate">
+                {row.original.fullname}
+              </p>
+            </div>
+          </div>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: 'skills',
+        header: 'Skills',
+        cell: ({ row }) => (
+          <div className="flex flex-wrap gap-1 max-w-xs">
+            {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"
+              >
+                {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">
+                +{row.original.skills.length - 2}
+              </span>
+            )}
+          </div>
+        ),
+        enableSorting: false,
+      },
+      {
+        accessorKey: 'location',
+        header: 'Location',
+        cell: ({ row }) => (
+          <span className="text-neutral-700">{row.original.location}</span>
+        ),
+        enableSorting: true,
+      },
+      {
+        accessorKey: 'is_active',
+        header: 'Status',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <div
+              className={cn(
+                'w-2 h-2 rounded-full',
+                row.original.is_active ? 'bg-success-500' : 'bg-neutral-400'
+              )}
+            />
+            <span
+              className={cn(
+                'text-sm font-medium',
+                row.original.is_active ? 'text-success-700' : 'text-neutral-500'
+              )}
+            >
+              {row.original.is_active ? 'Active' : 'Inactive'}
+            </span>
+          </div>
+        ),
+        enableSorting: true,
+        sortingFn: (rowA, rowB) => {
+          const aActive = rowA.original.is_active;
+          const bActive = rowB.original.is_active;
+          if (aActive && !bActive) return -1;
+          if (!aActive && bActive) return 1;
+          return 0;
+        },
+      },
+      {
+        accessorKey: 'created_at',
+        header: 'Joined',
+        cell: ({ row }) => (
+          <span className="text-neutral-900 text-sm">
+            {new Date(row.original.created_at).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+            })}
+          </span>
+        ),
+        enableSorting: true,
+        sortingFn: 'datetime',
+      },
+      {
+        id: 'actions',
+        header: 'Actions',
+        meta: { cellClassName: cn('w-48') },
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="primary"
+              size="sm"
+              className="flex items-center gap-2 text-sm px-4 py-2"
+              onClick={() => handleShowDetailModal(row.original)}
+            >
+              <EditOutlined className="text-sm" />
+              Manage
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              className="text-sm px-4 py-2"
+              onClick={() => {
+                // Toggle user status - implement later
+                console.log(`Toggle status for ${row.original.fullname}`);
+              }}
+            >
+              {row.original.is_active ? 'Deactivate' : 'Activate'}
+            </Button>
+          </div>
+        ),
+        enableSorting: false,
+      },
+    ],
+    [handleShowDetailModal]
+  );
 
   return (
     <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
@@ -130,32 +286,186 @@ export const HackathonUsersPage: FC = (): ReactElement => {
       </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">
+        <div className="flex flex-wrap gap-3 items-center justify-between">
-          <input
+          {/* Left side - Filters */}
-            type="text"
+          <div className="flex flex-wrap gap-3 items-center">
-            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
+            {/* Global Search with Icon */}
-            placeholder="Search name or email"
+            <div className="relative">
-          />
+              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+              <input
-            <option value="all">All Status</option>
+                type="text"
-            <option value="active">Active</option>
+                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"
-            <option value="inactive">Inactive</option>
+                placeholder="Search users by name or location..."
-          </select>
+                value={globalFilter}
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+                onChange={(e) => setGlobalFilter(e.target.value)}
-            <option value="all">All Location</option>
+              />
-            <option value="jakarta">Jakarta</option>
+            </div>
-            <option value="bandung">Bandung</option>
+
-          </select>
+            {/* 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>
+
+            {/* 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>
+
+            {/* 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"
+                value=""
+                onChange={(e) => {
+                  if (
+                    e.target.value &&
+                    !skillsFilter.includes(e.target.value)
+                  ) {
+                    setSkillsFilter((prev) => [...prev, e.target.value]);
+                  }
+                }}
+              >
+                <option value="">Add Skill Filter</option>
+                {skillsOptions.map((skill) => (
+                  <option
+                    key={skill}
+                    value={skill}
+                    disabled={skillsFilter.includes(skill)}
+                  >
+                    {skill}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* 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"
+              className="flex items-center gap-2 px-4 py-2"
+              onClick={handleShowNewUserModal}
+            >
+              <PlusOutlined className="text-sm" />
+              Add User
+            </Button>
+          </div>
         </div>
 
+        {/* Active filters display */}
+        {(skillsFilter.length > 0 ||
+          statusFilter !== 'all' ||
+          locationFilter !== 'all') && (
+          <div className="flex flex-wrap gap-2 items-center">
+            <span className="text-sm text-neutral-600">Active filters:</span>
+
+            {/* 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">
+                Status: {statusFilter}
+                <button
+                  onClick={() => setStatusFilter('all')}
+                  className="text-blue-600 hover:text-blue-800"
+                >
+                  ×
+                </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">
+                Location: {locationFilter}
+                <button
+                  onClick={() => setLocationFilter('all')}
+                  className="text-green-600 hover:text-green-800"
+                >
+                  ×
+                </button>
+              </span>
+            )}
+
+            {/* Skills filter badges */}
+            {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"
+              >
+                {skill.replace(' Developer', '').replace(' Engineer', '')}
+                <button
+                  onClick={() =>
+                    setSkillsFilter((prev) => prev.filter((s) => s !== skill))
+                  }
+                  className="text-purple-600 hover:text-purple-800"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+
+            {/* Clear all filters */}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                setStatusFilter('all');
+                setLocationFilter('all');
+                setSkillsFilter([]);
+                setGlobalFilter('');
+              }}
+              className="text-xs text-neutral-600"
+            >
+              Clear All
+            </Button>
+          </div>
+        )}
+
+        {/* Pagination-aware results display */}
+        {filteredData.length > 0 && (
+          <div className="text-sm text-neutral-600">
+            Showing {Math.min(pageSize, filteredData.length)} of{' '}
+            {filteredData.length} users
+            {filteredData.length > pageSize &&
+              ' (filtered results paginated below)'}
+          </div>
+        )}
+
         {/* Table */}
-        <DataTable data={mockData} columns={columns} table={table} />
+        <DataTable data={filteredData} columns={columns} pageSize={10} />
       </section>
 
       {/* Modals component */}
       <ModalUserDetail
         isOpen={showDetailModal}
-        onClose={() => setShowDetailModal(false)}
+        onClose={handleCloseDetailModal}
+        user={selectedUser}
+      />
+
+      {/* New User Modal */}
+      <ModalUserDetail
+        isOpen={showNewUserModal}
+        onClose={handleCloseNewUserModal}
+        user={null} // null indicates creating new user
       />
     </BackofficeWrapper>
   );

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

@@ -45,9 +45,9 @@ export const BackofficeWrapper: FC<TBackofficeWrapperProps> = ({
         </h1>
 
         <div className="flex items-center gap-x-6">
-          <Button type="button" variant="secondary" className="max-h-full p-3">
+          {/* <Button type="button" variant="secondary" className="max-h-full p-3">
             <Icon icon="mdi:bell-outline" className="size-6" />
-          </Button>
+          </Button> */}
           <div className="flex items-center gap-x-6">
             <div className="text-neutral-600 font-medium">
               <p className="text-p3">{user?.fullname || 'Full Name'}</p>

libs/ui/src/organisms/datatable/datatable.tsx

@@ -1,57 +1,113 @@
 import {
   PaginationState,
+  SortingState,
   useReactTable,
   getCoreRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
   flexRender,
   ColumnDef,
   Table,
   RowData,
+  TableOptions,
 } from '@tanstack/react-table';
 import { Pagination } from '../../molecules';
 
 import React from 'react';
 import { cn } from '@imphnen-frontend-service/utils';
 
-interface DataTableProps<T> {
+interface DataTableProps<T extends RowData> {
-  data: T[];
+  table?: Table<T>;
-  columns: ColumnDef<T>[];
+  data?: T[];
-  table: Table<T>;
+  columns?: ColumnDef<T, unknown>[];
   pageSize?: number;
+  className?: string;
 }
 
 export const DataTable = <T extends RowData>({
-  data,
+  table,
-  columns,
+  data = [],
+  columns = [],
   pageSize = 9,
+  className,
 }: DataTableProps<T>) => {
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize,
   });
+  const [sorting, setSorting] = React.useState<SortingState>([]);
 
-  const table = useReactTable({
+  // Update pagination state when pageSize prop changes
-    data,
+  React.useEffect(() => {
-    columns,
+    setPagination((prev) => ({
-    state: {
+      ...prev,
-      pagination,
+      pageSize,
-    },
+    }));
-    getCoreRowModel: getCoreRowModel(),
+  }, [pageSize]);
-    getPaginationRowModel: getPaginationRowModel(),
+
-    onPaginationChange: setPagination,
+  // Reset pagination when data changes to prevent out-of-bounds errors
-  });
+  React.useEffect(() => {
+    if (data.length > 0) {
+      setPagination((prev) => ({
+        ...prev,
+        pageIndex: 0, // Reset to first page when data changes
+      }));
+    }
+  }, [data.length]);
+
+  // Memoize data and columns to prevent unnecessary re-renders
+  const memoizedData = React.useMemo(() => data, [data]);
+  const memoizedColumns = React.useMemo(() => columns, [columns]);
+
+  // Memoize table configuration to prevent recreation on every render
+  const tableConfig = React.useMemo(() => {
+    const config: TableOptions<T> = {
+      data: memoizedData,
+      columns: memoizedColumns,
+      state: {
+        pagination,
+        sorting,
+      },
+      onPaginationChange: setPagination,
+      onSortingChange: setSorting,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    };
+
+    return config;
+  }, [memoizedData, memoizedColumns, pagination, sorting]);
+
+  // Prefer external table instance if provided; otherwise create an internal one
+  const internalTable = useReactTable(tableConfig);
+  const t = table ?? internalTable;
+
+  // Handle empty data state
+  const isEmpty = t.getRowModel().rows.length === 0;
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className={cn('flex flex-col gap-8', className)}>
       <div className="w-full overflow-x-auto">
         <table className="w-full min-w-full text-base">
           <thead className="bg-primary-50 mb-3 text-left text-nowrap">
-            {table.getHeaderGroups().map((headerGroup) => (
+            {t.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    className={cn("py-4 px-5 font-normal first:rounded-l-lg last:rounded-r-lg", header?.column?.columnDef?.meta?.headerClassName)}
+                    onClick={
+                      header.column.getCanSort()
+                        ? header.column.getToggleSortingHandler()
+                        : undefined
+                    }
+                    className={cn(
+                      'py-4 px-5 font-normal first:rounded-l-lg last:rounded-r-lg',
+                      header.column.getCanSort() &&
+                        'cursor-pointer select-none hover:bg-primary-100 transition-colors',
+                      header?.column?.columnDef?.meta?.headerClassName
+                    )}
                   >
                     {header.isPlaceholder
                       ? null
@@ -59,28 +115,60 @@ export const DataTable = <T extends RowData>({
                           header.column.columnDef.header,
                           header.getContext()
                         )}
+                    {header.column.getCanSort() && (
+                      <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>
+                        )}
+                      </span>
+                    )}
                   </th>
                 ))}
               </tr>
             ))}
           </thead>
           <tbody>
-            {table.getRowModel().rows.map((row) => (
+            {isEmpty ? (
-              <tr key={row.id} className="bg-primary-100 odd:bg-white">
+              <tr>
-                {row.getVisibleCells().map((cell, index) => (
+                <td
-                  <td
+                  colSpan={t.getAllColumns().length}
-                    key={cell.id}
+                  className="py-8 px-5 text-center text-neutral-500"
-                    className={cn("py-3 px-5 first:rounded-l-lg last:rounded-r-lg", cell?.column?.columnDef?.meta?.cellClassName)}
+                >
-                  >
+                  No data available
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
-                  </td>
-                ))}
               </tr>
-            ))}
+            ) : (
+              t.getRowModel().rows.map((row, rowIndex) => (
+                <tr
+                  key={row.id}
+                  className={cn(
+                    'hover:bg-primary-50 transition-colors',
+                    rowIndex % 2 === 0 ? 'bg-white' : 'bg-primary-100'
+                  )}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className={cn(
+                        'py-3 px-5 first:rounded-l-lg last:rounded-r-lg',
+                        cell?.column?.columnDef?.meta?.cellClassName
+                      )}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            )}
           </tbody>
         </table>
       </div>
-      <Pagination table={table} />
+      <Pagination table={t} />
     </div>
   );
 };