From 6cf374de7ba354b421ee7b6086933609f88d711b Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Wed, 24 Jun 2026 13:06:00 -0500
Subject: [PATCH 1/6] MARS-1167 Create `CompareAttributeDialog` dialog

---
 .../CompareAttributeDialog/index.tsx          | 273 ++++++++++++
 client/src/components/Icon/index.tsx          |   4 +
 .../components/ViewAttributeDialog/index.tsx  | 396 ++++++++++--------
 types/index.d.ts                              |  12 +
 4 files changed, 504 insertions(+), 181 deletions(-)
 create mode 100644 client/src/components/CompareAttributeDialog/index.tsx

diff --git a/client/src/components/CompareAttributeDialog/index.tsx b/client/src/components/CompareAttributeDialog/index.tsx
new file mode 100644
index 00000000..f2653802
--- /dev/null
+++ b/client/src/components/CompareAttributeDialog/index.tsx
@@ -0,0 +1,273 @@
+// React
+import React, { useEffect, useState } from "react";
+
+// Existing and custom components
+import { Flex, Dialog, Text, CloseButton, Spinner } from "@chakra-ui/react";
+import Icon from "@components/Icon";
+
+// Existing and custom types
+import { AttributeModel, CompareAttributeDialogProps, IValue } from "@types";
+
+// GraphQL imports
+import { useLazyQuery } from "@apollo/client/react";
+import { gql } from "@apollo/client";
+
+// Utility functions and libraries
+import _ from "lodash";
+
+// Variables
+import { GLOBAL_STYLES } from "@variables";
+
+const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
+  // State storing Attribute information
+  const [templateAttribute, setTemplateAttribute] = useState<AttributeModel>();
+  const [loadingComparison, setLoadingComparison] = useState(false);
+
+  // GraphQL operations
+  const GET_TEMPLATE = gql`
+    query GetTemplate($_id: String) {
+      template(_id: $_id) {
+        _id
+        name
+        timestamp
+        owner
+        archived
+        description
+        values {
+          _id
+          name
+          type
+          data
+        }
+        history {
+          author
+          message
+          timestamp
+          version
+          _id
+          name
+          owner
+          archived
+          description
+          values {
+            _id
+            name
+            type
+            data
+          }
+        }
+      }
+    }
+  `;
+  const [getTemplate] = useLazyQuery<{
+    template: AttributeModel;
+  }>(GET_TEMPLATE);
+
+  const prepareComparison = async () => {
+    setLoadingComparison(true);
+    const templateAttributeResult = await getTemplate({
+      variables: {
+        _id: props.templateAttributeId,
+      },
+    });
+
+    if (templateAttributeResult.data) {
+      setTemplateAttribute(templateAttributeResult.data.template);
+    }
+    setLoadingComparison(false);
+  };
+
+  useEffect(() => {
+    prepareComparison();
+  }, [props.open]);
+
+  /**
+   * Generate a side-by-side "diff"-like comparison between an Attribute and the Template
+   * Attribute it was created from
+   * @param attributeLeft Existing Attribute that is based on the Template Attribute
+   * @param attributeRight Template Attribute
+   * @return
+   */
+  const createSideBySide = (attributeLeft: AttributeModel, attributeRight: AttributeModel | undefined) => {
+    const leftValues = new Set(attributeLeft.values.map((value) => value._id));
+    const rightValues = new Set(attributeRight?.values.map((value) => value._id));
+
+    // Get collection of Values that are conserved
+    const conservedValueIds = leftValues.intersection(rightValues);
+    const conservedValues = attributeLeft.values.filter((value) => [...conservedValueIds].includes(value._id));
+
+    // Get collection of Values that are removed
+    const removedValueIds = rightValues.difference(leftValues);
+    const removedValues = attributeRight?.values.filter((value) => [...removedValueIds].includes(value._id)) || [];
+
+    // Get collection of Values that are added
+    const addedValueIds = leftValues.difference(rightValues);
+    const addedValues = attributeLeft.values.filter((value) => [...addedValueIds].includes(value._id));
+
+    return (
+      <Flex direction={"row"} gap={"2"} align={"center"}>
+        {/* Left Column */}
+        <Flex
+          direction={"column"}
+          w={"50%"}
+          rounded={"md"}
+          p={"1"}
+          gap={"1"}
+          border={GLOBAL_STYLES.border.style}
+          borderColor={GLOBAL_STYLES.border.color}
+        >
+          <Flex direction={"row"} gap={"1"} align={"center"}>
+            <Text fontWeight={"semibold"} fontSize={"xs"} color={"gray.600"}>
+              Attribute:
+            </Text>
+            <Text fontWeight={"semibold"} fontSize={"xs"}>
+              {attributeLeft.name}
+            </Text>
+          </Flex>
+
+          <Flex direction={"column"} gap={"1"} align={"start"}>
+            <Text fontWeight={"semibold"} fontSize={"xs"} color={"gray.600"}>
+              Values:
+            </Text>
+            <Flex direction={"column"} gap={"1"} ml={"0.5"}>
+              {[...conservedValues].map((value) => {
+                return (
+                  <Flex direction={"row"} gap={"1"} align={"center"}>
+                    <Icon size={"xs"} name={"check"} color={"blue.500"} />
+                    <Text fontSize={"xs"} color={"blue.600"} fontWeight={"semibold"}>
+                      {value.name}
+                    </Text>
+                  </Flex>
+                );
+              })}
+
+              {[...removedValues].map((value) => {
+                return (
+                  <Flex direction={"row"} gap={"1"} align={"center"}>
+                    <Icon size={"xs"} name={"remove"} color={"red.500"} />
+                    <Text fontSize={"xs"} color={"red.600"} fontWeight={"semibold"}>
+                      {value.name}
+                    </Text>
+                  </Flex>
+                );
+              })}
+
+              {[...addedValues].map((value) => {
+                return (
+                  <Flex direction={"row"} gap={"1"} align={"center"}>
+                    <Icon size={"xs"} name={"add"} color={"green.600"} />
+                    <Text fontSize={"xs"} color={"green.600"} fontWeight={"semibold"}>
+                      {value.name}
+                    </Text>
+                  </Flex>
+                );
+              })}
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Right Column - Fallback */}
+        {_.isUndefined(attributeRight) && (
+          <Flex
+            w={"50%"}
+            rounded={"md"}
+            p={"1"}
+            bg={"red.100"}
+            border={GLOBAL_STYLES.border.style}
+            borderColor={GLOBAL_STYLES.border.color}
+          >
+            <Text fontWeight={"semibold"} fontSize={"xs"} color={"red.600"}>
+              Unable to load Template
+            </Text>
+          </Flex>
+        )}
+
+        {/* Right Column - Default */}
+        {attributeRight && (
+          <Flex
+            direction={"column"}
+            w={"50%"}
+            h={"100%"}
+            rounded={"md"}
+            p={"1"}
+            border={GLOBAL_STYLES.border.style}
+            borderColor={GLOBAL_STYLES.border.color}
+          >
+            <Text fontWeight={"semibold"} fontSize={"xs"}>
+              Template: {attributeRight.name}
+            </Text>
+            <Text fontWeight={"semibold"} fontSize={"xs"} color={"gray.600"}>
+              Values:
+            </Text>
+            <Flex direction={"column"} gap={"1"} ml={"0.5"} h={"100%"}>
+              {[...attributeRight.values].map((value) => {
+                return (
+                  <Flex direction={"row"} gap={"1"} align={"center"}>
+                    <Icon size={"xs"} name={"check"} color={"blue.500"} />
+                    <Text fontSize={"xs"} color={"blue.600"} fontWeight={"semibold"}>
+                      {value.name}
+                    </Text>
+                  </Flex>
+                );
+              })}
+            </Flex>
+          </Flex>
+        )}
+      </Flex>
+    );
+  };
+
+  return (
+    <Dialog.Root
+      open={props.open}
+      scrollBehavior={"inside"}
+      placement={"center"}
+      onOpenChange={(event) => props.setOpen(event.open)}
+      size={"xl"}
+      closeOnEscape
+      closeOnInteractOutside
+    >
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content maxH={"90vh"} display={"flex"} flexDirection={"column"} p={"0"}>
+          <Dialog.Header
+            p={"1"}
+            flexShrink={0}
+            bg={GLOBAL_STYLES.dialog.header.bg}
+            borderBottom={"2px"}
+            roundedTop={"md"}
+          >
+            <Flex direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
+              <Flex align={"center"} gap={"1"} p={"1"} border={"2px"} rounded={"md"}>
+                <Icon name={"template"} size={"xs"} />
+                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                  Compare Attributes: {props.modifiedAttribute.name} | {templateAttribute?.name}
+                </Text>
+              </Flex>
+            </Flex>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size={"2xs"} top={"6px"} onClick={() => props.setOpen(false)} />
+            </Dialog.CloseTrigger>
+          </Dialog.Header>
+
+          <Dialog.Body p={"2"} flex={"1"} overflow={"auto"}>
+            {loadingComparison ? (
+              <Flex w={"100%"} align={"center"} justify={"center"} minH={"240px"}>
+                <Flex direction={"row"} gap={"2"} align={"center"}>
+                  <Spinner color={"gray.600"} />
+                  <Text fontWeight={"semibold"} color={"gray.600"} fontSize={"xs"}>
+                    Preparing Comparison
+                  </Text>
+                </Flex>
+              </Flex>
+            ) : (
+              createSideBySide(props.modifiedAttribute, templateAttribute)
+            )}
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};
+
+export default CompareAttributeDialog;
diff --git a/client/src/components/Icon/index.tsx b/client/src/components/Icon/index.tsx
index 3852e41d..578fa0cd 100644
--- a/client/src/components/Icon/index.tsx
+++ b/client/src/components/Icon/index.tsx
@@ -33,6 +33,7 @@ import {
   BsCloudDownloadFill,
   BsCollectionFill,
   BsCopy,
+  BsDashCircleFill,
   BsDatabaseFill,
   BsDiagram2Fill,
   BsEnvelope,
@@ -40,6 +41,7 @@ import {
   BsEye,
   BsEyeSlash,
   BsFileCodeFill,
+  BsFileDiffFill,
   BsFileTextFill,
   BsFillBookFill,
   BsFillBookmarkFill,
@@ -109,11 +111,13 @@ export const SYSTEM_ICONS: Record<string, IconType> = {
   check: BsCheckCircleFill,
   counter: BsCalculator,
   close: BsXLg,
+  diff: BsFileDiffFill,
   info: BsInfoCircleFill,
   search: BsSearch,
   search_query: BsBraces,
   bell: BsBellFill,
   add: BsPlusCircleFill,
+  remove: BsDashCircleFill,
   copy: BsCopy,
   edit: BsPencilFill,
   expand: BsArrowsAngleExpand,
diff --git a/client/src/components/ViewAttributeDialog/index.tsx b/client/src/components/ViewAttributeDialog/index.tsx
index 3461c988..b174b937 100644
--- a/client/src/components/ViewAttributeDialog/index.tsx
+++ b/client/src/components/ViewAttributeDialog/index.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 // Existing and custom components
 import { Button, Flex, Input, Dialog, Text, CloseButton, EmptyState, Textarea } from "@chakra-ui/react";
 import ActorTag from "@components/ActorTag";
+import CompareAttributeDialog from "@components/CompareAttributeDialog";
 import Icon from "@components/Icon";
 import Linky from "@components/Linky";
 import Values from "@components/Values";
@@ -25,209 +26,242 @@ const ViewAttributeDialog = (props: ViewAttributeDialogProps) => {
   const [name, setName] = useState(props.attribute.name);
   const [description, setDescription] = useState(props.attribute.description);
   const [values, setValues] = useState(props.attribute.values);
+  const [compareAttributesOpen, setCompareAttributesOpen] = useState(false);
 
   return (
-    <Dialog.Root
-      open={props.open}
-      scrollBehavior={"inside"}
-      placement={"center"}
-      onOpenChange={(event) => props.setOpen(event.open)}
-      size={"xl"}
-      closeOnEscape
-      closeOnInteractOutside
-    >
-      <Dialog.Backdrop />
-      <Dialog.Positioner>
-        <Dialog.Content maxH={"90vh"} display={"flex"} flexDirection={"column"} p={"0"}>
-          <Dialog.Header
-            p={"1"}
-            flexShrink={0}
-            bg={GLOBAL_STYLES.template.color.default}
-            borderBottom={"2px"}
-            roundedTop={"md"}
-          >
-            <Flex direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
-              <Flex align={"center"} gap={"1"} p={"1"} border={"2px"} rounded={"md"}>
-                <Icon name={"template"} size={"xs"} />
-                <Text fontSize={"xs"} fontWeight={"semibold"}>
-                  {props.attribute.name}
-                </Text>
-              </Flex>
-            </Flex>
-            <Dialog.CloseTrigger asChild>
-              <CloseButton size={"2xs"} top={"6px"} onClick={() => props.setOpen(false)} />
-            </Dialog.CloseTrigger>
-          </Dialog.Header>
-
-          <Dialog.Body p={"0"} flex={"1"} overflow={"auto"}>
-            <Flex direction={"column"} p={"2"} gap={"2"}>
-              {props.isTemplate && (
-                <Flex direction={"row"} gap={"0.5"}>
-                  <Text fontWeight={"semibold"} fontSize={"xs"} ml={"0.5"}>
-                    Base Template:
+    <React.Fragment>
+      <Dialog.Root
+        open={props.open}
+        scrollBehavior={"inside"}
+        placement={"center"}
+        onOpenChange={(event) => props.setOpen(event.open)}
+        size={"xl"}
+        closeOnEscape
+        closeOnInteractOutside
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content maxH={"90vh"} display={"flex"} flexDirection={"column"} p={"0"}>
+            <Dialog.Header
+              p={"1"}
+              flexShrink={0}
+              bg={GLOBAL_STYLES.template.color.default}
+              borderBottom={"2px"}
+              roundedTop={"md"}
+            >
+              <Flex direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
+                <Flex align={"center"} gap={"1"} p={"1"} border={"2px"} rounded={"md"}>
+                  <Icon name={"template"} size={"xs"} />
+                  <Text fontSize={"xs"} fontWeight={"semibold"}>
+                    Attribute: {props.attribute.name}
                   </Text>
-                  <Flex ml={"0.5"}>
-                    {/* Ensure actual ID is passed to Linky, remove appended Template unique identifier */}
-                    <Linky id={props.attribute._id.slice(0, 10)} type={"templates"} size={"xs"} />
-                  </Flex>
                 </Flex>
-              )}
-              <Flex gap={"2"} rounded={"md"} direction={"row"} wrap={"wrap"}>
-                <Flex
-                  direction={"column"}
-                  h={"fit-content"}
-                  gap={"2"}
-                  w={{ base: "100%", md: "50%" }}
-                  p={"1"}
-                  border={GLOBAL_STYLES.border.style}
-                  borderColor={GLOBAL_STYLES.border.color}
-                  rounded={"md"}
-                >
-                  <Text
-                    fontSize={"xs"}
-                    fontWeight={"semibold"}
-                    color={GLOBAL_STYLES.font.secondaryHeader.color}
+              </Flex>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size={"2xs"} top={"6px"} onClick={() => props.setOpen(false)} />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+
+            <Dialog.Body p={"0"} flex={"1"} overflow={"auto"}>
+              <Flex direction={"column"} p={"2"} gap={"2"}>
+                {props.isTemplate && (
+                  <Flex
+                    direction={"row"}
+                    gap={"2"}
+                    rounded={"md"}
+                    bg={"gray.100"}
+                    p={"1"}
                     ml={"0.5"}
+                    justify={"space-between"}
                   >
-                    Name
-                  </Text>
-                  <Input
-                    size={"xs"}
+                    <Flex direction={"row"} gap={"1"} align={"center"}>
+                      <Text fontWeight={"semibold"} fontSize={"xs"} ml={"0.5"} color={"gray.600"}>
+                        Using:
+                      </Text>
+                      {/* Ensure actual ID is passed to Linky, remove appended Template unique identifier */}
+                      <Linky id={props.attribute._id.slice(0, 10)} type={"templates"} size={"xs"} />
+                    </Flex>
+                    <Flex gap={"2"} align={"center"}>
+                      <Button
+                        size={"xs"}
+                        rounded={"md"}
+                        colorPalette={"blue"}
+                        onClick={() => setCompareAttributesOpen(true)}
+                      >
+                        <Icon name={"diff"} />
+                        Compare
+                      </Button>
+                      <Button size={"xs"} rounded={"md"} colorPalette={"orange"} disabled>
+                        <Icon name={"reload"} />
+                        Reset
+                      </Button>
+                    </Flex>
+                  </Flex>
+                )}
+
+                <Flex gap={"2"} rounded={"md"} direction={"row"} wrap={"wrap"}>
+                  <Flex
+                    direction={"column"}
+                    h={"fit-content"}
+                    gap={"2"}
+                    w={{ base: "100%", md: "50%" }}
+                    p={"1"}
+                    border={GLOBAL_STYLES.border.style}
+                    borderColor={GLOBAL_STYLES.border.color}
                     rounded={"md"}
-                    value={name}
-                    onChange={(event) => setName(event.target.value)}
-                    readOnly={!isEditing}
-                  />
-                  <Flex direction={"column"} gap={"1"}>
+                  >
                     <Text
-                      fontWeight={"semibold"}
                       fontSize={"xs"}
+                      fontWeight={"semibold"}
                       color={GLOBAL_STYLES.font.secondaryHeader.color}
                       ml={"0.5"}
                     >
-                      Owner
+                      Name
                     </Text>
-                    <Flex>
-                      <ActorTag identifier={props.attribute.owner} fallback={"Unknown User"} size={"sm"} />
+                    <Input
+                      size={"xs"}
+                      rounded={"md"}
+                      value={name}
+                      onChange={(event) => setName(event.target.value)}
+                      readOnly={!isEditing}
+                    />
+                    <Flex direction={"column"} gap={"1"}>
+                      <Text
+                        fontWeight={"semibold"}
+                        fontSize={"xs"}
+                        color={GLOBAL_STYLES.font.secondaryHeader.color}
+                        ml={"0.5"}
+                      >
+                        Owner
+                      </Text>
+                      <Flex>
+                        <ActorTag identifier={props.attribute.owner} fallback={"Unknown User"} size={"sm"} />
+                      </Flex>
                     </Flex>
                   </Flex>
-                </Flex>
 
-                <Flex
-                  direction={"column"}
-                  gap={"1"}
-                  grow={"1"}
-                  p={"1"}
-                  border={GLOBAL_STYLES.border.style}
-                  borderColor={GLOBAL_STYLES.border.color}
-                  rounded={"md"}
-                >
-                  <Text
-                    fontSize={"xs"}
-                    fontWeight={"semibold"}
-                    color={GLOBAL_STYLES.font.secondaryHeader.color}
-                    ml={"0.5"}
+                  <Flex
+                    direction={"column"}
+                    gap={"1"}
+                    grow={"1"}
+                    p={"1"}
+                    border={GLOBAL_STYLES.border.style}
+                    borderColor={GLOBAL_STYLES.border.color}
+                    rounded={"md"}
                   >
-                    Description
-                  </Text>
-                  <Textarea
-                    value={description}
-                    size={"xs"}
-                    h={"100%"}
-                    onChange={(event) => setDescription(event.target.value)}
-                    readOnly={!isEditing}
-                  />
+                    <Text
+                      fontSize={"xs"}
+                      fontWeight={"semibold"}
+                      color={GLOBAL_STYLES.font.secondaryHeader.color}
+                      ml={"0.5"}
+                    >
+                      Description
+                    </Text>
+                    <Textarea
+                      value={description}
+                      size={"xs"}
+                      h={"100%"}
+                      onChange={(event) => setDescription(event.target.value)}
+                      readOnly={!isEditing}
+                    />
+                  </Flex>
                 </Flex>
-              </Flex>
 
-              <Flex direction={"column"} gap={"1"} grow={"1"} h={"fit-content"} bg={"white"}>
-                <Flex
-                  direction={"column"}
-                  gap={"1"}
-                  align={"center"}
-                  justify={"center"}
-                  minH={values.length > 0 ? "fit-content" : "200px"}
-                >
-                  {values && values.length > 0 ? (
-                    <Values
-                      viewOnly={!isEditing}
-                      values={values}
-                      setValues={setValues}
-                      permittedValues={props.permittedDataValues}
-                    />
-                  ) : (
-                    <EmptyState.Root>
-                      <EmptyState.Content>
-                        <EmptyState.Description>No Values</EmptyState.Description>
-                      </EmptyState.Content>
-                    </EmptyState.Root>
-                  )}
+                <Flex direction={"column"} gap={"1"} grow={"1"} h={"fit-content"} bg={"white"}>
+                  <Flex
+                    direction={"column"}
+                    gap={"1"}
+                    align={"center"}
+                    justify={"center"}
+                    minH={values.length > 0 ? "fit-content" : "200px"}
+                  >
+                    {values && values.length > 0 ? (
+                      <Values
+                        viewOnly={!isEditing}
+                        values={values}
+                        setValues={setValues}
+                        permittedValues={props.permittedDataValues}
+                      />
+                    ) : (
+                      <EmptyState.Root>
+                        <EmptyState.Content>
+                          <EmptyState.Description>No Values</EmptyState.Description>
+                        </EmptyState.Content>
+                      </EmptyState.Root>
+                    )}
+                  </Flex>
                 </Flex>
               </Flex>
-            </Flex>
-          </Dialog.Body>
+            </Dialog.Body>
 
-          {isEditing && (
-            <Dialog.Footer
-              p={"1"}
-              flexShrink={0}
-              bg={"gray.100"}
-              roundedBottom={"md"}
-              borderTop={"1px"}
-              borderColor={"gray.200"}
-            >
-              <Flex direction={"row"} justify={"space-between"} gap={"4"} w={"100%"}>
-                <Button
-                  colorPalette={"red"}
-                  size={"xs"}
-                  rounded={"md"}
-                  variant={"solid"}
-                  onClick={() => {
-                    // Reset the changes made to the Attribute
-                    setDescription(attribute.description);
-                    setValues(attribute.values);
-
-                    // Close the dialog
-                    props.setOpen(false);
-
-                    // Run the 'cancel' action (if specified)
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    props.cancelCallback ? props.cancelCallback() : {};
-                  }}
-                >
-                  Cancel
-                  <Icon name={"cross"} size={"xs"} />
-                </Button>
-
-                <Button
-                  colorPalette={"green"}
-                  size={"xs"}
-                  rounded={"md"}
-                  onClick={() => {
-                    // Close the dialog
-                    props.setOpen(false);
-
-                    // Run the 'done' action (if specified)
-                    props.onAttributeUpdate({
-                      _id: props.attribute._id,
-                      name: name,
-                      timestamp: props.attribute.timestamp,
-                      owner: props.attribute.owner,
-                      archived: false,
-                      description: description,
-                      values: values,
-                    });
-                  }}
-                >
-                  Done
-                  <Icon name={"check"} size={"xs"} />
-                </Button>
-              </Flex>
-            </Dialog.Footer>
-          )}
-        </Dialog.Content>
-      </Dialog.Positioner>
-    </Dialog.Root>
+            {isEditing && (
+              <Dialog.Footer
+                p={"1"}
+                flexShrink={0}
+                bg={"gray.100"}
+                roundedBottom={"md"}
+                borderTop={"1px"}
+                borderColor={"gray.200"}
+              >
+                <Flex direction={"row"} justify={"space-between"} gap={"4"} w={"100%"}>
+                  <Button
+                    colorPalette={"red"}
+                    size={"xs"}
+                    rounded={"md"}
+                    variant={"solid"}
+                    onClick={() => {
+                      // Reset the changes made to the Attribute
+                      setDescription(attribute.description);
+                      setValues(attribute.values);
+
+                      // Close the dialog
+                      props.setOpen(false);
+
+                      // Run the 'cancel' action (if specified)
+                      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                      props.cancelCallback ? props.cancelCallback() : {};
+                    }}
+                  >
+                    Cancel
+                    <Icon name={"cross"} size={"xs"} />
+                  </Button>
+
+                  <Button
+                    colorPalette={"green"}
+                    size={"xs"}
+                    rounded={"md"}
+                    onClick={() => {
+                      // Close the dialog
+                      props.setOpen(false);
+
+                      // Run the 'done' action (if specified)
+                      props.onAttributeUpdate({
+                        _id: props.attribute._id,
+                        name: name,
+                        timestamp: props.attribute.timestamp,
+                        owner: props.attribute.owner,
+                        archived: false,
+                        description: description,
+                        values: values,
+                      });
+                    }}
+                  >
+                    Done
+                    <Icon name={"check"} size={"xs"} />
+                  </Button>
+                </Flex>
+              </Dialog.Footer>
+            )}
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
+      <CompareAttributeDialog
+        open={compareAttributesOpen}
+        setOpen={setCompareAttributesOpen}
+        modifiedAttribute={attribute}
+        templateAttributeId={props.attribute._id.slice(0, 10)}
+      />
+    </React.Fragment>
   );
 };
 
diff --git a/types/index.d.ts b/types/index.d.ts
index 220a00f4..ab2a1ec8 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -104,6 +104,16 @@ export type ViewAttributeDialogProps = {
   cancelCallback?: () => void;
 };
 
+export type CompareAttributeDialogProps = {
+  // Dialog state
+  open: boolean;
+  setOpen: (value: React.SetStateAction<boolean>) => void;
+
+  // Dialog Attribute information
+  modifiedAttribute: AttributeModel;
+  templateAttributeId: string;
+};
+
 // Column descriptor returned by prepareEntityCSV
 export type ColumnInfo = {
   name: string;
@@ -511,11 +521,13 @@ export type IconNames =
   | "check"
   | "close"
   | "counter"
+  | "diff"
   | "info"
   | "search"
   | "search_query"
   | "bell"
   | "add"
+  | "remove"
   | "copy"
   | "edit"
   | "expand"

From 5bc8bdb8d4a34d788d8510310c97a05d4f3a285c Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Tue, 30 Jun 2026 15:44:25 -0500
Subject: [PATCH 2/6] MARS-1167 Update `CompareAttributeDialog`

* Generate better diff-like view, with new sub-components and types
* Update `ViewAttributeDialog` to handle additional dialog
* Clean up `util.ts` file
* Add icons
---
 .../CompareAttributeDialog/index.tsx          | 907 ++++++++++++++----
 client/src/components/Icon/index.tsx          |   2 +
 .../components/ViewAttributeDialog/index.tsx  |  61 +-
 client/src/lib/util.ts                        | 160 ++-
 client/src/pages/view/Entity.tsx              |   3 +-
 types/index.d.ts                              |  31 +
 6 files changed, 884 insertions(+), 280 deletions(-)

diff --git a/client/src/components/CompareAttributeDialog/index.tsx b/client/src/components/CompareAttributeDialog/index.tsx
index f2653802..b1fcd839 100644
--- a/client/src/components/CompareAttributeDialog/index.tsx
+++ b/client/src/components/CompareAttributeDialog/index.tsx
@@ -2,28 +2,44 @@
 import React, { useEffect, useState } from "react";
 
 // Existing and custom components
-import { Flex, Dialog, Text, CloseButton, Spinner } from "@chakra-ui/react";
+import { Button, Flex, Text, CloseButton, Spinner, Checkbox, Collapsible, Dialog } from "@chakra-ui/react";
+import AlertDialog from "@components/AlertDialog";
 import Icon from "@components/Icon";
 
 // Existing and custom types
-import { AttributeModel, CompareAttributeDialogProps, IValue } from "@types";
+import {
+  AttributeModel,
+  CompareAttributeDialogCollapsibleProps,
+  CompareAttributeDialogProps,
+  CompareAttributeFieldDiffProps,
+  IValue,
+} from "@types";
 
 // GraphQL imports
 import { useLazyQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
 
-// Utility functions and libraries
-import _ from "lodash";
+// Utility functions
+import { isValueEqual } from "@lib/util";
 
 // Variables
 import { GLOBAL_STYLES } from "@variables";
 
 const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
-  // State storing Attribute information
   const [templateAttribute, setTemplateAttribute] = useState<AttributeModel>();
   const [loadingComparison, setLoadingComparison] = useState(false);
+  const [warningOpen, setWarningOpen] = useState(false);
+
+  // Collapsible sections state (all expanded by default)
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());
+
+  // Selection state
+  const [useTemplateName, setUseTemplateName] = useState(false);
+  const [useTemplateDescription, setUseTemplateDescription] = useState(false);
+  const [adoptModifiedValueIds, setAdoptModifiedValueIds] = useState<Set<string>>(new Set());
+  const [pullTemplateValueIds, setPullTemplateValueIds] = useState<Set<string>>(new Set());
+  const [removeEntityValueIds, setRemoveEntityValueIds] = useState<Set<string>>(new Set());
 
-  // GraphQL operations
   const GET_TEMPLATE = gql`
     query GetTemplate($_id: String) {
       template(_id: $_id) {
@@ -63,210 +79,745 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
     template: AttributeModel;
   }>(GET_TEMPLATE);
 
+  /**
+   * Utility function to configure state prior to displaying comparison view
+   */
   const prepareComparison = async () => {
+    // Reset state
     setLoadingComparison(true);
+    setUseTemplateName(false);
+    setUseTemplateDescription(false);
+    setAdoptModifiedValueIds(new Set());
+    setPullTemplateValueIds(new Set());
+    setRemoveEntityValueIds(new Set());
+
+    // Retreive the latest version of the Template for comparison
     const templateAttributeResult = await getTemplate({
       variables: {
         _id: props.templateAttributeId,
       },
     });
 
-    if (templateAttributeResult.data) {
-      setTemplateAttribute(templateAttributeResult.data.template);
+    if (templateAttributeResult.data?.template) {
+      const template = templateAttributeResult.data.template;
+      setTemplateAttribute(template);
+
+      // Apply operations and selections if `defaultApplyAll` is `true`
+      if (props.defaultApplyAll) {
+        if (props.modifiedAttribute.name !== template.name) {
+          setUseTemplateName(true);
+        }
+        if (props.modifiedAttribute.description !== template.description) {
+          setUseTemplateDescription(true);
+        }
+
+        const entityValueMap = new Map(props.modifiedAttribute.values.map((value) => [value._id, value]));
+        const templateValueMap = new Map(template.values.map((value) => [value._id, value]));
+
+        // Create Sets and determine exact differences between Template and current Entity Attribute
+        const adoptModifiedSet = new Set<string>();
+        const pullTemplateSet = new Set<string>();
+        const removeEntitySet = new Set<string>();
+
+        for (const [id, templateValue] of templateValueMap) {
+          const entityValue = entityValueMap.get(id);
+          if (entityValue && !isValueEqual(entityValue, templateValue)) {
+            // Modified Value from Template
+            adoptModifiedSet.add(id);
+          } else if (!entityValue) {
+            // Added Value from Template
+            pullTemplateSet.add(id);
+          }
+        }
+
+        // Removed Values from Template
+        for (const [id] of entityValueMap) {
+          if (!templateValueMap.has(id)) {
+            removeEntitySet.add(id);
+          }
+        }
+
+        setAdoptModifiedValueIds(adoptModifiedSet);
+        setPullTemplateValueIds(pullTemplateSet);
+        setRemoveEntityValueIds(removeEntitySet);
+      }
     }
     setLoadingComparison(false);
   };
 
   useEffect(() => {
-    prepareComparison();
+    if (props.open) {
+      prepareComparison();
+    }
   }, [props.open]);
 
   /**
-   * Generate a side-by-side "diff"-like comparison between an Attribute and the Template
-   * Attribute it was created from
-   * @param attributeLeft Existing Attribute that is based on the Template Attribute
-   * @param attributeRight Template Attribute
+   * Helper function to toggle the selected items under `CompareAttributeDialogCollapsible` sections
+   * @param {React.Dispatch<React.SetStateAction<Set<string>>>} setSelected Function to dispatch and update React state
+   * @param {string} selection Selection to add or remove
+   */
+  const toggleSet = (setSelected: React.Dispatch<React.SetStateAction<Set<string>>>, selection: string) => {
+    setSelected((previous) => {
+      const next = new Set(previous);
+      if (next.has(selection)) {
+        next.delete(selection);
+      } else {
+        next.add(selection);
+      }
+      return next;
+    });
+  };
+
+  /**
+   * Helper function to toggle the `CompareAttributeDialogCollapsible` sections that are expanded
+   * @param {string} section Selected section of the Template Values diff
+   */
+  const toggleSection = (section: string) => {
+    setExpandedSections((previous) => {
+      const next = new Set(previous);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+
+  /**
+   * Helper component to represent the collapsible sections for each type of modification to the Template
+   * @param props Component props
    * @return
    */
-  const createSideBySide = (attributeLeft: AttributeModel, attributeRight: AttributeModel | undefined) => {
-    const leftValues = new Set(attributeLeft.values.map((value) => value._id));
-    const rightValues = new Set(attributeRight?.values.map((value) => value._id));
-
-    // Get collection of Values that are conserved
-    const conservedValueIds = leftValues.intersection(rightValues);
-    const conservedValues = attributeLeft.values.filter((value) => [...conservedValueIds].includes(value._id));
-
-    // Get collection of Values that are removed
-    const removedValueIds = rightValues.difference(leftValues);
-    const removedValues = attributeRight?.values.filter((value) => [...removedValueIds].includes(value._id)) || [];
-
-    // Get collection of Values that are added
-    const addedValueIds = leftValues.difference(rightValues);
-    const addedValues = attributeLeft.values.filter((value) => [...addedValueIds].includes(value._id));
-
-    return (
-      <Flex direction={"row"} gap={"2"} align={"center"}>
-        {/* Left Column */}
-        <Flex
-          direction={"column"}
-          w={"50%"}
-          rounded={"md"}
-          p={"1"}
-          gap={"1"}
-          border={GLOBAL_STYLES.border.style}
-          borderColor={GLOBAL_STYLES.border.color}
-        >
-          <Flex direction={"row"} gap={"1"} align={"center"}>
-            <Text fontWeight={"semibold"} fontSize={"xs"} color={"gray.600"}>
-              Attribute:
-            </Text>
-            <Text fontWeight={"semibold"} fontSize={"xs"}>
-              {attributeLeft.name}
-            </Text>
-          </Flex>
-
-          <Flex direction={"column"} gap={"1"} align={"start"}>
-            <Text fontWeight={"semibold"} fontSize={"xs"} color={"gray.600"}>
-              Values:
-            </Text>
-            <Flex direction={"column"} gap={"1"} ml={"0.5"}>
-              {[...conservedValues].map((value) => {
-                return (
-                  <Flex direction={"row"} gap={"1"} align={"center"}>
-                    <Icon size={"xs"} name={"check"} color={"blue.500"} />
-                    <Text fontSize={"xs"} color={"blue.600"} fontWeight={"semibold"}>
-                      {value.name}
-                    </Text>
-                  </Flex>
-                );
-              })}
-
-              {[...removedValues].map((value) => {
-                return (
-                  <Flex direction={"row"} gap={"1"} align={"center"}>
-                    <Icon size={"xs"} name={"remove"} color={"red.500"} />
-                    <Text fontSize={"xs"} color={"red.600"} fontWeight={"semibold"}>
-                      {value.name}
-                    </Text>
-                  </Flex>
-                );
-              })}
-
-              {[...addedValues].map((value) => {
-                return (
-                  <Flex direction={"row"} gap={"1"} align={"center"}>
-                    <Icon size={"xs"} name={"add"} color={"green.600"} />
-                    <Text fontSize={"xs"} color={"green.600"} fontWeight={"semibold"}>
-                      {value.name}
-                    </Text>
-                  </Flex>
-                );
-              })}
-            </Flex>
-          </Flex>
+  const CompareAttributeDialogCollapsible = (props: CompareAttributeDialogCollapsibleProps) => (
+    <Collapsible.Root
+      open={expandedSections.has(props.sectionKey)}
+      onOpenChange={() => toggleSection(props.sectionKey)}
+      bg={`${props.color}.50`}
+      p={"1"}
+      rounded={"md"}
+    >
+      <Collapsible.Trigger asChild>
+        <Flex direction={"row"} gap={"1"} align={"center"} cursor={"pointer"}>
+          <Icon
+            size={"xs"}
+            name={expandedSections.has(props.sectionKey) ? "c_up" : "c_down"}
+            color={`${props.color}.600`}
+          />
+          <Icon size={"xs"} name={props.icon} color={`${props.color}.600`} />
+          <Text fontWeight={"semibold"} fontSize={"xs"} color={`${props.color}.700`}>
+            {props.label} ({props.count})
+          </Text>
+        </Flex>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <Flex direction={"column"} gap={"1"} mt={"1"}>
+          {props.children}
         </Flex>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
 
-        {/* Right Column - Fallback */}
-        {_.isUndefined(attributeRight) && (
-          <Flex
-            w={"50%"}
-            rounded={"md"}
-            p={"1"}
-            bg={"red.100"}
-            border={GLOBAL_STYLES.border.style}
-            borderColor={GLOBAL_STYLES.border.color}
+  /**
+   * Helper component to represent the direct comparison of a single modification to the Template
+   * @param props Component props
+   * @return
+   */
+  const CompareAttributeFieldDiff = (props: CompareAttributeFieldDiffProps) => (
+    <Flex
+      direction={"column"}
+      gap={"1"}
+      p={"2"}
+      rounded={"md"}
+      w={"50%"}
+      h={"100%"}
+      border={GLOBAL_STYLES.border.style}
+      borderColor={GLOBAL_STYLES.border.color}
+    >
+      <Flex direction={"row"} justify={"space-between"} align={"center"}>
+        <Text fontWeight={"semibold"} fontSize={"xs"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
+          {props.label}
+        </Text>
+        {props.isDifferent && (
+          <Checkbox.Root
+            size={"xs"}
+            colorPalette={"blue"}
+            checked={props.useOriginal}
+            onCheckedChange={(e) => props.setUseOriginal(!!e.checked)}
           >
-            <Text fontWeight={"semibold"} fontSize={"xs"} color={"red.600"}>
-              Unable to load Template
-            </Text>
-          </Flex>
+            <Checkbox.HiddenInput />
+            <Checkbox.Control />
+            <Checkbox.Label fontSize={"xs"}>Use Template</Checkbox.Label>
+          </Checkbox.Root>
         )}
+      </Flex>
 
-        {/* Right Column - Default */}
-        {attributeRight && (
-          <Flex
-            direction={"column"}
-            w={"50%"}
-            h={"100%"}
-            rounded={"md"}
-            p={"1"}
-            border={GLOBAL_STYLES.border.style}
-            borderColor={GLOBAL_STYLES.border.color}
-          >
-            <Text fontWeight={"semibold"} fontSize={"xs"}>
-              Template: {attributeRight.name}
-            </Text>
-            <Text fontWeight={"semibold"} fontSize={"xs"} color={"gray.600"}>
-              Values:
-            </Text>
-            <Flex direction={"column"} gap={"1"} ml={"0.5"} h={"100%"}>
-              {[...attributeRight.values].map((value) => {
-                return (
-                  <Flex direction={"row"} gap={"1"} align={"center"}>
-                    <Icon size={"xs"} name={"check"} color={"blue.500"} />
-                    <Text fontSize={"xs"} color={"blue.600"} fontWeight={"semibold"}>
-                      {value.name}
-                    </Text>
-                  </Flex>
-                );
-              })}
-            </Flex>
-          </Flex>
-        )}
+      <Flex direction={"column"} gap={"1"} rounded={"sm"} bg={"white"}>
+        <Flex direction={"row"} gap={"1"} align={"center"}>
+          <Text fontSize={"xs"} color={"gray.500"}>
+            Modified:
+          </Text>
+          <Text fontSize={"xs"} fontWeight={"semibold"} color={props.isDifferent ? undefined : "blue.800"}>
+            {props.currentValue}
+          </Text>
+        </Flex>
+        <Flex direction={"row"} gap={"1"} align={"center"}>
+          <Text fontSize={"xs"} color={"gray.500"}>
+            Template:
+          </Text>
+          <Text fontSize={"xs"} fontWeight={"semibold"}>
+            {props.originalValue}
+          </Text>
+        </Flex>
       </Flex>
-    );
+    </Flex>
+  );
+
+  // Generate the differences between the Template Values and the Entity Attribute Values
+  const entityValueMap = new Map(props.modifiedAttribute.values.map((v) => [v._id, v]));
+  const templateValueMap = new Map(templateAttribute?.values.map((v) => [v._id, v]) || []);
+
+  // Generate the collection of shared Values
+  const sharedValues = [...entityValueMap.keys()].filter((id) => templateValueMap.has(id));
+
+  // Generate the collections of differing Values
+  const unchangedValues: { entity: IValue; template: IValue }[] = [];
+  const modifiedValues: { entity: IValue; template: IValue }[] = [];
+  const templateOnlyValues: IValue[] = [];
+  const entityOnlyValues: IValue[] = [];
+
+  for (const value of sharedValues) {
+    const entityValue = entityValueMap.get(value)!;
+    const templateValue = templateValueMap.get(value)!;
+    if (isValueEqual(entityValue, templateValue)) {
+      unchangedValues.push({ entity: entityValue, template: templateValue });
+    } else {
+      modifiedValues.push({ entity: entityValue, template: templateValue });
+    }
+  }
+
+  // Values only contained in the Template
+  for (const [id, value] of templateValueMap) {
+    if (!entityValueMap.has(id)) {
+      templateOnlyValues.push(value);
+    }
+  }
+
+  // Values only contained in the Entity Attribute
+  for (const [id, value] of entityValueMap) {
+    if (!templateValueMap.has(id)) entityOnlyValues.push(value);
+  }
+
+  const nameIsDifferent = props.modifiedAttribute.name !== templateAttribute?.name;
+  const descriptionIsDifferent = props.modifiedAttribute.description !== templateAttribute?.description;
+
+  const hasChanges =
+    modifiedValues.length > 0 ||
+    templateOnlyValues.length > 0 ||
+    entityOnlyValues.length > 0 ||
+    !!nameIsDifferent ||
+    !!descriptionIsDifferent;
+
+  const hasSelection =
+    useTemplateName ||
+    useTemplateDescription ||
+    adoptModifiedValueIds.size > 0 ||
+    pullTemplateValueIds.size > 0 ||
+    removeEntityValueIds.size > 0;
+
+  const onUpdate = () => {
+    // If no `onUpdate` function is specified or the `AttributeModel` is undefined, ignore
+    if (!props.onUpdate || !templateAttribute) {
+      return;
+    }
+
+    // Create updated Set of merged Values, applying changes based on user selections
+    let mergedValues: IValue[] = props.modifiedAttribute.values.map((value) => ({ ...value }));
+    mergedValues = mergedValues.filter((value) => !removeEntityValueIds.has(value._id));
+    const mergedMap = new Map(mergedValues.map((v) => [v._id, v]));
+
+    // Apply Values that are to be updated from the Template
+    for (const value of templateAttribute.values) {
+      if (mergedMap.has(value._id) && adoptModifiedValueIds.has(value._id)) {
+        const valueId = mergedValues.findIndex((mv) => mv._id === value._id);
+        if (valueId) {
+          mergedValues[valueId] = { ...value };
+        }
+      }
+    }
+
+    // Add Values to be pulled from the Template
+    for (const value of templateAttribute.values) {
+      if (!mergedMap.has(value._id) && pullTemplateValueIds.has(value._id)) {
+        mergedValues.push({ ...value });
+      }
+    }
+
+    // Call the `onUpdate` function to apply changes
+    props.onUpdate({
+      ...props.modifiedAttribute,
+      name: useTemplateName && nameIsDifferent ? templateAttribute.name : props.modifiedAttribute.name,
+      description:
+        useTemplateDescription && descriptionIsDifferent
+          ? templateAttribute.description
+          : props.modifiedAttribute.description,
+      values: mergedValues,
+    });
+    props.setOpen(false);
   };
 
   return (
-    <Dialog.Root
-      open={props.open}
-      scrollBehavior={"inside"}
-      placement={"center"}
-      onOpenChange={(event) => props.setOpen(event.open)}
-      size={"xl"}
-      closeOnEscape
-      closeOnInteractOutside
-    >
-      <Dialog.Backdrop />
-      <Dialog.Positioner>
-        <Dialog.Content maxH={"90vh"} display={"flex"} flexDirection={"column"} p={"0"}>
-          <Dialog.Header
-            p={"1"}
-            flexShrink={0}
-            bg={GLOBAL_STYLES.dialog.header.bg}
-            borderBottom={"2px"}
-            roundedTop={"md"}
-          >
-            <Flex direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
+    <React.Fragment>
+      <Dialog.Root
+        open={props.open}
+        scrollBehavior={"inside"}
+        placement={"center"}
+        onOpenChange={(event) => props.setOpen(event.open)}
+        size={"lg"}
+        closeOnEscape
+        closeOnInteractOutside
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content maxH={"90vh"} display={"flex"} flexDirection={"column"} p={"0"}>
+            <Dialog.Header
+              p={"1"}
+              flexShrink={0}
+              bg={GLOBAL_STYLES.dialog.header.bg}
+              borderBottom={"2px"}
+              roundedTop={"md"}
+            >
               <Flex align={"center"} gap={"1"} p={"1"} border={"2px"} rounded={"md"}>
-                <Icon name={"template"} size={"xs"} />
-                <Text fontSize={"xs"} fontWeight={"semibold"}>
-                  Compare Attributes: {props.modifiedAttribute.name} | {templateAttribute?.name}
-                </Text>
+                <Icon name={"diff"} size={"xs"} />
+                <Flex direction={"row"} align={"center"} gap={"1.5"}>
+                  <Text fontSize={"xs"} fontWeight={"semibold"}>
+                    Compare: {props.modifiedAttribute.name}
+                  </Text>
+                  <Icon name={"a_both"} size={"xs"} />
+                  <Text fontSize={"xs"} fontWeight={"semibold"}>
+                    {templateAttribute?.name}
+                  </Text>
+                </Flex>
               </Flex>
-            </Flex>
-            <Dialog.CloseTrigger asChild>
-              <CloseButton size={"2xs"} top={"6px"} onClick={() => props.setOpen(false)} />
-            </Dialog.CloseTrigger>
-          </Dialog.Header>
-
-          <Dialog.Body p={"2"} flex={"1"} overflow={"auto"}>
-            {loadingComparison ? (
-              <Flex w={"100%"} align={"center"} justify={"center"} minH={"240px"}>
-                <Flex direction={"row"} gap={"2"} align={"center"}>
-                  <Spinner color={"gray.600"} />
-                  <Text fontWeight={"semibold"} color={"gray.600"} fontSize={"xs"}>
-                    Preparing Comparison
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size={"2xs"} top={"6px"} onClick={() => props.setOpen(false)} />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+
+            <Dialog.Body p={"2"} flex={"1"} overflow={"auto"}>
+              {loadingComparison ? (
+                <Flex w={"100%"} align={"center"} justify={"center"} minH={"240px"}>
+                  <Flex direction={"row"} gap={"2"} align={"center"}>
+                    <Spinner color={"gray.600"} />
+                    <Text fontWeight={"semibold"} color={"gray.600"} fontSize={"xs"}>
+                      Preparing Comparison
+                    </Text>
+                  </Flex>
+                </Flex>
+              ) : !templateAttribute ? (
+                <Flex
+                  w={"100%"}
+                  minH={"240px"}
+                  align={"center"}
+                  justify={"center"}
+                  rounded={"md"}
+                  bg={"red.100"}
+                  p={"4"}
+                >
+                  <Text fontWeight={"semibold"} fontSize={"xs"} color={"red.600"}>
+                    Unable to load Template
                   </Text>
                 </Flex>
+              ) : (
+                <Flex direction={"column"} gap={"2"}>
+                  {/* Notification if there are not changes to the Template */}
+                  {!hasChanges && templateAttribute && (
+                    <Flex w={"100%"} align={"center"} justify={"center"} minH={"120px"}>
+                      <Flex direction={"row"} gap={"2"} align={"center"}>
+                        <Icon size={"xs"} name={"check"} color={"green.500"} />
+                        <Text fontWeight={"semibold"} fontSize={"xs"} color={"green.700"}>
+                          {props.modifiedAttribute.name} matches Template {templateAttribute.name}
+                        </Text>
+                      </Flex>
+                    </Flex>
+                  )}
+
+                  <Flex direction={"row"} gap={"2"} align={"stretch"}>
+                    {/* Template Name */}
+                    <CompareAttributeFieldDiff
+                      label={"Name"}
+                      isDifferent={!!nameIsDifferent}
+                      useOriginal={useTemplateName}
+                      setUseOriginal={setUseTemplateName}
+                      currentValue={props.modifiedAttribute.name || "(empty)"}
+                      originalValue={templateAttribute.name || "(empty)"}
+                    />
+                    {/* Template Description */}
+                    <CompareAttributeFieldDiff
+                      label={"Description"}
+                      isDifferent={!!descriptionIsDifferent}
+                      useOriginal={useTemplateDescription}
+                      setUseOriginal={setUseTemplateDescription}
+                      currentValue={props.modifiedAttribute.description || "(empty)"}
+                      originalValue={templateAttribute.description || "(empty)"}
+                    />
+                  </Flex>
+
+                  {/* Template Values */}
+                  <Flex
+                    direction={"column"}
+                    gap={"1"}
+                    p={"2"}
+                    rounded={"md"}
+                    border={GLOBAL_STYLES.border.style}
+                    borderColor={GLOBAL_STYLES.border.color}
+                  >
+                    <Text fontWeight={"semibold"} fontSize={"xs"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
+                      Values
+                    </Text>
+
+                    <Flex direction={"row"} gap={"2"} align={"stretch"}>
+                      {/* Left Column: Entity Attribute */}
+                      <Flex
+                        direction={"column"}
+                        w={"50%"}
+                        p={"2"}
+                        rounded={"md"}
+                        border={"1px solid"}
+                        borderColor={GLOBAL_STYLES.border.color}
+                        gap={"2"}
+                      >
+                        <Flex direction={"row"} gap={"1"} justify={"space-between"}>
+                          <Text fontSize={"xs"} fontWeight={"semibold"}>
+                            {props.entityName}: {props.modifiedAttribute.name}
+                          </Text>
+                          <Text fontSize={"xs"} fontWeight={"semibold"} color={"purple.500"}>
+                            Modified
+                          </Text>
+                        </Flex>
+
+                        <CompareAttributeDialogCollapsible
+                          sectionKey={"unmodified"}
+                          icon={"check"}
+                          color={"blue"}
+                          label={"Unmodified"}
+                          count={unchangedValues.length}
+                        >
+                          {unchangedValues.length === 0 && (
+                            <Text fontSize={"xs"} color={"gray.500"}>
+                              No Unmodified Values
+                            </Text>
+                          )}
+                          {unchangedValues.map(({ entity }) => (
+                            <Text key={entity._id} fontSize={"xs"} color={"blue.800"} fontWeight={"semibold"}>
+                              {entity.name}
+                            </Text>
+                          ))}
+                        </CompareAttributeDialogCollapsible>
+
+                        <CompareAttributeDialogCollapsible
+                          sectionKey={"modified"}
+                          icon={"edit"}
+                          color={"orange"}
+                          label={"Modified"}
+                          count={modifiedValues.length}
+                        >
+                          {modifiedValues.length === 0 && (
+                            <Text fontSize={"xs"} color={"gray.500"}>
+                              No Modified Values
+                            </Text>
+                          )}
+                          {modifiedValues.map(({ entity }) => (
+                            <Flex
+                              key={entity._id}
+                              direction={"column"}
+                              gap={"0.5"}
+                              bg={"white"}
+                              p={"1.5"}
+                              rounded={"sm"}
+                              borderLeft={"3px"}
+                              borderLeftColor={"orange.400"}
+                            >
+                              <Flex direction={"row"} gap={"1"} align={"center"}>
+                                <Text fontSize={"xs"} color={"gray.500"}>
+                                  Modified:
+                                </Text>
+                                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                  {entity.name}
+                                </Text>
+                              </Flex>
+                            </Flex>
+                          ))}
+                        </CompareAttributeDialogCollapsible>
+
+                        <CompareAttributeDialogCollapsible
+                          sectionKey={"add-remove"}
+                          icon={"add"}
+                          color={"green"}
+                          label={"Add or Remove"}
+                          count={entityOnlyValues.length + templateOnlyValues.length}
+                        >
+                          {entityOnlyValues.length === 0 && templateOnlyValues.length === 0 && (
+                            <Text fontSize={"xs"} color={"gray.400"}>
+                              No Values to Add or Remove
+                            </Text>
+                          )}
+                          {entityOnlyValues.length > 0 && (
+                            <Text
+                              fontSize={"xs"}
+                              fontWeight={"semibold"}
+                              color={"gray.600"}
+                              borderBottom={"1px"}
+                              borderColor={"purple.200"}
+                              pb={"0.5"}
+                            >
+                              Added to {props.modifiedAttribute.name}
+                              {props.entityName ? ` (${props.entityName})` : ""}
+                            </Text>
+                          )}
+                          {entityOnlyValues.map((value) => (
+                            <Flex
+                              key={value._id}
+                              direction={"row"}
+                              gap={"1"}
+                              align={"center"}
+                              bg={"white"}
+                              p={"1"}
+                              rounded={"sm"}
+                              justify={"space-between"}
+                            >
+                              <Flex direction={"row"} gap={"1"} align={"center"}>
+                                <Text fontSize={"xs"} color={"gray.500"}>
+                                  Added:
+                                </Text>
+                                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                  {value.name}
+                                </Text>
+                              </Flex>
+                              <Checkbox.Root
+                                size={"xs"}
+                                colorPalette={"blue"}
+                                checked={removeEntityValueIds.has(value._id)}
+                                onCheckedChange={() => toggleSet(setRemoveEntityValueIds, value._id)}
+                              >
+                                <Checkbox.HiddenInput />
+                                <Checkbox.Control />
+                                <Checkbox.Label fontSize={"xs"}>
+                                  <Text fontSize={"xs"} color={"red.500"} fontWeight={"semibold"}>
+                                    Remove
+                                  </Text>
+                                </Checkbox.Label>
+                              </Checkbox.Root>
+                            </Flex>
+                          ))}
+                        </CompareAttributeDialogCollapsible>
+                      </Flex>
+
+                      <Icon name={"a_both"} size={"xs"} />
+
+                      {/* Right Column: Template Attribute */}
+                      <Flex
+                        direction={"column"}
+                        w={"50%"}
+                        p={"2"}
+                        rounded={"md"}
+                        border={GLOBAL_STYLES.border.style}
+                        borderColor={GLOBAL_STYLES.border.color}
+                        gap={"2"}
+                      >
+                        <Flex direction={"row"} gap={"1"} justify={"space-between"}>
+                          <Text fontSize={"xs"} fontWeight={"semibold"}>
+                            {templateAttribute.name}
+                          </Text>
+                          <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.template.color.icon}>
+                            Template
+                          </Text>
+                        </Flex>
+
+                        <CompareAttributeDialogCollapsible
+                          sectionKey={"unmodified"}
+                          icon={"check"}
+                          color={"blue"}
+                          label={"Unmodified"}
+                          count={unchangedValues.length}
+                        >
+                          {unchangedValues.length === 0 && (
+                            <Text fontSize={"xs"} color={"gray.500"}>
+                              No Unmodified Values
+                            </Text>
+                          )}
+                          {unchangedValues.map(({ template }) => (
+                            <Text key={template._id} fontSize={"xs"} color={"blue.800"} fontWeight={"semibold"}>
+                              {template.name}
+                            </Text>
+                          ))}
+                        </CompareAttributeDialogCollapsible>
+
+                        <CompareAttributeDialogCollapsible
+                          sectionKey={"modified"}
+                          icon={"edit"}
+                          color={"orange"}
+                          label={"Modified"}
+                          count={modifiedValues.length}
+                        >
+                          {modifiedValues.length === 0 && (
+                            <Text fontSize={"xs"} color={"gray.500"}>
+                              No Modified Values
+                            </Text>
+                          )}
+                          {modifiedValues.map(({ template }) => (
+                            <Flex
+                              key={template._id}
+                              direction={"row"}
+                              justify={"space-between"}
+                              gap={"0.5"}
+                              bg={"white"}
+                              p={"1.5"}
+                              rounded={"sm"}
+                              borderLeft={"3px"}
+                              borderLeftColor={"orange.400"}
+                            >
+                              <Flex direction={"row"} gap={"1"} align={"center"}>
+                                <Text fontSize={"xs"} color={"gray.500"}>
+                                  Template:
+                                </Text>
+                                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                  {template.name}
+                                </Text>
+                              </Flex>
+                              <Checkbox.Root
+                                size={"xs"}
+                                colorPalette={"blue"}
+                                checked={adoptModifiedValueIds.has(template._id)}
+                                onCheckedChange={() => toggleSet(setAdoptModifiedValueIds, template._id)}
+                              >
+                                <Checkbox.HiddenInput />
+                                <Checkbox.Control />
+                                <Checkbox.Label fontSize={"xs"}>Use Template</Checkbox.Label>
+                              </Checkbox.Root>
+                            </Flex>
+                          ))}
+                        </CompareAttributeDialogCollapsible>
+
+                        <CompareAttributeDialogCollapsible
+                          sectionKey={"add-remove"}
+                          icon={"add"}
+                          color={"green"}
+                          label={"Add or Remove"}
+                          count={entityOnlyValues.length + templateOnlyValues.length}
+                        >
+                          {entityOnlyValues.length === 0 && templateOnlyValues.length === 0 && (
+                            <Text fontSize={"xs"} color={"gray.400"}>
+                              No Values to Add or Remove
+                            </Text>
+                          )}
+                          {templateOnlyValues.length > 0 && (
+                            <Text
+                              fontSize={"xs"}
+                              fontWeight={"semibold"}
+                              color={"gray.600"}
+                              borderBottom={"1px"}
+                              borderColor={"teal.200"}
+                              pb={"0.5"}
+                            >
+                              Available in Template ({templateAttribute.name})
+                            </Text>
+                          )}
+                          {templateOnlyValues.map((value) => (
+                            <Flex
+                              key={value._id}
+                              direction={"row"}
+                              gap={"1"}
+                              align={"center"}
+                              bg={"white"}
+                              p={"1"}
+                              rounded={"sm"}
+                              justify={"space-between"}
+                            >
+                              <Flex direction={"row"} gap={"1"} align={"center"}>
+                                <Text fontSize={"xs"} color={"gray.500"}>
+                                  Template:
+                                </Text>
+                                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                  {value.name}
+                                </Text>
+                              </Flex>
+                              <Checkbox.Root
+                                size={"xs"}
+                                colorPalette={"blue"}
+                                checked={pullTemplateValueIds.has(value._id)}
+                                onCheckedChange={() => toggleSet(setPullTemplateValueIds, value._id)}
+                              >
+                                <Checkbox.HiddenInput />
+                                <Checkbox.Control />
+                                <Checkbox.Label fontSize={"xs"}>
+                                  <Text fontSize={"xs"} color={"green.600"} fontWeight={"semibold"}>
+                                    Add
+                                  </Text>
+                                </Checkbox.Label>
+                              </Checkbox.Root>
+                            </Flex>
+                          ))}
+                        </CompareAttributeDialogCollapsible>
+                      </Flex>
+                    </Flex>
+                  </Flex>
+                </Flex>
+              )}
+            </Dialog.Body>
+
+            <Dialog.Footer
+              p={"1"}
+              flexShrink={0}
+              bg={GLOBAL_STYLES.dialog.footer.bg}
+              borderTop={"1px"}
+              borderColor={"gray.200"}
+              roundedBottom={"md"}
+            >
+              <Flex direction={"row"} justify={"space-between"} gap={"2"} w={"100%"}>
+                <Button size={"xs"} rounded={"md"} colorPalette={"red"} onClick={() => props.setOpen(false)}>
+                  Cancel
+                  <Icon name={"cross"} size={"xs"} />
+                </Button>
+                <Button
+                  size={"xs"}
+                  rounded={"md"}
+                  colorPalette={"green"}
+                  disabled={!hasSelection}
+                  onClick={() => setWarningOpen(true)}
+                >
+                  Apply
+                  <Icon name={"check"} size={"xs"} />
+                </Button>
               </Flex>
-            ) : (
-              createSideBySide(props.modifiedAttribute, templateAttribute)
-            )}
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Positioner>
-    </Dialog.Root>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
+
+      <AlertDialog
+        header={"Modify Template"}
+        open={warningOpen}
+        setOpen={setWarningOpen}
+        leftButtonLabel={"Cancel"}
+        leftButtonAction={() => setWarningOpen(false)}
+        rightButtonLabel={"Apply"}
+        rightButtonAction={() => {
+          setWarningOpen(false);
+          onUpdate();
+        }}
+      >
+        <Flex direction={"column"} gap={"2"}>
+          <Text fontSize={"xs"} fontWeight={"semibold"} color={"orange.600"}>
+            These operations are potentially destructive!
+          </Text>
+          <Text fontSize={"xs"}>
+            Ensure you review all changes to {props.modifiedAttribute.name} before saving. You will be able to preview
+            changes.
+          </Text>
+        </Flex>
+      </AlertDialog>
+    </React.Fragment>
   );
 };
 
diff --git a/client/src/components/Icon/index.tsx b/client/src/components/Icon/index.tsx
index 578fa0cd..05f7ad85 100644
--- a/client/src/components/Icon/index.tsx
+++ b/client/src/components/Icon/index.tsx
@@ -8,6 +8,7 @@ import {
   BsArchiveFill,
   BsArrowCounterclockwise,
   BsArrowLeftCircleFill,
+  BsArrowLeftRight,
   BsArrowRight,
   BsArrowRightCircleFill,
   BsArrowUpRight,
@@ -174,6 +175,7 @@ export const SYSTEM_ICONS: Record<string, IconType> = {
   a_right: BsArrowRight,
   a_right_fill: BsArrowRightCircleFill,
   a_left_fill: BsArrowLeftCircleFill,
+  a_both: BsArrowLeftRight,
   a_both_fill: BsFillDashCircleFill,
 
   // Chevrons
diff --git a/client/src/components/ViewAttributeDialog/index.tsx b/client/src/components/ViewAttributeDialog/index.tsx
index b174b937..c1f53524 100644
--- a/client/src/components/ViewAttributeDialog/index.tsx
+++ b/client/src/components/ViewAttributeDialog/index.tsx
@@ -10,7 +10,7 @@ import Linky from "@components/Linky";
 import Values from "@components/Values";
 
 // Existing and custom types
-import { ViewAttributeDialogProps } from "@types";
+import { AttributeModel, ViewAttributeDialogProps } from "@types";
 
 // Utility functions and libraries
 import _ from "lodash";
@@ -22,11 +22,29 @@ const ViewAttributeDialog = (props: ViewAttributeDialogProps) => {
   const isEditing = _.isBoolean(props.editing) ? props.editing : false;
 
   // State to be updated
-  const [attribute] = useState(props.attribute);
   const [name, setName] = useState(props.attribute.name);
   const [description, setDescription] = useState(props.attribute.description);
   const [values, setValues] = useState(props.attribute.values);
-  const [compareAttributesOpen, setCompareAttributesOpen] = useState(false);
+  const [compareDialogOpen, setCompareDialogOpen] = useState(false);
+  const [compareDefaultApplyAll, setCompareDefaultApplyAll] = useState(false);
+
+  // Current working state, used to inform `CompareAttributeDialog` state
+  const currentAttribute: AttributeModel = {
+    ...props.attribute,
+    name,
+    description,
+    values,
+  };
+
+  /**
+   * Helper function to apply changes to the `AttributeModel` after the `CompareAttributeDialog` has been closed
+   * @param updated Update `AttributeModel` after comparison
+   */
+  const onUpdateAttribute = (updated: AttributeModel) => {
+    setName(updated.name);
+    setDescription(updated.description);
+    setValues(updated.values);
+  };
 
   return (
     <React.Fragment>
@@ -86,15 +104,38 @@ const ViewAttributeDialog = (props: ViewAttributeDialogProps) => {
                         size={"xs"}
                         rounded={"md"}
                         colorPalette={"blue"}
-                        onClick={() => setCompareAttributesOpen(true)}
+                        disabled={!isEditing}
+                        onClick={() => {
+                          setCompareDefaultApplyAll(false);
+                          setCompareDialogOpen(true);
+                        }}
                       >
                         <Icon name={"diff"} />
                         Compare
                       </Button>
-                      <Button size={"xs"} rounded={"md"} colorPalette={"orange"} disabled>
+                      <Button
+                        size={"xs"}
+                        rounded={"md"}
+                        colorPalette={"orange"}
+                        disabled={!isEditing}
+                        onClick={() => {
+                          setCompareDefaultApplyAll(true);
+                          setCompareDialogOpen(true);
+                        }}
+                      >
                         <Icon name={"reload"} />
                         Reset
                       </Button>
+
+                      <CompareAttributeDialog
+                        open={compareDialogOpen}
+                        setOpen={setCompareDialogOpen}
+                        modifiedAttribute={currentAttribute}
+                        templateAttributeId={props.attribute._id.slice(0, 10)}
+                        onUpdate={onUpdateAttribute}
+                        defaultApplyAll={compareDefaultApplyAll}
+                        entityName={props.entityName}
+                      />
                     </Flex>
                   </Flex>
                 )}
@@ -211,8 +252,8 @@ const ViewAttributeDialog = (props: ViewAttributeDialogProps) => {
                     variant={"solid"}
                     onClick={() => {
                       // Reset the changes made to the Attribute
-                      setDescription(attribute.description);
-                      setValues(attribute.values);
+                      setDescription(props.attribute.description);
+                      setValues(props.attribute.values);
 
                       // Close the dialog
                       props.setOpen(false);
@@ -255,12 +296,6 @@ const ViewAttributeDialog = (props: ViewAttributeDialogProps) => {
           </Dialog.Content>
         </Dialog.Positioner>
       </Dialog.Root>
-      <CompareAttributeDialog
-        open={compareAttributesOpen}
-        setOpen={setCompareAttributesOpen}
-        modifiedAttribute={attribute}
-        templateAttributeId={props.attribute._id.slice(0, 10)}
-      />
     </React.Fragment>
   );
 };
diff --git a/client/src/lib/util.ts b/client/src/lib/util.ts
index 83099012..66c75359 100644
--- a/client/src/lib/util.ts
+++ b/client/src/lib/util.ts
@@ -2,85 +2,91 @@
 import _ from "lodash";
 
 // Custom types
-import {
-  IAttribute,
-  ISelectOption,
-  IValue,
-  IValueType,
-  IconNames,
-  SearchAttributeValue,
-  SearchQuery,
-  UserModel,
-} from "@types";
+import { IAttribute, ISelectOption, IValue, IValueType, IconNames, SearchAttributeValue, SearchQuery } from "@types";
 
 // Utility functions
 import dayjs from "dayjs";
 
-export const isValidValues = (values: IValue[], allowEmptyValues = false) => {
-  if (values.length === 0) {
+export const isValueEqual = (a: IValue, b: IValue): boolean => {
+  return a.name === b.name && a.type === b.type && a.data === b.data;
+};
+
+export const isValidValue = (value: IValue, allowEmptyValue = false) => {
+  // Check the name of the Value
+  if (_.isEqual(value.name, "")) {
     return false;
   }
 
-  for (const value of values) {
-    // Check the name of the Value
-    if (_.isEqual(value.name, "")) {
+  // Check data if empty Values are not allowed
+  if (!allowEmptyValue) {
+    if (_.isUndefined(value.data) || _.isEqual(value.data, "")) {
       return false;
     }
-
-    // Check data if empty values are not allowed
-    if (!allowEmptyValues) {
-      if (_.isUndefined(value.data) || _.isEqual(value.data, "")) {
-        return false;
-      }
-    }
   }
+
   return true;
 };
 
-export const isValidAttributes = (attributes: IAttribute[]) => {
-  if (attributes.length === 0) return false;
-
-  for (const attribute of attributes) {
-    // Check the name and description
-    if (_.isEqual(attribute.name, "") || _.isEqual(attribute.description, "")) {
-      return false;
-    }
-
-    // Check the data
-    if (_.isEqual(isValidValues(attribute.values), false)) {
-      return false;
-    }
+export const isValidValues = (values: IValue[], allowEmptyValues = false) => {
+  if (values.length === 0) {
+    return false;
   }
 
+  for (const value of values) {
+    isValidValue(value, allowEmptyValues);
+  }
   return true;
 };
 
-export const isValidUser = (user: UserModel): boolean => {
-  if (
-    _.isUndefined(user.affiliation) ||
-    _.isUndefined(user.email) ||
-    _.isUndefined(user.firstName) ||
-    _.isUndefined(user.lastName) ||
-    user.affiliation === "" ||
-    user.email === "" ||
-    user.firstName === "" ||
-    user.lastName === ""
-  ) {
+/**
+ * Utility function to generate the corresponding `IconName` and color
+ * for each `IValueType`
+ * @param type `IValueType` representing the icon and color scheme
+ * @return {{ icon: IconNames, color: string }}
+ */
+export const getValueTypeIconProps = (type: IValueType | undefined): { name: IconNames; color: string } => {
+  switch (type) {
+    case "date":
+      return { name: "v_date", color: "orange.400" };
+    case "text":
+      return { name: "v_text", color: "blue.400" };
+    case "number":
+      return { name: "v_number", color: "green.400" };
+    case "url":
+      return { name: "v_url", color: "yellow.400" };
+    case "select":
+      return { name: "v_select", color: "teal.400" };
+    case "entity":
+      return { name: "entity", color: "purple.400" };
+    default:
+      return { name: "unknown", color: "red.400" };
+  }
+};
+
+export const isValidAttribute = (attribute: IAttribute) => {
+  // Check the name and description
+  if (_.isEqual(attribute.name, "") || _.isEqual(attribute.description, "")) {
     return false;
   }
+
+  // Check the data
+  if (_.isEqual(isValidValues(attribute.values), false)) {
+    return false;
+  }
+
   return true;
 };
 
-/**
- * Check if an ORCID is a valid format
- * @param {string} orcid the ORCID to check
- * @returns {boolean}
- */
-export const isValidOrcid = (orcid: string): boolean => {
-  if (_.isUndefined(orcid) || _.isEqual(orcid, "")) {
+export const isValidAttributes = (attributes: IAttribute[]) => {
+  if (attributes.length === 0) {
     return false;
   }
-  return /^(\d{4}-){3}\d{3}(\d|X)$/.test(orcid);
+
+  for (const attribute of attributes) {
+    isValidAttribute(attribute);
+  }
+
+  return true;
 };
 
 /**
@@ -196,54 +202,32 @@ export const ignoreAbort = (e: unknown): void => {
   if (!isAbortError(e)) throw e;
 };
 
-/**
- * Utility function to generate the corresponding `IconName` and color
- * for each `IValueType`
- * @param type `IValueType` representing the icon and color scheme
- * @return {{ icon: IconNames, color: string }}
- */
-export const getValueTypeIconProps = (type: IValueType | undefined): { name: IconNames; color: string } => {
-  switch (type) {
-    case "date":
-      return { name: "v_date", color: "orange.400" };
-    case "text":
-      return { name: "v_text", color: "blue.400" };
-    case "number":
-      return { name: "v_number", color: "green.400" };
-    case "url":
-      return { name: "v_url", color: "yellow.400" };
-    case "select":
-      return { name: "v_select", color: "teal.400" };
-    case "entity":
-      return { name: "entity", color: "purple.400" };
-    default:
-      return { name: "unknown", color: "red.400" };
-  }
-};
-
 /**
  * Recursively remove __typename fields from an object or array.
  * Apollo Client v4 automatically adds __typename to query results, but these
  * fields are not allowed in GraphQL input types (mutations).
- * @param obj The object or array to clean
+ * @param toClean The object or array to clean
  * @returns A new object/array with all __typename fields removed
  */
-export const removeTypename = (obj: any): any => {
-  if (obj === null || obj === undefined) {
-    return obj;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const removeTypename = (toClean: any): any => {
+  if (toClean === null || toClean === undefined) {
+    return toClean;
   }
-  if (Array.isArray(obj)) {
-    return obj.map(removeTypename);
+  if (Array.isArray(toClean)) {
+    return toClean.map(removeTypename);
   }
-  if (typeof obj === "object") {
-    const { __typename, ...rest } = obj;
+  if (typeof toClean === "object") {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { __typename, ...rest } = toClean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const cleaned: any = {};
     for (const key in rest) {
       cleaned[key] = removeTypename(rest[key]);
     }
     return cleaned;
   }
-  return obj;
+  return toClean;
 };
 
 /**
diff --git a/client/src/pages/view/Entity.tsx b/client/src/pages/view/Entity.tsx
index 774984a6..8a08128b 100644
--- a/client/src/pages/view/Entity.tsx
+++ b/client/src/pages/view/Entity.tsx
@@ -774,8 +774,9 @@ const Entity = () => {
               <ViewAttributeDialog
                 open={viewAttributeDialogOpen}
                 setOpen={setViewAttributeDialogOpen}
-                attribute={attribute}
                 editing={editing}
+                entityName={entityName}
+                attribute={attribute}
                 isTemplate={isKnownTemplate(attribute._id, templates)}
                 onAttributeUpdate={onAttributeUpdate}
                 removeCallback={() => {
diff --git a/types/index.d.ts b/types/index.d.ts
index ab2a1ec8..fa1728e4 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -102,6 +102,9 @@ export type ViewAttributeDialogProps = {
   onAttributeUpdate: (updated: AttributeModel) => void;
   removeCallback?: () => void;
   cancelCallback?: () => void;
+
+  // Optional context for comparison display
+  entityName?: string;
 };
 
 export type CompareAttributeDialogProps = {
@@ -112,6 +115,33 @@ export type CompareAttributeDialogProps = {
   // Dialog Attribute information
   modifiedAttribute: AttributeModel;
   templateAttributeId: string;
+
+  // Optional callback to apply selected template changes back to the entity attribute
+  onUpdate?: (updated: AttributeModel) => void;
+
+  // When true, all changes are pre-selected
+  defaultApplyAll?: boolean;
+
+  // Optional context for comparison display
+  entityName?: string;
+};
+
+export type CompareAttributeDialogCollapsibleProps = {
+  sectionKey: string;
+  icon: IconNames;
+  color: string;
+  label: string;
+  count: number;
+  children: React.ReactNode;
+};
+
+export type CompareAttributeFieldDiffProps = {
+  label: string;
+  isDifferent: boolean;
+  currentValue: string;
+  originalValue: string;
+  useOriginal: boolean;
+  setUseOriginal: (v: boolean) => void;
 };
 
 // Column descriptor returned by prepareEntityCSV
@@ -584,6 +614,7 @@ export type IconNames =
   | "a_right"
   | "a_right_fill"
   | "a_left_fill"
+  | "a_both"
   | "a_both_fill"
 
   // Chevrons

From b4622444b342a026dc7e7915ee9308eeddd5b11d Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Tue, 30 Jun 2026 18:12:07 -0500
Subject: [PATCH 3/6] MARS-1167 Fix bug with state propagation

---
 .../CompareAttributeDialog/index.tsx          |  4 ++--
 client/src/components/Values/index.tsx        | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/src/components/CompareAttributeDialog/index.tsx b/client/src/components/CompareAttributeDialog/index.tsx
index b1fcd839..9862e510 100644
--- a/client/src/components/CompareAttributeDialog/index.tsx
+++ b/client/src/components/CompareAttributeDialog/index.tsx
@@ -339,8 +339,8 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
     // Apply Values that are to be updated from the Template
     for (const value of templateAttribute.values) {
       if (mergedMap.has(value._id) && adoptModifiedValueIds.has(value._id)) {
-        const valueId = mergedValues.findIndex((mv) => mv._id === value._id);
-        if (valueId) {
+        const valueId = mergedValues.findIndex((mergedValue) => mergedValue._id === value._id);
+        if (valueId !== -1) {
           mergedValues[valueId] = { ...value };
         }
       }
diff --git a/client/src/components/Values/index.tsx b/client/src/components/Values/index.tsx
index 43ee6f87..52f6858b 100644
--- a/client/src/components/Values/index.tsx
+++ b/client/src/components/Values/index.tsx
@@ -1202,6 +1202,25 @@ const ValueRow = (props: {
     props.onValueChange(props.value._id, valueName, valueType, valueData, props.permittedValues ? source : undefined);
   }, [valueName, valueType, valueData, source]);
 
+  // Sync local state when props change from an external source
+  useEffect(() => {
+    setValueName(props.value.name);
+    setValueType(props.value.type as IValueType);
+    setValueData(props.value.data);
+
+    // Adjust for Value sources
+    const valueSource = props.value.source ?? "column";
+    setSource(valueSource);
+    const columnMode = props.permittedValues !== undefined && valueSource === "column";
+
+    // Update Value types
+    const typeOptions: ValueTypeOption[] = columnMode
+      ? baseTypeOptions
+      : [...baseTypeOptions, { label: "Entity", value: "entity" }, { label: "Select", value: "select" }];
+    const valueType = typeOptions.find((option) => option.value === props.value.type) ?? baseTypeOptions[1];
+    setValueTypeOption(valueType);
+  }, [props.value.name, props.value.type, props.value.data, props.value.source, props.permittedValues]);
+
   /**
    * Utility function to generate default data when the `type` changes
    * @param valueType The new `IValueType` that has been selected

From ab827bb50d3be174a3c98c5453b94588b09aab40 Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Fri, 10 Jul 2026 15:41:13 -0500
Subject: [PATCH 4/6] MARS-1167 Fix numbering on modifications count

---
 .../CompareAttributeDialog/index.tsx          | 25 +++++++++++--------
 types/index.d.ts                              |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/client/src/components/CompareAttributeDialog/index.tsx b/client/src/components/CompareAttributeDialog/index.tsx
index 9862e510..1cc1085f 100644
--- a/client/src/components/CompareAttributeDialog/index.tsx
+++ b/client/src/components/CompareAttributeDialog/index.tsx
@@ -253,14 +253,16 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
       </Flex>
 
       <Flex direction={"column"} gap={"1"} rounded={"sm"} bg={"white"}>
-        <Flex direction={"row"} gap={"1"} align={"center"}>
-          <Text fontSize={"xs"} color={"gray.500"}>
-            Modified:
-          </Text>
-          <Text fontSize={"xs"} fontWeight={"semibold"} color={props.isDifferent ? undefined : "blue.800"}>
-            {props.currentValue}
-          </Text>
-        </Flex>
+        {props.isDifferent && (
+          <Flex direction={"row"} gap={"1"} align={"center"}>
+            <Text fontSize={"xs"} color={"gray.500"}>
+              Modified:
+            </Text>
+            <Text fontSize={"xs"} fontWeight={"semibold"} color={"orange.600"}>
+              {props.currentValue}
+            </Text>
+          </Flex>
+        )}
         <Flex direction={"row"} gap={"1"} align={"center"}>
           <Text fontSize={"xs"} color={"gray.500"}>
             Template:
@@ -268,6 +270,9 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
           <Text fontSize={"xs"} fontWeight={"semibold"}>
             {props.originalValue}
           </Text>
+          <Text fontSize={"xs"} color={"gray.500"}>
+            {!props.isDifferent && " (unchanged)"}
+          </Text>
         </Flex>
       </Flex>
     </Flex>
@@ -555,7 +560,7 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                           icon={"add"}
                           color={"green"}
                           label={"Add or Remove"}
-                          count={entityOnlyValues.length + templateOnlyValues.length}
+                          count={entityOnlyValues.length}
                         >
                           {entityOnlyValues.length === 0 && templateOnlyValues.length === 0 && (
                             <Text fontSize={"xs"} color={"gray.400"}>
@@ -704,7 +709,7 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                           icon={"add"}
                           color={"green"}
                           label={"Add or Remove"}
-                          count={entityOnlyValues.length + templateOnlyValues.length}
+                          count={templateOnlyValues.length}
                         >
                           {entityOnlyValues.length === 0 && templateOnlyValues.length === 0 && (
                             <Text fontSize={"xs"} color={"gray.400"}>
diff --git a/types/index.d.ts b/types/index.d.ts
index fa1728e4..7500ce00 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -116,7 +116,7 @@ export type CompareAttributeDialogProps = {
   modifiedAttribute: AttributeModel;
   templateAttributeId: string;
 
-  // Optional callback to apply selected template changes back to the entity attribute
+  // Optional callback to apply selected Template changes back to the Entity Attribute
   onUpdate?: (updated: AttributeModel) => void;
 
   // When true, all changes are pre-selected

From f7d449256e1d1e50e34fa169d3dd66399795bf19 Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Thu, 30 Jul 2026 13:01:04 -0500
Subject: [PATCH 5/6] MARS-1167 Multiple UI updates

---
 .../CompareAttributeDialog/index.tsx          | 255 +++++++++++-------
 client/src/lib/util.ts                        |   1 -
 client/src/pages/Dashboard.tsx                | 190 +++++++++----
 client/src/pages/view/Entities.tsx            |  83 ++++--
 client/src/pages/view/Entity.tsx              | 169 +++++++-----
 client/src/pages/view/Project.tsx             | 144 ++++++----
 client/src/pages/view/Projects.tsx            |  64 +++--
 client/src/pages/view/Template.tsx            |  80 +++---
 client/src/pages/view/Templates.tsx           |  82 ++++--
 types/index.d.ts                              |   1 +
 10 files changed, 717 insertions(+), 352 deletions(-)

diff --git a/client/src/components/CompareAttributeDialog/index.tsx b/client/src/components/CompareAttributeDialog/index.tsx
index 1cc1085f..939155b4 100644
--- a/client/src/components/CompareAttributeDialog/index.tsx
+++ b/client/src/components/CompareAttributeDialog/index.tsx
@@ -2,9 +2,10 @@
 import React, { useEffect, useState } from "react";
 
 // Existing and custom components
-import { Button, Flex, Text, CloseButton, Spinner, Checkbox, Collapsible, Dialog } from "@chakra-ui/react";
+import { Button, Flex, Text, CloseButton, Spinner, Checkbox, Collapsible, Dialog, Spacer } from "@chakra-ui/react";
 import AlertDialog from "@components/AlertDialog";
 import Icon from "@components/Icon";
+import Tooltip from "@components/Tooltip";
 
 // Existing and custom types
 import {
@@ -20,7 +21,8 @@ import { useLazyQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
 
 // Utility functions
-import { isValueEqual } from "@lib/util";
+import { getValueTypeIconProps, isValueEqual } from "@lib/util";
+import _ from "lodash";
 
 // Variables
 import { GLOBAL_STYLES } from "@variables";
@@ -196,9 +198,10 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
       bg={`${props.color}.50`}
       p={"1"}
       rounded={"md"}
+      disabled={props.disabled}
     >
       <Collapsible.Trigger asChild>
-        <Flex direction={"row"} gap={"1"} align={"center"} cursor={"pointer"}>
+        <Flex direction={"row"} gap={"1"} align={"center"} cursor={props.disabled ? "not-allowed" : "pointer"}>
           <Icon
             size={"xs"}
             name={expandedSections.has(props.sectionKey) ? "c_up" : "c_down"}
@@ -247,7 +250,7 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
           >
             <Checkbox.HiddenInput />
             <Checkbox.Control />
-            <Checkbox.Label fontSize={"xs"}>Use Template</Checkbox.Label>
+            <Checkbox.Label fontSize={"xs"}>Reset to Template</Checkbox.Label>
           </Checkbox.Root>
         )}
       </Flex>
@@ -256,23 +259,32 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
         {props.isDifferent && (
           <Flex direction={"row"} gap={"1"} align={"center"}>
             <Text fontSize={"xs"} color={"gray.500"}>
-              Modified:
-            </Text>
-            <Text fontSize={"xs"} fontWeight={"semibold"} color={"orange.600"}>
-              {props.currentValue}
+              Current Entity:
             </Text>
+            <Tooltip disabled={props.currentValue.length < 24} content={props.currentValue} showArrow>
+              <Text fontSize={"xs"} fontWeight={"semibold"} color={"orange.600"}>
+                {_.truncate(props.currentValue, { length: 24 })}
+              </Text>
+            </Tooltip>
+
+            <Spacer />
+
+            <Icon name={"edit"} color={"orange.600"} size={"xs"} />
           </Flex>
         )}
         <Flex direction={"row"} gap={"1"} align={"center"}>
           <Text fontSize={"xs"} color={"gray.500"}>
             Template:
           </Text>
-          <Text fontSize={"xs"} fontWeight={"semibold"}>
-            {props.originalValue}
-          </Text>
-          <Text fontSize={"xs"} color={"gray.500"}>
-            {!props.isDifferent && " (unchanged)"}
-          </Text>
+          <Tooltip disabled={props.originalValue.length < 24} content={props.originalValue} showArrow>
+            <Text fontSize={"xs"} fontWeight={"semibold"}>
+              {_.truncate(props.originalValue, { length: 24 })}
+            </Text>
+          </Tooltip>
+
+          <Spacer />
+
+          {!props.isDifferent && <Icon name={"check"} color={"green.600"} size={"xs"} />}
         </Flex>
       </Flex>
     </Flex>
@@ -316,13 +328,6 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
   const nameIsDifferent = props.modifiedAttribute.name !== templateAttribute?.name;
   const descriptionIsDifferent = props.modifiedAttribute.description !== templateAttribute?.description;
 
-  const hasChanges =
-    modifiedValues.length > 0 ||
-    templateOnlyValues.length > 0 ||
-    entityOnlyValues.length > 0 ||
-    !!nameIsDifferent ||
-    !!descriptionIsDifferent;
-
   const hasSelection =
     useTemplateName ||
     useTemplateDescription ||
@@ -435,18 +440,6 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                 </Flex>
               ) : (
                 <Flex direction={"column"} gap={"2"}>
-                  {/* Notification if there are not changes to the Template */}
-                  {!hasChanges && templateAttribute && (
-                    <Flex w={"100%"} align={"center"} justify={"center"} minH={"120px"}>
-                      <Flex direction={"row"} gap={"2"} align={"center"}>
-                        <Icon size={"xs"} name={"check"} color={"green.500"} />
-                        <Text fontWeight={"semibold"} fontSize={"xs"} color={"green.700"}>
-                          {props.modifiedAttribute.name} matches Template {templateAttribute.name}
-                        </Text>
-                      </Flex>
-                    </Flex>
-                  )}
-
                   <Flex direction={"row"} gap={"2"} align={"stretch"}>
                     {/* Template Name */}
                     <CompareAttributeFieldDiff
@@ -493,20 +486,21 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                         gap={"2"}
                       >
                         <Flex direction={"row"} gap={"1"} justify={"space-between"}>
+                          <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.entity.color.icon}>
+                            Current Entity
+                          </Text>
                           <Text fontSize={"xs"} fontWeight={"semibold"}>
                             {props.entityName}: {props.modifiedAttribute.name}
                           </Text>
-                          <Text fontSize={"xs"} fontWeight={"semibold"} color={"purple.500"}>
-                            Modified
-                          </Text>
                         </Flex>
 
                         <CompareAttributeDialogCollapsible
                           sectionKey={"unmodified"}
                           icon={"check"}
-                          color={"blue"}
+                          color={unchangedValues.length === 0 ? "gray" : "green"}
                           label={"Unmodified"}
                           count={unchangedValues.length}
+                          disabled={unchangedValues.length === 0}
                         >
                           {unchangedValues.length === 0 && (
                             <Text fontSize={"xs"} color={"gray.500"}>
@@ -514,21 +508,43 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                             </Text>
                           )}
                           {unchangedValues.map(({ entity }) => (
-                            <Text key={entity._id} fontSize={"xs"} color={"blue.800"} fontWeight={"semibold"}>
-                              {entity.name}
-                            </Text>
+                            <Flex
+                              key={entity._id}
+                              direction={"row"}
+                              gap={"1"}
+                              align={"center"}
+                              bg={"white"}
+                              p={"1"}
+                              rounded={"sm"}
+                              justify={"space-between"}
+                            >
+                              <Flex direction={"row"} gap={"1"} align={"center"}>
+                                <Text fontSize={"xs"} color={"gray.500"}>
+                                  Value:
+                                </Text>
+                                <Icon
+                                  name={getValueTypeIconProps(entity.type).name}
+                                  color={getValueTypeIconProps(entity.type).color}
+                                  size={"xs"}
+                                />
+                                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                  {entity.name}
+                                </Text>
+                              </Flex>
+                            </Flex>
                           ))}
                         </CompareAttributeDialogCollapsible>
 
                         <CompareAttributeDialogCollapsible
                           sectionKey={"modified"}
                           icon={"edit"}
-                          color={"orange"}
+                          color={modifiedValues.length === 0 ? "gray" : "orange"}
                           label={"Modified"}
                           count={modifiedValues.length}
+                          disabled={modifiedValues.length === 0}
                         >
                           {modifiedValues.length === 0 && (
-                            <Text fontSize={"xs"} color={"gray.500"}>
+                            <Text fontSize={"xs"} color={"gray.500"} ml={"0.5"}>
                               No Modified Values
                             </Text>
                           )}
@@ -545,25 +561,41 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                             >
                               <Flex direction={"row"} gap={"1"} align={"center"}>
                                 <Text fontSize={"xs"} color={"gray.500"}>
-                                  Modified:
+                                  Value:
                                 </Text>
+                                <Icon
+                                  name={getValueTypeIconProps(entity.type).name}
+                                  color={getValueTypeIconProps(entity.type).color}
+                                  size={"xs"}
+                                />
                                 <Text fontSize={"xs"} fontWeight={"semibold"}>
                                   {entity.name}
                                 </Text>
                               </Flex>
+                              <Flex direction={"row"} gap={"1"} align={"center"}>
+                                <Text fontSize={"xs"} color={"gray.500"}>
+                                  Data:
+                                </Text>
+                                <Tooltip disabled={entity.data.length < 24} content={entity.data} showArrow>
+                                  <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                    {_.truncate(entity.data, { length: 24 })}
+                                  </Text>
+                                </Tooltip>
+                              </Flex>
                             </Flex>
                           ))}
                         </CompareAttributeDialogCollapsible>
 
                         <CompareAttributeDialogCollapsible
                           sectionKey={"add-remove"}
-                          icon={"add"}
-                          color={"green"}
-                          label={"Add or Remove"}
+                          icon={"remove"}
+                          color={entityOnlyValues.length === 0 ? "gray" : "purple"}
+                          label={"Added or Removed"}
                           count={entityOnlyValues.length}
+                          disabled={entityOnlyValues.length === 0}
                         >
                           {entityOnlyValues.length === 0 && templateOnlyValues.length === 0 && (
-                            <Text fontSize={"xs"} color={"gray.400"}>
+                            <Text fontSize={"xs"} color={"gray.500"} ml={"0.5"}>
                               No Values to Add or Remove
                             </Text>
                           )}
@@ -575,9 +607,9 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                               borderBottom={"1px"}
                               borderColor={"purple.200"}
                               pb={"0.5"}
+                              ml={"0.5"}
                             >
-                              Added to {props.modifiedAttribute.name}
-                              {props.entityName ? ` (${props.entityName})` : ""}
+                              Added to Current Entity
                             </Text>
                           )}
                           {entityOnlyValues.map((value) => (
@@ -593,8 +625,13 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                             >
                               <Flex direction={"row"} gap={"1"} align={"center"}>
                                 <Text fontSize={"xs"} color={"gray.500"}>
-                                  Added:
+                                  Value:
                                 </Text>
+                                <Icon
+                                  name={getValueTypeIconProps(value.type).name}
+                                  color={getValueTypeIconProps(value.type).color}
+                                  size={"xs"}
+                                />
                                 <Text fontSize={"xs"} fontWeight={"semibold"}>
                                   {value.name}
                                 </Text>
@@ -607,11 +644,7 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                               >
                                 <Checkbox.HiddenInput />
                                 <Checkbox.Control />
-                                <Checkbox.Label fontSize={"xs"}>
-                                  <Text fontSize={"xs"} color={"red.500"} fontWeight={"semibold"}>
-                                    Remove
-                                  </Text>
-                                </Checkbox.Label>
+                                <Checkbox.Label fontSize={"xs"}>Remove</Checkbox.Label>
                               </Checkbox.Root>
                             </Flex>
                           ))}
@@ -631,20 +664,21 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                         gap={"2"}
                       >
                         <Flex direction={"row"} gap={"1"} justify={"space-between"}>
-                          <Text fontSize={"xs"} fontWeight={"semibold"}>
-                            {templateAttribute.name}
-                          </Text>
                           <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.template.color.icon}>
                             Template
                           </Text>
+                          <Text fontSize={"xs"} fontWeight={"semibold"}>
+                            {templateAttribute.name}
+                          </Text>
                         </Flex>
 
                         <CompareAttributeDialogCollapsible
                           sectionKey={"unmodified"}
                           icon={"check"}
-                          color={"blue"}
+                          color={unchangedValues.length === 0 ? "gray" : "green"}
                           label={"Unmodified"}
                           count={unchangedValues.length}
+                          disabled={unchangedValues.length === 0}
                         >
                           {unchangedValues.length === 0 && (
                             <Text fontSize={"xs"} color={"gray.500"}>
@@ -652,29 +686,50 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                             </Text>
                           )}
                           {unchangedValues.map(({ template }) => (
-                            <Text key={template._id} fontSize={"xs"} color={"blue.800"} fontWeight={"semibold"}>
-                              {template.name}
-                            </Text>
+                            <Flex
+                              key={template._id}
+                              direction={"row"}
+                              gap={"1"}
+                              align={"center"}
+                              bg={"white"}
+                              p={"1"}
+                              rounded={"sm"}
+                              justify={"space-between"}
+                            >
+                              <Flex direction={"row"} gap={"1"} align={"center"}>
+                                <Text fontSize={"xs"} color={"gray.500"}>
+                                  Value:
+                                </Text>
+                                <Icon
+                                  name={getValueTypeIconProps(template.type).name}
+                                  color={getValueTypeIconProps(template.type).color}
+                                  size={"xs"}
+                                />
+                                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                  {template.name}
+                                </Text>
+                              </Flex>
+                            </Flex>
                           ))}
                         </CompareAttributeDialogCollapsible>
 
                         <CompareAttributeDialogCollapsible
                           sectionKey={"modified"}
                           icon={"edit"}
-                          color={"orange"}
+                          color={modifiedValues.length === 0 ? "gray" : "orange"}
                           label={"Modified"}
                           count={modifiedValues.length}
+                          disabled={modifiedValues.length === 0}
                         >
                           {modifiedValues.length === 0 && (
-                            <Text fontSize={"xs"} color={"gray.500"}>
+                            <Text fontSize={"xs"} color={"gray.500"} ml={"0.5"}>
                               No Modified Values
                             </Text>
                           )}
                           {modifiedValues.map(({ template }) => (
                             <Flex
                               key={template._id}
-                              direction={"row"}
-                              justify={"space-between"}
+                              direction={"column"}
                               gap={"0.5"}
                               bg={"white"}
                               p={"1.5"}
@@ -682,24 +737,41 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                               borderLeft={"3px"}
                               borderLeftColor={"orange.400"}
                             >
+                              <Flex direction={"row"} justify={"space-between"} gap={"0.5"}>
+                                <Flex direction={"row"} gap={"1"} align={"center"}>
+                                  <Text fontSize={"xs"} color={"gray.500"}>
+                                    Value:
+                                  </Text>
+                                  <Icon
+                                    name={getValueTypeIconProps(template.type).name}
+                                    color={getValueTypeIconProps(template.type).color}
+                                    size={"xs"}
+                                  />
+                                  <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                    {template.name}
+                                  </Text>
+                                </Flex>
+                                <Checkbox.Root
+                                  size={"xs"}
+                                  colorPalette={"blue"}
+                                  checked={adoptModifiedValueIds.has(template._id)}
+                                  onCheckedChange={() => toggleSet(setAdoptModifiedValueIds, template._id)}
+                                >
+                                  <Checkbox.HiddenInput />
+                                  <Checkbox.Control />
+                                  <Checkbox.Label fontSize={"xs"}>Reset to Template</Checkbox.Label>
+                                </Checkbox.Root>
+                              </Flex>
                               <Flex direction={"row"} gap={"1"} align={"center"}>
                                 <Text fontSize={"xs"} color={"gray.500"}>
-                                  Template:
-                                </Text>
-                                <Text fontSize={"xs"} fontWeight={"semibold"}>
-                                  {template.name}
+                                  Data:
                                 </Text>
+                                <Tooltip disabled={template.data.length < 24} content={template.data} showArrow>
+                                  <Text fontSize={"xs"} fontWeight={"semibold"}>
+                                    {_.truncate(template.data, { length: 24 })}
+                                  </Text>
+                                </Tooltip>
                               </Flex>
-                              <Checkbox.Root
-                                size={"xs"}
-                                colorPalette={"blue"}
-                                checked={adoptModifiedValueIds.has(template._id)}
-                                onCheckedChange={() => toggleSet(setAdoptModifiedValueIds, template._id)}
-                              >
-                                <Checkbox.HiddenInput />
-                                <Checkbox.Control />
-                                <Checkbox.Label fontSize={"xs"}>Use Template</Checkbox.Label>
-                              </Checkbox.Root>
                             </Flex>
                           ))}
                         </CompareAttributeDialogCollapsible>
@@ -707,12 +779,13 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                         <CompareAttributeDialogCollapsible
                           sectionKey={"add-remove"}
                           icon={"add"}
-                          color={"green"}
-                          label={"Add or Remove"}
+                          color={templateOnlyValues.length === 0 ? "gray" : "teal"}
+                          label={"Added or Removed"}
                           count={templateOnlyValues.length}
+                          disabled={templateOnlyValues.length === 0}
                         >
                           {entityOnlyValues.length === 0 && templateOnlyValues.length === 0 && (
-                            <Text fontSize={"xs"} color={"gray.400"}>
+                            <Text fontSize={"xs"} color={"gray.500"} ml={"0.5"}>
                               No Values to Add or Remove
                             </Text>
                           )}
@@ -724,8 +797,9 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                               borderBottom={"1px"}
                               borderColor={"teal.200"}
                               pb={"0.5"}
+                              ml={"0.5"}
                             >
-                              Available in Template ({templateAttribute.name})
+                              Available in Template
                             </Text>
                           )}
                           {templateOnlyValues.map((value) => (
@@ -741,8 +815,13 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                             >
                               <Flex direction={"row"} gap={"1"} align={"center"}>
                                 <Text fontSize={"xs"} color={"gray.500"}>
-                                  Template:
+                                  Value:
                                 </Text>
+                                <Icon
+                                  name={getValueTypeIconProps(value.type).name}
+                                  color={getValueTypeIconProps(value.type).color}
+                                  size={"xs"}
+                                />
                                 <Text fontSize={"xs"} fontWeight={"semibold"}>
                                   {value.name}
                                 </Text>
@@ -755,11 +834,7 @@ const CompareAttributeDialog = (props: CompareAttributeDialogProps) => {
                               >
                                 <Checkbox.HiddenInput />
                                 <Checkbox.Control />
-                                <Checkbox.Label fontSize={"xs"}>
-                                  <Text fontSize={"xs"} color={"green.600"} fontWeight={"semibold"}>
-                                    Add
-                                  </Text>
-                                </Checkbox.Label>
+                                <Checkbox.Label fontSize={"xs"}>Add</Checkbox.Label>
                               </Checkbox.Root>
                             </Flex>
                           ))}
diff --git a/client/src/lib/util.ts b/client/src/lib/util.ts
index d0dc97b4..f3a27691 100644
--- a/client/src/lib/util.ts
+++ b/client/src/lib/util.ts
@@ -11,7 +11,6 @@ import {
   IconNames,
   SearchAttributeValue,
   SearchQuery,
-  UserModel,
   UserWorkspacePermissions,
 } from "@types";
 
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 613139d1..3eeb974f 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -7,6 +7,7 @@ import { Content } from "@components/Container";
 import DataTable from "@components/DataTable";
 import Icon from "@components/Icon";
 import ActorTag from "@components/ActorTag";
+import Linky from "@components/Linky";
 import WalkthroughBeacon from "@components/WalkthroughBeacon";
 import WalkthroughTooltip from "@components/WalkthroughTooltip";
 import Tooltip from "@components/Tooltip";
@@ -70,6 +71,7 @@ const GET_DASHBOARD = gql`
   ) {
     projects(limit: $projectLimit, archived: $projectsArchived) {
       _id
+      owner
       name
       description
       created
@@ -83,11 +85,13 @@ const GET_DASHBOARD = gql`
       entities {
         _id
         archived
+        owner
         name
         description
         timestamp
         attributes {
           _id
+          name
         }
       }
       total
@@ -248,9 +252,12 @@ const Dashboard = () => {
       cell: (info) => (
         <Flex align={"center"} justify={"space-between"} gap={"1"} w={"100%"}>
           <Tooltip content={info.getValue()} disabled={info.getValue().length < 48} showArrow>
-            <Text fontSize={"xs"} fontWeight={"semibold"}>
-              {_.truncate(info.getValue(), { length: 48 })}
-            </Text>
+            <Flex gap={"1"} align={"center"}>
+              <Icon name={"entity"} color={GLOBAL_STYLES.entity.color.icon} size={"xs"} />
+              <Text fontSize={"xs"} fontWeight={"semibold"}>
+                {_.truncate(info.getValue(), { length: 48 })}
+              </Text>
+            </Flex>
           </Tooltip>
           <Button
             size="2xs"
@@ -267,7 +274,31 @@ const Dashboard = () => {
       ),
       header: "Name",
       meta: {
-        minWidth: 400,
+        minWidth: 300,
+      },
+    }),
+    entityTableColumnHelper.accessor("owner", {
+      cell: (info) => {
+        return <ActorTag identifier={info.getValue()} fallback={"Unknown User"} size={"sm"} inline />;
+      },
+      header: "Owner",
+      enableHiding: true,
+    }),
+    entityTableColumnHelper.accessor("timestamp", {
+      cell: (info) => {
+        return (
+          <Tooltip content={dayjs(info.getValue()).format("[Created:] DD MMMM YYYY, HH:MM A")} showArrow>
+            <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
+              {dayjs(info.getValue()).fromNow()}
+            </Text>
+          </Tooltip>
+        );
+      },
+      header: "Created",
+      enableHiding: true,
+      meta: {
+        minWidth: 120,
+        maxWidth: 120,
       },
     }),
     entityTableColumnHelper.accessor("description", {
@@ -275,7 +306,7 @@ const Dashboard = () => {
         if (_.isEqual(info.getValue(), "") || _.isNull(info.getValue())) {
           return (
             <Tag.Root colorPalette={"orange"}>
-              <Tag.Label fontSize={"xs"}>Empty</Tag.Label>
+              <Tag.Label fontSize={"xs"}>No Description</Tag.Label>
             </Tag.Root>
           );
         }
@@ -290,37 +321,59 @@ const Dashboard = () => {
       header: "Description",
       enableHiding: true,
       meta: {
-        minWidth: 400,
-      },
-    }),
-    entityTableColumnHelper.accessor("timestamp", {
-      cell: (info) => {
-        return (
-          <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
-            {dayjs(info.getValue()).fromNow()}
-          </Text>
-        );
+        minWidth: 300,
       },
-      header: "Created",
-      enableHiding: true,
     }),
     entityTableColumnHelper.accessor("attributes", {
       cell: (info) => {
-        if (_.isEqual(info.getValue().length, 0)) {
+        const attributes = info.row.original.attributes;
+
+        // 0 Attributes
+        if (attributes.length === 0) {
           return (
-            <Tag.Root colorPalette={"orange"} size={"sm"}>
-              <Tag.Label fontSize={"xs"}>None</Tag.Label>
+            <Tag.Root colorPalette={"orange"}>
+              <Tag.Label fontSize={"xs"}>No Attributes</Tag.Label>
             </Tag.Root>
           );
         }
-        return (
-          <Tag.Root colorPalette={"green"} size={"sm"}>
-            <Tag.Label fontSize={"xs"}>{info.getValue().length}</Tag.Label>
-          </Tag.Root>
-        );
+
+        // Multiple Attributes
+        if (attributes.length > 1) {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {attributes.slice(0, 1).map((attribute) => (
+                <Tag.Root colorPalette={"teal"}>
+                  <Tag.StartElement>
+                    <Icon name={"attribute"} color={GLOBAL_STYLES.template.color.icon} size={"xs"} />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{attribute.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+              <Text fontSize={"xs"}>
+                and {attributes.length - 1} other{attributes.length - 1 !== 1 ? "s" : ""}
+              </Text>
+            </Flex>
+          );
+        } else {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {attributes.map((attribute) => (
+                <Tag.Root colorPalette={"teal"}>
+                  <Tag.StartElement>
+                    <Icon name={"attribute"} color={GLOBAL_STYLES.template.color.icon} size={"xs"} />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{attribute.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+            </Flex>
+          );
+        }
       },
       header: "Attributes",
       enableHiding: true,
+      meta: {
+        minWidth: 300,
+      },
     }),
   ];
 
@@ -333,9 +386,12 @@ const Dashboard = () => {
         return (
           <Flex align={"center"} justify={"space-between"} gap={"1"} w={"100%"}>
             <Tooltip content={info.getValue()} disabled={info.getValue().length < 48} showArrow>
-              <Text fontSize={"xs"} fontWeight={"semibold"}>
-                {_.truncate(info.getValue(), { length: 48 })}
-              </Text>
+              <Flex gap={"1"} align={"center"}>
+                <Icon name={"project"} color={GLOBAL_STYLES.project.color.icon} size={"xs"} />
+                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                  {_.truncate(info.getValue(), { length: 48 })}
+                </Text>
+              </Flex>
             </Tooltip>
             <Button
               size="2xs"
@@ -353,7 +409,31 @@ const Dashboard = () => {
       },
       header: "Name",
       meta: {
-        minWidth: 400,
+        minWidth: 300,
+      },
+    }),
+    projectTableColumnHelper.accessor("owner", {
+      cell: (info) => {
+        return <ActorTag identifier={info.getValue()} fallback={"Unknown User"} size={"sm"} inline />;
+      },
+      header: "Owner",
+      enableHiding: true,
+    }),
+    projectTableColumnHelper.accessor("created", {
+      cell: (info) => {
+        return (
+          <Tooltip content={dayjs(info.getValue()).format("[Created:] DD MMMM YYYY, HH:MM A")} showArrow>
+            <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
+              {dayjs(info.getValue()).fromNow()}
+            </Text>
+          </Tooltip>
+        );
+      },
+      header: "Created",
+      enableHiding: true,
+      meta: {
+        minWidth: 120,
+        maxWidth: 120,
       },
     }),
     projectTableColumnHelper.accessor("description", {
@@ -361,7 +441,7 @@ const Dashboard = () => {
         if (_.isEqual(info.getValue(), "") || _.isNull(info.getValue())) {
           return (
             <Tag.Root colorPalette={"orange"}>
-              <Tag.Label fontSize={"xs"}>Empty</Tag.Label>
+              <Tag.Label fontSize={"xs"}>No Description</Tag.Label>
             </Tag.Root>
           );
         }
@@ -376,37 +456,49 @@ const Dashboard = () => {
       header: "Description",
       enableHiding: true,
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
-    projectTableColumnHelper.accessor("created", {
-      cell: (info) => {
-        return (
-          <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
-            {dayjs(info.getValue()).fromNow()}
-          </Text>
-        );
-      },
-      header: "Created",
-      enableHiding: true,
-    }),
     projectTableColumnHelper.accessor("entities", {
       cell: (info) => {
-        if (_.isEqual(info.getValue().length, 0)) {
+        const entities = info.row.original.entities;
+
+        // 0 Entities
+        if (entities.length === 0) {
           return (
             <Tag.Root colorPalette={"orange"}>
-              <Tag.Label>None</Tag.Label>
+              <Tag.Label fontSize={"xs"}>No Entities</Tag.Label>
             </Tag.Root>
           );
         }
-        return (
-          <Tag.Root colorPalette={"green"}>
-            <Tag.Label>{info.getValue().length}</Tag.Label>
-          </Tag.Root>
-        );
+
+        // Multiple Entities
+        if (entities.length > 1) {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {entities.slice(0, 1).map((entity) => (
+                <Linky type={"entities"} id={entity} />
+              ))}
+              <Text fontSize={"xs"}>
+                and {entities.length - 1} other{entities.length - 1 !== 1 ? "s" : ""}
+              </Text>
+            </Flex>
+          );
+        } else {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {entities.map((entity) => (
+                <Linky type={"entities"} id={entity} />
+              ))}
+            </Flex>
+          );
+        }
       },
       header: "Entities",
       enableHiding: true,
+      meta: {
+        minWidth: 300,
+      },
     }),
   ];
 
diff --git a/client/src/pages/view/Entities.tsx b/client/src/pages/view/Entities.tsx
index 691be14b..26299f77 100644
--- a/client/src/pages/view/Entities.tsx
+++ b/client/src/pages/view/Entities.tsx
@@ -224,9 +224,12 @@ const Entities = () => {
         return (
           <Flex align={"center"} justify={"space-between"} gap={"1"} w={"100%"}>
             <Tooltip content={info.getValue()} disabled={info.getValue().length < 48} showArrow>
-              <Text fontSize={"xs"} fontWeight={"semibold"}>
-                {_.truncate(info.getValue(), { length: 48 })}
-              </Text>
+              <Flex gap={"1"} align={"center"}>
+                <Icon name={"entity"} color={GLOBAL_STYLES.entity.color.icon} size={"xs"} />
+                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                  {_.truncate(info.getValue(), { length: 48 })}
+                </Text>
+              </Flex>
             </Tooltip>
             <Button
               size="2xs"
@@ -244,7 +247,7 @@ const Entities = () => {
       },
       header: "Name",
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("description", {
@@ -252,7 +255,7 @@ const Entities = () => {
         if (_.isEqual(info.getValue(), "") || _.isNull(info.getValue())) {
           return (
             <Tag.Root colorPalette={"orange"}>
-              <Tag.Label fontSize={"xs"}>Empty</Tag.Label>
+              <Tag.Label fontSize={"xs"}>No Description</Tag.Label>
             </Tag.Root>
           );
         }
@@ -267,40 +270,82 @@ const Entities = () => {
       header: "Description",
       enableHiding: true,
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("attributes", {
-      cell: (info) => (
-        <Tag.Root colorPalette={info.getValue().length > 0 ? "green" : "orange"} size={"sm"}>
-          <Tag.Label fontSize={"xs"}>{info.getValue().length > 0 ? info.getValue().length : "None"}</Tag.Label>
-        </Tag.Root>
-      ),
+      cell: (info) => {
+        const attributes = info.row.original.attributes;
+
+        // 0 Attributes
+        if (attributes.length === 0) {
+          return (
+            <Tag.Root colorPalette={"orange"}>
+              <Tag.Label fontSize={"xs"}>No Attributes</Tag.Label>
+            </Tag.Root>
+          );
+        }
+
+        // Multiple Attributes
+        if (attributes.length > 1) {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {attributes.slice(0, 1).map((attribute) => (
+                <Tag.Root colorPalette={"teal"}>
+                  <Tag.StartElement>
+                    <Icon name={"attribute"} color={GLOBAL_STYLES.template.color.icon} size={"xs"} />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{attribute.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+              <Text fontSize={"xs"}>
+                and {attributes.length - 1} other{attributes.length - 1 !== 1 ? "s" : ""}
+              </Text>
+            </Flex>
+          );
+        } else {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {attributes.map((attribute) => (
+                <Tag.Root colorPalette={"teal"}>
+                  <Tag.StartElement>
+                    <Icon name={"attribute"} color={GLOBAL_STYLES.template.color.icon} size={"xs"} />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{attribute.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+            </Flex>
+          );
+        }
+      },
       header: "Attributes",
       enableHiding: true,
       meta: {
-        minWidth: 120,
-        maxWidth: 120,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("attachments", {
       cell: (info) => (
         <Tag.Root colorPalette={info.getValue().length > 0 ? "purple" : "orange"} size={"sm"}>
-          <Tag.Label fontSize={"xs"}>{info.getValue().length > 0 ? info.getValue().length : "None"}</Tag.Label>
+          <Tag.Label fontSize={"xs"}>
+            {info.getValue().length > 0 ? info.getValue().length : "No Attachments"}
+          </Tag.Label>
         </Tag.Root>
       ),
       header: "Attachments",
       enableHiding: true,
       meta: {
-        minWidth: 120,
-        maxWidth: 120,
+        minWidth: 180,
+        maxWidth: 180,
       },
     }),
     columnHelper.accessor("created", {
       cell: (info) => (
-        <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
-          {dayjs(info.getValue()).fromNow()}
-        </Text>
+        <Tooltip content={dayjs(info.getValue()).format("[Created:] DD MMMM YYYY, HH:MM A")} showArrow>
+          <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
+            {dayjs(info.getValue()).fromNow()}
+          </Text>
+        </Tooltip>
       ),
       header: "Created",
       enableHiding: true,
diff --git a/client/src/pages/view/Entity.tsx b/client/src/pages/view/Entity.tsx
index 2a8d7c38..69ce59ed 100644
--- a/client/src/pages/view/Entity.tsx
+++ b/client/src/pages/view/Entity.tsx
@@ -65,7 +65,7 @@ import {
 
 // Utility functions and libraries
 import { requestStatic } from "@database/functions";
-import { ignoreAbort, removeTypename } from "@lib/util";
+import { getValueTypeIconProps, ignoreAbort, removeTypename } from "@lib/util";
 import _ from "lodash";
 import dayjs from "dayjs";
 import FileSaver from "file-saver";
@@ -763,9 +763,9 @@ const Entity = () => {
         const [viewAttributeDialogOpen, setViewAttributeDialogOpen] = useState(false);
         return (
           <Flex align={"center"} justify={"space-between"} gap={"1"} w={"100%"}>
-            <Tooltip content={info.getValue()} disabled={info.getValue().length < 16} showArrow>
+            <Tooltip content={info.getValue()} disabled={info.getValue().length < 12} showArrow>
               <Text fontSize={"xs"} fontWeight={"semibold"}>
-                {_.truncate(info.getValue(), { length: 16 })}
+                {_.truncate(info.getValue(), { length: 12 })}
               </Text>
             </Tooltip>
             <Flex direction={"row"} gap={"1"} align={"center"}>
@@ -836,20 +836,55 @@ const Entity = () => {
     attributeTableColumnHelper.accessor("values", {
       cell: (info) => {
         const values = info.row.original.values;
+
+        // 0 Values
         if (values.length === 0) {
           return (
-            <Text fontSize={"xs"} color={"gray.500"}>
-              No values
-            </Text>
+            <Tag.Root colorPalette={"orange"}>
+              <Tag.Label fontSize={"xs"}>No Values</Tag.Label>
+            </Tag.Root>
+          );
+        }
+
+        // Multiple Values
+        if (values.length > 2) {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {values.slice(0, 2).map((value) => (
+                <Tag.Root colorPalette={getValueTypeIconProps(value.type).color.split(".")[0]}>
+                  <Tag.StartElement>
+                    <Icon
+                      name={getValueTypeIconProps(value.type).name}
+                      color={getValueTypeIconProps(value.type).color}
+                      size={"xs"}
+                    />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{value.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+              <Text fontSize={"xs"}>
+                and {values.length - 2} other{values.length - 2 !== 1 ? "s" : ""}
+              </Text>
+            </Flex>
+          );
+        } else {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {values.map((value) => (
+                <Tag.Root colorPalette={getValueTypeIconProps(value.type).color.split(".")[0]}>
+                  <Tag.StartElement>
+                    <Icon
+                      name={getValueTypeIconProps(value.type).name}
+                      color={getValueTypeIconProps(value.type).color}
+                      size={"xs"}
+                    />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{value.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+            </Flex>
           );
         }
-        const valueNames = values.map((value) => value.name).join(", ");
-        const truncatedNames = valueNames.length > 50 ? `${valueNames.substring(0, 50)}...` : valueNames;
-        return (
-          <Tooltip content={valueNames} showArrow disabled={valueNames.length <= 50}>
-            <Text fontSize={"xs"}>{truncatedNames}</Text>
-          </Tooltip>
-        );
       },
       header: "Values",
     }),
@@ -1307,6 +1342,60 @@ const Entity = () => {
 
           {/* Buttons */}
           <Flex direction={"row"} gap={"2"} wrap={"wrap"} align={"center"}>
+            {editing && (
+              <Button
+                id={"addProjectsDialogButton"}
+                variant={"solid"}
+                size={"xs"}
+                rounded={"md"}
+                colorPalette={"red"}
+                onClick={handleCancelClick}
+              >
+                Cancel
+                <Icon name={"cross"} size={"xs"} />
+              </Button>
+            )}
+            {entityArchived ? (
+              <Tooltip
+                content={"Insufficient permissions in this Workspace"}
+                disabled={workspacePermissions.entities.archive}
+                showArrow
+              >
+                <Button
+                  id={"restoreEntityButton"}
+                  variant={"solid"}
+                  size={"xs"}
+                  rounded={"md"}
+                  colorPalette={"orange"}
+                  onClick={handleRestoreFromArchiveClick}
+                  disabled={!workspacePermissions.entities.archive}
+                >
+                  Restore
+                  <Icon name={"rewind"} size={"xs"} />
+                </Button>
+              </Tooltip>
+            ) : (
+              <Tooltip
+                content={"Insufficient permissions in this Workspace"}
+                disabled={workspacePermissions.entities.edit}
+                showArrow
+              >
+                <Button
+                  id={"editEntityButton"}
+                  variant={"solid"}
+                  size={"xs"}
+                  rounded={"md"}
+                  colorPalette={editing ? "green" : "blue"}
+                  onClick={handleEditClick}
+                  loading={isUpdating}
+                  disabled={!!previewVersion || !workspacePermissions.entities.edit}
+                >
+                  {editing ? "Save" : "Edit"}
+                  <Icon name={editing ? "save" : "edit"} size={"xs"} />
+                </Button>
+              </Tooltip>
+            )}
+
             {/* Actions Menu */}
             <Menu.Root size={"sm"}>
               <Menu.Trigger asChild>
@@ -1380,60 +1469,6 @@ const Entity = () => {
               </Portal>
             </Menu.Root>
 
-            {editing && (
-              <Button
-                id={"addProjectsDialogButton"}
-                variant={"solid"}
-                size={"xs"}
-                rounded={"md"}
-                colorPalette={"red"}
-                onClick={handleCancelClick}
-              >
-                Cancel
-                <Icon name={"cross"} size={"xs"} />
-              </Button>
-            )}
-            {entityArchived ? (
-              <Tooltip
-                content={"Insufficient permissions in this Workspace"}
-                disabled={workspacePermissions.entities.archive}
-                showArrow
-              >
-                <Button
-                  id={"restoreEntityButton"}
-                  variant={"solid"}
-                  size={"xs"}
-                  rounded={"md"}
-                  colorPalette={"orange"}
-                  onClick={handleRestoreFromArchiveClick}
-                  disabled={!workspacePermissions.entities.archive}
-                >
-                  Restore
-                  <Icon name={"rewind"} size={"xs"} />
-                </Button>
-              </Tooltip>
-            ) : (
-              <Tooltip
-                content={"Insufficient permissions in this Workspace"}
-                disabled={workspacePermissions.entities.edit}
-                showArrow
-              >
-                <Button
-                  id={"editEntityButton"}
-                  variant={"solid"}
-                  size={"xs"}
-                  rounded={"md"}
-                  colorPalette={editing ? "green" : "blue"}
-                  onClick={handleEditClick}
-                  loading={isUpdating}
-                  disabled={!!previewVersion || !workspacePermissions.entities.edit}
-                >
-                  {editing ? "Save" : "Edit"}
-                  <Icon name={editing ? "save" : "edit"} size={"xs"} />
-                </Button>
-              </Tooltip>
-            )}
-
             {/* Version history */}
             <Drawer.Root
               open={historyOpen}
diff --git a/client/src/pages/view/Project.tsx b/client/src/pages/view/Project.tsx
index 96c05ebc..c5dd3fe7 100644
--- a/client/src/pages/view/Project.tsx
+++ b/client/src/pages/view/Project.tsx
@@ -247,6 +247,7 @@ const Project = () => {
         description
         attributes {
           _id
+          name
         }
       }
       workspace(_id: $workspace) {
@@ -665,7 +666,7 @@ const Project = () => {
         if (_.isEqual(description, "")) {
           return (
             <Tag.Root colorPalette={"orange"}>
-              <Tag.Label fontSize={"xs"}>Empty</Tag.Label>
+              <Tag.Label fontSize={"xs"}>No Description</Tag.Label>
             </Tag.Root>
           );
         }
@@ -688,17 +689,52 @@ const Project = () => {
         const attributes = info.getValue();
         if (_.isUndefined(attributes)) {
           return <SkeletonText noOfLines={1} />;
+        } else {
+          // 0 Attributes
+          if (attributes.length === 0) {
+            return (
+              <Tag.Root colorPalette={"orange"}>
+                <Tag.Label fontSize={"xs"}>No Attributes</Tag.Label>
+              </Tag.Root>
+            );
+          }
+
+          // Multiple Attributes
+          if (attributes.length > 2) {
+            return (
+              <Flex direction={"row"} gap={"1"} align={"center"}>
+                {attributes.slice(0, 2).map((attribute) => (
+                  <Tag.Root colorPalette={"teal"}>
+                    <Tag.StartElement>
+                      <Icon name={"attribute"} color={GLOBAL_STYLES.template.color.icon} size={"xs"} />
+                    </Tag.StartElement>
+                    <Tag.Label fontSize={"xs"}>{attribute.name}</Tag.Label>
+                  </Tag.Root>
+                ))}
+                <Text fontSize={"xs"}>
+                  and {attributes.length - 2} other{attributes.length - 2 !== 1 ? "s" : ""}
+                </Text>
+              </Flex>
+            );
+          } else {
+            return (
+              <Flex direction={"row"} gap={"1"} align={"center"}>
+                {attributes.map((attribute) => (
+                  <Tag.Root colorPalette={"teal"}>
+                    <Tag.StartElement>
+                      <Icon name={"attribute"} color={GLOBAL_STYLES.template.color.icon} size={"xs"} />
+                    </Tag.StartElement>
+                    <Tag.Label fontSize={"xs"}>{attribute.name}</Tag.Label>
+                  </Tag.Root>
+                ))}
+              </Flex>
+            );
+          }
         }
-        return (
-          <Tag.Root colorPalette={attributes.length > 0 ? "green" : "orange"} size={"sm"}>
-            <Tag.Label fontSize={"xs"}>{attributes.length > 0 ? attributes.length : "None"}</Tag.Label>
-          </Tag.Root>
-        );
       },
       header: "Attributes",
       meta: {
         minWidth: 120,
-        maxWidth: 120,
       },
     }),
   ];
@@ -847,6 +883,53 @@ const Project = () => {
 
           {/* Buttons */}
           <Flex direction={"row"} gap={"2"} wrap={"wrap"}>
+            {displayProjectArchived ? (
+              <Tooltip
+                content={"Insufficient permissions in this Workspace"}
+                disabled={workspacePermissions.projects.archive}
+                showArrow
+              >
+                <Button
+                  onClick={handleRestoreClick}
+                  size={"xs"}
+                  rounded={"md"}
+                  colorPalette={"orange"}
+                  disabled={!workspacePermissions.projects.archive}
+                >
+                  Restore
+                  <Icon name={"rewind"} size={"xs"} />
+                </Button>
+              </Tooltip>
+            ) : (
+              <Flex gap={"1"}>
+                {editing && (
+                  <Button onClick={handleCancelClick} size={"xs"} rounded={"md"} colorPalette={"red"}>
+                    Cancel
+                    <Icon name={"cross"} size={"xs"} />
+                  </Button>
+                )}
+                <Tooltip
+                  content={"Insufficient permissions in this Workspace"}
+                  disabled={workspacePermissions.projects.edit}
+                  showArrow
+                >
+                  <Button
+                    id={"editProjectButton"}
+                    colorPalette={editing ? "green" : "blue"}
+                    size={"xs"}
+                    rounded={"md"}
+                    onClick={handleEditClick}
+                    loadingText={"Saving..."}
+                    loading={isUpdating}
+                    disabled={!!previewVersion || !workspacePermissions.projects.edit}
+                  >
+                    {editing ? "Save" : "Edit"}
+                    {editing ? <Icon name={"save"} size={"xs"} /> : <Icon name={"edit"} size={"xs"} />}
+                  </Button>
+                </Tooltip>
+              </Flex>
+            )}
+
             {/* Actions Menu */}
             <Menu.Root size={"sm"}>
               <Menu.Trigger asChild>
@@ -900,53 +983,6 @@ const Project = () => {
               </Menu.Positioner>
             </Menu.Root>
 
-            {displayProjectArchived ? (
-              <Tooltip
-                content={"Insufficient permissions in this Workspace"}
-                disabled={workspacePermissions.projects.archive}
-                showArrow
-              >
-                <Button
-                  onClick={handleRestoreClick}
-                  size={"xs"}
-                  rounded={"md"}
-                  colorPalette={"orange"}
-                  disabled={!workspacePermissions.projects.archive}
-                >
-                  Restore
-                  <Icon name={"rewind"} size={"xs"} />
-                </Button>
-              </Tooltip>
-            ) : (
-              <Flex gap={"1"}>
-                {editing && (
-                  <Button onClick={handleCancelClick} size={"xs"} rounded={"md"} colorPalette={"red"}>
-                    Cancel
-                    <Icon name={"cross"} size={"xs"} />
-                  </Button>
-                )}
-                <Tooltip
-                  content={"Insufficient permissions in this Workspace"}
-                  disabled={workspacePermissions.projects.edit}
-                  showArrow
-                >
-                  <Button
-                    id={"editProjectButton"}
-                    colorPalette={editing ? "green" : "blue"}
-                    size={"xs"}
-                    rounded={"md"}
-                    onClick={handleEditClick}
-                    loadingText={"Saving..."}
-                    loading={isUpdating}
-                    disabled={!!previewVersion || !workspacePermissions.projects.edit}
-                  >
-                    {editing ? "Save" : "Edit"}
-                    {editing ? <Icon name={"save"} size={"xs"} /> : <Icon name={"edit"} size={"xs"} />}
-                  </Button>
-                </Tooltip>
-              </Flex>
-            )}
-
             {/* Version history */}
             <Drawer.Root
               open={historyOpen}
diff --git a/client/src/pages/view/Projects.tsx b/client/src/pages/view/Projects.tsx
index be26217d..ded4d487 100644
--- a/client/src/pages/view/Projects.tsx
+++ b/client/src/pages/view/Projects.tsx
@@ -19,6 +19,7 @@ import ActorTag from "@components/ActorTag";
 import { Content } from "@components/Container";
 import DataTable from "@components/DataTable";
 import Icon from "@components/Icon";
+import Linky from "@components/Linky";
 import { toaster } from "@components/Toast";
 import Tooltip from "@components/Tooltip";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -205,9 +206,12 @@ const Projects = () => {
       cell: (info) => (
         <Flex align={"center"} justify={"space-between"} gap={"1"} w={"100%"}>
           <Tooltip content={info.getValue()} disabled={info.getValue().length < 48} showArrow>
-            <Text fontSize={"xs"} fontWeight={"semibold"}>
-              {_.truncate(info.getValue(), { length: 48 })}
-            </Text>
+            <Flex gap={"1"} align={"center"}>
+              <Icon name={"project"} color={GLOBAL_STYLES.project.color.icon} size={"xs"} />
+              <Text fontSize={"xs"} fontWeight={"semibold"}>
+                {_.truncate(info.getValue(), { length: 48 })}
+              </Text>
+            </Flex>
           </Tooltip>
           <Button
             size="2xs"
@@ -224,7 +228,7 @@ const Projects = () => {
       ),
       header: "Name",
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("description", {
@@ -232,7 +236,7 @@ const Projects = () => {
         if (_.isEqual(info.getValue(), "") || _.isNull(info.getValue())) {
           return (
             <Tag.Root colorPalette={"orange"}>
-              <Tag.Label fontSize={"xs"}>Empty</Tag.Label>
+              <Tag.Label fontSize={"xs"}>No Description</Tag.Label>
             </Tag.Root>
           );
         }
@@ -247,29 +251,57 @@ const Projects = () => {
       header: "Description",
       enableHiding: true,
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("entities", {
       cell: (info) => {
-        return (
-          <Tag.Root colorPalette={info.getValue().length > 0 ? "green" : "orange"} size={"sm"}>
-            <Tag.Label fontSize={"xs"}>{info.getValue().length > 0 ? info.getValue().length : "None"}</Tag.Label>
-          </Tag.Root>
-        );
+        const entities = info.row.original.entities;
+
+        // 0 Entities
+        if (entities.length === 0) {
+          return (
+            <Tag.Root colorPalette={"orange"}>
+              <Tag.Label fontSize={"xs"}>No Entities</Tag.Label>
+            </Tag.Root>
+          );
+        }
+
+        // Multiple Entities
+        if (entities.length > 1) {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {entities.slice(0, 1).map((entity) => (
+                <Linky type={"entities"} id={entity} />
+              ))}
+              <Text fontSize={"xs"}>
+                and {entities.length - 1} other{entities.length - 1 !== 1 ? "s" : ""}
+              </Text>
+            </Flex>
+          );
+        } else {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {entities.map((entity) => (
+                <Linky type={"entities"} id={entity} />
+              ))}
+            </Flex>
+          );
+        }
       },
       header: "Entities",
       meta: {
-        minWidth: 120,
-        maxWidth: 120,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("created", {
       cell: (info) => {
         return (
-          <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
-            {dayjs(info.getValue()).fromNow()}
-          </Text>
+          <Tooltip content={dayjs(info.getValue()).format("[Created:] DD MMMM YYYY, HH:MM A")} showArrow>
+            <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
+              {dayjs(info.getValue()).fromNow()}
+            </Text>
+          </Tooltip>
         );
       },
       header: "Created",
diff --git a/client/src/pages/view/Template.tsx b/client/src/pages/view/Template.tsx
index 0b24cf8b..7fbf80bc 100644
--- a/client/src/pages/view/Template.tsx
+++ b/client/src/pages/view/Template.tsx
@@ -486,7 +486,7 @@ const Template = () => {
       },
       header: "Entity",
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
     usageColumnHelper.accessor("modifications", {
@@ -498,7 +498,7 @@ const Template = () => {
               {modifications.map((modification) => {
                 return (
                   <Tag.Root colorPalette={"orange"}>
-                    <Tag.Label fontSize={"xs"}>{modification}</Tag.Label>
+                    <Tag.Label fontSize={"xs"}>{_.capitalize(modification)}</Tag.Label>
                   </Tag.Root>
                 );
               })}
@@ -647,44 +647,6 @@ const Template = () => {
 
           {/* Buttons */}
           <Flex direction={"row"} gap={"2"} wrap={"wrap"}>
-            {/* Actions Menu */}
-            <Menu.Root size={"sm"}>
-              <Menu.Trigger asChild>
-                <Button size={"xs"} rounded={"md"} colorPalette={"yellow"} data-testid={"templateActionsButton"}>
-                  Actions
-                  <Icon name={"lightning"} size={"xs"} />
-                </Button>
-              </Menu.Trigger>
-              <Menu.Positioner>
-                <Menu.Content>
-                  <Menu.Item
-                    fontSize={"xs"}
-                    value={"export"}
-                    onClick={() => setExportOpen(true)}
-                    disabled={templateArchived || !!previewVersion}
-                  >
-                    <Icon name={"download"} size={"xs"} />
-                    Export
-                  </Menu.Item>
-                  <Tooltip
-                    content={"Insufficient permissions in this Workspace"}
-                    disabled={workspacePermissions.templates.archive}
-                    showArrow
-                  >
-                    <Menu.Item
-                      fontSize={"xs"}
-                      value={"archive"}
-                      onClick={() => setArchiveDialogOpen(true)}
-                      disabled={templateArchived || !workspacePermissions.templates.archive}
-                    >
-                      <Icon name={"archive"} size={"xs"} />
-                      Archive
-                    </Menu.Item>
-                  </Tooltip>
-                </Menu.Content>
-              </Menu.Positioner>
-            </Menu.Root>
-
             {templateArchived ? (
               <Tooltip
                 content={"Insufficient permissions in this Workspace"}
@@ -733,6 +695,44 @@ const Template = () => {
               </Flex>
             )}
 
+            {/* Actions Menu */}
+            <Menu.Root size={"sm"}>
+              <Menu.Trigger asChild>
+                <Button size={"xs"} rounded={"md"} colorPalette={"yellow"} data-testid={"templateActionsButton"}>
+                  Actions
+                  <Icon name={"lightning"} size={"xs"} />
+                </Button>
+              </Menu.Trigger>
+              <Menu.Positioner>
+                <Menu.Content>
+                  <Menu.Item
+                    fontSize={"xs"}
+                    value={"export"}
+                    onClick={() => setExportOpen(true)}
+                    disabled={templateArchived || !!previewVersion}
+                  >
+                    <Icon name={"download"} size={"xs"} />
+                    Export
+                  </Menu.Item>
+                  <Tooltip
+                    content={"Insufficient permissions in this Workspace"}
+                    disabled={workspacePermissions.templates.archive}
+                    showArrow
+                  >
+                    <Menu.Item
+                      fontSize={"xs"}
+                      value={"archive"}
+                      onClick={() => setArchiveDialogOpen(true)}
+                      disabled={templateArchived || !workspacePermissions.templates.archive}
+                    >
+                      <Icon name={"archive"} size={"xs"} />
+                      Archive
+                    </Menu.Item>
+                  </Tooltip>
+                </Menu.Content>
+              </Menu.Positioner>
+            </Menu.Root>
+
             {/* Version history */}
             <Drawer.Root
               open={historyOpen}
diff --git a/client/src/pages/view/Templates.tsx b/client/src/pages/view/Templates.tsx
index bd55cbbd..eb673253 100644
--- a/client/src/pages/view/Templates.tsx
+++ b/client/src/pages/view/Templates.tsx
@@ -29,6 +29,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { AttributeModel, IGenericItem } from "@types";
 
 // Utility functions and libraries
+import { getValueTypeIconProps } from "@lib/util";
 import _ from "lodash";
 import dayjs from "dayjs";
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
@@ -210,9 +211,12 @@ const Templates = () => {
         return (
           <Flex align={"center"} justify={"space-between"} gap={"1"} w={"100%"}>
             <Tooltip content={info.getValue()} disabled={info.getValue().length < 48} showArrow>
-              <Text fontSize={"xs"} fontWeight={"semibold"}>
-                {_.truncate(info.getValue(), { length: 48 })}
-              </Text>
+              <Flex gap={"1"} align={"center"}>
+                <Icon name={"template"} color={GLOBAL_STYLES.template.color.icon} size={"xs"} />
+                <Text fontSize={"xs"} fontWeight={"semibold"}>
+                  {_.truncate(info.getValue(), { length: 48 })}
+                </Text>
+              </Flex>
             </Tooltip>
             <Button
               size="2xs"
@@ -230,7 +234,7 @@ const Templates = () => {
       },
       header: "Name",
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("description", {
@@ -238,7 +242,7 @@ const Templates = () => {
         if (_.isEqual(info.getValue(), "") || _.isNull(info.getValue())) {
           return (
             <Tag.Root colorPalette={"orange"}>
-              <Tag.Label fontSize={"xs"}>Empty</Tag.Label>
+              <Tag.Label fontSize={"xs"}>No Description</Tag.Label>
             </Tag.Root>
           );
         }
@@ -253,29 +257,75 @@ const Templates = () => {
       header: "Description",
       enableHiding: true,
       meta: {
-        minWidth: 400,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("values", {
       cell: (info) => {
-        return (
-          <Tag.Root colorPalette={info.getValue().length > 0 ? "green" : "orange"} size={"sm"}>
-            <Tag.Label fontSize={"xs"}>{info.getValue().length > 0 ? info.getValue().length : "None"}</Tag.Label>
-          </Tag.Root>
-        );
+        const values = info.row.original.values;
+
+        // 0 Values
+        if (values.length === 0) {
+          return (
+            <Tag.Root colorPalette={"orange"}>
+              <Tag.Label fontSize={"xs"}>No Values</Tag.Label>
+            </Tag.Root>
+          );
+        }
+
+        // Multiple Values
+        if (values.length > 2) {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {values.slice(0, 2).map((value) => (
+                <Tag.Root colorPalette={getValueTypeIconProps(value.type).color.split(".")[0]}>
+                  <Tag.StartElement>
+                    <Icon
+                      name={getValueTypeIconProps(value.type).name}
+                      color={getValueTypeIconProps(value.type).color}
+                      size={"xs"}
+                    />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{value.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+              <Text fontSize={"xs"}>
+                and {values.length - 2} other{values.length - 2 !== 1 ? "s" : ""}
+              </Text>
+            </Flex>
+          );
+        } else {
+          return (
+            <Flex direction={"row"} gap={"1"} align={"center"}>
+              {values.map((value) => (
+                <Tag.Root colorPalette={getValueTypeIconProps(value.type).color.split(".")[0]}>
+                  <Tag.StartElement>
+                    <Icon
+                      name={getValueTypeIconProps(value.type).name}
+                      color={getValueTypeIconProps(value.type).color}
+                      size={"xs"}
+                    />
+                  </Tag.StartElement>
+                  <Tag.Label fontSize={"xs"}>{value.name}</Tag.Label>
+                </Tag.Root>
+              ))}
+            </Flex>
+          );
+        }
       },
       header: "Values",
       meta: {
-        minWidth: 120,
-        maxWidth: 120,
+        minWidth: 300,
       },
     }),
     columnHelper.accessor("timestamp", {
       cell: (info) => {
         return (
-          <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
-            {dayjs(info.getValue()).fromNow()}
-          </Text>
+          <Tooltip content={dayjs(info.getValue()).format("[Created:] DD MMMM YYYY, HH:MM A")} showArrow>
+            <Text fontSize={"xs"} fontWeight={"semibold"} color={GLOBAL_STYLES.font.secondaryHeader.color}>
+              {dayjs(info.getValue()).fromNow()}
+            </Text>
+          </Tooltip>
         );
       },
       header: "Created",
diff --git a/types/index.d.ts b/types/index.d.ts
index 17a9064e..d5b8f9f5 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -132,6 +132,7 @@ export type CompareAttributeDialogCollapsibleProps = {
   color: string;
   label: string;
   count: number;
+  disabled: boolean;
   children: React.ReactNode;
 };
 

From 63ce19e0adce18f2702308598befeecfee67664f Mon Sep 17 00:00:00 2001
From: Henry Burgess <henryjburg@gmail.com>
Date: Thu, 30 Jul 2026 13:05:40 -0500
Subject: [PATCH 6/6] MARS-1167 Fix Entity Attributes view

---
 client/src/pages/view/Entity.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/view/Entity.tsx b/client/src/pages/view/Entity.tsx
index 69ce59ed..f1340b79 100644
--- a/client/src/pages/view/Entity.tsx
+++ b/client/src/pages/view/Entity.tsx
@@ -763,9 +763,9 @@ const Entity = () => {
         const [viewAttributeDialogOpen, setViewAttributeDialogOpen] = useState(false);
         return (
           <Flex align={"center"} justify={"space-between"} gap={"1"} w={"100%"}>
-            <Tooltip content={info.getValue()} disabled={info.getValue().length < 12} showArrow>
+            <Tooltip content={info.getValue()} disabled={info.getValue().length < 16} showArrow>
               <Text fontSize={"xs"} fontWeight={"semibold"}>
-                {_.truncate(info.getValue(), { length: 12 })}
+                {_.truncate(info.getValue(), { length: 16 })}
               </Text>
             </Tooltip>
             <Flex direction={"row"} gap={"1"} align={"center"}>