From deb650f22f82a36c1905729d0e531df4f0a3619c Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 11 Aug 2026 10:35:49 +0000
Subject: [PATCH] fix: update DocumentSlots component to include optional mode
 and use requirement.id as key

---
 .../app/features/licensing/components/DocumentSlots.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
index c0e075d4e..e09c995bc 100644
--- a/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
+++ b/apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
@@ -65,6 +65,7 @@ export function DocumentSlots({
   const required = requirements.filter(
     (r) =>
       r.mode === 'ALWAYS' ||
+      r.mode === 'OPTIONAL' ||
       (r.mode === 'CONDITIONAL' && conditionHolds(r.conditionExpression, formData)),
   );
 
@@ -99,7 +100,7 @@ export function DocumentSlots({
 
         return (
           <Card
-            key={requirement.key}
+            key={requirement.id}
             withBorder
             padding="md"
             style={{
@@ -122,6 +123,11 @@ export function DocumentSlots({
                       conditional
                     </Badge>
                   )}
+                  {requirement.mode === 'OPTIONAL' && (
+                    <Badge size="xs" variant="light" color="gray">
+                      optional
+                    </Badge>
+                  )}
                   {uploaded && !flagRemark && (
                     <Badge size="xs" color="teal" leftSection={<IconCheck size={10} />}>
                       uploaded