diff --git a/src/Components/Licenses/LicensesPage.tsx b/src/Components/Licenses/LicensesPage.tsx
new file mode 100644
index 00000000000..560b45a0b74
--- /dev/null
+++ b/src/Components/Licenses/LicensesPage.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import BOMDisplay from "./SBOMViewer";
+
+const LicensesPage: React.FC = () => {
+ return (
+
+
+ Third-Party Software and Licenses
+
+
+ This page shows what third-party software is used in Care, including the
+ respective licenses and versions.
+
+
+
+ );
+};
+
+export default LicensesPage;
diff --git a/src/Components/Licenses/SBOMViewer.tsx b/src/Components/Licenses/SBOMViewer.tsx
new file mode 100644
index 00000000000..17b502495c1
--- /dev/null
+++ b/src/Components/Licenses/SBOMViewer.tsx
@@ -0,0 +1,202 @@
+import React, { useState } from "react";
+import Card from "../../CAREUI/display/Card";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import dayjs from "dayjs";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import licenseUrls from "./licenseUrls.json";
+import feBomData from "./fe-sbom.json";
+import beBomData from "./be-sbom.json";
+
+const getLicenseUrl = (licenseId: string | undefined): string | null => {
+ if (!licenseId) return null;
+ return licenseUrls[licenseId as keyof typeof licenseUrls] || null;
+};
+interface CycloneDXExternalRef {
+ url?: string;
+ type?: string;
+ comment?: string;
+}
+
+interface CycloneDXLicense {
+ license?: {
+ id?: string;
+ };
+}
+
+interface CycloneDXProperties {
+ name?: string;
+ value?: string;
+}
+
+interface CycloneDXComponent {
+ type?: string;
+ name?: string;
+ group?: string;
+ version?: string;
+ bomRef?: string;
+ author?: string;
+ description?: string;
+ licenses?: CycloneDXLicense[];
+ externalReferences?: CycloneDXExternalRef[];
+ properties?: CycloneDXProperties[];
+}
+
+interface CycloneDXTool {
+ name?: string;
+ version?: string;
+ vendor?: string;
+ externalReferences?: CycloneDXExternalRef[];
+}
+
+interface CycloneDXBOM {
+ bomFormat?: string;
+ specVersion?: string;
+ version?: number;
+ serialNumber?: string;
+ metadata?: {
+ timestamp?: string;
+ tools?: CycloneDXTool[];
+ component?: CycloneDXComponent;
+ };
+ components?: CycloneDXComponent[];
+}
+
+const BOMDisplay: React.FC = () => {
+ const [copyStatus, setCopyStatus] = useState(false);
+ const [showExternalRefs, setShowExternalRefs] = useState
(null);
+ const [activeTab, setActiveTab] = useState("bom");
+
+ const handleCopy = () => {
+ setCopyStatus(true);
+ setTimeout(() => setCopyStatus(false), 2000);
+ };
+
+ const bomData = (activeTab === "bom" ? feBomData : beBomData) as CycloneDXBOM;
+
+ return (
+
+
+
+
+
+
+
+
+ {bomData.bomFormat || "N/A"} BOM (Version:{" "}
+ {bomData.version || "N/A"})
+
+
+ Created on:{" "}
+ {bomData.metadata?.timestamp
+ ? dayjs(bomData.metadata.timestamp).format("MMMM D, YYYY")
+ : "N/A"}
+
+
+
+ Components:
+
+ {bomData.components?.map((component, index) => (
+
+ ))}
+
+
+
+
+ {copyStatus && (
+
+ Copied to clipboard!
+
+ )}
+
+
+