From a0ea24dd67a4764e7b257a1d9903268ec409c626 Mon Sep 17 00:00:00 2001
From: sophia-massie <96220951+sophia-massie@users.noreply.github.com>
Date: Tue, 11 Feb 2025 09:50:46 -0600
Subject: [PATCH] task/WP-859-860-861 Admin Extension Listing (#423)

---
 .../templates/list_admin_extension.html       |   3 +-
 .../templates/view_admin_extension_modal.html |  52 +----
 apcd_cms/src/apps/admin_extension/views.py    |   2 +-
 .../EditExtensionModal/EditExtensionModal.tsx | 182 +++++++++++-------
 .../ViewExtensionModal/ViewExtensionModal.tsx | 125 +++++++-----
 5 files changed, 198 insertions(+), 166 deletions(-)

diff --git a/apcd_cms/src/apps/admin_extension/templates/list_admin_extension.html b/apcd_cms/src/apps/admin_extension/templates/list_admin_extension.html
index 97b7fb49..89ea6620 100644
--- a/apcd_cms/src/apps/admin_extension/templates/list_admin_extension.html
+++ b/apcd_cms/src/apps/admin_extension/templates/list_admin_extension.html
@@ -5,10 +5,9 @@
 <link rel="stylesheet" href="{% static 'apcd_cms/css/table.css' %}">
 <link rel="stylesheet" href="{% static 'apcd_cms/css/modal.css' %}">
 <link rel="stylesheet" href="{% static 'admin_extension/css/table.css' %}">
-<link rel="stylesheet" href="{% static 'admin_extension/css/modal.css' %}">
 
 <div class="container">
   {% include "nav_cms_breadcrumbs.html" %}
   <div id="admin-extensions-root"></div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/apcd_cms/src/apps/admin_extension/templates/view_admin_extension_modal.html b/apcd_cms/src/apps/admin_extension/templates/view_admin_extension_modal.html
index a5a0c355..c36028c5 100644
--- a/apcd_cms/src/apps/admin_extension/templates/view_admin_extension_modal.html
+++ b/apcd_cms/src/apps/admin_extension/templates/view_admin_extension_modal.html
@@ -5,54 +5,6 @@
     <div class="modal-dialog modal-lg">
   
       <!-- Modal content-->
-      <div class="modal-content">
-        <div class="modal-header">
-          <h4 class="modal-title">Extension Details ID {{r.extension_id}} for {{r.entity_name}}</h4>
-          <button type="button" class="close" data-dismiss="modal">
-            <span aria-hidden="true">&#xe912;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div>
-            <dl>
-              <h4>Details</h4>
-                <div class="modal-section">
-                    <dl class="c-data-list--is-vert c-data-list--is-wide">
-                        <dt class="c-data-list__key">Created</dt>
-                        <dd class="c-data-list__value">{{r.created_at}}</dd>
-                        <dt class="c-data-list__key">Entity Organization</dt>
-                        <dd class="c-data-list__value">{{r.entity_name}}</dd>
-                        <dt class="c-data-list__key">Requestor</dt>
-                        <dd class="c-data-list__value">{{r.requestor_name}}</dd>
-                        <dt class="c-data-list__key">Requestor Email</dt>
-                        <dd class="c-data-list__value">{{r.requestor_email}}</dd> 
-                        <dt class="c-data-list__key">Extension Type</dt>
-                        <dd class="c-data-list__value">{{r.extension_type}}</dd>
-                        <dt class="c-data-list__key">Status</dt>
-                        <dd class="c-data-list__value">{{r.status}}</dd>
-                        <dt class="c-data-list__key">Outcome</dt>
-                        <dd class="c-data-list__value">{{r.outcome}}</dd> 
-                        <dt class="c-data-list__key">Applicable Data Period</dt>                
-                        <dd class="c-data-list__value">{{r.applicable_data_period}}</dd>
-                        <dt class="c-data-list__key">Current Expected Date</dt>                
-                        <dd class="c-data-list__value">{{r.current_expected_date}}</dd>
-                        <dt class="c-data-list__key">Requested Target Date</dt>                
-                        <dd class="c-data-list__value">{{r.requested_target_date}}</dd>
-                        <dt class="c-data-list__key">Approved Expiration Date</dt>                
-                        <dd class="c-data-list__value">{{r.approved_expiration_date}}</dd>
-                        <dt class="c-data-list__key">Extension Justification</dt>
-                        <dd class="c-data-list__value">{{r.explanation_justification}}</dd>
-                        <dt class="c-data-list__key">Extension Notes</dt>
-                        <dd class="c-data-list__value">{{r.notes}}</dd>
-                        <dt class="c-data-list__key">Last Updated</dt>
-                        <dd class="c-data-list__value">{{r.updated_at}}</dd>  
-                    </dl> 
-                    <hr>
-                </div>
-              </dd>
-            </dl>
-          </div>
-        </div>
-      </div>
+      <div id="view-extension-modal-root"></div>
     </div>
-  </div>
\ No newline at end of file
+  </div>
diff --git a/apcd_cms/src/apps/admin_extension/views.py b/apcd_cms/src/apps/admin_extension/views.py
index 29e87afd..f7e7e155 100644
--- a/apcd_cms/src/apps/admin_extension/views.py
+++ b/apcd_cms/src/apps/admin_extension/views.py
@@ -44,7 +44,7 @@ def get_extensions_list_json(self, extensions, *args, **kwargs):
             page_num = 1
 
         def getDate(row):
-            date = row[2]
+            date = row[9]
             return date if date is not None else datetimeDate(1,1,1) # put 'None' date entries all together at end of listing w/ date 1-1-0001
 
         extensions = sorted(extensions, key=lambda row:getDate(row), reverse=True)
diff --git a/apcd_cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx b/apcd_cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
index 82bb37f8..a47f77da 100644
--- a/apcd_cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
+++ b/apcd_cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
@@ -1,24 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import {
-  Modal,
-  ModalBody,
-  ModalHeader,
-  Label,
-  FormGroup,
-  Row,
-  Col,
-  Alert,
-} from 'reactstrap';
-import {
-  Formik,
-  Field,
-  Form,
-  ErrorMessage,
-  useFormik,
-  FormikHelpers,
-  FormikProvider,
-} from 'formik';
+import { Modal, ModalBody, ModalHeader, Row, Col, Alert } from 'reactstrap';
+import { Field, useFormik, FormikHelpers, FormikProvider } from 'formik';
 import { fetchUtil } from 'utils/fetchUtil';
+import { formatDate } from 'utils/dateUtil';
 import * as Yup from 'yup';
 import { ExtensionRow } from 'hooks/admin';
 import { useSubmitterDataPeriods } from 'hooks/entities';
@@ -27,7 +11,6 @@ import {
   convertPeriodLabelToApiValue,
   convertApiValueToPeriodLabel,
 } from 'utils/dateUtil';
-import styles from './EditExtensionModal.module.css';
 import FieldWrapper from 'core-wrappers/FieldWrapperFormik';
 import Button from 'core-components/Button';
 
@@ -60,33 +43,104 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
   const [showErrorMessage, setShowErrorMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [extensionFields, setExtensionFields] = useState([
-    {
-      label: 'Applicable Data Period',
-      value: extension?.applicable_data_period || 'None',
-    },
-    {
-      label: 'Approved Expiration Date',
-      value: extension?.approved_expiration_date || 'None',
-    },
-    { label: 'Extension Status', value: extension?.ext_status },
-    { label: 'Extension Outcome', value: extension?.ext_outcome },
-    { label: 'Extension Notes', value: extension?.notes || 'None' },
-  ]);
+  const [currentExtension, setCurrentExtension] = useState<ExtensionRow | null>(
+    extension
+  );
+
   const {
     data: submitterData,
     isLoading: submitterDataLoading,
     error: submitterDataError,
   } = useSubmitterDataPeriods(extension?.submitter_id);
 
-  if (!extension) return null;
+  useEffect(() => {
+    setCurrentExtension(extension);
+  }, [extension]);
+
+  if (!currentExtension) return null;
+
+  const extensionFields = [
+    {
+      label: 'Created',
+      value: currentExtension?.created
+        ? formatDate(currentExtension.created)
+        : 'None',
+    },
+    {
+      label: 'Entity Organization',
+      value: currentExtension?.org_name,
+    },
+    {
+      label: 'Requestor',
+      value: currentExtension?.requestor,
+    },
+    {
+      label: 'Requestor Email',
+      value: currentExtension?.requestor_email,
+    },
+    {
+      label: 'Extension Type',
+      value: currentExtension?.type,
+    },
+    {
+      label: 'Status',
+      value: currentExtension?.ext_status,
+    },
+    {
+      label: 'Outcome',
+      value: currentExtension?.ext_outcome,
+    },
+    {
+      label: 'Applicable Data Period',
+      value: currentExtension?.applicable_data_period,
+    },
+    {
+      label: 'Current Expected Date',
+      value:
+        currentExtension?.current_expected_date &&
+        currentExtension?.current_expected_date !== 'None'
+          ? formatDate(currentExtension?.current_expected_date)
+          : 'None',
+    },
+    {
+      label: 'Requested Target Date',
+      value:
+        currentExtension?.requested_target_date &&
+        currentExtension?.requested_target_date !== 'None'
+          ? formatDate(currentExtension?.requested_target_date)
+          : 'None',
+    },
+    {
+      label: 'Approved Expiration Date',
+      value:
+        currentExtension?.approved_expiration_date &&
+        currentExtension?.approved_expiration_date !== 'None'
+          ? formatDate(currentExtension?.requested_target_date)
+          : 'None',
+    },
+    {
+      label: 'Extension Justification',
+      value: currentExtension?.explanation_justification,
+    },
+    {
+      label: 'Extension Notes',
+      value: currentExtension?.notes,
+    },
+    {
+      label: 'Last Updated',
+      value:
+        currentExtension?.updated_at && currentExtension?.updated_at !== 'None'
+          ? formatDate(currentExtension?.updated_at)
+          : 'None',
+    },
+  ];
 
   // Use the custom hook to get form fields and validation
   const useFormFields = () => {
     const initialValues: FormValues = {
-      ...extension,
-      ext_id: extension?.ext_id,
-      notes: extension?.notes || 'None', // Set notes to 'None' if it is null
+      ...currentExtension,
+      ext_id: currentExtension?.ext_id,
+      notes: currentExtension?.notes || 'None', // Set notes to 'None' if it is null
     };
 
     const validationSchema = Yup.object({
@@ -121,26 +175,20 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
         body: api_values,
       });
 
-      if (onEditSuccess && response) {
-        onEditSuccess(response);
-        setExtensionFields([
-          {
-            label: 'Applicable Data Period',
-            value:
-              convertApiValueToPeriodLabel(values.applicable_data_period) ||
-              'None',
-          },
-          {
-            label: 'Approved Expiration Date',
-            value: values.approved_expiration_date || 'None',
-          },
-          { label: 'Extension Status', value: values.ext_status },
-          { label: 'Extension Outcome', value: values.ext_outcome },
-          { label: 'Extension Notes', value: values.notes || 'None' },
-        ]);
-      }
+      if (response) {
+        setCurrentExtension((prevExtension) => ({
+          ...prevExtension!,
+          ext_status: values.ext_status,
+          ext_outcome: values.ext_outcome,
+          applicable_data_period: values.applicable_data_period,
+          approved_expiration_date: values.approved_expiration_date,
+          notes: values.notes,
+          updated_at: new Date().toISOString(),
+        }));
 
-      setShowSuccessMessage(true);
+        setShowSuccessMessage(true);
+        if (onEditSuccess) onEditSuccess(response);
+      }
     } catch (error: any) {
       if (error.response && error.response.data) {
         // Use error message from the server response
@@ -170,6 +218,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
   const handleClose = () => {
     setShowSuccessMessage(false);
     setShowErrorMessage(false);
+    onClose();
   };
 
   const closeBtn = (
@@ -186,7 +235,8 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
         className="modal-dialog modal-lg"
       >
         <ModalHeader close={closeBtn}>
-          Edit Extension ID {extension.ext_id} for {extension.org_name}
+          Edit Extension ID {currentExtension.ext_id} for{' '}
+          {currentExtension.org_name}
         </ModalHeader>
         <ModalBody>
           <h4 className="modal-header">Edit Selected Extension</h4>
@@ -223,7 +273,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
                         ))}
                       </Field>
                       <div className="help-text">
-                        Current: {extension.applicable_data_period}
+                        Current: {currentExtension.applicable_data_period}
                       </div>
                     </FieldWrapper>
                   </Col>
@@ -246,10 +296,10 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
                         onBlur={formik.handleBlur}
                       />
                       <div className="help-text">
-                        Current:{' '}
-                        {extension.approved_expiration_date
+                        Requested Target Date:{' '}
+                        {currentExtension.requested_target_date
                           ? new Date(
-                              extension.approved_expiration_date
+                              currentExtension.requested_target_date
                             ).toLocaleDateString()
                           : 'None'}
                       </div>
@@ -327,7 +377,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
                 </Row>
                 <br />
                 <Alert color="success" isOpen={showSuccessMessage}>
-                  Success: The exception data has been successfully updated.
+                  Success: The extension data has been successfully updated.
                 </Alert>
                 <Alert color="danger" isOpen={showErrorMessage}>
                   Error: {errorMessage}
@@ -347,12 +397,8 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
           <div>
             {extensionFields.map((field, index) => (
               <Row key={index}>
-                <Col md={6}>
-                  <p>{field.label}:</p>
-                </Col>
-                <Col md={6}>
-                  <p>{field.value}</p>
-                </Col>
+                <Col md={{ size: 4, offset: 1 }}>{field.label}:</Col>
+                <Col md={6}>{field.value}</Col>
               </Row>
             ))}
           </div>
diff --git a/apcd_cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx b/apcd_cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx
index ab877972..d38dcc2d 100644
--- a/apcd_cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx
+++ b/apcd_cms/src/client/src/components/Extensions/ViewExtensionModal/ViewExtensionModal.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';
 import { ExtensionRow } from 'hooks/admin';
-import styles from './ViewExtensionModal.module.css';
 
 const ViewExtensionModal: React.FC<{
   extension: ExtensionRow;
@@ -18,53 +17,89 @@ const ViewExtensionModal: React.FC<{
       <ModalHeader close={closeBtn}>
         Extension Details ID {extension.ext_id} for {extension.org_name}
       </ModalHeader>
-
       <ModalBody className="modal-body">
         <div>
           <h4>Details</h4>
           <div className="modal-section">
-            <dl className="c-data-list--is-vert c-data-list--is-wide">
-              <dt className="c-data-list__key">Created</dt>
-              <dd className="c-data-list__value">{extension.created}</dd>
-              <dt className="c-data-list__key">Entity Organization</dt>
-              <dd className="c-data-list__value">{extension.org_name}</dd>
-              <dt className="c-data-list__key">Requestor</dt>
-              <dd className="c-data-list__value">{extension.requestor}</dd>
-              <dt className="c-data-list__key">Requestor Email</dt>
-              <dd className="c-data-list__value">
-                {extension.requestor_email}
-              </dd>
-              <dt className="c-data-list__key">Extension Type</dt>
-              <dd className="c-data-list__value">{extension.type}</dd>
-              <dt className="c-data-list__key">Status</dt>
-              <dd className="c-data-list__value">{extension.ext_status}</dd>
-              <dt className="c-data-list__key">Outcome</dt>
-              <dd className="c-data-list__value">{extension.ext_outcome}</dd>
-              <dt className="c-data-list__key">Applicable Data Period</dt>
-              <dd className="c-data-list__value">
-                {extension.applicable_data_period}
-              </dd>
-              <dt className="c-data-list__key">Current Expected Date</dt>
-              <dd className="c-data-list__value">
-                {extension.current_expected_date}
-              </dd>
-              <dt className="c-data-list__key">Requested Target Date</dt>
-              <dd className="c-data-list__value">
-                {extension.requested_target_date}
-              </dd>
-              <dt className="c-data-list__key">Approved Expiration Date</dt>
-              <dd className="c-data-list__value">
-                {extension.approved_expiration_date}
-              </dd>
-              <dt className="c-data-list__key">Extension Justification</dt>
-              <dd className="c-data-list__value">
-                {extension.explanation_justification}
-              </dd>
-              <dt className="c-data-list__key">Extension Notes</dt>
-              <dd className="c-data-list__value">{extension.notes}</dd>
-              <dt className="c-data-list__key">Last Updated</dt>
-              <dd className="c-data-list__value">{extension.updated_at}</dd>
-            </dl>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Created</Col>
+              <Col md={7}>
+                {extension.created
+                  ? new Date(extension.created).toLocaleString()
+                  : 'None'}
+              </Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Entity Organization</Col>
+              <Col md={7}>{extension.org_name}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Requestor</Col>
+              <Col md={7}>{extension.requestor}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Requestor Email</Col>
+              <Col md={7}>{extension.requestor_email}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Extension Type</Col>
+              <Col md={7}>{extension.type}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Status</Col>
+              <Col md={7}>{extension.ext_status}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Outcome</Col>
+              <Col md={7}>{extension.ext_outcome}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Applicable Data Period</Col>
+              <Col md={7}>{extension.applicable_data_period}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Current Expected Date</Col>
+              <Col md={7}>
+                {extension.current_expected_date
+                  ? new Date(
+                      extension.current_expected_date
+                    ).toLocaleDateString()
+                  : 'None'}
+              </Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Requested Target Date</Col>
+              <Col md={7}>
+                {extension.requested_target_date
+                  ? new Date(
+                      extension.requested_target_date
+                    ).toLocaleDateString()
+                  : 'None'}
+              </Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Approved Expiration Date</Col>
+              <Col md={7}>
+                {extension.approved_expiration_date
+                  ? new Date(
+                      extension.approved_expiration_date
+                    ).toLocaleDateString()
+                  : 'None'}
+              </Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Extension Justification</Col>
+              <Col md={7}>{extension.explanation_justification}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Extension Notes</Col>
+              <Col md={7}>{extension.notes}</Col>
+            </Row>
+            <Row>
+              <Col md={{ size: 4, offset: 1 }}>Last Updated</Col>
+              <Col md={7}>{extension.updated_at}</Col>
+            </Row>
+            <hr />
           </div>
         </div>
       </ModalBody>