Dashboard
@@ -10,18 +38,22 @@ export const HackathonDashboardPage: FC = (): ReactElement => { {/* Participant */}- 1261 + {totalParticipants}
Total Participants
-
{/* Project Submitted */}
206
++ {totalTeams} +
Total Teams
-
diff --git a/apps/backoffice/src/app/(protected)/hackathon-submissions/_components/submission-modal.tsx b/apps/backoffice/src/app/(protected)/hackathon-submissions/_components/submission-modal.tsx
new file mode 100644
index 0000000..3bf2867
--- /dev/null
+++ b/apps/backoffice/src/app/(protected)/hackathon-submissions/_components/submission-modal.tsx
@@ -0,0 +1,249 @@
+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: FC0
++ {totalSubmissions} +
Total Project Submitted
+
+ );
+};
+
+export default SubmissionModal;
diff --git a/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx b/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
index ea8a53b..8466098 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx
@@ -1,128 +1,375 @@
-import { FC, ReactElement, useState } from 'react';
+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,
- getCoreRowModel,
- getPaginationRowModel,
- PaginationState,
- RowSelectionState,
- useReactTable,
-} from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { cn } from '@imphnen-frontend-service/utils';
-import { EditOutlined } from '@ant-design/icons';
+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';
-export const HackathonUsersPage: FC = (): ReactElement => {
- const [rowSelection, setRowSelection] = useState
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+
+ + {submission.project_name} +
++ Team ID: {submission.team_id} • Submitted{' '} + {new Date(submission.submitted_at).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + })} +
+
+ {/* Submission Status */}
+
+
+ {/* Footer */}
+
+
+
+
+ {/* Project Description */}
+
+
+ + Status:{' '} + {submission.status.charAt(0).toUpperCase() + + submission.status.slice(1)} +
+Submitted by: {submission.submitted_by}
+
+
+
+ {/* Project Links */}
+ + Project Description +
++ {submission.description} +
+
+
+
+ {/* Screenshots */}
+ {submission.screenshots && submission.screenshots.length > 0 && (
+ + Project Links +
+ + {/* Repository URL */} +
+
+
+ {/* Demo URL */}
+ {submission.demo_url && (
+
+
+ + Repository +
+ + {submission.repository_url} + +
+
+ )}
+
+ {/* Presentation URL */}
+ {submission.presentation_url && (
+
+
+ + Live Demo +
+ + {submission.demo_url} + +
+
+ )}
+
+
+ + Presentation +
+ + {submission.presentation_url} + +
+
+
+
+ )}
+
+ {/* Metadata */}
+
+
+
+ {submission.screenshots.map((screenshot, index) => (
+
+ 
+
+ ))}
+
+
+
+
+
+ Created
++ {new Date(submission.created_at).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + })} +
+
+
+ Last Updated
++ {new Date(submission.updated_at).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + })} +
+
+
+ {/* */}
+
+ - Project Submission + Project Submissions
- {/* Filters and actions */}
-
-
-
+ = ({ isOpen, onClose, team }) => {
+ const [formData, setFormData] = useState(null);
+ const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+ const [showLogoMenu, setShowLogoMenu] = useState(false);
+ const logoInputRef = useRef(null);
+ const bannerInputRef = useRef(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) => {
+ 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) => {
+ 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 (
+
+
- {/* Table */}
-
+ {/* Search bar */}
+
+
+
+ {/* Per Page Dropdown */}
+
+
+
+
+ {/* Status Filter */}
+ {/*
+
*/}
+
+ Active filters:
+
+ Status: {statusFilter}
+
+
+
+
+ )} */}
+
+ {/* Loading & results */}
+ {isLoading ? (
+
+
+ ) : filteredData.length > 0 ? (
+ <>
+
+ Showing {filteredData.length} of {totalData} submissions (Page{' '}
+ {currentPage} of {totalPages})
+ {isFetching && (
+ (Updating...)
+ )}
+
+
+ No submissions found. Try adjusting your filters.
+
+ )}
- {/* Modals extracted into shared backoffice components */}
+ {/* Submission Modal */}
+ {selectedSubmission && (
+
+
+ {/* Header */}
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+
+ + {team ? 'Team Details' : 'Create New Team'} +
++ {team + ? 'View and manage team information' + : 'Add a new team to the hackathon'} +
+ setShowLogoMenu(false)}>
+
+
+
+ {/* Banner Section */}
+
+
+
+
+ {/* Logo & Name */}
+
+
+
+
+ {formData.banner && (
+
+ )}
+
+
+
+
+ {/* Description */}
+
+
+
+
+
+
+
+ {formData.logo ? (
+ 
+ ) : (
+
+
+ {showLogoMenu && (
+
+
+ {formData.logo && (
+
+ )}
+
+ )}
+
+
+ handleInputChange('name', e.target.value)}
+ />
+
+
+
+