Interface implemented and basic funcs working.

monkestation/code/modules/cassettes/cassette_approval.dm

@@ -149,6 +149,7 @@ GLOBAL_LIST_INIT(cassette_reviews, list())
 /datum/review_cassettes
 	var/client/holder //client of whoever is using this datum
 	var/is_funmin = FALSE
+
 /datum/review_cassettes/New(user)//user can either be a client or a mob due to byondcode(tm)
 	if (istype(user, /client))
 		var/client/user_client = user
@@ -158,24 +159,48 @@ GLOBAL_LIST_INIT(cassette_reviews, list())
 		holder = user_mob.client //if its a mob, assign the mob's client to holder
 
 	is_funmin = check_rights(R_FUN)
+/datum/review_cassettes/ui_state(mob/user)
+	return GLOB.admin_state
 
 /datum/review_cassettes/ui_close()// Don't leave orphaned datums laying around. Hopefully this handles timeouts?
 	qdel(src)
 
 /datum/review_cassettes/ui_interact(mob/user, datum/tgui/ui) // Open UI and update as it remains open.
+	. = ..()
 	if(is_funmin)
 		ui = SStgui.try_update_ui(user, src, ui)
 		if(!ui)
 			ui = new(user, src, "CassetteManager")
 			ui.open()
 
 /datum/review_cassettes/ui_data(mob/user)
-	var/list/data = list()
+	. = ..()
+	var/list/data = list("cassettes" = list()) // Initialize main data structure with an empty "cassettes" list
 
-	if(!GLOB.cassette_reviews || !GLOB.cassette_reviews.len)
+	if(isnull(GLOB.cassette_reviews) || !GLOB.cassette_reviews.len)
 		return data
 
-/datum/secrets_menu/ui_act(action, params)
+	for(var/cassette_id in GLOB.cassette_reviews)
+		var/datum/cassette_review/cassette = GLOB.cassette_reviews[cassette_id]
+		var/submitters_name = cassette.submitter
+		var/obj/item/tape_obj = cassette.submitted_tape
+		var/reviewed = cassette.action_taken
+
+// Add this cassette's data under its cassette_id
+		data["cassettes"][cassette_id] = list(
+			"submitter_name" = submitters_name,
+			"tape_name" = tape_obj.name,
+			"reviewed" = reviewed
+		)
+	return data
+
+/datum/review_cassettes/ui_act(action, params)
 	. = ..()
 	if(.)
 		return
+	if(isnull(GLOB.cassette_reviews) || !GLOB.cassette_reviews[action])
+		return
+
+	var/datum/cassette_review/cassette = GLOB.cassette_reviews[action]
+	cassette.ui_interact(usr)
+

tgui/packages/tgui/interfaces/CassetteManager.jsx

@@ -0,0 +1,49 @@
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+import { Section, Table, Button } from '../components';
+
+export const CassetteManager = (props) => {
+  const { act, data } = useBackend();
+  const { cassettes } = data;
+
+  return (
+    <Window width={600} height={313}>
+      <Window.Content>
+        <Section title="Cassette Manager">
+          {cassettes && Object.keys(cassettes).length > 0 ? (
+            <Table>
+              <Table.Row header>
+                <Table.Cell>Cassette ID</Table.Cell>
+                <Table.Cell>Submitter</Table.Cell>
+                <Table.Cell>Title</Table.Cell>
+                <Table.Cell>Reviewed</Table.Cell>
+                <Table.Cell>Action</Table.Cell>
+              </Table.Row>
+              {Object.entries(cassettes || {}).map(
+                ([cassetteId, cassetteData]) => (
+                  <Table.Row key={cassetteId}>
+                    <Table.Cell>{cassetteId}</Table.Cell>
+                    <Table.Cell>
+                      {cassetteData.submitter_name || 'Unknown'}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {cassetteData.tape_name || 'Untitled'}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {cassetteData.reviewed ? 'Yes' : 'No'}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Button onClick={() => act(cassetteId)}>Review</Button>
+                    </Table.Cell>
+                  </Table.Row>
+                ),
+              )}
+            </Table>
+          ) : (
+            <b>Nothing to review. The Jam&apos;s must flow.</b>
+          )}
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};