minor updates

Author: omursahin

web-report/src/assets/info.json

@@ -11,10 +11,10 @@
   "creation_date": "Date when the report was generated.",
   "tool_name_version": "Name and version of the tool that generated the report.",
   "schema_version": "Version of the schema used for the report.",
-  "status_2xx": "2xx status codes",
-  "status_3xx": "3xx status codes",
-  "status_4xx": "4xx status codes",
-  "status_5xx": "5xx status codes",
+  "status_2xx": "Coverage of the 2xx status codes",
+  "status_3xx": "Coverage of the 3xx status codes",
+  "status_4xx": "Coverage of the 4xx status codes",
+  "status_5xx": "Coverage of the 5xx status codes",
   "fault_codes": [
     {
       "short_definition": "HTTP_STATUS_500",

web-report/src/components/EndpointAccordion.tsx

@@ -65,13 +65,13 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
                 <div className="flex-1 font-mono">{endpoint}</div>
                 <div className="flex flex-wrap justify-end gap-2 mr-4">
                     {sortedStatusCodes.map((code, idx) => (
-                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, false)}`}>
-                            {code.code}
+                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, false)} font-mono`}>
+                            H{code.code}
                         </Badge>
                     ))}
                     {sortedFaults.map((code, idx) => (
-                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, true)}`}>
-                            {code.code}
+                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, true)} font-mono`}>
+                            F{code.code}
                         </Badge>
                     ))}
                 </div>

web-report/src/components/StatusCodeFilters.tsx

@@ -51,9 +51,9 @@ export function StatusCodeFilters({data, onFiltersChange}: StatusCodeFiltersProp
 
     return (
         <div className="mb-6">
-            <div className="flex items-center mb-2">
-                <h3 className="text-sm font-medium text-gray-700 mr-3">Filter by Status Code:</h3>
-                <div className="flex flex-wrap gap-2">
+            <div className="items-center mb-2">
+                <h3 className="text-sm font-medium text-gray-700 mr-3">Filter by Status Code</h3>
+                <div className="flex-wrap gap-2">
                     {allStatusCodes.map((code) => (
                         <StatusCodeFilterButton
                             key={code.code}
@@ -64,9 +64,9 @@ export function StatusCodeFilters({data, onFiltersChange}: StatusCodeFiltersProp
                     ))}
                 </div>
             </div>
-            <div className="flex items-center mb-2">
-                <h3 className="text-sm font-medium text-gray-700 mr-3">Filter by Fault Code:</h3>
-                <div className="flex flex-wrap gap-2">
+            <div className="items-center mb-2">
+                <h3 className="text-sm font-medium text-gray-700 mr-3">Filter by Fault Code</h3>
+                <div className="flex-wrap gap-2">
                     {allFaultCodes.map((code) => (
                         <StatusCodeFilterButton
                             key={-code}
@@ -79,6 +79,7 @@ export function StatusCodeFilters({data, onFiltersChange}: StatusCodeFiltersProp
                 </div>
             </div>
             <div className="text-xs text-gray-500 mt-1">Click to toggle: Default → Active → Removed → Default</div>
+            <div className="border-t border-black my-2"></div>
         </div>
     )
 }

web-report/tsconfig.json

@@ -8,6 +8,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "jsx": "react-jsx"
   },
 }