From 1b6f186ab51ecfbed125f08408c7a33a65ad8e35 Mon Sep 17 00:00:00 2001
From: Aditya Thebe <contact@adityathebe.com>
Date: Wed, 3 Dec 2025 20:12:15 +0545
Subject: [PATCH 1/4] feat(view): Collapsible section

---
 src/pages/views/components/SingleView.tsx  |  8 +-
 src/pages/views/components/ViewSection.tsx | 89 ++++++++++++++--------
 2 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/src/pages/views/components/SingleView.tsx b/src/pages/views/components/SingleView.tsx
index c6dce2fb1..470ea946f 100644
--- a/src/pages/views/components/SingleView.tsx
+++ b/src/pages/views/components/SingleView.tsx
@@ -163,7 +163,7 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
   // Render the main view through ViewSection to reuse its spacing/scroll styling;
   // rendering the raw View here caused padding/overflow glitches alongside sections.
   const primaryViewSection = {
-    title: "",
+    title: title || name,
     viewRef: {
       namespace: namespace || "",
       name: name
@@ -185,7 +185,7 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
         )
       }
     >
-      <div className="flex h-full w-full flex-1 flex-col overflow-y-auto p-6 pb-0">
+      <div className="flex h-full w-full flex-1 flex-col overflow-y-auto px-6">
         {/* Render aggregated variables once at the top */}
         {aggregatedVariables && aggregatedVariables.length > 0 && (
           <GlobalFiltersForm
@@ -201,7 +201,7 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
           <hr className="my-4 border-gray-200" />
         )}
 
-        <div>
+        <div className="mt-2">
           <ViewSection
             key={`${namespace || "default"}:${name}`}
             section={primaryViewSection}
@@ -214,7 +214,7 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
             {viewResult.sections.map((section) => (
               <div
                 key={`${section.viewRef.namespace}:${section.viewRef.name}`}
-                className="mt-6 pt-6"
+                className="mt-4"
               >
                 <ViewSection section={section} hideVariables />
               </div>
diff --git a/src/pages/views/components/ViewSection.tsx b/src/pages/views/components/ViewSection.tsx
index 4c3d8067e..81fea3fc6 100644
--- a/src/pages/views/components/ViewSection.tsx
+++ b/src/pages/views/components/ViewSection.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { IoChevronDownOutline } from "react-icons/io5";
 import { getViewDataByNamespace } from "../../../api/services/views";
 import View from "../../audit-report/components/View/View";
 import { Icon } from "../../../ui/Icons/Icon";
@@ -16,6 +17,7 @@ const ViewSection: React.FC<ViewSectionProps> = ({
   section,
   hideVariables
 }) => {
+  const [isExpanded, setIsExpanded] = useState(true);
   const { namespace, name } = section.viewRef;
 
   // Use prefixed search params for view variables
@@ -37,50 +39,73 @@ const ViewSection: React.FC<ViewSectionProps> = ({
     staleTime: 5 * 60 * 1000
   });
 
-  if (isLoading) {
-    return (
-      <div className="animate-pulse">
-        <div className="mb-4 h-4 w-32 rounded bg-gray-200"></div>
-        <div className="h-64 rounded bg-gray-100"></div>
-      </div>
-    );
-  }
-
   if (error || !sectionViewResult) {
     return (
       <>
-        <div className="mb-4 flex items-center">
+        <div
+          className="mb-2 flex cursor-pointer items-center gap-2 rounded px-2 py-1"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <IoChevronDownOutline
+            className={`h-4 w-4 flex-shrink-0 transform text-gray-600 transition-transform ${!isExpanded ? "-rotate-90" : ""}`}
+          />
           {section.icon && (
-            <Icon name={section.icon} className="mr-2 h-5 w-5" />
+            <Icon
+              name={section.icon}
+              className="h-5 w-5 flex-shrink-0 text-gray-600"
+            />
           )}
-          <h2 className="text-lg font-semibold">{section.title}</h2>
-        </div>
-        <div className="text-red-500">
-          {error instanceof Error ? error.message : "Failed to load section"}
+          <h3 className="text-lg font-semibold text-gray-600">
+            {section.title}
+          </h3>
         </div>
+        {isExpanded && (
+          <div className="text-red-500">
+            {error instanceof Error ? error.message : "Failed to load section"}
+          </div>
+        )}
       </>
     );
   }
 
   return (
     <>
-      <div className="mb-4 flex items-center">
-        {section.icon && <Icon name={section.icon} className="mr-2 h-5 w-5" />}
-        <h2 className="text-lg font-semibold">{section.title}</h2>
+      <div
+        className="mb-2 flex cursor-pointer items-center gap-2 rounded px-2 py-1"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <IoChevronDownOutline
+          className={`h-4 w-4 flex-shrink-0 transform text-gray-600 transition-transform ${!isExpanded ? "-rotate-90" : ""}`}
+        />
+        {section.icon && (
+          <Icon
+            name={section.icon}
+            className="h-5 w-5 flex-shrink-0 text-gray-600"
+          />
+        )}
+        <h3 className="text-lg font-semibold text-gray-600">{section.title}</h3>
       </div>
-      <View
-        title=""
-        namespace={namespace}
-        name={name}
-        columns={sectionViewResult?.columns}
-        columnOptions={sectionViewResult?.columnOptions}
-        panels={sectionViewResult?.panels}
-        variables={sectionViewResult?.variables}
-        card={sectionViewResult?.card}
-        requestFingerprint={sectionViewResult.requestFingerprint}
-        currentVariables={currentViewVariables}
-        hideVariables={hideVariables}
-      />
+      {isExpanded &&
+        (isLoading ? (
+          <div className="animate-pulse">
+            <div className="mb-4 h-4 w-32 rounded bg-gray-200"></div>
+            <div className="h-64 rounded bg-gray-100"></div>
+          </div>
+        ) : (
+          <View
+            title=""
+            namespace={namespace}
+            name={name}
+            columns={sectionViewResult?.columns}
+            columnOptions={sectionViewResult?.columnOptions}
+            panels={sectionViewResult?.panels}
+            variables={sectionViewResult?.variables}
+            card={sectionViewResult?.card}
+            requestFingerprint={sectionViewResult.requestFingerprint}
+            currentVariables={currentViewVariables}
+            hideVariables={hideVariables}
+          />
+        ))}
     </>
   );
 };

From 87cb15af881531c54651edc099aa9c7b9e17c513 Mon Sep 17 00:00:00 2001
From: Aditya Thebe <contact@adityathebe.com>
Date: Wed, 3 Dec 2025 22:36:33 +0545
Subject: [PATCH 2/4] fix: Add keyboard accessibility to clickable headers

---
 src/pages/views/components/ViewSection.tsx | 67 +++++++++++++++-------
 1 file changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/pages/views/components/ViewSection.tsx b/src/pages/views/components/ViewSection.tsx
index 81fea3fc6..df7fb6096 100644
--- a/src/pages/views/components/ViewSection.tsx
+++ b/src/pages/views/components/ViewSection.tsx
@@ -39,12 +39,25 @@ const ViewSection: React.FC<ViewSectionProps> = ({
     staleTime: 5 * 60 * 1000
   });
 
+  const handleHeaderKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setIsExpanded(!isExpanded);
+    }
+  };
+
   if (error || !sectionViewResult) {
+    const errorContentId = `section-${namespace}-${name}-error`;
     return (
       <>
         <div
+          role="button"
+          tabIndex={0}
+          aria-expanded={isExpanded}
+          aria-controls={errorContentId}
           className="mb-2 flex cursor-pointer items-center gap-2 rounded px-2 py-1"
           onClick={() => setIsExpanded(!isExpanded)}
+          onKeyDown={handleHeaderKeyDown}
         >
           <IoChevronDownOutline
             className={`h-4 w-4 flex-shrink-0 transform text-gray-600 transition-transform ${!isExpanded ? "-rotate-90" : ""}`}
@@ -60,7 +73,7 @@ const ViewSection: React.FC<ViewSectionProps> = ({
           </h3>
         </div>
         {isExpanded && (
-          <div className="text-red-500">
+          <div id={errorContentId} className="text-red-500">
             {error instanceof Error ? error.message : "Failed to load section"}
           </div>
         )}
@@ -68,11 +81,18 @@ const ViewSection: React.FC<ViewSectionProps> = ({
     );
   }
 
+  const contentId = `section-${namespace}-${name}`;
+
   return (
     <>
       <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
         className="mb-2 flex cursor-pointer items-center gap-2 rounded px-2 py-1"
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={handleHeaderKeyDown}
       >
         <IoChevronDownOutline
           className={`h-4 w-4 flex-shrink-0 transform text-gray-600 transition-transform ${!isExpanded ? "-rotate-90" : ""}`}
@@ -85,27 +105,30 @@ const ViewSection: React.FC<ViewSectionProps> = ({
         )}
         <h3 className="text-lg font-semibold text-gray-600">{section.title}</h3>
       </div>
-      {isExpanded &&
-        (isLoading ? (
-          <div className="animate-pulse">
-            <div className="mb-4 h-4 w-32 rounded bg-gray-200"></div>
-            <div className="h-64 rounded bg-gray-100"></div>
-          </div>
-        ) : (
-          <View
-            title=""
-            namespace={namespace}
-            name={name}
-            columns={sectionViewResult?.columns}
-            columnOptions={sectionViewResult?.columnOptions}
-            panels={sectionViewResult?.panels}
-            variables={sectionViewResult?.variables}
-            card={sectionViewResult?.card}
-            requestFingerprint={sectionViewResult.requestFingerprint}
-            currentVariables={currentViewVariables}
-            hideVariables={hideVariables}
-          />
-        ))}
+      {isExpanded && (
+        <div id={contentId}>
+          {isLoading ? (
+            <div className="animate-pulse">
+              <div className="mb-4 h-4 w-32 rounded bg-gray-200"></div>
+              <div className="h-64 rounded bg-gray-100"></div>
+            </div>
+          ) : (
+            <View
+              title=""
+              namespace={namespace}
+              name={name}
+              columns={sectionViewResult?.columns}
+              columnOptions={sectionViewResult?.columnOptions}
+              panels={sectionViewResult?.panels}
+              variables={sectionViewResult?.variables}
+              card={sectionViewResult?.card}
+              requestFingerprint={sectionViewResult.requestFingerprint}
+              currentVariables={currentViewVariables}
+              hideVariables={hideVariables}
+            />
+          )}
+        </div>
+      )}
     </>
   );
 };

From efb101236d58f026a48a44c1069aa61474011d64 Mon Sep 17 00:00:00 2001
From: Aditya Thebe <contact@adityathebe.com>
Date: Thu, 4 Dec 2025 13:24:44 +0545
Subject: [PATCH 3/4] fix: Prevent error message during initial load in
 ViewSection

---
 src/pages/views/components/ViewSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/views/components/ViewSection.tsx b/src/pages/views/components/ViewSection.tsx
index df7fb6096..a60dcd3d8 100644
--- a/src/pages/views/components/ViewSection.tsx
+++ b/src/pages/views/components/ViewSection.tsx
@@ -46,7 +46,7 @@ const ViewSection: React.FC<ViewSectionProps> = ({
     }
   };
 
-  if (error || !sectionViewResult) {
+  if (error || (!isLoading && !sectionViewResult)) {
     const errorContentId = `section-${namespace}-${name}-error`;
     return (
       <>

From 3592ab42448e28e8fbde41fa9d2777d9c13e52aa Mon Sep 17 00:00:00 2001
From: Aditya Thebe <contact@adityathebe.com>
Date: Thu, 4 Dec 2025 13:42:34 +0545
Subject: [PATCH 4/4] fix: margin top for templating variable filter

---
 src/pages/audit-report/components/View/GlobalFilters.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/audit-report/components/View/GlobalFilters.tsx b/src/pages/audit-report/components/View/GlobalFilters.tsx
index 15d89af1a..ade1a7875 100644
--- a/src/pages/audit-report/components/View/GlobalFilters.tsx
+++ b/src/pages/audit-report/components/View/GlobalFilters.tsx
@@ -72,7 +72,7 @@ const GlobalFilters: React.FC<GlobalFiltersProps> = ({ variables }) => {
   }
 
   return (
-    <div className="mb-4">
+    <div className="mb-4 mt-4">
       <div className="flex flex-wrap items-center gap-2">
         {filterComponents}
       </div>