From fe1232e63f28ca66800989db723732afe810e03c Mon Sep 17 00:00:00 2001
From: Daniel Roth <daniel_roth@hotmail.co.uk>
Date: Mon, 2 Feb 2026 12:43:30 +0000
Subject: [PATCH] more formatting

---
 .../condition/components/ElementTable.tsx     | 52 ++++++++++++++++---
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/condition/components/ElementTable.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/condition/components/ElementTable.tsx
index 1355b5c7..b5a0e012 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/condition/components/ElementTable.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/condition/components/ElementTable.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { m } from "framer-motion";
 import React, { useState } from "react";
 
 export const ELEMENT_TYPE_LABELS: Record<string, string> = {
@@ -99,6 +100,39 @@ export const ELEMENT_TYPE_LABELS: Record<string, string> = {
   water_heating: "Water Heating",
 };
 
+export const ASPECT_TYPE_LABELS: Record<string, string> = {
+  material: "Material",
+  condition: "Condition",
+  type: "Type",
+  area: "Area",
+  configuration: "Configuration",
+  presence: "Presence",
+  risk: "Risk",
+  severity: "Severity",
+  location: "Location",
+  finish: "Finish",
+  insulation: "Insulation",
+  pointing: "Pointing",
+  spalling: "Spalling",
+  lintels: "Lintels",
+  cladding: "Cladding",
+  category: "Category",
+  quantity: "Quantity",
+  adequacy: "Adequacy",
+  rating: "Rating",
+  strategy: "Strategy",
+  extent: "Extent",
+  distribution: "Distribution",
+  structure: "Structure",
+  covering: "Covering",
+  fire_rating: "Fire Rating",
+  external_decoration: "External Decoration",
+  work_required: "Work Required",
+  age_band: "Age Band",
+  construction_type: "Construction Type",
+  classification: "Classification",
+  system: "System",
+}
 
 export type AspectCondition = {
   id: string;
@@ -291,12 +325,18 @@ export default function ElementTable({ groupedElements }: Props) {
                         </tr>
                       </thead>
                       <tbody>
-                        {group.elements
-                          .sort((a, b) => a.elementType.localeCompare(b.elementType))
-                          .flatMap(el =>
-                            el.aspects.map(aspect => (
+                        {group.elements.flatMap(el =>
+                          el.aspects
+                            .sort((a, b) => {
+                              const labelA = ASPECT_TYPE_LABELS[a.aspectType] ?? a.aspectType;
+                              const labelB = ASPECT_TYPE_LABELS[b.aspectType] ?? b.aspectType;
+                              return labelA.localeCompare(labelB);
+                            })
+                            .map(aspect => (
                               <tr key={aspect.id}>
-                                <td style={tdStyle}>{aspect.aspectType}</td>
+                                <td style={tdStyle}>
+                                  {ASPECT_TYPE_LABELS[aspect.aspectType] ?? aspect.aspectType}
+                                </td>
                                 <td style={tdStyle}>{aspect.value ?? "-"}</td>
                                 <td style={tdStyle}>{aspect.quantity ?? "-"}</td>
                                 <td style={tdStyle}>{aspect.installDate ?? "-"}</td>
@@ -304,7 +344,7 @@ export default function ElementTable({ groupedElements }: Props) {
                                 <td style={tdStyle}>{aspect.comments ?? "-"}</td>
                               </tr>
                             ))
-                          )}
+                        )}
                       </tbody>
                     </table>
                   </td>