fix: add background color to TLP badges and include TLP in job API. Closes #3150

- Added backgroundColor property to TLP badge component styling
- Implemented accessible text color logic (black for CLEAR/GREEN/AMBER, white for RED)
- Added tlp field to JobSerializer to return TLP value in job details API response
- Fixed issue where TLP badges showed only borders without background colors on job report page

Author: AshwinGajbhiye

api_app/serializers/job.py

@@ -507,6 +507,7 @@ class Meta:
             "tags",
             "comments",
             "status",
+            "tlp",
             "pivots_to_execute",
             "analyzers_to_execute",
             "analyzers_requested",

frontend/src/components/common/TLPTag.jsx

@@ -10,6 +10,12 @@ export function TLPTag(props) {
   const badgeId = `tlptag-badge__${value}`;
   const color = TLPColors?.[value] || "#dfe1e2";
   const tooltipText = TLPDescriptions?.[value] || "invalid";
+  const textColorMap = {
+    CLEAR: "#000000",
+    GREEN: "#000000",
+    AMBER: "#000000",
+  };
+  const textColor = textColorMap[value] || "#FFFFFF";
 
   return value ? (
     <Badge
@@ -18,7 +24,9 @@ export function TLPTag(props) {
       style={{
         borderRadius: 5,
         userSelect: "none",
+        backgroundColor: color,
         border: `1px solid ${color}`,
+        color: textColor,
       }}
       {...rest}
     >