OneCommunityGlobal · AnthonyWeathers · Apr 14, 2026
diff --git a/src/actions/warnings.js b/src/actions/warnings.js
@@ -9,6 +9,7 @@ import {
   postNewWarning as postNewWarningAction,
   deleteWarningDescription as deleteWarningDescriptionAction,
   updateWarningDescription as updateWarningDescriptionAction,
+  reorderWarningDescriptions as reorderWarningDescriptionsAction,
   editWarningDescription as editWarningDescriptionAction,
 } from '../constants/warning';
 
@@ -163,3 +164,18 @@ export const updateWarningDescription = warningDescriptionId => {
     }
   };
 };
+
+export const reorderWarningDescriptions = warningDescriptions => {
+  const url = ENDPOINTS.REORDER_WARNING_DESCRIPTIONS(warningDescriptions);
+
+  return async dispatch => {
+    try {
+      const res = await axios.put(url, { warningDescriptions });
+      const response = await dispatch(reorderWarningDescriptionsAction(res.data));
+
+      return response.payload;
+    } catch (error) {
+      return { error: error.message };
+    }
+  };
+};
diff --git a/src/components/Warnings/Warnings.jsx b/src/components/Warnings/Warnings.jsx
@@ -150,20 +150,22 @@ export default function Warning({ personId, username, userRole, displayUser }) {
 
   const warnings = !toggle
     ? null
-    : usersWarnings.map(warning => (
-        <div className={`${styles['warning-item-container']}`} key={warning.title}>
-          <div className={`${styles['warning-wrapper']}`}>
-            <WarningIcons
-              warnings={warning.warnings}
-              warningText={warning.title}
-              handleWarningIconClicked={handlePostWarningDetails}
-              handleShowWarningModal={handleShowWarningModal}
-              numberOfWarnings={warning.warnings.length}
-            />
-            <p className={`${styles['warning-text']}`}> {warning.title}</p>
+    : usersWarnings
+        .map(warning => (
+          <div className={`${styles['warning-item-container']}`} key={warning.title}>
+            <div className={`${styles['warning-wrapper']}`}>
+              <WarningIcons
+                warnings={warning.warnings}
+                warningText={warning.title}
+                handleWarningIconClicked={handlePostWarningDetails}
+                handleShowWarningModal={handleShowWarningModal}
+                numberOfWarnings={warning.warnings.length}
+              />
+              <p className={`${styles['warning-text']}`}> {warning.title}</p>
+            </div>
           </div>
-        </div>
-      ));
+        ))
+        .sort((warn1, warn2) => warn1.order - warn2.order);
 
   return (
     <div className={`${styles['warnings-container']}`}>

diff --git a/src/components/Warnings/Warnings.module.css b/src/components/Warnings/Warnings.module.css
@@ -185,6 +185,10 @@
   margin: 0.5em 0;
 }
 
+.modal__information.darkMode {
+  color: black !important;
+}
+
 .alert__container {
   margin-top: 0.5em;
   text-align: center;
@@ -220,6 +224,15 @@ input[type='text'] {
 .warnings__tracker__modal {
   z-index: 1100 !important;
 }
+
+.warning__tracker__modal_save__changes__btns {
+  width: 20%;
+}
+
+.warnings__descriptions__title.darkMode {
+  color: black !important;
+}
+
 /* Media query for screens smaller than 767px */
 @media (max-width: 767px) {
   .warnings-container {

diff --git a/src/components/Warnings/modals/WarningTrackerModal.jsx b/src/components/Warnings/modals/WarningTrackerModal.jsx
@@ -7,7 +7,7 @@
 /* eslint-disable no-alert */
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Alert } from 'reactstrap';
 import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
@@ -19,6 +19,7 @@
   updateWarningDescription,
   deleteWarningDescription,
   editWarningDescription,
+  reorderWarningDescriptions,
 } from '../../../actions/warnings';
 
 import styles from '../Warnings.module.css';
@@ -47,6 +48,9 @@
   const [warningWasEdited, setWarningWasEdited] = useState(false);
   const [isPermanent, setIsPermanent] = useState(false);
   const [error, setError] = useState(null);
+  const [dragIndex, setDragIndex] = useState(null);
+  const [warningsEdited, setWarningsEdited] = useState(false);
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   const dispatch = useDispatch();
   const rolesAllowedToTracking = ['Administrator', 'Owner'];
@@ -86,17 +90,41 @@
         <Popover id="details">
           <Popover.Title as="h4">Information</Popover.Title>
           <Popover.Content>
-            <p className={styles.modal__information}>
+            <p
+              className={
+                darkMode
+                  ? `${styles.modal__information} ${styles.darkMode}`
+                  : styles.modal__information
+              }
+            >
               Pressing the "+" button will allow you to activate the warning tracker.
             </p>
-            <p className={styles.modal__information}>
+            <p
+              className={
+                darkMode
+                  ? `${styles.modal__information} ${styles.darkMode}`
+                  : styles.modal__information
+              }
+            >
               Pressing the "-" button will allow you to deactivate the warning tracker.
             </p>
-            <p className={styles.modal__information}>
+            <p
+              className={
+                darkMode
+                  ? `${styles.modal__information} ${styles.darkMode}`
+                  : styles.modal__information
+              }
+            >
               Pressing the "x" button will allow you to delete the warning tracker. This will also
               delete all assoicated warnings for every user (be careful doing this!).
             </p>
-            <p className={styles.modal__information}>
+            <p
+              className={
+                darkMode
+                  ? `${styles.modal__information} ${styles.darkMode}`
+                  : styles.modal__information
+              }
+            >
               Pressing the "Add New Warning Tracker" button will allow you to add a new warning to
               the list.
             </p>
@@ -165,25 +193,42 @@
   const handleCancelEdit = () => {
     fetchWarningDescriptions();
     setWarningEdited(false);
+    setWarningsEdited(false);
     setWarningWasEdited(false);
   };
 
   const handleSaveEditedWarning = () => {
-    dispatch(editWarningDescription(editedWarning)).then(res => {
-      if (res.error) {
-        setError(res.error);
+    if (warningEdited) {
+      dispatch(editWarningDescription(editedWarning)).then(res => {
+        if (res.error) {
+          setError(res.error);
+          setWarningEdited(false);
+          setEditedWarning(null);
+          fetchWarningDescriptions();
+          return;
+        }
         setWarningEdited(false);
         setEditedWarning(null);
+        setError(null);
+        getUsersWarnings();
         fetchWarningDescriptions();
-        return;
-      }
-      setWarningEdited(false);
-      setEditedWarning(null);
-      setError(null);
-      getUsersWarnings();
-      fetchWarningDescriptions();
-      setWarningWasEdited(true);
-    });
+        setWarningWasEdited(true);
+      });
+    } else if (warningsEdited) {
+      dispatch(reorderWarningDescriptions(warningDescriptions)).then(res => {
+        if (res?.error) {
+          setError(res.error);
+          setWarningsEdited(false);
+          fetchWarningDescriptions();
+          return;
+        }
+        setWarningsEdited(false);
+        setError(null);
+        getUsersWarnings();
+        fetchWarningDescriptions();
+        setWarningWasEdited(true);
+      });
+    }
   };
 
   // eslint-disable-next-line no-shadow
@@ -246,6 +291,23 @@
     );
   }
 
+  const handleDragStart = index => {
+    setDragIndex(index);
+  };
+
+  const handleDragOver = (e, index) => {
+    e.preventDefault();
+    if (dragIndex === index) return;
+
+    const updatedWarningList = [...warningDescriptions];
+    const [movedWarning] = updatedWarningList.splice(dragIndex, 1);
+    updatedWarningList.splice(index, 0, movedWarning);
+
+    setDragIndex(index);
+    setWarningDescriptions(updatedWarningList);
+    setWarningsEdited(true);
+  };
+
   return (
     // need to make .modal in modal.css z-index go to 1051
     // or make .modal-backdrop z-index go to 1049 otherwise the important makes it nullify the warning tracker modal
@@ -286,7 +348,12 @@
       )}
       <ModalBody>
         {warningDescriptions.map((warning, index) => (
-          <div className={styles.warnings__descriptions} key={warning._id}>
+          <div
+            className={styles.warnings__descriptions}
+            key={warning._id}
+            onDragStart={() => handleDragStart(index)}
+            onDragOver={e => handleDragOver(e, index)}
+          >
             <img src={reorder} alt="reorder" className={styles.warning__reorder} />
             {warning.activeWarning ? (
               <OverlayTrigger
@@ -337,22 +404,30 @@
               placeholder="warning title"
               className={`${styles.warnings__descriptions__title} ${
                 warning.activeWarning ? '' : styles['warnings__descriptions__title--gray']
-              }`}
+              } ${darkMode ? styles.darkMode : ''}`}
             />
           </div>
         ))}
-        {warningEdited && (
-          <div className={styles.btn__container}>
-            <Button onClick={handleSaveEditedWarning} color="success">
+        {(warningEdited || warningsEdited) && (
+          <div className={styles.btn__container} style={{ gap: '5px' }}>
+            <Button
+              className={styles.warning__tracker__modal_save__changes__btns}
+              onClick={handleSaveEditedWarning}
+              color="success"
+            >
               Save
             </Button>
-            <Button onClick={handleCancelEdit} color="danger" className="cancel__btn">
+            <Button
+              onClick={handleCancelEdit}
+              color="danger"
+              className={`cancel__btn ${styles.warning__tracker__modal_save__changes__btns}`}
+            >
               Cancel
             </Button>
           </div>
         )}
 
-        <div className={styles.btn__container}>
+        <div className={styles.btn__container} style={{ gap: '5px' }}>
           {!toggeleWarningInput && (
             <Button
               className={styles.add__btn}

diff --git a/src/constants/warning.js b/src/constants/warning.js
@@ -4,6 +4,7 @@ export const DELETE_WARNINGS_BY_USER_ID = 'DELETE_WARNINGS_BY_USER_ID';
 export const CURRENT_WARNINGS = 'CURRENT_WARNINGS';
 export const POST_NEW_WARNING = 'POST_NEW_WARNING';
 export const UPDATE_WARNING_DESCRIPTION = 'UPDATE_WARNING_DESCRIPTION';
+export const REORDER_WARNING_DESCRIPTIONS = 'REORDER_WARNING_DESCRIPTIONS';
 export const EDIT_WARNING_DESCRIPTION = 'EDIT_WARNING_DESCRIPTION';
 export const GET_SPECIAL_WARNINGS = 'GET_SPECIAL_WARNINGS';
 
@@ -35,6 +36,10 @@ export const updateWarningDescription = data => ({
   type: UPDATE_WARNING_DESCRIPTION,
   payload: data,
 });
+export const reorderWarningDescriptions = data => ({
+  type: REORDER_WARNING_DESCRIPTIONS,
+  payload: data,
+});
 export const editWarningDescription = data => ({
   type: EDIT_WARNING_DESCRIPTION,
   payload: data,

diff --git a/src/utils/URL.js b/src/utils/URL.js
@@ -132,6 +132,7 @@ export const ENDPOINTS = {
   GET_CURRENT_WARNINGS: () => `${APIEndpoint}/currentWarnings`,
   POST_NEW_WARNING: () => `${APIEndpoint}/currentWarnings`,
   UPDATE_WARNING_DESCRIPTION: warningId => `${APIEndpoint}/currentWarnings/${warningId}`,
+  REORDER_WARNING_DESCRIPTIONS: () => `${APIEndpoint}/currentWarnings`,
   DELETE_WARNING_DESCRIPTION: warningId => `${APIEndpoint}/currentWarnings/${warningId}`,
   EDIT_WARNING_DESCRIPTION: () => `${APIEndpoint}/currentWarnings/edit`,
   GET_WARNINGS_BY_USER_ID: userId => `${APIEndpoint}/warnings/${userId}`,