feat: Localization in NUI

client/keys.lua

@@ -146,6 +146,7 @@ function OpenMDT()
 
     MDTOpen = true
 
+    SendNUI('setLocale', { locale = Config.Locale })
     SendNUI('setVisible', { visible = true, debugMode = Config.Debug })
 
     if isCivilian then

config.lua

@@ -4,6 +4,7 @@ ps = exports.ps_lib:init()
 -- Basic Settings
 Config.Debug = false -- Enable/disable debug mode (boolean)
 Config.OnlyShowOnDuty = true -- Only allow the MDT to be opened when on duty (boolean)
+Config.Locale = "en"
 
 -- Civilian Access Settings
 Config.CivilianAccess = {

web/src/App.svelte

@@ -8,6 +8,7 @@
 	import { queryClient } from "./utils/query-client";
 	import { onMount } from "svelte";
 	import { setupInputDebug } from "./utils/debugInputBlocker";
+	import { setLocale } from "./utils/localization.svelte";
 
 	let cleanupInputDebug: (() => void) | undefined;
 	let showComplaintForm = $state(false);
@@ -16,12 +17,16 @@
 		if (import.meta.env && import.meta.env.DEV) {
 			cleanupInputDebug = setupInputDebug();
 		}
+		setLocale();
 
 		// Listen for complaint form trigger (outside VisibilityProvider so it works for civilians)
 		const handleMessage = (event: MessageEvent) => {
 			if (event.data?.action === 'showComplaintForm') {
 				showComplaintForm = true;
 			}
+			if (event.data?.action === 'setLocale') {
+				setLocale(event.data.data.locale);
+			}
 		};
 		window.addEventListener('message', handleMessage);
 

web/src/components/ChargeType.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { _L, getLocalizedCurrency } from "@/utils/localization.svelte";
 	import type { Charge } from "./../interfaces/ICharges";
 
 	interface Props {
@@ -114,7 +115,7 @@
 	}
 
 	function formatFine(value: number): string {
-		return `$${value.toLocaleString()}`;
+		return getLocalizedCurrency(value);
 	}
 
 	function formatTime(value: number): string {
@@ -139,11 +140,11 @@
 			<div class="category-group">
 				<div class="category-label">{category}</div>
 				<div class="table-header">
-					<span class="col-code">Code</span>
-					<span class="col-label">Charge</span>
-					<span class="col-desc">Description</span>
-					<span class="col-fine">Fine</span>
-					<span class="col-time">Time</span>
+					<span class="col-code">{_L("charges.code")}</span>
+					<span class="col-label">{_L("charges.charge")}</span>
+					<span class="col-desc">{_L("charges.description")}</span>
+					<span class="col-fine">{_L("charges.fine")}</span>
+					<span class="col-time">{_L("charges.time")}</span>
 					{#if isEditing}
 						<span class="col-actions"></span>
 					{/if}
@@ -193,14 +194,14 @@
 									onclick={() => saveEdit(charge)}
 									disabled={isSaving}
 								>
-									{isSaving ? "..." : "Save"}
+									{isSaving ? "..." : _L("charges.save")}
 								</button>
 								<button
 									class="btn-cancel"
 									onclick={cancelEdit}
 									disabled={isSaving}
 								>
-									Cancel
+									{_L("charges.cancel")}
 								</button>
 							</span>
 						</div>

web/src/components/ContentArea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import { PLACEHOLDER_COMPONENTS, type ComponentId } from "../constants";
+	import { PLACEHOLDER_COMPONENTS, type ComponentId } from "../constants/index.svelte";
 	import type { AuthService } from "../services/authService.svelte";
 	import { fetchNui } from "../utils/fetchNui";
 	import { NUI_EVENTS } from "../constants/nuiEvents";
@@ -35,6 +35,7 @@
 	import LegalDocuments from "../pages/doj/LegalDocuments.svelte";
 	import type { createInstanceStateService } from "../services/instanceStateService.svelte";
 	import type { createTabService } from "../services/tabService.svelte";
+	import { _L } from "@/utils/localization.svelte";
 
 	interface Props {
 		authService: AuthService;
@@ -171,14 +172,13 @@
 			<div class="denied-overlay">
 				<div class="denied-card">
 					<span class="material-icons denied-icon">lock</span>
-					<span class="denied-title">Permission Denied</span>
+					<span class="denied-title">{_L("contentArea.permissionDenied")}</span>
 					<span class="denied-desc">
-						You do not have permission to access <strong>{getPageLabel(activeComponent)}</strong>.
-						Contact a supervisor to request access.
+						{_L("contentArea.permissionDeniedDesc", ["page", getPageLabel(activeComponent)])}
 					</span>
 					<button class="denied-btn" onclick={() => tabService.setActiveTab("Dashboard")}>
 						<span class="material-icons denied-btn-icon">arrow_back</span>
-						Back to Dashboard
+						{_L("contentArea.backToDashboard")}
 					</button>
 				</div>
 			</div>
@@ -242,7 +242,7 @@
 		{:else}
 			<PlaceholderContent
 				componentId={activeComponent}
-				message="Component not found"
+				message={_L("contentArea.componentNotFound")}
 			/>
 		{/if}
 		{/if}

web/src/components/EvidenceManager.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { EVIDENCE_TYPES } from "../constants";
+	import { _L } from "@/utils/localization.svelte";
+	import { EVIDENCE_TYPES } from "../constants/index.svelte";
 	import type { Report, Evidence } from "../interfaces/IReportEditor";
 
 	export let report: Report;
@@ -67,15 +68,15 @@
 
 <section class="evidence-manager" aria-label="Evidence management">
 	<div class="evidence-header">
-		<h3 class="section-title">Evidence ({report.evidence.length})</h3>
+		<h3 class="section-title">_L("evidence.title") ({report.evidence.length})</h3>
 		<button
 			type="button"
 			on:click={toggleEvidenceForm}
 			class="add-evidence-btn"
 			aria-expanded={showEvidenceForm}
 			aria-controls="evidence-form"
 		>
-			{showEvidenceForm ? "Cancel" : "Add Evidence"}
+			{showEvidenceForm ? _L("evidence.cancel") : _L("evidence.addEvidence")}
 		</button>
 	</div>
 
@@ -90,7 +91,7 @@
 			<div class="form-row">
 				<div class="form-field">
 					<label for="evidence-title" class="form-label"
-						>Title *</label
+						>_L("evidence.title") *</label
 					>
 					<input
 						id="evidence-title"
@@ -101,34 +102,34 @@
 						aria-describedby="evidence-title-help"
 					/>
 					<div id="evidence-title-help" class="sr-only">
-						Enter a descriptive title for the evidence
+						_L("evidence.titleHelp")
 					</div>
 				</div>
 
 				<div class="form-field">
-					<label for="evidence-type" class="form-label">Type *</label>
+					<label for="evidence-type" class="form-label">_L("evidence.type") *</label>
 					<select
 						id="evidence-type"
 						bind:value={newEvidence.type}
 						class="form-select"
 						required
 						aria-describedby="evidence-type-help"
 					>
-						<option value="">Select type...</option>
+						<option value="">_L("evidence.selectType")</option>
 						{#each EVIDENCE_TYPES as type}
 							<option value={type}>{type}</option>
 						{/each}
 					</select>
 					<div id="evidence-type-help" class="sr-only">
-						Select the type of evidence
+						_L("evidence.typeHelp")
 					</div>
 				</div>
 			</div>
 
 			<div class="form-row">
 				<div class="form-field">
 					<label for="evidence-serial" class="form-label"
-						>Serial Number</label
+						>_L("evidence.serial")</label
 					>
 					<input
 						id="evidence-serial"
@@ -138,13 +139,13 @@
 						aria-describedby="evidence-serial-help"
 					/>
 					<div id="evidence-serial-help" class="sr-only">
-						Enter serial number if applicable
+						_L("evidence.serialHelp")
 					</div>
 				</div>
 			</div>
 
 			<div class="form-field">
-				<label for="evidence-notes" class="form-label">Notes</label>
+				<label for="evidence-notes" class="form-label">_L("evidence.notes")</label>
 				<textarea
 					id="evidence-notes"
 					bind:value={newEvidence.notes}
@@ -153,7 +154,7 @@
 					aria-describedby="evidence-notes-help"
 				></textarea>
 				<div id="evidence-notes-help" class="sr-only">
-					Additional notes about the evidence
+					_L("evidence.notesHelp")
 				</div>
 			</div>
 
@@ -164,20 +165,20 @@
 					class="save-btn"
 					aria-describedby="save-btn-help"
 				>
-					{editingEvidence ? "Update Evidence" : "Add Evidence"}
+					{editingEvidence ? _L("evidence.updateEvidence") : _L("evidence.addEvidence")}
 				</button>
 				<button
 					type="button"
 					on:click={toggleEvidenceForm}
 					class="cancel-btn"
 				>
-					Cancel
+					_L("evidence.cancel")
 				</button>
 			</div>
 			<div id="save-btn-help" class="sr-only">
 				{formValid
-					? "Form is valid and ready to submit"
-					: "Please fill in required fields"}
+					? _L("evidence.saveBtnHelp")
+					: _L("evidence.requiredFields")}
 			</div>
 		</form>
 	{/if}
@@ -196,7 +197,7 @@
 
 						{#if evidence.serial}
 							<div class="evidence-detail">
-								<span class="detail-label">Serial:</span>
+								<span class="detail-label">_L("evidence.serial")</span>
 								<span class="detail-value"
 									>{evidence.serial}</span
 								>
@@ -205,7 +206,7 @@
 
 						{#if evidence.notes}
 							<div class="evidence-detail">
-								<span class="detail-label">Notes:</span>
+								<span class="detail-label">_L("evidence.notes")</span>
 								<span class="detail-value"
 									>{evidence.notes}</span
 								>
@@ -219,7 +220,7 @@
 								aria-label="Evidence images"
 							>
 								<h5 class="images-title">
-									Images ({evidence.images.length})
+									{_L("evidence.images", ["count", evidence.images.length])}
 								</h5>
 								<div class="images-grid">
 									{#each evidence.images as image, imageIndex}
@@ -257,22 +258,22 @@
 							class="edit-btn"
 							aria-label="Edit evidence: {evidence.title}"
 						>
-							Edit
+							_L("evidence.editEvidence")
 						</button>
 						<button
 							type="button"
 							on:click={() => removeEvidence(evidence.id)}
 							class="remove-btn"
 							aria-label="Remove evidence: {evidence.title}"
 						>
-							Remove
+							_L("evidence.removeEvidence")
 						</button>
 					</div>
 				</article>
 			{/each}
 		</div>
 	{:else}
-		<p class="no-evidence">No evidence added</p>
+		<p class="no-evidence">_L("evidence.noEvidence")</p>
 	{/if}
 </section>
 

web/src/components/InstanceTabButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { ComponentId, MDTTab } from "../constants";
-	import { MDT_TABS } from "../constants";
+	import type { ComponentId, MDTTab } from "../constants/index.svelte";
+	import { getMDTTabs } from "../constants/index.svelte";
 	import type { TabInstance } from "../services/tabService.svelte.ts";
 
 	interface Props {
@@ -14,7 +14,7 @@
 		$props();
 
 	let tabIcon = $derived(
-		MDT_TABS.find((t) => t.name === instance.currentTab)?.icon || "tab",
+		getMDTTabs().find((t) => t.name === instance.currentTab)?.icon || "tab",
 	);
 
 	function handleInstanceClick(): void {
@@ -35,6 +35,10 @@
 			onInstanceClose(instance.id, syntheticEvent);
 		}
 	}
+
+	function getTabLabel(tabName: MDTTab): string {
+		return getMDTTabs().find((t) => t.name === tabName)?.label || tabName;
+	}
 </script>
 
 <div class="instance-tab-container">
@@ -45,7 +49,7 @@
 		aria-label="Switch to {instance.currentTab}"
 	>
 		<span class="tab-icon material-icons">{tabIcon}</span>
-		<span class="tab-name">{instance.currentTab}</span>
+		<span class="tab-name">{getTabLabel(instance.currentTab)}</span>
 		{#if showCloseButton}
 			<span
 				class="close-btn"

web/src/components/InstanceTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComponentId, MDTTab } from "../constants";
+	import type { ComponentId, MDTTab } from "../constants/index.svelte";
 	import InstanceTabButton from "./InstanceTabButton.svelte";
 	import type {
 		TabInstance,