fix: update DocumentSlots component to include optional mode and use requirement.id as key

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