feat(backoffice): submission page integration

- Fetch submissions data from API
- Move submission modal to hackathon-submissions page

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: 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;

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 {
+import { ColumnDef } from '@tanstack/react-table';
-  ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  RowSelectionState,
-  useReactTable,
-} 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 => {
+type SubmissionType = TAdminSubmissionItem;
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
-  const [pagination, setPagination] = useState<PaginationState>({
+export const HackathonSubmissionsPage: FC = (): ReactElement => {
-    pageIndex: 0,
+  const [searchParams, setSearchParams] = useSearchParams();
-    pageSize: 9,
+  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 mockData: any[] = Array.from({ length: 90 }, (_, i) => ({
+  const totalData = submissionsResponse?.meta?.total_data || 0;
-    id: i + 1,
+  const totalPages = submissionsResponse?.meta?.total_page || 1;
-    project_name: `Project ${i + 1}`,
-    repository_url: `https://github.com/user/repo${i + 1}`,
-    demo_url: `https://demo.example.com/project${i + 1}`,
-    presentation_url: `https://slides.example.com/project${i + 1}`,
-  }));
 
-  type UserStatus = 'active' | 'inactive';
+  // 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]
+  );
 
-  interface SubmissionType {
+  // Validate page number
-    id: number;
+  useEffect(() => {
-    project_name: string;
+    if (!isLoading && totalPages > 0 && currentPage > totalPages) {
-    repository_url: string;
+      setSearchParams({ page: totalPages.toString() });
-    demo_url: string;
+    }
-    presentation_url: string;
+  }, [currentPage, totalPages, setSearchParams, isLoading]);
-  }
 
-  const columns: ColumnDef<SubmissionType>[] = [
+  // Sync globalFilter with URL
-    {
+  useEffect(() => {
-      header: 'Project Name',
+    setGlobalFilter(searchQuery);
-      accessorKey: 'project_name',
+  }, [searchQuery]);
-    },
-    {
-      header: 'Repository URL',
-      accessorKey: 'repository_url',
-    },
-    {
-      header: 'Demo URL',
-      accessorKey: 'demo_url',
-    },
-    {
-      header: 'Presentation URL',
-      accessorKey: 'presentation_url',
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn('w-72') },
-      cell: ({ row }) => (
-        <Button
-          variant="primary"
-          size="sm"
-          className="flex items-center gap-2 w-max"
-          onClick={() => {
-            // View detail logic
-          }}
-        >
-          <EditOutlined className="text-base" /> View & Manage
-        </Button>
-      ),
-    },
-  ];
 
-  const table = useReactTable({
+  // Handle search
-    data: mockData,
+  const handleSearch = useCallback(() => {
-    columns,
+    const params = new URLSearchParams();
-    state: {
+    params.set('page', '1');
-      pagination,
+    if (perPage !== 10) params.set('per_page', perPage.toString());
-      rowSelection,
+    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();
+      }
     },
-    enableRowSelection: true,
+    [handleSearch]
-    onRowSelectionChange: setRowSelection,
+  );
-    getCoreRowModel: getCoreRowModel(),
+
-    getPaginationRowModel: getPaginationRowModel(),
+  // Handle per page change
-    onPaginationChange: setPagination,
+  const handlePerPageChange = useCallback(
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    (newPerPage: number) => {
-    manualPagination: false,
+      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 Submission
+        Project Submissions
       </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">
+        <div className="flex flex-wrap gap-3 items-center justify-between">
-          <input
+          <div className="flex flex-wrap gap-3 items-center">
-            type="text"
+            {/* Search bar */}
-            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
+            <div className="relative">
-            placeholder="Search name or email"
+              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
-          />
+              <input
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+                type="text"
-            <option value="all">All Status</option>
+                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"
-            <option value="active">Active</option>
+                placeholder="Search by project name..."
-            <option value="suspended">Suspended</option>
+                value={globalFilter}
-          </select>
+                onChange={(e) => setGlobalFilter(e.target.value)}
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
+                onKeyPress={handleSearchKeyPress}
-            <option value="all">All City</option>
+              />
-            <option value="jakarta">Jakarta</option>
+            </div>
-            <option value="bandung">Bandung</option>
+
-          </select>
+            {/* 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>
 
-        {/* Table */}
+        {/* Active filters */}
-        <DataTable data={mockData} columns={columns} table={table} />
+        {/* {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>
 
-      {/* Modals extracted into shared backoffice components */}
+      {/* Submission Modal */}
+      {selectedSubmission && (
+        <SubmissionModal
+          isOpen={showSubmissionModal}
+          onClose={handleCloseSubmissionModal}
+          submission={selectedSubmission}
+        />
+      )}
     </BackofficeWrapper>
   );
 };
 
-export default HackathonUsersPage;
+export default HackathonSubmissionsPage;

apps/backoffice/src/app/(protected)/hackathon-teams/_components/submission-modal.tsx

@@ -1,216 +0,0 @@
-import { FC } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import {
-  CloseOutlined,
-  LinkOutlined,
-  ProjectOutlined,
-} from '@ant-design/icons';
-
-interface SubmissionModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  teamId: string;
-  teamName: string;
-}
-
-const SubmissionModal: FC<SubmissionModalProps> = ({
-  isOpen,
-  onClose,
-  teamId,
-  teamName,
-}) => {
-  if (!isOpen) return null;
-
-  // Mock submission data
-  const mockSubmission = {
-    id: `submission-${teamId}`,
-    project_name: `${teamName} Project`,
-    repository_url: `https://github.com/${teamName
-      .toLowerCase()
-      .replace(/\s+/g, '-')}/hackathon-project`,
-    demo_url: `https://${teamName
-      .toLowerCase()
-      .replace(/\s+/g, '-')}.vercel.app`,
-    presentation_url: `https://docs.google.com/presentation/d/${teamId}/edit`,
-    submitted_at: new Date().toISOString(),
-    status: 'submitted',
-    description:
-      'An innovative solution built during the IMPHNEN x Kolosal.ai Hackathon 2025.',
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-neutral-200">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-full bg-success-100 flex items-center justify-center">
-              <ProjectOutlined className="text-success-600 text-lg" />
-            </div>
-            <div>
-              <h2 className="text-xl font-semibold text-neutral-900">
-                Project Submission
-              </h2>
-              <p className="text-sm text-neutral-500">
-                {teamName} - Hackathon Submission Details
-              </p>
-            </div>
-          </div>
-          <button
-            className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
-            onClick={onClose}
-          >
-            <CloseOutlined className="text-neutral-400 text-lg" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-6">
-          {/* Submission Status */}
-          <div className="flex items-center gap-3 p-4 bg-success-50 border border-success-200 rounded-lg">
-            <div className="w-3 h-3 rounded-full bg-success-500"></div>
-            <div>
-              <p className="text-sm font-medium text-success-800">
-                Submission Completed
-              </p>
-              <p className="text-xs text-success-600">
-                Submitted on{' '}
-                {new Date(mockSubmission.submitted_at).toLocaleDateString(
-                  'en-UK',
-                  {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                  }
-                )}
-              </p>
-            </div>
-          </div>
-
-          {/* Project Information */}
-          <div className="grid gap-6">
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-neutral-700">
-                Project Name
-              </label>
-              <p className="text-sm text-neutral-900 p-3 bg-neutral-50 rounded-lg">
-                {mockSubmission.project_name}
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-neutral-700">
-                Project Description
-              </label>
-              <p className="text-sm text-neutral-900 p-3 bg-neutral-50 rounded-lg">
-                {mockSubmission.description}
-              </p>
-            </div>
-
-            {/* Links Section */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-neutral-700">
-                  Repository
-                </label>
-                <div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
-                  <span className="text-sm text-neutral-700 flex-1 truncate">
-                    {mockSubmission.repository_url}
-                  </span>
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    className="shrink-0"
-                    onClick={() =>
-                      window.open(mockSubmission.repository_url, '_blank')
-                    }
-                  >
-                    <LinkOutlined className="text-xs" />
-                  </Button>
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-neutral-700">
-                  Live Demo
-                </label>
-                <div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
-                  <span className="text-sm text-neutral-700 flex-1 truncate">
-                    {mockSubmission.demo_url}
-                  </span>
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    className="shrink-0"
-                    onClick={() =>
-                      window.open(mockSubmission.demo_url, '_blank')
-                    }
-                  >
-                    <LinkOutlined className="text-xs" />
-                  </Button>
-                </div>
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-neutral-700">
-                Presentation
-              </label>
-              <div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
-                <span className="text-sm text-neutral-700 flex-1 truncate">
-                  {mockSubmission.presentation_url}
-                </span>
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  className="shrink-0"
-                  onClick={() =>
-                    window.open(mockSubmission.presentation_url, '_blank')
-                  }
-                >
-                  <LinkOutlined className="text-xs" />
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {/* Action Note */}
-          <div className="p-4 bg-info-50 border border-info-200 rounded-lg">
-            <p className="text-sm text-info-800">
-              <strong>Note:</strong> This is a submission preview. The team has
-              successfully submitted their project. You can review the
-              submission details and access the project links above.
-            </p>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-end p-6 border-t border-neutral-200">
-          <div className="flex items-center gap-3">
-            <Button variant="secondary" size="md" onClick={onClose}>
-              Close
-            </Button>
-            <Button
-              variant="primary"
-              size="md"
-              onClick={() => {
-                // Navigate to hackathon-submissions page
-                console.log('Navigate to full submissions page');
-                // You can implement navigation here
-                onClose();
-              }}
-              className="flex items-center gap-2"
-            >
-              <ProjectOutlined />
-              View All Submissions
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SubmissionModal;

apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx

@@ -7,7 +7,6 @@ import {
   useCallback,
 } from 'react';
 import ModalTeamDetail from './_components/modal-team-detail-new';
-import SubmissionModal from './_components/submission-modal';
 import { CityFilterSelect } from '../../../components/city-filter-select';
 import {
   BackofficeWrapper,
@@ -43,10 +42,8 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
   const perPage = parseInt(searchParams.get('per_page') || '10', 10);
   const [showDetailModal, setShowDetailModal] = useState(false);
   const [showNewTeamModal, setShowNewTeamModal] = useState(false);
-  const [showSubmissionModal, setShowSubmissionModal] = useState(false);
   const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null);
-  const [selectedSubmissionTeam, setSelectedSubmissionTeam] =
+  useState<TeamType | null>(null);
-    useState<TeamType | null>(null);
   const [globalFilter, setGlobalFilter] = useState(searchQuery);
 
   // Advanced filtering states
@@ -105,7 +102,7 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
     setGlobalFilter(searchQuery);
   }, [searchQuery]);
 
-  // Handle search submission
+  // Handle search teams
   const handleSearch = useCallback(() => {
     const params = new URLSearchParams();
     params.set('page', '1');
@@ -157,11 +154,6 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
     setShowNewTeamModal(false);
   }, []);
 
-  const handleCloseSubmissionModal = useCallback(() => {
-    setShowSubmissionModal(false);
-    setSelectedSubmissionTeam(null);
-  }, []);
-
   // Get teams data from API response
   const filteredData = useMemo(() => {
     return teamsResponse?.data || [];
@@ -448,16 +440,6 @@ export const HackathonTeamsPage: FC = (): ReactElement => {
         onClose={handleCloseNewTeamModal}
         team={null} // null indicates creating new team
       />
-
-      {/* Submission Modal */}
-      {selectedSubmissionTeam && (
-        <SubmissionModal
-          isOpen={showSubmissionModal}
-          onClose={handleCloseSubmissionModal}
-          teamId={selectedSubmissionTeam.id}
-          teamName={selectedSubmissionTeam.name}
-        />
-      )}
     </BackofficeWrapper>
   );
 };