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
+651
@@ -0,0 +1,651 @@
|
||||
import { FC, useState, useEffect, useMemo } from 'react';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
import TeamBannerPlaceholder from './team-banner-placeholder';
|
||||
import {
|
||||
TeamOutlined,
|
||||
CalendarOutlined,
|
||||
SaveOutlined,
|
||||
CloseOutlined,
|
||||
ExclamationOutlined,
|
||||
UserOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
CrownOutlined,
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
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[];
|
||||
}
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
team: TeamType | null;
|
||||
}
|
||||
|
||||
const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
const [formData, setFormData] = useState<TeamType | null>(null);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'details' | 'members'>('details');
|
||||
|
||||
// Initialize form data when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (team) {
|
||||
// Edit existing team
|
||||
setFormData({ ...team });
|
||||
} else {
|
||||
// Create new team
|
||||
setFormData({
|
||||
id: '', // Will be generated by backend
|
||||
name: '',
|
||||
description: '',
|
||||
city: '',
|
||||
banner: undefined,
|
||||
logo: undefined,
|
||||
visibility: 'public',
|
||||
member_count: 1,
|
||||
has_submission: false,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
leader_id: '',
|
||||
members: [],
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [isOpen, team]);
|
||||
|
||||
// Check if form has changes
|
||||
const hasChanges = useMemo(() => {
|
||||
if (!formData) return false;
|
||||
if (!team) return true; // New team always has changes
|
||||
return (
|
||||
formData.name !== team.name ||
|
||||
formData.description !== team.description ||
|
||||
formData.city !== team.city ||
|
||||
formData.visibility !== team.visibility
|
||||
);
|
||||
}, [formData, team]);
|
||||
|
||||
// Check if required fields are filled
|
||||
const isFormValid = useMemo(() => {
|
||||
if (!formData) return false;
|
||||
return formData.name.trim() !== '' && formData.city.trim() !== '';
|
||||
}, [formData]);
|
||||
|
||||
const canSave = hasChanges && isFormValid;
|
||||
|
||||
// Get leader and other members
|
||||
const leader = team?.members.find((m) => m.role === 'leader');
|
||||
const acceptedMembers =
|
||||
team?.members.filter((m) => m.status === 'accepted') || [];
|
||||
const pendingMembers =
|
||||
team?.members.filter((m) => m.status === 'pending') || [];
|
||||
|
||||
if (!isOpen || !formData) return null;
|
||||
|
||||
const handleInputChange = (
|
||||
field: keyof TeamType,
|
||||
value: string | boolean | 'public' | 'private'
|
||||
) => {
|
||||
setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!formData) return;
|
||||
|
||||
console.log('Saving team:', formData);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!team) return;
|
||||
|
||||
console.log('Deleting team:', team.id);
|
||||
setShowDeleteConfirm(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const cities = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-neutral-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
|
||||
<TeamOutlined className="text-primary-600 text-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-neutral-900">
|
||||
{team ? 'Team Details' : 'Create New Team'}
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-500">
|
||||
{team
|
||||
? 'View and manage team information'
|
||||
: 'Add a new team to the hackathon'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="shrink-0"
|
||||
>
|
||||
<CloseOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Banner Section (for existing teams) */}
|
||||
{team && (
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Team Banner
|
||||
</label>
|
||||
<TeamBannerPlaceholder
|
||||
banner={team.banner}
|
||||
teamName={team.name}
|
||||
className="rounded-lg border border-neutral-200"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Team Name */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Team Name <span className="text-danger-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
|
||||
placeholder="Enter team name"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Description */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
|
||||
placeholder="Enter team description (optional)"
|
||||
rows={3}
|
||||
value={formData.description || ''}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* City */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
City <span className="text-danger-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
>
|
||||
<option value="">Select a city</option>
|
||||
{cities.map((city) => (
|
||||
<option key={city} value={city}>
|
||||
{city}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Visibility */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Team Visibility
|
||||
</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="visibility"
|
||||
value="public"
|
||||
checked={formData.visibility === 'public'}
|
||||
onChange={(e) =>
|
||||
handleInputChange('visibility', e.target.value as 'public')
|
||||
}
|
||||
className="text-primary-600"
|
||||
/>
|
||||
<EyeOutlined className="text-info-600" />
|
||||
<span className="text-sm">Public</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="visibility"
|
||||
value="private"
|
||||
checked={formData.visibility === 'private'}
|
||||
onChange={(e) =>
|
||||
handleInputChange('visibility', e.target.value as 'private')
|
||||
}
|
||||
className="text-primary-600"
|
||||
/>
|
||||
<EyeInvisibleOutlined className="text-neutral-600" />
|
||||
<span className="text-sm">Private</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Information (Read-only for existing teams) */}
|
||||
{team && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Members
|
||||
</label>
|
||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
||||
<UserOutlined className="text-neutral-500" />
|
||||
<span className="text-sm text-neutral-700">
|
||||
{team.member_count} member
|
||||
{team.member_count !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Submission Status
|
||||
</label>
|
||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full',
|
||||
team.has_submission ? 'bg-success-500' : 'bg-danger-500'
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'text-sm font-medium',
|
||||
team.has_submission
|
||||
? 'text-success-700'
|
||||
: 'text-danger-700'
|
||||
)}
|
||||
>
|
||||
{team.has_submission ? 'Submitted' : 'Not Submitted'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs for Details and Members */}
|
||||
{team && (
|
||||
<div>
|
||||
<div className="flex border-b border-neutral-200">
|
||||
<button
|
||||
className={cn(
|
||||
'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
|
||||
activeTab === 'details'
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
)}
|
||||
onClick={() => setActiveTab('details')}
|
||||
>
|
||||
Team Details
|
||||
</button>
|
||||
<button
|
||||
className={cn(
|
||||
'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
|
||||
activeTab === 'members'
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
)}
|
||||
onClick={() => setActiveTab('members')}
|
||||
>
|
||||
Members ({team.member_count})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
{activeTab === 'details' && (
|
||||
<div className="space-y-4">
|
||||
{/* Leader Information */}
|
||||
{leader && (
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Team Leader
|
||||
</label>
|
||||
<div className="p-3 bg-neutral-50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden">
|
||||
{leader.user.avatar ? (
|
||||
<img
|
||||
src={leader.user.avatar}
|
||||
alt={leader.user.fullname}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<CrownOutlined className="text-yellow-600 text-sm" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-neutral-900">
|
||||
{leader.user.fullname}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{leader.user.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timestamps */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Created
|
||||
</label>
|
||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
||||
<CalendarOutlined className="text-neutral-500" />
|
||||
<span className="text-sm text-neutral-700">
|
||||
{new Date(team.created_at).toLocaleDateString(
|
||||
'en-US',
|
||||
{
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Last Updated
|
||||
</label>
|
||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
||||
<CalendarOutlined className="text-neutral-500" />
|
||||
<span className="text-sm text-neutral-700">
|
||||
{new Date(team.updated_at).toLocaleDateString(
|
||||
'en-US',
|
||||
{
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'members' && (
|
||||
<div className="space-y-4">
|
||||
{/* Accepted Members */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-neutral-700 mb-3">
|
||||
Active Members ({acceptedMembers.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{acceptedMembers.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="flex items-center gap-3 p-3 bg-neutral-50 rounded-lg"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden">
|
||||
{member.user.avatar ? (
|
||||
<img
|
||||
src={member.user.avatar}
|
||||
alt={member.user.fullname}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<UserOutlined className="text-neutral-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium text-neutral-900">
|
||||
{member.user.fullname}
|
||||
</p>
|
||||
{member.role === 'leader' && (
|
||||
<CrownOutlined className="text-yellow-600 text-xs" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{member.user.email}
|
||||
</p>
|
||||
{member.user.skills.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{member.user.skills
|
||||
.slice(0, 2)
|
||||
.map((skill, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-1 py-0.5 bg-primary-100 text-primary-700 text-xs rounded"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
{member.user.skills.length > 2 && (
|
||||
<span className="text-xs text-neutral-400">
|
||||
+{member.user.skills.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-neutral-500">
|
||||
Joined{' '}
|
||||
{new Date(member.joined_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pending Members */}
|
||||
{pendingMembers.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-neutral-700 mb-3">
|
||||
Pending Members ({pendingMembers.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{pendingMembers.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="flex items-center gap-3 p-3 bg-orange-50 border border-orange-200 rounded-lg"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden">
|
||||
{member.user.avatar ? (
|
||||
<img
|
||||
src={member.user.avatar}
|
||||
alt={member.user.fullname}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<UserOutlined className="text-neutral-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium text-neutral-900">
|
||||
{member.user.fullname}
|
||||
</p>
|
||||
<ClockCircleOutlined className="text-orange-600 text-xs" />
|
||||
</div>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{member.user.email}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
className="flex items-center gap-1"
|
||||
onClick={() =>
|
||||
console.log('Accept member:', member.id)
|
||||
}
|
||||
>
|
||||
<CheckCircleOutlined className="text-xs" />
|
||||
Accept
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="flex items-center gap-1"
|
||||
onClick={() =>
|
||||
console.log('Reject member:', member.id)
|
||||
}
|
||||
>
|
||||
<CloseCircleOutlined className="text-xs" />
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between p-6 border-t border-neutral-200">
|
||||
<div>
|
||||
{team && (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="md"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
Delete Team
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="secondary" size="md" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={handleSave}
|
||||
disabled={!canSave}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<SaveOutlined />
|
||||
{team ? 'Save Changes' : 'Create Team'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{showDeleteConfirm && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-60 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-full bg-danger-100 flex items-center justify-center">
|
||||
<ExclamationOutlined className="text-danger-600 text-xl" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900">
|
||||
Delete Team
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-500">
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-neutral-700 mb-6">
|
||||
Are you sure you want to delete "{team?.name}"? This will
|
||||
permanently remove the team and all associated data.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-3 justify-end">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="md"
|
||||
onClick={handleDelete}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
Delete Team
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalTeamDetail;
|
||||
@@ -0,0 +1,218 @@
|
||||
import { FC } from 'react';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import {
|
||||
CloseOutlined,
|
||||
LinkOutlined,
|
||||
ProjectOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
interface SubmissionModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
teamId: string;
|
||||
teamName: string;
|
||||
}
|
||||
|
||||
const SubmissionModal: FC<SubmissionModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
teamId,
|
||||
teamName,
|
||||
}) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
// Mock submission data
|
||||
const mockSubmission = {
|
||||
id: `submission-${teamId}`,
|
||||
project_name: `${teamName} Project`,
|
||||
repository_url: `https://github.com/${teamName
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')}/hackathon-project`,
|
||||
demo_url: `https://${teamName
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')}.vercel.app`,
|
||||
presentation_url: `https://docs.google.com/presentation/d/${teamId}/edit`,
|
||||
submitted_at: new Date().toISOString(),
|
||||
status: 'submitted',
|
||||
description:
|
||||
'An innovative solution built during the IMPHNEN x Kolosal.ai Hackathon 2025.',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-neutral-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-success-100 flex items-center justify-center">
|
||||
<ProjectOutlined className="text-success-600 text-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-neutral-900">
|
||||
Project Submission
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-500">
|
||||
{teamName} - Hackathon Submission Details
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="shrink-0"
|
||||
>
|
||||
<CloseOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Submission Status */}
|
||||
<div className="flex items-center gap-3 p-4 bg-success-50 border border-success-200 rounded-lg">
|
||||
<div className="w-3 h-3 rounded-full bg-success-500"></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-success-800">
|
||||
Submission Completed
|
||||
</p>
|
||||
<p className="text-xs text-success-600">
|
||||
Submitted on{' '}
|
||||
{new Date(mockSubmission.submitted_at).toLocaleDateString(
|
||||
'en-US',
|
||||
{
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Information */}
|
||||
<div className="grid gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Project Name
|
||||
</label>
|
||||
<p className="text-sm text-neutral-900 p-3 bg-neutral-50 rounded-lg">
|
||||
{mockSubmission.project_name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Project Description
|
||||
</label>
|
||||
<p className="text-sm text-neutral-900 p-3 bg-neutral-50 rounded-lg">
|
||||
{mockSubmission.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Links Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Repository
|
||||
</label>
|
||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
||||
<span className="text-sm text-neutral-700 flex-1 truncate">
|
||||
{mockSubmission.repository_url}
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="shrink-0"
|
||||
onClick={() =>
|
||||
window.open(mockSubmission.repository_url, '_blank')
|
||||
}
|
||||
>
|
||||
<LinkOutlined className="text-xs" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Live Demo
|
||||
</label>
|
||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
||||
<span className="text-sm text-neutral-700 flex-1 truncate">
|
||||
{mockSubmission.demo_url}
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="shrink-0"
|
||||
onClick={() =>
|
||||
window.open(mockSubmission.demo_url, '_blank')
|
||||
}
|
||||
>
|
||||
<LinkOutlined className="text-xs" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Presentation
|
||||
</label>
|
||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
||||
<span className="text-sm text-neutral-700 flex-1 truncate">
|
||||
{mockSubmission.presentation_url}
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="shrink-0"
|
||||
onClick={() =>
|
||||
window.open(mockSubmission.presentation_url, '_blank')
|
||||
}
|
||||
>
|
||||
<LinkOutlined className="text-xs" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Note */}
|
||||
<div className="p-4 bg-info-50 border border-info-200 rounded-lg">
|
||||
<p className="text-sm text-info-800">
|
||||
<strong>Note:</strong> This is a submission preview. The team has
|
||||
successfully submitted their project. You can review the
|
||||
submission details and access the project links above.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end p-6 border-t border-neutral-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="secondary" size="md" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={() => {
|
||||
// Navigate to hackathon-submissions page
|
||||
console.log('Navigate to full submissions page');
|
||||
// You can implement navigation here
|
||||
onClose();
|
||||
}}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ProjectOutlined />
|
||||
View All Submissions
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubmissionModal;
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
import { FC } from 'react';
|
||||
import { TeamOutlined } from '@ant-design/icons';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
|
||||
interface TeamBannerPlaceholderProps {
|
||||
banner?: string;
|
||||
teamName: string;
|
||||
className?: string;
|
||||
showPlaceholder?: boolean;
|
||||
}
|
||||
|
||||
const TeamBannerPlaceholder: FC<TeamBannerPlaceholderProps> = ({
|
||||
banner,
|
||||
teamName,
|
||||
className = '',
|
||||
showPlaceholder = true,
|
||||
}) => {
|
||||
const aspectRatioClass = 'aspect-[3/1]'; // 3:1 aspect ratio
|
||||
|
||||
if (!banner && !showPlaceholder) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (banner) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full bg-gray-100 overflow-hidden relative',
|
||||
aspectRatioClass,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={banner}
|
||||
alt={`${teamName} banner`}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
// Fallback to placeholder if image fails to load
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
const placeholder = target.nextElementSibling as HTMLElement;
|
||||
if (placeholder) {
|
||||
placeholder.style.display = 'flex';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/* Fallback placeholder (hidden by default, shown on image error) */}
|
||||
<div
|
||||
className={cn(
|
||||
'absolute inset-0 bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
|
||||
'hidden' // Hidden by default
|
||||
)}
|
||||
>
|
||||
<div className="text-center">
|
||||
<TeamOutlined className="text-4xl text-gray-400 mb-2" />
|
||||
<p className="text-sm text-gray-500 font-medium">{teamName}</p>
|
||||
<p className="text-xs text-gray-400">Team Banner</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// No banner - show placeholder
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
|
||||
aspectRatioClass,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="text-center">
|
||||
<TeamOutlined className="text-4xl text-gray-400 mb-2" />
|
||||
<p className="text-sm text-gray-500 font-medium">{teamName}</p>
|
||||
<p className="text-xs text-gray-400">No Banner</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamBannerPlaceholder;
|
||||
@@ -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