Compare commits
23
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Hafid Nur
|
0fcd93cb7d | ||
|
Hafid Nur
|
3470853858 | ||
|
Hafid Nur
|
ff9a02c020 | ||
|
Hafid Nur
|
f81a7c334e | ||
|
Hafid Nur
|
2700f7cbb7 | ||
|
Hafid Nur
|
cfcdfa527c | ||
|
Hafid Nur
|
c6579d5295 | ||
|
Hafid Nur
|
a1640cfe1d | ||
|
Hafid Nur
|
00df69fb93 | ||
|
Hafid Nur
|
810dbaa0ca | ||
|
Hafid Nur
|
cb09709800 | ||
|
Hafid Nur
|
7e385c6385 | ||
|
Hafid Nur
|
19aa5bb452 | ||
|
Hafid Nur
|
e8de897dc9 | ||
|
Muhammad Zakir Ramadhan
|
eff89d28ed | ||
|
Maulana Sodiqin
|
b75a88677a | ||
|
Hafid Nur
|
7642fef3e6 | ||
|
Hafid Nur
|
f40e0e35b9 | ||
|
Hafid Nur
|
c6c0d6fded | ||
|
Hafid Nur
|
fcaa449630 | ||
|
Hafid Nur
|
4988980384 | ||
|
Hafid Nur
|
9547d34f5c | ||
|
Hafid Nur
|
aeb23a7255 |
@@ -10,13 +10,7 @@
|
|||||||
"Bash(ren page.tsx page-original.tsx)",
|
"Bash(ren page.tsx page-original.tsx)",
|
||||||
"Bash(ren:*)",
|
"Bash(ren:*)",
|
||||||
"Bash(npx supabase:*)",
|
"Bash(npx supabase:*)",
|
||||||
"Bash(libs/service/src/types/supabase.ts)",
|
"Bash(libs/service/src/types/supabase.ts)"
|
||||||
"Bash(npx nx build:*)",
|
|
||||||
"Bash(git add:*)",
|
|
||||||
"Bash(git commit:*)",
|
|
||||||
"Bash(git push)",
|
|
||||||
"Bash(findstr:*)",
|
|
||||||
"Bash(ls:*)"
|
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"mcpServers": {
|
|
||||||
"nx-mcp": {
|
|
||||||
"type": "stdio",
|
|
||||||
"command": "npx",
|
|
||||||
"args": ["nx", "mcp"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!-- nx configuration start-->
|
|
||||||
<!-- Leave the start & end comments to automatically receive updates. -->
|
|
||||||
|
|
||||||
# General Guidelines for working with Nx
|
|
||||||
|
|
||||||
- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
|
|
||||||
- You have access to the Nx MCP server and its tools, use them to help the user
|
|
||||||
- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
|
|
||||||
- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
|
|
||||||
- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
|
|
||||||
- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
|
|
||||||
|
|
||||||
<!-- nx configuration end-->
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" data-theme="light">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Backoffice</title>
|
<title>Backoffice</title>
|
||||||
|
|||||||
@@ -1,64 +0,0 @@
|
|||||||
import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import { FC, ReactElement } from 'react';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminUsers,
|
|
||||||
getAdminTeams,
|
|
||||||
getAdminSubmissions,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
|
|
||||||
export const HackathonDashboardPage: FC = (): ReactElement => {
|
|
||||||
// Fetch total participants
|
|
||||||
const { data: usersData } = useQuery({
|
|
||||||
queryKey: ['admin-users-count'],
|
|
||||||
queryFn: () => getAdminUsers({ page: 1, per_page: 1 }),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fetch total teams
|
|
||||||
const { data: teamsData } = useQuery({
|
|
||||||
queryKey: ['admin-teams-count'],
|
|
||||||
queryFn: () => getAdminTeams({ page: 1, per_page: 1 }),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fetch total submissions
|
|
||||||
const { data: submissionsData } = useQuery({
|
|
||||||
queryKey: ['admin-submissions-count'],
|
|
||||||
queryFn: () => getAdminSubmissions({ page: 1, per_page: 1 }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalParticipants = usersData?.meta?.total_data ?? '??';
|
|
||||||
const totalTeams = teamsData?.meta?.total_data ?? '??';
|
|
||||||
const totalSubmissions = submissionsData?.meta?.total_data ?? '??';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
|
|
||||||
<h1 className="mb-8 text-p1 font-semibold text-neutral-700">Dashboard</h1>
|
|
||||||
|
|
||||||
<section className="grid grid-cols-5 gap-5">
|
|
||||||
{/* Participant */}
|
|
||||||
<div className="bg-white px-6 py-4 rounded-md shadow">
|
|
||||||
<h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
|
|
||||||
{totalParticipants}
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-400 text-p3">Total Participants</p>
|
|
||||||
</div>
|
|
||||||
{/* Team */}
|
|
||||||
<div className="bg-white px-6 py-4 rounded-md shadow">
|
|
||||||
<h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
|
|
||||||
{totalTeams}
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-400 text-p3">Total Teams</p>
|
|
||||||
</div>
|
|
||||||
{/* Project Submitted */}
|
|
||||||
<div className="bg-white px-6 py-4 rounded-md shadow">
|
|
||||||
<h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
|
|
||||||
{totalSubmissions}
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-400 text-p3">Total Project Submitted</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HackathonDashboardPage;
|
|
||||||
-249
@@ -1,249 +0,0 @@
|
|||||||
import { FC } from 'react';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import {
|
|
||||||
CloseOutlined,
|
|
||||||
LinkOutlined,
|
|
||||||
ProjectOutlined,
|
|
||||||
FileImageOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { TAdminSubmissionItem } from '@imphnen-frontend-service/service';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
|
|
||||||
interface SubmissionModalProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
submission: TAdminSubmissionItem;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SubmissionModal: FC<SubmissionModalProps> = ({
|
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
submission,
|
|
||||||
}) => {
|
|
||||||
if (!isOpen) return null;
|
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'submitted':
|
|
||||||
return 'bg-success-50 border-success-200 text-success-800';
|
|
||||||
case 'pending':
|
|
||||||
return 'bg-orange-50 border-orange-200 text-orange-800';
|
|
||||||
case 'approved':
|
|
||||||
return 'bg-blue-50 border-blue-200 text-blue-800';
|
|
||||||
case 'rejected':
|
|
||||||
return 'bg-error-50 border-error-200 text-error-800';
|
|
||||||
default:
|
|
||||||
return 'bg-neutral-50 border-neutral-200 text-neutral-800';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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-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">
|
|
||||||
{submission.project_name}
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-neutral-500">
|
|
||||||
Team ID: {submission.team_id} • Submitted{' '}
|
|
||||||
{new Date(submission.submitted_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-neutral-400 hover:text-neutral-600 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<CloseOutlined className="text-xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-6 space-y-6">
|
|
||||||
{/* Submission Status */}
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex items-center gap-3 p-4 border rounded-lg',
|
|
||||||
getStatusColor(submission.status)
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'w-3 h-3 rounded-full',
|
|
||||||
submission.status === 'submitted' && 'bg-success-500',
|
|
||||||
submission.status === 'pending' && 'bg-orange-500',
|
|
||||||
submission.status === 'approved' && 'bg-blue-500',
|
|
||||||
submission.status === 'rejected' && 'bg-error-500'
|
|
||||||
)}
|
|
||||||
></div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium">
|
|
||||||
Status:{' '}
|
|
||||||
{submission.status.charAt(0).toUpperCase() +
|
|
||||||
submission.status.slice(1)}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs">Submitted by: {submission.submitted_by}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Project Description */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-medium text-neutral-700 mb-2">
|
|
||||||
Project Description
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-neutral-600 leading-relaxed">
|
|
||||||
{submission.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Project Links */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="text-sm font-medium text-neutral-700">
|
|
||||||
Project Links
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{/* Repository URL */}
|
|
||||||
<div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<LinkOutlined className="text-primary-500 mt-1" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-xs font-medium text-neutral-600 mb-1">
|
|
||||||
Repository
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={submission.repository_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
|
|
||||||
>
|
|
||||||
{submission.repository_url}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Demo URL */}
|
|
||||||
{submission.demo_url && (
|
|
||||||
<div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<LinkOutlined className="text-primary-500 mt-1" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-xs font-medium text-neutral-600 mb-1">
|
|
||||||
Live Demo
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={submission.demo_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
|
|
||||||
>
|
|
||||||
{submission.demo_url}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Presentation URL */}
|
|
||||||
{submission.presentation_url && (
|
|
||||||
<div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<LinkOutlined className="text-primary-500 mt-1" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-xs font-medium text-neutral-600 mb-1">
|
|
||||||
Presentation
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={submission.presentation_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
|
|
||||||
>
|
|
||||||
{submission.presentation_url}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Screenshots */}
|
|
||||||
{submission.screenshots && submission.screenshots.length > 0 && (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="text-sm font-medium text-neutral-700 flex items-center gap-2">
|
|
||||||
<FileImageOutlined className="text-primary-500" />
|
|
||||||
Screenshots ({submission.screenshots.length})
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{submission.screenshots.map((screenshot, index) => (
|
|
||||||
<a
|
|
||||||
key={index}
|
|
||||||
href={screenshot}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="block rounded-lg overflow-hidden border border-neutral-200 hover:border-primary-300 transition-colors"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={screenshot}
|
|
||||||
alt={`Screenshot ${index + 1}`}
|
|
||||||
className="w-full h-40 object-cover"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Metadata */}
|
|
||||||
<div className="grid grid-cols-2 gap-4 pt-4 border-t border-neutral-200">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-neutral-500 mb-1">Created</p>
|
|
||||||
<p className="text-sm text-neutral-900">
|
|
||||||
{new Date(submission.created_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-neutral-500 mb-1">Last Updated</p>
|
|
||||||
<p className="text-sm text-neutral-900">
|
|
||||||
{new Date(submission.updated_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex items-center justify-end gap-3 p-6 border-t border-neutral-200 bg-neutral-50">
|
|
||||||
<Button variant="secondary" onClick={onClose}>
|
|
||||||
Close
|
|
||||||
</Button>
|
|
||||||
{/* <Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
console.log('Edit submission:', submission.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Edit Status
|
|
||||||
</Button> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SubmissionModal;
|
|
||||||
@@ -1,375 +0,0 @@
|
|||||||
import {
|
|
||||||
FC,
|
|
||||||
ReactElement,
|
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useCallback,
|
|
||||||
} from 'react';
|
|
||||||
import SubmissionModal from './_components/submission-modal';
|
|
||||||
import {
|
|
||||||
BackofficeWrapper,
|
|
||||||
DataTable,
|
|
||||||
} from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
import {
|
|
||||||
SearchOutlined,
|
|
||||||
FilterOutlined,
|
|
||||||
LoadingOutlined,
|
|
||||||
EyeOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminSubmissions,
|
|
||||||
TAdminSubmissionItem,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { useSearchParams } from 'react-router-dom';
|
|
||||||
|
|
||||||
type SubmissionType = TAdminSubmissionItem;
|
|
||||||
|
|
||||||
export const HackathonSubmissionsPage: FC = (): ReactElement => {
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
const currentPage = Math.max(
|
|
||||||
1,
|
|
||||||
parseInt(searchParams.get('page') || '1', 10)
|
|
||||||
);
|
|
||||||
const searchQuery = searchParams.get('search') || '';
|
|
||||||
const perPage = parseInt(searchParams.get('per_page') || '10', 10);
|
|
||||||
const statusFilter = searchParams.get('status') || 'all';
|
|
||||||
|
|
||||||
const [showSubmissionModal, setShowSubmissionModal] = useState(false);
|
|
||||||
const [selectedSubmission, setSelectedSubmission] =
|
|
||||||
useState<SubmissionType | null>(null);
|
|
||||||
const [globalFilter, setGlobalFilter] = useState(searchQuery);
|
|
||||||
|
|
||||||
// Fetch submissions from API
|
|
||||||
const {
|
|
||||||
data: submissionsResponse,
|
|
||||||
isLoading,
|
|
||||||
isFetching,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
'admin-submissions',
|
|
||||||
currentPage,
|
|
||||||
perPage,
|
|
||||||
statusFilter,
|
|
||||||
searchQuery,
|
|
||||||
],
|
|
||||||
queryFn: () =>
|
|
||||||
getAdminSubmissions({
|
|
||||||
page: currentPage,
|
|
||||||
per_page: perPage,
|
|
||||||
status: statusFilter !== 'all' ? statusFilter : undefined,
|
|
||||||
search: searchQuery || undefined,
|
|
||||||
}),
|
|
||||||
staleTime: 30000, // 30 seconds cache
|
|
||||||
gcTime: 5 * 60 * 1000, // 5 minutes
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalData = submissionsResponse?.meta?.total_data || 0;
|
|
||||||
const totalPages = submissionsResponse?.meta?.total_page || 1;
|
|
||||||
|
|
||||||
// Handle page change
|
|
||||||
const handlePageChange = useCallback(
|
|
||||||
(newPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', newPage.toString());
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
if (statusFilter !== 'all') params.set('status', statusFilter);
|
|
||||||
setSearchParams(params);
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
[setSearchParams, perPage, searchQuery, statusFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Validate page number
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isLoading && totalPages > 0 && currentPage > totalPages) {
|
|
||||||
setSearchParams({ page: totalPages.toString() });
|
|
||||||
}
|
|
||||||
}, [currentPage, totalPages, setSearchParams, isLoading]);
|
|
||||||
|
|
||||||
// Sync globalFilter with URL
|
|
||||||
useEffect(() => {
|
|
||||||
setGlobalFilter(searchQuery);
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
// Handle search
|
|
||||||
const handleSearch = useCallback(() => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (globalFilter.trim()) {
|
|
||||||
params.set('search', globalFilter.trim());
|
|
||||||
}
|
|
||||||
if (statusFilter !== 'all') params.set('status', statusFilter);
|
|
||||||
setSearchParams(params);
|
|
||||||
}, [globalFilter, setSearchParams, perPage, statusFilter]);
|
|
||||||
|
|
||||||
const handleSearchKeyPress = useCallback(
|
|
||||||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[handleSearch]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle per page change
|
|
||||||
const handlePerPageChange = useCallback(
|
|
||||||
(newPerPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
params.set('per_page', newPerPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
if (statusFilter !== 'all') params.set('status', statusFilter);
|
|
||||||
setSearchParams(params);
|
|
||||||
},
|
|
||||||
[setSearchParams, searchQuery, statusFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle status filter change
|
|
||||||
// const handleStatusFilterChange = useCallback(
|
|
||||||
// (newStatus: string) => {
|
|
||||||
// const params = new URLSearchParams();
|
|
||||||
// params.set('page', '1');
|
|
||||||
// if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
// if (searchQuery) params.set('search', searchQuery);
|
|
||||||
// if (newStatus !== 'all') params.set('status', newStatus);
|
|
||||||
// setSearchParams(params);
|
|
||||||
// },
|
|
||||||
// [setSearchParams, perPage, searchQuery]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// Handle modal
|
|
||||||
const handleShowSubmissionModal = useCallback(
|
|
||||||
(submission: SubmissionType) => {
|
|
||||||
setSelectedSubmission(submission);
|
|
||||||
setShowSubmissionModal(true);
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleCloseSubmissionModal = useCallback(() => {
|
|
||||||
setShowSubmissionModal(false);
|
|
||||||
setSelectedSubmission(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Get submissions data
|
|
||||||
const filteredData = useMemo(() => {
|
|
||||||
return submissionsResponse?.data || [];
|
|
||||||
}, [submissionsResponse]);
|
|
||||||
|
|
||||||
// Memoize columns
|
|
||||||
const columns: ColumnDef<SubmissionType>[] = useMemo(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
accessorKey: 'project_name',
|
|
||||||
header: 'Project Name',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="font-medium text-neutral-900">
|
|
||||||
{row.original.project_name}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'team_id',
|
|
||||||
header: 'Team ID',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-sm text-neutral-700 font-mono">
|
|
||||||
{row.original.team_id}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'status',
|
|
||||||
header: 'Status',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.status;
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'inline-flex items-center gap-1 px-2 py-1 rounded-2xl text-xs font-medium',
|
|
||||||
status === 'submitted'
|
|
||||||
? 'bg-success-100 text-success-800'
|
|
||||||
: status === 'pending'
|
|
||||||
? 'bg-orange-100 text-orange-800'
|
|
||||||
: 'bg-neutral-100 text-neutral-700'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{status.charAt(0).toUpperCase() + status.slice(1)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'submitted_at',
|
|
||||||
header: 'Submitted',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-neutral-900 text-sm">
|
|
||||||
{new Date(row.original.submitted_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
sortingFn: 'datetime',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'actions',
|
|
||||||
header: 'Actions',
|
|
||||||
meta: { cellClassName: cn('w-48') },
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
className="flex items-center gap-2 text-sm px-4 py-2"
|
|
||||||
onClick={() => handleShowSubmissionModal(row.original)}
|
|
||||||
>
|
|
||||||
<EyeOutlined className="text-sm" />
|
|
||||||
View
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[handleShowSubmissionModal]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
|
|
||||||
<h1 className="mb-8 text-p1 font-semibold text-neutral-700">
|
|
||||||
Project Submissions
|
|
||||||
</h1>
|
|
||||||
<section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
|
|
||||||
<div className="flex flex-wrap gap-3 items-center justify-between">
|
|
||||||
<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 by project name..."
|
|
||||||
value={globalFilter}
|
|
||||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
|
||||||
onKeyPress={handleSearchKeyPress}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Per Page Dropdown */}
|
|
||||||
<div className="relative">
|
|
||||||
<select
|
|
||||||
className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={perPage}
|
|
||||||
onChange={(e) =>
|
|
||||||
handlePerPageChange(parseInt(e.target.value, 10))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value={10}>10 / page</option>
|
|
||||||
<option value={20}>20 / page</option>
|
|
||||||
<option value={50}>50 / page</option>
|
|
||||||
<option value={100}>100 / page</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status 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-40 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={statusFilter}
|
|
||||||
onChange={(e) => handleStatusFilterChange(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="all">All Status</option>
|
|
||||||
<option value="submitted">Submitted</option>
|
|
||||||
<option value="pending">Pending</option>
|
|
||||||
<option value="approved">Approved</option>
|
|
||||||
<option value="rejected">Rejected</option>
|
|
||||||
</select>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Active filters */}
|
|
||||||
{/* {statusFilter !== 'all' && (
|
|
||||||
<div className="flex flex-wrap gap-2 items-center">
|
|
||||||
<span className="text-sm text-neutral-600">Active filters:</span>
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
|
|
||||||
Status: {statusFilter}
|
|
||||||
<button
|
|
||||||
onClick={() => handleStatusFilterChange('all')}
|
|
||||||
className="text-info-600 hover:text-info-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
handleStatusFilterChange('all');
|
|
||||||
setGlobalFilter('');
|
|
||||||
}}
|
|
||||||
className="text-sm text-neutral-600"
|
|
||||||
>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
{/* Loading & results */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
|
|
||||||
<span className="ml-3 text-neutral-600">
|
|
||||||
Loading submissions...
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : filteredData.length > 0 ? (
|
|
||||||
<>
|
|
||||||
<div className="text-sm text-neutral-600">
|
|
||||||
Showing {filteredData.length} of {totalData} submissions (Page{' '}
|
|
||||||
{currentPage} of {totalPages})
|
|
||||||
{isFetching && (
|
|
||||||
<span className="ml-2 text-primary-500">(Updating...)</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DataTable
|
|
||||||
data={filteredData}
|
|
||||||
columns={columns}
|
|
||||||
pageSize={perPage}
|
|
||||||
manualPagination={true}
|
|
||||||
pageCount={totalPages}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12 text-neutral-500">
|
|
||||||
No submissions found. Try adjusting your filters.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Submission Modal */}
|
|
||||||
{selectedSubmission && (
|
|
||||||
<SubmissionModal
|
|
||||||
isOpen={showSubmissionModal}
|
|
||||||
onClose={handleCloseSubmissionModal}
|
|
||||||
submission={selectedSubmission}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HackathonSubmissionsPage;
|
|
||||||
-514
@@ -1,514 +0,0 @@
|
|||||||
import { FC, useState, useEffect, useMemo, useRef } from 'react';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import { CityFilterSelect } from '../../../../components/city-filter-select';
|
|
||||||
import TeamBannerPlaceholder from './team-banner-placeholder';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
import { TAdminTeamItem } from '@imphnen-frontend-service/service';
|
|
||||||
import {
|
|
||||||
TeamOutlined,
|
|
||||||
CloseOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
SaveOutlined,
|
|
||||||
CalendarOutlined,
|
|
||||||
CrownOutlined,
|
|
||||||
ExclamationOutlined,
|
|
||||||
UploadOutlined,
|
|
||||||
CameraOutlined,
|
|
||||||
EyeOutlined,
|
|
||||||
EyeInvisibleOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
|
|
||||||
type TeamType = TAdminTeamItem;
|
|
||||||
|
|
||||||
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 [showLogoMenu, setShowLogoMenu] = useState(false);
|
|
||||||
const logoInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
const bannerInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
// Initialize form data when modal opens
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
if (team) {
|
|
||||||
setFormData({ ...team });
|
|
||||||
} else {
|
|
||||||
setFormData({
|
|
||||||
id: '',
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
city: '',
|
|
||||||
banner: null,
|
|
||||||
logo: null,
|
|
||||||
visibility: 'public',
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
leader_id: '',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [isOpen, team]);
|
|
||||||
|
|
||||||
// Check if form has changes
|
|
||||||
const hasChanges = useMemo(() => {
|
|
||||||
if (!formData || !team) return !!formData;
|
|
||||||
return (
|
|
||||||
formData.name !== team.name ||
|
|
||||||
formData.description !== team.description ||
|
|
||||||
formData.city !== team.city ||
|
|
||||||
formData.visibility !== team.visibility ||
|
|
||||||
formData.logo !== team.logo ||
|
|
||||||
formData.banner !== team.banner
|
|
||||||
);
|
|
||||||
}, [formData, team]);
|
|
||||||
|
|
||||||
// Check if required fields are filled
|
|
||||||
const isFormValid = useMemo(() => {
|
|
||||||
if (!formData) return false;
|
|
||||||
return (
|
|
||||||
formData.name.trim() !== '' &&
|
|
||||||
formData.city.trim() !== '' &&
|
|
||||||
formData.description.trim() !== ''
|
|
||||||
);
|
|
||||||
}, [formData]);
|
|
||||||
|
|
||||||
const canSave = hasChanges && isFormValid;
|
|
||||||
|
|
||||||
if (!isOpen || !formData) return null;
|
|
||||||
|
|
||||||
const handleInputChange = (field: keyof TeamType, value: string | null) => {
|
|
||||||
setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
console.log('Saving team:', formData);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = () => {
|
|
||||||
if (!team) return;
|
|
||||||
console.log('Deleting team:', team.id);
|
|
||||||
setShowDeleteConfirm(false);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLogoUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
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) return;
|
|
||||||
|
|
||||||
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);
|
|
||||||
};
|
|
||||||
|
|
||||||
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
|
|
||||||
className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
|
|
||||||
onClick={() => {
|
|
||||||
setShowLogoMenu(false);
|
|
||||||
onClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CloseOutlined className="text-neutral-400 text-lg" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-6 space-y-6" onClick={() => setShowLogoMenu(false)}>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={logoInputRef}
|
|
||||||
onChange={handleLogoUpload}
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={bannerInputRef}
|
|
||||||
onChange={handleBannerUpload}
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Banner Section */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Team Banner{' '}
|
|
||||||
<span className="text-xs text-neutral-500">
|
|
||||||
(3:1 aspect ratio recommended)
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<div className="relative group">
|
|
||||||
<TeamBannerPlaceholder
|
|
||||||
banner={formData.banner || undefined}
|
|
||||||
teamName={formData.name || 'Team Name'}
|
|
||||||
className="rounded-lg border border-neutral-200 transition-all group-hover:border-primary-300"
|
|
||||||
/>
|
|
||||||
<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();
|
|
||||||
handleInputChange('banner', null);
|
|
||||||
}}
|
|
||||||
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
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Logo & Name */}
|
|
||||||
<div className="grid grid-cols-12 gap-4 items-start">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
{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();
|
|
||||||
logoInputRef.current?.click();
|
|
||||||
}}
|
|
||||||
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();
|
|
||||||
handleInputChange('logo', null);
|
|
||||||
setShowLogoMenu(false);
|
|
||||||
}}
|
|
||||||
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>
|
|
||||||
|
|
||||||
<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)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Description <span className="text-danger-500">*</span>
|
|
||||||
</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"
|
|
||||||
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>
|
|
||||||
<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 */}
|
|
||||||
<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)
|
|
||||||
}
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
className="text-primary-600"
|
|
||||||
/>
|
|
||||||
<EyeInvisibleOutlined className="text-neutral-600" />
|
|
||||||
<span className="text-sm">Private</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Team Details */}
|
|
||||||
{team && (
|
|
||||||
<div className="space-y-4 border-t border-neutral-200 pt-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Team Leader ID
|
|
||||||
</label>
|
|
||||||
<div className="p-3 bg-neutral-50 rounded-lg flex items-center gap-3">
|
|
||||||
<CrownOutlined className="text-yellow-600 text-lg" />
|
|
||||||
<span className="text-sm text-neutral-700 font-mono">
|
|
||||||
{team.leader_id}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</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/50 flex items-center justify-center z-60 p-4">
|
|
||||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md 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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalTeamDetail;
|
|
||||||
-82
@@ -1,82 +0,0 @@
|
|||||||
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,447 +0,0 @@
|
|||||||
import {
|
|
||||||
FC,
|
|
||||||
ReactElement,
|
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useCallback,
|
|
||||||
} from 'react';
|
|
||||||
import ModalTeamDetail from './_components/modal-team-detail-new';
|
|
||||||
import { CityFilterSelect } from '../../../components/city-filter-select';
|
|
||||||
import {
|
|
||||||
BackofficeWrapper,
|
|
||||||
DataTable,
|
|
||||||
} from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
import {
|
|
||||||
EditOutlined,
|
|
||||||
TeamOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
FilterOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
LoadingOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminTeams,
|
|
||||||
TAdminTeamItem,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { useSearchParams } from 'react-router-dom';
|
|
||||||
|
|
||||||
type TeamType = TAdminTeamItem;
|
|
||||||
|
|
||||||
export const HackathonTeamsPage: FC = (): ReactElement => {
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
const currentPage = Math.max(
|
|
||||||
1,
|
|
||||||
parseInt(searchParams.get('page') || '1', 10)
|
|
||||||
);
|
|
||||||
const searchQuery = searchParams.get('search') || '';
|
|
||||||
const perPage = parseInt(searchParams.get('per_page') || '10', 10);
|
|
||||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
|
||||||
const [showNewTeamModal, setShowNewTeamModal] = useState(false);
|
|
||||||
const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null);
|
|
||||||
useState<TeamType | null>(null);
|
|
||||||
const [globalFilter, setGlobalFilter] = useState(searchQuery);
|
|
||||||
|
|
||||||
// Advanced filtering states
|
|
||||||
const [visibilityFilter, setVisibilityFilter] = useState('all');
|
|
||||||
const [cityFilter, setCityFilter] = useState('all');
|
|
||||||
|
|
||||||
// Fetch teams from API
|
|
||||||
const {
|
|
||||||
data: teamsResponse,
|
|
||||||
isLoading,
|
|
||||||
isFetching,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
'admin-teams',
|
|
||||||
currentPage,
|
|
||||||
perPage,
|
|
||||||
cityFilter,
|
|
||||||
visibilityFilter,
|
|
||||||
searchQuery,
|
|
||||||
],
|
|
||||||
queryFn: () =>
|
|
||||||
getAdminTeams({
|
|
||||||
page: currentPage,
|
|
||||||
per_page: perPage,
|
|
||||||
search: searchQuery || undefined,
|
|
||||||
}),
|
|
||||||
staleTime: 30000, // 30 seconds cache
|
|
||||||
gcTime: 5 * 60 * 1000, // 5 minutes
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalData = teamsResponse?.meta?.total_data || 0;
|
|
||||||
const totalPages = teamsResponse?.meta?.total_page || 1;
|
|
||||||
|
|
||||||
// Handle page change - update URL query params
|
|
||||||
const handlePageChange = useCallback(
|
|
||||||
(newPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', newPage.toString());
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
[setSearchParams, perPage, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Validate page number doesn't exceed total pages
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isLoading && totalPages > 0 && currentPage > totalPages) {
|
|
||||||
setSearchParams({ page: totalPages.toString() });
|
|
||||||
}
|
|
||||||
}, [currentPage, totalPages, setSearchParams, isLoading]);
|
|
||||||
|
|
||||||
// Sync globalFilter with URL search param on mount
|
|
||||||
useEffect(() => {
|
|
||||||
setGlobalFilter(searchQuery);
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
// Handle search teams
|
|
||||||
const handleSearch = useCallback(() => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (globalFilter.trim()) {
|
|
||||||
params.set('search', globalFilter.trim());
|
|
||||||
}
|
|
||||||
setSearchParams(params);
|
|
||||||
}, [globalFilter, setSearchParams, perPage]);
|
|
||||||
|
|
||||||
// Handle Enter key press in search input
|
|
||||||
const handleSearchKeyPress = useCallback(
|
|
||||||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[handleSearch]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle per page change
|
|
||||||
const handlePerPageChange = useCallback(
|
|
||||||
(newPerPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
params.set('per_page', newPerPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
},
|
|
||||||
[setSearchParams, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Memoize the callback to prevent recreation
|
|
||||||
const handleShowDetailModal = useCallback((team: TeamType) => {
|
|
||||||
setSelectedTeam(team);
|
|
||||||
setShowDetailModal(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCloseDetailModal = useCallback(() => {
|
|
||||||
setShowDetailModal(false);
|
|
||||||
setSelectedTeam(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleShowNewTeamModal = useCallback(() => {
|
|
||||||
setShowNewTeamModal(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCloseNewTeamModal = useCallback(() => {
|
|
||||||
setShowNewTeamModal(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Get teams data from API response
|
|
||||||
const filteredData = useMemo(() => {
|
|
||||||
return teamsResponse?.data || [];
|
|
||||||
}, [teamsResponse]);
|
|
||||||
|
|
||||||
// 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 */}
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<p
|
|
||||||
className="font-medium text-neutral-900 truncate max-w-sm"
|
|
||||||
title={team.name}
|
|
||||||
>
|
|
||||||
{team.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</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,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'leader',
|
|
||||||
header: 'Leader ID',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="text-sm text-neutral-700 font-mono">
|
|
||||||
{row.original.leader_id}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[handleShowDetailModal]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
|
|
||||||
<h1 className="mb-8 text-p1 font-semibold text-neutral-700">
|
|
||||||
Team Management
|
|
||||||
</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 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 or city..."
|
|
||||||
value={globalFilter}
|
|
||||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
|
||||||
onKeyPress={handleSearchKeyPress}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Per Page Dropdown */}
|
|
||||||
<div className="relative">
|
|
||||||
<select
|
|
||||||
className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={perPage}
|
|
||||||
onChange={(e) =>
|
|
||||||
handlePerPageChange(parseInt(e.target.value, 10))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value={10}>10 / page</option>
|
|
||||||
<option value={20}>20 / page</option>
|
|
||||||
<option value={50}>50 / page</option>
|
|
||||||
<option value={100}>100 / page</option>
|
|
||||||
</select>
|
|
||||||
</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-40 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 */}
|
|
||||||
{/* <CityFilterSelect
|
|
||||||
value={cityFilter}
|
|
||||||
onChange={setCityFilter}
|
|
||||||
className="w-full sm:w-44"
|
|
||||||
placeholder="Search cities..."
|
|
||||||
allOptionLabel="All Cities"
|
|
||||||
/> */}
|
|
||||||
</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') && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Clear all filters */}
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setVisibilityFilter('all');
|
|
||||||
setCityFilter('all');
|
|
||||||
setGlobalFilter('');
|
|
||||||
}}
|
|
||||||
className="text-sm text-neutral-600"
|
|
||||||
>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Loading & results display */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
|
|
||||||
<span className="ml-3 text-neutral-600">Loading teams...</span>
|
|
||||||
</div>
|
|
||||||
) : filteredData.length > 0 ? (
|
|
||||||
<>
|
|
||||||
<div className="text-sm text-neutral-600">
|
|
||||||
Showing {filteredData.length} of {totalData} teams (Page{' '}
|
|
||||||
{currentPage} of {totalPages})
|
|
||||||
{isFetching && (
|
|
||||||
<span className="ml-2 text-primary-500">(Updating...)</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DataTable
|
|
||||||
data={filteredData}
|
|
||||||
columns={columns}
|
|
||||||
pageSize={perPage}
|
|
||||||
manualPagination={true}
|
|
||||||
pageCount={totalPages}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12 text-neutral-500">
|
|
||||||
No teams found. Try adjusting your filters.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Modals component */}
|
|
||||||
<ModalTeamDetail
|
|
||||||
isOpen={showDetailModal}
|
|
||||||
onClose={handleCloseDetailModal}
|
|
||||||
team={selectedTeam}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* New Team Modal */}
|
|
||||||
<ModalTeamDetail
|
|
||||||
isOpen={showNewTeamModal}
|
|
||||||
onClose={handleCloseNewTeamModal}
|
|
||||||
team={null} // null indicates creating new team
|
|
||||||
/>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HackathonTeamsPage;
|
|
||||||
-655
@@ -1,655 +0,0 @@
|
|||||||
import { FC, useState, useEffect, useMemo, useRef } from 'react';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
import {
|
|
||||||
UserOutlined,
|
|
||||||
EnvironmentOutlined,
|
|
||||||
CalendarOutlined,
|
|
||||||
SaveOutlined,
|
|
||||||
CloseOutlined,
|
|
||||||
ExclamationOutlined,
|
|
||||||
CameraOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
UploadOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
|
|
||||||
interface UserType {
|
|
||||||
id: string;
|
|
||||||
avatar?: string | null;
|
|
||||||
fullname: string;
|
|
||||||
bio?: string;
|
|
||||||
location: string | null;
|
|
||||||
is_active: boolean;
|
|
||||||
skills: string[];
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ModalProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
user: UserType | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
|
|
||||||
const [formData, setFormData] = useState<UserType | null>(null);
|
|
||||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
||||||
const [showAvatarMenu, setShowAvatarMenu] = useState(false);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
// Initialize form data when modal opens
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
if (user) {
|
|
||||||
// Edit existing user
|
|
||||||
setFormData({ ...user });
|
|
||||||
} else {
|
|
||||||
// Create new user
|
|
||||||
setFormData({
|
|
||||||
id: '', // Will be generated by backend
|
|
||||||
fullname: '',
|
|
||||||
bio: '',
|
|
||||||
location: '',
|
|
||||||
is_active: true,
|
|
||||||
skills: [],
|
|
||||||
avatar: undefined,
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [isOpen, user]);
|
|
||||||
|
|
||||||
// Check if form has changes
|
|
||||||
const hasChanges = useMemo(() => {
|
|
||||||
if (!formData) return false;
|
|
||||||
if (!user) return true; // New user always has changes
|
|
||||||
return (
|
|
||||||
formData.fullname !== user.fullname ||
|
|
||||||
formData.location !== user.location ||
|
|
||||||
formData.is_active !== user.is_active ||
|
|
||||||
formData.avatar !== user.avatar ||
|
|
||||||
JSON.stringify(formData.skills) !== JSON.stringify(user.skills) ||
|
|
||||||
formData.bio !== user.bio
|
|
||||||
);
|
|
||||||
}, [formData, user]);
|
|
||||||
|
|
||||||
// Check if required fields are filled
|
|
||||||
const isFormValid = useMemo(() => {
|
|
||||||
if (!formData) return false;
|
|
||||||
return formData.fullname?.trim() !== '' && formData.location?.trim() !== '';
|
|
||||||
}, [formData]);
|
|
||||||
|
|
||||||
const canSave = hasChanges && isFormValid;
|
|
||||||
|
|
||||||
if (!isOpen || !formData) return null;
|
|
||||||
|
|
||||||
const handleInputChange = (
|
|
||||||
field: keyof UserType,
|
|
||||||
value: string | boolean | string[] | undefined
|
|
||||||
) => {
|
|
||||||
setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSkillsChange = (skills: string[]) => {
|
|
||||||
setFormData((prev) => (prev ? { ...prev, skills } : null));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
if (!formData) return;
|
|
||||||
|
|
||||||
if (user) {
|
|
||||||
// Update existing user
|
|
||||||
console.log('Update user data:', formData);
|
|
||||||
} else {
|
|
||||||
// Create new user
|
|
||||||
console.log('Create new user:', formData);
|
|
||||||
}
|
|
||||||
// Here you would typically make an API call to save the data
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
if (user) {
|
|
||||||
setFormData({ ...user }); // Reset to original for edit mode
|
|
||||||
}
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteAccount = () => {
|
|
||||||
if (!user) return; // Can't delete new user
|
|
||||||
console.log('Delete user:', user.id);
|
|
||||||
setShowDeleteConfirm(false);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
if (file) {
|
|
||||||
// Validate file type
|
|
||||||
if (!file.type.startsWith('image/')) {
|
|
||||||
alert('Please select an image file');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validate file size (max 5MB)
|
|
||||||
if (file.size > 5 * 1024 * 1024) {
|
|
||||||
alert('Image size must be less than 5MB');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create preview URL
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const avatarUrl = e.target?.result as string;
|
|
||||||
handleInputChange('avatar', avatarUrl);
|
|
||||||
setShowAvatarMenu(false);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemoveAvatar = () => {
|
|
||||||
handleInputChange('avatar', undefined);
|
|
||||||
setShowAvatarMenu(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const triggerFileUpload = () => {
|
|
||||||
fileInputRef.current?.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const availableSkills = [
|
|
||||||
'Frontend Developer',
|
|
||||||
'Backend Developer',
|
|
||||||
'Full Stack Developer',
|
|
||||||
'DevOps Engineer',
|
|
||||||
'UI/UX Designer',
|
|
||||||
'Product Manager',
|
|
||||||
'Data Scientist',
|
|
||||||
'Mobile Developer',
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50">
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-black/50"
|
|
||||||
onClick={(e) => {
|
|
||||||
setShowAvatarMenu(false);
|
|
||||||
onClose();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
|
||||||
<div
|
|
||||||
className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
{/* Hidden File Input */}
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={fileInputRef}
|
|
||||||
onChange={handleAvatarUpload}
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="border-b border-neutral-200 px-8 py-6 flex justify-between items-start">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
{/* Interactive User Avatar */}
|
|
||||||
<div className="relative group ">
|
|
||||||
<div className="w-16 h-16 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden border-2 border-transparent group-hover:border-primary-300 transition-colors">
|
|
||||||
{formData.avatar ? (
|
|
||||||
<img
|
|
||||||
src={formData.avatar}
|
|
||||||
alt={formData.fullname}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<UserOutlined className="text-neutral-500 text-2xl" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Avatar Hover Overlay */}
|
|
||||||
<button
|
|
||||||
onClick={() => setShowAvatarMenu(!showAvatarMenu)}
|
|
||||||
className="absolute inset-0 bg-neutral-400 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<CameraOutlined className="text-white text-lg" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Avatar Menu Dropdown */}
|
|
||||||
{showAvatarMenu && (
|
|
||||||
<div className="absolute top-full left-0 mt-2 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[140px] z-10">
|
|
||||||
<button
|
|
||||||
onClick={triggerFileUpload}
|
|
||||||
className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2 cursor-pointer"
|
|
||||||
>
|
|
||||||
<UploadOutlined className="text-sm" />
|
|
||||||
{formData.avatar ? 'Change Photo' : 'Upload Photo'}
|
|
||||||
</button>
|
|
||||||
{formData.avatar && (
|
|
||||||
<button
|
|
||||||
onClick={handleRemoveAvatar}
|
|
||||||
className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer"
|
|
||||||
>
|
|
||||||
<DeleteOutlined className="text-sm" />
|
|
||||||
Remove Photo
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-3 mb-2">
|
|
||||||
<h2 className="text-2xl font-bold text-neutral-900">
|
|
||||||
{user ? 'Edit User Profile' : 'Create New User'}
|
|
||||||
</h2>
|
|
||||||
{user && (
|
|
||||||
<span className="px-3 py-1 bg-info-100 text-info-700 text-xs font-medium rounded-2xl">
|
|
||||||
Hover avatar to change
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-neutral-500">
|
|
||||||
{user
|
|
||||||
? `Make changes to ${
|
|
||||||
formData.fullname || 'this user'
|
|
||||||
}'s profile information`
|
|
||||||
: 'Fill in the information below to create a new user account'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
|
|
||||||
onClick={() => {
|
|
||||||
setShowAvatarMenu(false);
|
|
||||||
handleCancel();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CloseOutlined className="text-neutral-400 text-lg" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-8" onClick={() => setShowAvatarMenu(false)}>
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
||||||
{/* Left Column - Basic Info */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 mb-4">
|
|
||||||
Basic Information
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Full Name - Required */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<UserOutlined className="text-neutral-400" />
|
|
||||||
<div className="flex-1">
|
|
||||||
<label className="text-sm text-neutral-500 block mb-1">
|
|
||||||
Full Name <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.fullname}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange('fullname', e.target.value)
|
|
||||||
}
|
|
||||||
className={cn(
|
|
||||||
'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none',
|
|
||||||
!formData.fullname ||
|
|
||||||
formData.fullname.trim() === ''
|
|
||||||
? 'border-red-300 bg-red-50'
|
|
||||||
: 'border-neutral-300'
|
|
||||||
)}
|
|
||||||
placeholder="Enter full name"
|
|
||||||
/>
|
|
||||||
{(!formData.fullname ||
|
|
||||||
formData.fullname.trim() === '') && (
|
|
||||||
<p className="text-red-500 text-xs mt-1">
|
|
||||||
Full name is required
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Location - Required */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<EnvironmentOutlined className="text-neutral-400" />
|
|
||||||
<div className="flex-1">
|
|
||||||
<label className="text-sm text-neutral-500 block mb-1">
|
|
||||||
Location <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={formData.location || ''}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange('location', e.target.value)
|
|
||||||
}
|
|
||||||
className={cn(
|
|
||||||
'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white',
|
|
||||||
!formData.location ||
|
|
||||||
formData.location.trim() === ''
|
|
||||||
? 'border-red-300 bg-red-50'
|
|
||||||
: 'border-neutral-300'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<option value="">Select location</option>
|
|
||||||
<option value="Jakarta">Jakarta</option>
|
|
||||||
<option value="Bandung">Bandung</option>
|
|
||||||
<option value="Surabaya">Surabaya</option>
|
|
||||||
<option value="Medan">Medan</option>
|
|
||||||
<option value="Yogyakarta">Yogyakarta</option>
|
|
||||||
</select>
|
|
||||||
{(!formData.location ||
|
|
||||||
formData.location.trim() === '') && (
|
|
||||||
<p className="text-red-500 text-xs mt-1">
|
|
||||||
Location is required
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Joined Date - Read Only - Only show for existing users */}
|
|
||||||
{user && (
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<CalendarOutlined className="text-neutral-400" />
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-neutral-500">
|
|
||||||
Joined Date
|
|
||||||
</p>
|
|
||||||
<p className="font-medium">
|
|
||||||
{new Date(formData.created_at).toLocaleDateString(
|
|
||||||
'en-US',
|
|
||||||
{
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bio Section - Optional */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">
|
|
||||||
Bio{' '}
|
|
||||||
<span className="text-neutral-400 text-sm font-normal">
|
|
||||||
(Optional)
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
<textarea
|
|
||||||
value={formData.bio || ''}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange('bio', e.target.value || undefined)
|
|
||||||
}
|
|
||||||
placeholder="Tell us about yourself..."
|
|
||||||
rows={4}
|
|
||||||
className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column - Skills & Status */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Account Status - Enhanced Tab Design */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 mb-4">
|
|
||||||
Account Status
|
|
||||||
</h3>
|
|
||||||
<div className="flex bg-neutral-100 p-1 rounded-lg">
|
|
||||||
<button
|
|
||||||
onClick={() => handleInputChange('is_active', true)}
|
|
||||||
className={cn(
|
|
||||||
'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
|
|
||||||
formData.is_active
|
|
||||||
? 'bg-white text-success-700 shadow-sm ring-1 ring-success-200'
|
|
||||||
: 'text-neutral-600 hover:text-neutral-800'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'w-2 h-2 rounded-full',
|
|
||||||
formData.is_active
|
|
||||||
? 'bg-success-500'
|
|
||||||
: 'bg-neutral-400'
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
Active
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleInputChange('is_active', false)}
|
|
||||||
className={cn(
|
|
||||||
'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
|
|
||||||
!formData.is_active
|
|
||||||
? 'bg-white text-neutral-700 shadow-sm ring-1 ring-neutral-200'
|
|
||||||
: 'text-neutral-600 hover:text-neutral-800'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'w-2 h-2 rounded-full',
|
|
||||||
!formData.is_active
|
|
||||||
? 'bg-neutral-500'
|
|
||||||
: 'bg-neutral-400'
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
Inactive
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-neutral-500 mt-2">
|
|
||||||
{formData.is_active
|
|
||||||
? 'User can access their account and participate in activities'
|
|
||||||
: 'User account is suspended and cannot access services'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Skills Section - Optional */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 mb-4">
|
|
||||||
Skills & Expertise{' '}
|
|
||||||
<span className="text-neutral-400 text-sm font-normal">
|
|
||||||
(Optional)
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex flex-wrap gap-2 min-h-10 p-3 border border-neutral-300 rounded-lg bg-neutral-50">
|
|
||||||
{formData.skills.length > 0 ? (
|
|
||||||
formData.skills.map((skill, index) => (
|
|
||||||
<span
|
|
||||||
key={index}
|
|
||||||
className="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl text-sm font-medium bg-blue-100 text-blue-800"
|
|
||||||
>
|
|
||||||
{skill}
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleSkillsChange(
|
|
||||||
formData.skills.filter((_, i) => i !== index)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="text-blue-600 hover:text-blue-800 ml-1 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<span className="text-neutral-400 text-sm">
|
|
||||||
No skills added yet
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<select
|
|
||||||
value=""
|
|
||||||
onChange={(e) => {
|
|
||||||
if (
|
|
||||||
e.target.value &&
|
|
||||||
!formData.skills.includes(e.target.value)
|
|
||||||
) {
|
|
||||||
handleSkillsChange([
|
|
||||||
...formData.skills,
|
|
||||||
e.target.value,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white"
|
|
||||||
>
|
|
||||||
<option value="">Add a skill...</option>
|
|
||||||
{availableSkills
|
|
||||||
.filter((skill) => !formData.skills.includes(skill))
|
|
||||||
.map((skill) => (
|
|
||||||
<option key={skill} value={skill}>
|
|
||||||
{skill}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Account Details - Read Only - Only show for existing users */}
|
|
||||||
{user && (
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 mb-4">
|
|
||||||
Account Details
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3 bg-neutral-50 p-4 rounded-lg">
|
|
||||||
<div className="flex justify-between items-center py-1">
|
|
||||||
<span className="text-neutral-600 text-sm">
|
|
||||||
User ID
|
|
||||||
</span>
|
|
||||||
<span className="font-mono text-sm text-neutral-800">
|
|
||||||
{formData.id}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center py-1">
|
|
||||||
<span className="text-neutral-600 text-sm">
|
|
||||||
Last Updated
|
|
||||||
</span>
|
|
||||||
<span className="text-sm text-neutral-800">
|
|
||||||
{new Date(formData.updated_at).toLocaleDateString(
|
|
||||||
'en-US',
|
|
||||||
{
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer Actions */}
|
|
||||||
<div className="border-t border-neutral-200 px-8 py-6">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="text-sm text-neutral-500">
|
|
||||||
{canSave
|
|
||||||
? 'Ready to save changes'
|
|
||||||
: hasChanges
|
|
||||||
? 'Please fill required fields'
|
|
||||||
: 'No changes made'}
|
|
||||||
</div>
|
|
||||||
{/* Delete Account Button - Only show for existing users */}
|
|
||||||
{user && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowDeleteConfirm(true)}
|
|
||||||
className="text-red-600 hover:text-red-700 text-sm font-medium transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Delete Account
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleCancel}
|
|
||||||
className="px-6"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleSave}
|
|
||||||
disabled={!canSave}
|
|
||||||
className={cn(
|
|
||||||
'flex items-center gap-2 px-6',
|
|
||||||
!canSave && 'opacity-50 cursor-not-allowed'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<SaveOutlined className="text-sm" />
|
|
||||||
{user ? 'Save Changes' : 'Create User'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Delete Confirmation Modal */}
|
|
||||||
{showDeleteConfirm && (
|
|
||||||
<div className="fixed inset-0 z-60">
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 bg-black/50"
|
|
||||||
onClick={() => setShowDeleteConfirm(false)}
|
|
||||||
/>
|
|
||||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
|
||||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md">
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
|
|
||||||
<ExclamationOutlined className="text-red-600 text-lg" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900">
|
|
||||||
Delete Account
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-neutral-500">
|
|
||||||
This action cannot be undone
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-neutral-700 mb-6">
|
|
||||||
Are you sure you want to permanently delete{' '}
|
|
||||||
<strong>{formData.fullname}</strong>'s account? This will
|
|
||||||
remove all their data and cannot be reversed.
|
|
||||||
</p>
|
|
||||||
<div className="flex gap-3 justify-end">
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowDeleteConfirm(false)}
|
|
||||||
className="px-4"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleDeleteAccount}
|
|
||||||
className="px-4 bg-red-600 hover:bg-red-700 border-red-600"
|
|
||||||
>
|
|
||||||
Delete Account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalUserDetail;
|
|
||||||
@@ -1,573 +0,0 @@
|
|||||||
import {
|
|
||||||
FC,
|
|
||||||
ReactElement,
|
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useCallback,
|
|
||||||
} from 'react';
|
|
||||||
import ModalUserDetail from './_components/modal-user-detail';
|
|
||||||
import {
|
|
||||||
BackofficeWrapper,
|
|
||||||
DataTable,
|
|
||||||
} from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
import {
|
|
||||||
EditOutlined,
|
|
||||||
UserOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
FilterOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
LoadingOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { CityFilterSelect } from '../../../components/city-filter-select';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminUsers,
|
|
||||||
TAdminUserItem,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { useSearchParams } from 'react-router-dom';
|
|
||||||
|
|
||||||
type UserType = TAdminUserItem;
|
|
||||||
|
|
||||||
// Skills options for filter
|
|
||||||
const skillsOptions = [
|
|
||||||
'Frontend Developer',
|
|
||||||
'Backend Developer',
|
|
||||||
'Full Stack Developer',
|
|
||||||
'DevOps Engineer',
|
|
||||||
'UI/UX Designer',
|
|
||||||
'Product Manager',
|
|
||||||
'Data Scientist',
|
|
||||||
'Mobile Developer',
|
|
||||||
];
|
|
||||||
|
|
||||||
export const HackathonUsersPage: FC = (): ReactElement => {
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
const currentPage = Math.max(
|
|
||||||
1,
|
|
||||||
parseInt(searchParams.get('page') || '1', 10)
|
|
||||||
);
|
|
||||||
const searchQuery = searchParams.get('search') || '';
|
|
||||||
const perPage = parseInt(searchParams.get('per_page') || '10', 10);
|
|
||||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
|
||||||
const [showNewUserModal, setShowNewUserModal] = useState(false);
|
|
||||||
const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
|
|
||||||
const [globalFilter, setGlobalFilter] = useState(searchQuery);
|
|
||||||
|
|
||||||
// Advanced filtering states
|
|
||||||
const [statusFilter, setStatusFilter] = useState('all');
|
|
||||||
const [cityFilter, setCityFilter] = useState('all');
|
|
||||||
const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
|
|
||||||
|
|
||||||
// Fetch users from API
|
|
||||||
const {
|
|
||||||
data: usersResponse,
|
|
||||||
isLoading,
|
|
||||||
isFetching,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
'admin-users',
|
|
||||||
currentPage,
|
|
||||||
perPage,
|
|
||||||
cityFilter,
|
|
||||||
statusFilter,
|
|
||||||
searchQuery,
|
|
||||||
],
|
|
||||||
queryFn: () =>
|
|
||||||
getAdminUsers({
|
|
||||||
page: currentPage,
|
|
||||||
per_page: perPage,
|
|
||||||
search: searchQuery || undefined,
|
|
||||||
}),
|
|
||||||
staleTime: 30000, // 30 seconds cache
|
|
||||||
gcTime: 5 * 60 * 1000, // 5 minutes
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalData = usersResponse?.meta?.total_data || 0;
|
|
||||||
const totalPages = usersResponse?.meta?.total_page || 1;
|
|
||||||
|
|
||||||
// Handle page change - update URL query params
|
|
||||||
const handlePageChange = useCallback(
|
|
||||||
(newPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', newPage.toString());
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
[setSearchParams, perPage, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Validate page number doesn't exceed total pages
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isLoading && totalPages > 0 && currentPage > totalPages) {
|
|
||||||
setSearchParams({ page: totalPages.toString() });
|
|
||||||
}
|
|
||||||
}, [currentPage, totalPages, setSearchParams, isLoading]);
|
|
||||||
|
|
||||||
// Sync globalFilter with URL search param on mount
|
|
||||||
useEffect(() => {
|
|
||||||
setGlobalFilter(searchQuery);
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
// Handle search users
|
|
||||||
const handleSearch = useCallback(() => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (globalFilter.trim()) {
|
|
||||||
params.set('search', globalFilter.trim());
|
|
||||||
}
|
|
||||||
setSearchParams(params);
|
|
||||||
}, [globalFilter, setSearchParams, perPage]);
|
|
||||||
|
|
||||||
// Handle Enter key press in search input
|
|
||||||
const handleSearchKeyPress = useCallback(
|
|
||||||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[handleSearch]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle per page change
|
|
||||||
const handlePerPageChange = useCallback(
|
|
||||||
(newPerPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
params.set('per_page', newPerPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
},
|
|
||||||
[setSearchParams, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Memoize the callback to prevent recreation
|
|
||||||
const handleShowDetailModal = useCallback((user: UserType) => {
|
|
||||||
setSelectedUser(user);
|
|
||||||
setShowDetailModal(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCloseDetailModal = useCallback(() => {
|
|
||||||
setShowDetailModal(false);
|
|
||||||
setSelectedUser(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleShowNewUserModal = useCallback(() => {
|
|
||||||
setShowNewUserModal(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCloseNewUserModal = useCallback(() => {
|
|
||||||
setShowNewUserModal(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Filter data based on current filter states
|
|
||||||
const filteredData = useMemo(() => {
|
|
||||||
const usersData = usersResponse?.data || [];
|
|
||||||
return usersData.filter((user: UserType) => {
|
|
||||||
// Status filter
|
|
||||||
if (statusFilter !== 'all') {
|
|
||||||
const isActive = statusFilter === 'active';
|
|
||||||
if (user.is_active !== isActive) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Skills filter
|
|
||||||
if (skillsFilter.length > 0) {
|
|
||||||
const userSkills = user.skills || [];
|
|
||||||
const hasMatchingSkill = skillsFilter.some((skill) =>
|
|
||||||
userSkills.includes(skill)
|
|
||||||
);
|
|
||||||
if (!hasMatchingSkill) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}, [usersResponse, statusFilter, skillsFilter]);
|
|
||||||
|
|
||||||
// Memoize columns to prevent recreation on every render
|
|
||||||
const columns: ColumnDef<UserType>[] = useMemo(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
accessorKey: 'fullname',
|
|
||||||
header: 'User',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{/* Avatar */}
|
|
||||||
<div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden shrink-0">
|
|
||||||
{row.original.avatar ? (
|
|
||||||
<img
|
|
||||||
src={row.original.avatar}
|
|
||||||
alt={row.original.fullname}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<UserOutlined className="text-neutral-500 text-lg" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* Name only */}
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<p className="font-medium text-neutral-900 truncate">
|
|
||||||
{row.original.fullname}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'skills',
|
|
||||||
header: 'Skills',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const skills = row.original.skills || [];
|
|
||||||
return (
|
|
||||||
<div className="flex flex-wrap gap-1 max-w-xs">
|
|
||||||
{skills.length > 0 ? (
|
|
||||||
<>
|
|
||||||
{skills.slice(0, 2).map((skill, index) => (
|
|
||||||
<span
|
|
||||||
key={index}
|
|
||||||
className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
|
|
||||||
>
|
|
||||||
{skill.replace(' Developer', '').replace(' Engineer', '')}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
{skills.length > 2 && (
|
|
||||||
<span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
|
|
||||||
+{skills.length - 2}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="text-neutral-400">-</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'location',
|
|
||||||
header: 'Location',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-neutral-700">{row.original.location}</span>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'is_active',
|
|
||||||
header: 'Status',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'w-2 h-2 rounded-full',
|
|
||||||
row.original.is_active ? 'bg-success-500' : 'bg-neutral-400'
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'text-sm font-medium',
|
|
||||||
row.original.is_active ? 'text-success-700' : 'text-neutral-500'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{row.original.is_active ? 'Active' : 'Inactive'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
sortingFn: (rowA, rowB) => {
|
|
||||||
const aActive = rowA.original.is_active;
|
|
||||||
const bActive = rowB.original.is_active;
|
|
||||||
if (aActive && !bActive) return -1;
|
|
||||||
if (!aActive && bActive) return 1;
|
|
||||||
return 0;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'created_at',
|
|
||||||
header: 'Joined',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-neutral-900 text-sm">
|
|
||||||
{new Date(row.original.created_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
sortingFn: 'datetime',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'actions',
|
|
||||||
header: 'Actions',
|
|
||||||
meta: { cellClassName: cn('w-48') },
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
className="flex items-center gap-2 text-sm px-4 py-2"
|
|
||||||
onClick={() => handleShowDetailModal(row.original)}
|
|
||||||
>
|
|
||||||
<EditOutlined className="text-sm" />
|
|
||||||
Manage
|
|
||||||
</Button>
|
|
||||||
{/* <Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
className="text-sm px-4 py-2"
|
|
||||||
onClick={() => {
|
|
||||||
// Toggle user status - implement later
|
|
||||||
console.log(`Toggle status for ${row.original.fullname}`);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{row.original.is_active ? 'Deactivate' : 'Activate'}
|
|
||||||
</Button> */}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[handleShowDetailModal]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
|
|
||||||
<h1 className="mb-8 text-p1 font-semibold text-neutral-700">
|
|
||||||
User Management
|
|
||||||
</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 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 users by name or location..."
|
|
||||||
value={globalFilter}
|
|
||||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
|
||||||
onKeyPress={handleSearchKeyPress}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Per Page Dropdown */}
|
|
||||||
<div className="relative">
|
|
||||||
<select
|
|
||||||
className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={perPage}
|
|
||||||
onChange={(e) =>
|
|
||||||
handlePerPageChange(parseInt(e.target.value, 10))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value={10}>10 / page</option>
|
|
||||||
<option value={20}>20 / page</option>
|
|
||||||
<option value={50}>50 / page</option>
|
|
||||||
<option value={100}>100 / page</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status 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={statusFilter}
|
|
||||||
onChange={(e) => setStatusFilter(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="all">All Status</option>
|
|
||||||
<option value="active">Active</option>
|
|
||||||
<option value="inactive">Inactive</option>
|
|
||||||
</select>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* City Filter */}
|
|
||||||
{/* <CityFilterSelect
|
|
||||||
value={cityFilter}
|
|
||||||
onChange={setCityFilter}
|
|
||||||
className="w-full sm:w-44"
|
|
||||||
placeholder="Search cities..."
|
|
||||||
allOptionLabel="All Cities"
|
|
||||||
/>
|
|
||||||
{cityFilter !== 'all' && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
|
|
||||||
Location: {cityFilter}
|
|
||||||
<button
|
|
||||||
onClick={() => setCityFilter('all')}
|
|
||||||
className="text-green-600 hover:text-green-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
{/* Skills Filter with Icon */}
|
|
||||||
{/* <div className="relative">
|
|
||||||
<FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
|
|
||||||
<select
|
|
||||||
className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value=""
|
|
||||||
onChange={(e) => {
|
|
||||||
if (
|
|
||||||
e.target.value &&
|
|
||||||
!skillsFilter.includes(e.target.value)
|
|
||||||
) {
|
|
||||||
setSkillsFilter((prev) => [...prev, e.target.value]);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="">Add Skill Filter</option>
|
|
||||||
{skillsOptions.map((skill) => (
|
|
||||||
<option
|
|
||||||
key={skill}
|
|
||||||
value={skill}
|
|
||||||
disabled={skillsFilter.includes(skill)}
|
|
||||||
>
|
|
||||||
{skill}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right side - Add User Button */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="md"
|
|
||||||
className="flex items-center gap-2 px-4 py-2"
|
|
||||||
onClick={handleShowNewUserModal}
|
|
||||||
>
|
|
||||||
<PlusOutlined className="text-sm" />
|
|
||||||
Add User
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Active filters display */}
|
|
||||||
{(skillsFilter.length > 0 ||
|
|
||||||
statusFilter !== 'all' ||
|
|
||||||
cityFilter !== 'all') && (
|
|
||||||
<div className="flex flex-wrap gap-2 items-center">
|
|
||||||
<span className="text-sm text-neutral-600">Active filters:</span>
|
|
||||||
|
|
||||||
{/* Status filter badge */}
|
|
||||||
{statusFilter !== 'all' && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
|
|
||||||
Status: {statusFilter}
|
|
||||||
<button
|
|
||||||
onClick={() => setStatusFilter('all')}
|
|
||||||
className="text-info-600 hover:text-info-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Location 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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Skills filter badges */}
|
|
||||||
{skillsFilter.map((skill) => (
|
|
||||||
<span
|
|
||||||
key={skill}
|
|
||||||
className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-2xl text-sm"
|
|
||||||
>
|
|
||||||
{skill.replace(' Developer', '').replace(' Engineer', '')}
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setSkillsFilter((prev) => prev.filter((s) => s !== skill))
|
|
||||||
}
|
|
||||||
className="text-purple-600 hover:text-purple-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Clear all filters */}
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setStatusFilter('all');
|
|
||||||
setCityFilter('all');
|
|
||||||
setSkillsFilter([]);
|
|
||||||
setGlobalFilter('');
|
|
||||||
}}
|
|
||||||
className="text-sm text-neutral-600"
|
|
||||||
>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Loading & results display */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
|
|
||||||
<span className="ml-3 text-neutral-600">Loading users...</span>
|
|
||||||
</div>
|
|
||||||
) : filteredData.length > 0 ? (
|
|
||||||
<>
|
|
||||||
<div className="text-sm text-neutral-600">
|
|
||||||
Showing {filteredData.length} of {totalData} users (Page{' '}
|
|
||||||
{currentPage} of {totalPages})
|
|
||||||
{isFetching && (
|
|
||||||
<span className="ml-2 text-primary-500">(Updating...)</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DataTable
|
|
||||||
data={filteredData}
|
|
||||||
columns={columns}
|
|
||||||
pageSize={perPage}
|
|
||||||
manualPagination={true}
|
|
||||||
pageCount={totalPages}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12 text-neutral-500">
|
|
||||||
No users found. Try adjusting your filters.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Modals component */}
|
|
||||||
<ModalUserDetail
|
|
||||||
isOpen={showDetailModal}
|
|
||||||
onClose={handleCloseDetailModal}
|
|
||||||
user={selectedUser}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* New User Modal */}
|
|
||||||
<ModalUserDetail
|
|
||||||
isOpen={showNewUserModal}
|
|
||||||
onClose={handleCloseNewUserModal}
|
|
||||||
user={null} // null indicates creating new user
|
|
||||||
/>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HackathonUsersPage;
|
|
||||||
@@ -1,51 +1,13 @@
|
|||||||
import { FC, ReactElement, useState } from 'react';
|
import { FC, ReactElement } from 'react';
|
||||||
import { Outlet } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
|
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
|
||||||
|
|
||||||
export const AppLayout: FC = (): ReactElement => {
|
export const AppLayout: FC = (): ReactElement => {
|
||||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-primary-50 min-h-screen flex justify-center">
|
<div className="bg-primary-50 min-h-screen flex justify-center">
|
||||||
<div className="bg-primary-50 min-h-screen w-full flex">
|
<div className="bg-primary-50 min-h-screen w-full flex">
|
||||||
<BackofficeSidebar
|
<BackofficeSidebar />
|
||||||
isOpen={mobileSidebarOpen}
|
|
||||||
onClose={() => setMobileSidebarOpen(false)}
|
|
||||||
/>
|
|
||||||
<div className="flex-1 overflow-auto">
|
<div className="flex-1 overflow-auto">
|
||||||
{/* Sticky top header */}
|
|
||||||
<header
|
|
||||||
className={
|
|
||||||
'lg:hidden sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
|
|
||||||
(mobileSidebarOpen ? 'z-0' : 'z-30')
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{/* Mobile menu button (shown on small screens) */}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700 cursor-pointer"
|
|
||||||
onClick={() => setMobileSidebarOpen(true)}
|
|
||||||
aria-label="Open sidebar"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-5 h-5"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M4 6h16M4 12h16M4 18h16"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<h1 className="text-p3 font-semibold text-primary-700">
|
|
||||||
IMPHNEN Backoffice
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,29 +1,19 @@
|
|||||||
import { SearchOutlined } from '@ant-design/icons';
|
import { SearchOutlined } from "@ant-design/icons";
|
||||||
import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
|
import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
|
||||||
import {
|
import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
|
||||||
BackofficeWrapper,
|
import { cn, For } from "@imphnen-frontend-service/utils";
|
||||||
DataTable,
|
import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
|
||||||
} from '@imphnen-frontend-service/ui/organisms';
|
import { ReactElement, useState } from "react";
|
||||||
import { cn, For } from '@imphnen-frontend-service/utils';
|
import { ModalDetailUser } from "./_components/modal/detail";
|
||||||
import {
|
|
||||||
ColumnDef,
|
|
||||||
getCoreRowModel,
|
|
||||||
getPaginationRowModel,
|
|
||||||
PaginationState,
|
|
||||||
RowSelectionState,
|
|
||||||
useReactTable,
|
|
||||||
} from '@tanstack/react-table';
|
|
||||||
import { ReactElement, useState } from 'react';
|
|
||||||
import { ModalDetailUser } from './_components/modal/detail';
|
|
||||||
|
|
||||||
type UserStatus = 'active' | 'inactive';
|
type UserStatus = 'active' | 'inactive';
|
||||||
|
|
||||||
interface UserType {
|
interface UserType {
|
||||||
id: number;
|
id: number
|
||||||
name: string;
|
name: string
|
||||||
email: string;
|
email: string
|
||||||
rating: number;
|
rating: number
|
||||||
status: UserStatus;
|
status: UserStatus
|
||||||
}
|
}
|
||||||
|
|
||||||
const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
|
const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
|
||||||
@@ -32,15 +22,15 @@ const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
|
|||||||
email: 'fullname23@gmail.com',
|
email: 'fullname23@gmail.com',
|
||||||
rating: 4.5,
|
rating: 4.5,
|
||||||
status: i % 2 === 0 ? 'active' : 'inactive',
|
status: i % 2 === 0 ? 'active' : 'inactive',
|
||||||
}));
|
}))
|
||||||
|
|
||||||
export default function Components(): ReactElement {
|
export default function Components(): ReactElement {
|
||||||
const TABS = ['mentor', 'mentee'] as const;
|
const TABS = ['mentor', 'mentee'] as const
|
||||||
const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor');
|
const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor')
|
||||||
const [showDetail, setShowDetail] = useState(false);
|
const [showDetail, setShowDetail] = useState(false)
|
||||||
const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
|
const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
|
||||||
|
|
||||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
|
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
|
||||||
const [pagination, setPagination] = useState<PaginationState>({
|
const [pagination, setPagination] = useState<PaginationState>({
|
||||||
pageIndex: 0,
|
pageIndex: 0,
|
||||||
pageSize: 9,
|
pageSize: 9,
|
||||||
@@ -49,7 +39,7 @@ export default function Components(): ReactElement {
|
|||||||
const columns: ColumnDef<UserType>[] = [
|
const columns: ColumnDef<UserType>[] = [
|
||||||
{
|
{
|
||||||
id: 'select',
|
id: 'select',
|
||||||
meta: { cellClassName: cn('w-20') },
|
meta: { cellClassName: cn("w-20") },
|
||||||
header: ({ table }) => (
|
header: ({ table }) => (
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@@ -107,7 +97,7 @@ export default function Components(): ReactElement {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
header: 'Action',
|
header: 'Action',
|
||||||
meta: { cellClassName: cn('w-72') },
|
meta: { cellClassName: cn("w-72") },
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<Button
|
<Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
@@ -123,7 +113,7 @@ export default function Components(): ReactElement {
|
|||||||
</Button>
|
</Button>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
const table = useReactTable({
|
const table = useReactTable({
|
||||||
data: mockData,
|
data: mockData,
|
||||||
@@ -144,19 +134,14 @@ export default function Components(): ReactElement {
|
|||||||
return (
|
return (
|
||||||
<BackofficeWrapper title="Dimentorin.dev">
|
<BackofficeWrapper title="Dimentorin.dev">
|
||||||
<div className="mb-8 flex justify-between items-center">
|
<div className="mb-8 flex justify-between items-center">
|
||||||
<h1 className="text-p1 font-semibold text-neutral-700 mb-8">
|
<h1 className="text-p1 font-semibold text-neutral-700">User Management</h1>
|
||||||
User Management
|
|
||||||
</h1>
|
|
||||||
<div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
|
<div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
|
||||||
<For data={TABS}>
|
<For data={TABS}>
|
||||||
{(tab) => (
|
{(tab) => (
|
||||||
<Button
|
<Button
|
||||||
key={tab}
|
key={tab}
|
||||||
variant="text"
|
variant="text"
|
||||||
className={cn(
|
className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
|
||||||
'px-3 py-2 capitalize',
|
|
||||||
activeTab === tab && 'bg-white'
|
|
||||||
)}
|
|
||||||
onClick={() => setActiveTab(tab)}
|
onClick={() => setActiveTab(tab)}
|
||||||
>
|
>
|
||||||
{tab}
|
{tab}
|
||||||
@@ -178,16 +163,12 @@ export default function Components(): ReactElement {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Select>
|
<Select>
|
||||||
<option selected disabled>
|
<option selected disabled>Rating</option>
|
||||||
Rating
|
|
||||||
</option>
|
|
||||||
<option value="4.5">4.5</option>
|
<option value="4.5">4.5</option>
|
||||||
<option value="5">5</option>
|
<option value="5">5</option>
|
||||||
</Select>
|
</Select>
|
||||||
<Select>
|
<Select>
|
||||||
<option selected disabled>
|
<option selected disabled>Status</option>
|
||||||
Status
|
|
||||||
</option>
|
|
||||||
<option value="active">Active</option>
|
<option value="active">Active</option>
|
||||||
<option value="inactive">Inactive</option>
|
<option value="inactive">Inactive</option>
|
||||||
</Select>
|
</Select>
|
||||||
|
|||||||
@@ -2,39 +2,22 @@ import { useForm } from 'react-hook-form';
|
|||||||
import {
|
import {
|
||||||
authLoginSchema,
|
authLoginSchema,
|
||||||
TLoginRequest,
|
TLoginRequest,
|
||||||
useBackofficeLogin,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
} from '@imphnen-frontend-service/service';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import { useNavigate } from 'react-router';
|
import { useSession } from '@imphnen-frontend-service/utils';
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
export const useLogin = () => {
|
export const useLogin = () => {
|
||||||
const navigate = useNavigate();
|
|
||||||
const loginMutation = useBackofficeLogin();
|
|
||||||
|
|
||||||
const form = useForm<TLoginRequest>({
|
const form = useForm<TLoginRequest>({
|
||||||
resolver: zodResolver(authLoginSchema),
|
resolver: zodResolver(authLoginSchema),
|
||||||
mode: 'all',
|
mode: 'all',
|
||||||
defaultValues: {
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = form.handleSubmit(async (data) => {
|
const { signIn } = useSession();
|
||||||
try {
|
|
||||||
await loginMutation.mutateAsync(data);
|
const onSubmit = form.handleSubmit((data) => signIn(data));
|
||||||
toast.success('Login berhasil!');
|
|
||||||
navigate('/hackathon-dashboard');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[Backoffice Login] Error:', error);
|
|
||||||
toast.error((error as Error).message || 'Login gagal');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
form,
|
form,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
isLoading: loginMutation.isPending,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { useLogin } from './_hooks/use-login';
|
|||||||
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
||||||
|
|
||||||
export const Components: FC = (): ReactElement => {
|
export const Components: FC = (): ReactElement => {
|
||||||
const { form, onSubmit, isLoading } = useLogin();
|
const { form, onSubmit } = useLogin();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center min-h-screen">
|
<div className="flex justify-center items-center min-h-screen">
|
||||||
@@ -22,7 +22,6 @@ export const Components: FC = (): ReactElement => {
|
|||||||
name="email"
|
name="email"
|
||||||
size="lg"
|
size="lg"
|
||||||
className="w-full"
|
className="w-full"
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
/>
|
||||||
<ControlledInputField
|
<ControlledInputField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
@@ -32,11 +31,10 @@ export const Components: FC = (): ReactElement => {
|
|||||||
name="password"
|
name="password"
|
||||||
size="lg"
|
size="lg"
|
||||||
className="w-full"
|
className="w-full"
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
disabled={
|
disabled={
|
||||||
isLoading ||
|
form.formState.isSubmitting ||
|
||||||
form.formState.isValidating ||
|
form.formState.isValidating ||
|
||||||
!form.formState.isValid
|
!form.formState.isValid
|
||||||
}
|
}
|
||||||
@@ -44,7 +42,7 @@ export const Components: FC = (): ReactElement => {
|
|||||||
size="md"
|
size="md"
|
||||||
className="w-full"
|
className="w-full"
|
||||||
>
|
>
|
||||||
{isLoading ? 'Loading...' : 'Login'}
|
Login
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,23 +0,0 @@
|
|||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function NotFoundPage() {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
|
|
||||||
<h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
|
|
||||||
Page Not Found
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 mb-8">
|
|
||||||
The page you are looking for doesn't exist or has been moved.
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
to="/hackathon-dashboard"
|
|
||||||
className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
|
|
||||||
>
|
|
||||||
Go Back Home
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function ErrorPage() {
|
|
||||||
const error = useRouteError();
|
|
||||||
let errorMessage: string;
|
|
||||||
|
|
||||||
if (isRouteErrorResponse(error)) {
|
|
||||||
errorMessage = error.statusText;
|
|
||||||
} else if (error instanceof Error) {
|
|
||||||
errorMessage = error.message;
|
|
||||||
} else if (typeof error === 'string') {
|
|
||||||
errorMessage = error;
|
|
||||||
} else {
|
|
||||||
console.error(error);
|
|
||||||
errorMessage = 'Unknown error';
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
|
|
||||||
<p className="text-xl text-gray-700 mb-2">
|
|
||||||
Sorry, an unexpected error has occurred.
|
|
||||||
</p>
|
|
||||||
<p className="text-gray-500 italic">{errorMessage}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,148 +0,0 @@
|
|||||||
import { FC, useState, useRef, useEffect } from 'react';
|
|
||||||
import { FilterOutlined } from '@ant-design/icons';
|
|
||||||
import INDONESIAN_CITIES from '../constants/cities';
|
|
||||||
|
|
||||||
interface CityFilterSelectProps {
|
|
||||||
value: string;
|
|
||||||
onChange: (value: string) => void;
|
|
||||||
className?: string;
|
|
||||||
placeholder?: string;
|
|
||||||
allOptionLabel?: string;
|
|
||||||
filterIcon?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const CityFilterSelect: FC<CityFilterSelectProps> = ({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
className = '',
|
|
||||||
placeholder = 'Search cities...',
|
|
||||||
allOptionLabel = 'All Cities',
|
|
||||||
filterIcon = true,
|
|
||||||
}) => {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
// Filter cities based on search query
|
|
||||||
const filteredCities = INDONESIAN_CITIES.filter((city) =>
|
|
||||||
city.toLowerCase().includes(searchQuery.toLowerCase())
|
|
||||||
);
|
|
||||||
|
|
||||||
// Close dropdown when clicking outside
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = (event: MouseEvent) => {
|
|
||||||
if (
|
|
||||||
dropdownRef.current &&
|
|
||||||
!dropdownRef.current.contains(event.target as Node)
|
|
||||||
) {
|
|
||||||
setIsOpen(false);
|
|
||||||
setSearchQuery('');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener('mousedown', handleClickOutside);
|
|
||||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleSelectCity = (city: string) => {
|
|
||||||
onChange(city);
|
|
||||||
setSearchQuery('');
|
|
||||||
setIsOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInputClick = () => {
|
|
||||||
setIsOpen(true);
|
|
||||||
setSearchQuery('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClearSelection = () => {
|
|
||||||
onChange('all');
|
|
||||||
setSearchQuery('');
|
|
||||||
setIsOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const displayValue = value === 'all' ? allOptionLabel : value;
|
|
||||||
const showClearButton = value !== 'all' && !isOpen;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`relative ${className}`} ref={dropdownRef}>
|
|
||||||
<div className="relative">
|
|
||||||
{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"
|
|
||||||
value={isOpen ? searchQuery : displayValue}
|
|
||||||
onChange={(e) => {
|
|
||||||
setSearchQuery(e.target.value);
|
|
||||||
if (!isOpen) setIsOpen(true);
|
|
||||||
}}
|
|
||||||
onClick={handleInputClick}
|
|
||||||
onFocus={handleInputClick}
|
|
||||||
placeholder={isOpen ? placeholder : displayValue}
|
|
||||||
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
|
|
||||||
type="button"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleClearSelection();
|
|
||||||
}}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 text-xs cursor-pointer z-20"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isOpen && (
|
|
||||||
<div className="absolute z-50 w-full mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
|
||||||
{/* All Cities Option */}
|
|
||||||
<div
|
|
||||||
onClick={() => handleSelectCity('all')}
|
|
||||||
className={`px-3 py-2 cursor-pointer hover:bg-neutral-50 border-b border-neutral-100 ${
|
|
||||||
value === 'all'
|
|
||||||
? 'bg-primary-50 text-primary-700 font-medium'
|
|
||||||
: 'text-neutral-900'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{allOptionLabel}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filtered Cities */}
|
|
||||||
{filteredCities.length > 0 ? (
|
|
||||||
<div className="py-1">
|
|
||||||
{filteredCities.slice(0, 100).map((city) => (
|
|
||||||
<div
|
|
||||||
key={city}
|
|
||||||
onClick={() => handleSelectCity(city)}
|
|
||||||
className={`px-3 py-2 cursor-pointer hover:bg-neutral-50 text-sm ${
|
|
||||||
value === city
|
|
||||||
? 'bg-primary-50 text-primary-700 font-medium'
|
|
||||||
: 'text-neutral-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{city}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{filteredCities.length > 100 && (
|
|
||||||
<div className="px-3 py-2 text-xs text-neutral-500 border-t border-neutral-100">
|
|
||||||
Showing first 100 results. Continue typing to refine...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : searchQuery ? (
|
|
||||||
<div className="px-3 py-2 text-neutral-500 text-sm">
|
|
||||||
No cities found matching "{searchQuery}"
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,518 +0,0 @@
|
|||||||
const INDONESIAN_CITIES: string[] = [
|
|
||||||
'Aceh Selatan',
|
|
||||||
'Aceh Tenggara',
|
|
||||||
'Aceh Timur',
|
|
||||||
'Aceh Tengah',
|
|
||||||
'Aceh Barat',
|
|
||||||
'Aceh Besar',
|
|
||||||
'Pidie',
|
|
||||||
'Aceh Utara',
|
|
||||||
'Simeulue',
|
|
||||||
'Aceh Singkil',
|
|
||||||
'Bireuen',
|
|
||||||
'Aceh Barat Daya',
|
|
||||||
'Gayo Lues',
|
|
||||||
'Aceh Jaya',
|
|
||||||
'Nagan Raya',
|
|
||||||
'Aceh Tamiang',
|
|
||||||
'Bener Meriah',
|
|
||||||
'Pidie Jaya',
|
|
||||||
'Kota Banda Aceh',
|
|
||||||
'Kota Sabang',
|
|
||||||
'Kota Lhokseumawe',
|
|
||||||
'Kota Langsa',
|
|
||||||
'Kota Subulussalam',
|
|
||||||
'Tapanuli Tengah',
|
|
||||||
'Tapanuli Utara',
|
|
||||||
'Tapanuli Selatan',
|
|
||||||
'Nias',
|
|
||||||
'Langkat',
|
|
||||||
'Karo',
|
|
||||||
'Deli Serdang',
|
|
||||||
'Simalungun',
|
|
||||||
'Asahan',
|
|
||||||
'Labuhanbatu',
|
|
||||||
'Dairi',
|
|
||||||
'Toba',
|
|
||||||
'Mandailing Natal',
|
|
||||||
'Nias Selatan',
|
|
||||||
'Pakpak Bharat',
|
|
||||||
'Humbang Hasundutan',
|
|
||||||
'Samosir',
|
|
||||||
'Serdang Bedagai',
|
|
||||||
'Batu Bara',
|
|
||||||
'Padang Lawas Utara',
|
|
||||||
'Padang Lawas',
|
|
||||||
'Labuhanbatu Selatan',
|
|
||||||
'Labuhanbatu Utara',
|
|
||||||
'Nias Utara',
|
|
||||||
'Nias Barat',
|
|
||||||
'Kota Medan',
|
|
||||||
'Kota Pematangsiantar',
|
|
||||||
'Kota Sibolga',
|
|
||||||
'Kota Tanjung Balai',
|
|
||||||
'Kota Binjai',
|
|
||||||
'Kota Tebing Tinggi',
|
|
||||||
'Kota Padangsidimpuan',
|
|
||||||
'Kota Gunungsitoli',
|
|
||||||
'Pesisir Selatan',
|
|
||||||
'Solok',
|
|
||||||
'Sijunjung',
|
|
||||||
'Tanah Datar',
|
|
||||||
'Padang Pariaman',
|
|
||||||
'Agam',
|
|
||||||
'Lima Puluh Kota',
|
|
||||||
'Pasaman',
|
|
||||||
'Kepulauan Mentawai',
|
|
||||||
'Dharmasraya',
|
|
||||||
'Solok Selatan',
|
|
||||||
'Pasaman Barat',
|
|
||||||
'Kota Padang',
|
|
||||||
'Kota Solok',
|
|
||||||
'Kota Sawahlunto',
|
|
||||||
'Kota Padang Panjang',
|
|
||||||
'Kota Bukittinggi',
|
|
||||||
'Kota Payakumbuh',
|
|
||||||
'Kota Pariaman',
|
|
||||||
'Kampar',
|
|
||||||
'Indragiri Hulu',
|
|
||||||
'Bengkalis',
|
|
||||||
'Indragiri Hilir',
|
|
||||||
'Pelalawan',
|
|
||||||
'Rokan Hulu',
|
|
||||||
'Rokan Hilir',
|
|
||||||
'Siak',
|
|
||||||
'Kuantan Singingi',
|
|
||||||
'Kepulauan Meranti',
|
|
||||||
'Kota Pekanbaru',
|
|
||||||
'Kota Dumai',
|
|
||||||
'Kerinci',
|
|
||||||
'Merangin',
|
|
||||||
'Sarolangun',
|
|
||||||
'Batanghari',
|
|
||||||
'Muaro Jambi',
|
|
||||||
'Tanjung Jabung Barat',
|
|
||||||
'Tanjung Jabung Timur',
|
|
||||||
'Bungo',
|
|
||||||
'Tebo',
|
|
||||||
'Kota Jambi',
|
|
||||||
'Kota Sungai Penuh',
|
|
||||||
'Ogan Komering Ulu',
|
|
||||||
'Ogan Komering Ilir',
|
|
||||||
'Muara Enim',
|
|
||||||
'Lahat',
|
|
||||||
'Musi Rawas',
|
|
||||||
'Musi Banyuasin',
|
|
||||||
'Banyuasin',
|
|
||||||
'Ogan Komering Ulu Timur',
|
|
||||||
'Ogan Komering Ulu Selatan',
|
|
||||||
'Ogan Ilir',
|
|
||||||
'Empat Lawang',
|
|
||||||
'Penukal Abab Lematang Ilir',
|
|
||||||
'Musi Rawas Utara',
|
|
||||||
'Kota Palembang',
|
|
||||||
'Kota Pagar Alam',
|
|
||||||
'Kota Lubuk Linggau',
|
|
||||||
'Kota Prabumulih',
|
|
||||||
'Bengkulu Selatan',
|
|
||||||
'Rejang Lebong',
|
|
||||||
'Bengkulu Utara',
|
|
||||||
'Kaur',
|
|
||||||
'Seluma',
|
|
||||||
'Muko Muko',
|
|
||||||
'Lebong',
|
|
||||||
'Kepahiang',
|
|
||||||
'Bengkulu Tengah',
|
|
||||||
'Kota Bengkulu',
|
|
||||||
'Lampung Selatan',
|
|
||||||
'Lampung Tengah',
|
|
||||||
'Lampung Utara',
|
|
||||||
'Lampung Barat',
|
|
||||||
'Tulang Bawang',
|
|
||||||
'Tanggamus',
|
|
||||||
'Lampung Timur',
|
|
||||||
'Way Kanan',
|
|
||||||
'Pesawaran',
|
|
||||||
'Pringsewu',
|
|
||||||
'Mesuji',
|
|
||||||
'Tulang Bawang Barat',
|
|
||||||
'Pesisir Barat',
|
|
||||||
'Kota Bandar Lampung',
|
|
||||||
'Kota Metro',
|
|
||||||
'Bangka',
|
|
||||||
'Belitung',
|
|
||||||
'Bangka Selatan',
|
|
||||||
'Bangka Tengah',
|
|
||||||
'Bangka Barat',
|
|
||||||
'Belitung Timur',
|
|
||||||
'Kota Pangkal Pinang',
|
|
||||||
'Bintan',
|
|
||||||
'Karimun',
|
|
||||||
'Natuna',
|
|
||||||
'Lingga',
|
|
||||||
'Kepulauan Anambas',
|
|
||||||
'Kota Batam',
|
|
||||||
'Kota Tanjung Pinang',
|
|
||||||
'Kepulauan Seribu',
|
|
||||||
'Kota Jakarta Pusat',
|
|
||||||
'Kota Jakarta Utara',
|
|
||||||
'Kota Jakarta Barat',
|
|
||||||
'Kota Jakarta Selatan',
|
|
||||||
'Kota Jakarta Timur',
|
|
||||||
'Bogor',
|
|
||||||
'Sukabumi',
|
|
||||||
'Cianjur',
|
|
||||||
'Bandung',
|
|
||||||
'Garut',
|
|
||||||
'Tasikmalaya',
|
|
||||||
'Ciamis',
|
|
||||||
'Kuningan',
|
|
||||||
'Cirebon',
|
|
||||||
'Majalengka',
|
|
||||||
'Sumedang',
|
|
||||||
'Indramayu',
|
|
||||||
'Subang',
|
|
||||||
'Purwakarta',
|
|
||||||
'Karawang',
|
|
||||||
'Bekasi',
|
|
||||||
'Bandung Barat',
|
|
||||||
'Pangandaran',
|
|
||||||
'Kota Bogor',
|
|
||||||
'Kota Sukabumi',
|
|
||||||
'Kota Bandung',
|
|
||||||
'Kota Cirebon',
|
|
||||||
'Kota Bekasi',
|
|
||||||
'Kota Depok',
|
|
||||||
'Kota Cimahi',
|
|
||||||
'Kota Tasikmalaya',
|
|
||||||
'Kota Banjar',
|
|
||||||
'Cilacap',
|
|
||||||
'Banyumas',
|
|
||||||
'Purbalingga',
|
|
||||||
'Banjarnegara',
|
|
||||||
'Kebumen',
|
|
||||||
'Purworejo',
|
|
||||||
'Wonosobo',
|
|
||||||
'Magelang',
|
|
||||||
'Boyolali',
|
|
||||||
'Klaten',
|
|
||||||
'Sukoharjo',
|
|
||||||
'Wonogiri',
|
|
||||||
'Karanganyar',
|
|
||||||
'Sragen',
|
|
||||||
'Grobogan',
|
|
||||||
'Blora',
|
|
||||||
'Rembang',
|
|
||||||
'Pati',
|
|
||||||
'Kudus',
|
|
||||||
'Jepara',
|
|
||||||
'Demak',
|
|
||||||
'Semarang',
|
|
||||||
'Temanggung',
|
|
||||||
'Kendal',
|
|
||||||
'Batang',
|
|
||||||
'Pekalongan',
|
|
||||||
'Pemalang',
|
|
||||||
'Tegal',
|
|
||||||
'Brebes',
|
|
||||||
'Kota Magelang',
|
|
||||||
'Kota Surakarta',
|
|
||||||
'Kota Salatiga',
|
|
||||||
'Kota Semarang',
|
|
||||||
'Kota Pekalongan',
|
|
||||||
'Kota Tegal',
|
|
||||||
'Kulon Progo',
|
|
||||||
'Bantul',
|
|
||||||
'Gunungkidul',
|
|
||||||
'Sleman',
|
|
||||||
'Kota Yogyakarta',
|
|
||||||
'Pacitan',
|
|
||||||
'Ponorogo',
|
|
||||||
'Trenggalek',
|
|
||||||
'Tulungagung',
|
|
||||||
'Blitar',
|
|
||||||
'Kediri',
|
|
||||||
'Malang',
|
|
||||||
'Lumajang',
|
|
||||||
'Jember',
|
|
||||||
'Banyuwangi',
|
|
||||||
'Bondowoso',
|
|
||||||
'Situbondo',
|
|
||||||
'Probolinggo',
|
|
||||||
'Pasuruan',
|
|
||||||
'Sidoarjo',
|
|
||||||
'Mojokerto',
|
|
||||||
'Jombang',
|
|
||||||
'Nganjuk',
|
|
||||||
'Madiun',
|
|
||||||
'Magetan',
|
|
||||||
'Ngawi',
|
|
||||||
'Bojonegoro',
|
|
||||||
'Tuban',
|
|
||||||
'Lamongan',
|
|
||||||
'Gresik',
|
|
||||||
'Bangkalan',
|
|
||||||
'Sampang',
|
|
||||||
'Pamekasan',
|
|
||||||
'Sumenep',
|
|
||||||
'Kota Kediri',
|
|
||||||
'Kota Blitar',
|
|
||||||
'Kota Malang',
|
|
||||||
'Kota Probolinggo',
|
|
||||||
'Kota Pasuruan',
|
|
||||||
'Kota Mojokerto',
|
|
||||||
'Kota Madiun',
|
|
||||||
'Kota Surabaya',
|
|
||||||
'Kota Batu',
|
|
||||||
'Pandeglang',
|
|
||||||
'Lebak',
|
|
||||||
'Tangerang',
|
|
||||||
'Serang',
|
|
||||||
'Kota Tangerang',
|
|
||||||
'Kota Cilegon',
|
|
||||||
'Kota Serang',
|
|
||||||
'Kota Tangerang Selatan',
|
|
||||||
'Jembrana',
|
|
||||||
'Tabanan',
|
|
||||||
'Badung',
|
|
||||||
'Gianyar',
|
|
||||||
'Klungkung',
|
|
||||||
'Bangli',
|
|
||||||
'Karangasem',
|
|
||||||
'Buleleng',
|
|
||||||
'Kota Denpasar',
|
|
||||||
'Lombok Barat',
|
|
||||||
'Lombok Tengah',
|
|
||||||
'Lombok Timur',
|
|
||||||
'Sumbawa',
|
|
||||||
'Dompu',
|
|
||||||
'Bima',
|
|
||||||
'Sumbawa Barat',
|
|
||||||
'Lombok Utara',
|
|
||||||
'Kota Mataram',
|
|
||||||
'Kota Bima',
|
|
||||||
'Kupang',
|
|
||||||
'Timor Tengah Selatan',
|
|
||||||
'Timor Tengah Utara',
|
|
||||||
'Belu',
|
|
||||||
'Alor',
|
|
||||||
'Flores Timur',
|
|
||||||
'Sikka',
|
|
||||||
'Ende',
|
|
||||||
'Ngada',
|
|
||||||
'Manggarai',
|
|
||||||
'Sumba Timur',
|
|
||||||
'Sumba Barat',
|
|
||||||
'Lembata',
|
|
||||||
'Rote Ndao',
|
|
||||||
'Manggarai Barat',
|
|
||||||
'Nagekeo',
|
|
||||||
'Sumba Tengah',
|
|
||||||
'Sumba Barat Daya',
|
|
||||||
'Manggarai Timur',
|
|
||||||
'Sabu Raijua',
|
|
||||||
'Malaka',
|
|
||||||
'Kota Kupang',
|
|
||||||
'Sambas',
|
|
||||||
'Mempawah',
|
|
||||||
'Sanggau',
|
|
||||||
'Ketapang',
|
|
||||||
'Sintang',
|
|
||||||
'Kapuas Hulu',
|
|
||||||
'Bengkayang',
|
|
||||||
'Landak',
|
|
||||||
'Sekadau',
|
|
||||||
'Melawi',
|
|
||||||
'Kayong Utara',
|
|
||||||
'Kubu Raya',
|
|
||||||
'Kota Pontianak',
|
|
||||||
'Kota Singkawang',
|
|
||||||
'Kotawaringin Barat',
|
|
||||||
'Kotawaringin Timur',
|
|
||||||
'Kapuas',
|
|
||||||
'Barito Selatan',
|
|
||||||
'Barito Utara',
|
|
||||||
'Katingan',
|
|
||||||
'Seruyan',
|
|
||||||
'Sukamara',
|
|
||||||
'Lamandau',
|
|
||||||
'Gunung Mas',
|
|
||||||
'Pulang Pisau',
|
|
||||||
'Murung Raya',
|
|
||||||
'Barito Timur',
|
|
||||||
'Kota Palangkaraya',
|
|
||||||
'Tanah Laut',
|
|
||||||
'Kotabaru',
|
|
||||||
'Banjar',
|
|
||||||
'Barito Kuala',
|
|
||||||
'Tapin',
|
|
||||||
'Hulu Sungai Selatan',
|
|
||||||
'Hulu Sungai Tengah',
|
|
||||||
'Hulu Sungai Utara',
|
|
||||||
'Tabalong',
|
|
||||||
'Tanah Bumbu',
|
|
||||||
'Balangan',
|
|
||||||
'Kota Banjarmasin',
|
|
||||||
'Kota Banjarbaru',
|
|
||||||
'Paser',
|
|
||||||
'Kutai Kartanegara',
|
|
||||||
'Berau',
|
|
||||||
'Kutai Barat',
|
|
||||||
'Kutai Timur',
|
|
||||||
'Penajam Paser Utara',
|
|
||||||
'Mahakam Ulu',
|
|
||||||
'Kota Balikpapan',
|
|
||||||
'Kota Samarinda',
|
|
||||||
'Kota Bontang',
|
|
||||||
'Bulungan',
|
|
||||||
'Malinau',
|
|
||||||
'Nunukan',
|
|
||||||
'Tana Tidung',
|
|
||||||
'Kota Tarakan',
|
|
||||||
'Bolaang Mongondow',
|
|
||||||
'Minahasa',
|
|
||||||
'Kepulauan Sangihe',
|
|
||||||
'Kepulauan Talaud',
|
|
||||||
'Minahasa Selatan',
|
|
||||||
'Minahasa Utara',
|
|
||||||
'Minahasa Tenggara',
|
|
||||||
'Bolaang Mongondow Utara',
|
|
||||||
'Kepulauan Siau Tagulandang Biaro (Sitaro)',
|
|
||||||
'Bolaang Mongondow Timur',
|
|
||||||
'Bolaang Mongondow Selatan',
|
|
||||||
'Kota Manado',
|
|
||||||
'Kota Bitung',
|
|
||||||
'Kota Tomohon',
|
|
||||||
'Kota Kotamobagu',
|
|
||||||
'Banggai',
|
|
||||||
'Poso',
|
|
||||||
'Donggala',
|
|
||||||
'Toli Toli',
|
|
||||||
'Buol',
|
|
||||||
'Morowali',
|
|
||||||
'Banggai Kepulauan',
|
|
||||||
'Parigi Moutong',
|
|
||||||
'Tojo Una Una',
|
|
||||||
'Sigi',
|
|
||||||
'Banggai Laut',
|
|
||||||
'Morowali Utara',
|
|
||||||
'Kota Palu',
|
|
||||||
'Kepulauan Selayar',
|
|
||||||
'Bulukumba',
|
|
||||||
'Bantaeng',
|
|
||||||
'Jeneponto',
|
|
||||||
'Takalar',
|
|
||||||
'Gowa',
|
|
||||||
'Sinjai',
|
|
||||||
'Bone',
|
|
||||||
'Maros',
|
|
||||||
'Pangkajene Kepulauan',
|
|
||||||
'Barru',
|
|
||||||
'Soppeng',
|
|
||||||
'Wajo',
|
|
||||||
'Sidenreng Rappang',
|
|
||||||
'Pinrang',
|
|
||||||
'Enrekang',
|
|
||||||
'Luwu',
|
|
||||||
'Tana Toraja',
|
|
||||||
'Luwu Utara',
|
|
||||||
'Luwu Timur',
|
|
||||||
'Toraja Utara',
|
|
||||||
'Kota Makassar',
|
|
||||||
'Kota Pare Pare',
|
|
||||||
'Kota Palopo',
|
|
||||||
'Kolaka',
|
|
||||||
'Konawe',
|
|
||||||
'Muna',
|
|
||||||
'Buton',
|
|
||||||
'Konawe Selatan',
|
|
||||||
'Bombana',
|
|
||||||
'Wakatobi',
|
|
||||||
'Kolaka Utara',
|
|
||||||
'Konawe Utara',
|
|
||||||
'Buton Utara',
|
|
||||||
'Kolaka Timur',
|
|
||||||
'Konawe Kepulauan',
|
|
||||||
'Muna Barat',
|
|
||||||
'Buton Tengah',
|
|
||||||
'Buton Selatan',
|
|
||||||
'Kota Kendari',
|
|
||||||
'Kota Bau Bau',
|
|
||||||
'Gorontalo',
|
|
||||||
'Boalemo',
|
|
||||||
'Bone Bolango',
|
|
||||||
'Pahuwato',
|
|
||||||
'Gorontalo Utara',
|
|
||||||
'Kota Gorontalo',
|
|
||||||
'Pasangkayu (Mamuju Utara)',
|
|
||||||
'Mamuju',
|
|
||||||
'Mamasa',
|
|
||||||
'Polewali Mandar',
|
|
||||||
'Majene',
|
|
||||||
'Mamuju Tengah',
|
|
||||||
'Maluku Tengah',
|
|
||||||
'Maluku Tenggara',
|
|
||||||
'Kepulauan Tanimbar (Maluku Tenggara Barat)',
|
|
||||||
'Buru',
|
|
||||||
'Seram Bagian Timur',
|
|
||||||
'Seram Bagian Barat',
|
|
||||||
'Kepulauan Aru',
|
|
||||||
'Maluku Barat Daya',
|
|
||||||
'Buru Selatan',
|
|
||||||
'Kota Ambon',
|
|
||||||
'Kota Tual',
|
|
||||||
'Halmahera Barat',
|
|
||||||
'Halmahera Tengah',
|
|
||||||
'Halmahera Utara',
|
|
||||||
'Halmahera Selatan',
|
|
||||||
'Kepulauan Sula',
|
|
||||||
'Halmahera Timur',
|
|
||||||
'Pulau Morotai',
|
|
||||||
'Pulau Taliabu',
|
|
||||||
'Kota Ternate',
|
|
||||||
'Kota Tidore Kepulauan',
|
|
||||||
'Jayapura',
|
|
||||||
'Kepulauan Yapen',
|
|
||||||
'Biak Numfor',
|
|
||||||
'Sarmi',
|
|
||||||
'Keerom',
|
|
||||||
'Waropen',
|
|
||||||
'Supiori',
|
|
||||||
'Mamberamo Raya',
|
|
||||||
'Kota Jayapura',
|
|
||||||
'Manokwari',
|
|
||||||
'Fak Fak',
|
|
||||||
'Teluk Bintuni',
|
|
||||||
'Teluk Wondama',
|
|
||||||
'Kaimana',
|
|
||||||
'Manokwari Selatan',
|
|
||||||
'Pegunungan Arfak',
|
|
||||||
'Merauke',
|
|
||||||
'Boven Digoel',
|
|
||||||
'Mappi',
|
|
||||||
'Asmat',
|
|
||||||
'Nabire',
|
|
||||||
'Puncak Jaya',
|
|
||||||
'Paniai',
|
|
||||||
'Mimika',
|
|
||||||
'Puncak',
|
|
||||||
'Dogiyai',
|
|
||||||
'Intan Jaya',
|
|
||||||
'Deiyai',
|
|
||||||
'Jayawijaya',
|
|
||||||
'Pegunungan Bintang',
|
|
||||||
'Yahukimo',
|
|
||||||
'Tolikara',
|
|
||||||
'Mamberamo Tengah',
|
|
||||||
'Yalimo',
|
|
||||||
'Lanny Jaya',
|
|
||||||
'Nduga',
|
|
||||||
'Sorong',
|
|
||||||
'Sorong Selatan',
|
|
||||||
'Raja Ampat',
|
|
||||||
'Tambrauw',
|
|
||||||
'Maybrat',
|
|
||||||
'Kota Sorong',
|
|
||||||
];
|
|
||||||
|
|
||||||
export default INDONESIAN_CITIES;
|
|
||||||
@@ -130,7 +130,7 @@
|
|||||||
html {
|
html {
|
||||||
font-family: 'Bai Jamjuree', sans-serif;
|
font-family: 'Bai Jamjuree', sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -84,7 +84,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
|||||||
session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
|
session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
|
||||||
|
|
||||||
if (mappingPublicRoutes.includes(pathname)) {
|
if (mappingPublicRoutes.includes(pathname)) {
|
||||||
if (token) return redirect('/hackathon-dashboard');
|
if (token) return redirect('/dashboard');
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -100,7 +100,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
|||||||
matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
|
matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
|
||||||
|
|
||||||
if (!hasPermission) {
|
if (!hasPermission) {
|
||||||
return '/hackathon-dashboard';
|
return '/dashboard';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export default defineConfig(() => ({
|
|||||||
root: __dirname,
|
root: __dirname,
|
||||||
cacheDir: '../../node_modules/.vite/apps/backoffice',
|
cacheDir: '../../node_modules/.vite/apps/backoffice',
|
||||||
server: {
|
server: {
|
||||||
port: 3003,
|
port: 3000,
|
||||||
host: 'localhost',
|
host: 'localhost',
|
||||||
},
|
},
|
||||||
preview: {
|
preview: {
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
@@ -1,11 +1,11 @@
|
|||||||
import { FC, ReactElement, useEffect, useState, useRef } from 'react';
|
import { FC, ReactElement, useEffect, useState, useRef } from 'react';
|
||||||
import { useNavigate } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import { useGitHubCallback } from '@imphnen-frontend-service/service';
|
import { useAuthStore, supabase } from '@imphnen-frontend-service/service';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
const CallbackPage: FC = (): ReactElement => {
|
const CallbackPage: FC = (): ReactElement => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
|
const { setSession } = useAuthStore();
|
||||||
const [isProcessing, setIsProcessing] = useState(true);
|
const [isProcessing, setIsProcessing] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const hasRunRef = useRef(false);
|
const hasRunRef = useRef(false);
|
||||||
@@ -13,68 +13,134 @@ const CallbackPage: FC = (): ReactElement => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleCallback = async () => {
|
const handleCallback = async () => {
|
||||||
if (hasRunRef.current) {
|
if (hasRunRef.current) {
|
||||||
|
// console.log('[Callback] Already processed, skipping...');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
hasRunRef.current = true;
|
hasRunRef.current = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Check URL hash for Supabase email confirmation callback
|
// console.log('[Callback] Processing OAuth callback...');
|
||||||
const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
|
// console.log('[Callback] Current URL:', globalThis.location.href);
|
||||||
const urlParams = new URLSearchParams(globalThis.location.search);
|
|
||||||
|
|
||||||
const type = hashParams.get('type') || urlParams.get('type');
|
// Supabase client is configured with detectSessionInUrl: true
|
||||||
const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
|
// This means Supabase automatically detects and processes OAuth tokens from the URL hash
|
||||||
|
// We just need to wait a moment for it to complete, then check for the session
|
||||||
|
|
||||||
// Debug: log what we received
|
// console.log('[Callback] Waiting for Supabase to process OAuth callback...');
|
||||||
console.log('[Callback] Params:', { type, accessToken: !!accessToken, hash: globalThis.location.hash, search: globalThis.location.search });
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
|
|
||||||
// Handle Supabase email callbacks (has access_token in hash or query)
|
// Get the session that Supabase automatically created from the URL hash
|
||||||
// This includes: signup confirmation, email confirmation, password recovery
|
const {
|
||||||
if (accessToken) {
|
data: { session: sessionData },
|
||||||
setIsProcessing(false);
|
error: sessionError,
|
||||||
|
} = await supabase.auth.getSession();
|
||||||
|
|
||||||
// Password recovery - type is 'recovery' or we have access_token from reset email
|
if (sessionError) {
|
||||||
if (type === 'recovery' || type === 'magiclink') {
|
// console.error('[Callback] Session error:', sessionError);
|
||||||
toast.success('Email verified! Please set your new password.');
|
throw new Error(sessionError.message || 'Failed to get session');
|
||||||
navigate('/auth/reset-password?access_token=' + accessToken);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Signup/Email confirmation
|
|
||||||
if (type === 'signup' || type === 'email_confirmation') {
|
|
||||||
toast.success('Email verified successfully! Please log in to continue.');
|
|
||||||
navigate('/auth/login');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we have access_token but unknown type, assume it's password recovery
|
|
||||||
// (Supabase sometimes sends without explicit type)
|
|
||||||
toast.success('Email verified! Please set your new password.');
|
|
||||||
navigate('/auth/reset-password?access_token=' + accessToken);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get the code from URL query params (GitHub OAuth)
|
if (!sessionData || !sessionData.user) {
|
||||||
const code = urlParams.get('code');
|
throw new Error(
|
||||||
|
'No session found after OAuth callback. Please try logging in again.'
|
||||||
if (!code) {
|
);
|
||||||
throw new Error('No authorization code received');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Exchange the code for tokens using backend API (GitHub OAuth)
|
// console.log('[Callback] Supabase session established:', {
|
||||||
const result = await exchangeGitHubCode({ code });
|
// userId: sessionData.user.id,
|
||||||
|
// email: sessionData.user.email,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Create/update user in the users table (for foreign key constraints)
|
||||||
|
// console.log('[Callback] Creating/updating user record...');
|
||||||
|
const { data: userData, error: upsertError } = await supabase
|
||||||
|
.from('users')
|
||||||
|
.upsert(
|
||||||
|
{
|
||||||
|
id: sessionData.user.id,
|
||||||
|
email: sessionData.user.email || '',
|
||||||
|
fullname:
|
||||||
|
sessionData.user.user_metadata?.full_name ||
|
||||||
|
sessionData.user.user_metadata?.name ||
|
||||||
|
sessionData.user.email?.split('@')[0] ||
|
||||||
|
'',
|
||||||
|
avatar: sessionData.user.user_metadata?.avatar_url || '',
|
||||||
|
is_active: true,
|
||||||
|
updated_at: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onConflict: 'id',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.select()
|
||||||
|
.single();
|
||||||
|
|
||||||
|
if (upsertError) {
|
||||||
|
// console.warn('[Callback] Failed to create user record:', upsertError);
|
||||||
|
// Don't throw - continue with login even if user record creation fails
|
||||||
|
} else {
|
||||||
|
// console.log('[Callback] User record created/updated successfully');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store user-friendly data in Zustand for UI purposes
|
||||||
|
// Supabase now manages the actual auth session
|
||||||
|
// Use data from database if available, otherwise use OAuth metadata
|
||||||
|
const userRecord = userData || {
|
||||||
|
id: sessionData.user.id,
|
||||||
|
email: sessionData.user.email || '',
|
||||||
|
fullname:
|
||||||
|
sessionData.user.user_metadata?.full_name ||
|
||||||
|
sessionData.user.user_metadata?.name ||
|
||||||
|
sessionData.user.email?.split('@')[0] ||
|
||||||
|
'',
|
||||||
|
avatar: sessionData.user.user_metadata?.avatar_url || '',
|
||||||
|
phone_number: '',
|
||||||
|
birthdate: '',
|
||||||
|
gender: '',
|
||||||
|
is_active: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
setSession({
|
||||||
|
token: {
|
||||||
|
access_token: sessionData.access_token,
|
||||||
|
refresh_token: sessionData.refresh_token || '',
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
id: userRecord.id,
|
||||||
|
email: userRecord.email,
|
||||||
|
fullname: userRecord.fullname,
|
||||||
|
phone_number: userRecord.phone_number || '',
|
||||||
|
avatar: userRecord.avatar || '',
|
||||||
|
birthdate: userRecord.birthdate || '',
|
||||||
|
gender: userRecord.gender || '',
|
||||||
|
is_active: userRecord.is_active,
|
||||||
|
location: userRecord.location,
|
||||||
|
bio: userRecord.bio,
|
||||||
|
skills: userRecord.skills,
|
||||||
|
role: {
|
||||||
|
id: '',
|
||||||
|
name: 'user',
|
||||||
|
permissions: [],
|
||||||
|
created_at: '',
|
||||||
|
updated_at: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// console.log('[Callback] Session stored successfully');
|
||||||
toast.success('Login successful!');
|
toast.success('Login successful!');
|
||||||
setIsProcessing(false);
|
setIsProcessing(false);
|
||||||
|
|
||||||
// Check if user has completed onboarding (has location)
|
// Check if user has completed onboarding (has location)
|
||||||
if (result.user.location) {
|
// Use globalThis.location.replace for hard redirect to prevent history issues
|
||||||
|
if (userRecord.location) {
|
||||||
|
// console.log('[Callback] User has completed onboarding, redirecting to dashboard...');
|
||||||
globalThis.location.replace('/dashboard');
|
globalThis.location.replace('/dashboard');
|
||||||
} else {
|
} else {
|
||||||
|
// console.log('[Callback] User needs onboarding, redirecting...');
|
||||||
globalThis.location.replace('/onboarding/user');
|
globalThis.location.replace('/onboarding/user');
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Callback] Error:', err);
|
// console.error('[Callback] Error:', err);
|
||||||
setError((err as Error).message);
|
setError((err as Error).message);
|
||||||
setIsProcessing(false);
|
setIsProcessing(false);
|
||||||
toast.error('An error occurred during login');
|
toast.error('An error occurred during login');
|
||||||
@@ -87,68 +153,21 @@ const CallbackPage: FC = (): ReactElement => {
|
|||||||
|
|
||||||
handleCallback();
|
handleCallback();
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []); // Run only once on mount
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
// Check if error is related to private email
|
|
||||||
const isPrivateEmailError =
|
|
||||||
error.toLowerCase().includes('failed to create user') ||
|
|
||||||
error.toLowerCase().includes('email') ||
|
|
||||||
error.toLowerCase().includes('user record');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
|
<div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200 dark:border-red-800">
|
<div className="bg-white w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200">
|
||||||
<div className="text-center mb-6">
|
<div className="text-center mb-6">
|
||||||
<div className="text-red-500 text-5xl mb-4">⚠️</div>
|
<div className="text-red-500 text-5xl mb-4">⚠️</div>
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||||
GitHub Login Failed
|
GitHub Login Failed
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-red-600 dark:text-red-400 mb-4 whitespace-pre-line">{error}</p>
|
<p className="text-red-600 mb-4 whitespace-pre-line">{error}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isPrivateEmailError && (
|
<p className="text-gray-600 text-sm mt-6 text-center">
|
||||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
|
|
||||||
<h3 className="font-semibold text-amber-800 dark:text-amber-300 mb-2">
|
|
||||||
Is your GitHub email set to private?
|
|
||||||
</h3>
|
|
||||||
<p className="text-amber-700 dark:text-amber-400 text-sm mb-3">
|
|
||||||
GitHub login requires a public email address. Please follow these steps:
|
|
||||||
</p>
|
|
||||||
<ol className="text-amber-700 dark:text-amber-400 text-sm list-decimal list-inside space-y-1 mb-3">
|
|
||||||
<li>
|
|
||||||
Go to{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/emails"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="underline hover:text-amber-900 dark:hover:text-amber-200"
|
|
||||||
>
|
|
||||||
GitHub Email Settings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>Uncheck "Keep my email addresses private"</li>
|
|
||||||
<li>
|
|
||||||
Or go to{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/profile"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="underline hover:text-amber-900 dark:hover:text-amber-200"
|
|
||||||
>
|
|
||||||
Profile Settings
|
|
||||||
</a>{' '}
|
|
||||||
and set a public email
|
|
||||||
</li>
|
|
||||||
<li>Try signing in with GitHub again</li>
|
|
||||||
</ol>
|
|
||||||
<p className="text-amber-600 dark:text-amber-500 text-xs">
|
|
||||||
Alternatively, you can sign up using email and password instead.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 text-sm mt-6 text-center">
|
|
||||||
Redirecting to login page in 3 seconds...
|
Redirecting to login page in 3 seconds...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -157,13 +176,13 @@ const CallbackPage: FC = (): ReactElement => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="flex justify-center items-center min-h-screen bg-gray-50">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
||||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
||||||
Completing login...
|
Completing login...
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600 dark:text-gray-400">Please wait</p>
|
<p className="text-gray-600">Please wait</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useForgotPassword } from '@imphnen-frontend-service/service';
|
import { supabase } from '@imphnen-frontend-service/service';
|
||||||
import { Link, useNavigate } from 'react-router';
|
import { Link, useNavigate } from 'react-router';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
@@ -7,9 +7,9 @@ import ThemeToggle from '../../../components/theme-toggle';
|
|||||||
|
|
||||||
export default function ForgotPasswordPage() {
|
export default function ForgotPasswordPage() {
|
||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [emailSent, setEmailSent] = useState(false);
|
const [emailSent, setEmailSent] = useState(false);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const forgotPasswordMutation = useForgotPassword();
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -20,33 +20,44 @@ export default function ForgotPasswordPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await forgotPasswordMutation.mutateAsync({ email });
|
setIsLoading(true);
|
||||||
|
|
||||||
|
const { error } = await supabase.auth.resetPasswordForEmail(email, {
|
||||||
|
redirectTo: `${window.location.origin}/auth/reset-password`,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
setEmailSent(true);
|
setEmailSent(true);
|
||||||
toast.success('Password reset email sent! Check your inbox.');
|
toast.success('Password reset email sent! Check your inbox.');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
// console.error('Failed to send reset email:', err);
|
||||||
toast.error((err as Error).message || 'Failed to send reset email');
|
toast.error((err as Error).message || 'Failed to send reset email');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (emailSent) {
|
if (emailSent) {
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
|
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 text-center">
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
|
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
||||||
<span className="text-3xl">✓</span>
|
<span className="text-3xl">✓</span>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
||||||
Check Your Email
|
Check Your Email
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
<p className="text-gray-600">
|
||||||
We've sent a password reset link to <strong>{email}</strong>
|
We've sent a password reset link to <strong>{email}</strong>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
<p className="text-sm text-gray-600">
|
||||||
Click the link in the email to reset your password. The link will
|
Click the link in the email to reset your password. The link will
|
||||||
expire in 1 hour.
|
expire in 1 hour.
|
||||||
</p>
|
</p>
|
||||||
@@ -59,7 +70,7 @@ export default function ForgotPasswordPage() {
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setEmailSent(false)}
|
onClick={() => setEmailSent(false)}
|
||||||
className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
|
className="w-full py-3 text-gray-600 hover:text-gray-900 transition-colors"
|
||||||
>
|
>
|
||||||
Send another email
|
Send another email
|
||||||
</button>
|
</button>
|
||||||
@@ -105,18 +116,18 @@ export default function ForgotPasswordPage() {
|
|||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
placeholder="your@email.com"
|
placeholder="your@email.com"
|
||||||
disabled={forgotPasswordMutation.isPending}
|
disabled={isLoading}
|
||||||
className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
className="bg-white dark:bg-gray-800 w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={forgotPasswordMutation.isPending}
|
disabled={isLoading}
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
||||||
>
|
>
|
||||||
{forgotPasswordMutation.isPending ? 'Sending...' : 'Send Reset Link'}
|
{isLoading ? 'Sending...' : 'Send Reset Link'}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState } from 'react';
|
||||||
import {
|
import {
|
||||||
useGitHubAuth,
|
useGitHubAuth,
|
||||||
useLogin,
|
useEmailAuth,
|
||||||
|
supabase,
|
||||||
|
useAuthStore,
|
||||||
} from '@imphnen-frontend-service/service';
|
} from '@imphnen-frontend-service/service';
|
||||||
import { GithubOutlined } from '@ant-design/icons';
|
import { GithubOutlined } from '@ant-design/icons';
|
||||||
import { useNavigate, Link } from 'react-router';
|
import { useNavigate, Link } from 'react-router';
|
||||||
@@ -10,34 +12,17 @@ import { Icon } from '@iconify/react';
|
|||||||
import { ThemeToggle } from '../../../components/theme-toggle';
|
import { ThemeToggle } from '../../../components/theme-toggle';
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
|
// console.log('[LoginPage] Rendering...');
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { setSession } = useAuthStore();
|
||||||
const { signInWithGitHub } = useGitHubAuth();
|
const { signInWithGitHub } = useGitHubAuth();
|
||||||
const loginMutation = useLogin();
|
const { signInWithEmail } = useEmailAuth();
|
||||||
const [isGithubLoading, setIsGithubLoading] = useState(false);
|
const [isGithubLoading, setIsGithubLoading] = useState(false);
|
||||||
|
const [isEmailLoading, setIsEmailLoading] = useState(false);
|
||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
|
|
||||||
// Check for password reset tokens in URL and redirect to reset-password page
|
|
||||||
useEffect(() => {
|
|
||||||
const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
|
|
||||||
const urlParams = new URLSearchParams(globalThis.location.search);
|
|
||||||
|
|
||||||
const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
|
|
||||||
const type = hashParams.get('type') || urlParams.get('type');
|
|
||||||
|
|
||||||
// If we have an access_token, this is likely a password reset redirect that landed on the wrong page
|
|
||||||
if (accessToken) {
|
|
||||||
console.log('[Login] Detected access_token, redirecting to reset-password page');
|
|
||||||
|
|
||||||
// Check if it's a password recovery
|
|
||||||
if (type === 'recovery' || type === 'magiclink' || !type) {
|
|
||||||
toast.info('Redirecting to password reset...');
|
|
||||||
navigate('/auth/reset-password?access_token=' + accessToken);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [navigate]);
|
|
||||||
|
|
||||||
const handleEmailLogin = async (e: React.FormEvent) => {
|
const handleEmailLogin = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -49,12 +34,52 @@ export default function LoginPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await loginMutation.mutateAsync({ email, password });
|
setIsEmailLoading(true);
|
||||||
|
// console.log('[Login] Attempting email login...');
|
||||||
|
|
||||||
|
const result = await signInWithEmail(email, password);
|
||||||
|
// console.log('[Login] Email login successful:', result);
|
||||||
|
|
||||||
|
// Get user data from database
|
||||||
|
const { data: userData } = await supabase
|
||||||
|
.from('users')
|
||||||
|
.select('*')
|
||||||
|
.eq('id', result.user.id)
|
||||||
|
.single();
|
||||||
|
|
||||||
|
// Store session in Zustand
|
||||||
|
setSession({
|
||||||
|
token: {
|
||||||
|
access_token: result.session.access_token,
|
||||||
|
refresh_token: result.session.refresh_token || '',
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
id: result.user.id,
|
||||||
|
email: result.user.email || '',
|
||||||
|
fullname:
|
||||||
|
userData?.fullname || result.user.user_metadata?.full_name || '',
|
||||||
|
phone_number: userData?.phone_number || '',
|
||||||
|
avatar: userData?.avatar || '',
|
||||||
|
birthdate: userData?.birthdate || '',
|
||||||
|
gender: userData?.gender || '',
|
||||||
|
is_active: userData?.is_active || true,
|
||||||
|
location: userData?.location,
|
||||||
|
bio: userData?.bio,
|
||||||
|
skills: userData?.skills,
|
||||||
|
role: {
|
||||||
|
id: '',
|
||||||
|
name: 'user',
|
||||||
|
permissions: [],
|
||||||
|
created_at: '',
|
||||||
|
updated_at: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
toast.success('Login successful!');
|
toast.success('Login successful!');
|
||||||
|
|
||||||
// Redirect based on onboarding status
|
// Redirect based on onboarding status
|
||||||
if (result.user.location) {
|
if (userData?.location) {
|
||||||
navigate('/dashboard');
|
navigate('/dashboard');
|
||||||
} else {
|
} else {
|
||||||
navigate('/onboarding/user');
|
navigate('/onboarding/user');
|
||||||
@@ -62,25 +87,29 @@ export default function LoginPage() {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Login] Email login failed:', err);
|
console.error('[Login] Email login failed:', err);
|
||||||
setError((err as Error).message || 'Login failed');
|
setError((err as Error).message || 'Login failed');
|
||||||
|
setIsEmailLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleGithubLogin = async () => {
|
const handleGithubLogin = async () => {
|
||||||
try {
|
try {
|
||||||
setIsGithubLoading(true);
|
setIsGithubLoading(true);
|
||||||
|
// console.log('[Login] Initiating GitHub OAuth...');
|
||||||
|
|
||||||
const result = await signInWithGitHub();
|
const result = await signInWithGitHub();
|
||||||
|
// console.log('[Login] OAuth result:', result);
|
||||||
|
|
||||||
// Check if we got a redirect URL
|
// Check if we got a redirect URL
|
||||||
if (result?.url) {
|
if (result?.url) {
|
||||||
|
// console.log('[Login] Redirecting to GitHub OAuth:', result.url);
|
||||||
|
// Manually redirect immediately
|
||||||
globalThis.location.href = result.url;
|
globalThis.location.href = result.url;
|
||||||
} else {
|
} else {
|
||||||
|
// console.error('[Login] No OAuth URL returned');
|
||||||
setIsGithubLoading(false);
|
setIsGithubLoading(false);
|
||||||
setError('Failed to get GitHub OAuth URL');
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (error) {
|
||||||
console.error('[Login] GitHub login failed:', err);
|
// console.error('[Login] GitHub login failed');
|
||||||
setError((err as Error).message || 'GitHub login failed');
|
|
||||||
setIsGithubLoading(false);
|
setIsGithubLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -128,7 +157,7 @@ export default function LoginPage() {
|
|||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
placeholder="your@email.com"
|
placeholder="your@email.com"
|
||||||
disabled={loginMutation.isPending}
|
disabled={isEmailLoading}
|
||||||
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
@@ -149,33 +178,24 @@ export default function LoginPage() {
|
|||||||
Forgot password?
|
Forgot password?
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative">
|
<input
|
||||||
<input
|
id="password"
|
||||||
id="password"
|
type="password"
|
||||||
type={showPassword ? 'text' : 'password'}
|
value={password}
|
||||||
value={password}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
placeholder="••••••••"
|
||||||
placeholder="••••••••"
|
disabled={isEmailLoading}
|
||||||
disabled={loginMutation.isPending}
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
||||||
className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
required
|
||||||
required
|
/>
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
<Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={loginMutation.isPending}
|
disabled={isEmailLoading}
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
||||||
>
|
>
|
||||||
{loginMutation.isPending ? 'Signing in...' : 'Sign in with Email'}
|
{isEmailLoading ? 'Signing in...' : 'Sign in with Email'}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@@ -199,28 +219,15 @@ export default function LoginPage() {
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
|
|
||||||
Make sure your GitHub email is{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/emails"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary-600 dark:text-primary-400 hover:underline"
|
|
||||||
>
|
|
||||||
set to public
|
|
||||||
</a>{' '}
|
|
||||||
for GitHub sign in to work.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-6 text-center">
|
<div className="mt-6 text-center">
|
||||||
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
Don't have an account?{' '}
|
Don't have an account?{' '}
|
||||||
<Link
|
<a
|
||||||
to="/auth/signup"
|
href="/auth/signup"
|
||||||
className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
|
className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
|
||||||
>
|
>
|
||||||
Sign up
|
Sign up
|
||||||
</Link>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,33 +1,26 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { useResetPassword, useAuthStore } from '@imphnen-frontend-service/service';
|
import { supabase } from '@imphnen-frontend-service/service';
|
||||||
import { useNavigate } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
|
|
||||||
export default function ResetPasswordPage() {
|
export default function ResetPasswordPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { clearSession } = useAuthStore();
|
|
||||||
const resetPasswordMutation = useResetPassword();
|
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
const [confirmPassword, setConfirmPassword] = useState('');
|
const [confirmPassword, setConfirmPassword] = useState('');
|
||||||
const [accessToken, setAccessToken] = useState<string | null>(null);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [isValidToken, setIsValidToken] = useState(false);
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
// Get the access_token from URL hash (Supabase sends it as hash fragment)
|
// // Check if we have a valid session (from the reset link)
|
||||||
// or from query params (when redirected from callback page)
|
// supabase.auth.getSession().then(({ data: { session } }) => {
|
||||||
const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
|
// if (session) {
|
||||||
const queryParams = new URLSearchParams(globalThis.location.search);
|
// setIsValidToken(true);
|
||||||
const token = hashParams.get('access_token') || queryParams.get('access_token');
|
// } else {
|
||||||
|
// toast.error('Invalid or expired reset link');
|
||||||
if (token) {
|
// setTimeout(() => navigate('/auth/forgot-password'), 2000);
|
||||||
setAccessToken(token);
|
// }
|
||||||
} else {
|
// });
|
||||||
toast.error('Invalid or expired reset link');
|
// }, [navigate]);
|
||||||
setTimeout(() => navigate('/auth/forgot-password'), 2000);
|
|
||||||
}
|
|
||||||
}, [navigate]);
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -42,39 +35,42 @@ export default function ResetPasswordPage() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!accessToken) {
|
|
||||||
toast.error('Invalid reset token');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await resetPasswordMutation.mutateAsync({
|
setIsLoading(true);
|
||||||
access_token: accessToken,
|
|
||||||
new_password: password,
|
const { error } = await supabase.auth.updateUser({
|
||||||
|
password: password,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
toast.success('Password updated successfully!');
|
toast.success('Password updated successfully!');
|
||||||
|
|
||||||
// Clear session and redirect to login
|
// Sign out and redirect to login
|
||||||
clearSession();
|
await supabase.auth.signOut();
|
||||||
navigate('/auth/login');
|
navigate('/auth/login');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
// console.error('Failed to reset password:', err);
|
||||||
toast.error((err as Error).message || 'Failed to reset password');
|
toast.error((err as Error).message || 'Failed to reset password');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!accessToken) {
|
// if (!isValidToken) {
|
||||||
return (
|
// return (
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
// <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||||
<div className="text-center">
|
// <div className="text-center">
|
||||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
// <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
// <p className="text-gray-600 dark:text-gray-400">
|
||||||
Verifying reset link...
|
// Verifying reset link...
|
||||||
</p>
|
// </p>
|
||||||
</div>
|
// </div>
|
||||||
</div>
|
// </div>
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
||||||
@@ -96,26 +92,17 @@ export default function ResetPasswordPage() {
|
|||||||
>
|
>
|
||||||
New Password
|
New Password
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<input
|
||||||
<input
|
id="password"
|
||||||
id="password"
|
type="password"
|
||||||
type={showPassword ? 'text' : 'password'}
|
value={password}
|
||||||
value={password}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
placeholder="••••••••"
|
||||||
placeholder="••••••••"
|
disabled={isLoading}
|
||||||
disabled={resetPasswordMutation.isPending}
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||||
className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
required
|
||||||
required
|
minLength={6}
|
||||||
minLength={6}
|
/>
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
<Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@@ -125,34 +112,25 @@ export default function ResetPasswordPage() {
|
|||||||
>
|
>
|
||||||
Confirm New Password
|
Confirm New Password
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<input
|
||||||
<input
|
id="confirmPassword"
|
||||||
id="confirmPassword"
|
type="password"
|
||||||
type={showConfirmPassword ? 'text' : 'password'}
|
value={confirmPassword}
|
||||||
value={confirmPassword}
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
placeholder="••••••••"
|
||||||
placeholder="••••••••"
|
disabled={isLoading}
|
||||||
disabled={resetPasswordMutation.isPending}
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||||
className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
required
|
||||||
required
|
minLength={6}
|
||||||
minLength={6}
|
/>
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
<Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={resetPasswordMutation.isPending}
|
disabled={isLoading}
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
||||||
>
|
>
|
||||||
{resetPasswordMutation.isPending ? 'Updating...' : 'Update Password'}
|
{isLoading ? 'Updating...' : 'Update Password'}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,200 +1,142 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useGitHubAuth, useSignup } from '@imphnen-frontend-service/service';
|
import {
|
||||||
|
useGitHubAuth,
|
||||||
|
useEmailAuth,
|
||||||
|
supabase,
|
||||||
|
useAuthStore,
|
||||||
|
} from '@imphnen-frontend-service/service';
|
||||||
import { GithubOutlined } from '@ant-design/icons';
|
import { GithubOutlined } from '@ant-design/icons';
|
||||||
import { useNavigate, Link } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import { ThemeToggle } from '../../../components/theme-toggle';
|
import { ThemeToggle } from '../../../components/theme-toggle';
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import { z } from 'zod';
|
|
||||||
|
|
||||||
const signupSchema = z
|
|
||||||
.object({
|
|
||||||
fullname: z
|
|
||||||
.string()
|
|
||||||
.min(1, 'Full name is required')
|
|
||||||
.min(2, 'Full name must be at least 2 characters'),
|
|
||||||
email: z
|
|
||||||
.string()
|
|
||||||
.min(1, 'Email is required')
|
|
||||||
.email('Please enter a valid email address'),
|
|
||||||
password: z
|
|
||||||
.string()
|
|
||||||
.min(1, 'Password is required')
|
|
||||||
.min(6, 'Password must be at least 6 characters'),
|
|
||||||
confirmPassword: z.string().min(1, 'Please confirm your password'),
|
|
||||||
})
|
|
||||||
.refine((data) => data.password === data.confirmPassword, {
|
|
||||||
message: 'Passwords do not match',
|
|
||||||
path: ['confirmPassword'],
|
|
||||||
});
|
|
||||||
|
|
||||||
type SignupFormData = z.infer<typeof signupSchema>;
|
|
||||||
|
|
||||||
// Registration deadline: 2025-11-30 23:29:00 WIB (UTC+7)
|
|
||||||
const REGISTRATION_DEADLINE = new Date('2025-11-30T16:29:00Z');
|
|
||||||
|
|
||||||
export default function SignupPage() {
|
export default function SignupPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { setSession } = useAuthStore();
|
||||||
// Check if registration is closed
|
|
||||||
const isRegistrationClosed = new Date() >= REGISTRATION_DEADLINE;
|
|
||||||
const { signInWithGitHub } = useGitHubAuth();
|
const { signInWithGitHub } = useGitHubAuth();
|
||||||
const signupMutation = useSignup();
|
const { signUpWithEmail } = useEmailAuth();
|
||||||
const [isGithubLoading, setIsGithubLoading] = useState(false);
|
const [isGithubLoading, setIsGithubLoading] = useState(false);
|
||||||
|
const [isEmailLoading, setIsEmailLoading] = useState(false);
|
||||||
|
const [fullname, setFullname] = useState('');
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState('');
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [registrationSuccess, setRegistrationSuccess] = useState(false);
|
|
||||||
const [registeredEmail, setRegisteredEmail] = useState('');
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
||||||
|
|
||||||
const {
|
const handleEmailSignup = async (e: React.FormEvent) => {
|
||||||
register,
|
e.preventDefault();
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isValid },
|
|
||||||
} = useForm<SignupFormData>({
|
|
||||||
resolver: zodResolver(signupSchema),
|
|
||||||
mode: 'onChange',
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = async (data: SignupFormData) => {
|
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
|
if (!fullname || !email || !password || !confirmPassword) {
|
||||||
|
setError('Please fill in all fields');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
setError('Passwords do not match');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length < 6) {
|
||||||
|
setError('Password must be at least 6 characters long');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await signupMutation.mutateAsync({
|
setIsEmailLoading(true);
|
||||||
email: data.email,
|
// console.log('[Signup] Attempting email signup...');
|
||||||
password: data.password,
|
|
||||||
fullname: data.fullname,
|
const result = await signUpWithEmail(email, password, fullname);
|
||||||
});
|
// console.log('[Signup] Email signup successful:', result);
|
||||||
toast.success(result.message);
|
|
||||||
setRegisteredEmail(data.email);
|
if (!result.user) {
|
||||||
setRegistrationSuccess(true);
|
throw new Error('Signup failed - no user returned');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create user record in database
|
||||||
|
const { error: upsertError } = await supabase.from('users').upsert(
|
||||||
|
{
|
||||||
|
id: result.user.id,
|
||||||
|
email: result.user.email || '',
|
||||||
|
fullname: fullname,
|
||||||
|
is_active: true,
|
||||||
|
updated_at: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onConflict: 'id',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (upsertError) {
|
||||||
|
console.warn('[Signup] Failed to create user record');
|
||||||
|
}
|
||||||
|
|
||||||
|
// If session is available (email confirmation disabled), store it
|
||||||
|
if (result.session) {
|
||||||
|
setSession({
|
||||||
|
token: {
|
||||||
|
access_token: result.session.access_token,
|
||||||
|
refresh_token: result.session.refresh_token || '',
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
id: result.user.id,
|
||||||
|
email: result.user.email || '',
|
||||||
|
fullname: fullname,
|
||||||
|
phone_number: '',
|
||||||
|
avatar: '',
|
||||||
|
birthdate: '',
|
||||||
|
gender: '',
|
||||||
|
is_active: true,
|
||||||
|
role: {
|
||||||
|
id: '',
|
||||||
|
name: 'user',
|
||||||
|
permissions: [],
|
||||||
|
created_at: '',
|
||||||
|
updated_at: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
toast.success('Account created successfully!');
|
||||||
|
navigate('/onboarding/user');
|
||||||
|
} else {
|
||||||
|
// Email confirmation is enabled
|
||||||
|
toast.success(
|
||||||
|
'Account created! Please check your email to verify your account.'
|
||||||
|
);
|
||||||
|
setTimeout(() => {
|
||||||
|
navigate('/auth/login');
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Signup] Email signup failed:', err);
|
// console.error('[Signup] Email signup failed:', err);
|
||||||
setError((err as Error).message || 'Signup failed');
|
setError((err as Error).message || 'Signup failed');
|
||||||
|
setIsEmailLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Show closed registration screen
|
|
||||||
if (isRegistrationClosed) {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<Icon
|
|
||||||
icon="mdi:clock-alert"
|
|
||||||
className="text-3xl text-red-600 dark:text-red-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
||||||
Registration Closed
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
The registration period for this hackathon has ended.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
Thank you for your interest! Registration closed on November 30, 2025 at 23:29 WIB.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<Link to="/auth/login">
|
|
||||||
<button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
|
|
||||||
Go to Login
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => navigate('/')}
|
|
||||||
className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Back to Homepage
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show success screen after registration
|
|
||||||
if (registrationSuccess) {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<Icon
|
|
||||||
icon="mdi:email-check"
|
|
||||||
className="text-3xl text-green-600 dark:text-green-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
||||||
Check Your Email
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
We've sent an activation link to{' '}
|
|
||||||
<strong>{registeredEmail}</strong>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
Click the link in the email to activate your account. The link
|
|
||||||
will expire in 24 hours.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
|
|
||||||
<p className="text-sm text-amber-700 dark:text-amber-300">
|
|
||||||
Don't forget to check your spam folder if you don't see the
|
|
||||||
email.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Link to="/auth/login">
|
|
||||||
<button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
|
|
||||||
Go to Login
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => setRegistrationSuccess(false)}
|
|
||||||
className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Register with different email
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleGithubLogin = async () => {
|
const handleGithubLogin = async () => {
|
||||||
try {
|
try {
|
||||||
setIsGithubLoading(true);
|
setIsGithubLoading(true);
|
||||||
|
// console.log('[Signup] Initiating GitHub OAuth...');
|
||||||
|
|
||||||
const result = await signInWithGitHub();
|
const result = await signInWithGitHub();
|
||||||
|
// console.log('[Signup] OAuth result:', result);
|
||||||
|
|
||||||
if (result?.url) {
|
if (result?.url) {
|
||||||
|
// console.log('[Signup] Redirecting to GitHub OAuth:', result.url);
|
||||||
globalThis.location.href = result.url;
|
globalThis.location.href = result.url;
|
||||||
} else {
|
} else {
|
||||||
|
// console.error('[Signup] No OAuth URL returned');
|
||||||
setIsGithubLoading(false);
|
setIsGithubLoading(false);
|
||||||
setError('Failed to get GitHub OAuth URL');
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (error) {
|
||||||
console.error('[Signup] GitHub login failed:', err);
|
// console.error('[Signup] GitHub login failed:', error);
|
||||||
setError((err as Error).message || 'GitHub login failed');
|
|
||||||
setIsGithubLoading(false);
|
setIsGithubLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const inputBaseClass =
|
|
||||||
'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed';
|
|
||||||
const inputErrorClass = 'border-red-500 dark:border-red-500';
|
|
||||||
const inputNormalClass = 'border-gray-300 dark:border-gray-600';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
|
||||||
@@ -224,7 +166,7 @@ export default function SignupPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
<form onSubmit={handleEmailSignup} className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label
|
<label
|
||||||
htmlFor="fullname"
|
htmlFor="fullname"
|
||||||
@@ -235,18 +177,13 @@ export default function SignupPage() {
|
|||||||
<input
|
<input
|
||||||
id="fullname"
|
id="fullname"
|
||||||
type="text"
|
type="text"
|
||||||
{...register('fullname')}
|
value={fullname}
|
||||||
|
onChange={(e) => setFullname(e.target.value)}
|
||||||
placeholder="John Doe"
|
placeholder="John Doe"
|
||||||
disabled={signupMutation.isPending}
|
disabled={isEmailLoading}
|
||||||
className={`${inputBaseClass} ${
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
||||||
errors.fullname ? inputErrorClass : inputNormalClass
|
required
|
||||||
}`}
|
|
||||||
/>
|
/>
|
||||||
{errors.fullname && (
|
|
||||||
<p className="mt-1 text-sm text-red-500 dark:text-red-400">
|
|
||||||
{errors.fullname.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@@ -259,18 +196,13 @@ export default function SignupPage() {
|
|||||||
<input
|
<input
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
{...register('email')}
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
placeholder="your@email.com"
|
placeholder="your@email.com"
|
||||||
disabled={signupMutation.isPending}
|
disabled={isEmailLoading}
|
||||||
className={`${inputBaseClass} ${
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
||||||
errors.email ? inputErrorClass : inputNormalClass
|
required
|
||||||
}`}
|
|
||||||
/>
|
/>
|
||||||
{errors.email && (
|
|
||||||
<p className="mt-1 text-sm text-red-500 dark:text-red-400">
|
|
||||||
{errors.email.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@@ -280,30 +212,16 @@ export default function SignupPage() {
|
|||||||
>
|
>
|
||||||
Password
|
Password
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<input
|
||||||
<input
|
id="password"
|
||||||
id="password"
|
type="password"
|
||||||
type={showPassword ? 'text' : 'password'}
|
value={password}
|
||||||
{...register('password')}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
placeholder="••••••••"
|
placeholder="••••••••"
|
||||||
disabled={signupMutation.isPending}
|
disabled={isEmailLoading}
|
||||||
className={`${inputBaseClass} pr-12 ${
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
||||||
errors.password ? inputErrorClass : inputNormalClass
|
required
|
||||||
}`}
|
/>
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
<Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{errors.password && (
|
|
||||||
<p className="mt-1 text-sm text-red-500 dark:text-red-400">
|
|
||||||
{errors.password.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@@ -313,40 +231,24 @@ export default function SignupPage() {
|
|||||||
>
|
>
|
||||||
Confirm Password
|
Confirm Password
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<input
|
||||||
<input
|
id="confirmPassword"
|
||||||
id="confirmPassword"
|
type="password"
|
||||||
type={showConfirmPassword ? 'text' : 'password'}
|
value={confirmPassword}
|
||||||
{...register('confirmPassword')}
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
placeholder="••••••••"
|
placeholder="••••••••"
|
||||||
disabled={signupMutation.isPending}
|
disabled={isEmailLoading}
|
||||||
className={`${inputBaseClass} pr-12 ${
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
||||||
errors.confirmPassword ? inputErrorClass : inputNormalClass
|
required
|
||||||
}`}
|
/>
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
|
||||||
>
|
|
||||||
<Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{errors.confirmPassword && (
|
|
||||||
<p className="mt-1 text-sm text-red-500 dark:text-red-400">
|
|
||||||
{errors.confirmPassword.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isValid || signupMutation.isPending}
|
disabled={isEmailLoading}
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
||||||
>
|
>
|
||||||
{signupMutation.isPending
|
{isEmailLoading ? 'Creating account...' : 'Create Account'}
|
||||||
? 'Creating account...'
|
|
||||||
: 'Create Account'}
|
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@@ -370,28 +272,15 @@ export default function SignupPage() {
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
|
|
||||||
Make sure your GitHub email is{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/emails"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary-600 dark:text-primary-400 hover:underline"
|
|
||||||
>
|
|
||||||
set to public
|
|
||||||
</a>{' '}
|
|
||||||
for GitHub sign up to work.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-6 text-center">
|
<div className="mt-6 text-center">
|
||||||
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
Already have an account?{' '}
|
Already have an account?{' '}
|
||||||
<Link
|
<a
|
||||||
to="/auth/login"
|
href="/auth/login"
|
||||||
className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
|
className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
|
||||||
>
|
>
|
||||||
Sign in
|
Sign in
|
||||||
</Link>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,517 +0,0 @@
|
|||||||
import { FC, ReactElement, useState, useEffect, useRef } from 'react';
|
|
||||||
import { useParams, useNavigate } from 'react-router';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import { decodeCertificateId } from '../../../utils/certificate';
|
|
||||||
import {
|
|
||||||
useTeamById,
|
|
||||||
useTeamSubmission,
|
|
||||||
useAuthStore,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import QRCode from 'qrcode';
|
|
||||||
import html2canvas from 'html2canvas';
|
|
||||||
|
|
||||||
interface DecodedCert {
|
|
||||||
teamId: string;
|
|
||||||
submissionId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CertificatePage: FC = (): ReactElement => {
|
|
||||||
const { certId } = useParams<{ certId: string }>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { session } = useAuthStore();
|
|
||||||
const [decodedInfo, setDecodedInfo] = useState<DecodedCert | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const teamNameRef = useRef<HTMLHeadingElement>(null);
|
|
||||||
const userNameRef = useRef<HTMLHeadingElement>(null);
|
|
||||||
const [teamNameFontSize, setTeamNameFontSize] = useState('2.25rem');
|
|
||||||
const [userNameFontSize, setUserNameFontSize] = useState('2.25rem');
|
|
||||||
const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
|
|
||||||
const certificateRef = useRef<HTMLDivElement>(null);
|
|
||||||
const [isGenerating, setIsGenerating] = useState(false);
|
|
||||||
const [certificateImage, setCertificateImage] = useState<string>('');
|
|
||||||
const [showTemplate, setShowTemplate] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (certId) {
|
|
||||||
decodeCertificateId(certId)
|
|
||||||
.then(setDecodedInfo)
|
|
||||||
.catch(() => {
|
|
||||||
setError('Invalid certificate ID');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [certId]);
|
|
||||||
|
|
||||||
// Generate QR Code
|
|
||||||
useEffect(() => {
|
|
||||||
if (certId) {
|
|
||||||
const certificateUrl = `${window.location.origin}/certificate/${certId}`;
|
|
||||||
QRCode.toDataURL(certificateUrl, {
|
|
||||||
width: 200,
|
|
||||||
margin: 1,
|
|
||||||
color: {
|
|
||||||
dark: '#000000',
|
|
||||||
light: '#ffffff',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then(setQrCodeUrl)
|
|
||||||
.catch((err) => console.error('QR Code generation failed:', err));
|
|
||||||
}
|
|
||||||
}, [certId]);
|
|
||||||
|
|
||||||
const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
|
|
||||||
decodedInfo?.teamId || '',
|
|
||||||
!!decodedInfo?.teamId
|
|
||||||
);
|
|
||||||
const { data: submissionData, isLoading: isLoadingSubmission } =
|
|
||||||
useTeamSubmission(decodedInfo?.teamId || '', !!decodedInfo?.teamId);
|
|
||||||
|
|
||||||
const team = teamData?.data;
|
|
||||||
const submission = submissionData?.data;
|
|
||||||
|
|
||||||
const isLoading =
|
|
||||||
(!decodedInfo && !error) || isLoadingTeam || isLoadingSubmission;
|
|
||||||
|
|
||||||
// Dynamic font sizing: shrink by 2px if height exceeds 80px
|
|
||||||
useEffect(() => {
|
|
||||||
const adjustFontSize = (
|
|
||||||
element: HTMLElement | null,
|
|
||||||
maxHeight: number,
|
|
||||||
startSize: number,
|
|
||||||
setter: (size: string) => void
|
|
||||||
) => {
|
|
||||||
if (!element) return;
|
|
||||||
|
|
||||||
let currentSize = startSize;
|
|
||||||
element.style.fontSize = `${currentSize}px`;
|
|
||||||
|
|
||||||
while (element.offsetHeight > maxHeight && currentSize > 1) {
|
|
||||||
currentSize -= 2;
|
|
||||||
element.style.fontSize = `${currentSize}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
setter(`${currentSize}px`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
adjustFontSize(teamNameRef.current, 80, 20, setTeamNameFontSize);
|
|
||||||
adjustFontSize(userNameRef.current, 80, 36, setUserNameFontSize);
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [team?.name, session?.user?.fullname]);
|
|
||||||
|
|
||||||
// Generate certificate canvas screenshot
|
|
||||||
useEffect(() => {
|
|
||||||
const generateCertificate = async () => {
|
|
||||||
if (!certificateRef.current || !team || !submission || !qrCodeUrl) return;
|
|
||||||
|
|
||||||
setIsGenerating(true);
|
|
||||||
try {
|
|
||||||
// Wait a bit for fonts and images to load
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
const canvas = await html2canvas(certificateRef.current, {
|
|
||||||
scale: 2,
|
|
||||||
useCORS: true,
|
|
||||||
backgroundColor: '#ffffff',
|
|
||||||
logging: false,
|
|
||||||
width: 1000,
|
|
||||||
height: (1000 * 2480) / 3508,
|
|
||||||
});
|
|
||||||
|
|
||||||
const imageUrl = canvas.toDataURL('image/png');
|
|
||||||
setCertificateImage(imageUrl);
|
|
||||||
setShowTemplate(false);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to generate certificate:', error);
|
|
||||||
} finally {
|
|
||||||
setIsGenerating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
generateCertificate();
|
|
||||||
}, [team, submission, qrCodeUrl, session?.user?.fullname]);
|
|
||||||
|
|
||||||
// Download certificate
|
|
||||||
const handleDownloadCertificate = () => {
|
|
||||||
if (!certificateImage) return;
|
|
||||||
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = certificateImage;
|
|
||||||
link.download = `certificate-${team?.name || 'hackathon'}.png`;
|
|
||||||
link.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Print certificate
|
|
||||||
const handlePrintCertificate = () => {
|
|
||||||
if (!certificateImage) return;
|
|
||||||
|
|
||||||
const printWindow = window.open('', '_blank');
|
|
||||||
if (printWindow) {
|
|
||||||
printWindow.document.write(`
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Certificate - ${team?.name}</title>
|
|
||||||
<style>
|
|
||||||
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
|
|
||||||
img { max-width: 100%; height: auto; }
|
|
||||||
@media print {
|
|
||||||
@page { size: A4 landscape; margin: 0; }
|
|
||||||
body { margin: 0; }
|
|
||||||
img { width: 100%; height: auto; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<img src="${certificateImage}" />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
`);
|
|
||||||
printWindow.document.close();
|
|
||||||
printWindow.onload = () => {
|
|
||||||
printWindow.print();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (error || !certId) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
||||||
<div className="text-6xl mb-4">❌</div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
||||||
Invalid Certificate
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
||||||
{error || 'The certificate ID is invalid or malformed.'}
|
|
||||||
</p>
|
|
||||||
<Button onClick={() => navigate('/')}>Back to Home</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
|
||||||
<div className="text-gray-600 dark:text-gray-400">
|
|
||||||
Loading certificate...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!submission || submission.id !== decodedInfo?.submissionId) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
||||||
<div className="text-6xl mb-4">📄</div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
||||||
Certificate Not Found
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
||||||
The submission associated with this certificate could not be found.
|
|
||||||
</p>
|
|
||||||
<Button onClick={() => navigate('/')}>Back to Home</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
||||||
{/* Print Styles */}
|
|
||||||
<style>{`
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: A4 landscape;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
body * {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
#certificate-wrapper {
|
|
||||||
visibility: visible;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
#certificate, #certificate * {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
#certificate {
|
|
||||||
position: relative;
|
|
||||||
max-width: 100%;
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
.no-print {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile responsive - zoom out to fit */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
#certificate-container {
|
|
||||||
transform-origin: top center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
|
|
||||||
{/* Header */}
|
|
||||||
<div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700 no-print">
|
|
||||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
||||||
Certificate
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
{team?.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() =>
|
|
||||||
navigate(`/teams/${decodedInfo?.teamId}/submission`)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Back to Submission
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Certificate Content */}
|
|
||||||
<div
|
|
||||||
className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
|
|
||||||
id="certificate-wrapper"
|
|
||||||
>
|
|
||||||
{/* Hidden Template for Canvas Generation */}
|
|
||||||
<div
|
|
||||||
className={showTemplate ? 'block' : 'hidden'}
|
|
||||||
style={{ position: 'absolute', left: '-9999px' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={certificateRef}
|
|
||||||
id="certificate-template"
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
backgroundImage: 'url(/images/blank_cert.png)',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
width: '1000px',
|
|
||||||
height: `${(1000 * 2480) / 3508}px`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* User Name (from session) */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '40%',
|
|
||||||
left: '50%',
|
|
||||||
transform: 'translateX(-50%)',
|
|
||||||
width: '80%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
ref={userNameRef}
|
|
||||||
style={{
|
|
||||||
fontWeight: 'bold',
|
|
||||||
color: '#111827',
|
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: userNameFontSize,
|
|
||||||
lineHeight: '1.2',
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
textShadow: '0 1px 2px rgba(0,0,0,0.1)',
|
|
||||||
margin: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{session?.user?.fullname || 'N/A'}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Team Name */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '46%',
|
|
||||||
left: '50%',
|
|
||||||
transform: 'translateX(-50%)',
|
|
||||||
width: '70%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
ref={teamNameRef}
|
|
||||||
style={{
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#1f2937',
|
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: teamNameFontSize,
|
|
||||||
lineHeight: '1.2',
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
margin: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{team?.name}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Participation Text */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '60%',
|
|
||||||
left: '50%',
|
|
||||||
transform: 'translateX(-50%)',
|
|
||||||
width: '70%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#374151',
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '500',
|
|
||||||
margin: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span style={{ fontWeight: 'bold' }}>
|
|
||||||
Peserta Hackathon IMPHNEN x KOLOSAL AI
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* QR Code */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: '8%',
|
|
||||||
left: '8%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{qrCodeUrl && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#ffffff',
|
|
||||||
padding: '8px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={qrCodeUrl}
|
|
||||||
alt="Certificate QR Code"
|
|
||||||
style={{ width: '96px', height: '96px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Date */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: '8%',
|
|
||||||
right: '8%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
color: '#374151',
|
|
||||||
margin: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{submission.submitted_at
|
|
||||||
? new Date(submission.submitted_at).toLocaleDateString(
|
|
||||||
'id-ID',
|
|
||||||
{
|
|
||||||
day: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
year: 'numeric',
|
|
||||||
}
|
|
||||||
)
|
|
||||||
: 'N/A'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Display Certificate Image */}
|
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl dark:shadow-gray-950/50 overflow-hidden p-2">
|
|
||||||
{isGenerating && (
|
|
||||||
<div className="flex items-center justify-center p-12">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
|
||||||
<div className="text-gray-600 dark:text-gray-400">
|
|
||||||
Generating certificate...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{certificateImage && !isGenerating && (
|
|
||||||
<img
|
|
||||||
src={certificateImage}
|
|
||||||
alt="Certificate"
|
|
||||||
className="w-full h-auto"
|
|
||||||
style={{ maxWidth: '100%', height: 'auto' }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="bg-gray-50 dark:bg-gray-800 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={handleDownloadCertificate}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
disabled={isGenerating}
|
|
||||||
>
|
|
||||||
{isGenerating ? '⏳ Generating...' : '📥 Download'}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={handlePrintCertificate}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
disabled={isGenerating}
|
|
||||||
>
|
|
||||||
{isGenerating ? '⏳ Generating...' : '🖨️ Print'}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() =>
|
|
||||||
navigate(`/teams/${decodedInfo?.teamId}/submission`)
|
|
||||||
}
|
|
||||||
variant="secondary"
|
|
||||||
className="col-span-2 flex items-center gap-2 xl:col-span-1"
|
|
||||||
>
|
|
||||||
View Submission
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Info Box */}
|
|
||||||
<div className="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 no-print">
|
|
||||||
<h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">
|
|
||||||
Certificate Information
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
|
||||||
This certificate is a digital record of your hackathon participation
|
|
||||||
and project submission. You can print or save this page as a PDF for
|
|
||||||
your records.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CertificatePage;
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { FC, ReactElement, useEffect, useState } from 'react';
|
import { FC, ReactElement } from 'react';
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
import {
|
import {
|
||||||
useMyTeams,
|
useMyTeams,
|
||||||
@@ -9,95 +9,16 @@ import {
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import ProfilePage from '../profile/page';
|
|
||||||
|
|
||||||
// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
|
|
||||||
const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
|
|
||||||
|
|
||||||
// Submission deadline: 2025-12-07 23:59:00 WIB (UTC+7)
|
|
||||||
const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
|
|
||||||
|
|
||||||
type Invitation = {
|
|
||||||
id: string;
|
|
||||||
team: {
|
|
||||||
id?: string;
|
|
||||||
name?: string;
|
|
||||||
logo?: string;
|
|
||||||
banner?: string;
|
|
||||||
description?: string;
|
|
||||||
city?: string;
|
|
||||||
visibility?: string;
|
|
||||||
leader_id?: string;
|
|
||||||
};
|
|
||||||
inviter: {
|
|
||||||
id?: string;
|
|
||||||
fullname?: string;
|
|
||||||
email?: string;
|
|
||||||
avatar?: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const DashboardPage: FC = (): ReactElement => {
|
const DashboardPage: FC = (): ReactElement => {
|
||||||
const { session } = useAuthStore();
|
const { session } = useAuthStore();
|
||||||
const [showProfileModal, setShowProfileModal] = useState(false);
|
|
||||||
const [timeLeft, setTimeLeft] = useState<{
|
|
||||||
days: number;
|
|
||||||
hours: number;
|
|
||||||
minutes: number;
|
|
||||||
seconds: number;
|
|
||||||
} | null>(null);
|
|
||||||
|
|
||||||
// Check if team features are closed
|
|
||||||
const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
|
|
||||||
|
|
||||||
// Check if submission deadline passed
|
|
||||||
const isSubmissionDeadlinePassed = new Date() >= SUBMISSION_DEADLINE;
|
|
||||||
|
|
||||||
// Countdown timer
|
|
||||||
useEffect(() => {
|
|
||||||
if (isSubmissionDeadlinePassed) return;
|
|
||||||
|
|
||||||
const calculateTimeLeft = () => {
|
|
||||||
const now = new Date();
|
|
||||||
const difference = SUBMISSION_DEADLINE.getTime() - now.getTime();
|
|
||||||
|
|
||||||
if (difference <= 0) {
|
|
||||||
setTimeLeft(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
|
||||||
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
|
|
||||||
const minutes = Math.floor((difference / 1000 / 60) % 60);
|
|
||||||
const seconds = Math.floor((difference / 1000) % 60);
|
|
||||||
|
|
||||||
setTimeLeft({ days, hours, minutes, seconds });
|
|
||||||
};
|
|
||||||
|
|
||||||
calculateTimeLeft();
|
|
||||||
const timer = setInterval(calculateTimeLeft, 1000);
|
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, [isSubmissionDeadlinePassed]);
|
|
||||||
|
|
||||||
// Lock background scroll when profile modal is open
|
|
||||||
useEffect(() => {
|
|
||||||
if (showProfileModal) {
|
|
||||||
const originalOverflow = document.body.style.overflow;
|
|
||||||
document.body.style.overflow = 'hidden';
|
|
||||||
return () => {
|
|
||||||
document.body.style.overflow = originalOverflow || '';
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [showProfileModal]);
|
|
||||||
const { data: teamsData } = useMyTeams();
|
const { data: teamsData } = useMyTeams();
|
||||||
const { data: invitationsData } = useMyInvitations();
|
const { data: invitationsData } = useMyInvitations();
|
||||||
const { mutateAsync: respondToInvitation } = useRespondToInvitation();
|
const { mutateAsync: respondToInvitation } = useRespondToInvitation();
|
||||||
|
|
||||||
const user = session?.user;
|
const user = session?.user;
|
||||||
const myTeams = teamsData?.data || [];
|
const myTeams = teamsData?.data || [];
|
||||||
const invitations: Invitation[] = (invitationsData?.data ||
|
const invitations = invitationsData?.data || [];
|
||||||
[]) as Invitation[];
|
|
||||||
|
|
||||||
const handleAcceptInvitation = async (invitationId: string) => {
|
const handleAcceptInvitation = async (invitationId: string) => {
|
||||||
try {
|
try {
|
||||||
@@ -120,306 +41,225 @@ const DashboardPage: FC = (): ReactElement => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto overflow-hidden">
|
||||||
<div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto">
|
<div className="mb-8">
|
||||||
<div className="mb-8">
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
|
||||||
Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
|
</h1>
|
||||||
</h1>
|
{user?.location && (
|
||||||
{user?.location && (
|
<p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
|
||||||
<p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
|
<Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
|
||||||
<Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
|
<span>{user.location}</span>
|
||||||
<span>{user.location}</span>
|
</p>
|
||||||
</p>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Countdown Timer */}
|
{invitations.length > 0 && (
|
||||||
{timeLeft && !isSubmissionDeadlinePassed && (
|
<div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
|
||||||
<div className="mb-8 bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6">
|
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
<div className="flex items-start space-x-3">
|
Team Invitations ({invitations.length})
|
||||||
<span className="text-3xl">⏰</span>
|
</h2>
|
||||||
<div className="flex-1">
|
<div className="space-y-3 font-sans">
|
||||||
<h3 className="font-bold text-blue-900 dark:text-blue-100 text-lg">
|
{invitations.map((invitation) => (
|
||||||
Submission Deadline
|
<div
|
||||||
</h3>
|
key={invitation.id}
|
||||||
<p className="text-blue-800 dark:text-blue-200 mt-2 text-sm font-sans">
|
className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
|
||||||
Project submissions close on December 7, 2025 at 23:59 WIB
|
>
|
||||||
</p>
|
<div>
|
||||||
<div className="mt-4 grid grid-cols-4 gap-4">
|
<p className="font-medium text-gray-900 dark:text-white">
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
{invitation.team.name}
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
</p>
|
||||||
{timeLeft.days}
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
</div>
|
Invited by {invitation.inviter.fullname}
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
</p>
|
||||||
Days
|
</div>
|
||||||
</div>
|
<div className="flex space-x-2">
|
||||||
</div>
|
<Button
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
size="sm"
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
onClick={() => handleAcceptInvitation(invitation.id)}
|
||||||
{timeLeft.hours.toString().padStart(2, '0')}
|
>
|
||||||
</div>
|
Accept
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
</Button>
|
||||||
Hours
|
<Button
|
||||||
</div>
|
size="sm"
|
||||||
</div>
|
variant="secondary"
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
onClick={() => handleRejectInvitation(invitation.id)}
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
>
|
||||||
{timeLeft.minutes.toString().padStart(2, '0')}
|
Decline
|
||||||
</div>
|
</Button>
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
Minutes
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
||||||
{timeLeft.seconds.toString().padStart(2, '0')}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
Seconds
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{invitations.length > 0 && (
|
{myTeams.length > 0 ? (
|
||||||
<div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
|
<div className="mb-6 md:mb-8">
|
||||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
Team Invitations ({invitations.length})
|
My Team
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 gap-4 md:gap-6 w-full md:max-w-lg">
|
||||||
|
{myTeams.map((team) => (
|
||||||
|
<Link
|
||||||
|
key={team.id}
|
||||||
|
to={'/teams/' + team.id}
|
||||||
|
className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
|
||||||
|
>
|
||||||
|
{team.banner && (
|
||||||
|
<div className="w-full aspect-3/1">
|
||||||
|
<img
|
||||||
|
src={team.banner}
|
||||||
|
alt={team.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex flex-col md:flex-row items-center space-y-3 space-x-3 -mt-14 md:mt-0 mb-2 md:mb-3 min-w-12 min-h-12 ">
|
||||||
|
{team.logo && (
|
||||||
|
<img
|
||||||
|
src={team.logo}
|
||||||
|
alt={team.name}
|
||||||
|
className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl md:text-lg font-bold text-gray-900 dark:text-white leading-tight">
|
||||||
|
{team.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
|
||||||
|
<Icon
|
||||||
|
icon="heroicons:map-pin-16-solid"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
/>
|
||||||
|
<span className="ml-1">{team.city}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
|
||||||
|
{team.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
|
||||||
|
You are not in a team yet
|
||||||
</h2>
|
</h2>
|
||||||
{isTeamFeaturesClosed && (
|
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
|
||||||
<div className="mb-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
|
Use the sidebar to browse teams or create your own
|
||||||
<p className="text-sm text-amber-700 dark:text-amber-300 flex items-center gap-2">
|
</p>
|
||||||
<Icon icon="mdi:clock-alert" className="text-lg shrink-0" />
|
</div>
|
||||||
Team features are closed. You can no longer accept invitations.
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
|
||||||
|
<div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
|
||||||
|
<div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
|
||||||
|
<div className="flex flex-col md:flex-row items-start">
|
||||||
|
{user?.avatar ? (
|
||||||
|
<img
|
||||||
|
src={user.avatar}
|
||||||
|
alt={user.fullname || 'User'}
|
||||||
|
className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
||||||
|
<span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
|
||||||
|
U
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="md:ml-6 mt-4 md:mt-14">
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
{user?.fullname ||
|
||||||
|
user?.email?.split('@')[0] ||
|
||||||
|
'Unnamed User'}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{user?.location ? (
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
|
||||||
|
<Icon
|
||||||
|
icon="heroicons:map-pin-16-solid"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
/>
|
||||||
|
<span className="ml-1">{user.location}</span>
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<Link
|
||||||
|
to="/onboarding/user"
|
||||||
|
className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
|
||||||
|
>
|
||||||
|
<span className="font-sans">Complete your profile</span>
|
||||||
|
<Icon
|
||||||
|
icon="ic:baseline-chevron-right"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{user?.location && (
|
||||||
|
<Link
|
||||||
|
to="/profile"
|
||||||
|
className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto"
|
||||||
|
>
|
||||||
|
Edit Profile
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4 md:space-y-6 w-full max-w-full">
|
||||||
|
{user?.bio && (
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
|
||||||
|
About
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
|
||||||
|
{user.bio}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="space-y-3 font-sans">
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
||||||
{invitations.map((invitation) => (
|
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
||||||
<div
|
Contact
|
||||||
key={invitation.id}
|
</h3>
|
||||||
className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
|
<div className="flex items-center text-gray-700 dark:text-gray-300">
|
||||||
>
|
<span className="text-gray-900 dark:text-white">
|
||||||
<div>
|
{user?.email}
|
||||||
<p className="font-medium text-gray-900 dark:text-white">
|
</span>
|
||||||
{invitation.team?.name ?? 'Unnamed Team'}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
Invited by{' '}
|
|
||||||
{invitation.inviter?.fullname ?? 'Unknown User'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{!isTeamFeaturesClosed && (
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleAcceptInvitation(invitation.id)}
|
|
||||||
>
|
|
||||||
Accept
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => handleRejectInvitation(invitation.id)}
|
|
||||||
>
|
|
||||||
Decline
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{myTeams.length > 0 ? (
|
|
||||||
(() => {
|
|
||||||
const team = myTeams[0] as any;
|
|
||||||
return (
|
|
||||||
<div className="mb-6 md:mb-8">
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
|
||||||
My Team
|
|
||||||
</h2>
|
|
||||||
<Link
|
|
||||||
to={'/teams/' + team.id}
|
|
||||||
className="block bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow border dark:border-gray-700"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={team.banner || '/images/banner-imphnen.webp'}
|
|
||||||
alt={team.name}
|
|
||||||
className="w-full aspect-3/1 object-cover"
|
|
||||||
/>
|
|
||||||
<div className="p-4 md:p-6">
|
|
||||||
<div className="flex items-center space-x-4 mb-4">
|
|
||||||
{team.logo ? (
|
|
||||||
<img
|
|
||||||
src={team.logo}
|
|
||||||
alt={team.name}
|
|
||||||
className="w-16 h-16 rounded-full object-cover shrink-0"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
|
|
||||||
<Icon icon="mdi:account-group" className="text-gray-500 dark:text-gray-400 text-2xl" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white leading-tight line-clamp-1">
|
|
||||||
{team.name}
|
|
||||||
</h3>
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-3 font-sans mt-2">
|
|
||||||
{team.has_submission && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
|
|
||||||
<Icon icon="mdi:check-circle" className="text-sm" />
|
|
||||||
Submitted
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{team.city && (
|
|
||||||
<span className="flex items-center gap-1 truncate">
|
|
||||||
<Icon icon="mdi:map-marker" className="shrink-0" />
|
|
||||||
<span className="truncate">{team.city}</span>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="flex items-center gap-1 shrink-0">
|
|
||||||
<Icon icon="mdi:account-group" />
|
|
||||||
{team.member_count || team.members?.length || 0} member{(team.member_count || team.members?.length || 0) !== 1 ? 's' : ''}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{team.description && (
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 line-clamp-3 font-sans">
|
|
||||||
{team.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
})()
|
|
||||||
) : (
|
|
||||||
<div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
|
|
||||||
You are not in a team yet
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
|
|
||||||
Use the sidebar to browse teams or create your own
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{user?.skills && user.skills.length > 0 && (
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
|
|
||||||
<div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
|
|
||||||
<div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
|
|
||||||
<div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
|
|
||||||
<div className="flex flex-col md:flex-row items-start">
|
|
||||||
{user?.avatar ? (
|
|
||||||
<img
|
|
||||||
src={user.avatar}
|
|
||||||
alt={user.fullname || 'User'}
|
|
||||||
className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
|
||||||
<span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
|
|
||||||
U
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="md:ml-6 mt-4 md:mt-14">
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
|
|
||||||
{user?.fullname ||
|
|
||||||
user?.email?.split('@')[0] ||
|
|
||||||
'Unnamed User'}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{user?.location ? (
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
|
|
||||||
<Icon
|
|
||||||
icon="heroicons:map-pin-16-solid"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
/>
|
|
||||||
<span className="ml-1">{user.location}</span>
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<Link
|
|
||||||
to="/onboarding/user"
|
|
||||||
className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
|
|
||||||
>
|
|
||||||
<span className="font-sans">Complete your profile</span>
|
|
||||||
<Icon
|
|
||||||
icon="ic:baseline-chevron-right"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{user?.location && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowProfileModal(true)}
|
|
||||||
className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto cursor-pointer"
|
|
||||||
>
|
|
||||||
Edit Profile
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4 md:space-y-6 w-full max-w-full">
|
|
||||||
{user?.bio && (
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
|
|
||||||
About
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
|
|
||||||
{user.bio}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
||||||
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
||||||
Contact
|
Skills
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex items-center text-gray-700 dark:text-gray-300">
|
<div className="flex flex-wrap gap-2">
|
||||||
<span className="text-gray-900 dark:text-white">
|
{user.skills.map((skill: string) => (
|
||||||
{user?.email}
|
<span
|
||||||
</span>
|
key={skill}
|
||||||
|
className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
|
||||||
|
>
|
||||||
|
{skill}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{user?.skills && user.skills.length > 0 && (
|
)}
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
|
||||||
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
|
||||||
Skills
|
|
||||||
</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{user.skills.map((skill: string) => (
|
|
||||||
<span
|
|
||||||
key={skill}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
|
|
||||||
>
|
|
||||||
{skill}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ProfilePage
|
</div>
|
||||||
open={showProfileModal}
|
|
||||||
onClose={() => setShowProfileModal(false)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,6 @@
|
|||||||
import {
|
import { Outlet, ScrollRestoration, useLocation, useNavigate } from 'react-router-dom';
|
||||||
Outlet,
|
|
||||||
ScrollRestoration,
|
|
||||||
useLocation,
|
|
||||||
useNavigate,
|
|
||||||
} from 'react-router-dom';
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useAuthStore, useUserMe } from '@imphnen-frontend-service/service';
|
import { supabase } from '@imphnen-frontend-service/service';
|
||||||
|
|
||||||
// Define onboarding routes
|
// Define onboarding routes
|
||||||
const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
|
const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
|
||||||
@@ -13,8 +8,6 @@ const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
|
|||||||
export default function RootLayout() {
|
export default function RootLayout() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { session } = useAuthStore();
|
|
||||||
const { data: userData, isLoading: isUserLoading } = useUserMe();
|
|
||||||
const [isChecking, setIsChecking] = useState(true);
|
const [isChecking, setIsChecking] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -33,15 +26,24 @@ export default function RootLayout() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public auth pages - allow unauthenticated access
|
// Check Supabase session
|
||||||
if (pathname.startsWith('/auth')) {
|
const { data: { session }, error } = await supabase.auth.getSession();
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error('[Layout] Session error:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public auth pages (login, signup, forgot-password, reset-password) - allow unauthenticated access
|
||||||
|
const isPublicAuthPage = pathname === '/auth/login' || pathname === '/auth/signup' || pathname === '/auth/forgot-password' || pathname === '/auth/reset-password';
|
||||||
|
|
||||||
|
if (isPublicAuthPage) {
|
||||||
// If already authenticated and not on password reset pages, redirect to dashboard
|
// If already authenticated and not on password reset pages, redirect to dashboard
|
||||||
if (session && pathname !== '/auth/reset-password') {
|
if (session && pathname !== '/auth/reset-password') {
|
||||||
navigate('/dashboard', { replace: true });
|
navigate('/dashboard', { replace: true });
|
||||||
setIsChecking(false);
|
setIsChecking(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// Allow unauthenticated access to auth pages
|
// Allow unauthenticated access
|
||||||
setIsChecking(false);
|
setIsChecking(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -59,19 +61,30 @@ export default function RootLayout() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wait for user data to load before checking onboarding
|
|
||||||
if (isUserLoading) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if user has completed onboarding (skip for onboarding routes)
|
// Check if user has completed onboarding (skip for onboarding routes)
|
||||||
if (!ONBOARDING_ROUTES.has(pathname)) {
|
if (!ONBOARDING_ROUTES.has(pathname)) {
|
||||||
const hasLocation = !!userData?.data?.location || !!session?.user?.location;
|
try {
|
||||||
|
const { data: userData, error: userError } = await supabase
|
||||||
|
.from('users')
|
||||||
|
.select('location')
|
||||||
|
.eq('id', session.user.id)
|
||||||
|
.single();
|
||||||
|
|
||||||
if (!hasLocation) {
|
if (userError) {
|
||||||
navigate('/onboarding/user', { replace: true });
|
console.error('[Layout] Failed to fetch user data:', userError);
|
||||||
setIsChecking(false);
|
setIsChecking(false);
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasLocation = !!userData?.location;
|
||||||
|
|
||||||
|
if (!hasLocation) {
|
||||||
|
navigate('/onboarding/user', { replace: true });
|
||||||
|
setIsChecking(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// Silently handle error
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,7 +92,7 @@ export default function RootLayout() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
checkAuth();
|
checkAuth();
|
||||||
}, [location.pathname, navigate, session, userData, isUserLoading]);
|
}, [location.pathname, navigate]);
|
||||||
|
|
||||||
// Show loading state while checking auth
|
// Show loading state while checking auth
|
||||||
if (isChecking) {
|
if (isChecking) {
|
||||||
|
|||||||
@@ -1,23 +0,0 @@
|
|||||||
import { Link } from 'react-router';
|
|
||||||
|
|
||||||
export default function MaintenancePage() {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="text-6xl font-bold text-yellow-600 mb-4">🚧</h1>
|
|
||||||
<h2 className="text-3xl font-semibold mb-2">We'll be back soon!</h2>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
Our site is currently undergoing scheduled maintenance.
|
|
||||||
<br />
|
|
||||||
Thank you for your patience.
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
to="/"
|
|
||||||
className="mt-4 inline-block text-primary-600 hover:underline"
|
|
||||||
>
|
|
||||||
Back to Homepage
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -60,20 +60,6 @@ const UserOnboardingPage: FC = (): ReactElement => {
|
|||||||
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
// Validate file size (max 2MB)
|
|
||||||
if (file.size > 2 * 1024 * 1024) {
|
|
||||||
toast.error('The file is too large. Maximum size is 2MB.');
|
|
||||||
e.target.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validate file type
|
|
||||||
if (!file.type.startsWith('image/')) {
|
|
||||||
toast.error('The file must be an image');
|
|
||||||
e.target.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setAvatarFile(file);
|
setAvatarFile(file);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onloadend = () => {
|
reader.onloadend = () => {
|
||||||
@@ -164,7 +150,7 @@ const UserOnboardingPage: FC = (): ReactElement => {
|
|||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<p className="text-xs text-gray-500 dark:text-gray-500 mt-2 text-center">
|
<p className="text-xs text-gray-500 dark:text-gray-500 mt-2 text-center">
|
||||||
Optional, but highly recommended. Max 2MB
|
Optional, but highly recommended
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useNavigate, Link } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
@@ -187,12 +187,12 @@ export default function HomePage() {
|
|||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<button
|
<a
|
||||||
onClick={() => navigate('/auth/login')}
|
href="#masuk"
|
||||||
className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
|
className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
|
||||||
>
|
>
|
||||||
Masuk
|
Masuk
|
||||||
</button>
|
</a>
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate('/auth/login')}
|
onClick={() => navigate('/auth/login')}
|
||||||
className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
|
className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
|
||||||
@@ -796,12 +796,12 @@ export default function HomePage() {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<a
|
||||||
to="/auth/signup"
|
href="/auth/signup"
|
||||||
className="hover:text-white transition-colors"
|
className="hover:text-white transition-colors"
|
||||||
>
|
>
|
||||||
Daftar
|
Daftar
|
||||||
</Link>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { FC, ReactElement, useState, useEffect } from 'react';
|
import { FC, ReactElement, useState, useEffect } from 'react';
|
||||||
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
||||||
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
|
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
|
||||||
|
import { useNavigate, Link } from 'react-router';
|
||||||
import { useForm, Controller } from 'react-hook-form';
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
import {
|
import {
|
||||||
userEditProfileSchema,
|
userEditProfileSchema,
|
||||||
@@ -25,15 +26,8 @@ const ROLE_OPTIONS = [
|
|||||||
'Mobile Developer',
|
'Mobile Developer',
|
||||||
];
|
];
|
||||||
|
|
||||||
type ProfileModalProps = {
|
const ProfilePage: FC = (): ReactElement => {
|
||||||
open: boolean;
|
const navigate = useNavigate();
|
||||||
onClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ProfilePage: FC<ProfileModalProps> = ({
|
|
||||||
open,
|
|
||||||
onClose,
|
|
||||||
}): ReactElement | null => {
|
|
||||||
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
||||||
const [avatarPreview, setAvatarPreview] = useState<string>('');
|
const [avatarPreview, setAvatarPreview] = useState<string>('');
|
||||||
|
|
||||||
@@ -84,17 +78,15 @@ const ProfilePage: FC<ProfileModalProps> = ({
|
|||||||
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
// Validate file size (max 2MB)
|
// Validate file size (max 5MB)
|
||||||
if (file.size > 2 * 1024 * 1024) {
|
if (file.size > 5 * 1024 * 1024) {
|
||||||
toast.error('The file is too large. Maximum size is 2MB.');
|
toast.error('The file is too large. Maximum 5MB');
|
||||||
e.target.value = '';
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate file type
|
// Validate file type
|
||||||
if (!file.type.startsWith('image/')) {
|
if (!file.type.startsWith('image/')) {
|
||||||
toast.error('The file must be an image');
|
toast.error('The file must be an image');
|
||||||
e.target.value = '';
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -131,8 +123,8 @@ const ProfilePage: FC<ProfileModalProps> = ({
|
|||||||
// Wait a bit for the onSuccess handler to update localStorage
|
// Wait a bit for the onSuccess handler to update localStorage
|
||||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||||
|
|
||||||
// Close modal
|
// Navigate back to dashboard
|
||||||
onClose();
|
navigate('/dashboard');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Profile update failed:', error);
|
console.error('Profile update failed:', error);
|
||||||
toast.error(
|
toast.error(
|
||||||
@@ -145,23 +137,65 @@ const ProfilePage: FC<ProfileModalProps> = ({
|
|||||||
|
|
||||||
const isLoading = isUpdating || isUploading;
|
const isLoading = isUpdating || isUploading;
|
||||||
|
|
||||||
return open ? (
|
return (
|
||||||
<div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
|
<div className=" bg-black/30 dark:bg-black/50 backdrop-blur-sm flex flex-col justify-center items-center px-4 py-8 z-50 overflow-y-auto">
|
||||||
<div className="min-h-full flex items-center justify-center">
|
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-xl border dark:boder-gray-800">
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
|
<div className="mb-6">
|
||||||
<div className="mb-6">
|
<div className="flex items-center justify-between mb-2">
|
||||||
<div className="flex items-center justify-between mb-2">
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
Edit Profile
|
||||||
Edit Profile
|
</h1>
|
||||||
</h1>
|
<Link
|
||||||
<button
|
to="/dashboard"
|
||||||
type="button"
|
className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
|
||||||
onClick={onClose}
|
>
|
||||||
className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
|
<svg
|
||||||
aria-label="Close profile modal"
|
className="w-6 h-6"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 font-sans dark:text-neutral-400">
|
||||||
|
Update your photo and name
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={onSubmit} className="space-y-6">
|
||||||
|
{/* Avatar Upload */}
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
<div className="relative group">
|
||||||
|
{avatarPreview ? (
|
||||||
|
<img
|
||||||
|
src={avatarPreview}
|
||||||
|
alt="Avatar preview"
|
||||||
|
className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
|
||||||
|
<Icon
|
||||||
|
icon="ic:baseline-person"
|
||||||
|
width="48"
|
||||||
|
height="48"
|
||||||
|
className="text-gray-400 dark:text-neutral-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Camera overlay */}
|
||||||
|
<label
|
||||||
|
htmlFor="avatar"
|
||||||
|
className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
className="w-6 h-6"
|
className="w-5 h-5"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
@@ -170,222 +204,176 @@ const ProfilePage: FC<ProfileModalProps> = ({
|
|||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
d="M6 18L18 6M6 6l12 12"
|
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
<input
|
||||||
|
id="avatar"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
className="hidden"
|
||||||
|
onChange={handleAvatarChange}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-600 font-sans dark:text-neutral-400">
|
<p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
|
||||||
Update your photo and name
|
Click the camera icon to change your photo
|
||||||
|
<br />
|
||||||
|
Format: JPG, PNG. Max 5MB
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={onSubmit} className="space-y-6">
|
{/* Full Name */}
|
||||||
{/* Avatar Upload */}
|
<ControlledInputField
|
||||||
<div className="flex flex-col items-center space-y-4">
|
control={form.control}
|
||||||
<div className="relative group">
|
label="Full Name"
|
||||||
{avatarPreview ? (
|
placeholder="Enter your full name"
|
||||||
<img
|
name="fullname"
|
||||||
src={avatarPreview}
|
size="lg"
|
||||||
alt="Avatar preview"
|
/>
|
||||||
className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
|
|
||||||
/>
|
{/* City */}
|
||||||
) : (
|
<div className="space-y-2">
|
||||||
<div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
|
<label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
|
||||||
<Icon
|
City
|
||||||
icon="ic:baseline-person"
|
</label>
|
||||||
width="48"
|
<Controller
|
||||||
height="48"
|
control={form.control}
|
||||||
className="text-gray-400 dark:text-neutral-500"
|
name="location"
|
||||||
/>
|
render={({ field, fieldState }) => (
|
||||||
|
<CitySelect
|
||||||
|
value={field.value}
|
||||||
|
onChange={field.onChange}
|
||||||
|
error={fieldState.error?.message}
|
||||||
|
placeholder="Search your city..."
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Role/Skills */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
||||||
|
Role / Skills
|
||||||
|
</label>
|
||||||
|
<Controller
|
||||||
|
control={form.control}
|
||||||
|
name="skills"
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{ROLE_OPTIONS.map((role) => (
|
||||||
|
<label
|
||||||
|
key={role}
|
||||||
|
className="flex items-center space-x-2 cursor-pointer font-sans"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={field.value?.includes(role)}
|
||||||
|
onChange={(e) => {
|
||||||
|
const newValue = e.target.checked
|
||||||
|
? [...(field.value || []), role]
|
||||||
|
: (field.value || []).filter((v) => v !== role);
|
||||||
|
field.onChange(newValue);
|
||||||
|
}}
|
||||||
|
className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
|
||||||
|
/>
|
||||||
|
<span className="text-sm dark:text-neutral-300">
|
||||||
|
{role}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{/* Camera overlay */}
|
)}
|
||||||
<label
|
/>
|
||||||
htmlFor="avatar"
|
</div>
|
||||||
className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
|
|
||||||
>
|
{/* Bio */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
||||||
|
Bio{' '}
|
||||||
|
<span className="text-gray-400 dark:text-neutral-500">
|
||||||
|
(Optional)
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<Controller
|
||||||
|
control={form.control}
|
||||||
|
name="bio"
|
||||||
|
render={({ field, fieldState }) => (
|
||||||
|
<div>
|
||||||
|
<Textarea
|
||||||
|
{...field}
|
||||||
|
placeholder="Tell us about yourself..."
|
||||||
|
rows={4}
|
||||||
|
className="w-full font-sans"
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
{fieldState.error && (
|
||||||
|
<p className="text-sm text-red-500 mt-1">
|
||||||
|
{fieldState.error.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex space-x-3 pt-4">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
className="flex-1"
|
||||||
|
onClick={() => navigate('/dashboard')}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1"
|
||||||
|
disabled={isLoading || !form.formState.isValid}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<span className="flex items-center justify-center">
|
||||||
<svg
|
<svg
|
||||||
className="w-5 h-5"
|
className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path
|
<circle
|
||||||
strokeLinecap="round"
|
className="opacity-25"
|
||||||
strokeLinejoin="round"
|
cx="12"
|
||||||
strokeWidth={2}
|
cy="12"
|
||||||
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
className="opacity-75"
|
||||||
strokeLinejoin="round"
|
fill="currentColor"
|
||||||
strokeWidth={2}
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<input
|
Saving...
|
||||||
id="avatar"
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleAvatarChange}
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
|
|
||||||
Click the camera icon to change your photo
|
|
||||||
<br />
|
|
||||||
Format: JPG, PNG. Max 2MB
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Full Name */}
|
|
||||||
<ControlledInputField
|
|
||||||
control={form.control}
|
|
||||||
label="Full Name"
|
|
||||||
placeholder="Enter your full name"
|
|
||||||
name="fullname"
|
|
||||||
size="lg"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* City */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
|
|
||||||
City
|
|
||||||
</label>
|
|
||||||
<Controller
|
|
||||||
control={form.control}
|
|
||||||
name="location"
|
|
||||||
render={({ field, fieldState }) => (
|
|
||||||
<CitySelect
|
|
||||||
value={field.value ?? ''}
|
|
||||||
onChange={field.onChange}
|
|
||||||
error={fieldState.error?.message}
|
|
||||||
placeholder="Search your city..."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Role/Skills */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
|
||||||
Role / Skills
|
|
||||||
</label>
|
|
||||||
<Controller
|
|
||||||
control={form.control}
|
|
||||||
name="skills"
|
|
||||||
render={({ field }) => (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{ROLE_OPTIONS.map((role) => (
|
|
||||||
<label
|
|
||||||
key={role}
|
|
||||||
className="flex items-center space-x-2 cursor-pointer font-sans"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={field.value?.includes(role)}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newValue = e.target.checked
|
|
||||||
? [...(field.value || []), role]
|
|
||||||
: (field.value || []).filter((v) => v !== role);
|
|
||||||
field.onChange(newValue);
|
|
||||||
}}
|
|
||||||
className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
|
|
||||||
/>
|
|
||||||
<span className="text-sm dark:text-neutral-300">
|
|
||||||
{role}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bio */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
|
||||||
Bio{' '}
|
|
||||||
<span className="text-gray-400 dark:text-neutral-500">
|
|
||||||
(Optional)
|
|
||||||
</span>
|
</span>
|
||||||
</label>
|
) : (
|
||||||
<Controller
|
'Save'
|
||||||
control={form.control}
|
)}
|
||||||
name="bio"
|
</Button>
|
||||||
render={({ field, fieldState }) => (
|
</div>
|
||||||
<div>
|
</form>
|
||||||
<Textarea
|
|
||||||
{...field}
|
|
||||||
placeholder="Tell us about yourself..."
|
|
||||||
rows={4}
|
|
||||||
className="w-full font-sans"
|
|
||||||
size="lg"
|
|
||||||
/>
|
|
||||||
{fieldState.error && (
|
|
||||||
<p className="text-sm text-red-500 mt-1">
|
|
||||||
{fieldState.error.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Action Buttons */}
|
|
||||||
<div className="flex space-x-3 pt-4">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
className="flex-1"
|
|
||||||
onClick={onClose}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="flex-1"
|
|
||||||
disabled={isLoading || !form.formState.isValid}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<span className="flex items-center justify-center">
|
|
||||||
<svg
|
|
||||||
className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<circle
|
|
||||||
className="opacity-25"
|
|
||||||
cx="12"
|
|
||||||
cy="12"
|
|
||||||
r="10"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="4"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
className="opacity-75"
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Saving...
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
'Save'
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : null;
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ProfilePage;
|
export default ProfilePage;
|
||||||
|
|||||||
@@ -16,9 +16,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
|||||||
|
|
||||||
import { CitySelect } from '../../../../components/city-select';
|
import { CitySelect } from '../../../../components/city-select';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
|
|
||||||
|
|
||||||
const EditTeamPage: FC = (): ReactElement => {
|
const EditTeamPage: FC = (): ReactElement => {
|
||||||
const { teamId } = useParams<{ teamId: string }>();
|
const { teamId } = useParams<{ teamId: string }>();
|
||||||
@@ -88,11 +85,6 @@ const EditTeamPage: FC = (): ReactElement => {
|
|||||||
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
if (file.size > MAX_FILE_SIZE) {
|
|
||||||
toast.error('Logo image is too large. Maximum size is 2MB.');
|
|
||||||
e.target.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setLogoFile(file);
|
setLogoFile(file);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onloadend = () => {
|
reader.onloadend = () => {
|
||||||
@@ -105,11 +97,6 @@ const EditTeamPage: FC = (): ReactElement => {
|
|||||||
const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
if (file.size > MAX_FILE_SIZE) {
|
|
||||||
toast.error('Banner image is too large. Maximum size is 2MB.');
|
|
||||||
e.target.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setBannerFile(file);
|
setBannerFile(file);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onloadend = () => {
|
reader.onloadend = () => {
|
||||||
@@ -196,7 +183,7 @@ const EditTeamPage: FC = (): ReactElement => {
|
|||||||
Click to upload banner
|
Click to upload banner
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
|
||||||
1200x400 recommended. Max 2MB
|
1200x400 recommended
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
@@ -228,35 +215,32 @@ const EditTeamPage: FC = (): ReactElement => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div>
|
<div className="flex flex-col md:flex-row items-start justify-start gap-1">
|
||||||
<div className="flex flex-col md:flex-row items-start justify-start gap-1">
|
<label htmlFor="logo" className="cursor-pointer">
|
||||||
<label htmlFor="logo" className="cursor-pointer">
|
<span className="px-4 py-2 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 inline-block">
|
||||||
<span className="px-4 py-2 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 inline-block">
|
{logoPreview ? 'Change Logo' : 'Upload Logo'}
|
||||||
{logoPreview ? 'Change Logo' : 'Upload Logo'}
|
</span>
|
||||||
</span>
|
<input
|
||||||
<input
|
id="logo"
|
||||||
id="logo"
|
type="file"
|
||||||
type="file"
|
accept="image/*"
|
||||||
accept="image/*"
|
className="hidden"
|
||||||
className="hidden"
|
onChange={handleLogoChange}
|
||||||
onChange={handleLogoChange}
|
/>
|
||||||
/>
|
</label>
|
||||||
</label>
|
{logoPreview && (
|
||||||
{logoPreview && (
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={() => {
|
||||||
onClick={() => {
|
setLogoFile(null);
|
||||||
setLogoFile(null);
|
setLogoPreview('');
|
||||||
setLogoPreview('');
|
form.setValue('logo', null);
|
||||||
form.setValue('logo', null);
|
}}
|
||||||
}}
|
className="px-4 py-2 text-sm bg-danger-600 text-white rounded-lg hover:bg-danger-700 cursor-pointer"
|
||||||
className="px-4 py-2 text-sm bg-danger-600 text-white rounded-lg hover:bg-danger-700 cursor-pointer"
|
>
|
||||||
>
|
Remove
|
||||||
Remove
|
</button>
|
||||||
</button>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-2">Max 2MB</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -47,7 +47,6 @@ const ManageMembersPage: FC = (): ReactElement => {
|
|||||||
: [];
|
: [];
|
||||||
const currentUserId = session?.user?.id;
|
const currentUserId = session?.user?.id;
|
||||||
const isLeader = currentUserId === team?.leader_id;
|
const isLeader = currentUserId === team?.leader_id;
|
||||||
const hasSubmission = team?.has_submission;
|
|
||||||
|
|
||||||
const form = useForm<TInviteMemberForm>({
|
const form = useForm<TInviteMemberForm>({
|
||||||
resolver: zodResolver(inviteMemberSchema),
|
resolver: zodResolver(inviteMemberSchema),
|
||||||
@@ -134,11 +133,7 @@ const ManageMembersPage: FC = (): ReactElement => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex space-x-3">
|
<div className="flex space-x-3">
|
||||||
<Button
|
<Button onClick={() => setShowInviteModal(true)}>
|
||||||
onClick={() => setShowInviteModal(true)}
|
|
||||||
disabled={hasSubmission}
|
|
||||||
title={hasSubmission ? 'Cannot invite members after project submission' : undefined}
|
|
||||||
>
|
|
||||||
Invite Member
|
Invite Member
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
@@ -153,23 +148,6 @@ const ManageMembersPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
|
||||||
{/* Submission Lock Warning */}
|
|
||||||
{hasSubmission && (
|
|
||||||
<div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-500 rounded-lg p-4">
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<span className="text-2xl">🔒</span>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-amber-900 dark:text-amber-100">
|
|
||||||
Team Locked
|
|
||||||
</h3>
|
|
||||||
<p className="text-amber-800 dark:text-amber-200 text-sm font-sans mt-1">
|
|
||||||
Your team has submitted a project. You cannot add or remove members after submission to maintain competition integrity.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Join Requests */}
|
{/* Join Requests */}
|
||||||
{joinRequests.length > 0 && (
|
{joinRequests.length > 0 && (
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-6">
|
||||||
@@ -218,8 +196,7 @@ const ManageMembersPage: FC = (): ReactElement => {
|
|||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => handleApproveRequest(request.id)}
|
onClick={() => handleApproveRequest(request.id)}
|
||||||
disabled={isResponding || hasSubmission}
|
disabled={isResponding}
|
||||||
title={hasSubmission ? 'Cannot accept members after project submission' : undefined}
|
|
||||||
>
|
>
|
||||||
Approve
|
Approve
|
||||||
</Button>
|
</Button>
|
||||||
@@ -295,7 +272,7 @@ const ManageMembersPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{member.role !== 'leader' && !hasSubmission && (
|
{member.role !== 'leader' && (
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
@@ -312,14 +289,12 @@ const ManageMembersPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Warning */}
|
{/* Warning */}
|
||||||
{!hasSubmission && (
|
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
|
||||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
|
<p className="text-sm text-yellow-800 dark:text-yellow-200">
|
||||||
<p className="text-sm text-yellow-800 dark:text-yellow-200">
|
<strong>Note:</strong> Members cannot leave the team without your
|
||||||
<strong>Note:</strong> Members cannot leave the team without your
|
approval. Only you can remove members from the team.
|
||||||
approval. Only you can remove members from the team.
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Invite Member Modal */}
|
{/* Invite Member Modal */}
|
||||||
|
|||||||
@@ -7,8 +7,6 @@ import {
|
|||||||
useInviteMember,
|
useInviteMember,
|
||||||
useTeamJoinRequests,
|
useTeamJoinRequests,
|
||||||
useRespondToJoinRequest,
|
useRespondToJoinRequest,
|
||||||
useLeaveTeam,
|
|
||||||
useDeleteTeam,
|
|
||||||
ETeamMemberRole,
|
ETeamMemberRole,
|
||||||
useAuthStore,
|
useAuthStore,
|
||||||
} from '@imphnen-frontend-service/service';
|
} from '@imphnen-frontend-service/service';
|
||||||
@@ -17,9 +15,6 @@ import { Icon } from '@iconify/react';
|
|||||||
|
|
||||||
const MAX_TEAM_MEMBERS = 5;
|
const MAX_TEAM_MEMBERS = 5;
|
||||||
|
|
||||||
// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
|
|
||||||
const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
|
|
||||||
|
|
||||||
// Image component with loading state
|
// Image component with loading state
|
||||||
const ImageWithLoader: FC<{
|
const ImageWithLoader: FC<{
|
||||||
src: string;
|
src: string;
|
||||||
@@ -55,14 +50,8 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
const { teamId } = useParams<{ teamId: string }>();
|
const { teamId } = useParams<{ teamId: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { session } = useAuthStore();
|
const { session } = useAuthStore();
|
||||||
|
|
||||||
// Check if team features are closed
|
|
||||||
const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
|
|
||||||
const [showInviteModal, setShowInviteModal] = useState(false);
|
const [showInviteModal, setShowInviteModal] = useState(false);
|
||||||
const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
|
const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
|
||||||
const [showLeaveModal, setShowLeaveModal] = useState(false);
|
|
||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
||||||
const [deleteConfirmText, setDeleteConfirmText] = useState('');
|
|
||||||
const [inviteEmail, setInviteEmail] = useState('');
|
const [inviteEmail, setInviteEmail] = useState('');
|
||||||
const [imagesLoaded, setImagesLoaded] = useState(false);
|
const [imagesLoaded, setImagesLoaded] = useState(false);
|
||||||
const [imageLoadCount, setImageLoadCount] = useState(0);
|
const [imageLoadCount, setImageLoadCount] = useState(0);
|
||||||
@@ -96,29 +85,25 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(
|
const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(
|
||||||
teamId || ''
|
teamId || ''
|
||||||
);
|
);
|
||||||
|
|
||||||
const team = teamData?.data;
|
|
||||||
const members = membersData?.data || [];
|
|
||||||
const currentUserId = session?.user?.id;
|
|
||||||
const isLeader = currentUserId === team?.leader_id;
|
|
||||||
|
|
||||||
// Only fetch join requests if user is the team leader
|
|
||||||
const { data: joinRequestsData } = useTeamJoinRequests(
|
const { data: joinRequestsData } = useTeamJoinRequests(
|
||||||
teamId || '',
|
teamId || '',
|
||||||
!!teamId && isLeader
|
!!teamId
|
||||||
);
|
);
|
||||||
const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(
|
const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(
|
||||||
teamId || ''
|
teamId || ''
|
||||||
);
|
);
|
||||||
const { mutateAsync: respondToJoinRequest, isPending: isResponding } =
|
const { mutateAsync: respondToJoinRequest, isPending: isResponding } =
|
||||||
useRespondToJoinRequest(teamId || '');
|
useRespondToJoinRequest(teamId || '');
|
||||||
const { mutateAsync: leaveTeam, isPending: isLeaving } = useLeaveTeam();
|
|
||||||
const { mutateAsync: deleteTeam, isPending: isDeleting } = useDeleteTeam();
|
|
||||||
|
|
||||||
|
const team = teamData?.data;
|
||||||
|
const members = membersData?.data || [];
|
||||||
const joinRequests = joinRequestsData?.data || [];
|
const joinRequests = joinRequestsData?.data || [];
|
||||||
const pendingJoinRequests = joinRequests.filter(
|
const pendingJoinRequests = joinRequests.filter(
|
||||||
(req: any) => req.status === 'pending'
|
(req: any) => req.status === 'pending'
|
||||||
);
|
);
|
||||||
|
const currentUserId = session?.user?.id;
|
||||||
|
|
||||||
|
const isLeader = currentUserId === team?.leader_id;
|
||||||
const isMember = members.some(
|
const isMember = members.some(
|
||||||
(member: any) => member.user_id === currentUserId
|
(member: any) => member.user_id === currentUserId
|
||||||
);
|
);
|
||||||
@@ -154,32 +139,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLeaveTeam = async () => {
|
|
||||||
if (!teamId) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await leaveTeam(teamId);
|
|
||||||
toast.success('You have left the team');
|
|
||||||
navigate('/dashboard');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to leave team:', error);
|
|
||||||
toast.error('Failed to leave team');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteTeam = async () => {
|
|
||||||
if (!teamId) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await deleteTeam(teamId);
|
|
||||||
toast.success('Team deleted successfully');
|
|
||||||
navigate('/dashboard');
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Failed to delete team:', error);
|
|
||||||
toast.error(error?.message || 'Failed to delete team');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoadingTeam || isLoadingMembers) {
|
if (isLoadingTeam || isLoadingMembers) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||||
@@ -235,7 +194,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Loading Overlay */}
|
{/* Loading Overlay */}
|
||||||
<div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 bg-white/60 flex items-center justify-center z-50">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
||||||
<p className="mt-4 text-gray-600 dark:text-white">
|
<p className="mt-4 text-gray-600 dark:text-white">
|
||||||
@@ -375,49 +334,42 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
Team Management
|
Team Management
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid gap-3 sm:grid-cols-2">
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
{/* Hide invite/join management after submission or deadline */}
|
<Button
|
||||||
{!team.has_submission && !isTeamFeaturesClosed && (
|
className="w-full"
|
||||||
<>
|
variant="secondary"
|
||||||
<Button
|
onClick={() => setShowInviteModal(true)}
|
||||||
className="w-full"
|
disabled={!canInvite}
|
||||||
variant="secondary"
|
>
|
||||||
onClick={() => setShowInviteModal(true)}
|
<Icon icon="mdi:plus" className="inline-block mr-2" />
|
||||||
disabled={!canInvite}
|
Invite Member{' '}
|
||||||
>
|
{!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
|
||||||
<Icon icon="mdi:plus" className="inline-block mr-2" />
|
</Button>
|
||||||
Invite Member{' '}
|
<Button
|
||||||
{!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
|
className="w-full relative"
|
||||||
</Button>
|
variant="secondary"
|
||||||
<Button
|
onClick={() => setShowJoinRequestsModal(true)}
|
||||||
className="w-full relative"
|
>
|
||||||
variant="secondary"
|
<Icon icon="mdi:email" className="inline-block mr-2" /> Join
|
||||||
onClick={() => setShowJoinRequestsModal(true)}
|
Requests
|
||||||
>
|
{pendingJoinRequests.length > 0 && (
|
||||||
<Icon icon="mdi:email" className="inline-block mr-2" /> Join
|
<span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
|
||||||
Requests
|
{pendingJoinRequests.length}
|
||||||
{pendingJoinRequests.length > 0 && (
|
</span>
|
||||||
<span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
|
)}
|
||||||
{pendingJoinRequests.length}
|
</Button>
|
||||||
</span>
|
<Link to={`/teams/${teamId}/edit`}>
|
||||||
)}
|
<Button className="w-full" variant="secondary">
|
||||||
</Button>
|
<Icon icon="mdi:pencil" className="inline-block mr-2" />
|
||||||
</>
|
Edit Team Info
|
||||||
)}
|
</Button>
|
||||||
{!team.has_submission && !isTeamFeaturesClosed && (
|
</Link>
|
||||||
<Link to={`/teams/${teamId}/edit`}>
|
|
||||||
<Button className="w-full" variant="secondary">
|
|
||||||
<Icon icon="mdi:pencil" className="inline-block mr-2" />
|
|
||||||
Edit Team Info
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<Link to={`/teams/${teamId}/members`}>
|
<Link to={`/teams/${teamId}/members`}>
|
||||||
<Button className="w-full" variant="secondary">
|
<Button className="w-full" variant="secondary">
|
||||||
<Icon
|
<Icon
|
||||||
icon="mdi:account-group"
|
icon="mdi:account-group"
|
||||||
className="inline-block mr-2"
|
className="inline-block mr-2"
|
||||||
/>
|
/>
|
||||||
View Members
|
Manage Members
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link to={`/teams/${teamId}/chat`}>
|
<Link to={`/teams/${teamId}/chat`}>
|
||||||
@@ -426,92 +378,40 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
Team Chat
|
Team Chat
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
{team.has_submission ? (
|
<Link to={`/teams/${teamId}/submit`}>
|
||||||
<Link to={`/teams/${teamId}/submission`}>
|
<Button className="w-full">
|
||||||
<Button className="w-full" variant="secondary">
|
<Icon icon="mdi:rocket" className="inline-block mr-2" />
|
||||||
<Icon icon="mdi:file-document" className="inline-block mr-2" />
|
Submit Project
|
||||||
View Submission
|
</Button>
|
||||||
</Button>
|
</Link>
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<Link to={`/teams/${teamId}/submit`}>
|
|
||||||
<Button className="w-full" disabled={members.length < 2}>
|
|
||||||
<Icon icon="mdi:rocket" className="inline-block mr-2" />
|
|
||||||
Submit Project
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{!team.has_submission && !canInvite && members.length >= MAX_TEAM_MEMBERS && (
|
{!canInvite && members.length >= MAX_TEAM_MEMBERS && (
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-3 text-center">
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-3 text-center">
|
||||||
Maximum team size reached ({MAX_TEAM_MEMBERS} members)
|
Maximum team size reached ({MAX_TEAM_MEMBERS} members)
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{/* Danger Zone - Only show when leader is alone, no submission, and features not closed */}
|
|
||||||
{members.length === 1 && !team.has_submission && !isTeamFeaturesClosed && (
|
|
||||||
<div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
||||||
<h3 className="text-sm font-medium text-red-600 dark:text-red-400 mb-3">
|
|
||||||
Danger Zone
|
|
||||||
</h3>
|
|
||||||
<Button
|
|
||||||
className="w-full bg-red-600 hover:bg-red-700 text-white"
|
|
||||||
onClick={() => setShowDeleteModal(true)}
|
|
||||||
>
|
|
||||||
<Icon icon="mdi:delete" className="inline-block mr-2" />
|
|
||||||
Delete Team
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Quick Actions for Members (non-leaders) */}
|
{/* Quick Actions for Members (non-leaders) */}
|
||||||
{!isLeader && isMember && (
|
{!isLeader && isMember && (
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 md:p-6">
|
||||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
Quick Actions
|
Quick Actions
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid gap-3 sm:grid-cols-2">
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
<Link to={`/teams/${teamId}/chat`}>
|
<Link to={`/teams/${teamId}/chat`}>
|
||||||
<Button className="w-full" variant="secondary">
|
<Button className="w-full" variant="secondary">
|
||||||
<Icon icon="mdi:chat" className="inline-block mr-2" />
|
💬 Team Chat
|
||||||
Team Chat
|
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
{team.has_submission && (
|
{team.has_submission && (
|
||||||
<Link to={`/teams/${teamId}/submission`}>
|
<Link to={`/teams/${teamId}/submission`}>
|
||||||
<Button className="w-full" variant="secondary">
|
<Button className="w-full" variant="secondary">
|
||||||
<Icon icon="mdi:file-document" className="inline-block mr-2" />
|
📄 View Submission
|
||||||
View Submission
|
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
{!team.has_submission && !isTeamFeaturesClosed && (
|
|
||||||
<Button
|
|
||||||
className="w-full bg-red-600 hover:bg-red-700 text-white"
|
|
||||||
onClick={() => setShowLeaveModal(true)}
|
|
||||||
>
|
|
||||||
<Icon icon="mdi:exit-run" className="inline-block mr-2" />
|
|
||||||
Leave Team
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Warning for single member teams */}
|
|
||||||
{members.length === 1 && !team.has_submission && isMember && (
|
|
||||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 md:p-6">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<span className="text-3xl">⚠️</span>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-amber-900 dark:text-amber-400">
|
|
||||||
Team Needs More Members
|
|
||||||
</h3>
|
|
||||||
<p className="text-amber-700 dark:text-amber-300 text-sm">
|
|
||||||
Your team needs at least 2 members to submit a project. Invite someone or wait for join requests!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -796,110 +696,6 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Leave Team Confirmation Modal */}
|
|
||||||
{showLeaveModal && (
|
|
||||||
<div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
|
|
||||||
<div className="text-center mb-6">
|
|
||||||
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<Icon
|
|
||||||
icon="mdi:exit-run"
|
|
||||||
className="text-3xl text-red-600 dark:text-red-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
||||||
Leave Team?
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
Are you sure you want to leave <strong>{team?.name}</strong>?
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
|
|
||||||
<p className="text-sm text-amber-800 dark:text-amber-300 font-sans">
|
|
||||||
<strong>Warning:</strong> If you leave, you will need to request to join again or be re-invited by the team leader.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-3">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
className="flex-1"
|
|
||||||
onClick={() => setShowLeaveModal(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleLeaveTeam}
|
|
||||||
className="flex-1 bg-red-600 hover:bg-red-700"
|
|
||||||
disabled={isLeaving}
|
|
||||||
>
|
|
||||||
{isLeaving ? 'Leaving...' : 'Leave Team'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Delete Team Confirmation Modal */}
|
|
||||||
{showDeleteModal && (
|
|
||||||
<div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
|
|
||||||
<div className="text-center mb-6">
|
|
||||||
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<Icon
|
|
||||||
icon="mdi:delete-alert"
|
|
||||||
className="text-3xl text-red-600 dark:text-red-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
||||||
Delete Team?
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
This action is <strong className="text-red-600 dark:text-red-400">permanent</strong> and cannot be undone.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
|
|
||||||
<p className="text-sm text-red-800 dark:text-red-300 font-sans">
|
|
||||||
<strong>Warning:</strong> All team data, chat messages, and submissions will be permanently deleted.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mb-6">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Type <span className="font-bold text-red-600 dark:text-red-400">{team?.name}</span> to confirm:
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={deleteConfirmText}
|
|
||||||
onChange={(e) => setDeleteConfirmText(e.target.value)}
|
|
||||||
placeholder="Type team name here"
|
|
||||||
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-3">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
className="flex-1"
|
|
||||||
onClick={() => {
|
|
||||||
setShowDeleteModal(false);
|
|
||||||
setDeleteConfirmText('');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleDeleteTeam}
|
|
||||||
className="flex-1 bg-red-600 hover:bg-red-700"
|
|
||||||
disabled={isDeleting || deleteConfirmText !== team?.name}
|
|
||||||
>
|
|
||||||
{isDeleting ? 'Deleting...' : 'Delete Team'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { FC, ReactElement } from 'react';
|
|||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||||
import { useNavigate, useParams } from 'react-router';
|
import { useNavigate, useParams } from 'react-router';
|
||||||
import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
|
import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
|
||||||
import { encodeCertificateId } from '../../../../utils/certificate';
|
|
||||||
|
|
||||||
const SubmissionViewPage: FC = (): ReactElement => {
|
const SubmissionViewPage: FC = (): ReactElement => {
|
||||||
const { teamId } = useParams<{ teamId: string }>();
|
const { teamId } = useParams<{ teamId: string }>();
|
||||||
@@ -16,18 +15,18 @@ const SubmissionViewPage: FC = (): ReactElement => {
|
|||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
<div className="text-gray-600 dark:text-gray-400">Loading submission...</div>
|
<div className="text-gray-600 dark:text-neutral-400">Loading submission...</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!submission) {
|
if (!submission) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
<div className="text-6xl mb-4">📄</div>
|
<div className="text-6xl mb-4">📄</div>
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Submission Yet</h2>
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">No Submission Yet</h2>
|
||||||
<p className="text-gray-600 dark:text-gray-400 mb-4">Your team hasn't submitted a project</p>
|
<p className="text-gray-600 dark:text-neutral-400 mb-4">Your team hasn't submitted a project</p>
|
||||||
<Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
|
<Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -44,13 +43,13 @@ const SubmissionViewPage: FC = (): ReactElement => {
|
|||||||
: 'Not submitted';
|
: 'Not submitted';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
<div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
|
<div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-700">
|
||||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Project Submission</h1>
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Project Submission</h1>
|
||||||
<p className="text-gray-600 dark:text-gray-400 mt-1">{team?.name}</p>
|
<p className="text-gray-600 dark:text-neutral-400 mt-1">{team?.name}</p>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
|
<Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
|
||||||
Back to Team
|
Back to Team
|
||||||
@@ -61,78 +60,24 @@ const SubmissionViewPage: FC = (): ReactElement => {
|
|||||||
|
|
||||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
{/* Status Banner */}
|
{/* Status Banner */}
|
||||||
{submission.status === 'submitted' ? (
|
<div className="bg-green-50 dark:bg-green-900/20 border border-green-500 rounded-lg p-6 mb-6">
|
||||||
<div className="bg-green-50 dark:bg-green-900/20 border border-green-500 rounded-lg p-6 mb-6">
|
<div className="flex items-center space-x-3">
|
||||||
<div className="flex items-center space-x-3">
|
<span className="text-4xl">✅</span>
|
||||||
<span className="text-4xl">✅</span>
|
<div>
|
||||||
<div>
|
<h3 className="font-bold text-green-900 dark:text-green-100 text-lg">Project Submitted Successfully</h3>
|
||||||
<h3 className="font-bold text-green-900 dark:text-green-100 text-lg">Project Submitted Successfully</h3>
|
<p className="text-green-700 dark:text-green-300 text-sm">
|
||||||
<p className="text-green-700 dark:text-green-300 text-sm">
|
Submitted on {submittedDate}
|
||||||
Submitted on {submittedDate}
|
</p>
|
||||||
</p>
|
<p className="text-green-600 dark:text-green-400 text-xs mt-1">
|
||||||
<p className="text-green-600 dark:text-green-400 text-xs mt-1">
|
This submission is now read-only and cannot be edited
|
||||||
This submission is now read-only and cannot be edited
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : submission.status === 'pending_verification' ? (
|
</div>
|
||||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-500 rounded-lg p-6 mb-6">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<span className="text-4xl">⏳</span>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-yellow-900 dark:text-yellow-100 text-lg">Submission Pending Verification</h3>
|
|
||||||
<p className="text-yellow-700 dark:text-yellow-300 text-sm">
|
|
||||||
Your submission is being processed
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-500 rounded-lg p-6 mb-6">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<span className="text-4xl">📝</span>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-orange-900 dark:text-orange-100 text-lg">Draft Submission</h3>
|
|
||||||
<p className="text-orange-700 dark:text-orange-300 text-sm">
|
|
||||||
This submission is still in draft and has not been finalized
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Certificate Banner - Only show when submission is submitted */}
|
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden">
|
||||||
{submission.status === 'submitted' && (
|
|
||||||
<div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-lg p-6 mb-6">
|
|
||||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
||||||
<div className="flex items-center space-x-3 flex-1 min-w-0">
|
|
||||||
<span className="text-4xl shrink-0">🏆</span>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
|
|
||||||
View Your Certificate
|
|
||||||
</h3>
|
|
||||||
<p className="text-amber-700 dark:text-amber-300 text-sm">
|
|
||||||
Congratulations! Your certificate is ready to download and share.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={async () => {
|
|
||||||
const certId = await encodeCertificateId(teamId || '', submission.id);
|
|
||||||
navigate(`/certificate/${encodeURIComponent(certId)}`);
|
|
||||||
}}
|
|
||||||
className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
Get Certificate
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden">
|
|
||||||
{/* Project Header */}
|
{/* Project Header */}
|
||||||
<div className="bg-linear-to-r from-blue-600 to-blue-800 text-white p-8">
|
<div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8">
|
||||||
<h2 className="text-3xl font-bold mb-2">{submission.project_name}</h2>
|
<h2 className="text-3xl font-bold mb-2">{submission.project_name}</h2>
|
||||||
<p className="text-blue-100">Team: {team?.name}</p>
|
<p className="text-blue-100">Team: {team?.name}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -142,8 +87,8 @@ const SubmissionViewPage: FC = (): ReactElement => {
|
|||||||
{/* Description */}
|
{/* Description */}
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Project Description</h3>
|
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Project Description</h3>
|
||||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
|
<div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4">
|
||||||
<p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{submission.description}</p>
|
<p className="text-gray-700 dark:text-neutral-300 whitespace-pre-wrap">{submission.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -179,6 +124,21 @@ const SubmissionViewPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Presentation URL */}
|
||||||
|
{submission.presentation_url && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">Presentation</h3>
|
||||||
|
<a
|
||||||
|
href={submission.presentation_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center space-x-2 text-blue-600 dark:text-primary-400 hover:text-blue-800 dark:hover:text-primary-300"
|
||||||
|
>
|
||||||
|
<span>📊</span>
|
||||||
|
<span className="break-all">{submission.presentation_url}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Screenshots */}
|
{/* Screenshots */}
|
||||||
@@ -199,7 +159,7 @@ const SubmissionViewPage: FC = (): ReactElement => {
|
|||||||
<img
|
<img
|
||||||
src={url}
|
src={url}
|
||||||
alt={`Screenshot ${index + 1}`}
|
alt={`Screenshot ${index + 1}`}
|
||||||
className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
|
className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 dark:border-neutral-700 hover:border-blue-500 dark:hover:border-primary-500 transition-colors cursor-pointer"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
@@ -208,31 +168,21 @@ const SubmissionViewPage: FC = (): ReactElement => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Submission Info */}
|
{/* Submission Info */}
|
||||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border-t-4 border-blue-600 dark:border-primary-500">
|
<div className="bg-gray-50 dark:bg-neutral-800 rounded-lg p-4 border-t-4 border-blue-600 dark:border-primary-500">
|
||||||
<h3 className="text-sm font-bold text-gray-900 dark:text-white mb-2">Submission Information</h3>
|
<h3 className="text-sm font-bold text-gray-900 dark:text-white mb-2">Submission Information</h3>
|
||||||
<div className="grid gap-2 text-sm">
|
<div className="grid gap-2 text-sm">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-gray-600 dark:text-gray-400">Status:</span>
|
<span className="text-gray-600 dark:text-neutral-400">Status:</span>
|
||||||
<span className={`font-medium ${
|
<span className="font-medium text-green-600 dark:text-green-400">
|
||||||
submission.status === 'submitted'
|
{submission.status === 'submitted' ? '✓ Submitted' : 'Draft'}
|
||||||
? 'text-green-600 dark:text-green-400'
|
|
||||||
: submission.status === 'pending_verification'
|
|
||||||
? 'text-yellow-600 dark:text-yellow-400'
|
|
||||||
: 'text-orange-600 dark:text-orange-400'
|
|
||||||
}`}>
|
|
||||||
{submission.status === 'submitted'
|
|
||||||
? '✓ Submitted'
|
|
||||||
: submission.status === 'pending_verification'
|
|
||||||
? '⏳ Pending Verification'
|
|
||||||
: '📝 Draft'}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-gray-600 dark:text-gray-400">Submitted:</span>
|
<span className="text-gray-600 dark:text-neutral-400">Submitted:</span>
|
||||||
<span className="font-medium text-gray-900 dark:text-white">{submittedDate}</span>
|
<span className="font-medium text-gray-900 dark:text-white">{submittedDate}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-gray-600 dark:text-gray-400">Submission ID:</span>
|
<span className="text-gray-600 dark:text-neutral-400">Submission ID:</span>
|
||||||
<span className="font-medium text-gray-900 dark:text-white font-mono text-xs">
|
<span className="font-medium text-gray-900 dark:text-white font-mono text-xs">
|
||||||
{submission.id}
|
{submission.id}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { FC, ReactElement, useState, useEffect } from 'react';
|
import { FC, ReactElement, useState } from 'react';
|
||||||
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
||||||
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
|
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
|
||||||
import { useNavigate, useParams } from 'react-router';
|
import { useNavigate, useParams } from 'react-router';
|
||||||
@@ -13,58 +13,13 @@ import {
|
|||||||
useAuthStore,
|
useAuthStore,
|
||||||
} from '@imphnen-frontend-service/service';
|
} from '@imphnen-frontend-service/service';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
|
|
||||||
const MIN_TEAM_MEMBERS = 2; // Minimum members required to submit (including leader)
|
|
||||||
const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
|
|
||||||
|
|
||||||
// Submission deadline: 2025-12-07 23:59:00 WIB (UTC+7)
|
|
||||||
const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
|
|
||||||
|
|
||||||
const SubmitProjectPage: FC = (): ReactElement => {
|
const SubmitProjectPage: FC = (): ReactElement => {
|
||||||
const { teamId } = useParams<{ teamId: string }>();
|
const { teamId } = useParams<{ teamId: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { session } = useAuthStore();
|
const { session } = useAuthStore();
|
||||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||||
const [confirmText, setConfirmText] = useState('');
|
|
||||||
const [screenshots, setScreenshots] = useState<string[]>([]);
|
const [screenshots, setScreenshots] = useState<string[]>([]);
|
||||||
const [timeLeft, setTimeLeft] = useState<{
|
|
||||||
days: number;
|
|
||||||
hours: number;
|
|
||||||
minutes: number;
|
|
||||||
seconds: number;
|
|
||||||
} | null>(null);
|
|
||||||
|
|
||||||
// Check if deadline passed
|
|
||||||
const isDeadlinePassed = new Date() >= SUBMISSION_DEADLINE;
|
|
||||||
|
|
||||||
// Countdown timer
|
|
||||||
useEffect(() => {
|
|
||||||
if (isDeadlinePassed) return;
|
|
||||||
|
|
||||||
const calculateTimeLeft = () => {
|
|
||||||
const now = new Date();
|
|
||||||
const difference = SUBMISSION_DEADLINE.getTime() - now.getTime();
|
|
||||||
|
|
||||||
if (difference <= 0) {
|
|
||||||
setTimeLeft(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
|
||||||
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
|
|
||||||
const minutes = Math.floor((difference / 1000 / 60) % 60);
|
|
||||||
const seconds = Math.floor((difference / 1000) % 60);
|
|
||||||
|
|
||||||
setTimeLeft({ days, hours, minutes, seconds });
|
|
||||||
};
|
|
||||||
|
|
||||||
calculateTimeLeft();
|
|
||||||
const timer = setInterval(calculateTimeLeft, 1000);
|
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, [isDeadlinePassed]);
|
|
||||||
|
|
||||||
const { data: teamData } = useTeamById(teamId || '');
|
const { data: teamData } = useTeamById(teamId || '');
|
||||||
const { data: submissionData } = useTeamSubmission(teamId || '', !!teamId);
|
const { data: submissionData } = useTeamSubmission(teamId || '', !!teamId);
|
||||||
@@ -76,8 +31,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
const currentUserId = session?.user?.id;
|
const currentUserId = session?.user?.id;
|
||||||
const isLeader = currentUserId === team?.leader_id;
|
const isLeader = currentUserId === team?.leader_id;
|
||||||
const hasSubmission = !!submissionData?.data;
|
const hasSubmission = !!submissionData?.data;
|
||||||
const memberCount = team?.members?.length || 0;
|
|
||||||
const hasEnoughMembers = memberCount >= MIN_TEAM_MEMBERS;
|
|
||||||
|
|
||||||
const form = useForm<TProjectSubmissionForm>({
|
const form = useForm<TProjectSubmissionForm>({
|
||||||
resolver: zodResolver(projectSubmissionSchema),
|
resolver: zodResolver(projectSubmissionSchema),
|
||||||
@@ -125,64 +78,12 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show deadline passed screen
|
|
||||||
if (isDeadlinePassed) {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<Icon
|
|
||||||
icon="mdi:clock-alert"
|
|
||||||
className="text-3xl text-red-600 dark:text-red-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
||||||
Submission Closed
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
Project submissions are no longer accepted.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
The submission deadline was December 7, 2025 at 23:59 WIB.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => navigate(`/teams/${teamId}`)}
|
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Back to Team
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => navigate('/dashboard')}
|
|
||||||
className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Back to Dashboard
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleScreenshotUpload = async (
|
const handleScreenshotUpload = async (
|
||||||
e: React.ChangeEvent<HTMLInputElement>
|
e: React.ChangeEvent<HTMLInputElement>
|
||||||
) => {
|
) => {
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
if (!files) return;
|
if (!files) return;
|
||||||
|
|
||||||
// Validate file sizes
|
|
||||||
const oversizedFiles = Array.from(files).filter(file => file.size > MAX_FILE_SIZE);
|
|
||||||
if (oversizedFiles.length > 0) {
|
|
||||||
toast.error(`${oversizedFiles.length} file(s) are too large. Maximum size is 2MB per file.`);
|
|
||||||
e.target.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const uploadPromises = Array.from(files).map((file) => uploadFile(file));
|
const uploadPromises = Array.from(files).map((file) => uploadFile(file));
|
||||||
const results = await Promise.all(uploadPromises);
|
const results = await Promise.all(uploadPromises);
|
||||||
@@ -190,7 +91,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
setScreenshots([...screenshots, ...urls]);
|
setScreenshots([...screenshots, ...urls]);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to upload screenshots:', error);
|
console.error('Failed to upload screenshots:', error);
|
||||||
toast.error('Failed to upload screenshots. Please try again.');
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -222,76 +122,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
{/* Countdown Timer */}
|
|
||||||
{timeLeft && (
|
|
||||||
<div className="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6 mb-6">
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<span className="text-3xl">⏰</span>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="font-bold text-blue-900 dark:text-blue-100 text-lg">
|
|
||||||
Submission Deadline
|
|
||||||
</h3>
|
|
||||||
<p className="text-blue-800 dark:text-blue-200 mt-2 text-sm font-sans">
|
|
||||||
Submissions close on December 7, 2025 at 23:59 WIB
|
|
||||||
</p>
|
|
||||||
<div className="mt-4 grid grid-cols-4 gap-4">
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
||||||
{timeLeft.days}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
Days
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
||||||
{timeLeft.hours.toString().padStart(2, '0')}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
Hours
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
||||||
{timeLeft.minutes.toString().padStart(2, '0')}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
Minutes
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
||||||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
||||||
{timeLeft.seconds.toString().padStart(2, '0')}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
Seconds
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Minimum Members Warning */}
|
|
||||||
{!hasEnoughMembers && (
|
|
||||||
<div className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-500 rounded-lg p-6 mb-6">
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<span className="text-3xl">👥</span>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
|
|
||||||
Team Members Required
|
|
||||||
</h3>
|
|
||||||
<p className="text-amber-800 dark:text-amber-200 mt-2 text-sm font-sans">
|
|
||||||
Your team needs at least <strong>{MIN_TEAM_MEMBERS} members</strong> to submit a project.
|
|
||||||
Currently you have <strong>{memberCount} member{memberCount !== 1 ? 's' : ''}</strong>.
|
|
||||||
Please invite more members to your team before submitting.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Warning Banner */}
|
{/* Warning Banner */}
|
||||||
<div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-lg p-6 mb-6">
|
<div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-500 rounded-lg p-6 mb-6">
|
||||||
<div className="flex items-start space-x-3">
|
<div className="flex items-start space-x-3">
|
||||||
@@ -335,9 +165,6 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
<label className="block text-[15px] font-medium text-gray-700 dark:text-gray-300">
|
<label className="block text-[15px] font-medium text-gray-700 dark:text-gray-300">
|
||||||
Project Description <span className="text-red-500">*</span>
|
Project Description <span className="text-red-500">*</span>
|
||||||
</label>
|
</label>
|
||||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
|
||||||
Describe your project, its features, and what problem it solves. You can also paste your demo video link here.
|
|
||||||
</p>
|
|
||||||
<Controller
|
<Controller
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="description"
|
name="description"
|
||||||
@@ -345,7 +172,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
<div>
|
<div>
|
||||||
<Textarea
|
<Textarea
|
||||||
{...field}
|
{...field}
|
||||||
placeholder="Describe your project, its features, and what problem it solves... You can paste your demo video link (YouTube, Loom, etc.) here as well."
|
placeholder="Describe your project, its features, and what problem it solves..."
|
||||||
rows={6}
|
rows={6}
|
||||||
className="w-full"
|
className="w-full"
|
||||||
size="lg"
|
size="lg"
|
||||||
@@ -381,6 +208,16 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
size="lg"
|
size="lg"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Presentation URL */}
|
||||||
|
<ControlledInputField
|
||||||
|
control={form.control}
|
||||||
|
label="Presentation URL (Optional)"
|
||||||
|
placeholder="https://slides.com/your-presentation or Google Drive link"
|
||||||
|
name="presentation_url"
|
||||||
|
type="url"
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Screenshots */}
|
{/* Screenshots */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-label1 font-medium text-neutral-800 dark:text-gray-300">
|
<label className="block text-label1 font-medium text-neutral-800 dark:text-gray-300">
|
||||||
@@ -410,7 +247,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
Click to upload screenshots
|
Click to upload screenshots
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1 font-sans">
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1 font-sans">
|
||||||
PNG, JPG. Max 2MB each
|
PNG, JPG up to 5MB each
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
@@ -437,16 +274,11 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
disabled={!form.formState.isValid || isUploading || !hasEnoughMembers}
|
disabled={!form.formState.isValid || isUploading}
|
||||||
>
|
>
|
||||||
Review & Submit
|
Review & Submit
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{!hasEnoughMembers && (
|
|
||||||
<p className="text-center text-sm text-amber-600 dark:text-amber-400 mt-2">
|
|
||||||
You need at least {MIN_TEAM_MEMBERS} team members to submit
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -466,7 +298,7 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-6">
|
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-6">
|
||||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
||||||
By submitting, you confirm that:
|
By clicking "Submit Project", you confirm that:
|
||||||
</p>
|
</p>
|
||||||
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
||||||
<li>✓ All information is correct and complete</li>
|
<li>✓ All information is correct and complete</li>
|
||||||
@@ -475,35 +307,19 @@ const SubmitProjectPage: FC = (): ReactElement => {
|
|||||||
<li>✓ Your team agrees with this submission</li>
|
<li>✓ Your team agrees with this submission</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-6">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Type <span className="font-bold text-red-600 dark:text-red-400">SUBMIT</span> to confirm:
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={confirmText}
|
|
||||||
onChange={(e) => setConfirmText(e.target.value)}
|
|
||||||
placeholder="Type SUBMIT here"
|
|
||||||
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-3">
|
<div className="flex space-x-3">
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
onClick={() => {
|
onClick={() => setShowConfirmModal(false)}
|
||||||
setShowConfirmModal(false);
|
|
||||||
setConfirmText('');
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Go Back
|
Go Back
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={onSubmit}
|
onClick={onSubmit}
|
||||||
className="flex-1 bg-red-600 hover:bg-red-700"
|
className="flex-1 bg-red-600 hover:bg-red-700"
|
||||||
disabled={isSubmitting || confirmText !== 'SUBMIT'}
|
disabled={isSubmitting}
|
||||||
>
|
>
|
||||||
{isSubmitting ? 'Submitting...' : 'Submit Project'}
|
{isSubmitting ? 'Submitting...' : 'Submit Project'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { FC, ReactElement, useState, useEffect, useCallback } from 'react';
|
import { FC, ReactElement, useState, useEffect } from 'react';
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||||
import { Link, useNavigate, useSearchParams } from 'react-router';
|
import { Link, useNavigate } from 'react-router';
|
||||||
import {
|
import {
|
||||||
useTeams,
|
useTeams,
|
||||||
useJoinTeam,
|
useJoinTeam,
|
||||||
@@ -14,193 +14,26 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
|||||||
import { CitySelect } from '../../../components/city-select';
|
import { CitySelect } from '../../../components/city-select';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
|
|
||||||
const DEFAULT_PER_PAGE = 12;
|
|
||||||
const PER_PAGE_OPTIONS = [6, 12, 24, 48];
|
|
||||||
|
|
||||||
// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
|
|
||||||
const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
|
|
||||||
|
|
||||||
// Member filter options
|
|
||||||
const MEMBER_FILTER_OPTIONS = [
|
|
||||||
{ label: 'All Teams', value: '', minMembers: undefined, maxMembers: undefined },
|
|
||||||
{ label: 'Looking for Members (1-4)', value: 'looking', minMembers: 1, maxMembers: 4 },
|
|
||||||
{ label: '1 Member', value: '1', minMembers: 1, maxMembers: 1 },
|
|
||||||
{ label: '2 Members', value: '2', minMembers: 2, maxMembers: 2 },
|
|
||||||
{ label: '3 Members', value: '3', minMembers: 3, maxMembers: 3 },
|
|
||||||
{ label: '4 Members', value: '4', minMembers: 4, maxMembers: 4 },
|
|
||||||
{ label: '5 Members (Full)', value: '5', minMembers: 5, maxMembers: 5 },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Submission status filter options
|
|
||||||
const SUBMISSION_FILTER_OPTIONS = [
|
|
||||||
{ label: 'All Teams', value: '' },
|
|
||||||
{ label: 'Submitted', value: 'true' },
|
|
||||||
{ label: 'Not Submitted', value: 'false' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// Skeleton card component for loading state
|
|
||||||
const TeamCardSkeleton: FC = () => (
|
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden flex flex-col border dark:border-gray-800 animate-pulse">
|
|
||||||
<div className="w-full aspect-3/1 bg-gray-200 dark:bg-gray-700" />
|
|
||||||
<div className="p-6 flex flex-col flex-1">
|
|
||||||
<div className="flex items-center space-x-3 mb-3">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700" />
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="h-5 w-32 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
|
|
||||||
<div className="h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2 mb-4 flex-1">
|
|
||||||
<div className="h-4 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
|
||||||
<div className="h-4 w-5/6 bg-gray-200 dark:bg-gray-700 rounded" />
|
|
||||||
<div className="h-4 w-4/6 bg-gray-200 dark:bg-gray-700 rounded" />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3 mt-auto">
|
|
||||||
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
|
||||||
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const BrowseTeamsPage: FC = (): ReactElement => {
|
const BrowseTeamsPage: FC = (): ReactElement => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||||
// Check if team features are closed
|
const [selectedCity, setSelectedCity] = useState('');
|
||||||
const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
|
|
||||||
|
|
||||||
// Initialize state from URL params
|
|
||||||
const initialPage = parseInt(searchParams.get('page') || '1', 10);
|
|
||||||
const initialPerPage = parseInt(
|
|
||||||
searchParams.get('per_page') || String(DEFAULT_PER_PAGE),
|
|
||||||
10
|
|
||||||
);
|
|
||||||
const initialSearch = searchParams.get('search') || '';
|
|
||||||
const initialCity = searchParams.get('city') || '';
|
|
||||||
const initialMembers = searchParams.get('members') || '';
|
|
||||||
const initialSubmission = searchParams.get('submission') || '';
|
|
||||||
|
|
||||||
const [searchTerm, setSearchTerm] = useState(initialSearch);
|
|
||||||
const [debouncedSearch, setDebouncedSearch] = useState(initialSearch);
|
|
||||||
const [selectedCity, setSelectedCity] = useState(initialCity);
|
|
||||||
const [selectedMembers, setSelectedMembers] = useState(initialMembers);
|
|
||||||
const [selectedSubmission, setSelectedSubmission] = useState(initialSubmission);
|
|
||||||
const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
|
const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
|
||||||
const [showJoinModal, setShowJoinModal] = useState(false);
|
const [showJoinModal, setShowJoinModal] = useState(false);
|
||||||
const [currentPage, setCurrentPage] = useState(
|
|
||||||
PER_PAGE_OPTIONS.includes(initialPerPage) ? initialPage : 1
|
|
||||||
);
|
|
||||||
const [perPage, setPerPage] = useState(
|
|
||||||
PER_PAGE_OPTIONS.includes(initialPerPage) ? initialPerPage : DEFAULT_PER_PAGE
|
|
||||||
);
|
|
||||||
|
|
||||||
// Update URL when pagination state changes
|
// Debounce search term
|
||||||
const updateUrlParams = useCallback(
|
|
||||||
(params: {
|
|
||||||
page?: number;
|
|
||||||
per_page?: number;
|
|
||||||
search?: string;
|
|
||||||
city?: string;
|
|
||||||
members?: string;
|
|
||||||
submission?: string;
|
|
||||||
}) => {
|
|
||||||
const newParams = new URLSearchParams(searchParams);
|
|
||||||
|
|
||||||
if (params.page !== undefined) {
|
|
||||||
if (params.page === 1) {
|
|
||||||
newParams.delete('page');
|
|
||||||
} else {
|
|
||||||
newParams.set('page', String(params.page));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.per_page !== undefined) {
|
|
||||||
if (params.per_page === DEFAULT_PER_PAGE) {
|
|
||||||
newParams.delete('per_page');
|
|
||||||
} else {
|
|
||||||
newParams.set('per_page', String(params.per_page));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.search !== undefined) {
|
|
||||||
if (params.search === '') {
|
|
||||||
newParams.delete('search');
|
|
||||||
} else {
|
|
||||||
newParams.set('search', params.search);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.city !== undefined) {
|
|
||||||
if (params.city === '') {
|
|
||||||
newParams.delete('city');
|
|
||||||
} else {
|
|
||||||
newParams.set('city', params.city);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.members !== undefined) {
|
|
||||||
if (params.members === '') {
|
|
||||||
newParams.delete('members');
|
|
||||||
} else {
|
|
||||||
newParams.set('members', params.members);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.submission !== undefined) {
|
|
||||||
if (params.submission === '') {
|
|
||||||
newParams.delete('submission');
|
|
||||||
} else {
|
|
||||||
newParams.set('submission', params.submission);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setSearchParams(newParams, { replace: true });
|
|
||||||
},
|
|
||||||
[searchParams, setSearchParams]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Debounce search term and reset page
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
setDebouncedSearch(searchTerm);
|
setDebouncedSearch(searchTerm);
|
||||||
if (searchTerm !== debouncedSearch) {
|
|
||||||
setCurrentPage(1);
|
|
||||||
updateUrlParams({ search: searchTerm, page: 1 });
|
|
||||||
}
|
|
||||||
}, 300);
|
}, 300);
|
||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, [searchTerm]);
|
}, [searchTerm]);
|
||||||
|
|
||||||
// Update URL when city filter changes
|
const { data: teamsData, isLoading } = useTeams({
|
||||||
useEffect(() => {
|
|
||||||
if (selectedCity !== initialCity) {
|
|
||||||
setCurrentPage(1);
|
|
||||||
updateUrlParams({ city: selectedCity, page: 1 });
|
|
||||||
}
|
|
||||||
}, [selectedCity]);
|
|
||||||
|
|
||||||
// Get member filter values
|
|
||||||
const memberFilter = MEMBER_FILTER_OPTIONS.find(
|
|
||||||
(opt) => opt.value === selectedMembers
|
|
||||||
);
|
|
||||||
|
|
||||||
// Convert submission filter value to boolean
|
|
||||||
const hasSubmissionFilter = selectedSubmission === 'true' ? true : selectedSubmission === 'false' ? false : undefined;
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: teamsData,
|
|
||||||
isLoading,
|
|
||||||
isFetching,
|
|
||||||
} = useTeams({
|
|
||||||
page: currentPage,
|
|
||||||
limit: perPage,
|
|
||||||
search: debouncedSearch,
|
search: debouncedSearch,
|
||||||
city: selectedCity || undefined,
|
city: selectedCity || undefined,
|
||||||
visibility: ETeamVisibility.PUBLIC,
|
visibility: ETeamVisibility.PUBLIC,
|
||||||
minMembers: memberFilter?.minMembers,
|
|
||||||
maxMembers: memberFilter?.maxMembers,
|
|
||||||
hasSubmission: hasSubmissionFilter,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: myTeamsData } = useMyTeams();
|
const { data: myTeamsData } = useMyTeams();
|
||||||
@@ -211,9 +44,7 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
|||||||
mode: 'all',
|
mode: 'all',
|
||||||
});
|
});
|
||||||
|
|
||||||
const teams = teamsData?.teams || [];
|
const teams = teamsData?.data || [];
|
||||||
const totalPages = teamsData?.totalPages || 1;
|
|
||||||
const total = teamsData?.total || 0;
|
|
||||||
const myTeams = myTeamsData?.data || [];
|
const myTeams = myTeamsData?.data || [];
|
||||||
|
|
||||||
// Helper function to check if user is a member of a team
|
// Helper function to check if user is a member of a team
|
||||||
@@ -239,43 +70,6 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Generate page numbers to display
|
|
||||||
const getPageNumbers = () => {
|
|
||||||
const pages: (number | string)[] = [];
|
|
||||||
const maxVisible = 5;
|
|
||||||
|
|
||||||
if (totalPages <= maxVisible + 2) {
|
|
||||||
// Show all pages if total is small
|
|
||||||
for (let i = 1; i <= totalPages; i++) {
|
|
||||||
pages.push(i);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Always show first page
|
|
||||||
pages.push(1);
|
|
||||||
|
|
||||||
if (currentPage > 3) {
|
|
||||||
pages.push('...');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show pages around current
|
|
||||||
const start = Math.max(2, currentPage - 1);
|
|
||||||
const end = Math.min(totalPages - 1, currentPage + 1);
|
|
||||||
|
|
||||||
for (let i = start; i <= end; i++) {
|
|
||||||
pages.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentPage < totalPages - 2) {
|
|
||||||
pages.push('...');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Always show last page
|
|
||||||
pages.push(totalPages);
|
|
||||||
}
|
|
||||||
|
|
||||||
return pages;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -300,7 +94,7 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
|||||||
{/* Filters */}
|
{/* Filters */}
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||||
<div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-sm mb-6 border dark:border-gray-800">
|
<div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-sm mb-6 border dark:border-gray-800">
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
Search Teams
|
Search Teams
|
||||||
@@ -323,63 +117,13 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
|||||||
placeholder="All Cities (search to filter...)"
|
placeholder="All Cities (search to filter...)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Filter by Members
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={selectedMembers}
|
|
||||||
onChange={(e) => {
|
|
||||||
setSelectedMembers(e.target.value);
|
|
||||||
setCurrentPage(1);
|
|
||||||
updateUrlParams({ members: e.target.value, page: 1 });
|
|
||||||
}}
|
|
||||||
className="w-full h-[42px] px-3 border border-gray-300 dark:border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
|
||||||
>
|
|
||||||
{MEMBER_FILTER_OPTIONS.map((option) => (
|
|
||||||
<option key={option.value} value={option.value}>
|
|
||||||
{option.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Submission Status
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={selectedSubmission}
|
|
||||||
onChange={(e) => {
|
|
||||||
setSelectedSubmission(e.target.value);
|
|
||||||
setCurrentPage(1);
|
|
||||||
updateUrlParams({ submission: e.target.value, page: 1 });
|
|
||||||
}}
|
|
||||||
className="w-full h-[42px] px-3 border border-gray-300 dark:border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
|
||||||
>
|
|
||||||
{SUBMISSION_FILTER_OPTIONS.map((option) => (
|
|
||||||
<option key={option.value} value={option.value}>
|
|
||||||
{option.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Teams Count */}
|
|
||||||
{!isLoading && total > 0 && (
|
|
||||||
<div className="mb-4 text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
Showing {(currentPage - 1) * perPage + 1}-
|
|
||||||
{Math.min(currentPage * perPage, total)} of {total} teams
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Teams List */}
|
{/* Teams List */}
|
||||||
{isLoading || isFetching ? (
|
{isLoading ? (
|
||||||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
<div className="text-center py-12">
|
||||||
{Array.from({ length: perPage }).map((_, index) => (
|
<p className="text-gray-600 dark:text-gray-400">Loading teams...</p>
|
||||||
<TeamCardSkeleton key={index} />
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
) : teams.length === 0 ? (
|
) : teams.length === 0 ? (
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm p-12 text-center">
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm p-12 text-center">
|
||||||
@@ -391,195 +135,85 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
{teams.map((team) => (
|
||||||
{teams.map((team: any) => (
|
<div
|
||||||
<div
|
key={team.id}
|
||||||
key={team.id}
|
className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col border dark:border-gray-800"
|
||||||
className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col border dark:border-gray-800"
|
>
|
||||||
>
|
<img
|
||||||
<img
|
src={team.banner || '/images/banner-imphnen.webp'}
|
||||||
src={team.banner || '/images/banner-imphnen.webp'}
|
alt={team.name}
|
||||||
alt={team.name}
|
className="w-full aspect-3/1 object-cover"
|
||||||
className="w-full aspect-3/1 object-cover"
|
/>
|
||||||
/>
|
<div className="p-6 flex flex-col flex-1">
|
||||||
<div className="p-6 flex flex-col flex-1">
|
<div className="flex items-center space-x-3 mb-3">
|
||||||
<div className="flex items-center space-x-3 mb-3">
|
{team.logo ? (
|
||||||
{team.logo ? (
|
<img
|
||||||
<img
|
src={team.logo}
|
||||||
src={team.logo}
|
alt={team.name}
|
||||||
alt={team.name}
|
className="w-12 h-12 rounded-full object-cover"
|
||||||
className="w-12 h-12 rounded-full object-cover"
|
/>
|
||||||
/>
|
) : (
|
||||||
) : (
|
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
||||||
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
<span className="text-gray-500 dark:text-gray-300 text-xl">
|
||||||
<span className="text-gray-500 dark:text-gray-300 text-xl">
|
<Icon icon="mdi:account-group" />
|
||||||
<Icon icon="mdi:account-group" />
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex-1 min-w-0">
|
<h3 className="text-lg font-bold text-gray-900 dark:text-white line-clamp-2 leading-tight">
|
||||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white line-clamp-1 leading-tight">
|
{team.name}
|
||||||
{team.name}
|
</h3>
|
||||||
</h3>
|
<div className="text-sm font-sans text-gray-600 dark:text-gray-400 flex gap-2">
|
||||||
<div className="text-sm font-sans text-gray-600 dark:text-gray-400 flex items-center gap-2 mt-1">
|
<p className="truncate flex-1 min-w-0 flex items-center gap-x-1">
|
||||||
{team.has_submission && (
|
<Icon icon="mdi:map-marker" />{' '}
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
|
<span>{team.city}</span>
|
||||||
<Icon icon="mdi:check-circle" className="text-sm" />
|
</p>
|
||||||
Submitted
|
<p className="whitespace-nowrap shrink-0 flex items-center gap-x-1">
|
||||||
</span>
|
<Icon icon="mdi:account-group" />{' '}
|
||||||
)}
|
{team.members?.length || 0} members
|
||||||
<p className="truncate flex-1 min-w-0 flex items-center gap-x-1">
|
</p>
|
||||||
<Icon icon="mdi:map-marker" />{' '}
|
|
||||||
<span>{team.city}</span>
|
|
||||||
</p>
|
|
||||||
<p className="whitespace-nowrap shrink-0 flex items-center gap-x-1">
|
|
||||||
<Icon icon="mdi:account-group" />{' '}
|
|
||||||
{team.member_count || 0} members
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3 font-sans flex-1">
|
</div>
|
||||||
{team.description}
|
<p className="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3 font-sans">
|
||||||
</p>
|
{team.description}
|
||||||
<div className="space-y-3 mt-auto">
|
</p>
|
||||||
{(team.member_count || 0) === 1 && !team.has_submission && (
|
<div className="space-y-3 mt-auto">
|
||||||
<div className="p-2 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
{isMyTeam(team.id) ? (
|
||||||
<p className="text-xs text-amber-700 dark:text-amber-400 flex items-center gap-1">
|
<Button
|
||||||
<Icon icon="mdi:alert" className="text-sm shrink-0" />
|
className="w-full"
|
||||||
<span>This team needs at least 2 members to submit</span>
|
variant="secondary"
|
||||||
</p>
|
onClick={() => navigate(`/teams/${team.id}`)}
|
||||||
</div>
|
>
|
||||||
)}
|
Your Team
|
||||||
{isMyTeam(team.id) ? (
|
</Button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{myTeams.length === 0 &&
|
||||||
|
(team.members?.length || 0) < 5 && (
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
onClick={() => handleJoinRequest(team.id)}
|
||||||
|
>
|
||||||
|
Request to Join
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<Button
|
<Button
|
||||||
className="w-full"
|
className="w-full"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
onClick={() => navigate(`/teams/${team.id}`)}
|
onClick={() => navigate(`/teams/${team.id}`)}
|
||||||
>
|
>
|
||||||
Your Team
|
View Team
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
</>
|
||||||
<>
|
)}
|
||||||
{myTeams.length === 0 &&
|
|
||||||
(team.member_count || 0) < 5 &&
|
|
||||||
!team.has_submission &&
|
|
||||||
!isTeamFeaturesClosed && (
|
|
||||||
<Button
|
|
||||||
className="w-full"
|
|
||||||
onClick={() => handleJoinRequest(team.id)}
|
|
||||||
>
|
|
||||||
Request to Join
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
className="w-full"
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => navigate(`/teams/${team.id}`)}
|
|
||||||
>
|
|
||||||
View Team
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pagination */}
|
|
||||||
{(totalPages > 1 || total > 6) && (
|
|
||||||
<div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => {
|
|
||||||
const newPage = Math.max(1, currentPage - 1);
|
|
||||||
setCurrentPage(newPage);
|
|
||||||
updateUrlParams({ page: newPage });
|
|
||||||
}}
|
|
||||||
disabled={currentPage === 1 || isFetching}
|
|
||||||
className="px-3"
|
|
||||||
>
|
|
||||||
<Icon icon="mdi:chevron-left" className="text-xl" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
{getPageNumbers().map((page, index) =>
|
|
||||||
typeof page === 'string' ? (
|
|
||||||
<span
|
|
||||||
key={`ellipsis-${index}`}
|
|
||||||
className="px-2 text-gray-400 dark:text-gray-500"
|
|
||||||
>
|
|
||||||
...
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
key={page}
|
|
||||||
onClick={() => {
|
|
||||||
setCurrentPage(page);
|
|
||||||
updateUrlParams({ page });
|
|
||||||
}}
|
|
||||||
disabled={isFetching}
|
|
||||||
className={`min-w-10 h-10 px-3 rounded-md text-sm font-medium transition-colors ${
|
|
||||||
currentPage === page
|
|
||||||
? 'bg-blue-600 text-white'
|
|
||||||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-300 dark:border-gray-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => {
|
|
||||||
const newPage = Math.min(totalPages, currentPage + 1);
|
|
||||||
setCurrentPage(newPage);
|
|
||||||
updateUrlParams({ page: newPage });
|
|
||||||
}}
|
|
||||||
disabled={currentPage === totalPages || isFetching}
|
|
||||||
className="px-3"
|
|
||||||
>
|
|
||||||
<Icon icon="mdi:chevron-right" className="text-xl" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
Page {currentPage} of {totalPages}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-sm text-gray-500 dark:text-gray-400">Show:</span>
|
|
||||||
<select
|
|
||||||
value={perPage}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newPerPage = Number(e.target.value);
|
|
||||||
setPerPage(newPerPage);
|
|
||||||
setCurrentPage(1);
|
|
||||||
updateUrlParams({ per_page: newPerPage, page: 1 });
|
|
||||||
}}
|
|
||||||
className="h-10 px-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
>
|
|
||||||
{PER_PAGE_OPTIONS.map((option) => (
|
|
||||||
<option key={option} value={option}>
|
|
||||||
{option}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
))}
|
||||||
</>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -5,22 +5,11 @@ import { useNavigate } from 'react-router';
|
|||||||
import { useForm, Controller } from 'react-hook-form';
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
import { teamCreateSchema, TTeamCreateForm, useCreateTeam, ETeamVisibility, useUploadFile } from '@imphnen-frontend-service/service';
|
import { teamCreateSchema, TTeamCreateForm, useCreateTeam, ETeamVisibility, useUploadFile } from '@imphnen-frontend-service/service';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
|
|
||||||
import { CitySelect } from '../../../components/city-select';
|
import { CitySelect } from '../../../components/city-select';
|
||||||
|
|
||||||
const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
|
|
||||||
|
|
||||||
// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
|
|
||||||
const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
|
|
||||||
|
|
||||||
const CreateTeamPage: FC = (): ReactElement => {
|
const CreateTeamPage: FC = (): ReactElement => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
// Check if team features are closed
|
|
||||||
const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
|
|
||||||
|
|
||||||
const [logoFile, setLogoFile] = useState<File | null>(null);
|
const [logoFile, setLogoFile] = useState<File | null>(null);
|
||||||
const [logoPreview, setLogoPreview] = useState<string>('');
|
const [logoPreview, setLogoPreview] = useState<string>('');
|
||||||
const [bannerFile, setBannerFile] = useState<File | null>(null);
|
const [bannerFile, setBannerFile] = useState<File | null>(null);
|
||||||
@@ -42,11 +31,6 @@ const CreateTeamPage: FC = (): ReactElement => {
|
|||||||
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
if (file.size > MAX_FILE_SIZE) {
|
|
||||||
toast.error('Logo image is too large. Maximum size is 2MB.');
|
|
||||||
e.target.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setLogoFile(file);
|
setLogoFile(file);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onloadend = () => {
|
reader.onloadend = () => {
|
||||||
@@ -59,11 +43,6 @@ const CreateTeamPage: FC = (): ReactElement => {
|
|||||||
const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
if (file.size > MAX_FILE_SIZE) {
|
|
||||||
toast.error('Banner image is too large. Maximum size is 2MB.');
|
|
||||||
e.target.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setBannerFile(file);
|
setBannerFile(file);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onloadend = () => {
|
reader.onloadend = () => {
|
||||||
@@ -94,67 +73,12 @@ const CreateTeamPage: FC = (): ReactElement => {
|
|||||||
banner: bannerUrl,
|
banner: bannerUrl,
|
||||||
});
|
});
|
||||||
|
|
||||||
toast.success('Team created successfully!');
|
|
||||||
navigate(`/teams/${result.data.id}`);
|
navigate(`/teams/${result.data.id}`);
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
console.error('Failed to create team:', error);
|
console.error('Failed to create team:', error);
|
||||||
|
|
||||||
// Handle specific error messages
|
|
||||||
const message = error?.message || '';
|
|
||||||
if (message.includes('413') || message.includes('length limit') || message.includes('too large')) {
|
|
||||||
toast.error('Image file is too large. Please use smaller images (max 2MB each).');
|
|
||||||
} else if (message.includes('already a member')) {
|
|
||||||
toast.error(message);
|
|
||||||
} else {
|
|
||||||
toast.error(message || 'Failed to create team. Please try again.');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Show closed screen if team features are closed
|
|
||||||
if (isTeamFeaturesClosed) {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
|
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<Icon
|
|
||||||
icon="mdi:clock-alert"
|
|
||||||
className="text-3xl text-red-600 dark:text-red-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
||||||
Team Features Closed
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
Team creation is no longer available.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
The deadline for team features was November 30, 2025 at 23:59 WIB.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => navigate('/dashboard')}
|
|
||||||
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Back to Dashboard
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => navigate('/teams/browse')}
|
|
||||||
className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
Browse Teams
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
|
<div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -195,7 +119,7 @@ const CreateTeamPage: FC = (): ReactElement => {
|
|||||||
<label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 dark:border-neutral-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-800">
|
<label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 dark:border-neutral-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-neutral-800">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<p className="text-gray-500 dark:text-neutral-400">Click to upload banner</p>
|
<p className="text-gray-500 dark:text-neutral-400">Click to upload banner</p>
|
||||||
<p className="text-xs text-gray-400 dark:text-neutral-500 mt-1">1200x400 recommended. Max 2MB</p>
|
<p className="text-xs text-gray-400 dark:text-neutral-500 mt-1">1200x400 recommended</p>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
@@ -225,33 +149,30 @@ const CreateTeamPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<label htmlFor="logo" className="cursor-pointer">
|
||||||
<label htmlFor="logo" className="cursor-pointer">
|
<span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
|
||||||
<span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
|
{logoPreview ? 'Change Logo' : 'Upload Logo'}
|
||||||
{logoPreview ? 'Change Logo' : 'Upload Logo'}
|
</span>
|
||||||
</span>
|
<input
|
||||||
<input
|
id="logo"
|
||||||
id="logo"
|
type="file"
|
||||||
type="file"
|
accept="image/*"
|
||||||
accept="image/*"
|
className="hidden"
|
||||||
className="hidden"
|
onChange={handleLogoChange}
|
||||||
onChange={handleLogoChange}
|
/>
|
||||||
/>
|
</label>
|
||||||
</label>
|
{logoPreview && (
|
||||||
{logoPreview && (
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={() => {
|
||||||
onClick={() => {
|
setLogoFile(null);
|
||||||
setLogoFile(null);
|
setLogoPreview('');
|
||||||
setLogoPreview('');
|
}}
|
||||||
}}
|
className="ml-3 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
||||||
className="ml-3 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
>
|
||||||
>
|
Remove
|
||||||
Remove
|
</button>
|
||||||
</button>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-400 dark:text-neutral-500 mt-2">Max 2MB</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,33 +6,21 @@ const UserDetailLayout: FC = (): ReactElement => {
|
|||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="flex min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
<Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
|
<Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
|
||||||
|
|
||||||
<div className="flex-1 flex flex-col overflow-auto">
|
<div className="flex-1 flex flex-col overflow-auto">
|
||||||
{/* Mobile Header with Hamburger */}
|
{/* Mobile Header with Hamburger */}
|
||||||
<div className="lg:hidden bg-white dark:bg-gray-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
|
<div className="lg:hidden bg-white dark:bg-neutral-900 border-b dark:border-neutral-700 px-4 py-3 flex items-center">
|
||||||
<button
|
<button
|
||||||
onClick={() => setSidebarOpen(true)}
|
onClick={() => setSidebarOpen(true)}
|
||||||
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
|
||||||
>
|
>
|
||||||
<svg
|
<svg className="w-6 h-6 text-gray-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
className="w-6 h-6 text-gray-600 dark:text-neutral-400"
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M4 6h16M4 12h16M4 18h16"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
|
<h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">Hackathon</h1>
|
||||||
Hackathon
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main className="flex-1 overflow-auto">
|
<main className="flex-1 overflow-auto">
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import {
|
|||||||
useUserDetailsById,
|
useUserDetailsById,
|
||||||
useTeamsByUserId,
|
useTeamsByUserId,
|
||||||
} from '@imphnen-frontend-service/service';
|
} from '@imphnen-frontend-service/service';
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
|
|
||||||
const UserProfilePage: FC = (): ReactElement => {
|
const UserProfilePage: FC = (): ReactElement => {
|
||||||
const { userId } = useParams<{ userId: string }>();
|
const { userId } = useParams<{ userId: string }>();
|
||||||
@@ -18,8 +17,8 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
<div className="text-gray-600 dark:text-gray-400">
|
<div className="text-gray-600 dark:text-neutral-400">
|
||||||
Loading user profile...
|
Loading user profile...
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +27,7 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
|
|
||||||
if (error || !user) {
|
if (error || !user) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
User not found
|
User not found
|
||||||
</h2>
|
</h2>
|
||||||
@@ -43,9 +42,9 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
<div className="min-h-screen bg-gray-50 dark:bg-neutral-950">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
|
<div className="bg-white dark:bg-neutral-900 border-b dark:border-neutral-700">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-6">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-6">
|
||||||
<div className="flex items-start justify-between">
|
<div className="flex items-start justify-between">
|
||||||
<div className="flex items-center space-x-3 md:space-x-4">
|
<div className="flex items-center space-x-3 md:space-x-4">
|
||||||
@@ -53,12 +52,12 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
<img
|
<img
|
||||||
src={user.avatar}
|
src={user.avatar}
|
||||||
alt={user.fullname}
|
alt={user.fullname}
|
||||||
className="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-lg"
|
className="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white dark:border-neutral-800 shadow-lg"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-lg">
|
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center border-4 border-white dark:border-neutral-800 shadow-lg">
|
||||||
<span className="text-gray-500 dark:text-gray-400 text-2xl md:text-3xl">
|
<span className="text-gray-500 dark:text-neutral-400 text-2xl md:text-3xl">
|
||||||
<Icon icon="mdi:account-circle" className="w-10 h-10" />
|
👤
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -66,17 +65,13 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
<h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white">
|
<h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
{user.fullname}
|
{user.fullname}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1">
|
<p className="text-sm md:text-base text-gray-600 dark:text-neutral-400 mt-1">
|
||||||
{user.email}
|
{user.email}
|
||||||
</p>
|
</p>
|
||||||
{user.location && (
|
{user.location && (
|
||||||
<div className="flex items-center space-x-4 mt-2">
|
<div className="flex items-center space-x-4 mt-2">
|
||||||
<span className="text-sm text-gray-500 dark:text-gray-500">
|
<span className="text-sm text-gray-500 dark:text-neutral-500">
|
||||||
<Icon
|
📍 {user.location}
|
||||||
icon="mdi:map-marker"
|
|
||||||
className="inline-block w-4 h-4 mr-1"
|
|
||||||
/>
|
|
||||||
{user.location}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -95,11 +90,11 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
<div className="lg:col-span-2 space-y-4 md:space-y-6">
|
<div className="lg:col-span-2 space-y-4 md:space-y-6">
|
||||||
{/* About Section */}
|
{/* About Section */}
|
||||||
{user.bio && (
|
{user.bio && (
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6 overflow-hidden">
|
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6 overflow-hidden">
|
||||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
About
|
About
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-700 dark:text-gray-300 break-all overflow-wrap-anywhere font-sans">
|
<p className="text-gray-700 dark:text-neutral-300 break-all overflow-wrap-anywhere">
|
||||||
{user.bio}
|
{user.bio}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -107,7 +102,7 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
|
|
||||||
{/* Skills Section */}
|
{/* Skills Section */}
|
||||||
{user.skills && user.skills.length > 0 && (
|
{user.skills && user.skills.length > 0 && (
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
|
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
|
||||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
Skills
|
Skills
|
||||||
</h2>
|
</h2>
|
||||||
@@ -115,7 +110,7 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
{user.skills.map((skill: string) => (
|
{user.skills.map((skill: string) => (
|
||||||
<span
|
<span
|
||||||
key={skill}
|
key={skill}
|
||||||
className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
|
className="inline-flex items-center px-4 py-2 bg-blue-600 dark:bg-primary-600 text-white rounded-lg text-sm font-medium shadow-sm hover:bg-blue-700 dark:hover:bg-primary-700 transition-colors"
|
||||||
>
|
>
|
||||||
{skill}
|
{skill}
|
||||||
</span>
|
</span>
|
||||||
@@ -124,77 +119,63 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Team Section */}
|
{/* Teams Section */}
|
||||||
{userTeams.length > 0 ? (
|
{userTeams.length > 0 ? (
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
|
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
|
||||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
Team
|
Teams ({userTeams.length})
|
||||||
</h2>
|
</h2>
|
||||||
<div className="space-y-4">
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
{userTeams.map((team: any) => (
|
{userTeams.map((team: any) => (
|
||||||
<Link
|
<Link
|
||||||
key={team.id}
|
key={team.id}
|
||||||
to={'/teams/' + team.id}
|
to={'/teams/' + team.id}
|
||||||
className="block bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden hover:shadow-lg transition-shadow border dark:border-gray-700"
|
className="bg-white dark:bg-neutral-800 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden hover:shadow-lg transition-shadow"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={team.banner || '/images/banner-imphnen.webp'}
|
src={team.banner || '/images/banner-imphnen.webp'}
|
||||||
alt={team.name}
|
alt={team.name}
|
||||||
className="w-full aspect-3/1 object-cover"
|
className="w-full h-24 object-cover"
|
||||||
/>
|
/>
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<div className="flex items-center space-x-3 mb-3">
|
<div className="flex items-center space-x-3 mb-2">
|
||||||
{team.logo ? (
|
{team.logo && (
|
||||||
<img
|
<img
|
||||||
src={team.logo}
|
src={team.logo}
|
||||||
alt={team.name}
|
alt={team.name}
|
||||||
className="w-12 h-12 rounded-full object-cover"
|
className="w-10 h-10 rounded-full object-cover"
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
|
||||||
<Icon icon="mdi:account-group" className="text-gray-500 dark:text-gray-400 text-xl" />
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="font-bold text-gray-900 dark:text-white line-clamp-1 text-lg">
|
<h3 className="font-bold text-gray-900 dark:text-white line-clamp-2">
|
||||||
{team.name}
|
{team.name}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-3 font-sans mt-1">
|
<div className="text-sm text-gray-600 dark:text-neutral-400 flex gap-2">
|
||||||
{team.has_submission && (
|
<p className="truncate flex-1 min-w-0">
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
|
📍 {team.city}
|
||||||
<Icon icon="mdi:check-circle" className="text-sm" />
|
</p>
|
||||||
Submitted
|
<p className="whitespace-nowrap shrink-0">
|
||||||
</span>
|
👥 {team.members?.length || 0} members
|
||||||
)}
|
</p>
|
||||||
{team.city && (
|
|
||||||
<span className="flex items-center gap-1 truncate">
|
|
||||||
<Icon icon="mdi:map-marker" className="shrink-0" />
|
|
||||||
<span className="truncate">{team.city}</span>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{team.description && (
|
<p className="text-gray-600 dark:text-neutral-400 text-sm line-clamp-2">
|
||||||
<p className="text-gray-600 dark:text-gray-400 text-sm line-clamp-2 font-sans">
|
{team.description}
|
||||||
{team.description}
|
</p>
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
|
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
|
||||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
Team
|
Teams
|
||||||
</h2>
|
</h2>
|
||||||
<div className="text-center py-8">
|
<div className="text-center py-8">
|
||||||
<div className="text-4xl mb-3">
|
<div className="text-4xl mb-3">👥</div>
|
||||||
<Icon icon="mdi:account-group-outline" className="inline-block text-gray-400" />
|
<p className="text-gray-600 dark:text-neutral-400">
|
||||||
</div>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
Not in any team yet
|
Not in any team yet
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -205,13 +186,13 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<div className="space-y-4 md:space-y-6">
|
<div className="space-y-4 md:space-y-6">
|
||||||
{/* Contact Info */}
|
{/* Contact Info */}
|
||||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
|
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
|
||||||
<h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
<h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
Contact Information
|
Contact Information
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
<p className="text-sm text-gray-600 dark:text-neutral-400">
|
||||||
Email
|
Email
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-900 dark:text-white font-medium">
|
<p className="text-gray-900 dark:text-white font-medium">
|
||||||
@@ -220,7 +201,7 @@ const UserProfilePage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
{user.location && (
|
{user.location && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
<p className="text-sm text-gray-600 dark:text-neutral-400">
|
||||||
Location
|
Location
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-900 dark:text-white font-medium">
|
<p className="text-gray-900 dark:text-white font-medium">
|
||||||
|
|||||||
@@ -1,318 +0,0 @@
|
|||||||
import { FC, ReactElement } from 'react';
|
|
||||||
import { useNavigate } from 'react-router';
|
|
||||||
import { useWinners } from '@imphnen-frontend-service/service';
|
|
||||||
|
|
||||||
const WinnerPage: FC = (): ReactElement => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { data, isLoading, error } = useWinners();
|
|
||||||
|
|
||||||
const winners = data?.data ?? [];
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
|
||||||
<div className="text-gray-600 dark:text-gray-400">
|
|
||||||
Loading winners...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
||||||
<div className="text-6xl mb-4">⚠️</div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
||||||
Error Loading Winners
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
||||||
Unable to load winners at this time. Please try again later.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort winners by rank
|
|
||||||
const sortedWinners = [...winners].sort((a, b) => a.rank - b.rank);
|
|
||||||
|
|
||||||
// Medal emojis for top 3
|
|
||||||
const getMedalEmoji = (rank: number) => {
|
|
||||||
switch (rank) {
|
|
||||||
case 1:
|
|
||||||
return '🥇';
|
|
||||||
case 2:
|
|
||||||
return '🥈';
|
|
||||||
case 3:
|
|
||||||
return '🥉';
|
|
||||||
default:
|
|
||||||
return '🏆';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Get rank color
|
|
||||||
const getRankColor = (rank: number) => {
|
|
||||||
switch (rank) {
|
|
||||||
case 1:
|
|
||||||
return 'from-yellow-400 to-yellow-600';
|
|
||||||
case 2:
|
|
||||||
return 'from-gray-300 to-gray-500';
|
|
||||||
case 3:
|
|
||||||
return 'from-amber-600 to-amber-800';
|
|
||||||
default:
|
|
||||||
return 'from-blue-500 to-blue-700';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-6xl mb-4">🏆</div>
|
|
||||||
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
|
|
||||||
Hackathon Winners
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
Congratulations to all the winning teams!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Winners List */}
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
||||||
{winners.length === 0 ? (
|
|
||||||
<div className="text-center py-16">
|
|
||||||
<div className="text-6xl mb-4">🎯</div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
||||||
No Winners Announced Yet
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
|
||||||
Winners will be announced here once the hackathon concludes.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-8">
|
|
||||||
{/* Top 3 Winners - Mobile View */}
|
|
||||||
<div className="md:hidden space-y-6">
|
|
||||||
{[1, 2, 3].map((position) => {
|
|
||||||
const winner = sortedWinners[position - 1];
|
|
||||||
|
|
||||||
if(!winner) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={winner.id}
|
|
||||||
className={`bg-white dark:bg-gray-800 rounded-lg p-3 shadow-lg ${
|
|
||||||
getRankColor(winner.rank).includes('yellow')
|
|
||||||
? 'border-4 border-yellow-400 dark:border-yellow-600'
|
|
||||||
: getRankColor(winner.rank).includes('gray')
|
|
||||||
? 'border-4 border-gray-400 dark:border-gray-600'
|
|
||||||
: 'border-4 border-amber-600 dark:border-amber-500'
|
|
||||||
}}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div
|
|
||||||
className={`aspect-square p-1 rounded-full bg-linear-to-br ${getRankColor(
|
|
||||||
winner.rank
|
|
||||||
)} flex items-center justify-center text-white font-bold text-2xl`}
|
|
||||||
>
|
|
||||||
<div className="text-4xl">
|
|
||||||
{getMedalEmoji(winner.rank)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{winner.team.logo && (
|
|
||||||
<img
|
|
||||||
src={winner.team.logo}
|
|
||||||
alt={`${winner.team.name} logo`}
|
|
||||||
className="w-20 h-20 rounded-full object-cover border-3 border-white dark:border-gray-700 shadow-lg"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
|
|
||||||
{winner.team.name}
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
{winner.team.city}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Top 3 Winners - Tablet/Desktop Podium View */}
|
|
||||||
<div className="hidden md:flex gap-8 items-end justify-center w-full">
|
|
||||||
{[2, 1, 3].map((position) => {
|
|
||||||
const winner = sortedWinners[position - 1];
|
|
||||||
if(!winner) return null;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={winner.id}
|
|
||||||
className="w-full max-w-xs flex flex-col items-center space-y-4"
|
|
||||||
>
|
|
||||||
<div className="text-5xl">{getMedalEmoji(winner.rank)}</div>
|
|
||||||
|
|
||||||
{/* Team Logo */}
|
|
||||||
{winner.team.logo && (
|
|
||||||
<img
|
|
||||||
src={winner.team.logo}
|
|
||||||
alt={`${winner.team.name} logo`}
|
|
||||||
className="w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-lg"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="text-center px-2">
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
||||||
{winner.team.name}
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
{winner.team.city}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Podium */}
|
|
||||||
<div
|
|
||||||
className={`${
|
|
||||||
winner.rank === 1
|
|
||||||
? 'h-42 bg-yellow-500'
|
|
||||||
: winner.rank === 2
|
|
||||||
? 'h-32 bg-gray-400'
|
|
||||||
: 'h-16 bg-amber-600'
|
|
||||||
} w-full flex items-end justify-center rounded-t-lg shadow-lg`}
|
|
||||||
>
|
|
||||||
<div className="text-white font-bold text-3xl pb-4">
|
|
||||||
#{winner.rank}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Ranks 4-23: Prize Winners */}
|
|
||||||
{sortedWinners.filter((w) => w.rank >= 4 && w.rank <= 23).length >
|
|
||||||
0 && (
|
|
||||||
<div className="mt-12">
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
|
|
||||||
Favorite
|
|
||||||
</h2>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{sortedWinners
|
|
||||||
.filter((w) => w.rank >= 4 && w.rank <= 23)
|
|
||||||
.map((winner) => (
|
|
||||||
<div
|
|
||||||
key={winner.id}
|
|
||||||
className="bg-white dark:bg-gray-800 border-2 border-gray-400 dark:border-gray-600 rounded-lg p-4 hover:shadow-lg transition-shadow"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="shrink-0">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-linear-to-br from-gray-400 to-gray-600 flex items-center justify-center text-white font-bold text-lg">
|
|
||||||
#{winner.rank}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{winner.team.logo && (
|
|
||||||
<img
|
|
||||||
src={winner.team.logo}
|
|
||||||
alt={`${winner.team.name} logo`}
|
|
||||||
className="w-16 h-16 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="font-bold text-gray-900 dark:text-white truncate">
|
|
||||||
{winner.team.name}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
{winner.team.city}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-1 mt-1">
|
|
||||||
<span className="text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 px-2 py-1 rounded-full">
|
|
||||||
🎁 Prize Winner
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Rank 24+: Remaining Participants */}
|
|
||||||
{sortedWinners.filter((w) => w.rank >= 24).length > 0 && (
|
|
||||||
<div className="mt-12">
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
|
|
||||||
All Participants
|
|
||||||
</h2>
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
|
||||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
||||||
{sortedWinners
|
|
||||||
.filter((w) => w.rank >= 24)
|
|
||||||
.map((participant) => (
|
|
||||||
<div
|
|
||||||
key={participant.id}
|
|
||||||
className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="shrink-0 w-10 text-center">
|
|
||||||
<span className="text-sm font-semibold text-gray-600 dark:text-gray-400">
|
|
||||||
#{participant.rank}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{participant.team.logo && (
|
|
||||||
<img
|
|
||||||
src={participant.team.logo}
|
|
||||||
alt={`${participant.team.name} logo`}
|
|
||||||
className="w-12 h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
|
||||||
{participant.team.name}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
{participant.team.city}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer Info */}
|
|
||||||
{winners.length > 0 && (
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
|
|
||||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
|
|
||||||
<h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">
|
|
||||||
Congratulations! 🎉
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
|
||||||
Thank you to all participants for making this hackathon a success.
|
|
||||||
Every project and idea contributed to an incredible showcase of
|
|
||||||
innovation and creativity.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default WinnerPage;
|
|
||||||
@@ -3,6 +3,7 @@ import { Link, useLocation } from 'react-router';
|
|||||||
import {
|
import {
|
||||||
useMyTeams,
|
useMyTeams,
|
||||||
useAuthStore,
|
useAuthStore,
|
||||||
|
supabase,
|
||||||
} from '@imphnen-frontend-service/service';
|
} from '@imphnen-frontend-service/service';
|
||||||
import { useNavigate } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
@@ -39,11 +40,19 @@ export const Sidebar: FC<SidebarProps> = ({ isOpen = true, onClose }) => {
|
|||||||
}
|
}
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = async () => {
|
||||||
clearSession();
|
try {
|
||||||
localStorage.clear();
|
await supabase.auth.signOut();
|
||||||
toast.success('Logged out successfully');
|
clearSession();
|
||||||
navigate('/auth/login');
|
localStorage.clear();
|
||||||
|
toast.success('Logged out successfully');
|
||||||
|
navigate('/auth/login');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Logout error:', error);
|
||||||
|
clearSession();
|
||||||
|
localStorage.clear();
|
||||||
|
navigate('/auth/login');
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const navItems: NavItem[] = [
|
const navItems: NavItem[] = [
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { SessionUser } from '@imphnen-frontend-service/utils';
|
import { SessionUser } from '@imphnen-frontend-service/utils';
|
||||||
import { hackathonApi, SessionToken } from '@imphnen-frontend-service/service';
|
import { supabase } from '@imphnen-frontend-service/service';
|
||||||
import { LoaderFunctionArgs, redirect } from 'react-router';
|
import { LoaderFunctionArgs, redirect } from 'react-router';
|
||||||
|
|
||||||
const mappingPublicRoutes = [
|
const mappingPublicRoutes = [
|
||||||
@@ -37,10 +37,14 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
|||||||
const url = new URL(request.url);
|
const url = new URL(request.url);
|
||||||
const pathname = url.pathname;
|
const pathname = url.pathname;
|
||||||
|
|
||||||
// Get token from cookies and user from local storage
|
// Get session from Supabase (authoritative source)
|
||||||
const tokenData = SessionToken.get();
|
const { data: { session: supabaseSession }, error: sessionError } = await supabase.auth.getSession();
|
||||||
const user = SessionUser.get();
|
|
||||||
const isAuthenticated = !!tokenData?.token?.access_token;
|
// Handle session errors
|
||||||
|
if (sessionError) {
|
||||||
|
console.error('[Middleware] Session error:', sessionError);
|
||||||
|
// Don't redirect on session errors, let the app handle it
|
||||||
|
}
|
||||||
|
|
||||||
// Allow to access the hackathon pages without authentication
|
// Allow to access the hackathon pages without authentication
|
||||||
if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
|
if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
|
||||||
@@ -59,24 +63,20 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
|||||||
|
|
||||||
// Auth routes (all /auth/* paths) - redirect to dashboard if already authenticated
|
// Auth routes (all /auth/* paths) - redirect to dashboard if already authenticated
|
||||||
if (pathname.startsWith('/auth')) {
|
if (pathname.startsWith('/auth')) {
|
||||||
if (isAuthenticated) return redirect('/dashboard');
|
if (supabaseSession) return redirect('/dashboard');
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Require authentication for all other routes
|
// Require authentication for all other routes - ONLY check Supabase session
|
||||||
if (!isAuthenticated) {
|
if (!supabaseSession) {
|
||||||
return redirect('/auth/login');
|
return redirect('/auth/login');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if user has completed onboarding
|
// Check if user has completed onboarding by querying database (not localStorage!)
|
||||||
// Skip onboarding check for onboarding routes themselves
|
// Skip onboarding check for onboarding routes themselves
|
||||||
if (!mappingOnboardingRoutes.includes(pathname)) {
|
if (!mappingOnboardingRoutes.includes(pathname)) {
|
||||||
try {
|
try {
|
||||||
const userId = user?.id;
|
const userId = supabaseSession.user.id;
|
||||||
if (!userId) {
|
|
||||||
return redirect('/auth/login');
|
|
||||||
}
|
|
||||||
|
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
|
|
||||||
// Check cache first
|
// Check cache first
|
||||||
@@ -86,20 +86,20 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
|||||||
if (cached && (now - cached.timestamp) < CACHE_DURATION) {
|
if (cached && (now - cached.timestamp) < CACHE_DURATION) {
|
||||||
hasLocation = cached.hasLocation;
|
hasLocation = cached.hasLocation;
|
||||||
} else {
|
} else {
|
||||||
// First check user data (faster)
|
const { data: userData, error: userError } = await supabase
|
||||||
if (user?.location) {
|
.from('users')
|
||||||
hasLocation = true;
|
.select('location')
|
||||||
} else {
|
.eq('id', userId)
|
||||||
// Fetch from backend API
|
.single();
|
||||||
try {
|
|
||||||
const response = await hackathonApi.get('/users/me');
|
if (userError) {
|
||||||
hasLocation = !!response.data?.data?.location;
|
console.error('[Middleware] Failed to fetch user data:', userError);
|
||||||
} catch {
|
// If we can't fetch user data, allow access (don't break the app)
|
||||||
// If API fails, check user data as fallback
|
return null;
|
||||||
hasLocation = !!user?.location;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hasLocation = !!userData?.location;
|
||||||
|
|
||||||
// Update cache
|
// Update cache
|
||||||
onboardingCache.set(userId, { hasLocation, timestamp: now });
|
onboardingCache.set(userId, { hasLocation, timestamp: now });
|
||||||
}
|
}
|
||||||
@@ -114,9 +114,10 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check route permissions using user data
|
// Check route permissions using fresh user data from Zustand (for UI metadata)
|
||||||
|
const session = SessionUser.get();
|
||||||
const userPermissions =
|
const userPermissions =
|
||||||
user?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
|
session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
|
||||||
|
|
||||||
const matchedRoute = mappingRoutePermissions.find(
|
const matchedRoute = mappingRoutePermissions.find(
|
||||||
(route) => route.path === pathname
|
(route) => route.path === pathname
|
||||||
|
|||||||
@@ -1,86 +0,0 @@
|
|||||||
const enc = new TextEncoder();
|
|
||||||
const dec = new TextDecoder();
|
|
||||||
|
|
||||||
function randBytes(len: number): Uint8Array {
|
|
||||||
const b = new Uint8Array(len);
|
|
||||||
crypto.getRandomValues(b);
|
|
||||||
return b;
|
|
||||||
}
|
|
||||||
|
|
||||||
function bufToBase64(buf: ArrayBuffer): string {
|
|
||||||
const bytes = new Uint8Array(buf);
|
|
||||||
let s = '';
|
|
||||||
for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
|
|
||||||
return btoa(s);
|
|
||||||
}
|
|
||||||
|
|
||||||
function base64ToBuf(b64: string): ArrayBuffer {
|
|
||||||
const s = atob(b64);
|
|
||||||
const arr = new Uint8Array(s.length);
|
|
||||||
for (let i = 0; i < s.length; i++) arr[i] = s.charCodeAt(i);
|
|
||||||
return arr.buffer;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deriveKeyFromPassphrase(passphrase: string, salt: Uint8Array, iterations = 100_000) {
|
|
||||||
const passKey = await crypto.subtle.importKey(
|
|
||||||
'raw',
|
|
||||||
enc.encode(passphrase),
|
|
||||||
{ name: 'PBKDF2' },
|
|
||||||
false,
|
|
||||||
['deriveKey']
|
|
||||||
);
|
|
||||||
|
|
||||||
return crypto.subtle.deriveKey(
|
|
||||||
{
|
|
||||||
name: 'PBKDF2',
|
|
||||||
salt,
|
|
||||||
iterations,
|
|
||||||
hash: 'SHA-256'
|
|
||||||
},
|
|
||||||
passKey,
|
|
||||||
{ name: 'AES-GCM', length: 256 },
|
|
||||||
false,
|
|
||||||
['encrypt', 'decrypt']
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Encrypts plaintext with passphrase -> returns base64(salt||iv||ciphertext)
|
|
||||||
*/
|
|
||||||
export async function encryptText(plaintext: string, passphrase: string) {
|
|
||||||
const salt = randBytes(16); // 128-bit salt
|
|
||||||
const iv = randBytes(12); // 96-bit IV recommended for GCM
|
|
||||||
const key = await deriveKeyFromPassphrase(passphrase, salt);
|
|
||||||
|
|
||||||
const cipher = await crypto.subtle.encrypt(
|
|
||||||
{ name: 'AES-GCM', iv },
|
|
||||||
key,
|
|
||||||
enc.encode(plaintext)
|
|
||||||
);
|
|
||||||
|
|
||||||
// concat salt + iv + ciphertext
|
|
||||||
const out = new Uint8Array(salt.length + iv.length + cipher.byteLength);
|
|
||||||
out.set(salt, 0);
|
|
||||||
out.set(iv, salt.length);
|
|
||||||
out.set(new Uint8Array(cipher), salt.length + iv.length);
|
|
||||||
|
|
||||||
return bufToBase64(out.buffer);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Decrypts base64(salt||iv||ciphertext) with passphrase -> plaintext
|
|
||||||
*/
|
|
||||||
export async function decryptText(b64combined: string, passphrase: string) {
|
|
||||||
const combined = new Uint8Array(base64ToBuf(b64combined));
|
|
||||||
const salt = combined.slice(0, 16);
|
|
||||||
const iv = combined.slice(16, 28);
|
|
||||||
const cipher = combined.slice(28);
|
|
||||||
|
|
||||||
const key = await deriveKeyFromPassphrase(passphrase, salt);
|
|
||||||
const plainBuf = await crypto.subtle.decrypt(
|
|
||||||
{ name: 'AES-GCM', iv },
|
|
||||||
key,
|
|
||||||
cipher
|
|
||||||
);
|
|
||||||
return dec.decode(plainBuf);
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { decryptText, encryptText } from "./aesclient";
|
|
||||||
|
|
||||||
const SECRET_KEY = 'imphnen-hackathon-2025';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Encode teamId and submissionId into a certificate ID
|
|
||||||
* Uses base64 encoding for simple obfuscation
|
|
||||||
* @param teamId - The team ID
|
|
||||||
* @param submissionId - The submission ID
|
|
||||||
* @returns Encoded certificate ID
|
|
||||||
*/
|
|
||||||
export const encodeCertificateId = async (teamId: string, submissionId: string): Promise<string> => {
|
|
||||||
const combined = `${teamId}::${submissionId}`;
|
|
||||||
return encryptText(combined, SECRET_KEY);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Decode certificate ID back to teamId and submissionId
|
|
||||||
* @param certId - The encoded certificate ID
|
|
||||||
* @returns Object containing teamId and submissionId
|
|
||||||
*/
|
|
||||||
export const decodeCertificateId = async (certId: string): Promise<{ teamId: string; submissionId: string }> => {
|
|
||||||
try {
|
|
||||||
const decoded = await decryptText(certId, SECRET_KEY);
|
|
||||||
const [teamId, submissionId] = decoded.split('::');
|
|
||||||
return { teamId, submissionId };
|
|
||||||
} catch {
|
|
||||||
throw new Error('Invalid certificate ID');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* For development: Create a certId using created_at timestamp
|
|
||||||
* @param teamId - The team ID
|
|
||||||
* @param createdAt - The creation timestamp
|
|
||||||
* @returns Encoded certificate ID
|
|
||||||
*/
|
|
||||||
export const encodeCertificateIdWithTimestamp = (teamId: string, createdAt: string): string => {
|
|
||||||
const combined = `${teamId}::${createdAt}`;
|
|
||||||
return Buffer.from(combined).toString('base64');
|
|
||||||
};
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user