From ac84f3dada0ff5306a5ef2219c1b19eea828b1ad Mon Sep 17 00:00:00 2001
From: Cayden Decator <hdproduction010@gmail.com>
Date: Thu, 19 Feb 2026 13:42:31 -0500
Subject: [PATCH] edit UI to allow for CPA

(cherry picked from commit a225fe6f6a01d0f7c1f84a01b9cfe3e46113e613)
---
 src/views/admin/controllers/Edit.vue      | 36 +++++++++++++++++++++++
 src/views/controllers/Roster.vue          | 35 +++++++++++++++++-----
 src/views/instructor/controllers/Edit.vue | 33 +++++++++++++++++++++
 3 files changed, 96 insertions(+), 8 deletions(-)

diff --git a/src/views/admin/controllers/Edit.vue b/src/views/admin/controllers/Edit.vue
index 630369d..4774bf1 100644
--- a/src/views/admin/controllers/Edit.vue
+++ b/src/views/admin/controllers/Edit.vue
@@ -91,6 +91,33 @@
 							<p class="endorsement_category_explainer">Tier Two</p>
 						</div>
 					</div>
+					<div class="input-field col s7">
+						<div id="certs_container">
+							<span
+							  id="CPALocal"
+							  :class="{ active: form.certs.CPALocal }"
+							  class="cert cert_cpa"
+							  @click="toggleCert"
+							>Local Data</span>
+
+							<span
+							  id="CPATerminal"
+							  :class="{ active: form.certs.CPATerminal }"
+							  class="cert cert_cpa"
+							  @click="toggleCert"
+							>Terminal Data</span>
+
+							<span
+							  id="CPAEnroute"
+							  :class="{ active: form.certs.CPAEnroute }"
+							  class="cert cert_cpa"
+							  @click="toggleCert"
+							>Enroute Data</span>
+						</div>
+						<div id="tier_two_explainer">
+							<p class="endorsement_category_explainer">Combined Position Authority</p>
+						</div>
+					</div>
 					<div class="input-field col s12">
 						<label for="roles" class="active">Roles</label>
 						<div id="roles_container">
@@ -104,6 +131,7 @@
 							<span id="mtr" class="cert cert_training" :class="{active: form.roles.mtr}"  @click="toggleRole">MTR</span>
 							<span id="dta" class="cert cert_training" :class="{active: form.roles.dta}"  @click="toggleRole">DTA</span>
 							<span id="vis" class="cert cert_training" :class="{active: form.vis}"  @click="toggleVis">VIS</span>
+							<span id="cm" class="cert cert_training" :class="{active: form.roles.cm}" @click="toggleRole">CM</span>
 						</div>
 					</div>
 					<div class="input-field col s12">
@@ -142,6 +170,10 @@ export default {
 					wm: false,
 					ins: false,
 					mtr: false,
+					dta: false,
+					cpa: false,
+					cm: false,
+
 				},
 			}
 		};
@@ -258,6 +290,10 @@ export default {
 			background: $secondary-color-light;
 			color: #fff;
 		}
+		  &.cert_cpa {
+			background: #2e7d32;
+			color: #fff;
+		  }
 	}
 
 }
diff --git a/src/views/controllers/Roster.vue b/src/views/controllers/Roster.vue
index aed05c8..87af411 100644
--- a/src/views/controllers/Roster.vue
+++ b/src/views/controllers/Roster.vue
@@ -183,17 +183,31 @@ export default {
     },
     reduceControllerCerts(certs) {
       if (!certs) return [];
-      const hasCerts = certs.map((cert) => cert.code);
       let certsToShow = [];
-			certs.forEach(cert => {
-				if(cert.class === "tier-one" || cert.class === "tier-two") {
-					certsToShow.push(cert);
-				}
-			});
 
-      certsToShow = certsToShow.sort((a, b) => a.class.localeCompare(b.class, 'en', { numeric: true }) || a.order - b.order)
+      certs.forEach((cert) => {
+        const cls = String(cert.class || "").toLowerCase();
+        if (["tier-one", "tier-two", "cpa"].includes(cls)) {
+          certsToShow.push({ ...cert, class: cls });
+        }
+      });
+
+      const classPriority = {
+        "tier-one": 1,
+        "tier-two": 2,
+        "cpa": 3,
+      };
+
+      certsToShow = certsToShow.sort((a, b) => {
+        const ap = classPriority[a.class] ?? 99;
+        const bp = classPriority[b.class] ?? 99;
+        if (ap !== bp) return ap - bp;
+        return (a.order ?? 999) - (b.order ?? 999);
+      });
+
+
       return certsToShow;
-    },
+    }
   },
   computed: {
     ...mapState("user", ["user"]),
@@ -279,6 +293,11 @@ td {
 	&.cert_tier-two {
 		background: $secondary-color-light;
 	}
+  &.cert_cpa {
+    background: #2e7d32;
+    color: #fff;
+  }
+
 }
 
 .tooltipped {
diff --git a/src/views/instructor/controllers/Edit.vue b/src/views/instructor/controllers/Edit.vue
index 00efeed..721391d 100644
--- a/src/views/instructor/controllers/Edit.vue
+++ b/src/views/instructor/controllers/Edit.vue
@@ -87,6 +87,33 @@
 							<p class="endorsement_category_explainer">Tier Two</p>
 						</div>
 					</div>
+					<div class="input-field col s7">
+						<div id="certs_container">
+							<span
+							  id="CPALocal"
+							  :class="{ active: form.certs.CPALocal }"
+							  class="cert cert_cpa"
+							  @click="toggleCert"
+							>Local Data</span>
+
+							<span
+							  id="CPATerminal"
+							  :class="{ active: form.certs.CPATerminal }"
+							  class="cert cert_cpa"
+							  @click="toggleCert"
+							>Terminal Data</span>
+
+							<span
+							  id="CPAEnroute"
+							  :class="{ active: form.certs.CPAEnroute }"
+							  class="cert cert_cpa"
+							  @click="toggleCert"
+							>Enroute Data</span>
+						</div>
+						<div id="tier_two_explainer">
+							<p class="endorsement_category_explainer">Combined Position Authority</p>
+						</div>
+					</div>
 					<div class="input-field col s12">
 						<label for="roles" class="active">Roles</label>
 						<div id="roles_container">
@@ -99,6 +126,7 @@
 							<span id="ins" class="cert cert_training" :class="{active: form.roles.ins}">INS</span>
 							<span id="mtr" class="cert cert_training" :class="{active: form.roles.mtr}">MTR</span>
 							<span id="vis" class="cert cert_training" :class="{active: form.vis}">VIS</span>
+							<span id="cpa" class="cert cert_training" :class="{active: form.roles.cm}">CM</span>
 						</div>
 					</div>
 					<div class="input-field col s12">
@@ -137,6 +165,7 @@ export default {
 					wm: false,
 					ins: false,
 					mtr: false,
+					cm: false,
 				},
 			}
 		};
@@ -234,6 +263,10 @@ export default {
 			background: $secondary-color-light;
 			color: #fff;
 		}
+		  &.cert_cpa {
+			background: #2e7d32;
+			color: #fff;
+		  }
 	}
 
 }