[TGUI] Accounts Uplink Terminal (#14697)

* TGUI Accounts Uplink Terminal

* Mochi tweaks

code/modules/economy/Accounts.dm

@@ -87,8 +87,9 @@ GLOBAL_LIST_EMPTY(all_money_accounts)
 		R.name = "Account information: [M.owner_name]"
 
 		var/overseer = "Unknown"
-		if(source_db.held_card)
-			overseer = source_db.held_card.registered_name
+		var/datum/tgui_login/L = source_db.tgui_login_get()
+		if(L.id)
+			overseer = L.id.registered_name
 		R.info = {"<b>Account details (confidential)</b><br><hr><br>
 			<i>Account holder:</i> [M.owner_name]<br>
 			<i>Account number:</i> [M.account_number]<br>

code/modules/economy/Accounts_DB.dm

@@ -1,22 +1,30 @@
 GLOBAL_VAR(current_date_string)
 
+#define AUT_ACCLST 1
+#define AUT_ACCINF 2
+#define AUT_ACCNEW 3
+
 /obj/machinery/computer/account_database
 	name = "Accounts Uplink Terminal"
 	desc = "Access transaction logs, account data and all kinds of other financial records."
 	icon_screen = "accounts"
-	density = 1
 	req_one_access = list(ACCESS_HOP, ACCESS_CAPTAIN, ACCESS_CENT_COMMANDER)
+	light_color = LIGHT_COLOR_GREEN
 	var/receipt_num
 	var/machine_id = ""
-	var/obj/item/card/id/held_card
 	var/datum/money_account/detailed_account_view
-	var/creating_new_account = 0
-	var/activated = 1
+	var/activated = TRUE
 	var/const/fund_cap = 1000000
-
-	light_color = LIGHT_COLOR_GREEN
+	/// Current UI page
+	var/current_page = AUT_ACCLST
+	/// Next time a print can be made
+	var/next_print = 0
 
 /obj/machinery/computer/account_database/New()
+	// Why the fuck are these not in a subsystem? They are global variables for fucks sake
+	// If someone ever makes a map without one of these consoles, the entire eco AND date system breaks
+	// This upsets me a lot
+	// AA Todo: SSeconomy
 	if(!GLOB.station_account)
 		create_station_account()
 
@@ -33,230 +41,207 @@ GLOBAL_VAR(current_date_string)
 	machine_id = "[station_name()] Acc. DB #[GLOB.num_financial_terminals++]"
 	..()
 
-/obj/machinery/computer/account_database/proc/get_access_level(var/mob/user)
-	if(user.can_admin_interact())
-		return 2
-	if(!held_card)
-		return 0
-	if(ACCESS_CENT_COMMANDER in held_card.access)
-		return 2
-	else if((ACCESS_HOP in held_card.access) || (ACCESS_CAPTAIN in held_card.access))
-		return 1
-
 /obj/machinery/computer/account_database/proc/accounting_letterhead(report_name)
+	var/datum/tgui_login/L = tgui_login_get()
 	return {"
 		<center><h1><b>[report_name]</b></h1></center>
 		<center><small><i>[station_name()] Accounting Report</i></small></center>
+		<u>Generated By:</u> [L?.id?.registered_name ? L.id.registered_name : "Unknown"], [L?.id?.assignment ? L.id.assignment : "Unknown"]<br>
 		<hr>
-		<u>Generated By:</u> [held_card.registered_name], [held_card.assignment]<br>
 	"}
 
 /obj/machinery/computer/account_database/attackby(obj/O, mob/user, params)
-	if(!istype(O, /obj/item/card/id))
-		return ..()
+	if(tgui_login_attackby(O, user))
+		return
+	return ..()
 
-	if(!held_card)
-		user.drop_item()
-		O.loc = src
-		held_card = O
+/obj/machinery/computer/account_database/attack_hand(mob/user)
+	tgui_interact(user)
 
-		SSnanoui.update_uis(src)
-
-	attack_hand(user)
-
-/obj/machinery/computer/account_database/attack_hand(mob/user as mob)
-	ui_interact(user)
-
-/obj/machinery/computer/account_database/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	user.set_machine(src)
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, force_open)
+/obj/machinery/computer/account_database/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
-		ui = new(user, src, ui_key, "accounts_terminal.tmpl", src.name, 400, 640)
+		ui = new(user, src, ui_key, "AccountsUplinkTerminal", name, 800, 600, master_ui, state)
 		ui.open()
 
-/obj/machinery/computer/account_database/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
-	var/data[0]
+/obj/machinery/computer/account_database/tgui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
+	var/list/data = list()
+	data["currentPage"] = current_page
+	data["is_printing"] = (next_print > world.time)
+	tgui_login_data(data, user)
+	if(data["loginState"]["logged_in"])
+		switch(current_page)
+			if(AUT_ACCLST)
+				var/list/accounts = list()
+				for(var/i in 1 to length(GLOB.all_money_accounts))
+					var/datum/money_account/D = GLOB.all_money_accounts[i]
+					accounts.Add(list(list(
+						"account_number" = D.account_number,
+						"owner_name" = D.owner_name,
+						"suspended" = D.suspended ? "SUSPENDED" : "Active",
+						"account_index" = i)))
 
-	data["src"] = UID()
-	data["id_inserted"] = !!held_card
-	data["id_card"] = held_card ? text("[held_card.registered_name], [held_card.assignment]") : "-----"
-	data["access_level"] = get_access_level(user)
-	data["machine_id"] = machine_id
-	data["creating_new_account"] = creating_new_account
-	data["detailed_account_view"] = !!detailed_account_view
-	data["station_account_number"] = GLOB.station_account.account_number
-	data["transactions"] = null
-	data["accounts"] = null
+				data["accounts"] = accounts
 
-	if(detailed_account_view)
-		data["account_number"] = detailed_account_view.account_number
-		data["owner_name"] = detailed_account_view.owner_name
-		data["money"] = detailed_account_view.money
-		data["suspended"] = detailed_account_view.suspended
+			if(AUT_ACCINF)
+				data["account_number"] = detailed_account_view.account_number
+				data["owner_name"] = detailed_account_view.owner_name
+				data["money"] = detailed_account_view.money
+				data["suspended"] = detailed_account_view.suspended
 
-		var/list/trx[0]
-		for(var/datum/transaction/T in detailed_account_view.transaction_log)
-			trx.Add(list(list(\
-				"date" = T.date, \
-				"time" = T.time, \
-				"target_name" = T.target_name, \
-				"purpose" = T.purpose, \
-				"amount" = T.amount, \
-				"source_terminal" = T.source_terminal)))
-
-		if(trx.len > 0)
-			data["transactions"] = trx
-
-	var/list/accounts[0]
-	for(var/i=1, i<=GLOB.all_money_accounts.len, i++)
-		var/datum/money_account/D = GLOB.all_money_accounts[i]
-		accounts.Add(list(list(\
-			"account_number"=D.account_number,\
-			"owner_name"=D.owner_name,\
-			"suspended"=D.suspended ? "SUSPENDED" : "",\
-			"account_index"=i)))
-
-	if(accounts.len > 0)
-		data["accounts"] = accounts
+				var/list/transactions = list()
+				for(var/datum/transaction/T in detailed_account_view.transaction_log)
+					transactions.Add(list(list(
+						"date" = T.date,
+						"time" = T.time,
+						"target_name" = T.target_name,
+						"purpose" = T.purpose,
+						"amount" = T.amount,
+						"source_terminal" = T.source_terminal)))
 
+				data["transactions"] = transactions
 	return data
 
-/obj/machinery/computer/account_database/Topic(href, href_list)
+
+/obj/machinery/computer/account_database/tgui_act(action, list/params)
 	if(..())
-		return 1
+		return
 
-	if(href_list["insert_card"])
-		if(held_card)
-			held_card.forceMove(loc)
+	. = TRUE
 
-			if(ishuman(usr) && !usr.get_active_hand())
-				usr.put_in_hands(held_card)
-			held_card = null
+	if(tgui_login_act(action, params))
+		return
 
-		else
-			var/obj/item/I = usr.get_active_hand()
-			if(istype(I, /obj/item/card/id))
-				var/obj/item/card/id/C = I
-				usr.drop_item()
-				C.forceMove(src)
-				held_card = C
+	if(!tgui_login_get().logged_in)
+		return
 
-	if(!get_access_level(usr))
-		return 1
+	switch(action)
+		if("view_account_detail")
+			var/index = text2num(params["index"])
+			if(index && index > 0 && index <= length(GLOB.all_money_accounts))
+				detailed_account_view = GLOB.all_money_accounts[index]
+				current_page = AUT_ACCINF
 
-	var/datum/nanoui/ui = SSnanoui.get_open_ui(usr, src, "main")
+		if("back")
+			detailed_account_view = null
+			current_page = AUT_ACCLST
 
-	if(href_list["choice"])
-		switch(href_list["choice"])
-			if("create_account")
-				creating_new_account = 1
+		if("toggle_suspension")
+			if(detailed_account_view)
+				detailed_account_view.suspended = !detailed_account_view.suspended
 
-			if("toggle_suspension")
-				if(detailed_account_view)
-					detailed_account_view.suspended = !detailed_account_view.suspended
+		if("create_new_account")
+			current_page = AUT_ACCNEW
 
-			if("finalise_create_account")
-				var/account_name = href_list["holder_name"]
-				var/starting_funds = max(text2num(href_list["starting_funds"]), 0)
+		if("finalise_create_account")
+			var/account_name = params["holder_name"]
+			var/starting_funds = max(text2num(params["starting_funds"]), 0)
+			if(!account_name || !starting_funds)
+				return
 
-				starting_funds = clamp(starting_funds, 0, GLOB.station_account.money)	// Not authorized to put the station in debt.
-				starting_funds = min(starting_funds, fund_cap)						// Not authorized to give more than the fund cap.
+			starting_funds = clamp(starting_funds, 0, GLOB.station_account.money) // Not authorized to put the station in debt.
+			starting_funds = min(starting_funds, fund_cap) // Not authorized to give more than the fund cap.
 
-				var/datum/money_account/M = create_account(account_name, starting_funds, src)
-				if(starting_funds > 0)
-					GLOB.station_account.charge(starting_funds, null, "New account activation",
-					 "", "New account activation", M.owner_name)
+			var/datum/money_account/M = create_account(account_name, starting_funds, src)
+			if(starting_funds > 0)
+				GLOB.station_account.charge(starting_funds, null, "New account activation", "", "New account activation", M.owner_name)
 
-					creating_new_account = 0
-					ui.close()
+			current_page = AUT_ACCLST
 
-				creating_new_account = 0
 
-			if("view_account_detail")
-				var/index = text2num(href_list["account_index"])
-				if(index && index <= GLOB.all_money_accounts.len)
-					detailed_account_view = GLOB.all_money_accounts[index]
+		if("print_records")
+			// Anti spam measures
+			if(next_print > world.time)
+				to_chat(usr, "<span class='warning'>The printer is busy spooling. It will be ready in [(next_print - world.time) / 10] seconds.")
+				return
+			var/text
+			playsound(loc, 'sound/goonstation/machines/printer_thermal.ogg', 50, 1)
+			var/obj/item/paper/P = new(loc)
+			P.name = "financial account list"
+			text = {"
+				[accounting_letterhead("Financial Account List")]
 
-			if("view_accounts_list")
-				detailed_account_view = null
-				creating_new_account = 0
+				<table>
+					<thead>
+						<tr>
+							<td>Account Number</td>
+							<td>Holder</td>
+							<td>Balance</td>
+							<td>Status</td>
+						</tr>
+					</thead>
+					<tbody>
+			"}
 
-			if("print")
-				var/text
-				playsound(loc, 'sound/goonstation/machines/printer_thermal.ogg', 50, 1)
-				var/obj/item/paper/P = new(loc)
-				if(detailed_account_view)
-					P.name = "account #[detailed_account_view.account_number] details"
-					var/title = "Account #[detailed_account_view.account_number] Details"
-					text = {"
-						[accounting_letterhead(title)]
-						<u>Holder:</u> [detailed_account_view.owner_name]<br>
-						<u>Balance:</u> $[detailed_account_view.money]<br>
-						<u>Status:</u> [detailed_account_view.suspended ? "Suspended" : "Active"]<br>
-						<u>Transactions:</u> ([detailed_account_view.transaction_log.len])<br>
-						<table>
-							<thead>
-								<tr>
-									<td>Timestamp</td>
-									<td>Target</td>
-									<td>Reason</td>
-									<td>Value</td>
-									<td>Terminal</td>
-								</tr>
-							</thead>
-							<tbody>
-						"}
+			for(var/i in 1 to length(GLOB.all_money_accounts))
+				var/datum/money_account/D = GLOB.all_money_accounts[i]
+				text += {"
+						<tr>
+							<td>#[D.account_number]</td>
+							<td>[D.owner_name]</td>
+							<td>$[D.money]</td>
+							<td>[D.suspended ? "Suspended" : "Active"]</td>
+						</tr>
+				"}
 
-					for(var/datum/transaction/T in detailed_account_view.transaction_log)
-						text += {"
-									<tr>
-										<td>[T.date] [T.time]</td>
-										<td>[T.target_name]</td>
-										<td>[T.purpose]</td>
-										<td>[T.amount]</td>
-										<td>[T.source_terminal]</td>
-									</tr>
-							"}
+			text += {"
+					</tbody>
+				</table>
+			"}
 
-					text += {"
-							</tbody>
-						</table>
-						"}
+			P.info = text
+			visible_message("<span class='notice'>[src] prints out a report.</span>")
+			next_print = world.time + 30 SECONDS
 
-				else
-					P.name = "financial account list"
-					text = {"
-						[accounting_letterhead("Financial Account List")]
+		if("print_account_details")
+			// Anti spam measures
+			if(next_print > world.time)
+				to_chat(usr, "<span class='warning'>The printer is busy spooling. It will be ready in [(next_print - world.time) / 10] seconds.")
+				return
+			var/text
+			playsound(loc, 'sound/goonstation/machines/printer_thermal.ogg', 50, 1)
+			var/obj/item/paper/P = new(loc)
+			P.name = "account #[detailed_account_view.account_number] details"
+			var/title = "Account #[detailed_account_view.account_number] Details"
+			text = {"
+				[accounting_letterhead(title)]
+				<u>Holder:</u> [detailed_account_view.owner_name]<br>
+				<u>Balance:</u> $[detailed_account_view.money]<br>
+				<u>Status:</u> [detailed_account_view.suspended ? "Suspended" : "Active"]<br>
+				<u>Transactions:</u> ([detailed_account_view.transaction_log.len])<br>
+				<table>
+					<thead>
+						<tr>
+							<td>Timestamp</td>
+							<td>Target</td>
+							<td>Reason</td>
+							<td>Value</td>
+							<td>Terminal</td>
+						</tr>
+					</thead>
+					<tbody>
+				"}
 
-						<table>
-							<thead>
-								<tr>
-									<td>Account Number</td>
-									<td>Holder</td>
-									<td>Balance</td>
-									<td>Status</td>
-								</tr>
-							</thead>
-							<tbody>
+			for(var/datum/transaction/T in detailed_account_view.transaction_log)
+				text += {"
+							<tr>
+								<td>[T.date] [T.time]</td>
+								<td>[T.target_name]</td>
+								<td>[T.purpose]</td>
+								<td>[T.amount]</td>
+								<td>[T.source_terminal]</td>
+							</tr>
 					"}
 
-					for(var/i=1, i<=GLOB.all_money_accounts.len, i++)
-						var/datum/money_account/D = GLOB.all_money_accounts[i]
-						text += {"
-								<tr>
-									<td>#[D.account_number]</td>
-									<td>[D.owner_name]</td>
-									<td>$[D.money]</td>
-									<td>[D.suspended ? "Suspended" : "Active"]</td>
-								</tr>
-						"}
+			text += {"
+					</tbody>
+				</table>
+				"}
 
-					text += {"
-							</tbody>
-						</table>
-					"}
+			P.info = text
+			visible_message("<span class='notice'>[src] prints out a report.</span>")
+			next_print = world.time + 30 SECONDS
 
-				P.info = text
-				visible_message("<span class='notice'>[src] prints out a report.</span>")
-
-	return 1
+#undef AUT_ACCLST
+#undef AUT_ACCINF
+#undef AUT_ACCNEW

nano/templates/accounts_terminal.tmpl

@@ -1,146 +0,0 @@
-<div class="item">
-  <div class="itemLabelNarrow">
-    <b>Machine</b>:
-  </div>
-  <div class="itemContent">
-    <span class="average">{{:data.machine_id}}</span>
-  </div>
-</div>
-<div class="item">
-  <div class="itemLabelNarrow">
-    <b>ID</b>:
-  </div>
-  <div class="itemContent">
-    {{:helper.link(data.id_card, 'eject', {'insert_card' : 1}, null, data.id_inserted ? 'fixedLeftWidest' : 'fixedLeft')}}
-  </div>
-</div>
-
-{{if data.access_level > 0}}
-  <div class='item'>
-    <h2>Menu</h2>
-  </div>
-  {{:helper.link('Home', 'home', {'choice' : 'view_accounts_list'}, !data.creating_new_account && !data.detailed_account_view ? 'disabled' : null, 'fixedLeft')}}
-  {{:helper.link('New Account', 'gear', {'choice' : 'create_account'}, data.creating_new_account ? 'disabled' : null, 'fixedLeft')}}
-  {{:helper.link('Print', 'print', {'choice' : 'print'}, data.creating_new_account ? 'disabled' : null, 'fixedLeft')}}
-
-   {{if data.creating_new_account}}
-    <div class='item'>
-      <h2>Create Account</h2>
-    </div>
-
-    <form name='create_account' action='?src={{:data.src}}' method='get'>
-      <input type='hidden' name='src' value='{{:data.src}}'>
-      <input type='hidden' name='choice' value='finalise_create_account'>
-      <div class='item'>
-        <div class='itemLabel'>
-          <b>Account Holder</b>:
-        </div>
-        <div class='itemContent'>
-          <input type='text' id='holder_name' name='holder_name'>
-        </div>
-      </div>
-      <div class='item'>
-        <div class='itemLabel'>
-          <b>Initial Deposit</b>:
-        </div>
-        <div class='itemContent'>
-          <input type='text' id='starting_funds' name='starting_funds'>
-        </div>
-      </div>
-      <div class='item'>
-        <input type='submit' value='Create'>
-      </div>
-    </form>
-  {{else data.detailed_account_view}}  
-    <div class='item'>
-      <h2>Account Details</h2>
-    </div>
-
-    <div class='item'>
-      <div class="itemLabel">
-        <span class='average'><b>Account Number</b>:</span>
-      </div>
-      <div class="itemContent">
-        #{{:data.account_number}}
-      </div>
-    </div>
-
-    <div class='item'>
-      <div class="itemLabel">
-        <span class='average'><b>Holder</b>:</span>
-      </div>
-      <div class="itemContent">
-        {{:data.owner_name}}
-      </div>
-    </div>
-
-    <div class='item'>
-      <div class="itemLabel">
-        <span class='average'><b>Balance</b>:</span>
-      </div>
-      <div class="itemContent">
-        ${{:helper.formatNumber(data.money)}}
-      </div>
-    </div>
-
-    <div class='item'>
-      <div class="itemLabel">
-        <span class='average'><b>Status</b>:</span>
-      </div>
-      <div class="itemContent">
-        <span class='{{:data.suspended ? "bad" : "good"}}'>
-          {{:data.suspended ? "Suspended" : "Active"}}
-        </span>
-      </div>
-    </div>
-    <div class='item'>
-      {{:helper.link(data.suspended ? "Unsuspend" : "Suspend", 'gear', {'choice' : 'toggle_suspension'})}}
-    </div>
-
-    <div class="statusDisplay" style="overflow: auto;">
-      {{if data.transactions}}
-      <table style='width: 100%'>
-        <thead>
-          <tr>
-            <th><b>Timestamp</b></th>
-            <th><b>Target</b></th>
-            <th><b>Reason</b></th>
-            <th><b>Value</b></th>
-            <th><b>Terminal</b></th>
-          </th>
-        </thead>
-        <tbody>
-            {{for data.transactions}}
-              <tr>
-                  <td>{{:value.date}} {{:value.time}}</td>
-                  <td>{{:value.target_name}}</td>
-                  <td>{{:value.purpose}}</td>
-                  <td>{{:value.amount}}</td>
-                  <td>{{:value.source_terminal}}</td>
-              </tr>
-            {{/for}}
-        </tbody>
-      </table>
-      {{else}}
-        <span class='exclamation-triangle'>This account has no financial transactions on record for today.</span>
-      {{/if}}
-    </div>
-  {{else}}
-    <div class='item'>
-      <h2>Nanotrasen Accounts</h2>
-    </div>
-    {{if data.accounts}}
-      <table style="width: 100%">
-        {{for data.accounts}}
-          <tr class='{{:value.suspended ? "bad" : ""}}'>
-            <td><b>{{:helper.link('#' + value.account_number, '', {'choice' : 'view_account_detail', 'account_index' : value.account_index})}}</b></td>
-            <td>{{:value.owner_name}}</td>
-            <td>{{:value.suspended}}</td>
-          </tr>
-        {{/for}}
-      </table>
-    {{else}}
-      <span class='exclamation-triangle'>There are no accounts available.</span>
-    {{/if}}
-  {{/if}}
-{{/if}}

tgui/packages/tgui/interfaces/AccountsUplinkTerminal.js

@@ -0,0 +1,288 @@
+import { createSearch, decodeHtmlEntities } from 'common/string';
+import { Fragment } from 'inferno';
+import { useBackend, useLocalState } from "../backend";
+import { Box, Button, Flex, Icon, Input, LabeledList, NumberInput, Section, Table, Tabs } from '../components';
+import { FlexItem } from '../components/Flex';
+import { Window } from "../layouts";
+import { ComplexModal, modalOpen } from './common/ComplexModal';
+import { LoginInfo } from './common/LoginInfo';
+import { LoginScreen } from './common/LoginScreen';
+import { TemporaryNotice } from './common/TemporaryNotice';
+
+export const AccountsUplinkTerminal = (properties, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    loginState,
+    currentPage,
+  } = data;
+
+  let body;
+  if (!loginState.logged_in) {
+    return (
+      <Window resizable>
+        <Window.Content>
+          <LoginScreen />
+        </Window.Content>
+      </Window>
+    );
+  } else {
+    if (currentPage === 1) {
+      body = <AccountsRecordList />;
+    } else if (currentPage === 2) {
+      body = <DetailedAccountInfo />;
+    } else if (currentPage === 3) {
+      body = <CreateAccount />;
+    }
+  }
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <LoginInfo />
+        {body}
+      </Window.Content>
+    </Window>
+  );
+};
+
+const AccountsRecordList = (properties, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    accounts,
+  } = data;
+  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
+  const [sortId, _setSortId] = useLocalState(context, "sortId", "owner_name");
+  const [sortOrder, _setSortOrder] = useLocalState(context, "sortOrder", true);
+  return (
+    <Flex direction="column" height="100%">
+      <AccountsActions />
+      <Flex.Item flexGrow="1" mt="0.5rem">
+        <Section height="100%">
+          <Table className="AccountsUplinkTerminal__list">
+            <Table.Row bold>
+              <SortButton id="owner_name">Account Holder</SortButton>
+              <SortButton id="account_number">Account Number</SortButton>
+              <SortButton id="suspended">Account Status</SortButton>
+            </Table.Row>
+            {accounts
+              .filter(createSearch(searchText, account => {
+                return account.owner_name + "|"
+                        + account.account_number + "|"
+                        + account.suspended;
+              }))
+              .sort((a, b) => {
+                const i = sortOrder ? 1 : -1;
+                return a[sortId].localeCompare(b[sortId]) * i;
+              })
+              .map(account => (
+                <Table.Row
+                  key={account.id}
+                  onClick={
+                    () => act('view_account_detail', { index: account.account_index })
+                  }>
+                  <Table.Cell><Icon name="user" /> {account.owner_name}</Table.Cell>
+                  <Table.Cell>#{account.account_number}</Table.Cell>
+                  <Table.Cell>{account.suspended}</Table.Cell>
+                </Table.Row>
+              ))}
+          </Table>
+        </Section>
+      </Flex.Item>
+    </Flex>
+  );
+};
+
+const SortButton = (properties, context) => {
+  const [sortId, setSortId] = useLocalState(context, "sortId", "name");
+  const [sortOrder, setSortOrder] = useLocalState(context, "sortOrder", true);
+  const {
+    id,
+    children,
+  } = properties;
+  return (
+    <Table.Cell>
+      <Button
+        color={sortId !== id && "transparent"}
+        width="100%"
+        onClick={() => {
+          if (sortId === id) {
+            setSortOrder(!sortOrder);
+          } else {
+            setSortId(id);
+            setSortOrder(true);
+          }
+        }}>
+        {children}
+        {sortId === id && (
+          <Icon
+            name={sortOrder ? "sort-up" : "sort-down"}
+            ml="0.25rem;"
+          />
+        )}
+      </Button>
+    </Table.Cell>
+  );
+};
+
+const AccountsActions = (properties, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    is_printing,
+  } = data;
+  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
+  return (
+    <Flex>
+      <FlexItem>
+        <Button
+          content="New Account"
+          icon="plus"
+          onClick={() => act('create_new_account')}
+        />
+        <Button
+          icon="print"
+          content="Print Account List"
+          disabled={is_printing}
+          ml="0.25rem"
+          onClick={() => act('print_records')}
+        />
+      </FlexItem>
+      <FlexItem grow="1" ml="0.5rem">
+        <Input
+          placeholder="Search by account holder, number, status"
+          width="100%"
+          onInput={(e, value) => setSearchText(value)}
+        />
+      </FlexItem>
+    </Flex>
+  );
+};
+
+const DetailedAccountInfo = (properties, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    is_printing,
+    account_number,
+    owner_name,
+    money,
+    suspended,
+    transactions,
+  } = data;
+  return (
+    <Fragment>
+      <Section title={"#" + account_number + " / " + owner_name} mt={1} buttons={
+        <Fragment>
+          <Button
+            icon="print"
+            content="Print Account Details"
+            disabled={is_printing}
+            onClick={
+              () => act('print_account_details')
+            } />
+          <Button
+            icon="arrow-left"
+            content="Back"
+            onClick={
+              () => act('back')
+            } />
+        </Fragment>
+      }>
+        <LabeledList>
+          <LabeledList.Item label="Account Number">
+            #{account_number}
+          </LabeledList.Item>
+          <LabeledList.Item label="Account Holder">
+            {owner_name}
+          </LabeledList.Item>
+          <LabeledList.Item label="Account Balnce">
+            {money}
+          </LabeledList.Item>
+          <LabeledList.Item label="Account Status" color={suspended ? "red" : "green"}>
+            {suspended ? "Suspended" : "Active"}
+            <Button
+              ml={1}
+              content={suspended ? "Unsuspend" : "Suspend"}
+              icon={suspended ? "unlock" : "lock"}
+              onClick={
+                () => act('toggle_suspension')
+              }
+            />
+          </LabeledList.Item>
+        </LabeledList>
+      </Section>
+      <Section title="Transactions">
+        <Table>
+          <Table.Row header>
+            <Table.Cell>
+              Timestamp
+            </Table.Cell>
+            <Table.Cell>
+              Target
+            </Table.Cell>
+            <Table.Cell>
+              Reason
+            </Table.Cell>
+            <Table.Cell>
+              Value
+            </Table.Cell>
+            <Table.Cell>
+              Terminal
+            </Table.Cell>
+          </Table.Row>
+          {transactions.map(t => (
+            <Table.Row key={t}>
+              <Table.Cell>
+                {t.date} {t.time}
+              </Table.Cell>
+              <Table.Cell>
+                {t.target_name}
+              </Table.Cell>
+              <Table.Cell>
+                {t.purpose}
+              </Table.Cell>
+              <Table.Cell>
+                {t.amount}
+              </Table.Cell>
+              <Table.Cell>
+                {t.source_terminal}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table>
+      </Section>
+    </Fragment>
+  );
+};
+
+
+const CreateAccount = (properties, context) => {
+  const { act, data } = useBackend(context);
+  const [accName, setAccName] = useLocalState(context, 'accName', '');
+  const [accDeposit, setAccDeposit] = useLocalState(context, 'accDeposit', '');
+  return (
+    <Section title="Create Account" buttons={
+      <Button
+        icon="arrow-left"
+        content="Back"
+        onClick={
+          () => act('back')
+        } />
+    }>
+      <LabeledList>
+        <LabeledList.Item label="Account Holder">
+          <Input placeholder="Name Here" onChange={(e, value) => setAccName(value)} />
+        </LabeledList.Item>
+        <LabeledList.Item label="Initial Deposit">
+          <Input placeholder="0" onChange={(e, value) => setAccDeposit(value)} />
+        </LabeledList.Item>
+      </LabeledList>
+      <Button
+        mt={1}
+        fluid
+        content="Create Account"
+        onClick={
+          () => act('finalise_create_account', { holder_name: accName, starting_funds: accDeposit })
+        }
+      />
+    </Section>
+  );
+};

tgui/packages/tgui/styles/interfaces/AccountsUplinkTerminal.scss

@@ -0,0 +1,20 @@
+@use '../base.scss';
+@use '../colors.scss';
+@use '../functions.scss' as *;
+
+.AccountsUplinkTerminal__list {
+  tr > td {
+    text-align: center;
+  }
+
+  tr:not(:first-child) {
+    height: 24px;
+    line-height: 24px;
+    cursor: pointer;
+
+    transition: background-color 50ms;
+    &:hover, &:focus {
+      background-color: rgba(base.$color-bg, 1);
+    }
+  }
+}

tgui/packages/tgui/styles/main.scss

@@ -39,6 +39,7 @@
 @include meta.load-css('./components/Tooltip.scss');
 
 // Interfaces
+@include meta.load-css('./interfaces/AccountsUplinkTerminal.scss');
 @include meta.load-css('./interfaces/BrigCells.scss');
 @include meta.load-css('./interfaces/CameraConsole.scss');
 @include meta.load-css('./interfaces/NuclearBomb.scss');