fix: add package section to SBOM Details-Info Tab (#255)

Author: carlosthe19916

client/src/app/pages/sbom-details/overview.tsx

@@ -43,6 +43,12 @@ export const Overview: React.FC<InfoProps> = ({ sbom }) => {
                   {sbom.document_id}
                 </DescriptionListDescription>
               </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Data License</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {sbom.data_licenses.join(", ")}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
             </DescriptionList>
           </CardBody>
         </Card>
@@ -58,12 +64,6 @@ export const Overview: React.FC<InfoProps> = ({ sbom }) => {
                   {formatDate(sbom.published)}
                 </DescriptionListDescription>
               </DescriptionListGroup>
-              <DescriptionListGroup>
-                <DescriptionListTerm>License List Version</DescriptionListTerm>
-                <DescriptionListDescription>
-                  {sbom.data_licenses.join(", ")}
-                </DescriptionListDescription>
-              </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Creator</DescriptionListTerm>
                 <DescriptionListDescription>
@@ -95,6 +95,44 @@ export const Overview: React.FC<InfoProps> = ({ sbom }) => {
           </CardBody>
         </Card>
       </GridItem>
+      <GridItem md={12}>
+        <Card isFullHeight>
+          <CardTitle>Package</CardTitle>
+          <CardBody>
+            <DescriptionList>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Name</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {sbom.name}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Version</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {sbom.described_by.map((e) => e.version).join(", ")}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>External References</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <List>
+                    {sbom.described_by
+                      .flatMap((e) => e.cpe)
+                      .map((e) => (
+                        <ListItem>{e}</ListItem>
+                      ))}
+                    <ListItem>
+                      {sbom.described_by
+                        .flatMap((e) => e.purl)
+                        .map((e) => e.purl)}
+                    </ListItem>
+                  </List>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          </CardBody>
+        </Card>
+      </GridItem>
     </Grid>
   );
 };