From 092b09b6d5d2a0883b7149e1ba6d7e14b8965ecb Mon Sep 17 00:00:00 2001
From: VineetBala-AOT <vineet.balachandran@aot-technologies.com>
Date: Tue, 7 Jan 2025 10:04:56 -0800
Subject: [PATCH] Data Structuring and Colour/Text Edits

---
 .../services/condition_service.py             |  1 +
 .../services/document_service.py              | 12 +++++-
 .../ConditionDetails/ConditionHeader.tsx      | 26 +++++++++----
 .../ConditionDetails/ConditionInfoTabs.tsx    | 37 ++++++++++++++++---
 .../ConditionDetails/SubCondition.tsx         |  7 +++-
 .../Conditions/ConditionTableRow.tsx          | 13 ++++++-
 .../components/Conditions/ConditionsTable.tsx | 20 +++++-----
 .../src/components/Conditions/index.tsx       |  8 ++--
 .../src/components/Documents/index.tsx        |  4 +-
 .../src/components/Projects/index.tsx         |  7 +++-
 10 files changed, 103 insertions(+), 32 deletions(-)

diff --git a/condition-api/src/condition_api/services/condition_service.py b/condition-api/src/condition_api/services/condition_service.py
index 7864b01..282d1bc 100644
--- a/condition-api/src/condition_api/services/condition_service.py
+++ b/condition-api/src/condition_api/services/condition_service.py
@@ -308,6 +308,7 @@ def get_all_conditions(project_id, document_id):
                 date_issued_query,
                 document_label_query
             )
+            .order_by(conditions.condition_number)
             .all()
         )
 
diff --git a/condition-api/src/condition_api/services/document_service.py b/condition-api/src/condition_api/services/document_service.py
index 85ab47d..6ef812d 100644
--- a/condition-api/src/condition_api/services/document_service.py
+++ b/condition-api/src/condition_api/services/document_service.py
@@ -24,6 +24,7 @@ def get_all_documents_by_category(project_id, category_id):
             Document.id.label('id'),
             Document.document_id.label('document_id'),
             Document.document_label.label('document_label'),
+            Document.created_date,
             extract('year', Document.date_issued).label('year_issued'),
             case(
                 (func.count(Condition.id) == 0, None),
@@ -50,6 +51,7 @@ def get_all_documents_by_category(project_id, category_id):
             Document.id,
             Document.document_id,
             Document.document_label,
+            Document.created_date,
             Document.date_issued
         ).all()
 
@@ -66,6 +68,7 @@ def get_all_documents_by_category(project_id, category_id):
             amendments_query = db.session.query(
                 Amendment.amended_document_id.label('document_id'),
                 Amendment.amendment_name.label('document_label'),
+                Amendment.created_date,
                 extract('year', Amendment.date_issued).label('year_issued'),
                 case(
                     (func.count(Condition.id) == 0, None),
@@ -77,13 +80,17 @@ def get_all_documents_by_category(project_id, category_id):
             ).filter(
                 Amendment.document_id == document.id
             ).group_by(
-                Amendment.amended_document_id, Amendment.amendment_name, Amendment.date_issued
+                Amendment.amended_document_id,
+                Amendment.amendment_name,
+                Amendment.created_date,
+                Amendment.date_issued
             ).all()
 
             # Append the main document to the result list
             result.append({
                 'document_id': document.document_id,
                 'document_label': document.document_label,
+                'created_date': document.created_date,
                 'year_issued': document.year_issued,
                 'status': document.status
             })
@@ -93,6 +100,7 @@ def get_all_documents_by_category(project_id, category_id):
                 result.append({
                     'document_id': amendment.document_id,
                     'document_label': amendment.document_label,
+                    'created_date': amendment.created_date,
                     'year_issued': amendment.year_issued,
                     'status': amendment.status
                 })
@@ -100,7 +108,7 @@ def get_all_documents_by_category(project_id, category_id):
         project_name = documents[0].project_name if documents else None
         document_category = documents[0].document_category if documents else None
 
-        sorted_result = sorted(result, key=lambda x: x['year_issued'], reverse=True)
+        sorted_result = sorted(result, key=lambda x: x['created_date'])
         return {
             "project_name": project_name,
             "document_category": document_category,
diff --git a/condition-web/src/components/ConditionDetails/ConditionHeader.tsx b/condition-web/src/components/ConditionDetails/ConditionHeader.tsx
index 02762d1..ad736f3 100644
--- a/condition-web/src/components/ConditionDetails/ConditionHeader.tsx
+++ b/condition-web/src/components/ConditionDetails/ConditionHeader.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { Box, Button, Grid, Stack, Typography } from "@mui/material";
-import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import EditIcon from '@mui/icons-material/Edit';
-import { Save } from "@mui/icons-material";
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
 import DocumentStatusChip from "../Projects/DocumentStatusChip";
 import { ConditionModel } from "@/models/Condition";
 import { DocumentStatus } from "@/models/Document";
@@ -79,7 +79,7 @@ const ConditionHeader = ({
             <Grid item xs={12}>
                 <Box sx={{ display: 'flex', alignItems: 'center', px: 2.5, py: 1 }}>
                     <Typography variant="h6">{condition?.condition_name}</Typography>
-                    <ContentCopyOutlinedIcon fontSize="small" sx={{ ml: 1, mr: 1 }} />
+                    <LayersOutlinedIcon fontSize="small" sx={{ ml: 1, mr: 1 }} />
                     <DocumentStatusChip status={String(condition?.is_approved) as DocumentStatus} />
                     {!condition.is_topic_tags_approved && (
                         <Button
@@ -105,15 +105,27 @@ const ConditionHeader = ({
                                     sx={{ display: 'inline-flex', alignItems: 'center' }}
                                     onClick={() => approveTags(false)}
                                 >
-                                    <Save fontSize="small" />
-                                    <Box component="span" sx={{ ml: 0.5 }}>
+                                    <SaveAltIcon
+                                        sx={{ color: "#255A90", mr: 0.5 }}
+                                        fontSize="small"
+                                    />
+                                    <Box
+                                        component="span"
+                                        sx={{ ml: 0.5, color: "#255A90", fontWeight: "bold" }}
+                                    >
                                         Save Tags
                                     </Box>
                                 </Typography>
                             : (
                                 <Typography component="span" sx={{ display: 'inline-flex', alignItems: 'center' }}>
-                                    <EditIcon fontSize="small" />
-                                    <Box component="span" sx={{ ml: 0.5 }}>
+                                    <EditIcon
+                                        sx={{ color: "#255A90", mr: 0.5 }}
+                                        fontSize="small"
+                                    />
+                                    <Box
+                                        component="span"
+                                        sx={{ ml: 0.5, color: "#255A90", fontWeight: "bold" }}
+                                    >
                                         Edit/Add Tags
                                     </Box>
                                 </Typography>
diff --git a/condition-web/src/components/ConditionDetails/ConditionInfoTabs.tsx b/condition-web/src/components/ConditionDetails/ConditionInfoTabs.tsx
index d9fe5a4..18bbc98 100644
--- a/condition-web/src/components/ConditionDetails/ConditionInfoTabs.tsx
+++ b/condition-web/src/components/ConditionDetails/ConditionInfoTabs.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Box, Button, Stack, Tab, Tabs, Typography } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
-import { Save } from "@mui/icons-material";
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
 import { styled } from '@mui/system';
 import { BCDesignTokens } from 'epic.theme';
 import ConditionAttributeTable from './ConditionAttribute/ConditionAttributeTable';
@@ -86,16 +86,41 @@ const ConditionInfoTabs: React.FC<{
 
                 {/* Conditionally render the Edit button only if the "description" tab is selected */}
                 {selectedTab === 'description' && (
-                    <EditButton variant="contained" size="small" onClick={handleEditClick}>
+                    <EditButton
+                        variant="contained"
+                        size="small"
+                        onClick={handleEditClick}
+                        sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
                         {editMode ? (
                             <Typography component="span" sx={{ display: 'inline-flex', alignItems: 'center' }}>
-                                <Save fontSize="small" />
-                                <Box component="span" sx={{ ml: 0.4 }}>Save Condition Description</Box>
+                                <SaveAltIcon
+                                    sx={{ color: "#255A90", mr: 0.5 }}
+                                    fontSize="small"
+                                />
+                                <Box
+                                    component="span"
+                                    sx={{ ml: 0.5, color: "#255A90", fontWeight: "bold" }}
+                                >
+                                    Save Condition Description
+                                </Box>
                             </Typography>
                         ) : (
                             <Typography component="span" sx={{ display: 'inline-flex', alignItems: 'center' }}>
-                                <EditIcon fontSize="small" />
-                                <Box component="span" sx={{ ml: 0.4 }}>Edit Condition Description</Box>
+                                <EditIcon
+                                    sx={{ color: "#255A90", mr: 0.5 }}
+                                    fontSize="small"
+                                />
+                                <Box
+                                    component="span"
+                                    sx={{ ml: 0.5, color: "#255A90", fontWeight: "bold" }}
+                                >
+                                    Edit Condition Description
+                                </Box>
                             </Typography>
                         )}
                     </EditButton>
diff --git a/condition-web/src/components/ConditionDetails/SubCondition.tsx b/condition-web/src/components/ConditionDetails/SubCondition.tsx
index 01146bb..7854428 100644
--- a/condition-web/src/components/ConditionDetails/SubCondition.tsx
+++ b/condition-web/src/components/ConditionDetails/SubCondition.tsx
@@ -66,7 +66,12 @@ const SubconditionComponent: React.FC<{
           ) : (
             <Typography variant="body2">
               <span style={{ color: theme.palette.primary.dark, marginRight: '8px' }}>
-                  {subcondition.subcondition_identifier}
+                {subcondition.subcondition_identifier
+                ? subcondition.subcondition_identifier.endsWith(')') 
+                  ? subcondition.subcondition_identifier 
+                  : `${subcondition.subcondition_identifier})`
+                : ''
+                }
               </span>
               {subcondition.subcondition_text}
             </Typography>
diff --git a/condition-web/src/components/Conditions/ConditionTableRow.tsx b/condition-web/src/components/Conditions/ConditionTableRow.tsx
index 17409be..6f81c0f 100644
--- a/condition-web/src/components/Conditions/ConditionTableRow.tsx
+++ b/condition-web/src/components/Conditions/ConditionTableRow.tsx
@@ -38,13 +38,24 @@ export default function ConditionTableRow({
         }}
       >
         <TableCell
-          colSpan={6}
+          colSpan={2}
           align="left"
           sx={{
             borderTop: border,
             borderBottom: border,
             py: BCDesignTokens.layoutPaddingXsmall,
           }}
+        >
+          {condition.condition_number ?? "--"}
+        </TableCell>
+        <TableCell
+          colSpan={6}
+          align="left"
+          sx={{
+            borderTop: border,
+            borderBottom: border,
+            p: BCDesignTokens.layoutPaddingXsmall,
+          }}
         >
           <Link
             sx={{
diff --git a/condition-web/src/components/Conditions/ConditionsTable.tsx b/condition-web/src/components/Conditions/ConditionsTable.tsx
index 2daf32e..f3572ba 100644
--- a/condition-web/src/components/Conditions/ConditionsTable.tsx
+++ b/condition-web/src/components/Conditions/ConditionsTable.tsx
@@ -6,24 +6,24 @@ import {
     TableHead,
     TableRow,
   } from "@mui/material";
-  import { BCDesignTokens } from "epic.theme";
-  import { ConditionModel } from "@/models/Condition";
-  import { StyledTableHeadCell } from "../Shared/Table/common";
-  import ConditionTableRow from "./ConditionTableRow";
+import { BCDesignTokens } from "epic.theme";
+import { ConditionModel } from "@/models/Condition";
+import { StyledTableHeadCell } from "../Shared/Table/common";
+import ConditionTableRow from "./ConditionTableRow";
 
-  export default function ConditionTable({
+export default function ConditionTable({
     conditions,
     projectId,
     documentId,
     headless,
     noConditions,
-  }: {
+}: {
     conditions: Array<ConditionModel>;
     projectId: string;
     documentId: string;
     headless?: boolean;
     noConditions: boolean;
-  }) {
+}) {
     return (
         <TableContainer component={Box} sx={{ height: "100%" }}>
             <Table sx={{ tableLayout: "fixed", border: 0 }} aria-label="simple table">
@@ -37,6 +37,9 @@ import {
                 }}
                 >
                 <TableRow>
+                    <StyledTableHeadCell colSpan={2}>
+                        Condition Number
+                    </StyledTableHeadCell>
                     <StyledTableHeadCell colSpan={6}>
                         Condition Name
                     </StyledTableHeadCell>
@@ -68,5 +71,4 @@ import {
             </Table>
         </TableContainer>
     );
-  }
-  
\ No newline at end of file
+}
diff --git a/condition-web/src/components/Conditions/index.tsx b/condition-web/src/components/Conditions/index.tsx
index d6f2cd5..8b1e3f1 100644
--- a/condition-web/src/components/Conditions/index.tsx
+++ b/condition-web/src/components/Conditions/index.tsx
@@ -20,7 +20,7 @@ import { ContentBox } from "../Shared/ContentBox";
 import ConditionTable from "../Conditions/ConditionsTable";
 import { DocumentModel, DocumentStatus } from "@/models/Document";
 import DocumentStatusChip from "../Projects/DocumentStatusChip";
-import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 import { useCreateCondition } from "@/hooks/api/useConditions";
@@ -190,10 +190,12 @@ export const Conditions = ({
                     <Box sx={{ display: "flex", alignItems: "left", mr: 1 }}>
                       {documentLabel}
                       {hasAmendments && (
-                        <ContentCopyOutlinedIcon fontSize="small" sx={{ ml: 1 }} />
+                        <Box sx={{ display: "flex", alignItems: "top", mr: 1, mt: 1 }}>
+                        <LayersOutlinedIcon fontSize="small" sx={{ ml: 1 }} />
+                        </Box>
                       )}
                     </Box>
-                    <Box sx={{ display: "flex", alignItems: "center", fontWeight: "normal" }}>
+                    <Box sx={{ display: "flex", alignItems: "top", fontWeight: "normal" }}>
                       <DocumentStatusChip
                         status={noConditions? "nodata" : String(isToggleEnabled) as DocumentStatus}
                       />
diff --git a/condition-web/src/components/Documents/index.tsx b/condition-web/src/components/Documents/index.tsx
index af8b408..4d60cab 100644
--- a/condition-web/src/components/Documents/index.tsx
+++ b/condition-web/src/components/Documents/index.tsx
@@ -7,7 +7,7 @@ import { ContentBoxSkeleton } from "../Shared/ContentBox/ContentBoxSkeleton";
 import { ContentBox } from "../Shared/ContentBox";
 import DocumentTable from "./DocumentTable";
 import DocumentStatusChip from "../Projects/DocumentStatusChip";
-import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 
 export const CardInnerBox = styled(Box)({
   display: "flex",
@@ -93,7 +93,7 @@ export const Documents = ({ projectName, projectId, documentLabel, documents }:
                   {/* Document Name and Icon */}
                   <Box sx={{ display: "flex", alignItems: "center" }}>
                     {documentLabel}
-                    <ContentCopyOutlinedIcon fontSize="small" sx={{ ml: 1, mr: 1 }} />
+                    <LayersOutlinedIcon fontSize="small" sx={{ ml: 1, mr: 1 }} />
                   </Box>
                   <Box sx={{ display: "flex", alignItems: "center", fontWeight: "normal" }}>
                     <DocumentStatusChip status={isToggleEnabled === null ? "nodata" : String(isToggleEnabled) as DocumentStatus} />
diff --git a/condition-web/src/components/Projects/index.tsx b/condition-web/src/components/Projects/index.tsx
index a60f96b..97ef12d 100644
--- a/condition-web/src/components/Projects/index.tsx
+++ b/condition-web/src/components/Projects/index.tsx
@@ -208,8 +208,13 @@ export const Projects = ({ projects, documentType }: ProjectsParams) => {
           justifyContent="left"
           alignItems="center"
           minWidth={"150px"}
+          color={"#255A90"}
+          fontWeight={"bold"}
         >
-          <IconButton color="primary" sx={{ mr: 1 }}><TuneIcon /></IconButton>Open Filters
+          <IconButton sx={{ color: "#255A90" }}>
+            <TuneIcon />
+          </IconButton>
+          Open Filters
         </Box>
         <TextField
           variant="outlined"