feat(backoffice): improve hackathon team modal UI and add API contract
- Add feature to select city in team detail modal using CityFilterSelect component - Add feature to change team logo and banner - Add API contract documentation for hackathon teams in backoffice
This commit is contained in:
Hafid Nur
+216
-43
@@ -1,7 +1,8 @@
|
||||
import { FC, useState, useEffect, useMemo } 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 TeamBannerPlaceholder from './team-banner-placeholder';
|
||||
import { CityFilterSelect } from '../../../../components/city-filter-select';
|
||||
import {
|
||||
TeamOutlined,
|
||||
CalendarOutlined,
|
||||
@@ -16,6 +17,8 @@ import {
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
CameraOutlined,
|
||||
UploadOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
interface TeamMember {
|
||||
@@ -66,6 +69,9 @@ 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');
|
||||
const [showLogoMenu, setShowLogoMenu] = useState(false);
|
||||
const logoInputRef = useRef<HTMLInputElement>(null);
|
||||
const bannerInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Initialize form data when modal opens
|
||||
useEffect(() => {
|
||||
@@ -102,7 +108,9 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
formData.name !== team.name ||
|
||||
formData.description !== team.description ||
|
||||
formData.city !== team.city ||
|
||||
formData.visibility !== team.visibility
|
||||
formData.visibility !== team.visibility ||
|
||||
formData.logo !== team.logo ||
|
||||
formData.banner !== team.banner
|
||||
);
|
||||
}, [formData, team]);
|
||||
|
||||
@@ -125,7 +133,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
|
||||
const handleInputChange = (
|
||||
field: keyof TeamType,
|
||||
value: string | boolean | 'public' | 'private'
|
||||
value: string | boolean | 'public' | 'private' | undefined
|
||||
) => {
|
||||
setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
|
||||
};
|
||||
@@ -145,7 +153,59 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const cities = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
|
||||
const handleLogoUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
alert('Please select an image file');
|
||||
return;
|
||||
}
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
alert('Image size must be less than 5MB');
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const logoUrl = e.target?.result as string;
|
||||
handleInputChange('logo', logoUrl);
|
||||
setShowLogoMenu(false);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBannerUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
alert('Please select an image file');
|
||||
return;
|
||||
}
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
alert('Image size must be less than 5MB');
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const bannerUrl = e.target?.result as string;
|
||||
handleInputChange('banner', bannerUrl);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveLogo = () => {
|
||||
handleInputChange('logo', undefined);
|
||||
setShowLogoMenu(false);
|
||||
};
|
||||
|
||||
const handleRemoveBanner = () => {
|
||||
handleInputChange('banner', undefined);
|
||||
};
|
||||
|
||||
const triggerLogoUpload = () => {
|
||||
logoInputRef.current?.click();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
@@ -169,40 +229,155 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
</div>
|
||||
<button
|
||||
className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
|
||||
onClick={onClose}
|
||||
onClick={() => {
|
||||
setShowLogoMenu(false);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<CloseOutlined className="text-neutral-400 text-lg" />
|
||||
</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>
|
||||
)}
|
||||
<div className="p-6 space-y-6" onClick={() => setShowLogoMenu(false)}>
|
||||
{/* Hidden File Inputs */}
|
||||
<input
|
||||
type="file"
|
||||
ref={logoInputRef}
|
||||
onChange={handleLogoUpload}
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
ref={bannerInputRef}
|
||||
onChange={handleBannerUpload}
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
{/* Team Name */}
|
||||
{/* Interactive Banner Section */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-neutral-700">
|
||||
Team Name <span className="text-danger-500">*</span>
|
||||
Team Banner
|
||||
<span className="text-xs text-neutral-500 ml-2">
|
||||
(3:1 aspect ratio recommended)
|
||||
</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 className="relative group">
|
||||
<TeamBannerPlaceholder
|
||||
banner={formData.banner}
|
||||
teamName={formData.name || 'Team Name'}
|
||||
className="rounded-lg border border-neutral-200 transition-all group-hover:border-primary-300"
|
||||
/>
|
||||
{/* Banner Action Buttons */}
|
||||
<div className="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
bannerInputRef.current?.click();
|
||||
}}
|
||||
className="bg-white/90 hover:bg-white text-neutral-700 border-transparent shadow-sm gap-2"
|
||||
>
|
||||
<UploadOutlined className="text-sm" />
|
||||
{formData.banner ? 'Change Banner' : 'Add Banner'}
|
||||
</Button>
|
||||
{formData.banner && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveBanner();
|
||||
}}
|
||||
className="bg-white/90 hover:bg-white text-red-600 border-transparent shadow-sm hover:text-red-700 gap-2"
|
||||
>
|
||||
<DeleteOutlined className="text-sm" />
|
||||
Delete Banner
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Logo & Name Row */}
|
||||
<div className="grid grid-cols-12 gap-4 items-start">
|
||||
{/* Interactive Team Logo */}
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-2">
|
||||
Logo
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="w-24 h-24 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border border-neutral-200 group-hover:border-primary-300 transition-colors">
|
||||
{formData.logo ? (
|
||||
<img
|
||||
src={formData.logo}
|
||||
alt={formData.name || 'Team Logo'}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<TeamOutlined className="text-neutral-400 text-xl" />
|
||||
)}
|
||||
</div>
|
||||
{/* Logo Hover Overlay - Full circle */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowLogoMenu(!showLogoMenu);
|
||||
}}
|
||||
className="absolute inset-0 bg-neutral-300/80 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center w-24 h-24"
|
||||
>
|
||||
<CameraOutlined className="text-white text-lg" />
|
||||
</button>
|
||||
|
||||
{/* Logo Menu Dropdown */}
|
||||
{showLogoMenu && (
|
||||
<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={(e) => {
|
||||
e.stopPropagation();
|
||||
triggerLogoUpload();
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2 cursor-pointer"
|
||||
>
|
||||
<UploadOutlined className="text-sm" />
|
||||
{formData.logo ? 'Change Logo' : 'Upload Logo'}
|
||||
</button>
|
||||
{formData.logo && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveLogo();
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer"
|
||||
>
|
||||
<DeleteOutlined className="text-sm" />
|
||||
Remove Logo
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Name */}
|
||||
<div className="col-span-10 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)}
|
||||
/>
|
||||
<p className="text-xs text-neutral-500">
|
||||
Click logo to upload or change team logo (circular format)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Description */}
|
||||
@@ -224,18 +399,16 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
<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>
|
||||
<CityFilterSelect
|
||||
value={formData.city || 'all'}
|
||||
onChange={(city) =>
|
||||
handleInputChange('city', city === 'all' ? '' : city)
|
||||
}
|
||||
className="w-full"
|
||||
placeholder="Search cities..."
|
||||
allOptionLabel="Select a city"
|
||||
filterIcon={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Visibility */}
|
||||
@@ -323,7 +496,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
<div className="flex border-b border-neutral-200">
|
||||
<button
|
||||
className={cn(
|
||||
'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
|
||||
'px-4 py-2 text-sm font-medium border-b-2 transition-colors cursor-pointer',
|
||||
activeTab === 'details'
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
@@ -334,7 +507,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
</button>
|
||||
<button
|
||||
className={cn(
|
||||
'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
|
||||
'px-4 py-2 text-sm font-medium border-b-2 transition-colors cursor-pointer',
|
||||
activeTab === 'members'
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-700'
|
||||
@@ -356,7 +529,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
||||
</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">
|
||||
<div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden">
|
||||
{leader.user.avatar ? (
|
||||
<img
|
||||
src={leader.user.avatar}
|
||||
|
||||
+1
-1
@@ -76,7 +76,7 @@ const SubmissionModal: FC<SubmissionModalProps> = ({
|
||||
<p className="text-xs text-success-600">
|
||||
Submitted on{' '}
|
||||
{new Date(mockSubmission.submitted_at).toLocaleDateString(
|
||||
'en-US',
|
||||
'en-UK',
|
||||
{
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
|
||||
@@ -8,6 +8,7 @@ interface CityFilterSelectProps {
|
||||
className?: string;
|
||||
placeholder?: string;
|
||||
allOptionLabel?: string;
|
||||
filterIcon?: boolean;
|
||||
}
|
||||
|
||||
export const CityFilterSelect: FC<CityFilterSelectProps> = ({
|
||||
@@ -16,6 +17,7 @@ export const CityFilterSelect: FC<CityFilterSelectProps> = ({
|
||||
className = '',
|
||||
placeholder = 'Search cities...',
|
||||
allOptionLabel = 'All Cities',
|
||||
filterIcon = true,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -66,7 +68,9 @@ export const CityFilterSelect: FC<CityFilterSelectProps> = ({
|
||||
return (
|
||||
<div className={`relative ${className}`} ref={dropdownRef}>
|
||||
<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" />
|
||||
{filterIcon && (
|
||||
<FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
|
||||
)}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
@@ -78,7 +82,9 @@ export const CityFilterSelect: FC<CityFilterSelectProps> = ({
|
||||
onClick={handleInputClick}
|
||||
onFocus={handleInputClick}
|
||||
placeholder={isOpen ? placeholder : displayValue}
|
||||
className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
||||
className={`border border-neutral-200 rounded-lg pr-10 py-2.5 text-sm w-full focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer ${
|
||||
filterIcon ? ' pl-10' : 'pl-3'
|
||||
}`}
|
||||
/>
|
||||
{showClearButton && (
|
||||
<button
|
||||
|
||||
@@ -391,7 +391,364 @@ DELETE /api/v1/admin/users/550e8400-e29b-41d4-a716-446655440000
|
||||
|
||||
---
|
||||
|
||||
## GET /api/v1/admin/teams
|
||||
|
||||
### Purpose
|
||||
|
||||
Retrieve paginated list of hackathon teams with filtering, searching, and sorting capabilities for backoffice team management.
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- Requires admin (backoffice) scope: e.g. `role=admin`
|
||||
- 401 if unauthenticated, 403 if authenticated but lacking required scope.
|
||||
|
||||
### Query Parameters
|
||||
|
||||
| Parameter | Type | Required | Default | Description |
|
||||
| -------------- | ------- | -------- | ------------ | ---------------------------------------------------------------------------------------- |
|
||||
| `page` | integer | No | 1 | Page number (1-based) |
|
||||
| `limit` | integer | No | 10 | Items per page (1-100) |
|
||||
| `search` | string | No | - | Search by team name, city, or leader name (case-insensitive) |
|
||||
| `visibility` | string | No | `all` | Filter by visibility: `all`, `public`, `private` |
|
||||
| `city` | string | No | `all` | Filter by city or `all` |
|
||||
| `submission` | string | No | `all` | Filter by submission status: `all`, `submitted`, `not_submitted` |
|
||||
| `member_count` | string | No | `all` | Filter by member count: `all`, `1`, `2`, `3`, `4`, `5` |
|
||||
| `sort_by` | string | No | `created_at` | Sort field: `name`, `city`, `visibility`, `member_count`, `has_submission`, `created_at` |
|
||||
| `sort_order` | string | No | `desc` | Sort order: `asc`, `desc` |
|
||||
|
||||
### Examples
|
||||
|
||||
```
|
||||
GET /api/v1/admin/teams
|
||||
GET /api/v1/admin/teams?page=2&limit=10
|
||||
GET /api/v1/admin/teams?search=innovators&visibility=public
|
||||
GET /api/v1/admin/teams?city=Jakarta&submission=submitted&member_count=3
|
||||
GET /api/v1/admin/teams?sort_by=name&sort_order=asc
|
||||
```
|
||||
|
||||
### Response Schema
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"data": {
|
||||
"teams": [
|
||||
{
|
||||
"id": "team-001",
|
||||
"name": "Team Innovators",
|
||||
"description": "Building innovative solutions for modern problems", // Optional
|
||||
"city": "Jakarta",
|
||||
"banner": "https://example.com/banners/team1.jpg", // Optional
|
||||
"logo": "https://example.com/logos/team1.jpg", // Optional
|
||||
"visibility": "public", // "public" | "private"
|
||||
"member_count": 3,
|
||||
"has_submission": true,
|
||||
"created_at": "2024-11-15T08:30:00Z",
|
||||
"updated_at": "2024-11-30T14:22:00Z",
|
||||
"leader_id": "leader-team-001",
|
||||
"members": [
|
||||
{
|
||||
"id": "member-team-001-0",
|
||||
"joined_at": "2024-11-15T08:30:00Z",
|
||||
"role": "leader", // "leader" | "member"
|
||||
"status": "accepted", // "pending" | "accepted" | "rejected"
|
||||
"team_id": "team-001",
|
||||
"user_id": "leader-team-001",
|
||||
"user": {
|
||||
"id": "leader-team-001",
|
||||
"avatar": "https://ui-avatars.com/api/?name=John+Doe", // Optional
|
||||
"bio": "Passionate developer with 5+ years experience", // Optional
|
||||
"created_at": "2024-10-01T08:30:00Z",
|
||||
"email": "john.doe@example.com",
|
||||
"fullname": "John Doe",
|
||||
"is_active": true,
|
||||
"location": "Jakarta",
|
||||
"phone_number": "+6281234567890", // Optional
|
||||
"skills": ["Frontend Developer", "UI/UX Designer"],
|
||||
"updated_at": "2024-11-30T14:22:00Z"
|
||||
}
|
||||
}
|
||||
// ... more members
|
||||
]
|
||||
}
|
||||
// ... more teams
|
||||
],
|
||||
"pagination": {
|
||||
"current_page": 1,
|
||||
"total_pages": 15,
|
||||
"total_items": 147,
|
||||
"items_per_page": 10,
|
||||
"has_next": true,
|
||||
"has_prev": false
|
||||
},
|
||||
"filters": {
|
||||
"available_cities": ["Jakarta", "Bandung", "Surabaya", "Medan", "Yogyakarta"],
|
||||
"available_skills": ["Frontend Developer", "Backend Developer", "Full Stack Developer", "DevOps Engineer", "UI/UX Designer", "Product Manager", "Data Scientist", "Mobile Developer"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## GET /api/v1/admin/teams/{team_id}
|
||||
|
||||
### Purpose
|
||||
|
||||
Retrieve detailed information for a specific team by ID.
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- Requires admin (backoffice) scope: e.g. `role=admin`
|
||||
|
||||
### Path Parameters
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| --------- | ------ | -------- | ----------- |
|
||||
| `team_id` | string | Yes | Team ID |
|
||||
|
||||
### Examples
|
||||
|
||||
```
|
||||
GET /api/v1/admin/teams/team-001
|
||||
```
|
||||
|
||||
### Response Schema
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"data": {
|
||||
"id": "team-001",
|
||||
"name": "Team Innovators",
|
||||
"description": "Building innovative solutions for modern problems",
|
||||
"city": "Jakarta",
|
||||
"banner": "https://example.com/banners/team1.jpg",
|
||||
"logo": "https://example.com/logos/team1.jpg",
|
||||
"visibility": "public",
|
||||
"member_count": 3,
|
||||
"has_submission": true,
|
||||
"created_at": "2024-11-15T08:30:00Z",
|
||||
"updated_at": "2024-11-30T14:22:00Z",
|
||||
"leader_id": "leader-team-001",
|
||||
"members": [
|
||||
{
|
||||
"id": "member-team-001-0",
|
||||
"joined_at": "2024-11-15T08:30:00Z",
|
||||
"role": "leader",
|
||||
"status": "accepted",
|
||||
"team_id": "team-001",
|
||||
"user_id": "leader-team-001",
|
||||
"user": {
|
||||
"id": "leader-team-001",
|
||||
"avatar": "https://ui-avatars.com/api/?name=John+Doe",
|
||||
"bio": "Passionate developer with 5+ years experience",
|
||||
"created_at": "2024-10-01T08:30:00Z",
|
||||
"email": "john.doe@example.com",
|
||||
"fullname": "John Doe",
|
||||
"is_active": true,
|
||||
"location": "Jakarta",
|
||||
"phone_number": "+6281234567890",
|
||||
"skills": ["Frontend Developer", "UI/UX Designer"],
|
||||
"updated_at": "2024-11-30T14:22:00Z"
|
||||
}
|
||||
}
|
||||
// ... all team members
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## POST /api/v1/admin/teams
|
||||
|
||||
### Purpose
|
||||
|
||||
Create a new team in the hackathon system.
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- Requires admin (backoffice) scope: e.g. `role=admin`
|
||||
|
||||
### Request Body Schema
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"name": "Team New Innovators", // Required, 1-100 chars
|
||||
"description": "Building next-gen solutions", // Optional, max 500 chars
|
||||
"city": "Jakarta", // Required, from predefined list
|
||||
"visibility": "public", // Required, "public" | "private"
|
||||
"leader_id": "user-123", // Required, existing user ID
|
||||
"banner": "https://example.com/banners/new.jpg", // Optional, URL
|
||||
"logo": "https://example.com/logos/new.jpg" // Optional, URL
|
||||
}
|
||||
```
|
||||
|
||||
### Response Schema
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"data": {
|
||||
"id": "team-new-001",
|
||||
"name": "Team New Innovators",
|
||||
"description": "Building next-gen solutions",
|
||||
"city": "Jakarta",
|
||||
"banner": "https://example.com/banners/new.jpg",
|
||||
"logo": "https://example.com/logos/new.jpg",
|
||||
"visibility": "public",
|
||||
"member_count": 1,
|
||||
"has_submission": false,
|
||||
"created_at": "2024-12-02T10:30:00Z",
|
||||
"updated_at": "2024-12-02T10:30:00Z",
|
||||
"leader_id": "user-123",
|
||||
"members": [
|
||||
{
|
||||
"id": "member-new-001-0",
|
||||
"joined_at": "2024-12-02T10:30:00Z",
|
||||
"role": "leader",
|
||||
"status": "accepted",
|
||||
"team_id": "team-new-001",
|
||||
"user_id": "user-123",
|
||||
"user": {
|
||||
"id": "user-123",
|
||||
"fullname": "John Doe",
|
||||
"email": "john.doe@example.com",
|
||||
"location": "Jakarta",
|
||||
"is_active": true,
|
||||
"skills": ["Frontend Developer"],
|
||||
"created_at": "2024-10-01T08:30:00Z",
|
||||
"updated_at": "2024-12-02T10:30:00Z"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## PUT /api/v1/admin/teams/{team_id}
|
||||
|
||||
### Purpose
|
||||
|
||||
Update an existing team's information.
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- Requires admin (backoffice) scope: e.g. `role=admin`
|
||||
|
||||
### Path Parameters
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| --------- | ------ | -------- | ----------- |
|
||||
| `team_id` | string | Yes | Team ID |
|
||||
|
||||
### Request Body Schema
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"name": "Team Updated Name", // Optional, 1-100 chars
|
||||
"description": "Updated description", // Optional, max 500 chars, null to clear
|
||||
"city": "Bandung", // Optional, from predefined list
|
||||
"visibility": "private", // Optional, "public" | "private"
|
||||
"banner": "https://example.com/banners/updated.jpg", // Optional, URL, null to remove
|
||||
"logo": "https://example.com/logos/updated.jpg" // Optional, URL, null to remove
|
||||
}
|
||||
```
|
||||
|
||||
### Response Schema
|
||||
|
||||
Same as GET /api/v1/admin/teams/{team_id} with updated values.
|
||||
|
||||
---
|
||||
|
||||
## DELETE /api/v1/admin/teams/{team_id}
|
||||
|
||||
### Purpose
|
||||
|
||||
Delete a team from the hackathon system.
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- Requires admin (backoffice) scope: e.g. `role=admin`
|
||||
|
||||
### Path Parameters
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| --------- | ------ | -------- | ----------- |
|
||||
| `team_id` | string | Yes | Team ID |
|
||||
|
||||
### Response Schema
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"data": {
|
||||
"message": "Team successfully deleted",
|
||||
"deleted_team_id": "team-001",
|
||||
"deleted_at": "2024-12-02T10:50:00Z"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## GET /api/v1/admin/teams/{team_id}/submission
|
||||
|
||||
### Purpose
|
||||
|
||||
Retrieve submission details for a specific team.
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- Requires admin (backoffice) scope: e.g. `role=admin`
|
||||
|
||||
### Path Parameters
|
||||
|
||||
| Parameter | Type | Required | Description |
|
||||
| --------- | ------ | -------- | ----------- |
|
||||
| `team_id` | string | Yes | Team ID |
|
||||
|
||||
### Response Schema
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"data": {
|
||||
"team_id": "team-001",
|
||||
"team_name": "Team Innovators",
|
||||
"project_name": "EcoTrack - Smart Waste Management",
|
||||
"project_description": "An AI-powered waste management solution that helps cities optimize collection routes and reduce environmental impact.",
|
||||
"repository_url": "https://github.com/team-innovators/ecotrack",
|
||||
"demo_url": "https://ecotrack-demo.vercel.app",
|
||||
"presentation_url": "https://docs.google.com/presentation/d/team-innovators-pitch/edit",
|
||||
"submitted_at": "2024-12-01T15:30:00Z",
|
||||
"updated_at": "2024-12-01T16:45:00Z"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Error Responses
|
||||
|
||||
### Team Management Endpoints
|
||||
|
||||
| Status | Code | Message | Notes |
|
||||
| ------ | ---------------------- | ------------------------------- | -------------------------- |
|
||||
| 400 | `validation_error` | `Invalid request data` | Field validation failures |
|
||||
| 401 | `unauthorized` | `Authentication required` | Missing/invalid token |
|
||||
| 403 | `forbidden` | `Insufficient permissions` | Lacks required scope |
|
||||
| 404 | `team_not_found` | `Team not found` | Invalid team ID |
|
||||
| 404 | `submission_not_found` | `Team submission not found` | Team has no submission |
|
||||
| 409 | `team_already_exists` | `Team with name already exists` | Duplicate team name |
|
||||
| 413 | `payload_too_large` | `Banner/logo file too large` | Image exceeds size limit |
|
||||
| 422 | `invalid_city` | `Invalid city specified` | City not in allowed list |
|
||||
| 422 | `invalid_leader` | `Invalid leader user ID` | Leader user does not exist |
|
||||
| 429 | `rate_limited` | `Too many requests` | Rate limiting |
|
||||
| 500 | `internal_error` | `Unexpected server error` | Unhandled exception |
|
||||
|
||||
---
|
||||
|
||||
**Revision History**
|
||||
|
||||
- v1.0.0 (2025-11-30): Initial contract drafted.
|
||||
- v2.0.0 (2025-12-01): Added user management endpoints with filtering, pagination, CRUD operations, and avatar handling.
|
||||
- v3.0.0 (2025-12-02): Added team management endpoints based on backoffice implementation with team members, submissions, and comprehensive filtering.
|
||||
|
||||
Reference in New Issue
Block a user