From e302ee42a4368ae86d31a9e2e20e8119f8cd2ffa Mon Sep 17 00:00:00 2001
From: PRAteek-singHWY <prateek23022004@gmail.com>
Date: Sun, 25 Jan 2026 17:59:08 +0530
Subject: [PATCH 1/2] feat(myopencre): add initial MyOpenCRE page and CSV
 template download

---
 .../src/pages/MyOpenCRE/MyOpenCRE.scss        |  0
 .../src/pages/MyOpenCRE/MyOpenCRE.tsx         | 47 +++++++++++++++++++
 application/frontend/src/routes.tsx           |  7 +++
 .../src/scaffolding/Header/Header.tsx         | 15 ++++++
 4 files changed, 69 insertions(+)
 create mode 100644 application/frontend/src/pages/MyOpenCRE/MyOpenCRE.scss
 create mode 100644 application/frontend/src/pages/MyOpenCRE/MyOpenCRE.tsx

diff --git a/application/frontend/src/pages/MyOpenCRE/MyOpenCRE.scss b/application/frontend/src/pages/MyOpenCRE/MyOpenCRE.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/application/frontend/src/pages/MyOpenCRE/MyOpenCRE.tsx b/application/frontend/src/pages/MyOpenCRE/MyOpenCRE.tsx
new file mode 100644
index 000000000..4a3de6a27
--- /dev/null
+++ b/application/frontend/src/pages/MyOpenCRE/MyOpenCRE.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, Container, Header } from 'semantic-ui-react';
+
+import { useEnvironment } from '../../hooks';
+
+export const MyOpenCRE = () => {
+  const { apiUrl } = useEnvironment();
+
+  const downloadTemplate = () => {
+    const headers = ['standard_name', 'standard_section', 'cre_id', 'notes'];
+
+    const csvContent = headers.join(',') + '\n';
+
+    const blob = new Blob([csvContent], {
+      type: 'text/csv;charset=utf-8;',
+    });
+
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.setAttribute('download', 'myopencre_mapping_template.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <Container style={{ marginTop: '3rem' }}>
+      <Header as="h1">MyOpenCRE</Header>
+
+      <p>
+        MyOpenCRE allows you to map your own security standard (e.g. SOC2) to OpenCRE Common Requirements
+        using a CSV spreadsheet.
+      </p>
+
+      <p>
+        Start by downloading the mapping template below, fill it with your standard’s controls, and map them
+        to CRE IDs.
+      </p>
+
+      <Button primary onClick={downloadTemplate}>
+        Download Mapping Template (CSV)
+      </Button>
+    </Container>
+  );
+};
diff --git a/application/frontend/src/routes.tsx b/application/frontend/src/routes.tsx
index da9c507eb..5d18ba09a 100644
--- a/application/frontend/src/routes.tsx
+++ b/application/frontend/src/routes.tsx
@@ -21,6 +21,7 @@ import { ExplorerCircles } from './pages/Explorer/visuals/circles/circles';
 import { ExplorerForceGraph } from './pages/Explorer/visuals/force-graph/forceGraph';
 import { GapAnalysis } from './pages/GapAnalysis/GapAnalysis';
 import { MembershipRequired } from './pages/MembershipRequired/MembershipRequired';
+import { MyOpenCRE } from './pages/MyOpenCRE/MyOpenCRE';
 import { SearchName } from './pages/Search/SearchName';
 import { StandardSection } from './pages/Standard/StandardSection';
 
@@ -31,6 +32,12 @@ export interface IRoute {
 }
 
 export const ROUTES: IRoute[] = [
+  {
+    path: '/myopencre',
+    component: MyOpenCRE,
+    showFilter: false,
+  },
+
   {
     path: INDEX,
     component: SearchPage,
diff --git a/application/frontend/src/scaffolding/Header/Header.tsx b/application/frontend/src/scaffolding/Header/Header.tsx
index 9e653b42d..7ba557235 100644
--- a/application/frontend/src/scaffolding/Header/Header.tsx
+++ b/application/frontend/src/scaffolding/Header/Header.tsx
@@ -8,6 +8,7 @@ import { Button } from 'semantic-ui-react';
 
 import { ClearFilterButton } from '../../components/FilterButton/FilterButton';
 import { useLocationFromOutsideRoute } from '../../hooks/useLocationFromOutsideRoute';
+import { MyOpenCRE } from '../../pages/MyOpenCRE/MyOpenCRE';
 import { SearchBar } from '../../pages/Search/components/SearchBar';
 
 export const Header = () => {
@@ -67,7 +68,14 @@ export const Header = () => {
 
               <NavLink to="/explorer" className="nav-link" activeClassName="nav-link--active">
                 Explorer
+<<<<<<< HEAD
               </NavLink>
+=======
+              </a>
+              <Link to="/myopencre" className="nav-link">
+                MyOpenCRE
+              </Link>
+>>>>>>> 9aa61b9 (feat(myopencre): add initial MyOpenCRE page and CSV template download)
             </div>
 
             <div>
@@ -185,7 +193,14 @@ export const Header = () => {
             onClick={closeMobileMenu}
           >
             Explorer
+<<<<<<< HEAD
           </NavLink>
+=======
+          </a>
+          <a href="/myopencre" className="nav-link" onClick={MyOpenCRE}>
+            MyOpenCRE
+          </a>
+>>>>>>> 9aa61b9 (feat(myopencre): add initial MyOpenCRE page and CSV template download)
         </div>
 
         <div className="mobile-auth">

From f335a38e59c89da4ab537f5e195819e1ba241ed9 Mon Sep 17 00:00:00 2001
From: PRAteek-singHWY <prateek23022004@gmail.com>
Date: Mon, 26 Jan 2026 02:56:51 +0530
Subject: [PATCH 2/2] fix(header): add MyOpenCRE link and resolve navigation
 conflict

---
 .../src/scaffolding/Header/Header.tsx         | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/application/frontend/src/scaffolding/Header/Header.tsx b/application/frontend/src/scaffolding/Header/Header.tsx
index 7ba557235..1b36dd721 100644
--- a/application/frontend/src/scaffolding/Header/Header.tsx
+++ b/application/frontend/src/scaffolding/Header/Header.tsx
@@ -68,14 +68,11 @@ export const Header = () => {
 
               <NavLink to="/explorer" className="nav-link" activeClassName="nav-link--active">
                 Explorer
-<<<<<<< HEAD
               </NavLink>
-=======
-              </a>
-              <Link to="/myopencre" className="nav-link">
+
+              <NavLink to="/myopencre" className="nav-link" activeClassName="nav-link--active">
                 MyOpenCRE
-              </Link>
->>>>>>> 9aa61b9 (feat(myopencre): add initial MyOpenCRE page and CSV template download)
+              </NavLink>
             </div>
 
             <div>
@@ -193,14 +190,16 @@ export const Header = () => {
             onClick={closeMobileMenu}
           >
             Explorer
-<<<<<<< HEAD
           </NavLink>
-=======
-          </a>
-          <a href="/myopencre" className="nav-link" onClick={MyOpenCRE}>
+
+          <NavLink
+            to="/myopencre"
+            className="nav-link"
+            activeClassName="nav-link--active"
+            onClick={closeMobileMenu}
+          >
             MyOpenCRE
-          </a>
->>>>>>> 9aa61b9 (feat(myopencre): add initial MyOpenCRE page and CSV template download)
+          </NavLink>
         </div>
 
         <div className="mobile-auth">