feat(backoffice): update hackathon team management page
- add modal for manage team, add new team, and view project submission - reorganize the table column and data table
This commit is contained in:
Hafid Nur
@@ -1,179 +1,474 @@
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
import { FC, ReactElement, useState, useMemo, useCallback } from 'react';
|
||||
import ModalTeamDetail from './_components/modal-team-detail-new';
|
||||
import SubmissionModal from './_components/submission-modal';
|
||||
import {
|
||||
BackofficeWrapper,
|
||||
DataTable,
|
||||
} from '@imphnen-frontend-service/ui/organisms';
|
||||
import {
|
||||
ColumnDef,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
PaginationState,
|
||||
RowSelectionState,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
import { useTeams } from '@imphnen-frontend-service/service';
|
||||
import { EditOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
EditOutlined,
|
||||
TeamOutlined,
|
||||
SearchOutlined,
|
||||
FilterOutlined,
|
||||
PlusOutlined,
|
||||
UserOutlined,
|
||||
ArrowRightOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// Define interface outside component
|
||||
interface TeamMember {
|
||||
id: string;
|
||||
joined_at: string;
|
||||
role: 'leader' | 'member';
|
||||
status: 'pending' | 'accepted' | 'rejected';
|
||||
team_id: string;
|
||||
user: {
|
||||
avatar?: string;
|
||||
bio?: string;
|
||||
created_at: string;
|
||||
email: string;
|
||||
fullname: string;
|
||||
id: string;
|
||||
is_active: boolean;
|
||||
location: string;
|
||||
phone_number?: string;
|
||||
skills: string[];
|
||||
updated_at: string;
|
||||
};
|
||||
user_id: string;
|
||||
}
|
||||
|
||||
interface TeamType {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
city: string;
|
||||
banner?: string;
|
||||
logo?: string;
|
||||
visibility: 'public' | 'private';
|
||||
member_count: number;
|
||||
has_submission: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
leader_id: string;
|
||||
members: TeamMember[];
|
||||
}
|
||||
|
||||
// Move mock data outside component to prevent recreation
|
||||
const cities = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
|
||||
const teamNames = [
|
||||
'Innovators',
|
||||
'Hackers',
|
||||
'Builders',
|
||||
'Creators',
|
||||
'Pioneers',
|
||||
'Developers',
|
||||
'Engineers',
|
||||
'Coders',
|
||||
'Tech Stars',
|
||||
'Digital Wizards',
|
||||
];
|
||||
|
||||
const descriptions = [
|
||||
'Building innovative solutions for modern problems with cutting-edge technology',
|
||||
'Passionate developers creating the next generation of web applications',
|
||||
'Focused on sustainable tech solutions that make a positive impact',
|
||||
'Experienced team working on scalable fintech innovations',
|
||||
'Creative minds developing user-centric mobile applications',
|
||||
'Full-stack developers building comprehensive business solutions',
|
||||
'AI enthusiasts creating intelligent automation tools',
|
||||
'Open source advocates building community-driven platforms',
|
||||
];
|
||||
|
||||
const skills = [
|
||||
'Frontend Developer',
|
||||
'Backend Developer',
|
||||
'Full Stack Developer',
|
||||
'DevOps Engineer',
|
||||
'UI/UX Designer',
|
||||
'Product Manager',
|
||||
'Data Scientist',
|
||||
'Mobile Developer',
|
||||
];
|
||||
|
||||
const generateMembers = (
|
||||
count: number,
|
||||
teamId: string,
|
||||
leaderId: string
|
||||
): TeamMember[] => {
|
||||
return Array.from({ length: count }, (_, i) => {
|
||||
const isLeader = i === 0;
|
||||
const memberId = isLeader ? leaderId : `user-${teamId}-${i}`;
|
||||
|
||||
return {
|
||||
id: `member-${teamId}-${i}`,
|
||||
joined_at: new Date(
|
||||
Date.now() - (count - i) * 86400000 * Math.random() * 5
|
||||
).toISOString(),
|
||||
role: isLeader ? 'leader' : 'member',
|
||||
status: Math.random() > 0.8 ? 'pending' : 'accepted',
|
||||
team_id: teamId,
|
||||
user: {
|
||||
id: memberId,
|
||||
avatar:
|
||||
Math.random() > 0.6
|
||||
? `https://ui-avatars.com/api/?name=${encodeURIComponent(
|
||||
`User ${i}`
|
||||
)}`
|
||||
: undefined,
|
||||
bio:
|
||||
Math.random() > 0.5
|
||||
? `Passionate ${skills[
|
||||
Math.floor(Math.random() * skills.length)
|
||||
].toLowerCase()} with ${
|
||||
Math.floor(Math.random() * 8) + 1
|
||||
}+ years experience`
|
||||
: undefined,
|
||||
created_at: new Date(
|
||||
Date.now() - Math.random() * 365 * 86400000
|
||||
).toISOString(),
|
||||
email: `user${i}.team${teamId}@example.com`,
|
||||
fullname: `${
|
||||
['Ahmad', 'Sofia', 'Budi', 'Sari', 'Rizki', 'Maya', 'Andi', 'Dina'][
|
||||
Math.floor(Math.random() * 8)
|
||||
]
|
||||
} ${
|
||||
[
|
||||
'Wijuana',
|
||||
'Santoso',
|
||||
'Pratama',
|
||||
'Dewi',
|
||||
'Nugroho',
|
||||
'Sari',
|
||||
'Putra',
|
||||
'Lestari',
|
||||
][Math.floor(Math.random() * 8)]
|
||||
}`,
|
||||
is_active: true,
|
||||
location: cities[Math.floor(Math.random() * cities.length)],
|
||||
phone_number:
|
||||
Math.random() > 0.7
|
||||
? `+62${Math.floor(Math.random() * 9000000000) + 1000000000}`
|
||||
: undefined,
|
||||
skills: skills.slice(0, Math.floor(Math.random() * 3) + 1),
|
||||
updated_at: new Date().toISOString(),
|
||||
},
|
||||
user_id: memberId,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const mockData: TeamType[] = Array.from({ length: 50 }, (_, i) => {
|
||||
const teamId = `team-${String(i + 1).padStart(3, '0')}`;
|
||||
const memberCount = Math.floor(Math.random() * 5) + 1; // 1-5 members
|
||||
const leaderId = `leader-${teamId}`;
|
||||
const members = generateMembers(memberCount, teamId, leaderId);
|
||||
|
||||
return {
|
||||
id: teamId,
|
||||
name: `Team ${teamNames[i % teamNames.length]} ${
|
||||
Math.floor(i / teamNames.length) + 1
|
||||
}`,
|
||||
description:
|
||||
i % 4 === 0 ? undefined : descriptions[i % descriptions.length],
|
||||
city: cities[i % cities.length],
|
||||
banner:
|
||||
i % 3 === 0 ? undefined : `https://picsum.photos/600/200?random=${i}`, // 3:1 aspect ratio
|
||||
logo:
|
||||
i % 4 === 0
|
||||
? undefined
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(
|
||||
teamNames[i % teamNames.length]
|
||||
)}&background=random&size=120`,
|
||||
visibility: i % 4 === 0 ? 'private' : 'public',
|
||||
member_count: memberCount,
|
||||
has_submission: i % 3 !== 0,
|
||||
created_at: new Date(
|
||||
Date.now() - i * 86400000 * (Math.random() * 15 + 1)
|
||||
).toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
leader_id: leaderId,
|
||||
members: members,
|
||||
};
|
||||
});
|
||||
|
||||
export const HackathonTeamsPage: FC = (): ReactElement => {
|
||||
const { data: teamsData } = useTeams();
|
||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
||||
const [showNewTeamModal, setShowNewTeamModal] = useState(false);
|
||||
const [showSubmissionModal, setShowSubmissionModal] = useState(false);
|
||||
const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null);
|
||||
const [selectedSubmissionTeam, setSelectedSubmissionTeam] =
|
||||
useState<TeamType | null>(null);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
|
||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
|
||||
const [pagination, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 9,
|
||||
});
|
||||
// Advanced filtering states
|
||||
const [visibilityFilter, setVisibilityFilter] = useState('all');
|
||||
const [cityFilter, setCityFilter] = useState('all');
|
||||
const [submissionFilter, setSubmissionFilter] = useState('all');
|
||||
const [memberCountFilter, setMemberCountFilter] = useState('all');
|
||||
|
||||
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`,
|
||||
},
|
||||
},
|
||||
}));
|
||||
// Constants
|
||||
const pageSize = 10;
|
||||
|
||||
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;
|
||||
};
|
||||
};
|
||||
}
|
||||
// Memoize the callback to prevent recreation
|
||||
const handleShowDetailModal = useCallback((team: TeamType) => {
|
||||
setSelectedTeam(team);
|
||||
setShowDetailModal(true);
|
||||
}, []);
|
||||
|
||||
const columns: ColumnDef<TeamType>[] = [
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Team Name',
|
||||
},
|
||||
{
|
||||
accessorKey: 'city',
|
||||
header: 'City',
|
||||
},
|
||||
{
|
||||
accessorKey: 'visibility',
|
||||
header: 'Visibility',
|
||||
cell: ({ row }) => {
|
||||
const isPublic = row.original.visibility === 'public';
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'py-2 px-4 text-sm rounded-2xl text-center',
|
||||
isPublic
|
||||
? 'bg-info-200 text-info-700'
|
||||
: 'bg-gray-200 text-gray-700'
|
||||
)}
|
||||
>
|
||||
{isPublic ? 'Public' : 'Private'}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'member_count',
|
||||
header: 'Members',
|
||||
},
|
||||
{
|
||||
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}
|
||||
const handleCloseDetailModal = useCallback(() => {
|
||||
setShowDetailModal(false);
|
||||
setSelectedTeam(null);
|
||||
}, []);
|
||||
|
||||
const handleShowNewTeamModal = useCallback(() => {
|
||||
setShowNewTeamModal(true);
|
||||
}, []);
|
||||
|
||||
const handleCloseNewTeamModal = useCallback(() => {
|
||||
setShowNewTeamModal(false);
|
||||
}, []);
|
||||
|
||||
const handleShowSubmissionModal = useCallback((team: TeamType) => {
|
||||
setSelectedSubmissionTeam(team);
|
||||
setShowSubmissionModal(true);
|
||||
}, []);
|
||||
|
||||
const handleCloseSubmissionModal = useCallback(() => {
|
||||
setShowSubmissionModal(false);
|
||||
setSelectedSubmissionTeam(null);
|
||||
}, []);
|
||||
|
||||
// Filter data based on current filter states
|
||||
const filteredData = useMemo(() => {
|
||||
return mockData.filter((team) => {
|
||||
// Global search filter
|
||||
if (globalFilter) {
|
||||
const searchTerm = globalFilter.toLowerCase();
|
||||
const leaderName =
|
||||
team.members.find((m) => m.role === 'leader')?.user.fullname || '';
|
||||
const memberNames = team.members.map((m) => m.user.fullname).join(' ');
|
||||
|
||||
if (
|
||||
!team.name.toLowerCase().includes(searchTerm) &&
|
||||
!team.city.toLowerCase().includes(searchTerm) &&
|
||||
!team.description?.toLowerCase().includes(searchTerm) &&
|
||||
!leaderName.toLowerCase().includes(searchTerm) &&
|
||||
!memberNames.toLowerCase().includes(searchTerm)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Visibility filter
|
||||
if (visibilityFilter !== 'all' && team.visibility !== visibilityFilter) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// City filter
|
||||
if (cityFilter !== 'all' && team.city !== cityFilter) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Submission filter
|
||||
if (submissionFilter !== 'all') {
|
||||
const hasSubmission = submissionFilter === 'submitted';
|
||||
if (team.has_submission !== hasSubmission) return false;
|
||||
}
|
||||
|
||||
// Member count filter
|
||||
if (memberCountFilter !== 'all') {
|
||||
const count = parseInt(memberCountFilter);
|
||||
if (team.member_count !== count) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [
|
||||
globalFilter,
|
||||
visibilityFilter,
|
||||
cityFilter,
|
||||
submissionFilter,
|
||||
memberCountFilter,
|
||||
]);
|
||||
|
||||
// Memoize columns to prevent recreation on every render
|
||||
const columns: ColumnDef<TeamType>[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Team',
|
||||
cell: ({ row }) => {
|
||||
const team = row.original;
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Team Logo */}
|
||||
<div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center shrink-0 overflow-hidden">
|
||||
{team.logo ? (
|
||||
<img
|
||||
src={team.logo}
|
||||
alt={team.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<TeamOutlined className="text-neutral-400 text-lg" />
|
||||
)}
|
||||
</div>
|
||||
{/* Team Name & Description */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-medium text-neutral-900 truncate">
|
||||
{team.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{leader.email}</div>
|
||||
);
|
||||
},
|
||||
enableSorting: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'city',
|
||||
header: 'City',
|
||||
cell: ({ row }) => (
|
||||
<span className="text-neutral-700">{row.original.city}</span>
|
||||
),
|
||||
enableSorting: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'visibility',
|
||||
header: 'Visibility',
|
||||
cell: ({ row }) => {
|
||||
const isPublic = row.original.visibility === 'public';
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 px-2 py-1 rounded-2xl text-xs font-medium',
|
||||
isPublic
|
||||
? 'bg-success-100 text-success-800'
|
||||
: 'bg-neutral-100 text-neutral-700'
|
||||
)}
|
||||
>
|
||||
{isPublic ? 'Public' : 'Private'}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
enableSorting: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'member_count',
|
||||
header: 'Members',
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<UserOutlined className="text-neutral-400 text-sm" />
|
||||
<span className="text-sm text-neutral-700">
|
||||
{row.original.member_count}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400 italic">-</span>
|
||||
);
|
||||
),
|
||||
enableSorting: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'has_submission',
|
||||
header: 'Submitted',
|
||||
cell: ({ row }) => {
|
||||
const hasSubmission = row.original.has_submission;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'py-2 px-4 text-sm rounded-2xl text-center',
|
||||
hasSubmission
|
||||
? 'bg-success-200 text-success-700'
|
||||
: 'bg-danger-200 text-danger-700'
|
||||
)}
|
||||
>
|
||||
{hasSubmission ? 'Yes' : 'No'}
|
||||
{
|
||||
id: 'leader',
|
||||
header: 'Leader',
|
||||
cell: ({ row }) => {
|
||||
const leader = row.original.members.find(
|
||||
(m) => m.role === 'leader'
|
||||
)?.user;
|
||||
return leader ? (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-neutral-900">
|
||||
{leader.fullname}
|
||||
</div>
|
||||
<div className="text-xs text-neutral-500">{leader.email}</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-neutral-400 italic">No leader</span>
|
||||
);
|
||||
},
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
accessorKey: 'has_submission',
|
||||
header: 'Submission',
|
||||
cell: ({ row }) => {
|
||||
const hasSubmission = row.original.has_submission;
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full',
|
||||
hasSubmission ? 'bg-success-500' : 'bg-danger-500'
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
className={cn(
|
||||
'text-sm font-medium',
|
||||
hasSubmission ? 'text-success-700' : 'text-danger-700'
|
||||
)}
|
||||
>
|
||||
{hasSubmission ? 'Submitted' : 'Not Submitted'}
|
||||
</span>
|
||||
{hasSubmission && (
|
||||
<button
|
||||
className="text-xs text-primary-600 hover:text-primary-800 text-left cursor-pointer"
|
||||
onClick={() => handleShowSubmissionModal(row.original)}
|
||||
>
|
||||
View Submission <ArrowRightOutlined />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
enableSorting: true,
|
||||
sortingFn: (rowA, rowB) => {
|
||||
const aSubmission = rowA.original.has_submission;
|
||||
const bSubmission = rowB.original.has_submission;
|
||||
if (aSubmission && !bSubmission) return -1;
|
||||
if (!aSubmission && bSubmission) return 1;
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: 'Created',
|
||||
cell: ({ row }) => (
|
||||
<span className="text-neutral-900 text-sm">
|
||||
{new Date(row.original.created_at).toLocaleDateString('en-UK', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
),
|
||||
enableSorting: true,
|
||||
sortingFn: 'datetime',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'updated_at',
|
||||
header: 'Last Updated',
|
||||
cell: ({ row }) => {
|
||||
return new Date(row.original.updated_at).toLocaleDateString();
|
||||
{
|
||||
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>
|
||||
</div>
|
||||
),
|
||||
enableSorting: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: 'Action',
|
||||
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 w-max"
|
||||
onClick={() => {
|
||||
// View detail logic
|
||||
}}
|
||||
>
|
||||
<EditOutlined className="text-base" /> View & 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,
|
||||
});
|
||||
],
|
||||
[handleShowDetailModal, handleShowSubmissionModal]
|
||||
);
|
||||
|
||||
return (
|
||||
<BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
|
||||
@@ -182,27 +477,212 @@ export const HackathonTeamsPage: 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">
|
||||
<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 className="flex flex-wrap gap-3 items-center justify-between">
|
||||
{/* Left side - Search & filters */}
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
{/* 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-80 focus:border-primary-500 focus:outline-none"
|
||||
placeholder="Search teams by name, city, or leader..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Visibility Filter */}
|
||||
<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={visibilityFilter}
|
||||
onChange={(e) => setVisibilityFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="public">Public</option>
|
||||
<option value="private">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* City Filter */}
|
||||
<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={cityFilter}
|
||||
onChange={(e) => setCityFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All Cities</option>
|
||||
{cities.map((city) => (
|
||||
<option key={city} value={city}>
|
||||
{city}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Member Count Filter */}
|
||||
<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={memberCountFilter}
|
||||
onChange={(e) => setMemberCountFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All Member Count</option>
|
||||
<option value="1">1 Member</option>
|
||||
<option value="2">2 Members</option>
|
||||
<option value="3">3 Members</option>
|
||||
<option value="4">4 Members</option>
|
||||
<option value="5">5 Members</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Submission Filter */}
|
||||
<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={submissionFilter}
|
||||
onChange={(e) => setSubmissionFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All Submissions</option>
|
||||
<option value="submitted">Submitted</option>
|
||||
<option value="pending">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side - Add Team Button */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
onClick={handleShowNewTeamModal}
|
||||
>
|
||||
<PlusOutlined className="text-sm" />
|
||||
Add Team
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active filters display */}
|
||||
{(visibilityFilter !== 'all' ||
|
||||
cityFilter !== 'all' ||
|
||||
submissionFilter !== 'all' ||
|
||||
memberCountFilter !== 'all') && (
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<span className="text-sm text-neutral-600">Active filters:</span>
|
||||
|
||||
{/* Visibility filter badge */}
|
||||
{visibilityFilter !== 'all' && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
|
||||
Visibility: {visibilityFilter}
|
||||
<button
|
||||
onClick={() => setVisibilityFilter('all')}
|
||||
className="text-info-600 hover:text-info-800 cursor-pointer"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* City filter badge */}
|
||||
{cityFilter !== 'all' && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
|
||||
City: {cityFilter}
|
||||
<button
|
||||
onClick={() => setCityFilter('all')}
|
||||
className="text-green-600 hover:text-green-800 cursor-pointer"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Member count filter badge */}
|
||||
{memberCountFilter !== 'all' && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 rounded-2xl text-sm">
|
||||
Members: {memberCountFilter}
|
||||
<button
|
||||
onClick={() => setMemberCountFilter('all')}
|
||||
className="text-blue-600 hover:text-blue-800 cursor-pointer"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Submission filter badge */}
|
||||
{submissionFilter !== 'all' && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-2xl text-sm">
|
||||
Submission: {submissionFilter}
|
||||
<button
|
||||
onClick={() => setSubmissionFilter('all')}
|
||||
className="text-purple-600 hover:text-purple-800 cursor-pointer"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Clear all filters */}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setVisibilityFilter('all');
|
||||
setCityFilter('all');
|
||||
setSubmissionFilter('all');
|
||||
setMemberCountFilter('all');
|
||||
setGlobalFilter('');
|
||||
}}
|
||||
className="text-sm 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} teams
|
||||
{filteredData.length > pageSize}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Table */}
|
||||
<DataTable data={mockData} columns={columns} table={table} />
|
||||
<DataTable data={filteredData} columns={columns} pageSize={10} />
|
||||
</section>
|
||||
{/* Modals extracted into shared backoffice components */}
|
||||
|
||||
{/* Modals component */}
|
||||
<ModalTeamDetail
|
||||
isOpen={showDetailModal}
|
||||
onClose={handleCloseDetailModal}
|
||||
team={selectedTeam}
|
||||
/>
|
||||
|
||||
{/* New Team Modal */}
|
||||
<ModalTeamDetail
|
||||
isOpen={showNewTeamModal}
|
||||
onClose={handleCloseNewTeamModal}
|
||||
team={null} // null indicates creating new team
|
||||
/>
|
||||
|
||||
{/* Submission Modal */}
|
||||
{selectedSubmissionTeam && (
|
||||
<SubmissionModal
|
||||
isOpen={showSubmissionModal}
|
||||
onClose={handleCloseSubmissionModal}
|
||||
teamId={selectedSubmissionTeam.id}
|
||||
teamName={selectedSubmissionTeam.name}
|
||||
/>
|
||||
)}
|
||||
</BackofficeWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user