From d4971da6288bfc8e32811bd85d8938a06a79048e Mon Sep 17 00:00:00 2001
From: dijith-481 <dijithdinesh@protonmail.com>
Date: Sat, 27 Dec 2025 18:04:53 +0530
Subject: [PATCH 1/4] add view result

---
 src/App.tsx                                   |  11 ++
 .../Events/EventDesc/EventData/EventData.tsx  |   7 +
 .../Events/EventDesc/ToolBar/ToolBar.tsx      |  12 +-
 .../Event/create-update/eventValidation.tsx   |   9 +-
 src/Hooks/Event/eventTypes.tsx                |  13 ++
 src/Hooks/Event/useEventDesc.tsx              |  16 +-
 src/Pages/Events/EventDesc.tsx                |   2 +-
 src/Pages/Events/EventResults.tsx             | 181 ++++++++++++++++++
 8 files changed, 245 insertions(+), 6 deletions(-)
 create mode 100644 src/Pages/Events/EventResults.tsx

diff --git a/src/App.tsx b/src/App.tsx
index bc6b399..208e5c0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,6 +43,7 @@ import EventStatsPage from 'Pages/Events/EventStats';
 import TicketUserList from './Pages/Ticket/TicketUserList';
 import TicketDescPage from './Pages/Ticket/TicketDesc';
 import EventScheduleCreate from 'Pages/Events/EventScheduleCreate';
+import EventResults from 'Pages/Events/EventResults';
 
 function App() {
   return (
@@ -168,6 +169,16 @@ function EventsRoutes() {
         </ProtectedRoute>
       }
     />,
+    <Route
+      path="/events/results/:id"
+      element={
+        <ProtectedRoute
+          allowedRoles={[...allEventEditRoles, ...allEventViewRoles, ...specificEventViewRoles]}
+        >
+          <EventResults />
+        </ProtectedRoute>
+      }
+    />,
 
     <Route
       path="/events/registrations/statistics"
diff --git a/src/Components/Events/EventDesc/EventData/EventData.tsx b/src/Components/Events/EventDesc/EventData/EventData.tsx
index bedaf38..f21fcee 100644
--- a/src/Components/Events/EventDesc/EventData/EventData.tsx
+++ b/src/Components/Events/EventDesc/EventData/EventData.tsx
@@ -108,6 +108,13 @@ export default function EventData({ event }: { event: IEvent }) {
           <Typography>{event?.eventStatus}</Typography>
         </Grid>
 
+        <Grid item xs={6}>
+          <Typography>Results Published</Typography>
+        </Grid>
+        <Grid item xs={6}>
+          <Typography>{event?.results && event.results.length > 0 ? 'YES' : 'NO'}</Typography>
+        </Grid>
+
         <Grid item xs={6}>
           <Typography>Number of Rounds</Typography>
         </Grid>
diff --git a/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx b/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx
index 530bb72..d94d71d 100644
--- a/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx
+++ b/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx
@@ -8,7 +8,13 @@ import { Link as RouterLink } from 'react-router-dom';
 import './ToolBar.css';
 import { useNavigate } from 'react-router-dom';
 
-export default function ToolBar({ eventId }: { eventId: number }) {
+export default function ToolBar({
+  eventId,
+  resultsPublished,
+}: {
+  eventId: number;
+  resultsPublished?: boolean;
+}) {
   const navigate = useNavigate();
   return (
     <Box className="event-desc-toolbar" component={Paper} elevation={2} borderRadius={0} zIndex={5}>
@@ -38,11 +44,11 @@ export default function ToolBar({ eventId }: { eventId: number }) {
 
       <Button
         variant="contained"
-        color="primary"
+        color={resultsPublished ? 'primary' : 'inherit'}
         startIcon={<MilitaryTechIcon />}
         className="toolbutton"
         onClick={() => {
-          alert('Coming Soon!');
+          navigate(`/events/results/${eventId}`);
         }}
       >
         Results
diff --git a/src/Hooks/Event/create-update/eventValidation.tsx b/src/Hooks/Event/create-update/eventValidation.tsx
index a3b1f4c..db4bb64 100644
--- a/src/Hooks/Event/create-update/eventValidation.tsx
+++ b/src/Hooks/Event/create-update/eventValidation.tsx
@@ -12,7 +12,14 @@ import { InferType, ObjectSchema, boolean, date, mixed, number, object, string }
 export const eventValidationSchema: ObjectSchema<
   Omit<
     IEvent,
-    'eventStatus' | 'category' | 'eventType' | 'eventHead1' | 'eventHead2' | 'icon' | 'id'
+    | 'eventStatus'
+    | 'category'
+    | 'eventType'
+    | 'eventHead1'
+    | 'eventHead2'
+    | 'icon'
+    | 'id'
+    | 'results'
   > & { icon: File | undefined }
 > = object().shape({
   name: string()
diff --git a/src/Hooks/Event/eventTypes.tsx b/src/Hooks/Event/eventTypes.tsx
index f1f6383..fe4d2d4 100644
--- a/src/Hooks/Event/eventTypes.tsx
+++ b/src/Hooks/Event/eventTypes.tsx
@@ -37,11 +37,24 @@ export interface IEvent extends IEventListItem {
   registrationEndDate?: Date;
   button: TEventButton;
   registrationLink?: string;
+  results: IResult[];
 
   // rounds: [];
   // registration: null;
 }
 
+export interface IResult {
+  id: number;
+  eventId: number;
+  excelId: number;
+  teamId: number;
+  event?: IEvent;
+  position: number;
+  name: string;
+  teamName: string;
+  teamMembers: string;
+}
+
 export interface IEventHead {
   id: number;
   name: string;
diff --git a/src/Hooks/Event/useEventDesc.tsx b/src/Hooks/Event/useEventDesc.tsx
index d913c76..9a23f18 100644
--- a/src/Hooks/Event/useEventDesc.tsx
+++ b/src/Hooks/Event/useEventDesc.tsx
@@ -1,7 +1,7 @@
 import { useContext, useState } from 'react';
 import { ApiContext } from '../../Contexts/Api/ApiContext';
 import { getErrMsg } from '../errorParser';
-import { IEvent } from './eventTypes';
+import { IEvent, IResult } from './eventTypes';
 
 export function useEventDesc() {
   const [event, setEvent] = useState<IEvent>();
@@ -19,12 +19,26 @@ export function useEventDesc() {
         registrationEndDate: string;
       }
 
+      interface IResultResponse {
+        isTeam: boolean;
+        results: IResult[];
+      }
+
       const response = await axiosEventsPrivate.get<IEventResponse>(`/api/events/${eventId}`);
 
+      const resultsResponse = await axiosEventsPrivate.get<IResultResponse>(
+        `/api/Result/event/${eventId}`,
+      );
+
+      resultsResponse.data.results.sort((a: IResult, b: IResult) => {
+        return a.position - b.position;
+      });
+
       const eventData: IEvent = {
         ...response.data,
         datetime: new Date(response.data?.datetime),
         registrationEndDate: new Date(response.data?.registrationEndDate),
+        results: resultsResponse.data.results,
       };
 
       setEvent(eventData);
diff --git a/src/Pages/Events/EventDesc.tsx b/src/Pages/Events/EventDesc.tsx
index 390525d..3e367ac 100644
--- a/src/Pages/Events/EventDesc.tsx
+++ b/src/Pages/Events/EventDesc.tsx
@@ -76,7 +76,7 @@ export default function EventDescPage() {
       </Box>
       <br />
 
-      <ToolBar eventId={event!.id} />
+      <ToolBar eventId={event!.id} resultsPublished={event?.results && event.results.length > 0} />
       <EventData event={event!} />
     </>
   );
diff --git a/src/Pages/Events/EventResults.tsx b/src/Pages/Events/EventResults.tsx
new file mode 100644
index 0000000..a944f57
--- /dev/null
+++ b/src/Pages/Events/EventResults.tsx
@@ -0,0 +1,181 @@
+import { Box, Button, Divider, Grid, Paper, Typography } from '@mui/material';
+import { useContext, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useEventDesc } from '../../Hooks/Event/useEventDesc';
+import UserContext from 'Contexts/User/UserContext';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import {
+  allEventEditRoles,
+  allEventViewRoles,
+  specificEventViewRoles,
+} from 'Hooks/Event/eventRoles';
+
+export default function EventResults() {
+  const { event, fetchEvent, loading, error, setError } = useEventDesc();
+  const { userData } = useContext(UserContext);
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!Number.isInteger(Number(id))) {
+      setError('Invalid Event ID');
+    }
+    fetchEvent(Number(id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  useEffect(() => {
+    if (loading || !event) return;
+
+    if (userData.roles.some((role) => allEventEditRoles.includes(role))) {
+    } else if (userData.roles.some((role) => allEventViewRoles.includes(role))) {
+    } else if (userData.roles.some((role) => specificEventViewRoles.includes(role))) {
+      if (
+        event?.eventHead1?.email === userData.email ||
+        event?.eventHead2?.email === userData.email
+      ) {
+      } else {
+        setError('You do not have permission to view this page');
+      }
+    } else {
+      setError('You do not have permission to view this page');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [event, loading, userData]);
+
+  if (error) {
+    return <Typography variant="h5">{error}</Typography>;
+  }
+
+  if (loading || !event) {
+    return <Typography variant="h5">Loading...</Typography>;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        height: '100%',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      <br />
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          width: '100%',
+        }}
+      >
+        <Typography variant="h5" noWrap>
+          Event Results: {event.name}
+        </Typography>
+      </Box>
+      <br />
+
+      <Box
+        sx={{
+          width: '90%',
+          marginBottom: '20px',
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        component={Paper}
+        elevation={2}
+      >
+        <Box
+          sx={{
+            width: '100%',
+            display: 'flex',
+            padding: '10px 30px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+          component={Paper}
+          elevation={2}
+          borderRadius={0}
+          zIndex={5}
+        >
+          <Button
+            variant="contained"
+            color="primary"
+            startIcon={<ArrowBackIcon />}
+            onClick={() => {
+              navigate(-1);
+            }}
+          >
+            Back
+          </Button>
+          <Box sx={{ flexGrow: 1 }} />
+        </Box>
+
+        <Box sx={{ padding: 3 }}>
+          <Grid container spacing={2}>
+            {event.results && event.results.length > 0 ? (
+              <>
+                <Grid item xs={12}>
+                  <Typography variant="h5">Results</Typography>
+                </Grid>
+                <Grid item xs={12}>
+                  <Divider />
+                </Grid>
+
+                {/* 1st Place */}
+                <Grid item xs={3}>
+                  <Typography>1st </Typography>
+                </Grid>
+                <Grid item xs={3}>
+                  <Typography>
+                    {event.results.length >= 1 ? event.results[0].teamName : ''}
+                  </Typography>
+                </Grid>
+                <Grid item xs={6}>
+                  <Typography>
+                    {event.results.length >= 1 ? event.results[0].teamMembers : ''}
+                  </Typography>
+                </Grid>
+
+                {/* 2nd Place */}
+                <Grid item xs={3}>
+                  <Typography>2nd </Typography>
+                </Grid>
+                <Grid item xs={3}>
+                  <Typography>
+                    {event.results.length >= 2 ? event.results[1].teamName : ''}
+                  </Typography>
+                </Grid>
+                <Grid item xs={6}>
+                  <Typography>
+                    {event.results.length >= 2 ? event.results[1].teamMembers : ''}
+                  </Typography>
+                </Grid>
+
+                {/* 3rd Place */}
+                <Grid item xs={3}>
+                  <Typography>3rd </Typography>
+                </Grid>
+                <Grid item xs={3}>
+                  <Typography>
+                    {event.results.length >= 3 ? event.results[2].teamName : ''}
+                  </Typography>
+                </Grid>
+                <Grid item xs={6}>
+                  <Typography>
+                    {event.results.length >= 3 ? event.results[2].teamMembers : ''}
+                  </Typography>
+                </Grid>
+              </>
+            ) : (
+              <Grid item xs={12}>
+                <Typography align="center">No results declared yet.</Typography>
+              </Grid>
+            )}
+          </Grid>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

From edd3243c38120df9bc8bfd3287a102d9b6150c85 Mon Sep 17 00:00:00 2001
From: dijith-481 <dijithdinesh@protonmail.com>
Date: Sat, 27 Dec 2025 18:11:23 +0530
Subject: [PATCH 2/4] fix infinite rerenders caused by validate schedule
 function not wrapped inside a callback

---
 src/Hooks/Event/useScheduleList.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Hooks/Event/useScheduleList.tsx b/src/Hooks/Event/useScheduleList.tsx
index 7bb4256..6eb24a4 100644
--- a/src/Hooks/Event/useScheduleList.tsx
+++ b/src/Hooks/Event/useScheduleList.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { ApiContext } from 'Contexts/Api/ApiContext';
 import {
   getErrMsg,
@@ -209,7 +209,7 @@ export function useScheduleList() {
     }
   };
 
-  function validateSchedule(): boolean {
+  const validateSchedule = useCallback((): boolean => {
     try {
       createEventScheduleValidationSchema.validateSync(newEvent, {
         abortEarly: false,
@@ -227,7 +227,7 @@ export function useScheduleList() {
       }
       return false;
     }
-  }
+  }, [newEvent]);
 
   async function createSchedule(): Promise<TupdateFnReturn> {
     try {

From 425e7009a95253973af97dd99c812e5f09c708ad Mon Sep 17 00:00:00 2001
From: dijith-481 <dijithdinesh@protonmail.com>
Date: Sun, 28 Dec 2025 11:23:54 +0530
Subject: [PATCH 3/4] resut add,edit,delete

---
 .../Events/EventDesc/ToolBar/ToolBar.tsx      |  10 +-
 src/Hooks/Event/results/resultValidation.tsx  |  31 ++
 .../Event/results/useEventResultsCrud.tsx     |  88 ++++
 src/Pages/Events/EventDesc.tsx                |   2 +-
 src/Pages/Events/EventResults.tsx             | 376 +++++++++++++++---
 5 files changed, 443 insertions(+), 64 deletions(-)
 create mode 100644 src/Hooks/Event/results/resultValidation.tsx
 create mode 100644 src/Hooks/Event/results/useEventResultsCrud.tsx

diff --git a/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx b/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx
index d94d71d..04bdccb 100644
--- a/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx
+++ b/src/Components/Events/EventDesc/ToolBar/ToolBar.tsx
@@ -8,13 +8,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import './ToolBar.css';
 import { useNavigate } from 'react-router-dom';
 
-export default function ToolBar({
-  eventId,
-  resultsPublished,
-}: {
-  eventId: number;
-  resultsPublished?: boolean;
-}) {
+export default function ToolBar({ eventId }: { eventId: number }) {
   const navigate = useNavigate();
   return (
     <Box className="event-desc-toolbar" component={Paper} elevation={2} borderRadius={0} zIndex={5}>
@@ -44,7 +38,7 @@ export default function ToolBar({
 
       <Button
         variant="contained"
-        color={resultsPublished ? 'primary' : 'inherit'}
+        color={'primary'}
         startIcon={<MilitaryTechIcon />}
         className="toolbutton"
         onClick={() => {
diff --git a/src/Hooks/Event/results/resultValidation.tsx b/src/Hooks/Event/results/resultValidation.tsx
new file mode 100644
index 0000000..f808c81
--- /dev/null
+++ b/src/Hooks/Event/results/resultValidation.tsx
@@ -0,0 +1,31 @@
+import { IResult } from '../eventTypes';
+import { InferType, ObjectSchema, number, object, string } from 'yup';
+
+export const resultValidationSchema: ObjectSchema<Omit<IResult, 'id' | 'eventId' | 'event'>> =
+  object().shape({
+    excelId: number()
+      .transform((val) => (isNaN(val) ? undefined : val))
+      .required('Excel ID is required'),
+    teamId: number()
+      .transform((val) => (isNaN(val) ? undefined : val))
+      .required('Team ID is required'),
+    position: number().required('Position is required').min(1, 'Position must be at least 1'),
+    name: string().required('Name is required'),
+    teamName: string()
+      .required('Team Name is required')
+      .min(2, 'Team Name must be at least 2 characters'),
+    teamMembers: string()
+      .required('Team Members are required')
+      .min(2, 'Team Members must be at least 2 characters'),
+  });
+
+export interface IValidateResult extends InferType<typeof resultValidationSchema> {}
+
+export const defaultResult: IValidateResult = {
+  excelId: 0,
+  teamId: 0,
+  position: 1,
+  name: '',
+  teamName: '',
+  teamMembers: '',
+} as unknown as IValidateResult;
diff --git a/src/Hooks/Event/results/useEventResultsCrud.tsx b/src/Hooks/Event/results/useEventResultsCrud.tsx
new file mode 100644
index 0000000..23508c3
--- /dev/null
+++ b/src/Hooks/Event/results/useEventResultsCrud.tsx
@@ -0,0 +1,88 @@
+import { useContext, useState } from 'react';
+import { ApiContext } from 'Contexts/Api/ApiContext';
+import { getErrMsg } from 'Hooks/errorParser';
+import { IResult } from '../eventTypes';
+import { IValidateResult, resultValidationSchema } from './resultValidation';
+import { ValidationError } from 'yup';
+
+export function useEventResultsCrud() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { axiosEventsPrivate } = useContext(ApiContext);
+
+  async function addResult(eventId: number, result: IValidateResult) {
+    try {
+      setLoading(true);
+      setError('');
+      await resultValidationSchema.validate(result, { abortEarly: false });
+      await axiosEventsPrivate.post('/api/Result', { ...result, eventId });
+      return true;
+    } catch (err: any) {
+      if (err instanceof ValidationError) {
+        setError(err.inner.map((e) => e.message).join(', '));
+      } else {
+        setError(getErrMsg(err));
+      }
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function updateResult(resultId: number, eventId: number, result: IValidateResult) {
+    try {
+      setLoading(true);
+      setError('');
+      await resultValidationSchema.validate(result, { abortEarly: false });
+      await axiosEventsPrivate.put('/api/Result', { ...result, id: resultId, eventId });
+      return true;
+    } catch (err: any) {
+      if (err instanceof ValidationError) {
+        setError(err.inner.map((e) => e.message).join(', '));
+      } else {
+        setError(getErrMsg(err));
+      }
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function deleteResult(resultId: number) {
+    try {
+      setLoading(true);
+      setError('');
+      await axiosEventsPrivate.delete('/api/Result', { data: { id: resultId } });
+      return true;
+    } catch (err) {
+      setError(getErrMsg(err));
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function deleteAllResults(eventId: number) {
+    try {
+      setLoading(true);
+      setError('');
+      await axiosEventsPrivate.delete(`/api/Result/event/${eventId}`);
+      return true;
+    } catch (err) {
+      setError(getErrMsg(err));
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return {
+    loading,
+    error,
+    setError,
+    addResult,
+    updateResult,
+    deleteResult,
+    deleteAllResults,
+  };
+}
diff --git a/src/Pages/Events/EventDesc.tsx b/src/Pages/Events/EventDesc.tsx
index 3e367ac..390525d 100644
--- a/src/Pages/Events/EventDesc.tsx
+++ b/src/Pages/Events/EventDesc.tsx
@@ -76,7 +76,7 @@ export default function EventDescPage() {
       </Box>
       <br />
 
-      <ToolBar eventId={event!.id} resultsPublished={event?.results && event.results.length > 0} />
+      <ToolBar eventId={event!.id} />
       <EventData event={event!} />
     </>
   );
diff --git a/src/Pages/Events/EventResults.tsx b/src/Pages/Events/EventResults.tsx
index a944f57..3ca378f 100644
--- a/src/Pages/Events/EventResults.tsx
+++ b/src/Pages/Events/EventResults.tsx
@@ -1,20 +1,56 @@
-import { Box, Button, Divider, Grid, Paper, Typography } from '@mui/material';
-import { useContext, useEffect } from 'react';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Paper,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useEventDesc } from '../../Hooks/Event/useEventDesc';
 import UserContext from 'Contexts/User/UserContext';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 import {
   allEventEditRoles,
   allEventViewRoles,
   specificEventViewRoles,
 } from 'Hooks/Event/eventRoles';
+import { useEventResultsCrud } from 'Hooks/Event/results/useEventResultsCrud';
+import { defaultResult, IValidateResult } from 'Hooks/Event/results/resultValidation';
+import { IResult } from 'Hooks/Event/eventTypes';
 
 export default function EventResults() {
   const { event, fetchEvent, loading, error, setError } = useEventDesc();
   const { userData } = useContext(UserContext);
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const {
+    addResult,
+    updateResult,
+    deleteResult,
+    deleteAllResults,
+    loading: crudLoading,
+    error: crudError,
+    setError: setCrudError,
+  } = useEventResultsCrud();
+
+  const [openDialog, setOpenDialog] = useState(false);
+  const [editingResult, setEditingResult] = useState<IResult | null>(null);
+  const [formData, setFormData] = useState<IValidateResult>(defaultResult);
+  const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
+  const [deleteAllConfirmationOpen, setDeleteAllConfirmationOpen] = useState(false);
+  const [deleteConfirmationText, setDeleteConfirmationText] = useState('');
+  const [resultToDelete, setResultToDelete] = useState<number | null>(null);
+  const [canEdit, setCanEdit] = useState(false);
 
   useEffect(() => {
     if (!Number.isInteger(Number(id))) {
@@ -28,12 +64,14 @@ export default function EventResults() {
     if (loading || !event) return;
 
     if (userData.roles.some((role) => allEventEditRoles.includes(role))) {
+      setCanEdit(true);
     } else if (userData.roles.some((role) => allEventViewRoles.includes(role))) {
     } else if (userData.roles.some((role) => specificEventViewRoles.includes(role))) {
       if (
         event?.eventHead1?.email === userData.email ||
         event?.eventHead2?.email === userData.email
       ) {
+        setCanEdit(true);
       } else {
         setError('You do not have permission to view this page');
       }
@@ -43,6 +81,81 @@ export default function EventResults() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event, loading, userData]);
 
+  const handleOpenDialog = (result?: IResult) => {
+    if (result) {
+      setEditingResult(result);
+      setFormData({
+        excelId: result.excelId,
+        teamId: result.teamId,
+        position: result.position,
+        name: result.name,
+        teamName: result.teamName,
+        teamMembers: result.teamMembers,
+      });
+    } else {
+      setEditingResult(null);
+      setFormData(defaultResult);
+    }
+    setOpenDialog(true);
+  };
+
+  const handleCloseDialog = () => {
+    setOpenDialog(false);
+    setEditingResult(null);
+    setFormData(defaultResult);
+    setCrudError('');
+  };
+
+  const handleSaveResult = async () => {
+    if (!event) return;
+    let success = false;
+    if (editingResult) {
+      success = await updateResult(editingResult.id, event.id, formData);
+    } else {
+      success = await addResult(event.id, formData);
+    }
+
+    if (success) {
+      handleCloseDialog();
+      fetchEvent(event.id);
+    }
+  };
+
+  const handleDeleteResult = async () => {
+    if (resultToDelete) {
+      const success = await deleteResult(resultToDelete);
+      if (success) {
+        setDeleteConfirmationOpen(false);
+        setResultToDelete(null);
+        if (event) fetchEvent(event.id);
+      }
+    }
+  };
+
+  const handleDeleteAllResults = async () => {
+    if (event) {
+      const success = await deleteAllResults(event.id);
+      if (success) {
+        setDeleteAllConfirmationOpen(false);
+        setDeleteConfirmationText('');
+        fetchEvent(event.id);
+      }
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]:
+        value === ''
+          ? ''
+          : name === 'excelId' || name === 'teamId' || name === 'position'
+            ? Number(value)
+            : value,
+    }));
+  };
+
   if (error) {
     return <Typography variant="h5">{error}</Typography>;
   }
@@ -66,6 +179,7 @@ export default function EventResults() {
         sx={{
           display: 'flex',
           justifyContent: 'center',
+          alignItems: 'center',
           width: '100%',
         }}
       >
@@ -109,65 +223,87 @@ export default function EventResults() {
           >
             Back
           </Button>
-          <Box sx={{ flexGrow: 1 }} />
+          <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}>
+            {canEdit && (
+              <Button
+                variant="contained"
+                color="primary"
+                startIcon={<AddIcon />}
+                onClick={() => handleOpenDialog()}
+              >
+                Add Result
+              </Button>
+            )}
+          </Box>
+          {canEdit && (
+            <Button
+              variant="contained"
+              color="error"
+              startIcon={<DeleteIcon />}
+              onClick={() => {
+                setDeleteConfirmationText('');
+                setDeleteAllConfirmationOpen(true);
+              }}
+            >
+              Delete All
+            </Button>
+          )}
         </Box>
 
         <Box sx={{ padding: 3 }}>
+          {crudError && (
+            <Typography color="error" variant="body1" sx={{ mb: 2 }}>
+              {crudError}
+            </Typography>
+          )}
+
           <Grid container spacing={2}>
             {event.results && event.results.length > 0 ? (
-              <>
-                <Grid item xs={12}>
-                  <Typography variant="h5">Results</Typography>
-                </Grid>
-                <Grid item xs={12}>
-                  <Divider />
-                </Grid>
-
-                {/* 1st Place */}
-                <Grid item xs={3}>
-                  <Typography>1st </Typography>
+              event.results.map((res) => (
+                <Grid item xs={12} key={res.id}>
+                  <Paper elevation={1} sx={{ p: 2, display: 'flex', alignItems: 'center' }}>
+                    <Grid container spacing={2} alignItems="center">
+                      <Grid item xs={1}>
+                        <Typography variant="h6">{res.position}</Typography>
+                      </Grid>
+                      <Grid item xs={3}>
+                        <Typography variant="body1">
+                          <strong>{res.teamName}</strong>
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={4}>
+                        <Typography variant="body2">{res.teamMembers}</Typography>
+                      </Grid>
+                      <Grid item xs={2}>
+                        <Typography variant="caption">
+                          ID: {res.excelId} | Team: {res.teamId}
+                        </Typography>
+                      </Grid>
+                      {canEdit && (
+                        <Grid item xs={2} sx={{ textAlign: 'right' }}>
+                          <IconButton
+                            color="primary"
+                            onClick={() => handleOpenDialog(res)}
+                            size="small"
+                          >
+                            <EditIcon />
+                          </IconButton>
+                          <IconButton
+                            color="error"
+                            onClick={() => {
+                              setResultToDelete(res.id);
+                              setDeleteConfirmationOpen(true);
+                            }}
+                            size="small"
+                          >
+                            <DeleteIcon />
+                          </IconButton>
+                        </Grid>
+                      )}
+                    </Grid>
+                  </Paper>
                 </Grid>
-                <Grid item xs={3}>
-                  <Typography>
-                    {event.results.length >= 1 ? event.results[0].teamName : ''}
-                  </Typography>
-                </Grid>
-                <Grid item xs={6}>
-                  <Typography>
-                    {event.results.length >= 1 ? event.results[0].teamMembers : ''}
-                  </Typography>
-                </Grid>
-
-                {/* 2nd Place */}
-                <Grid item xs={3}>
-                  <Typography>2nd </Typography>
-                </Grid>
-                <Grid item xs={3}>
-                  <Typography>
-                    {event.results.length >= 2 ? event.results[1].teamName : ''}
-                  </Typography>
-                </Grid>
-                <Grid item xs={6}>
-                  <Typography>
-                    {event.results.length >= 2 ? event.results[1].teamMembers : ''}
-                  </Typography>
-                </Grid>
-
-                {/* 3rd Place */}
-                <Grid item xs={3}>
-                  <Typography>3rd </Typography>
-                </Grid>
-                <Grid item xs={3}>
-                  <Typography>
-                    {event.results.length >= 3 ? event.results[2].teamName : ''}
-                  </Typography>
-                </Grid>
-                <Grid item xs={6}>
-                  <Typography>
-                    {event.results.length >= 3 ? event.results[2].teamMembers : ''}
-                  </Typography>
-                </Grid>
-              </>
+              ))
             ) : (
               <Grid item xs={12}>
                 <Typography align="center">No results declared yet.</Typography>
@@ -175,6 +311,136 @@ export default function EventResults() {
             )}
           </Grid>
         </Box>
+
+        {/* Add/Edit Dialog */}
+        <Dialog open={openDialog} onClose={handleCloseDialog}>
+          <DialogTitle>{editingResult ? 'Edit Result' : 'Add Result'}</DialogTitle>
+          <DialogContent>
+            {crudError && (
+              <Typography color="error" variant="body2" sx={{ mb: 2 }}>
+                {crudError}
+              </Typography>
+            )}
+            <Grid container spacing={2} sx={{ mt: 1 }}>
+              <Grid item xs={6}>
+                <TextField
+                  label="Position"
+                  name="position"
+                  type="number"
+                  fullWidth
+                  value={formData.position}
+                  onChange={handleChange}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Excel ID"
+                  name="excelId"
+                  type="number"
+                  fullWidth
+                  value={formData.excelId}
+                  onChange={handleChange}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Team ID"
+                  name="teamId"
+                  type="number"
+                  fullWidth
+                  value={formData.teamId}
+                  onChange={handleChange}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Name"
+                  name="name"
+                  fullWidth
+                  value={formData.name}
+                  onChange={handleChange}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  label="Team Name"
+                  name="teamName"
+                  fullWidth
+                  value={formData.teamName}
+                  onChange={handleChange}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  label="Team Members"
+                  name="teamMembers"
+                  fullWidth
+                  value={formData.teamMembers}
+                  onChange={handleChange}
+                  placeholder="e.g. Peter Griffin, Brian Griffin"
+                  helperText="Enter team members separated by commas"
+                />
+              </Grid>
+            </Grid>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleCloseDialog}>Cancel</Button>
+            <Button onClick={handleSaveResult} variant="contained" disabled={crudLoading}>
+              {crudLoading ? 'Saving...' : 'Save'}
+            </Button>
+          </DialogActions>
+        </Dialog>
+
+        {/* Delete Confirmation Dialog */}
+        <Dialog open={deleteConfirmationOpen} onClose={() => setDeleteConfirmationOpen(false)}>
+          <DialogTitle>Delete Result</DialogTitle>
+          <DialogContent>
+            <Typography>Are you sure you want to delete this result?</Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setDeleteConfirmationOpen(false)}>Cancel</Button>
+            <Button onClick={handleDeleteResult} color="error" variant="contained">
+              Delete
+            </Button>
+          </DialogActions>
+        </Dialog>
+
+        {/* Delete All Confirmation Dialog */}
+        <Dialog
+          open={deleteAllConfirmationOpen}
+          onClose={() => setDeleteAllConfirmationOpen(false)}
+        >
+          <DialogTitle>Delete All Results</DialogTitle>
+          <DialogContent>
+            <Typography color="error" gutterBottom>
+              Are you sure you want to delete ALL results for this event? This action cannot be
+              undone.
+            </Typography>
+            <Typography variant="body2" gutterBottom>
+              Please type <strong>delete</strong> to confirm.
+            </Typography>
+            <TextField
+              autoFocus
+              margin="dense"
+              label="Confirmation Text"
+              fullWidth
+              variant="outlined"
+              value={deleteConfirmationText}
+              onChange={(e) => setDeleteConfirmationText(e.target.value)}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setDeleteAllConfirmationOpen(false)}>Cancel</Button>
+            <Button
+              onClick={handleDeleteAllResults}
+              color="error"
+              variant="contained"
+              disabled={deleteConfirmationText !== 'delete'}
+            >
+              Delete All
+            </Button>
+          </DialogActions>
+        </Dialog>
       </Box>
     </Box>
   );

From 87f1de94b096b63c2fe6c355506da8a4061e7458 Mon Sep 17 00:00:00 2001
From: dijith-481 <dijithdinesh@protonmail.com>
Date: Sun, 28 Dec 2025 22:09:43 +0530
Subject: [PATCH 4/4] autopick result based on username or team name

---
 src/Hooks/Event/eventTypes.tsx                |  6 +-
 src/Hooks/Event/results/resultValidation.tsx  | 10 +-
 .../Event/results/useEventResultsCrud.tsx     | 20 +++-
 src/Pages/Events/EventResults.tsx             | 98 ++++++++++++++++++-
 4 files changed, 118 insertions(+), 16 deletions(-)

diff --git a/src/Hooks/Event/eventTypes.tsx b/src/Hooks/Event/eventTypes.tsx
index fe4d2d4..4796831 100644
--- a/src/Hooks/Event/eventTypes.tsx
+++ b/src/Hooks/Event/eventTypes.tsx
@@ -47,12 +47,12 @@ export interface IResult {
   id: number;
   eventId: number;
   excelId: number;
-  teamId: number;
+  teamId?: number | null;
   event?: IEvent;
   position: number;
   name: string;
-  teamName: string;
-  teamMembers: string;
+  teamName?: string | null;
+  teamMembers?: string | null;
 }
 
 export interface IEventHead {
diff --git a/src/Hooks/Event/results/resultValidation.tsx b/src/Hooks/Event/results/resultValidation.tsx
index f808c81..679bc32 100644
--- a/src/Hooks/Event/results/resultValidation.tsx
+++ b/src/Hooks/Event/results/resultValidation.tsx
@@ -8,15 +8,11 @@ export const resultValidationSchema: ObjectSchema<Omit<IResult, 'id' | 'eventId'
       .required('Excel ID is required'),
     teamId: number()
       .transform((val) => (isNaN(val) ? undefined : val))
-      .required('Team ID is required'),
+      .notRequired(),
     position: number().required('Position is required').min(1, 'Position must be at least 1'),
     name: string().required('Name is required'),
-    teamName: string()
-      .required('Team Name is required')
-      .min(2, 'Team Name must be at least 2 characters'),
-    teamMembers: string()
-      .required('Team Members are required')
-      .min(2, 'Team Members must be at least 2 characters'),
+    teamName: string().notRequired().min(2, 'Team Name must be at least 2 characters'),
+    teamMembers: string().notRequired().min(2, 'Team Members must be at least 2 characters'),
   });
 
 export interface IValidateResult extends InferType<typeof resultValidationSchema> {}
diff --git a/src/Hooks/Event/results/useEventResultsCrud.tsx b/src/Hooks/Event/results/useEventResultsCrud.tsx
index 23508c3..9c5917b 100644
--- a/src/Hooks/Event/results/useEventResultsCrud.tsx
+++ b/src/Hooks/Event/results/useEventResultsCrud.tsx
@@ -1,7 +1,6 @@
 import { useContext, useState } from 'react';
 import { ApiContext } from 'Contexts/Api/ApiContext';
 import { getErrMsg } from 'Hooks/errorParser';
-import { IResult } from '../eventTypes';
 import { IValidateResult, resultValidationSchema } from './resultValidation';
 import { ValidationError } from 'yup';
 
@@ -15,7 +14,14 @@ export function useEventResultsCrud() {
       setLoading(true);
       setError('');
       await resultValidationSchema.validate(result, { abortEarly: false });
-      await axiosEventsPrivate.post('/api/Result', { ...result, eventId });
+      const payload = {
+        ...result,
+        eventId,
+        teamId: result.teamId ?? 0,
+        teamName: result.teamName ?? '',
+        teamMembers: result.teamMembers ?? '',
+      };
+      await axiosEventsPrivate.post('/api/Result', payload);
       return true;
     } catch (err: any) {
       if (err instanceof ValidationError) {
@@ -34,7 +40,15 @@ export function useEventResultsCrud() {
       setLoading(true);
       setError('');
       await resultValidationSchema.validate(result, { abortEarly: false });
-      await axiosEventsPrivate.put('/api/Result', { ...result, id: resultId, eventId });
+      const payload = {
+        ...result,
+        id: resultId,
+        eventId,
+        teamId: result.teamId ?? 0,
+        teamName: result.teamName ?? '',
+        teamMembers: result.teamMembers ?? '',
+      };
+      await axiosEventsPrivate.put('/api/Result', payload);
       return true;
     } catch (err: any) {
       if (err instanceof ValidationError) {
diff --git a/src/Pages/Events/EventResults.tsx b/src/Pages/Events/EventResults.tsx
index 3ca378f..5ec1776 100644
--- a/src/Pages/Events/EventResults.tsx
+++ b/src/Pages/Events/EventResults.tsx
@@ -1,4 +1,5 @@
 import {
+  Autocomplete,
   Box,
   Button,
   Dialog,
@@ -27,6 +28,8 @@ import {
 import { useEventResultsCrud } from 'Hooks/Event/results/useEventResultsCrud';
 import { defaultResult, IValidateResult } from 'Hooks/Event/results/resultValidation';
 import { IResult } from 'Hooks/Event/eventTypes';
+import { useEventRegList } from 'Hooks/Event/registrations/useEventReg';
+import { IRegistration, ITeam } from 'Hooks/Event/registrationTypes';
 
 export default function EventResults() {
   const { event, fetchEvent, loading, error, setError } = useEventDesc();
@@ -43,6 +46,14 @@ export default function EventResults() {
     setError: setCrudError,
   } = useEventResultsCrud();
 
+  const {
+    fetchEventRegList,
+    eventRegsIndividual,
+    eventRegsTeam,
+    individualRegsLoading,
+    teamRegsLoading,
+  } = useEventRegList();
+
   const [openDialog, setOpenDialog] = useState(false);
   const [editingResult, setEditingResult] = useState<IResult | null>(null);
   const [formData, setFormData] = useState<IValidateResult>(defaultResult);
@@ -55,8 +66,10 @@ export default function EventResults() {
   useEffect(() => {
     if (!Number.isInteger(Number(id))) {
       setError('Invalid Event ID');
+    } else {
+      fetchEvent(Number(id));
+      fetchEventRegList(Number(id));
     }
-    fetchEvent(Number(id));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
@@ -156,6 +169,45 @@ export default function EventResults() {
     }));
   };
 
+  const handleRegistrationSelect = (_event: any, newValue: IRegistration | ITeam | null) => {
+    if (!newValue) return;
+
+    if ('user' in newValue) {
+      const reg = newValue as IRegistration;
+      const excelIdVal =
+        typeof reg.excelId === 'object' && reg.excelId !== null && 'id' in reg.excelId
+          ? (reg.excelId as any).id
+          : reg.excelId;
+
+      setFormData((prev) => ({
+        ...prev,
+        excelId: Number(excelIdVal) || 0,
+        name: reg.user.name,
+        teamId: reg.teamId?.id ?? reg.user.id,
+        teamName: reg.user.name,
+        teamMembers: reg.user.name,
+      }));
+    } else {
+      const team = newValue as ITeam;
+      const firstMemberExcelId = team.registrations[0]?.excelId;
+      const excelIdVal =
+        typeof firstMemberExcelId === 'object' &&
+        firstMemberExcelId !== null &&
+        'id' in firstMemberExcelId
+          ? (firstMemberExcelId as any).id
+          : firstMemberExcelId;
+
+      setFormData((prev) => ({
+        ...prev,
+        excelId: Number(excelIdVal) || 0,
+        name: team.name,
+        teamId: team.id,
+        teamName: team.name,
+        teamMembers: team.registrations.map((r) => r.user.name).join(', '),
+      }));
+    }
+  };
+
   if (error) {
     return <Typography variant="h5">{error}</Typography>;
   }
@@ -312,8 +364,7 @@ export default function EventResults() {
           </Grid>
         </Box>
 
-        {/* Add/Edit Dialog */}
-        <Dialog open={openDialog} onClose={handleCloseDialog}>
+        <Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="sm" fullWidth>
           <DialogTitle>{editingResult ? 'Edit Result' : 'Add Result'}</DialogTitle>
           <DialogContent>
             {crudError && (
@@ -322,6 +373,41 @@ export default function EventResults() {
               </Typography>
             )}
             <Grid container spacing={2} sx={{ mt: 1 }}>
+              <Grid item xs={12}>
+                <Autocomplete
+                  options={
+                    (event.isTeam ? eventRegsTeam : eventRegsIndividual) as (
+                      | ITeam
+                      | IRegistration
+                    )[]
+                  }
+                  getOptionLabel={(option) => {
+                    if ('user' in option) {
+                      const excelIdVal =
+                        typeof option.excelId === 'object' &&
+                        option.excelId !== null &&
+                        'id' in option.excelId
+                          ? (option.excelId as any).id
+                          : option.excelId;
+                      return `${option.user.name} (${excelIdVal})`;
+                    } else {
+                      // ITeam
+                      return `${option.name} (ID: ${option.id})`;
+                    }
+                  }}
+                  onChange={handleRegistrationSelect}
+                  loading={event.isTeam ? teamRegsLoading : individualRegsLoading}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label={event.isTeam ? 'Select Team' : 'Select Participant'}
+                      placeholder="Search..."
+                      InputLabelProps={{ shrink: true }}
+                    />
+                  )}
+                />
+              </Grid>
+
               <Grid item xs={6}>
                 <TextField
                   label="Position"
@@ -330,6 +416,7 @@ export default function EventResults() {
                   fullWidth
                   value={formData.position}
                   onChange={handleChange}
+                  InputLabelProps={{ shrink: true }}
                 />
               </Grid>
               <Grid item xs={6}>
@@ -340,6 +427,7 @@ export default function EventResults() {
                   fullWidth
                   value={formData.excelId}
                   onChange={handleChange}
+                  InputLabelProps={{ shrink: true }}
                 />
               </Grid>
               <Grid item xs={6}>
@@ -350,6 +438,7 @@ export default function EventResults() {
                   fullWidth
                   value={formData.teamId}
                   onChange={handleChange}
+                  InputLabelProps={{ shrink: true }}
                 />
               </Grid>
               <Grid item xs={6}>
@@ -359,6 +448,7 @@ export default function EventResults() {
                   fullWidth
                   value={formData.name}
                   onChange={handleChange}
+                  InputLabelProps={{ shrink: true }}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -368,6 +458,7 @@ export default function EventResults() {
                   fullWidth
                   value={formData.teamName}
                   onChange={handleChange}
+                  InputLabelProps={{ shrink: true }}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -379,6 +470,7 @@ export default function EventResults() {
                   onChange={handleChange}
                   placeholder="e.g. Peter Griffin, Brian Griffin"
                   helperText="Enter team members separated by commas"
+                  InputLabelProps={{ shrink: true }}
                 />
               </Grid>
             </Grid>