From 14b627481f1847b6ab86808b2676173feb99d56d Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 13:44:44 +0200
Subject: [PATCH 001/144] adding config.lua

- Config.Weapons is new. ( Which Weapons should be allowed to be registered manually )
---
 config.lua | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/config.lua b/config.lua
index 9978e0a8..1850829e 100644
--- a/config.lua
+++ b/config.lua
@@ -218,6 +218,7 @@ Config.ManagementPermissions = {
     'vehicles_edit_dmv',
     -- Weapons
     'weapons_search',
+    'weapons_add',
     -- Cases
     'cases_view',
     'cases_create',
@@ -333,3 +334,13 @@ Config.CameraModels = {
     ['cctv_cam_08'] = 'p_cctv_s',
     ['cctv_cam_09'] = 'hei_prop_bank_cctv_02',
 }
+
+-- Which Weapons should be allowed to be registered manually
+Config.Weapons = {
+    { model = "weapon_heavypistol", label = "Heavy Pistol" },
+    { model = "weapon_sniperrifle", label = "Hunting Rifle" },
+    { model = "weapon_ceramicpistol", label = "Ceramic Pistol" },
+    { model = "weapon_doubleaction", label = "Double-Action Revolver" },
+    { model = "weapon_navyrevolver", label = "Navy Revolver" },
+    { model = "weapon_musket", label = "Musket" },
+}
\ No newline at end of file

From 041707f4efd9cbc46c9feeba20155b1208526704 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 13:47:38 +0200
Subject: [PATCH 002/144] added Citizens.svelte and Weapons.svelte

- Added fingerprint and dna fields to the Citizen interface
- Both fields included in client-side filter and searchCitizens SQL query via JSON_EXTRACT from players.metadata
- Extended SQL WHERE clause (8 params instead of 6), with explicit Lua loop mapping for fingerprint/DNA
- Normalized vehicle plate search: whitespace stripped and uppercased on frontend and DB side (REPLACE/UPPER)
- Split plateTerm and nameTerm in searchVehiclesForReport for correct case handling
- Added minimum query length guard (< 2 chars) to vehicle search input
---
 web/src/pages/Citizens.svelte |  32 +++--
 web/src/pages/Weapons.svelte  | 228 +++++++++++++++++++++++++++++++++-
 2 files changed, 247 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index ec279964..bbf379ef 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -19,6 +19,8 @@
 		gender: string;
 		dob: string;
 		phone: string;
+		fingerprint?: string;
+		dna?: string;
 		image?: string;
 		occupations: string[];
 		properties: number;
@@ -113,9 +115,10 @@
 	let allFilteredCitizens = $derived.by(() => {
 		const query = searchQuery.trim().toLowerCase();
 		if (!query) return citizens;
-		return citizens.filter(({ firstName, lastName, cid, phone }) =>
-			[firstName, lastName, cid, phone].some((val) =>
+		return citizens.filter(({ firstName, lastName, cid, phone, fingerprint, dna }) =>
+			[firstName, lastName, cid, phone, fingerprint, dna].some((val) =>
 				val?.toLowerCase().includes(query),
+				console.log(query, dna)
 			),
 		);
 	});
@@ -543,15 +546,16 @@
 		type: "state" | "custom";
 		active: boolean;
 		customId?: number;
+		description?: string;
 	}
 
 	let issuableLicenses = $derived.by((): IssuableLicense[] => {
 		if (!selectedProfile) return [];
 		const result: IssuableLicense[] = [];
-		result.push({ key: "driver", name: "Driver's License", type: "state", active: selectedProfile.licenses?.driver || false });
-		result.push({ key: "weapon", name: "Weapon License", type: "state", active: selectedProfile.licenses?.weapon || false });
+		result.push({ key: "driver", name: "Driver's License", type: "state", description: "State-issued license for operating motor vehicles", active: selectedProfile.licenses?.driver || false });
+		result.push({ key: "weapon", name: "Weapon License", type: "state", description: "State-issued license for carrying firearms", active: selectedProfile.licenses?.weapon || false });
 		for (const cl of selectedProfile.customLicenses || []) {
-			result.push({ key: `custom-${cl.id}`, name: cl.name, type: "custom", active: cl.active, customId: cl.id });
+			result.push({ key: `custom-${cl.id}`, name: cl.name, type: "custom", active: cl.active, customId: cl.id, description: cl.description });
 		}
 		return result;
 	});
@@ -1006,8 +1010,15 @@
 						{#each issuableLicenses as license (license.key)}
 							<div class="license-modal-row">
 								<div class="license-modal-info">
-									<span class="license-modal-name">{license.name}</span>
-									<span class="license-modal-type">{license.type === 'state' ? 'State' : 'Custom'}</span>
+									<div style="display: flex; flex-direction: column; gap: 2px; min-width: 0;">
+										<div style="display: flex; align-items: center; gap: 6px;">
+											<span class="license-modal-name">{license.name}</span>
+											<span class="license-modal-type">{license.type === 'state' ? 'State' : 'Custom'}</span>
+										</div>
+										{#if license.description}
+											<span class="license-modal-description">{license.description}</span>
+										{/if}
+									</div>
 								</div>
 								<label class="toggle"><input type="checkbox" checked={license.active} onchange={() => toggleIssuableLicense(license)} /><span class="toggle-track"></span></label>
 							</div>
@@ -1022,7 +1033,7 @@
 			<div class="list-topbar">
 		<div class="search-box">
 					<svg width="14" height="14" fill="rgba(255,255,255,0.35)" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
-					<input bind:value={searchQuery} type="text" placeholder="Search by name, ID, or phone..." />
+					<input bind:value={searchQuery} type="text" placeholder="Search by name, ID, phone, fingerprint or DNA..." />
 				</div>
 			</div>
 
@@ -1282,8 +1293,11 @@
 	/* License modal */
 	.license-modal-body { padding: 4px 0; }
 	.license-modal-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.03); }
+	.license-modal-row:hover { background: rgba(255,255,255,0.02); }
+	.license-modal-row:hover .license-modal-description { max-height: 50px; opacity: 1; }
 	.license-modal-row:last-child { border-bottom: none; }
 	.license-modal-info { display: flex; align-items: center; gap: 8px; }
 	.license-modal-name { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 500; }
-	.license-modal-type { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.25); }
+	.license-modal-type { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.25); flex-shrink: 0; }
+	.license-modal-description { font-size: 10px; color: rgba(255,255,255,0.35); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; max-height: 0; opacity: 0; transition: max-height 0.8s ease, opacity 0.8s ease; }
 </style>
diff --git a/web/src/pages/Weapons.svelte b/web/src/pages/Weapons.svelte
index 90c14e9d..8cf68ead 100644
--- a/web/src/pages/Weapons.svelte
+++ b/web/src/pages/Weapons.svelte
@@ -5,6 +5,11 @@
 	import { NUI_EVENTS } from "../constants/nuiEvents";
 	import { globalNotifications } from "../services/notificationService.svelte";
 	import Pagination from "../components/Pagination.svelte";
+	import type { createTabService } from "../services/tabService.svelte";
+	import type { SearchResult } from "../interfaces/IReportEditor";
+	import PersonSearchModal from "../components/report-editor/PersonSearchModal.svelte";
+	import { createSearchService } from "../services/searchService.svelte";
+	import type { AuthService } from "../services/authService.svelte";
 
 	interface Weapon {
 		id: number;
@@ -26,6 +31,8 @@
 		id: number;
 		serial: string;
 		owner: string | null;
+		owner_name?: string;
+		changed_by_name?: string;
 		weapon_model: string | null;
 		weapon_class: string | null;
 		information: string | null;
@@ -44,6 +51,29 @@
 	let weaponPage = $state(1);
 	let weaponPerPage = $state(25);
 
+	// ── Add Weapon modal ──
+	let showAddWeaponModal = $state(false);
+	let showWeaponOwnerSearch = $state(false);
+	
+	interface Props {
+		tabService: ReturnType<typeof createTabService>;
+		authService: AuthService;
+	}
+
+	let { tabService, authService }: Props = $props();
+
+	let canAddWeapon = $derived(authService?.hasPermission('weapons_add') ?? false);
+
+	let weaponOptions = $state<{ model: string; label: string }[]>([]);
+	let addWeaponForm = $state({
+		weaponModel: "",
+		serial: "",
+		owner: "",      // citizenid
+		ownerName: "",  // display name
+		notes: "The weapon was purchased on [DATE] in [PLACE].",
+	});
+	const searchService = createSearchService();
+
 	let allFilteredWeapons = $derived.by(() => {
 		const query = searchQuery.trim().toLowerCase();
 		return !query
@@ -79,6 +109,24 @@
 		}
 	}
 
+	async function handleWeaponOwnerSearch(query: string) {
+		if (!query.trim()) {
+			searchService.clearResults();
+			return;
+		}
+		try {
+			await searchService.searchPlayers(query);
+		} catch {
+			globalNotifications.error("Search failed");
+		}
+	}
+
+	function selectWeaponOwner(result: SearchResult) {
+		addWeaponForm.owner = result.citizenid ?? "";
+		addWeaponForm.ownerName = result.fullName ?? "";
+		showWeaponOwnerSearch = false;
+	}
+
 	async function viewWeapon(weaponId: number) {
 		const weapon = weapons.find((item) => item.id === weaponId) || null;
 		selectedWeapon = weapon;
@@ -119,13 +167,26 @@
 				{ id: 3, serial: 'WPN-55194', scratched: false, owner: 'Sarah Williams', information: 'Licensed for personal protection', weaponClass: 'Pistol', weaponModel: 'WEAPON_COMBATPISTOL', name: 'Combat Pistol', image: '', type: 'Handgun', seenIn: 0, flags: [], tint: 'Default' },
 				{ id: 4, serial: 'WPN-10477', scratched: false, owner: 'David Chen', information: 'Hunting rifle, valid license', weaponClass: 'Rifle', weaponModel: 'WEAPON_MUSKET', name: 'Musket', image: '', type: 'Rifle', seenIn: 2, flags: ['Bolo'], tint: 'Default' },
 			];
+			weaponOptions = [
+				{ model: "weapon_heavypistol", label: "Schwere Pistole" },
+				{ model: "weapon_sniperrifle", label: "Jagdgewehr" },
+				{ model: "weapon_ceramicpistol", label: "Keramikpistole" },
+				{ model: "weapon_doubleaction", label: "Doppellauf-Revolver" },
+				{ model: "weapon_navyrevolver", label: "Marine-Revolver" },
+				{ model: "weapon_musket", label: "Muskete" },
+			];
 			loading = false;
 			return;
 		}
 		loading = true;
 		try {
-			const response = await fetchNui(NUI_EVENTS.WEAPON.GET_WEAPONS);
-			weapons = Array.isArray(response.weapons) ? response.weapons : [];
+			const [weaponsRes, configRes] = await Promise.all([
+				fetchNui(NUI_EVENTS.WEAPON.GET_WEAPONS),
+				fetchNui<{ weapons: { model: string; label: string }[] }>(NUI_EVENTS.WEAPON.GET_WEAPON_CONFIG, {}, { weapons: [] }),
+			]);
+			console.log('configRes:', JSON.stringify(configRes));
+			weapons = Array.isArray(weaponsRes.weapons) ? weaponsRes.weapons : [];
+			weaponOptions = configRes.weapons ?? [];
 		} catch (error) {
 			globalNotifications.error("Failed to load weapons");
 			weapons = [];
@@ -145,8 +206,102 @@
 		}
 		loading = false;
 	}
+
+	async function addWeapon() {
+		if (!addWeaponForm.weaponModel.trim() || !addWeaponForm.serial.trim()) return;
+
+		if (isEnvBrowser()) {
+			addWeaponForm = { weaponModel: "", serial: "", owner: "", ownerName: "", notes: "" };
+			showAddWeaponModal = false;
+			return;
+		}
+
+		const response = await fetchNui<{ success: boolean; message?: string }>(
+			NUI_EVENTS.WEAPON.SAVE_WEAPON_INFO,
+			{
+				serial: addWeaponForm.serial.trim(),
+				owner: addWeaponForm.owner,
+				weapModel: addWeaponForm.weaponModel.trim().toUpperCase(),
+				notes: addWeaponForm.notes.trim(),
+			}
+		);
+
+		if (response?.success) {
+			globalNotifications.success("Weapon saved successfully");
+			refreshWeapons()
+			addWeaponForm = { weaponModel: "", serial: "", owner: "", ownerName: "", notes: "" };
+			showAddWeaponModal = false;
+		} else {
+			globalNotifications.error(response?.message || "Failed to save weapon");
+		}
+	}
 </script>
 
+<PersonSearchModal
+    show={showWeaponOwnerSearch}
+    title="Search Owner"
+    searchResults={searchService.state.results}
+    onSearch={handleWeaponOwnerSearch}
+    onSelect={selectWeaponOwner}
+    onClose={() => (showWeaponOwnerSearch = false)}
+/>
+
+{#if showAddWeaponModal}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="modal-backdrop" onclick={(e) => { if (e.target === e.currentTarget) showAddWeaponModal = false; }}>
+        <div class="modal" role="dialog" aria-modal="true" tabindex="-1">
+            <div class="modal-header">
+                <h3>Add Weapon</h3>
+                <button class="close-btn" aria-label="Close" onclick={() => (showAddWeaponModal = false)}>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"/>
+                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body form-body">
+                <div class="form-group">
+                    <span class="field-label">Weapon Name</span>
+					<select class="form-input form-select" bind:value={addWeaponForm.weaponModel}>
+						<option value="">-- Select --</option>
+						{#each weaponOptions as w}
+							<option value={w.model}>{w.label}</option>
+						{/each}
+					</select>
+                </div>
+				<div class="form-group form-full">
+					<span class="field-label">Serial Number</span>
+					<input class="form-input" bind:value={addWeaponForm.serial} placeholder="e.g. AB-123456" />
+					<span class="add-weapon-description" class:visible={addWeaponForm.serial.trim().length > 0}>
+						If this serial number already exists in the database, the existing record will be updated with the new information.
+					</span>
+				</div>
+				<div class="form-group">
+					<span class="field-label">Owner</span>
+					<button
+						class="form-input"
+						style="text-align: left; cursor: pointer;"
+						onclick={() => (showWeaponOwnerSearch = true)}
+					>
+						{addWeaponForm.ownerName
+							? `${addWeaponForm.ownerName} (${addWeaponForm.owner})`
+							: "Search citizen..."}
+					</button>
+				</div>
+                <div class="form-group form-full">
+                    <span class="field-label">Notes</span>
+                    <textarea class="form-input" rows="4" bind:value={addWeaponForm.notes}></textarea>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="cancel-btn" onclick={() => (showAddWeaponModal = false)}>Cancel</button>
+                <button class="primary-btn" onclick={addWeapon}>Add Weapon</button>
+            </div>
+        </div>
+    </div>
+{/if}
+
 {#if selectedWeapon}
 	<!-- Weapon Detail View -->
 	<div class="weapons-page">
@@ -224,17 +379,28 @@
 						{#each weaponHistory as entry}
 							<div class="history-item">
 								<div class="history-item-main">
-									<span class="history-owner">{entry.owner || 'Unknown'}</span>
+									<span class="history-owner">
+										{entry.owner_name ?? entry.owner ?? 'Unknown'}
+										{#if entry.owner_name && entry.owner}
+											<span class="history-meta">({entry.owner})</span>
+										{/if}
+									</span>
 									<span class="history-meta">
-										{entry.weapon_model || ''}
+										- Model: {entry.weapon_model || ''}
 										{entry.weapon_class ? ` · ${entry.weapon_class}` : ''}
 									</span>
+									{#if entry.information}
+										<span class="history-meta">- Notes: {entry.information}</span>
+									{/if}
 								</div>
 								<div class="history-item-side">
 									<span class="history-date">{new Date(entry.created_at).toLocaleDateString()}</span>
 									{#if entry.reason}
 										<span class="history-reason">{entry.reason}</span>
 									{/if}
+									{#if entry.changed_by_name ?? entry.changed_by}
+										<span class="history-meta">logged by {entry.changed_by_name ?? entry.changed_by}</span>
+									{/if}
 								</div>
 							</div>
 						{/each}
@@ -254,6 +420,11 @@
 			<button class="refresh-btn" onclick={refreshWeapons} disabled={loading}>
 				{loading ? "Loading..." : "Refresh"}
 			</button>
+			{#if canAddWeapon}
+				<button class="add-weapon-btn" onclick={() => (showAddWeaponModal = true)}>
+					<span class="material-icons" style="font-size: 12px;">add</span> Add Weapon
+				</button>
+			{/if}
 		</div>
 
 		<div class="list-panel">
@@ -415,6 +586,10 @@
 		cursor: not-allowed;
 	}
 
+	/* Add Weapon button */
+	.add-weapon-btn { display: flex; align-items: center; gap: 3px; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.1); border-radius: 3px; padding: 4px 10px; color: rgba(147,197,253,0.7); font-size: 9px; font-weight: 600; cursor: pointer; transition: all 0.12s; text-transform: none; letter-spacing: 0; }
+	.add-weapon-btn:hover { background: rgba(59,130,246,0.12); color: rgba(147,197,253,0.9); }
+
 	/* ===== List Panel ===== */
 	.list-panel {
 		flex: 1;
@@ -754,4 +929,49 @@
 		color: rgba(255, 255, 255, 0.35);
 		font-size: 10px;
 	}
+
+	.add-weapon-description { font-size: 10px; color: rgba(255,255,255,0.35); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; max-height: 0; opacity: 0; transition: max-height 0.8s ease, opacity 0.8s ease; }
+	.add-weapon-description.visible { max-height: 40px; opacity: 1; }
+
+	/* Modal shared */
+	.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 999; }
+	.modal { background: var(--card-dark-bg); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; width: min(540px, 92vw); max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
+	.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+	.modal-header h3 { margin: 0; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
+	.close-btn { display: flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); padding: 4px; border-radius: 3px; cursor: pointer; transition: all 0.1s; }
+	.close-btn:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+
+	.modal-body { padding: 14px 16px; overflow-y: auto; }
+	.modal-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+	.modal-name { color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 700; }
+	.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
+	.modal-field { display: flex; flex-direction: column; gap: 2px; }
+	.field-label { color: rgba(255, 255, 255, 0.35); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
+	.field-value { color: rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: 500; }
+	.modal-notes { background: transparent; border: none; border-top: 1px solid rgba(255, 255, 255, 0.04); border-radius: 0; padding: 10px 0 0; }
+	.notes-body { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
+
+	.modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
+	.modal-footer-left { display: flex; gap: 6px; }
+	.modal-footer-right { display: flex; gap: 6px; }
+	.resolve-btn { display: flex; align-items: center; gap: 4px; background: rgba(34, 197, 94, 0.06); color: rgba(74, 222, 128, 0.7); border: 1px solid rgba(34, 197, 94, 0.1); padding: 4px 10px; border-radius: 3px; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.1s; }
+	.resolve-btn:hover { background: rgba(34, 197, 94, 0.12); color: rgba(74, 222, 128, 0.9); }
+	.delete-btn { display: flex; align-items: center; gap: 4px; background: transparent; color: rgba(248, 113, 113, 0.5); border: 1px solid rgba(239, 68, 68, 0.1); padding: 4px 10px; border-radius: 3px; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.1s; }
+	.delete-btn:hover { background: rgba(239, 68, 68, 0.08); color: rgba(252, 165, 165, 0.8); }
+	.action-btn { background: rgba(var(--accent-rgb), 0.06); color: rgba(var(--accent-text-rgb), 0.7); border: 1px solid rgba(var(--accent-rgb), 0.1); padding: 4px 10px; border-radius: 3px; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.1s; }
+	.action-btn:hover { background: rgba(var(--accent-rgb), 0.12); color: rgba(var(--accent-text-rgb), 0.9); }
+	.cancel-btn { background: transparent; color: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 3px; padding: 4px 10px; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.1s; }
+	.cancel-btn:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+	.primary-btn { background: rgba(16, 185, 129, 0.06); color: rgba(52, 211, 153, 0.7); border: 1px solid rgba(16, 185, 129, 0.1); border-radius: 3px; padding: 4px 12px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.1s; }
+	.primary-btn:hover { background: rgba(16, 185, 129, 0.12); color: rgba(110, 231, 183, 0.9); }
+
+	/* Form */
+	.form-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+	.form-group { display: flex; flex-direction: column; gap: 3px; }
+	.form-full { grid-column: 1 / -1; }
+	.form-input { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 3px; padding: 5px 8px; color: rgba(255, 255, 255, 0.8); font-size: 11px; transition: border-color 0.1s; font-family: inherit; }
+	.form-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.1); }
+	.form-input::placeholder { color: rgba(255, 255, 255, 0.2); }
+	.form-select { padding-right: 22px; font-size: 10px; }
+	textarea.form-input { resize: vertical; min-height: 60px; }
 </style>

From 183a7e1b2c343e56632a00b02862e2b76cf8b6c9 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 13:52:26 +0200
Subject: [PATCH 003/144] added "weapons_add" into permissions

added "weapons_add" as a new permission
---
 web/src/components/ContentArea.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ContentArea.svelte b/web/src/components/ContentArea.svelte
index e92adcd2..2811e09d 100644
--- a/web/src/components/ContentArea.svelte
+++ b/web/src/components/ContentArea.svelte
@@ -109,7 +109,7 @@
 		citizens: ["citizens_search"],
 		bolos: ["bolos_view", "bolos_create"],
 		vehicles: ["vehicles_search"],
-		weapons: ["weapons_search"],
+		weapons: ["weapons_search", "weapons_add"],
 		cases: ["cases_view", "cases_create"],
 		evidence: ["evidence_view", "evidence_create"],
 		reports: ["reports_view", "reports_create"],
@@ -208,7 +208,7 @@
 		{:else if activeComponent === "vehicles"}
 			<Vehicles {tabService} />
 		{:else if activeComponent === "weapons"}
-			<Weapons />
+			<Weapons {tabService} {authService} />
 		{:else if activeComponent === "cases"}
 			<Cases {tabService} />
 		{:else if String(activeComponent) === "evidence"}

From 8956edc942c1810110bd9fa514a1658ab8b4e15d Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 13:53:59 +0200
Subject: [PATCH 004/144] changed search function to allow spaces/big/small
 letters

changed search function to allow spaces/big/small letters
---
 web/src/components/report-editor/VehiclesManager.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/report-editor/VehiclesManager.svelte b/web/src/components/report-editor/VehiclesManager.svelte
index b615f7c3..c41b8e45 100644
--- a/web/src/components/report-editor/VehiclesManager.svelte
+++ b/web/src/components/report-editor/VehiclesManager.svelte
@@ -31,7 +31,7 @@
 		const value = (e.target as HTMLInputElement).value;
 		searchQuery = value;
 		if (searchTimeout) clearTimeout(searchTimeout);
-		if (!value.trim()) {
+		if (value.trim().length < 2) {
 			searchResults = [];
 			return;
 		}
@@ -40,6 +40,7 @@
 
 	async function performSearch(query: string) {
 		if (!query) return;
+		const normalizedQuery = query.toUpperCase().replace(/\s+/g, '');
 		isSearching = true;
 		try {
 			if (isEnvBrowser()) {
@@ -50,7 +51,7 @@
 			} else {
 				const results = await fetchNui<ReportVehicle[]>(
 					NUI_EVENTS.REPORT.SEARCH_VEHICLES_FOR_REPORT,
-					{ query },
+					{ query: normalizedQuery },
 					[],
 				);
 				searchResults = Array.isArray(results) ? results : [];

From 9c49e0dc1d4060d58fa3eeabc59fd6115acf3cda Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 13:55:52 +0200
Subject: [PATCH 005/144] added "weapons_add" into permissions

added "weapons_add" into permissions
---
 web/src/components/management/ManagementPermissions.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/management/ManagementPermissions.svelte b/web/src/components/management/ManagementPermissions.svelte
index bade9e00..ebfc1f1f 100644
--- a/web/src/components/management/ManagementPermissions.svelte
+++ b/web/src/components/management/ManagementPermissions.svelte
@@ -11,7 +11,7 @@
 	/** Individual permissions hidden for EMS within visible categories */
 	const EMS_HIDDEN_PERMISSIONS = ['cameras_view', 'management_tracking'];
 	const DOJ_VISIBLE_CATEGORIES = ['citizens', 'cases', 'evidence', 'charges', 'management'];
-	const DOJ_HIDDEN_PERMISSIONS = ['management_bulletins', 'management_activity', 'management_tags', 'management_tracking', 'management_settings', 'citizens_edit_licenses'];
+	const DOJ_HIDDEN_PERMISSIONS = ['management_bulletins', 'management_activity', 'management_tags', 'management_tracking', 'management_settings', 'citizens_edit_licenses', 'weapons_add'];
 
 	let visibleCategories = $derived(
 		jobType === 'ems'

From 06d2dc474d20049917317288b343fb6697100f74 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:02:37 +0200
Subject: [PATCH 006/144] added check for fingerprint and dna

added fingerprint and dna into getCitizens callback
---
 server/backend/citizens.lua | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/server/backend/citizens.lua b/server/backend/citizens.lua
index 8cde669c..1571fc23 100644
--- a/server/backend/citizens.lua
+++ b/server/backend/citizens.lua
@@ -100,7 +100,9 @@ ps.registerCallback(resourceName .. ':server:getCitizens', function(source, page
         JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.gender')) AS gender,
         JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.birthdate')) AS dateofbirth,
         JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.phone')) AS phone,
-        JSON_UNQUOTE(JSON_EXTRACT(p.job, '$.label')) AS job
+        JSON_UNQUOTE(JSON_EXTRACT(p.job, '$.label')) AS job,
+        JSON_UNQUOTE(JSON_EXTRACT(p.metadata, '$.fingerprint')) AS fingerprint,
+        JSON_UNQUOTE(JSON_EXTRACT(p.metadata, '$.dna')) AS dna
         FROM players AS p
         LEFT JOIN mdt_profiles AS mp
         ON CONVERT(p.citizenid USING utf8mb4) COLLATE utf8mb4_general_ci = CONVERT(mp.citizenid USING utf8mb4) COLLATE utf8mb4_general_ci
@@ -176,6 +178,8 @@ ps.registerCallback(resourceName .. ':server:getCitizens', function(source, page
         v.dob = v.dateofbirth
         v.phone = v.phone
         v.image = profilePics[v.citizenid] or nil
+        v.fingerprint = v.fingerprint or nil
+        v.dna = v.dna or nil
         v.occupations = { v.job }
         v.properties = propCounts[v.citizenid] or 0
         v.vehicles = vehCounts[v.citizenid] or 0
@@ -216,14 +220,15 @@ ps.registerCallback(resourceName .. ':server:searchCitizens', function(source, q
     -- Build a complex search query that searches across multiple fields and returns same data as getCitizens
     local sqlQuery = [[
         SELECT DISTINCT
-            mp.id,
-            p.citizenid,
+            mp.id, p.citizenid,
             JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.firstname')) AS firstname,
             JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.lastname')) AS lastname,
             JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.gender')) AS gender,
             JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.birthdate')) AS dateofbirth,
             JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.phone')) AS phone,
-            JSON_UNQUOTE(JSON_EXTRACT(p.job, '$.label')) AS job
+            JSON_UNQUOTE(JSON_EXTRACT(p.job, '$.label')) AS job,
+            JSON_UNQUOTE(JSON_EXTRACT(p.metadata, '$.fingerprint')) AS fingerprint,
+            JSON_UNQUOTE(JSON_EXTRACT(p.metadata, '$.dna')) AS dna
         FROM players AS p
         LEFT JOIN mdt_profiles AS mp ON p.citizenid COLLATE utf8mb4_general_ci = mp.citizenid COLLATE utf8mb4_general_ci
         WHERE 
@@ -232,13 +237,15 @@ ps.registerCallback(resourceName .. ':server:searchCitizens', function(source, q
             LOWER(CONCAT(JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.firstname')), ' ', JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.lastname')))) LIKE ? OR
             LOWER(p.citizenid) LIKE ? OR
             LOWER(JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.phone'))) LIKE ? OR
-            LOWER(JSON_UNQUOTE(JSON_EXTRACT(p.job, '$.label'))) LIKE ?
+            LOWER(JSON_UNQUOTE(JSON_EXTRACT(p.job, '$.label'))) LIKE ? OR
+            LOWER(JSON_UNQUOTE(JSON_EXTRACT(p.metadata, '$.fingerprint'))) LIKE ? OR
+            LOWER(JSON_UNQUOTE(JSON_EXTRACT(p.metadata, '$.dna'))) LIKE ?
         LIMIT ?
     ]]
 
-    local searchLimit = Config.Pagination and Config.Pagination.CitizenSearch or 20
     local result = safeQuery(sqlQuery, {
-        searchTerm, searchTerm, searchTerm, searchTerm, searchTerm, searchTerm, searchLimit
+        searchTerm, searchTerm, searchTerm, searchTerm,
+        searchTerm, searchTerm, searchTerm, searchTerm
     })
     if not result or #result == 0 then return {} end
 

From eb4a9847f2db26f4a142b8561ff88c2abd0b9c4f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:08:53 +0200
Subject: [PATCH 007/144] added 'weapons_add' as a new permission

added 'weapons_add' as a new permission
---
 server/backend/management.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/backend/management.lua b/server/backend/management.lua
index 458d2f47..5b3e3511 100644
--- a/server/backend/management.lua
+++ b/server/backend/management.lua
@@ -60,7 +60,7 @@ local function getAllPermissions()
         'citizens_search', 'citizens_edit_licenses',
         'bolos_view', 'bolos_create',
         'vehicles_search', 'vehicles_edit_dmv',
-        'weapons_search',
+        'weapons_search', 'weapons_add',
         'cases_view', 'cases_create', 'cases_edit', 'cases_delete',
         'evidence_view', 'evidence_create', 'evidence_transfer', 'evidence_upload',
         'reports_view', 'reports_create', 'reports_delete',

From 0b788b32889b6a7cb90c6a6552b03f5123da23ff Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:10:04 +0200
Subject: [PATCH 008/144] added 'weapons_add' as a new permission and added new
 events

added 'weapons_add' as a new permission and added new events
---
 web/src/constants/management.ts | 1 +
 web/src/constants/nuiEvents.ts  | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/web/src/constants/management.ts b/web/src/constants/management.ts
index 1c222a0e..21d6db63 100644
--- a/web/src/constants/management.ts
+++ b/web/src/constants/management.ts
@@ -87,6 +87,7 @@ export const PERMISSION_CATEGORIES: PermissionCategory[] = [
 		icon: "security",
 		permissions: [
 			{ key: "weapons_search", label: "Search Weapons", description: "Search and view weapon records" },
+			{ key: "weapons_add", label: "Add Weapons", description: "Register a new gun manually" },
 		],
 	},
 	{
diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index e5175863..c049bc06 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -96,7 +96,9 @@ export const NUI_EVENTS = {
 		SEARCH_WEAPONS: "searchWeapons",
 		GET_WEAPON: "getWeapon",
 		GET_WEAPON_HISTORY: "getWeaponOwnershipHistory",
+		SAVE_WEAPON_INFO: 'saveWeaponInfo',
 		UPDATE_WEAPON: "updateWeapon",
+		GET_WEAPON_CONFIG: "getWeaponConfig",
 	},
 	CHARGE: {
 		GET_CHARGES: "getCharges",

From 278c2ba9556288399a91f2da7a4db7e106e74c13 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:11:30 +0200
Subject: [PATCH 009/144] added 'weapons_add' as a new permission

added 'weapons_add' as a new permission
---
 web/src/services/managementService.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/services/managementService.svelte.ts b/web/src/services/managementService.svelte.ts
index 4fefd62d..c4290af7 100644
--- a/web/src/services/managementService.svelte.ts
+++ b/web/src/services/managementService.svelte.ts
@@ -37,7 +37,7 @@ export function createManagementService() {
 			// Dev mock: roles with escalating permissions (labels match whatever the job grades are)
 			const basicPerms = ["citizens_search", "bolos_view", "vehicles_search", "weapons_search", "reports_view", "warrants_view", "charges_view"];
 			const midPerms = [...basicPerms, "reports_create", "cases_view", "evidence_view", "bolos_create", "dispatch_attach", "dispatch_route"];
-			const seniorPerms = [...midPerms, "cases_create", "cases_edit", "evidence_create", "evidence_transfer", "reports_delete", "warrants_issue", "cameras_view", "bodycams_view", "citizens_edit_licenses", "vehicles_edit_dmv"];
+			const seniorPerms = [...midPerms, "cases_create", "cases_edit", "evidence_create", "evidence_transfer", "reports_delete", "warrants_issue", "cameras_view", "bodycams_view", "citizens_edit_licenses", "vehicles_edit_dmv", "weapons_add"];
 			const commandPerms = [...seniorPerms, "cases_delete", "evidence_upload", "warrants_close", "charges_edit", "management_activity", "management_bulletins", "roster_manage_officers", "roster_manage_certifications"];
 			roles = [
 				{ key: "0", label: "Grade 0", permissions: basicPerms, isBoss: false },

From ae01a2c89b21df1069e6afc29647103e0708471b Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:15:14 +0200
Subject: [PATCH 010/144] added new permission, changed ownership history

added new permission, changed ownership history
---
 server/backend/weapons.lua | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/server/backend/weapons.lua b/server/backend/weapons.lua
index aa6d9e79..0fcd59a7 100644
--- a/server/backend/weapons.lua
+++ b/server/backend/weapons.lua
@@ -160,21 +160,29 @@ ps.registerCallback('ps-mdt:server:getWeapons', function(source)
     return { weapons = newData, bolos = weaponBolo }
 end)
 
-ps.registerCallback(resourceName .. ':server:getWeaponOwnershipHistory', function(source, serial)
+ps.registerCallback(resourceName .. ':server:getWeaponOwnershipHistory', function(source, payload)
     local src = source
-    if not CheckAuth(src) then return end
+    if not CheckAuth(src) then return {} end
+
+    payload = payload or {}
+    local serial = payload.serial
+
     if not serial or serial == '' then return {} end
 
     local rows = MySQL.query.await([[
-        SELECT id, serial, owner, weapon_model, weapon_class, information, changed_by, reason, created_at
-        FROM mdt_weapon_ownership_history
-        WHERE serial = ?
-        ORDER BY created_at DESC
+        SELECT h.id, h.serial, h.owner, h.weapon_model, h.weapon_class, h.information, h.changed_by, h.reason, h.created_at,
+               p.fullname AS owner_name,
+               cb.fullname AS changed_by_name
+        FROM mdt_weapon_ownership_history h
+        LEFT JOIN mdt_profiles p ON p.citizenid = h.owner
+        LEFT JOIN mdt_profiles cb ON cb.citizenid = h.changed_by
+        WHERE h.serial = ?
+        ORDER BY h.created_at DESC
     ]], { serial })
+
     return rows or {}
 end)
 
--- Save/Edit Weapon Info (from NUI)
 ps.registerCallback(resourceName .. ':server:saveWeaponInfo', function(source, payload)
     local src = source
     if not CheckAuth(src) then return { success = false, message = 'Unauthorized' } end
@@ -191,6 +199,11 @@ ps.registerCallback(resourceName .. ':server:saveWeaponInfo', function(source, p
         return { success = false, message = 'Missing serial number' }
     end
 
+    -- Ensure profile exists before insert/update to avoid FK constraint error
+    -- if owner and owner ~= '' then
+    --     EnsureProfileExists(owner)
+    -- end
+
     local existing = MySQL.single.await('SELECT id FROM mdt_weapons WHERE serial = ? LIMIT 1', { serial })
 
     if existing then
@@ -199,6 +212,11 @@ ps.registerCallback(resourceName .. ':server:saveWeaponInfo', function(source, p
             SET information = ?, owner = ?, weaponClass = ?, weaponModel = ?
             WHERE serial = ?
         ]], { notes, owner, weapClass, weapModel, serial })
+
+        MySQL.insert.await([[
+            INSERT INTO mdt_weapon_ownership_history (serial, owner, weapon_model, weapon_class, information, changed_by, reason)
+            VALUES (?, ?, ?, ?, ?, ?, ?)
+        ]], { serial, owner, weapModel, weapClass, notes, ps.getIdentifier(src), 'ownership_transfer' })
     else
         MySQL.insert.await([[
             INSERT INTO mdt_weapons (serial, scratched, owner, information, weaponClass, weaponModel)

From 3f43405f5388970cdc33dcf130d7db42d2bd5d3a Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 25 Apr 2026 17:10:34 +0200
Subject: [PATCH 011/144] removed unwanted console.logs, changed notes and
 removed weaponOptions (now in config)

removed unwanted console.logs, changed notes and removed weaponOptions (now in config)
---
 web/src/pages/Citizens.svelte |  1 -
 web/src/pages/Weapons.svelte  | 13 ++-----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index bbf379ef..8f263738 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -118,7 +118,6 @@
 		return citizens.filter(({ firstName, lastName, cid, phone, fingerprint, dna }) =>
 			[firstName, lastName, cid, phone, fingerprint, dna].some((val) =>
 				val?.toLowerCase().includes(query),
-				console.log(query, dna)
 			),
 		);
 	});
diff --git a/web/src/pages/Weapons.svelte b/web/src/pages/Weapons.svelte
index 8cf68ead..160d1fc6 100644
--- a/web/src/pages/Weapons.svelte
+++ b/web/src/pages/Weapons.svelte
@@ -167,14 +167,6 @@
 				{ id: 3, serial: 'WPN-55194', scratched: false, owner: 'Sarah Williams', information: 'Licensed for personal protection', weaponClass: 'Pistol', weaponModel: 'WEAPON_COMBATPISTOL', name: 'Combat Pistol', image: '', type: 'Handgun', seenIn: 0, flags: [], tint: 'Default' },
 				{ id: 4, serial: 'WPN-10477', scratched: false, owner: 'David Chen', information: 'Hunting rifle, valid license', weaponClass: 'Rifle', weaponModel: 'WEAPON_MUSKET', name: 'Musket', image: '', type: 'Rifle', seenIn: 2, flags: ['Bolo'], tint: 'Default' },
 			];
-			weaponOptions = [
-				{ model: "weapon_heavypistol", label: "Schwere Pistole" },
-				{ model: "weapon_sniperrifle", label: "Jagdgewehr" },
-				{ model: "weapon_ceramicpistol", label: "Keramikpistole" },
-				{ model: "weapon_doubleaction", label: "Doppellauf-Revolver" },
-				{ model: "weapon_navyrevolver", label: "Marine-Revolver" },
-				{ model: "weapon_musket", label: "Muskete" },
-			];
 			loading = false;
 			return;
 		}
@@ -184,7 +176,6 @@
 				fetchNui(NUI_EVENTS.WEAPON.GET_WEAPONS),
 				fetchNui<{ weapons: { model: string; label: string }[] }>(NUI_EVENTS.WEAPON.GET_WEAPON_CONFIG, {}, { weapons: [] }),
 			]);
-			console.log('configRes:', JSON.stringify(configRes));
 			weapons = Array.isArray(weaponsRes.weapons) ? weaponsRes.weapons : [];
 			weaponOptions = configRes.weapons ?? [];
 		} catch (error) {
@@ -211,7 +202,7 @@
 		if (!addWeaponForm.weaponModel.trim() || !addWeaponForm.serial.trim()) return;
 
 		if (isEnvBrowser()) {
-			addWeaponForm = { weaponModel: "", serial: "", owner: "", ownerName: "", notes: "" };
+			addWeaponForm = { weaponModel: "", serial: "", owner: "", ownerName: "", notes: addWeaponForm.notes.trim() };
 			showAddWeaponModal = false;
 			return;
 		}
@@ -229,7 +220,7 @@
 		if (response?.success) {
 			globalNotifications.success("Weapon saved successfully");
 			refreshWeapons()
-			addWeaponForm = { weaponModel: "", serial: "", owner: "", ownerName: "", notes: "" };
+			addWeaponForm = { weaponModel: "", serial: "", owner: "", ownerName: "", notes: addWeaponForm.notes.trim() };
 			showAddWeaponModal = false;
 		} else {
 			globalNotifications.error(response?.message || "Failed to save weapon");

From 871589ea5fc27b5209fddf0d04a773cc299fabf1 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 28 Apr 2026 03:19:48 +0200
Subject: [PATCH 012/144] added   `flags` JSON DEFAULT NULL,

added   `flags` JSON DEFAULT NULL,
---
 sql/qbcore.sql | 1 +
 sql/qbx.sql    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/sql/qbcore.sql b/sql/qbcore.sql
index e7a47ba4..27d40e0d 100644
--- a/sql/qbcore.sql
+++ b/sql/qbcore.sql
@@ -566,6 +566,7 @@ CREATE TABLE IF NOT EXISTS `mdt_weapons` (
   `information` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
   `weaponClass` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
   `weaponModel` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
+  `flags` JSON DEFAULT NULL,
   PRIMARY KEY (`id`) USING BTREE,
   UNIQUE KEY `unique_serial` (`serial`),
   KEY `FK_mdt_weapons_mdt_profiles` (`owner`),
diff --git a/sql/qbx.sql b/sql/qbx.sql
index 3cd9d15a..b148f9c4 100644
--- a/sql/qbx.sql
+++ b/sql/qbx.sql
@@ -566,6 +566,7 @@ CREATE TABLE IF NOT EXISTS `mdt_weapons` (
   `information` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   `weaponClass` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   `weaponModel` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
+  `flags` JSON DEFAULT NULL,
   PRIMARY KEY (`id`) USING BTREE,
   UNIQUE KEY `unique_serial` (`serial`),
   KEY `FK_mdt_weapons_mdt_profiles` (`owner`),

From 6a7b918aeec1c65b1a41b423ecec27496a8b9d1c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 28 Apr 2026 03:21:06 +0200
Subject: [PATCH 013/144] changes to Weapons.svelte

changes to Weapons.svelte
---
 web/src/pages/Weapons.svelte | 216 +++++++++++++++++++++++++++++++----
 1 file changed, 196 insertions(+), 20 deletions(-)

diff --git a/web/src/pages/Weapons.svelte b/web/src/pages/Weapons.svelte
index 90c14e9d..00dd63c3 100644
--- a/web/src/pages/Weapons.svelte
+++ b/web/src/pages/Weapons.svelte
@@ -6,6 +6,11 @@
 	import { globalNotifications } from "../services/notificationService.svelte";
 	import Pagination from "../components/Pagination.svelte";
 
+	interface WeaponFlag {
+		type: string;
+		info: string;
+	}
+
 	interface Weapon {
 		id: number;
 		serial: string;
@@ -18,7 +23,7 @@
 		image: string;
 		type: string;
 		seenIn: number;
-		flags: string[];
+		flags: WeaponFlag[];
 		tint: string;
 	}
 
@@ -41,6 +46,13 @@
 	let weaponHistory = $state<WeaponHistoryEntry[]>([]);
 	let historyLoading = $state(false);
 
+	let newFlag = $state({ type: "", info: "" });
+	const PRESET_FLAGS = ["Stolen", "Wanted"];
+	
+	const FLAG_TEMPLATES: Record<string, string> = {
+		"Stolen": "Reported stolen on [DATE] by [NAME].",
+		"Wanted": "Wanted in connection with [CASE/REASON] as of [DATE].",
+	};
 	let weaponPage = $state(1);
 	let weaponPerPage = $state(25);
 
@@ -66,14 +78,15 @@
 		weaponPage = 1;
 	});
 
-	function getFlagClass(flag: string): string {
-		switch (flag) {
-			case "Active Warrant":
-			case "Dangerous":
+	function onFlagTypeChange() {
+		newFlag.info = FLAG_TEMPLATES[newFlag.type] ?? "";
+	}
+
+	function getFlagClass(flag: WeaponFlag): string {
+		switch (flag.type) {
+			case "Stolen":
+			case "Wanted":
 				return "pill pill-red";
-			case "Bolo":
-			case "Flight Risk":
-				return "pill pill-orange";
 			default:
 				return "pill pill-grey";
 		}
@@ -106,7 +119,55 @@
 		}
 	}
 
+	async function addFlag() {
+		if (!newFlag.type || !selectedWeapon) return;
+
+		const currentFlags = selectedWeapon.flags ?? [];
+		if (currentFlags.some(f => f.type === newFlag.type)) return;
+
+		const updated = [...currentFlags, { type: newFlag.type, info: newFlag.info.trim() }];
+
+		if (isEnvBrowser()) {
+			selectedWeapon = { ...selectedWeapon, flags: updated };
+			newFlag = { type: "", info: "" };
+			return;
+		}
+
+		const response = await fetchNui<{ success: boolean }>(
+			NUI_EVENTS.WEAPON.SAVE_WEAPON_FLAGS,
+			{ serial: selectedWeapon.serial, flags: updated },
+		);
+		if (response?.success) {
+			selectedWeapon = { ...selectedWeapon, flags: updated };
+			newFlag = { type: "", info: "" };
+		} else {
+			globalNotifications.error("Failed to save flag");
+		}
+	}
+
+	async function removeFlag(type: string) {
+		if (!selectedWeapon) return;
+		const currentFlags = selectedWeapon.flags ?? [];
+		const updated = currentFlags.filter(f => f.type !== type);
+
+		if (isEnvBrowser()) {
+			selectedWeapon = { ...selectedWeapon, flags: updated };
+			return;
+		}
+
+		const response = await fetchNui<{ success: boolean }>(
+			NUI_EVENTS.WEAPON.SAVE_WEAPON_FLAGS,
+			{ serial: selectedWeapon.serial, flags: updated },
+		);
+		if (response?.success) {
+			selectedWeapon = { ...selectedWeapon, flags: updated };
+		} else {
+			globalNotifications.error("Failed to remove flag");
+		}
+	}
+
 	function closeWeapon() {
+		refreshWeapons()
 		selectedWeapon = null;
 		weaponHistory = [];
 	}
@@ -114,10 +175,10 @@
 	onMount(async () => {
 		if (isEnvBrowser()) {
 			weapons = [
-				{ id: 1, serial: 'WPN-48291', scratched: false, owner: 'Marcus Johnson', information: 'Registered service weapon', weaponClass: 'Pistol', weaponModel: 'WEAPON_PISTOL', name: 'Pistol', image: '', type: 'Handgun', seenIn: 3, flags: [], tint: 'Default' },
-				{ id: 2, serial: 'WPN-73820', scratched: true, owner: 'Unknown', information: 'Serial scratched off - found at crime scene', weaponClass: 'SMG', weaponModel: 'WEAPON_SMG', name: 'SMG', image: '', type: 'Submachine Gun', seenIn: 1, flags: ['Dangerous'], tint: 'Army' },
+				{ id: 1, serial: 'WPN-48291', scratched: false, owner: 'Marcus Johnson', information: 'Registered service weapon', weaponClass: 'Pistol', weaponModel: 'WEAPON_PISTOL', name: 'Pistol', image: '', type: 'Handgun', seenIn: 3, flags: [{ type: "Stolen", info: "reported Stolen" }], tint: 'Default' },
+				{ id: 2, serial: 'WPN-73820', scratched: true, owner: 'Unknown', information: 'Serial scratched off - found at crime scene', weaponClass: 'SMG', weaponModel: 'WEAPON_SMG', name: 'SMG', image: '', type: 'Submachine Gun', seenIn: 1, flags: [{ type: "Stolen", info: "reported Stolen" }], tint: 'Army' },
 				{ id: 3, serial: 'WPN-55194', scratched: false, owner: 'Sarah Williams', information: 'Licensed for personal protection', weaponClass: 'Pistol', weaponModel: 'WEAPON_COMBATPISTOL', name: 'Combat Pistol', image: '', type: 'Handgun', seenIn: 0, flags: [], tint: 'Default' },
-				{ id: 4, serial: 'WPN-10477', scratched: false, owner: 'David Chen', information: 'Hunting rifle, valid license', weaponClass: 'Rifle', weaponModel: 'WEAPON_MUSKET', name: 'Musket', image: '', type: 'Rifle', seenIn: 2, flags: ['Bolo'], tint: 'Default' },
+				{ id: 4, serial: 'WPN-10477', scratched: false, owner: 'David Chen', information: 'Hunting rifle, valid license', weaponClass: 'Rifle', weaponModel: 'WEAPON_MUSKET', name: 'Musket', image: '', type: 'Rifle', seenIn: 2, flags: [{ type: "Wanted", info: "Found Bullets - Report #1337" }], tint: 'Default' },
 			];
 			loading = false;
 			return;
@@ -164,7 +225,7 @@
 					<span class="pill pill-red">Scratched</span>
 				{/if}
 				{#each selectedWeapon.flags as flag}
-					<span class={getFlagClass(flag)}>{flag}</span>
+					<span class={getFlagClass(flag)}>{flag.type}</span>
 				{/each}
 			</div>
 		</div>
@@ -202,16 +263,45 @@
 				</div>
 			{/if}
 
-			{#if selectedWeapon.flags && selectedWeapon.flags.length}
-				<div class="section">
-					<div class="section-title">Flags</div>
-					<div class="flags-row">
+			<div class="section">
+				<div class="section-title">Flags</div>
+
+				{#if selectedWeapon.flags?.length}
+					<div class="flags-row" style="margin-bottom: 8px;">
 						{#each selectedWeapon.flags as flag}
-							<span class={getFlagClass(flag)}>{flag}</span>
+							<span class={getFlagClass(flag)} style="display:inline-flex;align-items:center;gap:6px;">
+								<span>{flag.type}</span>
+								{#if flag.info}
+									<span style="opacity:0.6;font-weight:400;">— {flag.info}</span>
+								{/if}
+								<button class="tag-remove" onclick={() => removeFlag(flag.type)} aria-label="Remove flag">
+									<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+								</button>
+							</span>
 						{/each}
 					</div>
+				{/if}
+
+				<div class="flag-add-row">
+					<select class="form-select" bind:value={newFlag.type} onchange={onFlagTypeChange}>
+						<option value="">-- Select --</option>
+						{#each PRESET_FLAGS as preset}
+							<option value={preset} disabled={selectedWeapon.flags?.some(f => f.type === preset)}>
+								{preset}
+							</option>
+						{/each}
+					</select>
+					<input
+						class="form-input"
+						bind:value={newFlag.info}
+						placeholder="Additional info..."
+						onkeydown={(e) => { if (e.key === 'Enter') addFlag(); }}
+					/>
+					<button class="add-tag-btn" onclick={addFlag} disabled={!newFlag.type.trim()}>
+						+ Add
+					</button>
 				</div>
-			{/if}
+			</div>
 
 			<div class="section">
 				<div class="section-title">Ownership History</div>
@@ -284,8 +374,8 @@
 							<span class="col-type">{weapon.type}</span>
 							<span class="col-tint">{weapon.tint || 'Default'}</span>
 							<span class="col-flags">
-								{#each weapon.flags as flag}
-									<span class={getFlagClass(flag)}>{flag}</span>
+								{#each weapon.flags || [] as flag}
+									<span class={getFlagClass(flag)}>{flag.type}</span>
 								{/each}
 							</span>
 						</button>
@@ -693,12 +783,98 @@
 		padding: 16px;
 	}
 
+	/* ===== Tags/Flags ===== */
 	.flags-row {
 		display: flex;
 		gap: 4px;
 		flex-wrap: wrap;
 	}
 
+	.tag-remove {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		border: none;
+		color: inherit;
+		opacity: 0.4;
+		cursor: pointer;
+		padding: 0;
+		transition: opacity 0.1s;
+		line-height: 1;
+	}
+
+	.tag-remove:hover {
+		opacity: 1;
+	}
+
+	.flag-add-row {
+		display: flex;
+		gap: 6px;
+		align-items: center;
+		margin-top: 8px;
+	}
+
+	.flag-add-row .form-select {
+		width: 120px;
+		flex-shrink: 0;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 5px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 10px;
+		font-family: inherit;
+	}
+
+	.flag-add-row .form-select:focus {
+		outline: none;
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.flag-add-row .form-input {
+		flex: 1;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 5px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		font-family: inherit;
+	}
+
+	.flag-add-row .form-input:focus {
+		outline: none;
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.flag-add-row .form-input::placeholder {
+		color: rgba(255, 255, 255, 0.2);
+	}
+
+	.add-tag-btn {
+		background: rgba(16, 185, 129, 0.06);
+		color: rgba(52, 211, 153, 0.7);
+		border: 1px solid rgba(16, 185, 129, 0.1);
+		border-radius: 3px;
+		padding: 4px 10px;
+		font-size: 10px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.1s;
+		white-space: nowrap;
+	}
+
+	.add-tag-btn:hover:not(:disabled) {
+		background: rgba(16, 185, 129, 0.12);
+		color: rgba(110, 231, 183, 0.9);
+	}
+
+	.add-tag-btn:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
+
 	/* ===== History ===== */
 	.history-list {
 		display: flex;

From 3934eda1b90eb04566cf89762aa31d429c205e87 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 28 Apr 2026 03:21:44 +0200
Subject: [PATCH 014/144] added RegisterNUICallback

added RegisterNUICallback
---
 client/backend/weapons.lua | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/backend/weapons.lua b/client/backend/weapons.lua
index fb7fa3c4..79532dae 100644
--- a/client/backend/weapons.lua
+++ b/client/backend/weapons.lua
@@ -14,6 +14,12 @@ RegisterNUICallback('getWeaponBolos', function(data, cb)
     cb(result)
 end)
 
+RegisterNUICallback('saveWeaponFlags', function(data, cb)
+    local flags = type(data.flags) == 'table' and data.flags or json.decode(data.flags) or {}
+    local result = ps.callback(resourceName .. ':server:saveWeaponFlags', data.serial, flags)
+    cb(result or { success = false })
+end)
+
 RegisterNUICallback('getWeaponOwnershipHistory', function(data, cb)
     if not MDTOpen then cb({}) return end
     if not data or not data.serial then

From a20df2a4798d0db10249f32b9c90e0608935986a Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 28 Apr 2026 03:22:16 +0200
Subject: [PATCH 015/144] added ps-mdt:server:saveWeaponFlags

added ps-mdt:server:saveWeaponFlags
---
 server/backend/weapons.lua | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/server/backend/weapons.lua b/server/backend/weapons.lua
index aa6d9e79..903199bb 100644
--- a/server/backend/weapons.lua
+++ b/server/backend/weapons.lua
@@ -141,6 +141,7 @@ ps.registerCallback('ps-mdt:server:getWeapons', function(source)
             name = (QBCore and QBCore.Shared and QBCore.Shared.Weapons and QBCore.Shared.Weapons[GetHashKey(v.weaponModel)] and QBCore.Shared.Weapons[GetHashKey(v.weaponModel)].label) or v.weaponModel,
             image = 'https://docs.fivem.net/weapons/' .. v.weaponModel:upper() .. '.png',
             type = class[modelLower] and class[modelLower].type or 'unknown',
+            flags = v.flags and json.decode(v.flags) or {},
         }
         table.insert(newData, weaponInfo)
     end
@@ -174,6 +175,30 @@ ps.registerCallback(resourceName .. ':server:getWeaponOwnershipHistory', functio
     return rows or {}
 end)
 
+ps.registerCallback(resourceName .. ':server:saveWeaponFlags', function(source, serial, flags)
+    local src = source
+    if not CheckAuth(src) then return { success = false } end
+    if not serial or serial == '' then return { success = false } end
+
+    local decoded
+    if type(flags) == 'table' then
+        decoded = flags
+    elseif type(flags) == 'string' then
+        decoded = json.decode(flags) or {}
+    else
+        decoded = {}
+    end
+
+    local encoded = json.encode(decoded)
+    local affected = MySQL.update.await('UPDATE mdt_weapons SET flags = ? WHERE serial = ?', { encoded, serial })
+
+    if affected and affected > 0 then
+        return { success = true }
+    else
+        return { success = false, message = 'Database error' }
+    end
+end)
+
 -- Save/Edit Weapon Info (from NUI)
 ps.registerCallback(resourceName .. ':server:saveWeaponInfo', function(source, payload)
     local src = source

From 7bfa4854e28f8604a9618f51357bc6497b7cf45b Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 28 Apr 2026 03:22:56 +0200
Subject: [PATCH 016/144] Added `SAVE_WEAPON_FLAGS` to `NUI_EVENTS.WEAPON`

Added `SAVE_WEAPON_FLAGS` to `NUI_EVENTS.WEAPON`
---
 web/src/constants/nuiEvents.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index e5175863..99a39b3a 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -97,6 +97,7 @@ export const NUI_EVENTS = {
 		GET_WEAPON: "getWeapon",
 		GET_WEAPON_HISTORY: "getWeaponOwnershipHistory",
 		UPDATE_WEAPON: "updateWeapon",
+		SAVE_WEAPON_FLAGS: "saveWeaponFlags",
 	},
 	CHARGE: {
 		GET_CHARGES: "getCharges",

From eedc11c68fbb5e48979045e564a99e588b920679 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:25:21 +0200
Subject: [PATCH 017/144] changes from files to link, added hover for picture

changes from files to link, added hover for picture to make it bigger
---
 .../report-editor/EvidenceManager.svelte      | 642 +++++++++++-------
 1 file changed, 402 insertions(+), 240 deletions(-)

diff --git a/web/src/components/report-editor/EvidenceManager.svelte b/web/src/components/report-editor/EvidenceManager.svelte
index 0949dbce..535cf8ec 100644
--- a/web/src/components/report-editor/EvidenceManager.svelte
+++ b/web/src/components/report-editor/EvidenceManager.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
 	import type { Evidence } from "../../interfaces/IReportEditor";
 
+	interface EvidenceWithImages extends Omit<Evidence, "images"> {
+    	images: string[];
+		caseId?: string;
+	}
+
 	interface Props {
-		evidence: Evidence[];
+		evidence: EvidenceWithImages[];
 		onAddEvidence: () => void;
 		onRemoveEvidence: (id: string) => void;
-		onUpdateEvidence: (evidence: Evidence) => void;
-		onOpenImageUpload: (evidenceId: string) => void;
+		onUpdateEvidence: (evidence: EvidenceWithImages) => void;
 		onRemoveImage: (evidenceId: string, imageIndex: number) => void;
 		onLinkEvidenceCase: (evidenceId: string, caseId: string) => void;
 		onCreateCaseFromEvidence: (evidenceId: string) => void;
 		onNavigateToCases?: () => void;
-		onNavigateToEvidence?: () => void;
 	}
 
 	let {
@@ -19,12 +22,10 @@
 		onAddEvidence,
 		onRemoveEvidence,
 		onUpdateEvidence,
-		onOpenImageUpload,
 		onRemoveImage,
 		onLinkEvidenceCase,
 		onCreateCaseFromEvidence,
 		onNavigateToCases,
-		onNavigateToEvidence,
 	}: Props = $props();
 
 	const evidenceTypes = [
@@ -37,150 +38,237 @@
 		"Other",
 	];
 
-	function updateEvidence(id: string, field: keyof Evidence, value: any) {
+	// --- Add Image Modal state ---
+	let addImgOpen = $state(false);
+	let addImgEvidenceId = $state<string | null>(null);
+	let addImgUrl = $state("");
+
+	// --- Lightbox state ---
+	let lightboxOpen = $state(false);
+	let lightboxUrl = $state("");
+
+	function updateEvidence(id: string, field: keyof EvidenceWithImages, value: any) {
 		const item = evidence.find((e) => e.id === id);
 		if (item) {
-			const updated = { ...item, [field]: value };
-			onUpdateEvidence(updated);
+			onUpdateEvidence({ ...item, [field]: value });
 		}
 	}
 
+	function openAddImage(evidenceId: string) {
+		addImgEvidenceId = evidenceId;
+		addImgUrl = "";
+		addImgOpen = true;
+	}
+
+	function confirmAddImage() {
+		const url = addImgUrl.trim();
+		if (!url || !addImgEvidenceId) return;
+		const item = evidence.find((e) => e.id === addImgEvidenceId);
+		if (item) {
+			onUpdateEvidence({
+				...item,
+				images: [...item.images, url],
+			});
+		}
+		addImgOpen = false;
+	}
+
+	function openLightbox(url: string) {
+		lightboxUrl = url;
+		lightboxOpen = true;
+	}
+
 	function linkEvidenceCase(evidenceId: string, caseId: string) {
 		if (!caseId.trim()) return;
 		onLinkEvidenceCase(evidenceId, caseId.trim());
 	}
 </script>
 
+<!-- Add Image Modal -->
+{#if addImgOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="modal-backdrop"
+		onclick={(e) => { if (e.target === e.currentTarget) addImgOpen = false; }}
+	>
+		<div class="modal" role="dialog" aria-modal="true" tabindex="-1">
+			<div class="modal-header">
+				<h3>Add Image</h3>
+				<button class="close-btn" aria-label="Close" onclick={() => (addImgOpen = false)}>
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+					</svg>
+				</button>
+			</div>
+			<div class="modal-body form-body">
+				<div class="form-group">
+					<span class="field-label">Image URL</span>
+					<input
+						class="form-input"
+						type="url"
+						placeholder="https://example.com/photo.jpg"
+						bind:value={addImgUrl}
+					/>
+					{#if addImgUrl.trim()}
+						<span class="url-hint">
+							<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+							</svg>
+							Use <a href="https://fivemanage.com" target="_blank" rel="noopener noreferrer">FiveManage</a> to make sure your links persist forever.
+						</span>
+					{/if}
+				</div>
+			</div>
+			<div class="modal-footer">
+				<button class="cancel-btn" onclick={() => (addImgOpen = false)}>Cancel</button>
+				<button class="primary-btn" onclick={confirmAddImage}>Add Image</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Lightbox -->
+{#if lightboxOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="modal-backdrop"
+		onclick={(e) => { if (e.target === e.currentTarget) lightboxOpen = false; }}
+	>
+		<div class="modal lightbox-modal" role="dialog" aria-modal="true" tabindex="-1">
+			<div class="modal-header">
+				<h3>Evidence Image</h3>
+				<button class="close-btn" aria-label="Close" onclick={() => (lightboxOpen = false)}>
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+					</svg>
+				</button>
+			</div>
+			<div class="modal-body lightbox-body">
+				<img class="lightbox-img" src={lightboxUrl} alt="Evidence" />
+			</div>
+		</div>
+	</div>
+{/if}
+
 <div class="metadata-section">
 	<div class="section-header">
 		<span class="section-label">EVIDENCE</span>
-		<button
-			class="add-btn"
-			onclick={onAddEvidence}
-			title="Add Evidence"
-			aria-label="Add Evidence"
-		>+ Add</button>
+		<button class="add-btn" onclick={onAddEvidence} aria-label="Add Evidence">+ Add</button>
 	</div>
 
-	{#if evidence.length > 0}
-		{#each evidence as item}
-			<div class="evidence-card">
-				<div class="card-top">
-					<div class="card-info">
-						<input
-							type="text"
-							placeholder="Evidence Title"
-							value={item.title}
-							oninput={(e) => updateEvidence(item.id, "title", e.currentTarget.value)}
-							class="title-input"
-						/>
-						{#if (item as any).caseId}
-							{#if onNavigateToCases}
-								<!-- svelte-ignore a11y_click_events_have_key_events -->
-								<span class="case-badge nav-link" role="button" tabindex="-1" onclick={onNavigateToCases}>Case #{(item as any).caseId}</span>
-							{:else}
-								<span class="case-badge">Case #{(item as any).caseId}</span>
-							{/if}
+	{#each evidence as item}
+		<div class="evidence-card">
+			<div class="card-top">
+				<div class="card-info">
+					<input
+						type="text"
+						placeholder="Evidence Title"
+						value={item.title}
+						oninput={(e) => updateEvidence(item.id, "title", e.currentTarget.value)}
+						class="title-input"
+					/>
+					{#if item.caseId}
+						{#if onNavigateToCases}
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<span class="case-badge nav-link" role="button" tabindex="-1" onclick={onNavigateToCases}>
+								Case #{item.caseId}
+							</span>
+						{:else}
+							<span class="case-badge">Case #{item.caseId}</span>
 						{/if}
-					</div>
-					<button
-						class="remove-btn"
-						onclick={() => onRemoveEvidence(item.id)}
-						aria-label="Remove evidence"
-					>
-						<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
-							<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-						</svg>
-					</button>
+					{/if}
 				</div>
+				<button class="remove-btn" onclick={() => onRemoveEvidence(item.id)} aria-label="Remove evidence">
+					<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+					</svg>
+				</button>
+			</div>
 
-				<div class="card-fields">
-					<div class="field-row">
-						<select
-							value={item.type}
-							onchange={(e) => updateEvidence(item.id, "type", e.currentTarget.value)}
-							class="field-select"
-						>
-							{#each evidenceTypes as type}
-								<option value={type}>{type}</option>
-							{/each}
-						</select>
-						<input
-							type="text"
-							placeholder="Serial Number"
-							value={item.serial}
-							oninput={(e) => updateEvidence(item.id, "serial", e.currentTarget.value)}
-							class="field-input"
-						/>
-					</div>
-					<textarea
-						placeholder="Notes"
-						value={item.notes}
-						oninput={(e) => updateEvidence(item.id, "notes", e.currentTarget.value)}
-						class="notes-input"
-					></textarea>
+			<div class="card-fields">
+				<div class="field-row">
+					<select
+						value={item.type}
+						onchange={(e) => updateEvidence(item.id, "type", e.currentTarget.value)}
+						class="field-select"
+					>
+						{#each evidenceTypes as type}
+							<option value={type}>{type}</option>
+						{/each}
+					</select>
+					<input
+						type="text"
+						placeholder="Serial Number"
+						value={item.serial}
+						oninput={(e) => updateEvidence(item.id, "serial", e.currentTarget.value)}
+						class="field-input"
+					/>
 				</div>
+				<textarea
+					placeholder="Notes"
+					value={item.notes}
+					oninput={(e) => updateEvidence(item.id, "notes", e.currentTarget.value)}
+					class="notes-input"
+				></textarea>
+			</div>
 
-				<div class="card-actions">
-					<div class="link-row">
-						<input
-							type="text"
-							class="field-input"
-							placeholder="Case ID"
-							value={(item as any).caseId || ""}
-							onchange={(e) => linkEvidenceCase(item.id, e.currentTarget.value)}
-						/>
-						<button class="action-btn" onclick={() => onCreateCaseFromEvidence(item.id)}>
-							Create Case
-						</button>
-					</div>
-					<div class="image-actions">
-						<button class="action-btn" onclick={() => onOpenImageUpload(item.id)}>
-							Add Image
-						</button>
-						{#if item.images.length > 0}
-							<span class="image-count">{item.images.length} image{item.images.length > 1 ? "s" : ""}</span>
-						{/if}
-					</div>
+			<div class="card-actions">
+				<div class="image-actions">
+					<button class="action-btn" onclick={() => openAddImage(item.id)}>
+						Add Image
+					</button>
+					{#if item.images.length > 0}
+						<span class="image-count">
+							{item.images.length} image{item.images.length > 1 ? "s" : ""}
+						</span>
+					{/if}
 				</div>
-
-				{#if item.images.length > 0}
-					<div class="images-grid">
-						{#each item.images as image, imageIndex}
-							<div class="image-item">
-								<img src={image} alt="Evidence" class="evidence-image" />
-								<button
-									class="image-remove-btn"
-									onclick={() => onRemoveImage(item.id, imageIndex)}
-									aria-label="Remove image"
-								>
-									<svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
-										<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-									</svg>
-								</button>
-							</div>
-						{/each}
-					</div>
-				{/if}
 			</div>
-		{/each}
-	{/if}
+
+			{#if item.images.length > 0}
+				<div class="images-grid">
+					{#each item.images as image, imageIndex}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							class="image-item"
+							role="button"
+							tabindex="0"
+							onclick={() => openLightbox(image)}
+							onkeydown={(e) => e.key === "Enter" && openLightbox(image)}
+						>
+							<img src={image} alt={"Evidence"} class="evidence-image" />
+							<button
+								class="image-remove-btn"
+								onclick={(e) => { e.stopPropagation(); onRemoveImage(item.id, imageIndex); }}
+								aria-label="Remove image"
+							>
+								<svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
+									<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+								</svg>
+							</button>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/each}
 </div>
 
 <style>
+	/* ── Section ── */
 	.metadata-section {
 		padding-bottom: 12px;
 		margin-bottom: 12px;
 		border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 	}
-
 	.section-header {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		margin-bottom: 8px;
 	}
-
 	.section-label {
 		font-size: 10px;
 		font-weight: 600;
@@ -188,7 +276,6 @@
 		text-transform: uppercase;
 		letter-spacing: 0.6px;
 	}
-
 	.add-btn {
 		background: transparent;
 		border: none;
@@ -199,37 +286,15 @@
 		padding: 2px 6px;
 		transition: color 0.1s;
 	}
+	.add-btn:hover { color: rgba(255, 255, 255, 0.55); }
 
-	.add-btn:hover {
-		color: rgba(255, 255, 255, 0.5);
-	}
-
-	.empty-text {
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 10px;
-		text-align: center;
-		padding: 10px;
-		background: transparent;
-		border: 1px dashed rgba(255, 255, 255, 0.04);
-		border-radius: 3px;
-	}
-
+	/* ── Evidence card ── */
 	.evidence-card {
-		background: transparent;
-		border: none;
 		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-		border-radius: 0;
 		padding: 8px 0;
-		margin-bottom: 0;
-	}
-
-	.evidence-card:last-child {
-		margin-bottom: 0;
-	}
-
-	.evidence-card:hover .remove-btn {
-		opacity: 1;
 	}
+	.evidence-card:last-child { margin-bottom: 0; }
+	.evidence-card:hover .remove-btn { opacity: 1; }
 
 	.card-top {
 		display: flex;
@@ -238,13 +303,7 @@
 		gap: 8px;
 		margin-bottom: 8px;
 	}
-
-	.card-info {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		flex: 1;
-	}
+	.card-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
 
 	.title-input {
 		background: transparent;
@@ -256,31 +315,12 @@
 		padding: 2px 0;
 		width: 100%;
 	}
+	.title-input:focus { outline: none; border-bottom-color: rgba(255, 255, 255, 0.1); }
+	.title-input::placeholder { color: rgba(255, 255, 255, 0.4); }
 
-	.title-input:focus {
-		outline: none;
-		border-bottom-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.title-input::placeholder {
-		color: rgba(255, 255, 255, 0.4);
-	}
-
-	.case-badge {
-		font-size: 11px;
-		color: rgba(var(--accent-text-rgb), 0.7);
-		font-weight: 500;
-	}
-
-	.nav-link {
-		cursor: pointer;
-		transition: all 0.12s ease;
-	}
-
-	.nav-link:hover {
-		color: rgba(var(--accent-text-rgb), 1);
-		text-decoration: underline;
-	}
+	.case-badge { font-size: 11px; color: rgba(var(--accent-text-rgb), 0.7); font-weight: 500; }
+	.nav-link { cursor: pointer; transition: color 0.12s; }
+	.nav-link:hover { color: rgba(var(--accent-text-rgb), 1); text-decoration: underline; }
 
 	.remove-btn {
 		display: flex;
@@ -295,32 +335,23 @@
 		cursor: pointer;
 		flex-shrink: 0;
 		opacity: 0;
+		transition: opacity 0.15s, background 0.15s;
 	}
+	.remove-btn:hover { background: rgba(239, 68, 68, 0.3); }
 
-	.remove-btn:hover {
-		background: rgba(239, 68, 68, 0.3);
-	}
-
-	.card-fields {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		margin-bottom: 8px;
-	}
-
-	.field-row {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 6px;
-	}
+	/* ── Fields ── */
+	.card-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
+	.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
 
 	.field-select {
 		padding: 4px 24px 4px 8px;
 		font-size: 11px;
 		font-weight: 500;
 		border-radius: 4px;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		color: rgba(255, 255, 255, 0.7);
 	}
-
 	.field-input {
 		background: rgba(255, 255, 255, 0.03);
 		border: 1px solid rgba(255, 255, 255, 0.06);
@@ -329,15 +360,8 @@
 		color: rgba(255, 255, 255, 0.7);
 		font-size: 11px;
 	}
-
-	.field-input:focus {
-		outline: none;
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.field-input::placeholder {
-		color: rgba(255, 255, 255, 0.4);
-	}
+	.field-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.1); }
+	.field-input::placeholder { color: rgba(255, 255, 255, 0.4); }
 
 	.notes-input {
 		background: rgba(255, 255, 255, 0.03);
@@ -349,17 +373,12 @@
 		min-height: 36px;
 		resize: vertical;
 		font-family: inherit;
+		width: 100%;
 	}
+	.notes-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.1); }
+	.notes-input::placeholder { color: rgba(255, 255, 255, 0.4); }
 
-	.notes-input:focus {
-		outline: none;
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.notes-input::placeholder {
-		color: rgba(255, 255, 255, 0.4);
-	}
-
+	/* ── Card actions ── */
 	.card-actions {
 		display: flex;
 		flex-direction: column;
@@ -367,29 +386,10 @@
 		padding-top: 8px;
 		border-top: 1px solid rgba(255, 255, 255, 0.04);
 	}
-
-	.link-row {
-		display: flex;
-		gap: 6px;
-		align-items: center;
-	}
-
-	.link-row .field-input {
-		flex: 1;
-		max-width: 100px;
-	}
-
-	.image-actions {
-		display: flex;
-		gap: 6px;
-		align-items: center;
-	}
-
-	.image-count {
-		font-size: 11px;
-		color: rgba(255, 255, 255, 0.5);
-	}
-
+	.link-row { display: flex; gap: 6px; align-items: center; }
+	.link-row .field-input { flex: 1; max-width: 100px; }
+	.image-actions { display: flex; gap: 6px; align-items: center; }
+	.image-count { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
 	.action-btn {
 		background: rgba(255, 255, 255, 0.04);
 		color: rgba(255, 255, 255, 0.5);
@@ -400,13 +400,11 @@
 		font-weight: 500;
 		cursor: pointer;
 		white-space: nowrap;
+		transition: background 0.12s, color 0.12s;
 	}
+	.action-btn:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.75); }
 
-	.action-btn:hover {
-		background: rgba(255, 255, 255, 0.06);
-		color: rgba(255, 255, 255, 0.7);
-	}
-
+	/* ── Images grid ── */
 	.images-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
@@ -415,21 +413,39 @@
 		padding-top: 8px;
 		border-top: 1px solid rgba(255, 255, 255, 0.04);
 	}
-
 	.image-item {
 		position: relative;
 		aspect-ratio: 1;
 		border-radius: 4px;
 		overflow: hidden;
 		border: 1px solid rgba(255, 255, 255, 0.06);
+		cursor: pointer;
 	}
-
 	.evidence-image {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
-		cursor: pointer;
+		display: block;
+		transition: transform 0.2s ease;
 	}
+	.image-item:hover .evidence-image { transform: scale(1.04); }
+
+	.img-tooltip {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.75);
+		color: rgba(255, 255, 255, 0.85);
+		font-size: 10px;
+		padding: 4px 5px;
+		transform: translateY(100%);
+		transition: transform 0.18s ease;
+		pointer-events: none;
+		word-break: break-word;
+		line-height: 1.3;
+	}
+	.image-item:hover .img-tooltip { transform: translateY(0); }
 
 	.image-remove-btn {
 		position: absolute;
@@ -446,9 +462,155 @@
 		align-items: center;
 		justify-content: center;
 		opacity: 0;
+		transition: opacity 0.15s;
 	}
+	.image-item:hover .image-remove-btn { opacity: 1; }
+
+	/* ── Modal — matches BOLO design ── */
+	.modal-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.7);
+		backdrop-filter: blur(4px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 999;
+	}
+	.modal {
+		background: var(--card-dark-bg);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 6px;
+		width: min(400px, 92vw);
+		max-height: 85vh;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+	}
+	.lightbox-modal { width: min(640px, 92vw); }
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 16px;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+	}
+	.modal-header h3 {
+		margin: 0;
+		font-size: 12px;
+		font-weight: 600;
+		color: rgba(255, 255, 255, 0.85);
+	}
+	.close-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		color: rgba(255, 255, 255, 0.3);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		padding: 4px;
+		border-radius: 3px;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+	.close-btn:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+
+	.modal-body { padding: 14px 16px; overflow-y: auto; }
 
-	.image-item:hover .image-remove-btn {
-		opacity: 1;
+	.form-body { display: flex; flex-direction: column; gap: 10px; }
+	.form-group { display: flex; flex-direction: column; gap: 3px; }
+
+	.field-label {
+		color: rgba(255, 255, 255, 0.35);
+		font-size: 9px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.6px;
+	}
+	.field-value {
+		color: rgba(255, 255, 255, 0.7);
+		font-size: 11px;
+		font-weight: 500;
+		margin: 2px 0 0;
+	}
+
+	.form-input {
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 5px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		transition: border-color 0.1s;
+		font-family: inherit;
+		width: 100%;
+	}
+	.form-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.1); }
+	.form-input::placeholder { color: rgba(255, 255, 255, 0.2); }
+
+	/* FiveManage hint — appears when URL is typed */
+	.url-hint {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		margin-top: 5px;
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.25);
+		line-height: 1.4;
+	}
+	.url-hint svg { flex-shrink: 0; opacity: 0.45; }
+	.url-hint a {
+		color: rgba(var(--accent-text-rgb), 0.5);
+		text-decoration: none;
+		transition: color 0.1s;
+	}
+	.url-hint a:hover { color: rgba(var(--accent-text-rgb), 0.85); text-decoration: underline; }
+
+	.modal-footer {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 6px;
+		padding: 10px 16px;
+		border-top: 1px solid rgba(255, 255, 255, 0.06);
+	}
+	.modal-footer-end { justify-content: flex-end; }
+
+	.cancel-btn {
+		background: transparent;
+		color: rgba(255, 255, 255, 0.4);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 4px 10px;
+		font-size: 10px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+	.cancel-btn:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+
+	.primary-btn {
+		background: rgba(16, 185, 129, 0.06);
+		color: rgba(52, 211, 153, 0.7);
+		border: 1px solid rgba(16, 185, 129, 0.1);
+		border-radius: 3px;
+		padding: 4px 12px;
+		font-size: 10px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+	.primary-btn:hover { background: rgba(16, 185, 129, 0.12); color: rgba(110, 231, 183, 0.9); }
+
+	/* ── Lightbox body ── */
+	.lightbox-body { display: flex; flex-direction: column; gap: 12px; }
+	.lightbox-img {
+		width: 100%;
+		max-height: 60vh;
+		object-fit: contain;
+		border-radius: 4px;
+		border: 1px solid rgba(255, 255, 255, 0.06);
 	}
-</style>
+</style>
\ No newline at end of file

From 90a68fa8be58a15aa73ff3d5f31aad5ffdd0627d Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:27:06 +0200
Subject: [PATCH 018/144] changes stuff in cases.lua (sry)

changes stuff in cases.lua (sry)

From 95beb065523ba90c48eb13bc426820336ad63027 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:28:10 +0200
Subject: [PATCH 019/144] added title and images to mdt_reports_evidence
 database

added title and images to mdt_reports_evidence database

ALTER TABLE mdt_reports_evidence
  ADD COLUMN title VARCHAR(255) NOT NULL DEFAULT '' AFTER reportid,
  ADD COLUMN images LONGTEXT NULL DEFAULT NULL AFTER stored;
---
 server/backend/reports.lua | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/server/backend/reports.lua b/server/backend/reports.lua
index 13b66572..9794939f 100644
--- a/server/backend/reports.lua
+++ b/server/backend/reports.lua
@@ -290,10 +290,16 @@ ps.registerCallback(resourceName..':server:getReport', function(source, reportid
             ) FROM mdt_reports_charges mrc WHERE mrc.reportid = mr.id) as charges,
             (SELECT JSON_ARRAYAGG(
                 JSON_OBJECT(
+                    'title', mre.title,
                     'type', mre.type,
                     'content', mre.content,
                     'note', mre.note,
-                    'stored', mre.stored
+                    'stored', mre.stored,
+                    'images', CASE
+                        WHEN mre.images IS NOT NULL AND mre.images != ''
+                        THEN JSON_EXTRACT(mre.images, '$')
+                        ELSE JSON_ARRAY()
+                    END
                 )
             ) FROM mdt_reports_evidence mre WHERE mre.reportid = mr.id) as evidence,
             (SELECT JSON_ARRAYAGG(
@@ -700,10 +706,21 @@ ps.registerCallback(resourceName..':server:saveReport', function(source, reportD
 
     if reportData.evidence and #reportData.evidence > 0 then
         for _, evidence in ipairs(reportData.evidence) do
+            local imagesJson = nil
+            if evidence.images and type(evidence.images) == 'table' and #evidence.images > 0 then
+                imagesJson = json.encode(evidence.images)
+            end
             table.insert(attachmentQueries, {
-                query =
-                "INSERT INTO mdt_reports_evidence (reportid, type, content, note, stored) VALUES (?, ?, ?, ?, ?)",
-                values = { reportId, evidence.type, evidence.content, evidence.note, evidence.stored or 0 }
+                query = "INSERT INTO mdt_reports_evidence (reportid, title, type, content, note, stored, images) VALUES (?, ?, ?, ?, ?, ?, ?)",
+                values = {
+                    reportId,
+                    evidence.title or '',
+                    evidence.type or 'Physical',
+                    evidence.content or '',
+                    evidence.note or '',
+                    evidence.stored or 0,
+                    imagesJson
+                }
             })
         end
     end

From e7b84849361d325dabbdd30c89e6fb3f5e9301a9 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:28:36 +0200
Subject: [PATCH 020/144] added title and images to mdt_reports_evidence

added title and images to mdt_reports_evidence
---
 client/backend/reports.lua | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/backend/reports.lua b/client/backend/reports.lua
index 85306895..c87e879b 100644
--- a/client/backend/reports.lua
+++ b/client/backend/reports.lua
@@ -106,9 +106,12 @@ RegisterNUICallback('saveReport', function(data, cb)
     if data.evidence then
         for _, item in ipairs(data.evidence) do
             table.insert(evidence, {
+                title = item.title or '',
                 type = item.type or 'Evidence',
-                content = item.serial or (item.images and item.images[1]) or item.title or '',
-                note = item.notes or ''
+                content = item.serial or '',
+                note = item.notes or '',
+                stored = item.stored or 0,
+                images = item.images or {}
             })
         end
     end

From b31a3bc4e5e3e838a0a5f38139f4c03e60eea1f0 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:30:47 +0200
Subject: [PATCH 021/144] added profile images as link not file and gallery,
 removed mugshot

added profile images as link not file and gallery, removed mugshot
profile images as links not files
gallery to add picture manually usage of mdt_citizen_gallery
remove mugshot button ( broken rn )
---
 web/src/pages/Citizens.svelte | 746 +++++++++++++++++++++-------------
 1 file changed, 454 insertions(+), 292 deletions(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index ec279964..299ad533 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -7,7 +7,6 @@
 	import { openReportInEditor } from "../stores/reportsStore";
 	import type { createTabService } from "../services/tabService.svelte";
 	import { globalNotifications } from "../services/notificationService.svelte";
-	import { compressImage } from "../services/uploadService";
 	import { openBoloDetail } from "../stores/navigationStore";
 	import Pagination from "../components/Pagination.svelte";
 
@@ -50,6 +49,11 @@
 		flags: string[];
 		image?: string;
 		notes?: string;
+		gallery?: Array<{
+			image: string;
+			label?: string;
+			datecreated?: string;
+		}>;
 		licenses?: {
 			driver?: boolean;
 			weapon?: boolean;
@@ -107,6 +111,124 @@
 	let copyNotice = $state("");
 	let copyTimeout: ReturnType<typeof setTimeout> | null = null;
 
+	// ── Photo URL modal state ──
+	let photoModalOpen = $state(false);
+	let photoUrlInput = $state("");
+	let photoSaving = $state(false);
+
+	// ── Gallery Modal ──
+	let galleryOpen = $state(false);
+	let galleryAddOpen = $state(false);
+	let galleryAddUrl = $state("");
+	let galleryAdding = $state(false);
+
+	async function addGalleryImage() {
+		const url = galleryAddUrl.trim();
+		if (!url || !selectedProfile || galleryAdding) return;
+		galleryAdding = true;
+		try {
+			const result = await fetchNui<{ success: boolean }>(
+				NUI_EVENTS.CITIZEN.ADD_CITIZEN_GALLERY,
+				{ citizenid: selectedProfile.citizenid, image: url, label: 'Manually Added' },
+				{ success: true }
+			);
+			if (result.success) {
+				selectedProfile = {
+					...selectedProfile,
+					gallery: [...(selectedProfile.gallery ?? []), { image: url }]
+				};
+				galleryImages = [
+					...(selectedProfile.image && !citizenImageBroken ? [selectedProfile.image] : []),
+					...(selectedProfile.gallery ?? []).map(g => g.image)
+				];
+				galleryAddUrl = "";
+				galleryAddOpen = false;
+				globalNotifications.success("Image added");
+			} else {
+				globalNotifications.error("Failed to add image");
+			}
+		} catch {
+			globalNotifications.error("Failed to add image");
+		}
+		galleryAdding = false;
+	}
+
+	async function removeGalleryImage(url: string) {
+		if (!selectedProfile) return;
+		try {
+			const result = await fetchNui<{ success: boolean }>(
+				NUI_EVENTS.CITIZEN.REMOVE_CITIZEN_GALLERY,
+				{ citizenid: selectedProfile.citizenid, image: url },
+				{ success: true }
+			);
+			if (result.success) {
+				selectedProfile = {
+					...selectedProfile,
+					gallery: (selectedProfile.gallery ?? []).filter(g => g.image !== url)
+				};
+				galleryImages = galleryImages.filter(img => img !== url);
+				globalNotifications.success("Image removed");
+			} else {
+				globalNotifications.error("Failed to remove image");
+			}
+		} catch {
+			globalNotifications.error("Failed to remove image");
+		}
+	}
+
+	let galleryImages: string[] = $state([]);
+	let lightboxOpen = $state(false);
+	let lightboxUrl = $state("");
+
+	function openGallery() {
+		if (!selectedProfile) return;
+		galleryImages = (selectedProfile.gallery ?? []).map(g => g.image);
+		galleryOpen = true;
+	}
+
+	function openLightbox(url: string) {
+		lightboxUrl = url;
+		lightboxOpen = true;
+	}
+
+	function openPhotoModal() {
+		photoUrlInput = "";
+		photoModalOpen = true;
+	}
+
+	function closePhotoModal() {
+		photoModalOpen = false;
+		photoUrlInput = "";
+	}
+
+	async function confirmPhotoUrl() {
+		const url = photoUrlInput.trim();
+		if (!url || !selectedProfile || photoSaving) return;
+		photoSaving = true;
+		try {
+			const result = await fetchNui<{ success: boolean; message?: string; imageUrl?: string }>(
+				NUI_EVENTS.CITIZEN.UPLOAD_SUSPECT_PHOTO,
+				{ citizenid: selectedProfile.citizenid, image: url },
+				{ success: true, message: "Photo saved", imageUrl: url },
+			);
+			if (result.success) {
+				citizenImageBroken = false;
+				const newUrl = result.imageUrl || url;
+				selectedProfile = { ...selectedProfile, image: newUrl };
+				citizens = citizens.map((c) =>
+					c.cid === selectedProfile!.citizenid ? { ...c, image: newUrl } : c,
+				);
+				globalNotifications.success(result.message || "Photo updated");
+				closePhotoModal();
+			} else {
+				globalNotifications.error(result.message || "Failed to update photo");
+			}
+		} catch {
+			globalNotifications.error("Failed to update photo");
+		}
+		photoSaving = false;
+	}
+
 	let citizenPage = $state(1);
 	let citizenPerPage = $state(25);
 
@@ -127,7 +249,6 @@
 		return allFilteredCitizens.slice(start, start + citizenPerPage);
 	});
 
-	// Reset to page 1 when search changes
 	$effect(() => {
 		searchQuery;
 		citizenPage = 1;
@@ -145,7 +266,6 @@
 		loading = false;
 	}
 
-
 	onMount(async () => {
 		if (isEnvBrowser()) {
 			loading = false;
@@ -182,7 +302,6 @@
 		if (!raw) return "Unknown";
 		const num = typeof raw === "string" ? Number(raw) : raw;
 		if (!isNaN(num) && num > 1000000000) {
-			// Unix timestamp - if > 10 digits it's milliseconds
 			const ms = num > 9999999999 ? num : num * 1000;
 			const d = new Date(ms);
 			return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
@@ -190,12 +309,8 @@
 		return String(raw);
 	}
 
-	let hasActiveWarrants = $derived(
-		(selectedProfile?.activeWarrants?.length ?? 0) > 0,
-	);
-	let hasActiveBolos = $derived(
-		(selectedProfile?.activeBolos?.length ?? 0) > 0,
-	);
+	let hasActiveWarrants = $derived((selectedProfile?.activeWarrants?.length ?? 0) > 0);
+	let hasActiveBolos = $derived((selectedProfile?.activeBolos?.length ?? 0) > 0);
 
 	// Fingerprint editing
 	let editingFingerprint = $state(false);
@@ -211,7 +326,6 @@
 		editingFingerprint = false;
 		const trimmed = fingerprintValue.trim();
 		if (trimmed === (selectedProfile.fingerprint || "")) return;
-
 		try {
 			const result = await fetchNui<{ success: boolean }>(
 				NUI_EVENTS.CITIZEN.UPDATE_CITIZEN_FINGERPRINT,
@@ -221,9 +335,7 @@
 			if (result?.success && selectedProfile) {
 				selectedProfile.fingerprint = trimmed;
 			}
-		} catch {
-			// silent fail
-		}
+		} catch { /* silent */ }
 	}
 
 	// DNA editing
@@ -240,7 +352,6 @@
 		editingDNA = false;
 		const trimmed = dnaValue.trim();
 		if (trimmed === (selectedProfile.dna || "")) return;
-
 		try {
 			const result = await fetchNui<{ success: boolean }>(
 				NUI_EVENTS.CITIZEN.UPDATE_CITIZEN_DNA,
@@ -250,9 +361,7 @@
 			if (result?.success && selectedProfile) {
 				selectedProfile.dna = trimmed;
 			}
-		} catch {
-			// silent fail
-		}
+		} catch { /* silent */ }
 	}
 
 	async function viewProfile(citizenId: string) {
@@ -266,27 +375,12 @@
 			return;
 		}
 		try {
-			const response = await fetchNui(NUI_EVENTS.CITIZEN.GET_CITIZEN, {
-				citizenid: citizenId,
-			});
+			const response = await fetchNui(NUI_EVENTS.CITIZEN.GET_CITIZEN, { citizenid: citizenId });
 			if (response?.profile) {
 				selectedProfile = response.profile;
 				citizens = citizens.map((citizen) =>
 					citizen.cid === response.profile.citizenid
-						? {
-								...citizen,
-								firstName: response.profile.firstName,
-								lastName: response.profile.lastName,
-								gender: response.profile.gender,
-								dob: response.profile.dob,
-								phone: response.profile.phone,
-								image: response.profile.image,
-								occupations: response.profile.occupations || citizen.occupations,
-								properties: response.profile.properties,
-								vehicles: response.profile.vehicles,
-								arrests: response.profile.arrests,
-								flags: response.profile.flags || citizen.flags,
-						}
+						? { ...citizen, firstName: response.profile.firstName, lastName: response.profile.lastName, gender: response.profile.gender, dob: response.profile.dob, phone: response.profile.phone, image: response.profile.image, occupations: response.profile.occupations || citizen.occupations, properties: response.profile.properties, vehicles: response.profile.vehicles, arrests: response.profile.arrests, flags: response.profile.flags || citizen.flags }
 						: citizen,
 				);
 			}
@@ -299,7 +393,6 @@
 		selectedProfile = null;
 	}
 
-	// ── Profile section pagination ──
 	const SECTION_PAGE_SIZE = 3;
 	let vehiclesPage = $state(1);
 	let propertiesPage = $state(1);
@@ -308,7 +401,6 @@
 	let reportsPage = $state(1);
 	let licensesPage = $state(1);
 
-	// Reset pages when profile changes
 	$effect(() => {
 		if (selectedProfile) {
 			vehiclesPage = 1;
@@ -331,57 +423,13 @@
 		return Math.ceil(items.length / SECTION_PAGE_SIZE);
 	}
 
-	// Track broken profile images
 	let citizenImageBroken = $state(false);
 	function handleImageError() { citizenImageBroken = true; }
 
-	// Reset broken state when profile changes
 	$effect(() => {
 		if (selectedProfile) citizenImageBroken = false;
 	});
 
-	// Photo upload/mugshot for citizen profile
-	let citizenPhotoInput: HTMLInputElement | undefined = $state();
-	let uploading = $state(false);
-
-	function openCitizenPhotoUpload() {
-		citizenPhotoInput?.click();
-	}
-
-	async function handleCitizenPhotoUpload(event: Event) {
-		const input = event.target as HTMLInputElement;
-		const file = input.files?.[0];
-		if (!file || !selectedProfile) return;
-
-		uploading = true;
-		globalNotifications.info("Uploading photo...");
-
-		try {
-			const base64 = await compressImage(file);
-
-			const result = await fetchNui<{ success: boolean; message?: string; imageUrl?: string }>(
-				NUI_EVENTS.CITIZEN.UPLOAD_SUSPECT_PHOTO,
-				{ citizenid: selectedProfile.citizenid, image: base64 },
-				{ success: true, message: "Photo uploaded", imageUrl: base64 },
-			);
-
-			if (result.success) {
-				citizenImageBroken = false;
-				selectedProfile = { ...selectedProfile, image: result.imageUrl || base64 };
-				citizens = citizens.map((c) =>
-					c.cid === selectedProfile!.citizenid ? { ...c, image: result.imageUrl || base64 } : c,
-				);
-				globalNotifications.success(result.message || "Photo uploaded");
-			} else {
-				globalNotifications.error(result.message || "Failed to upload photo");
-			}
-		} catch {
-			globalNotifications.error("Failed to upload photo");
-		}
-		uploading = false;
-		input.value = "";
-	}
-
 	async function triggerCitizenMugshot() {
 		if (!selectedProfile) return;
 		try {
@@ -407,7 +455,6 @@
 		}
 	}
 
-	// Vehicle detail modal
 	interface VehicleDetail {
 		plate: string;
 		vehicle: string;
@@ -429,18 +476,14 @@
 		openBoloDetail(boloId);
 		tabService.setActiveTab("BOLOs");
 		const activeInstance = tabService.getActiveInstance();
-		if (activeInstance) {
-			tabService.setInstanceTab(activeInstance.id, "BOLOs");
-		}
+		if (activeInstance) tabService.setInstanceTab(activeInstance.id, "BOLOs");
 	}
 
 	function goToWarrantReport(reportId: number | string) {
 		openReportInEditor(String(reportId));
 		tabService.setActiveTab("Reports");
 		const activeInstance = tabService.getActiveInstance();
-		if (activeInstance) {
-			tabService.setInstanceTab(activeInstance.id, "Reports");
-		}
+		if (activeInstance) tabService.setInstanceTab(activeInstance.id, "Reports");
 	}
 
 	async function openVehicleFromProfile(plate: string) {
@@ -449,11 +492,7 @@
 		vehicleDetail = null;
 		try {
 			const response = await fetchNui<any>(NUI_EVENTS.VEHICLE.GET_VEHICLE, { plate });
-			if (response?.vehicle) {
-				vehicleDetail = response.vehicle;
-			} else {
-				vehicleDetail = { plate, vehicle: "Unknown" };
-			}
+			vehicleDetail = response?.vehicle || { plate, vehicle: "Unknown" };
 		} catch {
 			vehicleDetail = { plate, vehicle: "Unknown" };
 		}
@@ -472,25 +511,14 @@
 			enabled,
 		});
 		if (response?.success) {
-			selectedProfile = {
-				...selectedProfile,
-				licenses: {
-					...selectedProfile.licenses,
-					[type]: enabled,
-				},
-			};
+			selectedProfile = { ...selectedProfile, licenses: { ...selectedProfile.licenses, [type]: enabled } };
 		}
 	}
 
 	async function toggleCustomLicense(licenseId: number, enabled: boolean) {
 		if (!selectedProfile) return;
 		if (isEnvBrowser()) {
-			selectedProfile = {
-				...selectedProfile,
-				customLicenses: (selectedProfile.customLicenses || []).map(l =>
-					l.id === licenseId ? { ...l, active: enabled } : l
-				),
-			};
+			selectedProfile = { ...selectedProfile, customLicenses: (selectedProfile.customLicenses || []).map(l => l.id === licenseId ? { ...l, active: enabled } : l) };
 			return;
 		}
 		const response = await fetchNui(NUI_EVENTS.CITIZEN.UPDATE_CITIZEN_CUSTOM_LICENSE, {
@@ -499,16 +527,10 @@
 			enabled,
 		});
 		if (response?.success) {
-			selectedProfile = {
-				...selectedProfile,
-				customLicenses: (selectedProfile.customLicenses || []).map(l =>
-					l.id === licenseId ? { ...l, active: enabled } : l
-				),
-			};
+			selectedProfile = { ...selectedProfile, customLicenses: (selectedProfile.customLicenses || []).map(l => l.id === licenseId ? { ...l, active: enabled } : l) };
 		}
 	}
 
-	// ── Active licenses (only ones the citizen holds) ──
 	interface LicenseEntry {
 		key: string;
 		name: string;
@@ -520,21 +542,14 @@
 	let activeLicenses = $derived.by((): LicenseEntry[] => {
 		if (!selectedProfile) return [];
 		const result: LicenseEntry[] = [];
-		if (selectedProfile.licenses?.driver) {
-			result.push({ key: "driver", name: "Driver's License", type: "state", active: true });
-		}
-		if (selectedProfile.licenses?.weapon) {
-			result.push({ key: "weapon", name: "Weapon License", type: "state", active: true });
-		}
+		if (selectedProfile.licenses?.driver) result.push({ key: "driver", name: "Driver's License", type: "state", active: true });
+		if (selectedProfile.licenses?.weapon) result.push({ key: "weapon", name: "Weapon License", type: "state", active: true });
 		for (const cl of selectedProfile.customLicenses || []) {
-			if (cl.active) {
-				result.push({ key: `custom-${cl.id}`, name: cl.name, type: "custom", active: true, customId: cl.id });
-			}
+			if (cl.active) result.push({ key: `custom-${cl.id}`, name: cl.name, type: "custom", active: true, customId: cl.id });
 		}
 		return result;
 	});
 
-	// ── Issue License modal ──
 	let showIssueLicenseModal = $state(false);
 
 	interface IssuableLicense {
@@ -567,38 +582,24 @@
 
 	function showCopyNotice(label: string) {
 		copyNotice = label;
-		if (copyTimeout) {
-			clearTimeout(copyTimeout);
-		}
-		copyTimeout = setTimeout(() => {
-			copyNotice = "";
-			copyTimeout = null;
-		}, 1400);
+		if (copyTimeout) clearTimeout(copyTimeout);
+		copyTimeout = setTimeout(() => { copyNotice = ""; copyTimeout = null; }, 1400);
 	}
 
 	async function copyToClipboard(value: string, label: string) {
 		if (!value) return;
-
-		// In FiveM NUI, the Clipboard API is blocked by permissions policy.
-		// Use NUI callback to copy via Lua's lib.setClipboard instead.
 		try {
 			await fetchNui("copyToClipboard", { text: value });
 			showCopyNotice(label);
 			return;
-		} catch {
-			// NUI callback not available (dev mode) - try browser API
-		}
-
+		} catch { /* NUI not available */ }
 		try {
 			if (navigator?.clipboard?.writeText) {
 				await navigator.clipboard.writeText(value);
 				showCopyNotice(label);
 				return;
 			}
-		} catch {
-			// Clipboard API blocked - silent
-		}
-
+		} catch { /* blocked */ }
 		try {
 			const textarea = document.createElement("textarea");
 			textarea.value = value;
@@ -609,18 +610,55 @@
 			document.execCommand("copy");
 			document.body.removeChild(textarea);
 			showCopyNotice(label);
-		} catch {
-			// Fallback also failed - silent
-		}
+		} catch { /* silent */ }
 	}
-
 </script>
 
+<!-- ── Photo URL Modal ── -->
+{#if photoModalOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="modal-overlay" onclick={(e) => { if (e.target === e.currentTarget) closePhotoModal(); }}>
+		<div class="modal-card photo-modal" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
+			<div class="modal-header">
+				<h3>Set Profile Photo</h3>
+				<button class="modal-close" onclick={closePhotoModal}>
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+				</button>
+			</div>
+			<div class="modal-body photo-modal-body">
+				<div class="photo-form-group">
+					<span class="photo-label">Image URL</span>
+					<input
+						class="photo-input"
+						type="url"
+						placeholder="https://example.com/photo.jpg"
+						bind:value={photoUrlInput}
+						onkeydown={(e) => { if (e.key === 'Enter') confirmPhotoUrl(); if (e.key === 'Escape') closePhotoModal(); }}
+					/>
+
+					<span class="url-hint">
+						<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+						</svg>
+						Use <a href="https://fivemanage.com" target="_blank" rel="noopener noreferrer">FiveManage</a> to make sure your links persist forever.
+					</span>
+				</div>
+			</div>
+			<div class="modal-footer-row">
+				<button class="photo-cancel-btn" onclick={closePhotoModal} disabled={photoSaving}>Cancel</button>
+				<button class="photo-confirm-btn" onclick={confirmPhotoUrl} disabled={photoSaving || !photoUrlInput.trim()}>
+					{photoSaving ? "Saving…" : "Set Photo"}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <div class="page">
 	{#if selectedProfile}
 		<!-- ===== PROFILE VIEW ===== -->
 		<div class="profile-view">
-			<!-- Top bar -->
 			<div class="profile-topbar">
 				<button class="back-btn" onclick={closeProfile}>
 					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
@@ -645,7 +683,6 @@
 				{/if}
 			</div>
 
-			<!-- Stats row -->
 			<div class="pstats-row">
 				<div class="pstat"><span class="pstat-val">{selectedProfile.properties}</span><span class="pstat-lbl">Properties</span></div>
 				<div class="pstat"><span class="pstat-val">{selectedProfile.vehicles}</span><span class="pstat-lbl">Vehicles</span></div>
@@ -653,15 +690,21 @@
 				<div class="pstat"><span class="pstat-val">{selectedProfile.occupations.length}</span><span class="pstat-lbl">Jobs</span></div>
 			</div>
 
-			<!-- Body -->
 			<div class="profile-body">
-				<!-- Sidebar -->
 				<div class="profile-sidebar">
 					<!-- Photo panel -->
 					<div class="panel">
 						<div class="profile-img">
 							{#if selectedProfile.image && !citizenImageBroken}
-								<img src={selectedProfile.image} alt="Profile" onerror={handleImageError} />
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<img 
+									src={selectedProfile.image} 
+									alt="Profile" 
+									onerror={handleImageError}
+									onclick={() => openLightbox(selectedProfile!.image!)}
+									style="cursor: zoom-in;"
+								/>
 							{:else}
 								<div class="no-photo-placeholder">
 									<svg width="40" height="40" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
@@ -670,21 +713,16 @@
 							{/if}
 						</div>
 						{#if !isEMS}
-						<div class="profile-photo-actions">
-							<button class="photo-action-btn" onclick={openCitizenPhotoUpload} title="Upload photo" disabled={uploading}>
-								{#if uploading}
-									<div class="upload-spinner"></div>
-									Uploading...
-								{:else}
-									<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-									Upload
-								{/if}
-							</button>
-							<button class="photo-action-btn" onclick={triggerCitizenMugshot} title="Take mugshot">
-								<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
-								Take Mugshot
-							</button>
-						</div>
+							<div class="profile-photo-actions">
+								<button class="photo-action-btn" onclick={openPhotoModal} title="Set photo URL">
+									<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
+									Set URL
+								</button>
+								<button class="photo-action-btn" onclick={openGallery} title="View all photos">
+									<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+									Gallery
+								</button>
+							</div>
 						{/if}
 					</div>
 
@@ -699,10 +737,7 @@
 						<div class="detail-row">
 							<span class="dlabel">Fingerprint</span>
 							{#if editingFingerprint}
-								<input
-									class="dna-input"
-									type="text"
-									bind:value={fingerprintValue}
+								<input class="dna-input" type="text" bind:value={fingerprintValue}
 									onkeydown={(e) => { if (e.key === 'Enter') saveFingerprint(); if (e.key === 'Escape') { editingFingerprint = false; } }}
 									onblur={saveFingerprint}
 								/>
@@ -716,10 +751,7 @@
 						<div class="detail-row">
 							<span class="dlabel">DNA</span>
 							{#if editingDNA}
-								<input
-									class="dna-input"
-									type="text"
-									bind:value={dnaValue}
+								<input class="dna-input" type="text" bind:value={dnaValue}
 									onkeydown={(e) => { if (e.key === 'Enter') saveDNA(); if (e.key === 'Escape') { editingDNA = false; } }}
 									onblur={saveDNA}
 								/>
@@ -732,7 +764,6 @@
 						</div>
 						<div class="detail-row"><span class="dlabel">Occupations</span><span class="dvalue">{formatOccupations(selectedProfile.occupations)}</span></div>
 					</div>
-
 				</div>
 
 				<!-- Main content -->
@@ -753,18 +784,13 @@
 								{#if selectedProfile.activeWarrants && selectedProfile.activeWarrants.length > 0}
 									{#each selectedProfile.activeWarrants.slice(0, 3) as w}
 										<div class="sitem sitem-danger">
-											<div class="sitem-info">
-												<span class="sitem-primary">Report #{w.reportid}</span>
-												<span class="sitem-secondary">Expires: {formatExpiryDate(w.expirydate)}</span>
-											</div>
+											<div class="sitem-info"><span class="sitem-primary">Report #{w.reportid}</span><span class="sitem-secondary">Expires: {formatExpiryDate(w.expirydate)}</span></div>
 											<button class="sitem-arrow" title="View Report" onclick={() => goToWarrantReport(w.reportid)}>
 												<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
 											</button>
 										</div>
 									{/each}
-									{#if selectedProfile.activeWarrants.length > 3}
-										<div class="sitem-overflow">+{selectedProfile.activeWarrants.length - 3} more warrants</div>
-									{/if}
+									{#if selectedProfile.activeWarrants.length > 3}<div class="sitem-overflow">+{selectedProfile.activeWarrants.length - 3} more warrants</div>{/if}
 								{:else}<div class="empty-msg">No active warrants</div>{/if}
 							</div>
 						</div>
@@ -777,32 +803,25 @@
 								{#if selectedProfile.activeBolos && selectedProfile.activeBolos.length > 0}
 									{#each selectedProfile.activeBolos.slice(0, 3) as b}
 										<div class="sitem sitem-warning">
-											<div class="sitem-info">
-												<span class="sitem-primary">{b.type} BOLO</span>
-												{#if b.notes}<span class="sitem-secondary">{b.notes}</span>{/if}
-											</div>
+											<div class="sitem-info"><span class="sitem-primary">{b.type} BOLO</span>{#if b.notes}<span class="sitem-secondary">{b.notes}</span>{/if}</div>
 											<button class="sitem-arrow" title="View BOLO" onclick={() => goToBolo(b.id)}>
 												<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
 											</button>
 										</div>
 									{/each}
-									{#if selectedProfile.activeBolos.length > 3}
-										<div class="sitem-overflow">+{selectedProfile.activeBolos.length - 3} more BOLOs</div>
-									{/if}
+									{#if selectedProfile.activeBolos.length > 3}<div class="sitem-overflow">+{selectedProfile.activeBolos.length - 3} more BOLOs</div>{/if}
 								{:else}<div class="empty-msg">No active BOLOs</div>{/if}
 							</div>
 						</div>
 
+						<!-- Vehicles -->
 						<div class="panel">
 							<div class="panel-title">Vehicles <span class="cnt">{selectedProfile.ownedVehicles?.length || 0}</span></div>
 							<div class="section-list">
 								{#if selectedProfile.ownedVehicles && selectedProfile.ownedVehicles.length > 0}
 									{#each sectionSlice(selectedProfile.ownedVehicles, vehiclesPage) as v}
 										<div class="sitem">
-											<div class="sitem-info">
-												<span class="sitem-primary">{v.vehicle}</span>
-												<span class="sitem-secondary">{v.plate}</span>
-											</div>
+											<div class="sitem-info"><span class="sitem-primary">{v.vehicle}</span><span class="sitem-secondary">{v.plate}</span></div>
 											<button class="sitem-arrow" title="View Vehicle" onclick={() => openVehicleFromProfile(v.plate)}>
 												<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
 											</button>
@@ -812,13 +831,9 @@
 							</div>
 							{#if sectionTotalPages(selectedProfile.ownedVehicles) > 1}
 								<div class="section-pager">
-									<button class="spager-btn" disabled={vehiclesPage <= 1} onclick={() => vehiclesPage--}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={vehiclesPage <= 1} onclick={() => vehiclesPage--}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button>
 									<span class="spager-info">{vehiclesPage} / {sectionTotalPages(selectedProfile.ownedVehicles)}</span>
-									<button class="spager-btn" disabled={vehiclesPage >= sectionTotalPages(selectedProfile.ownedVehicles)} onclick={() => vehiclesPage++}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={vehiclesPage >= sectionTotalPages(selectedProfile.ownedVehicles)} onclick={() => vehiclesPage++}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>
 								</div>
 							{/if}
 						</div>
@@ -837,10 +852,7 @@
 								{#if activeLicenses.length > 0}
 									{#each sectionSlice(activeLicenses, licensesPage) as license (license.key)}
 										<div class="sitem">
-											<div class="sitem-info">
-												<span class="sitem-primary">{license.name}</span>
-												<span class="sitem-secondary">{license.type === 'state' ? 'State License' : 'Custom License'}</span>
-											</div>
+											<div class="sitem-info"><span class="sitem-primary">{license.name}</span><span class="sitem-secondary">{license.type === 'state' ? 'State License' : 'Custom License'}</span></div>
 											<span class="license-status license-active">Active</span>
 										</div>
 									{/each}
@@ -848,17 +860,14 @@
 							</div>
 							{#if sectionTotalPages(activeLicenses) > 1}
 								<div class="section-pager">
-									<button class="spager-btn" disabled={licensesPage <= 1} onclick={() => licensesPage--}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={licensesPage <= 1} onclick={() => licensesPage--}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button>
 									<span class="spager-info">{licensesPage} / {sectionTotalPages(activeLicenses)}</span>
-									<button class="spager-btn" disabled={licensesPage >= sectionTotalPages(activeLicenses)} onclick={() => licensesPage++}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={licensesPage >= sectionTotalPages(activeLicenses)} onclick={() => licensesPage++}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>
 								</div>
 							{/if}
 						</div>
 
+						<!-- Properties -->
 						<div class="panel">
 							<div class="panel-title">Properties <span class="cnt">{selectedProfile.propertiesList?.length || 0}</span></div>
 							<div class="section-list">
@@ -870,26 +879,21 @@
 							</div>
 							{#if sectionTotalPages(selectedProfile.propertiesList) > 1}
 								<div class="section-pager">
-									<button class="spager-btn" disabled={propertiesPage <= 1} onclick={() => propertiesPage--}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={propertiesPage <= 1} onclick={() => propertiesPage--}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button>
 									<span class="spager-info">{propertiesPage} / {sectionTotalPages(selectedProfile.propertiesList)}</span>
-									<button class="spager-btn" disabled={propertiesPage >= sectionTotalPages(selectedProfile.propertiesList)} onclick={() => propertiesPage++}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={propertiesPage >= sectionTotalPages(selectedProfile.propertiesList)} onclick={() => propertiesPage++}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>
 								</div>
 							{/if}
 						</div>
+
+						<!-- Weapons -->
 						<div class="panel">
 							<div class="panel-title">Weapons <span class="cnt">{selectedProfile.weapons?.length || 0}</span></div>
 							<div class="section-list">
 								{#if selectedProfile.weapons && selectedProfile.weapons.length > 0}
 									{#each sectionSlice(selectedProfile.weapons, weaponsPage) as w}
 										<div class="sitem">
-											<div class="sitem-info">
-												<span class="sitem-primary">{w.weaponModel}</span>
-												<span class="sitem-secondary">{w.serial}</span>
-											</div>
+											<div class="sitem-info"><span class="sitem-primary">{w.weaponModel}</span><span class="sitem-secondary">{w.serial}</span></div>
 											{#if w.scratched}<span class="badge badge-red">Scratched</span>{:else}<span class="badge badge-green">Intact</span>{/if}
 										</div>
 									{/each}
@@ -897,52 +901,42 @@
 							</div>
 							{#if sectionTotalPages(selectedProfile.weapons) > 1}
 								<div class="section-pager">
-									<button class="spager-btn" disabled={weaponsPage <= 1} onclick={() => weaponsPage--}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={weaponsPage <= 1} onclick={() => weaponsPage--}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button>
 									<span class="spager-info">{weaponsPage} / {sectionTotalPages(selectedProfile.weapons)}</span>
-									<button class="spager-btn" disabled={weaponsPage >= sectionTotalPages(selectedProfile.weapons)} onclick={() => weaponsPage++}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={weaponsPage >= sectionTotalPages(selectedProfile.weapons)} onclick={() => weaponsPage++}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>
 								</div>
 							{/if}
 						</div>
+
+						<!-- Evidence -->
 						<div class="panel">
 							<div class="panel-title">Evidence <span class="cnt">{selectedProfile.evidence?.length || 0}</span></div>
 							<div class="section-list">
 								{#if selectedProfile.evidence && selectedProfile.evidence.length > 0}
 									{#each sectionSlice(selectedProfile.evidence, evidencePage) as e}
 										<div class="sitem">
-											<div class="sitem-info">
-												<span class="sitem-primary">{e.title}</span>
-												<span class="sitem-secondary">{e.type}{#if e.notes} - {e.notes}{/if}</span>
-											</div>
+											<div class="sitem-info"><span class="sitem-primary">{e.title}</span><span class="sitem-secondary">{e.type}{#if e.notes} - {e.notes}{/if}</span></div>
 										</div>
 									{/each}
 								{:else}<div class="empty-msg">No evidence</div>{/if}
 							</div>
 							{#if sectionTotalPages(selectedProfile.evidence) > 1}
 								<div class="section-pager">
-									<button class="spager-btn" disabled={evidencePage <= 1} onclick={() => evidencePage--}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={evidencePage <= 1} onclick={() => evidencePage--}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button>
 									<span class="spager-info">{evidencePage} / {sectionTotalPages(selectedProfile.evidence)}</span>
-									<button class="spager-btn" disabled={evidencePage >= sectionTotalPages(selectedProfile.evidence)} onclick={() => evidencePage++}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={evidencePage >= sectionTotalPages(selectedProfile.evidence)} onclick={() => evidencePage++}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>
 								</div>
 							{/if}
 						</div>
+
+						<!-- Linked Reports -->
 						<div class="panel">
 							<div class="panel-title">Linked Reports <span class="cnt">{selectedProfile.linkedReports?.length || 0}</span></div>
 							<div class="section-list">
 								{#if selectedProfile.linkedReports && selectedProfile.linkedReports.length > 0}
 									{#each sectionSlice(selectedProfile.linkedReports, reportsPage) as r}
 										<div class="sitem">
-											<div class="sitem-info">
-												<span class="sitem-primary">{r.title}</span>
-												<span class="sitem-secondary">{r.type}</span>
-											</div>
+											<div class="sitem-info"><span class="sitem-primary">{r.title}</span><span class="sitem-secondary">{r.type}</span></div>
 											{#if !isEMS}<button class="view-btn" onclick={() => goToWarrantReport(r.id)}>View</button>{/if}
 										</div>
 									{/each}
@@ -950,13 +944,9 @@
 							</div>
 							{#if sectionTotalPages(selectedProfile.linkedReports) > 1}
 								<div class="section-pager">
-									<button class="spager-btn" disabled={reportsPage <= 1} onclick={() => reportsPage--}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={reportsPage <= 1} onclick={() => reportsPage--}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button>
 									<span class="spager-info">{reportsPage} / {sectionTotalPages(selectedProfile.linkedReports)}</span>
-									<button class="spager-btn" disabled={reportsPage >= sectionTotalPages(selectedProfile.linkedReports)} onclick={() => reportsPage++}>
-										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
-									</button>
+									<button class="spager-btn" disabled={reportsPage >= sectionTotalPages(selectedProfile.linkedReports)} onclick={() => reportsPage++}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>
 								</div>
 							{/if}
 						</div>
@@ -964,6 +954,119 @@
 				</div>
 			</div>
 		</div>
+
+		{#if galleryOpen}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="modal-overlay" onclick={(e) => { if (e.target === e.currentTarget) galleryOpen = false; }}>
+				<div class="modal-card gallery-card" onclick={(e) => e.stopPropagation()}>
+					<div class="modal-header">
+						<h3>Photo Gallery – {selectedProfile?.firstName} {selectedProfile?.lastName}</h3>
+						<div style="display:flex;gap:6px;align-items:center;">
+							<button class="gallery-add-btn" onclick={() => { galleryAddOpen = true; galleryAddUrl = ""; }}>
+								<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+								Add
+							</button>
+							<button class="modal-close" onclick={() => galleryOpen = false}>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+							</button>
+						</div>
+					</div>
+					<div class="gallery-body">
+						<!-- Profilbild separat -->
+						{#if selectedProfile?.image && !citizenImageBroken}
+							<div class="gallery-section-label">Profile Photo</div>
+							<div class="gallery-grid" style="margin-bottom: 12px;">
+								<div class="gallery-item">
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
+									<img src={selectedProfile.image} alt="Profile" class="gallery-thumb" onclick={() => { galleryOpen = false; openLightbox(selectedProfile!.image!); }} />
+								</div>
+							</div>
+							<div class="gallery-section-label">Gallery</div>
+						{/if}
+
+						{#if galleryImages.length === 0}
+							<div class="empty-msg" style="padding: 16px 0;">No gallery images</div>
+						{:else}
+							<div class="gallery-grid">
+								{#each galleryImages as img}
+									<div class="gallery-item">
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										<img src={img} alt="Gallery photo" class="gallery-thumb" onclick={() => { galleryOpen = false; openLightbox(img); }} />
+										<button
+											class="gallery-delete-btn"
+											onclick={(e) => { e.stopPropagation(); removeGalleryImage(img); }}
+											aria-label="Remove image"
+										>
+											<svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+										</button>
+									</div>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Gallery Add Modal -->
+		{#if galleryAddOpen}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="modal-overlay" onclick={(e) => { if (e.target === e.currentTarget) galleryAddOpen = false; }}>
+				<div class="modal-card photo-modal" onclick={(e) => e.stopPropagation()}>
+					<div class="modal-header">
+						<h3>Add Gallery Image</h3>
+						<button class="modal-close" onclick={() => galleryAddOpen = false}>
+							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+						</button>
+					</div>
+					<div class="modal-body photo-modal-body">
+						<div class="photo-form-group">
+							<span class="photo-label">Image URL</span>
+							<input
+								class="photo-input"
+								type="url"
+								placeholder="https://example.com/photo.jpg"
+								bind:value={galleryAddUrl}
+								onkeydown={(e) => { if (e.key === 'Enter') addGalleryImage(); if (e.key === 'Escape') galleryAddOpen = false; }}
+							/>
+							<span class="url-hint">
+								<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+								Use <a href="https://fivemanage.com" target="_blank" rel="noopener noreferrer">FiveManage</a> to make sure your links persist forever.
+							</span>
+						</div>
+					</div>
+					<div class="modal-footer-row">
+						<button class="photo-cancel-btn" onclick={() => galleryAddOpen = false} disabled={galleryAdding}>Cancel</button>
+						<button class="photo-confirm-btn" onclick={addGalleryImage} disabled={galleryAdding || !galleryAddUrl.trim()}>
+							{galleryAdding ? "Adding…" : "Add Image"}
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Lightbox -->
+		{#if lightboxOpen}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="modal-overlay lightbox-overlay" onclick={() => lightboxOpen = false}>
+				<div class="lightbox-card" onclick={(e) => e.stopPropagation()}>
+					<button class="lightbox-close" onclick={() => lightboxOpen = false}>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+					</button>
+					<img
+						src={lightboxUrl}
+						alt="Full size"
+						class="lightbox-img"
+					/>
+				</div>
+			</div>
+		{/if}
+
 		<!-- Vehicle Detail Modal -->
 		{#if vehicleDetail || vehicleDetailLoading}
 			<div class="modal-overlay" onclick={closeVehicleDetail}>
@@ -992,6 +1095,7 @@
 				</div>
 			</div>
 		{/if}
+
 		<!-- Issue License Modal -->
 		{#if showIssueLicenseModal}
 			<div class="modal-overlay" onclick={() => (showIssueLicenseModal = false)}>
@@ -1016,11 +1120,12 @@
 				</div>
 			</div>
 		{/if}
+
 	{:else}
 		<!-- ===== LIST VIEW ===== -->
 		<div class="list-view">
 			<div class="list-topbar">
-		<div class="search-box">
+				<div class="search-box">
 					<svg width="14" height="14" fill="rgba(255,255,255,0.35)" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
 					<input bind:value={searchQuery} type="text" placeholder="Search by name, ID, or phone..." />
 				</div>
@@ -1032,14 +1137,7 @@
 				<div class="center-msg"><span>No citizen records available.</span></div>
 			{:else}
 				<div class="citizens-header">
-					<span></span>
-					<span>Name</span>
-					<span>Citizen ID</span>
-					<span>Phone</span>
-					<span>Gender</span>
-					<span>DOB</span>
-					<span>Stats</span>
-					<span>Flags</span>
+					<span></span><span>Name</span><span>Citizen ID</span><span>Phone</span><span>Gender</span><span>DOB</span><span>Stats</span><span>Flags</span>
 				</div>
 				<div class="citizens-table">
 					{#each filteredCitizens as citizen (citizen.id)}
@@ -1087,11 +1185,81 @@
 	{/if}
 </div>
 
-<input type="file" accept="image/*" bind:this={citizenPhotoInput} onchange={handleCitizenPhotoUpload} style="display:none" />
-
 <style>
 	.page { height: 100%; display: flex; flex-direction: column; background: var(--card-dark-bg); overflow: hidden; }
 
+	/* ── Photo URL Modal ── */
+	.photo-modal { width: min(380px, 92vw); }
+	.photo-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
+	.photo-form-group { display: flex; align-items: center; flex-direction: column; gap: 4px; }
+	.photo-label { 
+		color: rgba(255, 255, 255, 0.35);
+		font-size: 9px;
+		font-weight: 600;
+		margin-top: 5px;
+		text-transform: uppercase;
+		letter-spacing: 0.6px;
+	}
+	.photo-input {
+		display: flex;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 5px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		transition: border-color 0.1s;
+		font-family: inherit;
+		width: 90%;
+	}
+	.photo-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.1); }
+	.photo-input::placeholder { color: rgba(255, 255, 255, 0.2); }
+	.url-hint {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		margin-top: 5px;
+		font-size: 10px;
+		color: rgba(255,255,255,0.25);
+		line-height: 1.4;
+	}
+	.url-hint svg { flex-shrink: 0; opacity: 0.45; }
+	.url-hint a { color: rgba(var(--accent-text-rgb), 0.5); text-decoration: none; transition: color 0.1s; }
+	.url-hint a:hover { color: rgba(var(--accent-text-rgb), 0.85); text-decoration: underline; }
+	.modal-footer-row {
+		display: flex;
+		justify-content: flex-end;
+		gap: 6px;
+		padding: 10px 16px;
+		border-top: 1px solid rgba(255,255,255,0.06);
+	}
+	.photo-cancel-btn {
+		background: transparent;
+		border: 1px solid rgba(255,255,255,0.06);
+		border-radius: 3px;
+		padding: 4px 10px;
+		color: rgba(255,255,255,0.4);
+		font-size: 10px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+	.photo-cancel-btn:hover:not(:disabled) { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }
+	.photo-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+	.photo-confirm-btn {
+		background: rgba(16,185,129,0.06);
+		color: rgba(52,211,153,0.7);
+		border: 1px solid rgba(16,185,129,0.1);
+		border-radius: 3px;
+		padding: 4px 12px;
+		font-size: 10px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+	.photo-confirm-btn:hover:not(:disabled) { background: rgba(16,185,129,0.12); color: rgba(110,231,183,0.9); }
+	.photo-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
 	/* ===== LIST VIEW ===== */
 	.list-view { display: flex; flex-direction: column; height: 100%; }
 	.list-topbar { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 48px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
@@ -1109,7 +1277,6 @@
 
 	.citizen-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
 	.citizen-avatar img { width: 100%; height: 100%; object-fit: cover; }
-
 	.citizen-name { color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 	.citizen-meta { color: rgba(255,255,255,0.3); font-size: 11px; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 	.citizen-nums { display: flex; gap: 8px; font-size: 10px; color: rgba(255,255,255,0.35); }
@@ -1121,7 +1288,6 @@
 	.flag-orange { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.15); }
 	.flag-amber { background: rgba(249,115,22,0.12); color: #fb923c; border-color: rgba(249,115,22,0.15); }
 	.flag-more { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.3); font-size: 9px; white-space: nowrap; flex-shrink: 0; }
-
 	.accent-red { color: #f87171 !important; }
 
 	.center-msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,0.2); font-size: 12px; }
@@ -1130,13 +1296,9 @@
 
 	/* ===== PROFILE VIEW ===== */
 	.profile-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
-
-	/* Panel caution inline */
 	.panel-caution { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; margin-bottom: 8px; }
 	.caution-danger { background: rgba(239,68,68,0.08); color: #f87171; }
 	.caution-warning { background: rgba(245,158,11,0.08); color: #fbbf24; }
-
-	/* Danger/warning panel variants */
 	.panel-danger { border: 1px solid rgba(239,68,68,0.35) !important; }
 	.panel-warning { border: 1px solid rgba(245,158,11,0.35) !important; }
 	.cnt-danger { background: rgba(239,68,68,0.12) !important; color: #f87171 !important; }
@@ -1154,21 +1316,18 @@
 	.copy-toast { color: #34d399; font-size: 11px; font-weight: 500; animation: fadeToast 1.4s ease-in-out; }
 	@keyframes fadeToast { 0%,100% { opacity: 0; } 30%,70% { opacity: 1; } }
 
-	/* Stats strip - inline like dashboard */
 	.pstats-row { display: flex; align-items: center; padding: 0 20px; height: 44px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.06); gap: 0; }
 	.pstat { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid rgba(255,255,255,0.06); }
 	.pstat:last-child { border-right: none; }
 	.pstat-val { color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 700; line-height: 1; }
 	.pstat-lbl { color: rgba(255,255,255,0.3); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
 
-	/* Body */
 	.profile-body { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; overflow: hidden; }
-
 	.profile-sidebar { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
 	.profile-sidebar::-webkit-scrollbar { width: 3px; }
 	.profile-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
 
-	.panel { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: transparent; border-radius: 0; border: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
+	.panel { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: transparent; border-radius: 0; }
 	.panel:last-child { border-bottom: none; }
 	.panel-title { color: rgba(255,255,255,0.35); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
 	.cnt { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 4px; line-height: 16px; }
@@ -1187,21 +1346,11 @@
 	.dvalue.clickable:hover { color: #60a5fa; }
 	.dvalue .edit-icon { font-size: 11px; margin-left: 4px; opacity: 0; transition: opacity 0.12s; vertical-align: middle; }
 	.dvalue.clickable:hover .edit-icon { opacity: 0.5; }
-	.dna-input {
-		background: rgba(255,255,255,0.06);
-		border: 1px solid rgba(96,165,250,0.3);
-		border-radius: 3px;
-		color: rgba(255,255,255,0.9);
-		font-size: 12px;
-		padding: 2px 6px;
-		outline: none;
-		width: 120px;
-	}
+	.dna-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(96,165,250,0.3); border-radius: 3px; color: rgba(255,255,255,0.9); font-size: 12px; padding: 2px 6px; outline: none; width: 120px; }
 	.dna-input:focus { border-color: rgba(96,165,250,0.6); }
 
-	.license-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; color: rgba(255,255,255,0.6); }
-	.license-status { font-size: 11px; color: rgba(239, 68, 68, 0.8); font-weight: 500; }
-	.license-status.license-active { color: rgba(34, 197, 94, 0.8); }
+	.license-status { font-size: 11px; color: rgba(239,68,68,0.8); font-weight: 500; }
+	.license-status.license-active { color: rgba(34,197,94,0.8); }
 
 	.toggle { position: relative; display: inline-block; width: 32px; height: 16px; flex-shrink: 0; }
 	.toggle input { opacity: 0; width: 0; height: 0; }
@@ -1216,8 +1365,6 @@
 	.profile-main::-webkit-scrollbar { width: 3px; }
 	.profile-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
 	.sections-grid { display: grid; grid-template-columns: 1fr 1fr; }
-
-	/* Sections grid panels - use borders, no gaps */
 	.sections-grid .panel { border-bottom: 1px solid rgba(255,255,255,0.06); border-right: 1px solid rgba(255,255,255,0.06); }
 	.sections-grid .panel:nth-child(2n) { border-right: none; }
 	.profile-main > .panel { border-bottom: 1px solid rgba(255,255,255,0.06); }
@@ -1241,7 +1388,6 @@
 
 	.empty-msg { color: rgba(255,255,255,0.15); font-size: 11px; text-align: center; padding: 14px 0; }
 
-	/* ── Section mini-pager ── */
 	.section-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 0; margin-top: 2px; }
 	.spager-btn { background: transparent; border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; padding: 2px 4px; color: rgba(255,255,255,0.3); cursor: pointer; display: flex; align-items: center; transition: all 0.12s ease; }
 	.spager-btn:hover:not(:disabled) { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
@@ -1252,17 +1398,16 @@
 	.photo-action-btn { display: flex; align-items: center; gap: 4px; background: transparent; border: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.12s; }
 	.photo-action-btn:hover:not(:disabled) { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
 	.photo-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-	.upload-spinner { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,0.15); border-left-color: var(--accent-60); border-radius: 50%; animation: spin 0.8s linear infinite; }
-	@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
-	/* Vehicle detail modal */
+	/* Modal shared */
 	.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(2px); }
-	.modal-card { background: var(--dark-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; width: 360px; max-height: 80%; overflow-y: auto; }
-	.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
-	.modal-header h3 { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
-	.modal-close { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; }
-	.modal-close:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
+	.modal-card { background: var(--dark-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; width: 360px; max-height: 80%; overflow-y: auto; display: flex; flex-direction: column; }
+	.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
+	.modal-header h3 { margin: 0; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }
+	.modal-close { background: transparent; border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; color: rgba(255,255,255,0.3); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
+	.modal-close:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }
 	.modal-body { padding: 0; }
+
 	.vd-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
 	.vd-row:last-child { border-bottom: none; }
 	.vd-label { color: rgba(255,255,255,0.3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
@@ -1275,15 +1420,32 @@
 	.vd-status-bolo { color: #fbbf24 !important; }
 	.vd-status-valid { color: #34d399 !important; }
 
-	/* Issue License button */
 	.issue-license-btn { display: flex; align-items: center; gap: 3px; margin-left: auto; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.1); border-radius: 3px; padding: 2px 8px; color: rgba(147,197,253,0.7); font-size: 9px; font-weight: 600; cursor: pointer; transition: all 0.12s; text-transform: none; letter-spacing: 0; }
 	.issue-license-btn:hover { background: rgba(59,130,246,0.12); color: rgba(147,197,253,0.9); }
 
-	/* License modal */
 	.license-modal-body { padding: 4px 0; }
 	.license-modal-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.03); }
 	.license-modal-row:last-child { border-bottom: none; }
 	.license-modal-info { display: flex; align-items: center; gap: 8px; }
 	.license-modal-name { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 500; }
 	.license-modal-type { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.25); }
-</style>
+
+	/* Gallery & Lightbox */
+	.gallery-card { width: min(560px, 92vw); max-height: 80vh; display: flex; flex-direction: column; }
+	.gallery-body { padding: 12px; overflow-y: auto; flex: 1; min-height: 0; }
+	.gallery-section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.25); margin-bottom: 6px; }
+	.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
+	.gallery-item { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
+	.gallery-item:hover .gallery-thumb { transform: scale(1.04); }
+	.gallery-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; cursor: zoom-in; }
+	.gallery-delete-btn { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: rgba(239,68,68,0.8); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; }
+	.gallery-item:hover .gallery-delete-btn { opacity: 1; }
+	.gallery-add-btn { display: flex; align-items: center; gap: 4px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.1); border-radius: 3px; padding: 3px 8px; color: rgba(52,211,153,0.7); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.1s; }
+	.gallery-add-btn:hover { background: rgba(16,185,129,0.12); color: rgba(110,231,183,0.9); }
+
+	.lightbox-overlay { background: rgba(0,0,0,0.85); }
+	.lightbox-card { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; padding-top: 40px; }
+	.lightbox-close { position: absolute; top: 0; right: 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; z-index: 10; }
+	.lightbox-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
+	.lightbox-img { max-width: 90vw; max-height: calc(90vh - 40px); object-fit: contain; display: block; border-radius: 4px; }
+</style>
\ No newline at end of file

From c960ae00c759d31fa95caef6327344492d725460 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:31:23 +0200
Subject: [PATCH 022/144] added new callbacks

added new callbacks
---
 web/src/constants/nuiEvents.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index e5175863..b51c306e 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -83,6 +83,8 @@ export const NUI_EVENTS = {
 		ADD_SUSPECT_FINGERPRINT: "addSuspectFingerprint",
 		UPDATE_CITIZEN_DNA: "updateCitizenDNA",
 		UPDATE_CITIZEN_FINGERPRINT: "updateCitizenFingerprint",
+		ADD_CITIZEN_GALLERY: 'addCitizenGallery',
+		REMOVE_CITIZEN_GALLERY: 'removeCitizenGallery',
 	},
 	VEHICLE: {
 		GET_VEHICLES: "getVehicles",

From 6702b3243c33ac8d90e6b34487904d167caf76f3 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:32:21 +0200
Subject: [PATCH 023/144] removed log entry for profile pic

removed log entry for profile pic
- fivemanage doesnt support links, only base64, so removed check for fivemanageupload
---
 server/fivemanage.lua | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/server/fivemanage.lua b/server/fivemanage.lua
index c1c3a012..80b71280 100644
--- a/server/fivemanage.lua
+++ b/server/fivemanage.lua
@@ -140,15 +140,15 @@ ps.registerCallback(resourceName .. ':server:triggerSuspectMugshot', function(so
 end)
 
 -- Upload a profile photo for a suspect via base64 (from MDT UI)
-ps.registerCallback(resourceName .. ':server:uploadSuspectPhoto', function(source, citizenid, base64Image)
-    if not citizenid or not base64Image then
+ps.registerCallback(resourceName .. ':server:uploadSuspectPhoto', function(source, citizenid, imageUrl)
+    if not citizenid or not imageUrl then
         return { success = false, message = 'Missing data' }
     end
 
-    local imageUrl, uploadError = FiveManageUpload(base64Image, 'suspect_' .. citizenid .. '.png')
-    if not imageUrl then
-        return { success = false, message = 'Upload failed: ' .. (uploadError or 'Unknown error') }
-    end
+    -- local imageUrl, uploadError = FiveManageUpload(base64Image, 'suspect_' .. citizenid .. '.png')
+    -- if not imageUrl then
+    --     return { success = false, message = 'Upload failed: ' .. (uploadError or 'Unknown error') }
+    -- end
 
     -- Ensure profile exists
     if not EnsureProfileExists(citizenid) then

From 2adfc22b89f3ac81585f931cebd1bfbd0712a165 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:33:14 +0200
Subject: [PATCH 024/144] added title and images

added title and images, fixed evidence in reports
---
 web/src/pages/ReportEditor.svelte | 79 ++++++++++---------------------
 1 file changed, 26 insertions(+), 53 deletions(-)

diff --git a/web/src/pages/ReportEditor.svelte b/web/src/pages/ReportEditor.svelte
index 96ffe6c1..9f2f9376 100644
--- a/web/src/pages/ReportEditor.svelte
+++ b/web/src/pages/ReportEditor.svelte
@@ -15,7 +15,6 @@
 	import VehiclesManager from "../components/report-editor/VehiclesManager.svelte";
 	import ReportTextEditor from "../components/report-editor/ReportTextEditor.svelte";
 	import PersonSearchModal from "../components/report-editor/PersonSearchModal.svelte";
-	import ImageUploadModal from "../components/report-editor/ImageUploadModal.svelte";
 
 	// Import services
 	import { createReportService } from "../services/reportService.svelte";
@@ -249,7 +248,11 @@
 			...r,
 			evidence: r.evidence.map((e) => ({
 				...e,
-				images: e.images.filter((img) => !img.startsWith("data:")),
+				images: e.images.filter((img) =>
+					typeof img === "string"
+						? !img.startsWith("data:")
+						: !img.url?.startsWith("data:")
+				),
 			})),
 		};
 	}
@@ -408,7 +411,16 @@
 
 		// Initialize report
 		const initializedReport =
-			await reportService.initializeReport(reportId);
+		await reportService.initializeReport(reportId);
+
+		initializedReport.evidence = (initializedReport.evidence ?? []).map((e: any) => ({
+			...e,
+			title: e.title ?? '',
+			images: (e.images ?? []).map((img: any) =>
+				typeof img === 'string' ? img : (img.url ?? '')
+			)
+		}));
+
 		report = initializedReport;
 
 		// Load persisted data for this instance after base initialization
@@ -702,7 +714,6 @@
 	let photoUploadInput: HTMLInputElement | undefined = $state();
 	let photoUploadCitizenId: string = $state("");
 	let isUploadingPhoto: boolean = $state(false);
-	let isUploadingEvidence: boolean = $state(false);
 
 	function openPhotoUpload(suspect: Report["involved"]["suspects"][number]) {
 		if (!suspect.citizenid) return;
@@ -753,41 +764,6 @@
 		input.value = "";
 	}
 
-	async function uploadImageHandler(file: File, evidenceId: string) {
-		if (isUploadingEvidence) return;
-		isUploadingEvidence = true;
-
-		try {
-			const numericId = Number(evidenceId);
-			if (numericId && !isNaN(numericId)) {
-				// Evidence already saved to DB - upload directly
-				const imageUrl = await evidenceService.uploadImage(file, evidenceId);
-				const evidenceIndex = report.evidence.findIndex((e) => e.id === evidenceId);
-				if (evidenceIndex !== -1) {
-					report.evidence[evidenceIndex] = evidenceService.addImageToEvidence(
-						report.evidence[evidenceIndex],
-						imageUrl,
-					);
-				}
-			} else {
-				// Evidence is in-memory (not yet saved) - compress and store as data URL
-				const dataUrl = await compressImage(file);
-				const evidenceIndex = report.evidence.findIndex((e) => e.id === evidenceId);
-				if (evidenceIndex !== -1) {
-					report.evidence[evidenceIndex] = evidenceService.addImageToEvidence(
-						report.evidence[evidenceIndex],
-						dataUrl,
-					);
-				}
-			}
-			reportEditorUI.closeImageUpload();
-		} catch (error: any) {
-			showStatus(error?.message || "Failed to upload image", "error");
-		} finally {
-			isUploadingEvidence = false;
-		}
-	}
-
 	async function linkEvidenceToCase(evidenceId: string, caseId: string) {
 		const numericEvidenceId = Number(evidenceId);
 		const numericCaseId = Number(caseId);
@@ -846,7 +822,17 @@
 			isPersistenceEnabled = false;
 			persistence.cancelDebouncedSave();
 
-			await reportService.saveReport(report);
+			const reportToSave = {
+				...report,
+				evidence: report.evidence.map(e => ({
+					...e,
+					images: (e.images ?? []).map((img: any) => ({
+						url: typeof img === 'string' ? img : (img.url ?? ''),
+					}))
+				}))
+			} as unknown as Report;
+
+			await reportService.saveReport(reportToSave);
 
 			// Clear persisted data
 			persistence.clearPersistedData();
@@ -1022,8 +1008,6 @@
 					onAddEvidence={handlers.handleAddEvidence}
 					onRemoveEvidence={handlers.handleRemoveEvidence}
 					onUpdateEvidence={handlers.handleUpdateEvidence}
-					onOpenImageUpload={(evidenceId) =>
-						reportEditorUI.openImageUpload(evidenceId)}
 					onRemoveImage={(evidenceId, imageIndex) => {
 						report = reportService.removeImageFromEvidence(
 							report,
@@ -1091,17 +1075,6 @@
 	onClose={() => reportEditorUI.closeVictimSearch()}
 />
 
-<ImageUploadModal
-	show={reportEditorUI.state.showImageUpload}
-	uploading={isUploadingEvidence}
-	onUpload={(file: File) => {
-		if (reportEditorUI.state.selectedEvidenceId) {
-			uploadImageHandler(file, reportEditorUI.state.selectedEvidenceId);
-		}
-	}}
-	onClose={() => reportEditorUI.closeImageUpload()}
-/>
-
 <!-- Hidden file input for suspect photo upload -->
 <input
 	type="file"

From 95d01b6dc7c4de7437243835c1a6567b1233afe2 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:34:04 +0200
Subject: [PATCH 025/144] added title and images

added title and images, fixed evidence

From 4aebbbadf3ff3e8ba535d67e3dec9d5c9d854abc Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 2 May 2026 00:35:00 +0200
Subject: [PATCH 026/144] added title and images, fixed evidence

added title and images, fixed evidence
---
 web/src/services/reportService.svelte.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/services/reportService.svelte.ts b/web/src/services/reportService.svelte.ts
index 87e4c481..119388ad 100644
--- a/web/src/services/reportService.svelte.ts
+++ b/web/src/services/reportService.svelte.ts
@@ -85,6 +85,7 @@ export function createReportService() {
 				...report,
 				id: report.id ?? report.reportId,
 			};
+
 			const response = await fetchNui<{ success: boolean; message?: string; error?: string; reportId?: string }>(
 				NUI_EVENTS.REPORT.SAVE_REPORT,
 				reportToSave,

From 0c54f1450c142bb89b3f241ac34ff46c1e5f672f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Mon, 4 May 2026 01:50:25 +0200
Subject: [PATCH 027/144] added little icon in vehicles overview and added
 edit/zoom button

added little icon in vehicles overview and added edit/zoom button
---
 web/src/pages/Vehicles.svelte | 199 ++++++++++++++++++++++++++++++----
 1 file changed, 175 insertions(+), 24 deletions(-)

diff --git a/web/src/pages/Vehicles.svelte b/web/src/pages/Vehicles.svelte
index f0dd52a0..d75a4964 100644
--- a/web/src/pages/Vehicles.svelte
+++ b/web/src/pages/Vehicles.svelte
@@ -48,6 +48,48 @@
 	let vehicleDetailLoading = $state(false);
 	let vehicleDetailError = $state<string | null>(null);
 	let vehicleSaving = $state(false);
+	let imageModalOpen = $state(false);
+	let imageUrlInput = $state("");
+	let imageSaving = $state(false);
+	let vehicleLightboxOpen = $state(false);
+	let vehicleImageBroken = $state(false)
+	$effect(() => {
+		if (selectedVehicle) vehicleImageBroken = false;
+	});
+
+	function openVehicleLightbox() {
+		if (!selectedVehicle?.image || selectedVehicle.image.startsWith('https://docs.fivem.net')) return;
+		vehicleLightboxOpen = true;
+	}
+
+	function openImageModal() {
+		imageUrlInput = selectedVehicle?.image?.startsWith('https://docs.fivem.net') ? "" : (selectedVehicle?.image ?? "");
+		imageModalOpen = true;
+	}
+
+	async function saveVehicleImage() {
+		const url = imageUrlInput.trim();
+		if (!url || !selectedVehicle || imageSaving) return;
+		imageSaving = true;
+		try {
+			const response = await fetchNui(NUI_EVENTS.VEHICLE.UPDATE_VEHICLE, {
+				plate: selectedVehicle.plate,
+				image: url,
+			});
+			if (response?.success) {
+				selectedVehicle = { ...selectedVehicle, image: url };
+				vehicleList = vehicleList.map(v => v.plate === selectedVehicle?.plate ? { ...v, image: url } : v);
+				globalNotifications.success("Vehicle image updated");
+				imageModalOpen = false;
+			} else {
+				globalNotifications.error(response?.message || "Failed to update image");
+			}
+		} catch {
+			globalNotifications.error("Failed to update image");
+		}
+		imageSaving = false;
+	}
+
 	let vehicleForm = $state({
 		points: 0,
 		status: "valid",
@@ -304,11 +346,22 @@
 				<div class="info-grid">
 					<div class="info-card">
 						<div class="info-card-icon">
-							{#if selectedVehicle.image}
-								<img src={selectedVehicle.image} alt="Vehicle" class="info-card-img" />
-							{:else}
-								<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6"/></svg>
+							<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6"/></svg>
+							{#if selectedVehicle.image && !selectedVehicle.image.startsWith('https://docs.fivem.net') && !vehicleImageBroken}
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<img 
+									src={selectedVehicle.image} 
+									alt="Vehicle" 
+									class="info-card-img" 
+									onclick={openVehicleLightbox}
+									style="cursor:zoom-in;"
+									onerror={() => vehicleImageBroken = true}
+								/>
 							{/if}
+							<button class="img-edit-btn" onclick={openImageModal} title="Set vehicle image">
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+							</button>
 						</div>
 						<div class="info-card-body">
 							<span class="info-card-label">Owner</span>
@@ -417,6 +470,52 @@
 				</div>
 			</div>
 		{/if}
+		{#if imageModalOpen}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="img-modal-overlay" onclick={(e) => { if (e.target === e.currentTarget) imageModalOpen = false; }}>
+				<div class="img-modal" onclick={(e) => e.stopPropagation()}>
+					<div class="img-modal-header">
+						<span>Set Vehicle Image</span>
+						<button class="img-modal-close" onclick={() => imageModalOpen = false}>
+							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+						</button>
+					</div>
+					<div class="img-modal-body">
+						<span class="img-modal-label">Image URL</span>
+						<input
+							class="img-modal-input"
+							type="url"
+							placeholder="https://r2.fivemanage.com/..."
+							bind:value={imageUrlInput}
+							onkeydown={(e) => { if (e.key === 'Enter') saveVehicleImage(); if (e.key === 'Escape') imageModalOpen = false; }}
+						/>
+						<span class="img-modal-hint">
+							<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+							Use <a href="https://fivemanage.com" target="_blank" rel="noopener noreferrer">FiveManage</a> for permanent links.
+						</span>
+					</div>
+					<div class="img-modal-footer">
+						<button class="img-modal-cancel" onclick={() => imageModalOpen = false} disabled={imageSaving}>Cancel</button>
+						<button class="img-modal-confirm" onclick={saveVehicleImage} disabled={imageSaving || !imageUrlInput.trim()}>
+							{imageSaving ? "Saving…" : "Set Image"}
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
+		{#if vehicleLightboxOpen}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="img-modal-overlay" onclick={() => vehicleLightboxOpen = false}>
+				<div class="vehicle-lightbox" onclick={(e) => e.stopPropagation()}>
+					<button class="lightbox-close-btn" onclick={() => vehicleLightboxOpen = false}>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+					</button>
+					<img src={selectedVehicle?.image} alt="Vehicle" class="vehicle-lightbox-img" />
+				</div>
+			</div>
+		{/if}
 	</div>
 {:else}
 	<!-- Vehicle List View -->
@@ -441,6 +540,7 @@
 
 		<div class="list-panel">
 			<div class="list-header">
+			    <span></span>
 				<span class="col-name">Vehicle</span>
 				<span class="col-plate">Plate</span>
 				<span class="col-owner">Owner</span>
@@ -457,6 +557,14 @@
 				{:else}
 					{#each filteredVehicles as vehicle}
 						<button class="vehicle-row" onclick={() => viewVehicle(vehicle.plate)}>
+							<div class="vehicle-avatar">
+								{#if vehicle.image && !vehicle.image.startsWith('https://docs.fivem.net')}
+									<img src={vehicle.image} alt="" onerror={(e) => { (e.target as HTMLImageElement).style.display = 'none'; (e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style'); }} />
+									<svg style="display:none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6"/></svg>
+								{:else}
+									<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/><path d="M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6"/></svg>
+								{/if}
+							</div>
 							<span class="col-name">{vehicle.label}</span>
 							<span class="col-plate mono">{vehicle.plate}</span>
 							<span class="col-owner">{vehicle.owner}</span>
@@ -643,7 +751,7 @@
 
 	.list-header {
 		display: grid;
-		grid-template-columns: 2fr 1fr 1.5fr 0.8fr 0.6fr 0.8fr 1.5fr;
+		grid-template-columns: 28px 2fr 1fr 1.5fr 0.8fr 0.6fr 0.8fr 1.5fr;
 		gap: 8px;
 		padding: 8px 16px;
 		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
@@ -663,13 +771,17 @@
 		scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
 	}
 
+	.vehicle-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.04); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; color: rgba(255,255,255,0.15); position: relative; }
+	.vehicle-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+	.vehicle-avatar svg { position: relative; z-index: 0; }
+
 	.list-body::-webkit-scrollbar { width: 4px; }
 	.list-body::-webkit-scrollbar-track { background: transparent; }
 	.list-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
 
 	.vehicle-row {
 		display: grid;
-		grid-template-columns: 2fr 1fr 1.5fr 0.8fr 0.6fr 0.8fr 1.5fr;
+		grid-template-columns: 28px 2fr 1fr 1.5fr 0.8fr 0.6fr 0.8fr 1.5fr;
 		gap: 8px;
 		padding: 7px 16px;
 		align-items: center;
@@ -852,24 +964,9 @@
 		border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 	}
 
-	.info-card-icon {
-		width: 36px;
-		height: 36px;
-		border-radius: 3px;
-		background: rgba(255, 255, 255, 0.03);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: rgba(255, 255, 255, 0.15);
-		flex-shrink: 0;
-		overflow: hidden;
-	}
-
-	.info-card-img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
+	.info-card-icon { width: 108px; height: 108px; border-radius: 3px; background: rgba(255,255,255,0.03); display: grid; place-items: center; color: rgba(255,255,255,0.15); flex-shrink: 0; overflow: hidden; position: relative; }
+	.info-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+	.info-card-icon svg:first-child { position: relative; z-index: 0; }
 
 	.info-card-body {
 		display: flex;
@@ -1145,4 +1242,58 @@
 	.state-active { color: rgba(52, 211, 153, 0.8) !important; }
 	.state-garaged { color: rgba(var(--accent-text-rgb), 0.8) !important; }
 	.state-impounded-state { color: rgba(251, 191, 36, 0.8) !important; }
+
+	/* MODAL FOR LINK/PROFIL PIC */
+	
+	.img-modal-overlay { position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px); }
+	
+	.img-modal { background:var(--dark-bg);border:1px solid rgba(255,255,255,0.08);border-radius:6px;width:min(360px,92vw);display:flex;flex-direction:column; }
+	
+	.img-modal-header { display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.06);font-size:12px;font-weight:600;color:rgba(255,255,255,0.85); }
+	
+	.img-modal-close { background:transparent;border:1px solid rgba(255,255,255,0.06);border-radius:3px;color:rgba(255,255,255,0.3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:all 0.1s; }
+	
+	.img-modal-close:hover { color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.1); }
+	
+	.img-modal-body { padding:14px 16px;display:flex;flex-direction:column;gap:6px; }
+	
+	.img-modal-label { color:rgba(255,255,255,0.35);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px; }
+	
+	.img-modal-input { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:3px;padding:5px 8px;color:rgba(255,255,255,0.8);font-size:11px;font-family:inherit;width:100%; }
+	
+	.img-modal-input:focus { outline:none;border-color:rgba(255,255,255,0.1); }
+	
+	.img-modal-input::placeholder { color:rgba(255,255,255,0.2); }
+	
+	.img-modal-hint { display:flex;align-items:center;gap:5px;font-size:10px;color:rgba(255,255,255,0.25);line-height:1.4; }
+	
+	.img-modal-hint a { color:rgba(var(--accent-text-rgb),0.5);text-decoration:none;transition:color 0.1s; }
+	
+	.img-modal-hint a:hover { color:rgba(var(--accent-text-rgb),0.85);text-decoration:underline; }
+	
+	.img-modal-footer { display:flex;justify-content:flex-end;gap:6px;padding:10px 16px;border-top:1px solid rgba(255,255,255,0.06); }
+	
+	.img-modal-cancel { background:transparent;border:1px solid rgba(255,255,255,0.06);border-radius:3px;padding:4px 10px;color:rgba(255,255,255,0.4);font-size:10px;font-weight:500;cursor:pointer;transition:all 0.1s; }
+	
+	.img-modal-cancel:hover:not(:disabled) { color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.1); }
+	
+	.img-modal-cancel:disabled { opacity:0.4;cursor:not-allowed; }
+	
+	.img-modal-confirm { background:rgba(16,185,129,0.06);color:rgba(52,211,153,0.7);border:1px solid rgba(16,185,129,0.1);border-radius:3px;padding:4px 12px;font-size:10px;font-weight:600;cursor:pointer;transition:all 0.1s; }
+	
+	.img-modal-confirm:hover:not(:disabled) { background:rgba(16,185,129,0.12);color:rgba(110,231,183,0.9); }
+	
+	.img-modal-confirm:disabled { opacity:0.4;cursor:not-allowed; }
+
+	.img-edit-btn { position: absolute; bottom: -1px; right: -1px; width: 22px; height: 22px; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }	
+	
+	.img-edit-btn:hover { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); }
+	
+	.vehicle-lightbox { position: relative; padding-top: 32px; }
+	
+	.lightbox-close-btn { position: absolute; top: 0; right: 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
+	
+	.lightbox-close-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
+	
+	.vehicle-lightbox-img { max-width: 90vw; max-height: calc(90vh - 32px); object-fit: contain; display: block; border-radius: 4px; }
 </style>

From c2b4bdb2b22285416726cfb2329329e14b7d016c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Mon, 4 May 2026 01:51:27 +0200
Subject: [PATCH 028/144] added mdt_vehicle_image

added this to UpdateVehicle:

   if payload.image ~= nil then
        updates[#updates + 1] = 'mdt_vehicle_image = ?'
        values[#values + 1] = payload.image
    end
---
 server/backend/vehicles.lua | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/server/backend/vehicles.lua b/server/backend/vehicles.lua
index 5e27fd61..c25dc2a8 100644
--- a/server/backend/vehicles.lua
+++ b/server/backend/vehicles.lua
@@ -193,6 +193,11 @@ ps.registerCallback(resourceName .. ':server:UpdateVehicle', function(source, pa
         values[#values + 1] = payload.information
     end
 
+    if payload.image ~= nil then
+        updates[#updates + 1] = 'mdt_vehicle_image = ?'
+        values[#values + 1] = payload.image
+    end
+
     if points ~= nil then
         updates[#updates + 1] = 'mdt_vehicle_points = ?'
         values[#values + 1] = points

From 2e9edc0fd6e103edc332d88a92b5d959d8a29e72 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Mon, 4 May 2026 02:16:25 +0200
Subject: [PATCH 029/144] changed picture to 108x108pxa and also added little
 icons per gun

changed picture to 108x108pxa and also added little icons per gun
---
 web/src/pages/Weapons.svelte | 57 ++++++++++++------------------------
 1 file changed, 19 insertions(+), 38 deletions(-)

diff --git a/web/src/pages/Weapons.svelte b/web/src/pages/Weapons.svelte
index 90c14e9d..cbbeb415 100644
--- a/web/src/pages/Weapons.svelte
+++ b/web/src/pages/Weapons.svelte
@@ -258,13 +258,14 @@
 
 		<div class="list-panel">
 			<div class="list-header">
-				<span class="col-name">Weapon</span>
-				<span class="col-serial">Serial</span>
-				<span class="col-owner">Owner</span>
-				<span class="col-class">Class</span>
-				<span class="col-type">Type</span>
-				<span class="col-tint">Tint</span>
-				<span class="col-flags">Flags</span>
+				<span></span>
+				<span>Weapon</span>
+				<span>Serial</span>
+				<span>Owner</span>
+				<span>Class</span>
+				<span>Type</span>
+				<span>Tint</span>
+				<span>Flags</span>
 			</div>
 			<div class="list-body">
 				{#if loading}
@@ -274,6 +275,9 @@
 				{:else}
 					{#each filteredWeapons as weapon}
 						<button class="weapon-row" onclick={() => viewWeapon(weapon.id)}>
+							<div class="weapon-avatar">
+								<img src={weapon.image} alt="" />
+							</div>
 							<span class="col-name">
 								{weapon.name}
 								{#if weapon.scratched}<span class="scratched-badge">Scratched</span>{/if}
@@ -349,6 +353,9 @@
 		margin-left: auto;
 	}
 
+	.weapon-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.04); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
+	.weapon-avatar img { width: 100%; height: 100%; object-fit: cover; }
+
 	.back-btn {
 		display: flex;
 		align-items: center;
@@ -427,19 +434,7 @@
 		border-radius: 0;
 	}
 
-	.list-header {
-		display: grid;
-		grid-template-columns: 1.8fr 1fr 1.5fr 0.8fr 0.9fr 0.7fr 1.2fr;
-		gap: 8px;
-		padding: 8px 16px;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 9px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.6px;
-		flex-shrink: 0;
-	}
+	.list-header { display: grid; grid-template-columns: 24px 1.8fr 1fr 1.5fr 0.8fr 0.9fr 0.7fr 1.2fr; gap: 8px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; flex-shrink: 0; }
 
 	.list-body {
 		flex: 1;
@@ -451,22 +446,8 @@
 	.list-body::-webkit-scrollbar-track { background: transparent; }
 	.list-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
 
-	.weapon-row {
-		display: grid;
-		grid-template-columns: 1.8fr 1fr 1.5fr 0.8fr 0.9fr 0.7fr 1.2fr;
-		gap: 8px;
-		padding: 7px 16px;
-		align-items: center;
-		border: none;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-		background: transparent;
-		cursor: pointer;
-		transition: background 0.1s;
-		width: 100%;
-		text-align: left;
-		font: inherit;
-		color: inherit;
-	}
+	.weapon-row { display: grid; grid-template-columns: 24px 1.8fr 1fr 1.5fr 0.8fr 0.9fr 0.7fr 1.2fr; gap: 8px; padding: 7px 16px; align-items: center; border: none; border-bottom: 1px solid rgba(255,255,255,0.03); background: transparent; cursor: pointer; transition: background 0.1s; width: 100%; text-align: left; font: inherit; color: inherit; }
+
 
 	.weapon-row:hover {
 		background: rgba(255, 255, 255, 0.02);
@@ -598,8 +579,8 @@
 	}
 
 	.info-card-icon {
-		width: 36px;
-		height: 36px;
+		width: 108px;
+		height: 108px;
 		border-radius: 3px;
 		background: rgba(255, 255, 255, 0.03);
 		display: flex;

From 0c565bb3d171cf397ef774f3f86aac52bdb1d91b Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 5 May 2026 16:58:28 +0200
Subject: [PATCH 030/144] added notes interactions

added notes interactions
---
 web/src/pages/Citizens.svelte | 74 +++++++++++++++++++++++++++++++++--
 1 file changed, 71 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index ec279964..74d89238 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -127,6 +127,38 @@
 		return allFilteredCitizens.slice(start, start + citizenPerPage);
 	});
 
+	// Notes editing
+	let editingNotes = $state(false);
+	let notesValue = $state("");
+	let notesSaving = $state(false);
+
+	function startEditNotes() {
+		notesValue = selectedProfile?.notes || "";
+		editingNotes = true;
+	}
+
+	async function saveNotes() {
+		if (!selectedProfile) return;
+		notesSaving = true;
+		try {
+			const result = await fetchNui<{ success: boolean }>(
+				NUI_EVENTS.CITIZEN.UPDATE_CITIZEN,
+				{ citizenid: selectedProfile.citizenid, notes: notesValue },
+				{ success: true },
+			);
+			if (result?.success) {
+				selectedProfile = { ...selectedProfile, notes: notesValue };
+				editingNotes = false;
+				globalNotifications.success("Notes saved");
+			} else {
+				globalNotifications.error("Failed to save notes");
+			}
+		} catch {
+			globalNotifications.error("Failed to save notes");
+		}
+		notesSaving = false;
+	}
+
 	// Reset to page 1 when search changes
 	$effect(() => {
 		searchQuery;
@@ -317,6 +349,8 @@
 			evidencePage = 1;
 			reportsPage = 1;
 			licensesPage = 1;
+			editingNotes = false;
+			notesValue = "";
 		}
 	});
 
@@ -737,10 +771,39 @@
 
 				<!-- Main content -->
 				<div class="profile-main">
-					{#if selectedProfile.notes}
+					{#if selectedProfile.notes !== undefined}
 						<div class="panel">
-							<div class="panel-title">Notes</div>
-							<div class="notes-text">{selectedProfile.notes}</div>
+							<div class="panel-title">
+								Notes
+								{#if !editingNotes}
+									<button class="issue-license-btn" onclick={startEditNotes}>
+										<span class="material-icons" style="font-size: 12px;">edit</span> Edit
+									</button>
+								{/if}
+							</div>
+							{#if editingNotes}
+								<textarea
+									class="dna-input"
+									style="width:100%;min-height:80px;resize:vertical;font-family:inherit;"
+									bind:value={notesValue}
+									placeholder="Enter notes..."
+									maxlength={250}
+									onkeydown={(e) => { if (e.key === 'Enter' && e.ctrlKey) saveNotes(); }}
+								></textarea>
+								<div style="display:flex;align-items:center;justify-content:space-between;margin-top:8px;">
+									<div style="display:flex;gap:6px;">
+										<button class="notes-save-btn" onclick={saveNotes} disabled={notesSaving}>{notesSaving ? 'Saving...' : 'Save'}</button>
+										<button class="view-btn" onclick={() => { editingNotes = false; notesValue = selectedProfile?.notes || ''; }}>Cancel</button>
+									</div>
+									<span style="font-size:10px;color:{notesValue.length > 225 ? '#f87171' : 'rgba(255,255,255,0.2)'};">{notesValue.length}/250</span>
+								</div>
+							{:else}
+								{#if selectedProfile.notes?.trim()}
+									<div class="notes-text">{selectedProfile.notes}</div>
+								{:else}
+									<div class="empty-msg">No notes on file.</div>
+								{/if}
+							{/if}
 						</div>
 					{/if}
 
@@ -1286,4 +1349,9 @@
 	.license-modal-info { display: flex; align-items: center; gap: 8px; }
 	.license-modal-name { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 500; }
 	.license-modal-type { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.25); }
+
+	/* Notes */
+	.notes-save-btn { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.15); color: rgba(52,211,153,0.8); padding: 4px 12px; border-radius: 3px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.12s; }
+	.notes-save-btn:hover:not(:disabled) { background: rgba(16,185,129,0.14); color: #34d399; }
+	.notes-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 </style>

From 9696cba68028914ab8fd957a9758d0cd8e90707d Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 5 May 2026 17:16:56 +0200
Subject: [PATCH 031/144] added check for ems

added check for ems
- not allow ems to edit this note
---
 web/src/pages/Citizens.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index 74d89238..8ff53d27 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -775,7 +775,7 @@
 						<div class="panel">
 							<div class="panel-title">
 								Notes
-								{#if !editingNotes}
+								{#if !editingNotes && !isEMS}
 									<button class="issue-license-btn" onclick={startEditNotes}>
 										<span class="material-icons" style="font-size: 12px;">edit</span> Edit
 									</button>

From af1443c7063ced065a41d19e8739fc58ed896ec6 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Wed, 6 May 2026 11:37:04 +0200
Subject: [PATCH 032/144] added callbacks and streetname grabber

added callbacks and streetname grabber
---
 client/backend/citizens.lua | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/client/backend/citizens.lua b/client/backend/citizens.lua
index 1b83edb0..ee6f3780 100644
--- a/client/backend/citizens.lua
+++ b/client/backend/citizens.lua
@@ -6,6 +6,41 @@ RegisterNUICallback('getMyProfile', function(data, cb)
     cb(result or { success = false })
 end)
 
+RegisterNUICallback('getProperty', function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    if not data or not data.property_name then
+        cb({ success = false, message = 'Missing property name' })
+        return
+    end
+    local result = ps.callback(resourceName .. ':server:getProperty', data.property_name)
+    if not result or not result.success then
+        cb(result or { success = false, message = 'Property not found' })
+        return
+    end
+
+    -- Straßenname client-seitig auflösen
+    if result.property and result.property.coords then
+        local coords = result.property.coords
+        local street1, street2 = GetStreetNameAtCoord(coords.x, coords.y, coords.z)
+        local s1 = street1 and GetStreetNameFromHashKey(street1) or nil
+        local s2 = street2 and GetStreetNameFromHashKey(street2) or nil
+        if s1 and s1 ~= '' then
+            result.property.streetName = (s2 and s2 ~= '') and (s1 .. ' / ' .. s2) or s1
+        end
+    end
+
+    cb(result)
+end)
+ 
+-- setWaypoint: sets a GPS blip on the map from NUI coords
+-- The NUI calls fetchNui('setWaypoint', { x, y }) — no server round-trip needed.
+RegisterNUICallback('setWaypoint', function(data, cb)
+    cb({})
+    if not data or not data.x or not data.y then return end
+    SetNewWaypoint(data.x, data.y)
+end)
+ 
+
 RegisterNUICallback('getCitizens', function(data, cb)
     if not MDTOpen then cb({}) return end
     if type(data) ~= 'table' then

From f15503cdf7d8ba748f3c2e7f928c916e063c5a75 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Wed, 6 May 2026 11:37:34 +0200
Subject: [PATCH 033/144] added callbacks and changed some sql stuff to match
 qbx housing

added callbacks and changed some sql stuff to match qbx housing
---
 server/backend/citizens.lua | 118 +++++++++++++++++++++++++++++++++++-
 1 file changed, 115 insertions(+), 3 deletions(-)

diff --git a/server/backend/citizens.lua b/server/backend/citizens.lua
index 8cde669c..2d984b5a 100644
--- a/server/backend/citizens.lua
+++ b/server/backend/citizens.lua
@@ -143,7 +143,7 @@ ps.registerCallback(resourceName .. ':server:getCitizens', function(source, page
         end
 
         local propRows = safeQuery(
-            ('SELECT citizenid, COUNT(*) AS cnt FROM player_houses WHERE citizenid IN (%s) GROUP BY citizenid'):format(inClause),
+            ('SELECT citizenid, COUNT(*) AS cnt FROM properties WHERE owner IN (%s) GROUP BY owner'):format(inClause),
             citizenids
         )
         for _, row in ipairs(propRows) do
@@ -276,7 +276,7 @@ ps.registerCallback(resourceName .. ':server:searchCitizens', function(source, q
         end
 
         local propRows = safeQuery(
-            ('SELECT citizenid, COUNT(*) AS cnt FROM player_houses WHERE citizenid IN (%s) GROUP BY citizenid'):format(inClause),
+            ('SELECT owner, COUNT(*) AS cnt FROM properties WHERE owner IN (%s) GROUP BY owner'):format(inClause),
             citizenids
         )
         for _, row in ipairs(propRows) do
@@ -420,7 +420,7 @@ ps.registerCallback(resourceName .. ':server:getCitizenProfile', function(source
     local flags = collectCitizenFlags({ citizenid })
     local vehicles = MySQL.query.await('SELECT plate, vehicle FROM player_vehicles WHERE citizenid = ?', { citizenid }) or {}
     local vehiclesCount = #vehicles
-    local properties = MySQL.query.await('SELECT house FROM player_houses WHERE citizenid = ?', { citizenid }) or {}
+    local properties = MySQL.query.await('SELECT id, property_name, coords, keyholders FROM properties WHERE owner = ?', { citizenid }) or {}
     local propertiesCount = #properties
     local arrestsCount = MySQL.scalar.await('SELECT COUNT(*) FROM mdt_arrests WHERE citizenid = ?', { citizenid }) or 0
     local activeWarrants = MySQL.query.await([[
@@ -1108,3 +1108,115 @@ ps.registerCallback(resourceName .. ':server:getMyProfile', function(source)
         }
     }
 end)
+
+ps.registerCallback(resourceName .. ':server:getProperty', function(source, propertyName)
+    local src = source
+    if not CheckAuth(src) then return { success = false, message = 'Unauthorized' } end
+ 
+    if not propertyName or propertyName == '' then
+        return { success = false, message = 'Missing property name' }
+    end
+ 
+    -- Fetch the property row (match by property_name)
+    local propRow = MySQL.single.await([[
+        SELECT id, property_name, coords, owner, keyholders
+        FROM properties
+        WHERE property_name = ?
+        LIMIT 1
+    ]], { propertyName })
+ 
+    if not propRow then
+        return { success = false, message = 'Property not found' }
+    end
+ 
+    -- Decode coords JSON → table
+    local coords = nil
+    if propRow.coords and propRow.coords ~= '' then
+        local ok, decoded = pcall(json.decode, propRow.coords)
+        if ok and decoded then
+            coords = decoded
+        end
+    end
+ 
+    -- Resolve owner citizenid → full name
+    local ownerName = nil
+    if propRow.owner and propRow.owner ~= '' then
+        local ownerRow = MySQL.single.await([[
+            SELECT JSON_UNQUOTE(JSON_EXTRACT(charinfo, '$.firstname')) AS firstname,
+                   JSON_UNQUOTE(JSON_EXTRACT(charinfo, '$.lastname'))  AS lastname
+            FROM players
+            WHERE citizenid = ?
+            LIMIT 1
+        ]], { propRow.owner })
+        if ownerRow then
+            ownerName = (ownerRow.firstname or '') .. ' ' .. (ownerRow.lastname or '')
+            ownerName = ownerName:match('^%s*(.-)%s*$') -- trim
+        end
+    end
+ 
+    -- Decode keyholders JSON → array of citizenids
+    -- The column stores either a JSON array of citizenids (["CID1","CID2",...])
+    -- or a JSON object keyed by citizenid — we handle both.
+    local keyholderList = {}
+    if propRow.keyholders and propRow.keyholders ~= '' and propRow.keyholders ~= '{}' and propRow.keyholders ~= '[]' then
+        local ok, decoded = pcall(json.decode, propRow.keyholders)
+        if ok and decoded then
+            -- Array form: ["CID1", "CID2"]
+            if decoded[1] ~= nil then
+                for _, cid in ipairs(decoded) do
+                    keyholderList[#keyholderList + 1] = tostring(cid)
+                end
+            else
+                -- Object/map form: { CID1 = true, CID2 = 1, ... }
+                for cid, _ in pairs(decoded) do
+                    keyholderList[#keyholderList + 1] = tostring(cid)
+                end
+            end
+        end
+    end
+ 
+    -- Batch-resolve keyholder names
+    local keyholders = {}
+    if #keyholderList > 0 then
+        local placeholders = {}
+        for i = 1, #keyholderList do placeholders[i] = '?' end
+        local khRows = MySQL.query.await(([[
+            SELECT citizenid,
+                   JSON_UNQUOTE(JSON_EXTRACT(charinfo, '$.firstname')) AS firstname,
+                   JSON_UNQUOTE(JSON_EXTRACT(charinfo, '$.lastname'))  AS lastname
+            FROM players
+            WHERE citizenid IN (%s)
+        ]]):format(table.concat(placeholders, ',')), keyholderList)
+ 
+        -- Build a lookup map for fast access
+        local nameMap = {}
+        for _, row in ipairs(khRows or {}) do
+            local full = ((row.firstname or '') .. ' ' .. (row.lastname or '')):match('^%s*(.-)%s*$')
+            nameMap[row.citizenid] = full ~= '' and full or nil
+        end
+ 
+        -- Preserve original keyholder order
+        for _, cid in ipairs(keyholderList) do
+            -- Skip if the keyholder is the owner (already shown as owner)
+            if cid ~= propRow.owner then
+                keyholders[#keyholders + 1] = {
+                    citizenid = cid,
+                    name = nameMap[cid] or 'Unknown',
+                }
+            end
+        end
+    end
+
+
+    return {
+        success = true,
+        property = {
+            property_name = propRow.property_name,
+            coords        = coords,
+            streetName    = propRow.streetName,
+            owner         = propRow.owner or nil,
+            ownerName     = ownerName,
+            keyholders    = keyholders,
+        }
+    }
+end)
\ No newline at end of file

From 7492cb6a8395cda8daa778adaad3bee3144ed4ae Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Wed, 6 May 2026 11:38:15 +0200
Subject: [PATCH 034/144] added entire new property modul to showcase info

added entire new property modul to showcase info
---
 web/src/pages/Citizens.svelte | 296 ++++++++++++++++++++++++++++------
 1 file changed, 250 insertions(+), 46 deletions(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index ec279964..0cb2313c 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -87,7 +87,7 @@
 			vehicle: string;
 		}>;
 		propertiesList?: Array<{
-			house: string;
+			property_name: string;
 		}>;
 	}
 
@@ -127,7 +127,6 @@
 		return allFilteredCitizens.slice(start, start + citizenPerPage);
 	});
 
-	// Reset to page 1 when search changes
 	$effect(() => {
 		searchQuery;
 		citizenPage = 1;
@@ -145,7 +144,6 @@
 		loading = false;
 	}
 
-
 	onMount(async () => {
 		if (isEnvBrowser()) {
 			loading = false;
@@ -182,7 +180,6 @@
 		if (!raw) return "Unknown";
 		const num = typeof raw === "string" ? Number(raw) : raw;
 		if (!isNaN(num) && num > 1000000000) {
-			// Unix timestamp - if > 10 digits it's milliseconds
 			const ms = num > 9999999999 ? num : num * 1000;
 			const d = new Date(ms);
 			return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
@@ -258,8 +255,8 @@
 	async function viewProfile(citizenId: string) {
 		if (isEnvBrowser()) {
 			const mockProfiles: Record<string, CitizenProfile> = {
-				'ABC12345': { citizenid: 'ABC12345', firstName: 'Marcus', lastName: 'Rodriguez', gender: 'Male', dob: '1990-05-15', phone: '555-0142', fingerprint: 'FP-8291-AXKF', image: '', occupations: ['Mechanic', 'Taxi Driver'], properties: 2, vehicles: 3, arrests: 1, flags: ['Active Warrant', 'Violent'], notes: 'Known associate of local gangs. Exercise caution during traffic stops.', licenses: { driver: true, weapon: false }, customLicenses: [{ id: 1, name: 'Hunting License', active: true }, { id: 2, name: 'Boating License', active: false }, { id: 3, name: 'Pilot License', active: false }], ownedVehicles: [{ plate: '03ROY490', vehicle: 'Exemplar' }, { plate: 'FAST001', vehicle: 'Sultan' }, { plate: 'LOW99X', vehicle: 'Bati 801' }], propertiesList: [{ house: '4 Integrity Way, Apt 30' }, { house: '1561 San Vitas Street' }], weapons: [{ id: 1, serial: 'WPN-4821', scratched: 0, weaponModel: 'weapon_pistol' }, { id: 2, serial: 'WPN-9012', scratched: 1, weaponModel: 'weapon_smg' }], evidence: [{ id: 1, title: 'Shell Casings', type: 'Physical', report_id: 42, notes: 'Found at scene near Vespucci' }, { id: 2, title: 'CCTV Footage', type: 'Digital', case_id: 7 }], linkedReports: [{ id: 42, title: 'Armed Robbery - Fleeca Bank', type: 'Incident' }, { id: 55, title: 'Traffic Violation - Speeding', type: 'Citation' }], activeBolos: [{ id: 1, type: 'Person', reportId: '42', notes: 'Armed and dangerous, last seen near Legion Square' }] },
-				'DEF67890': { citizenid: 'DEF67890', firstName: 'Sarah', lastName: 'Chen', gender: 'Female', dob: '1995-11-22', phone: '555-0299', fingerprint: 'FP-1122-BXYZ', image: '', occupations: ['Doctor'], properties: 1, vehicles: 1, arrests: 0, flags: [], licenses: { driver: true, weapon: true }, customLicenses: [{ id: 1, name: 'Hunting License', active: false }, { id: 2, name: 'Boating License', active: true }, { id: 3, name: 'Pilot License', active: true }], ownedVehicles: [{ plate: 'MED001', vehicle: 'Schafter' }], propertiesList: [{ house: 'Eclipse Towers, Apt 5' }], weapons: [], evidence: [], linkedReports: [], activeBolos: [] },
+				'ABC12345': { citizenid: 'ABC12345', firstName: 'Marcus', lastName: 'Rodriguez', gender: 'Male', dob: '1990-05-15', phone: '555-0142', fingerprint: 'FP-8291-AXKF', image: '', occupations: ['Mechanic', 'Taxi Driver'], properties: 2, vehicles: 3, arrests: 1, flags: ['Active Warrant', 'Violent'], notes: 'Known associate of local gangs. Exercise caution during traffic stops.', licenses: { driver: true, weapon: false }, customLicenses: [{ id: 1, name: 'Hunting License', active: true }, { id: 2, name: 'Boating License', active: false }, { id: 3, name: 'Pilot License', active: false }], ownedVehicles: [{ plate: '03ROY490', vehicle: 'Exemplar' }, { plate: 'FAST001', vehicle: 'Sultan' }, { plate: 'LOW99X', vehicle: 'Bati 801' }], propertiesList: [{ property_name: '4 Integrity Way, Apt 30' }, { property_name: '1561 San Vitas Street' }], weapons: [{ id: 1, serial: 'WPN-4821', scratched: 0, weaponModel: 'weapon_pistol' }, { id: 2, serial: 'WPN-9012', scratched: 1, weaponModel: 'weapon_smg' }], evidence: [{ id: 1, title: 'Shell Casings', type: 'Physical', report_id: 42, notes: 'Found at scene near Vespucci' }, { id: 2, title: 'CCTV Footage', type: 'Digital', case_id: 7 }], linkedReports: [{ id: 42, title: 'Armed Robbery - Fleeca Bank', type: 'Incident' }, { id: 55, title: 'Traffic Violation - Speeding', type: 'Citation' }], activeBolos: [{ id: 1, type: 'Person', reportId: '42', notes: 'Armed and dangerous, last seen near Legion Square' }] },
+				'DEF67890': { citizenid: 'DEF67890', firstName: 'Sarah', lastName: 'Chen', gender: 'Female', dob: '1995-11-22', phone: '555-0299', fingerprint: 'FP-1122-BXYZ', image: '', occupations: ['Doctor'], properties: 1, vehicles: 1, arrests: 0, flags: [], licenses: { driver: true, weapon: true }, customLicenses: [{ id: 1, name: 'Hunting License', active: false }, { id: 2, name: 'Boating License', active: true }, { id: 3, name: 'Pilot License', active: true }], ownedVehicles: [{ plate: 'MED001', vehicle: 'Schafter' }], propertiesList: [{ property_name: 'Eclipse Towers, Apt 5' }], weapons: [], evidence: [], linkedReports: [], activeBolos: [] },
 				'GHI11223': { citizenid: 'GHI11223', firstName: 'James', lastName: 'Wilson', gender: 'Male', dob: '1988-03-08', phone: '555-0377', fingerprint: 'FP-3344-CDEF', image: '', occupations: [], properties: 0, vehicles: 2, arrests: 5, flags: ['Flight Risk'], licenses: { driver: false, weapon: false }, customLicenses: [{ id: 1, name: 'Hunting License', active: false }, { id: 2, name: 'Boating License', active: false }, { id: 3, name: 'Pilot License', active: false }], ownedVehicles: [{ plate: 'RUN4IT', vehicle: 'Comet' }, { plate: 'GHOST7', vehicle: 'Elegy' }], propertiesList: [], weapons: [{ id: 3, serial: 'WPN-5577', scratched: 0, weaponModel: 'weapon_assaultrifle' }], evidence: [], linkedReports: [{ id: 12, title: 'Evading Police', type: 'Incident' }], activeBolos: [] },
 			};
 			selectedProfile = mockProfiles[citizenId] || null;
@@ -271,6 +268,7 @@
 			});
 			if (response?.profile) {
 				selectedProfile = response.profile;
+				globalNotifications.success("Profile loaded");
 				citizens = citizens.map((citizen) =>
 					citizen.cid === response.profile.citizenid
 						? {
@@ -308,7 +306,6 @@
 	let reportsPage = $state(1);
 	let licensesPage = $state(1);
 
-	// Reset pages when profile changes
 	$effect(() => {
 		if (selectedProfile) {
 			vehiclesPage = 1;
@@ -335,12 +332,11 @@
 	let citizenImageBroken = $state(false);
 	function handleImageError() { citizenImageBroken = true; }
 
-	// Reset broken state when profile changes
 	$effect(() => {
 		if (selectedProfile) citizenImageBroken = false;
 	});
 
-	// Photo upload/mugshot for citizen profile
+	// Photo upload/mugshot
 	let citizenPhotoInput: HTMLInputElement | undefined = $state();
 	let uploading = $state(false);
 
@@ -425,6 +421,20 @@
 	let vehicleDetail: VehicleDetail | null = $state(null);
 	let vehicleDetailLoading = $state(false);
 
+	// ── Property detail modal ──
+	interface PropertyDetail {
+		property_name: string;
+		coords?: { x: number; y: number; z: number } | null;
+		streetName?: string;
+		owner?: string;
+		ownerName?: string;
+		keyholders?: Array<{ citizenid: string; name?: string }>;
+	}
+	let propertyDetail: PropertyDetail | null = $state(null);
+	let propertyDetailLoading = $state(false);
+	let waypointSet = $state(false);
+	let waypointTimeout: ReturnType<typeof setTimeout> | null = null;
+
 	function goToBolo(boloId: number) {
 		openBoloDetail(boloId);
 		tabService.setActiveTab("BOLOs");
@@ -464,6 +474,64 @@
 		vehicleDetail = null;
 	}
 
+	async function openPropertyFromProfile(propertyName: string) {
+		if (!propertyName) return;
+		propertyDetailLoading = true;
+		propertyDetail = null;
+		waypointSet = false;
+
+		if (isEnvBrowser()) {
+			await new Promise((r) => setTimeout(r, 400));
+			propertyDetail = {
+				property_name: propertyName,
+				coords: { x: -59.4, y: -616.29, z: 37.36 },
+				owner: 'ABC12345',
+				ownerName: 'Marcus Rodriguez',
+				keyholders: [
+					{ citizenid: 'DEF67890', name: 'Sarah Chen' },
+					{ citizenid: 'GHI11223', name: 'James Wilson' },
+				],
+			};
+			propertyDetailLoading = false;
+			return;
+		}
+
+		try {
+			const response = await fetchNui<any>(NUI_EVENTS.CITIZEN.GET_PROPERTY, { property_name: propertyName });
+			if (response?.property) {
+				propertyDetail = response.property;
+			} else {
+				propertyDetail = { property_name: propertyName };
+			}
+		} catch {
+			propertyDetail = { property_name: propertyName };
+		}
+		propertyDetailLoading = false;
+	}
+
+	function closePropertyDetail() {
+		propertyDetail = null;
+		waypointSet = false;
+		if (waypointTimeout) clearTimeout(waypointTimeout);
+	}
+
+	async function setPropertyWaypoint() {
+		if (!propertyDetail?.coords) return;
+		try {
+			await fetchNui(NUI_EVENTS.CITIZEN.SET_WAYPOINT, { x: propertyDetail.coords.x, y: propertyDetail.coords.y });
+			waypointSet = true;
+			if (waypointTimeout) clearTimeout(waypointTimeout);
+			waypointTimeout = setTimeout(() => { waypointSet = false; }, 2500);
+		} catch {
+			// silent — waypoint set is best-effort
+		}
+	}
+
+	function formatCoords(coords: { x: number; y: number; z: number } | null | undefined): string {
+		if (!coords) return 'Unknown';
+		return `${coords.x.toFixed(1)}, ${coords.y.toFixed(1)}, ${coords.z.toFixed(1)}`;
+	}
+
 	async function toggleLicense(type: "driver" | "weapon", enabled: boolean) {
 		if (!selectedProfile) return;
 		const response = await fetchNui(NUI_EVENTS.CITIZEN.UPDATE_CITIZEN_LICENSE, {
@@ -508,7 +576,7 @@
 		}
 	}
 
-	// ── Active licenses (only ones the citizen holds) ──
+	// ── Active licenses ──
 	interface LicenseEntry {
 		key: string;
 		name: string;
@@ -578,17 +646,13 @@
 
 	async function copyToClipboard(value: string, label: string) {
 		if (!value) return;
-
-		// In FiveM NUI, the Clipboard API is blocked by permissions policy.
-		// Use NUI callback to copy via Lua's lib.setClipboard instead.
 		try {
 			await fetchNui("copyToClipboard", { text: value });
 			showCopyNotice(label);
 			return;
 		} catch {
-			// NUI callback not available (dev mode) - try browser API
+			// NUI callback not available
 		}
-
 		try {
 			if (navigator?.clipboard?.writeText) {
 				await navigator.clipboard.writeText(value);
@@ -596,9 +660,8 @@
 				return;
 			}
 		} catch {
-			// Clipboard API blocked - silent
+			// silent
 		}
-
 		try {
 			const textarea = document.createElement("textarea");
 			textarea.value = value;
@@ -610,10 +673,9 @@
 			document.body.removeChild(textarea);
 			showCopyNotice(label);
 		} catch {
-			// Fallback also failed - silent
+			// silent
 		}
 	}
-
 </script>
 
 <div class="page">
@@ -732,7 +794,6 @@
 						</div>
 						<div class="detail-row"><span class="dlabel">Occupations</span><span class="dvalue">{formatOccupations(selectedProfile.occupations)}</span></div>
 					</div>
-
 				</div>
 
 				<!-- Main content -->
@@ -793,6 +854,7 @@
 							</div>
 						</div>
 
+						<!-- Vehicles -->
 						<div class="panel">
 							<div class="panel-title">Vehicles <span class="cnt">{selectedProfile.ownedVehicles?.length || 0}</span></div>
 							<div class="section-list">
@@ -859,12 +921,18 @@
 							{/if}
 						</div>
 
+						<!-- Properties -->
 						<div class="panel">
 							<div class="panel-title">Properties <span class="cnt">{selectedProfile.propertiesList?.length || 0}</span></div>
 							<div class="section-list">
 								{#if selectedProfile.propertiesList && selectedProfile.propertiesList.length > 0}
 									{#each sectionSlice(selectedProfile.propertiesList, propertiesPage) as p}
-										<div class="sitem"><div class="sitem-info"><span class="sitem-primary">{p.house}</span></div></div>
+										<div class="sitem">
+											<div class="sitem-info"><span class="sitem-primary">{p.property_name}</span></div>
+											<button class="sitem-arrow" title="View Property" onclick={() => openPropertyFromProfile(p.property_name)}>
+												<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+											</button>
+										</div>
 									{/each}
 								{:else}<div class="empty-msg">No properties</div>{/if}
 							</div>
@@ -880,6 +948,8 @@
 								</div>
 							{/if}
 						</div>
+
+						<!-- Weapons -->
 						<div class="panel">
 							<div class="panel-title">Weapons <span class="cnt">{selectedProfile.weapons?.length || 0}</span></div>
 							<div class="section-list">
@@ -907,6 +977,8 @@
 								</div>
 							{/if}
 						</div>
+
+						<!-- Evidence -->
 						<div class="panel">
 							<div class="panel-title">Evidence <span class="cnt">{selectedProfile.evidence?.length || 0}</span></div>
 							<div class="section-list">
@@ -933,6 +1005,8 @@
 								</div>
 							{/if}
 						</div>
+
+						<!-- Linked Reports -->
 						<div class="panel">
 							<div class="panel-title">Linked Reports <span class="cnt">{selectedProfile.linkedReports?.length || 0}</span></div>
 							<div class="section-list">
@@ -964,7 +1038,8 @@
 				</div>
 			</div>
 		</div>
-		<!-- Vehicle Detail Modal -->
+
+		<!-- ── Vehicle Detail Modal ── -->
 		{#if vehicleDetail || vehicleDetailLoading}
 			<div class="modal-overlay" onclick={closeVehicleDetail}>
 				<div class="modal-card" onclick={(e) => e.stopPropagation()}>
@@ -992,6 +1067,102 @@
 				</div>
 			</div>
 		{/if}
+
+		<!-- ── Property Detail Modal ── -->
+		{#if propertyDetail || propertyDetailLoading}
+			<div class="modal-overlay" onclick={closePropertyDetail}>
+				<div class="modal-card modal-card-property" onclick={(e) => e.stopPropagation()}>
+					{#if propertyDetailLoading}
+						<div class="center-msg"><div class="spinner"></div><span>Loading property...</span></div>
+					{:else if propertyDetail}
+						<div class="modal-header">
+							<div class="prop-modal-title-group">
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: rgba(96,165,250,0.6); flex-shrink:0; margin-top:1px"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+								<h3>{propertyDetail.property_name}</h3>
+							</div>
+							<button class="modal-close" onclick={closePropertyDetail}>
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+							</button>
+						</div>
+
+						<!-- Location banner -->
+						{#if propertyDetail.coords}
+							<button
+								class="prop-location-banner"
+								class:waypoint-active={waypointSet}
+								onclick={setPropertyWaypoint}
+								title="Set GPS waypoint"
+							>
+								<div class="prop-location-left">
+									<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
+									<div class="prop-location-text">
+										<span class="prop-location-label">Location</span>
+										<span class="prop-location-coords">
+											{propertyDetail.streetName || propertyDetail.property_name}
+										</span>
+									</div>
+								</div>
+								<div class="prop-waypoint-btn" class:waypoint-done={waypointSet}>
+									{#if waypointSet}
+										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+										Waypoint Set
+									{:else}
+										<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
+										Set Waypoint
+									{/if}
+								</div>
+							</button>
+						{/if}
+
+						<div class="modal-body">
+							<!-- Owner row -->
+							<div class="prop-section-label">Owner</div>
+							{#if propertyDetail.ownerName || propertyDetail.owner}
+								<div class="prop-person-row prop-owner-row">
+									<div class="prop-person-avatar prop-owner-avatar">
+										<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+									</div>
+									<div class="prop-person-info">
+										<span class="prop-person-name">{propertyDetail.ownerName || 'Unknown'}</span>
+										{#if propertyDetail.owner}
+											<span class="prop-person-cid">{propertyDetail.owner}</span>
+										{/if}
+									</div>
+									<span class="prop-role-badge prop-role-owner">Owner</span>
+								</div>
+							{:else}
+								<div class="prop-empty-row">No owner on record</div>
+							{/if}
+
+							<!-- Keyholders -->
+							<div class="prop-section-label prop-section-label-gap">
+								Keyholders
+								<span class="prop-kh-count">{propertyDetail.keyholders?.length || 0}</span>
+							</div>
+							{#if propertyDetail.keyholders && propertyDetail.keyholders.length > 0}
+								<div class="prop-keyholders-list">
+									{#each propertyDetail.keyholders as kh}
+										<button class="prop-person-row prop-person-clickable" onclick={() => { closePropertyDetail(); viewProfile(kh.citizenid); }}>
+											<div class="prop-person-avatar">
+												<svg width="13" height="13" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+											</div>
+											<div class="prop-person-info">
+												<span class="prop-person-name">{kh.name || 'Unknown'}</span>
+												<span class="prop-person-cid">{kh.citizenid}</span>
+											</div>
+											<span class="prop-role-badge prop-role-key">Key Access</span>
+										</button>
+									{/each}
+								</div>
+							{:else}
+								<div class="prop-empty-row">No keyholders</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
 		<!-- Issue License Modal -->
 		{#if showIssueLicenseModal}
 			<div class="modal-overlay" onclick={() => (showIssueLicenseModal = false)}>
@@ -1020,7 +1191,7 @@
 		<!-- ===== LIST VIEW ===== -->
 		<div class="list-view">
 			<div class="list-topbar">
-		<div class="search-box">
+				<div class="search-box">
 					<svg width="14" height="14" fill="rgba(255,255,255,0.35)" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
 					<input bind:value={searchQuery} type="text" placeholder="Search by name, ID, or phone..." />
 				</div>
@@ -1129,14 +1300,12 @@
 	@keyframes spin { to { transform: rotate(360deg); } }
 
 	/* ===== PROFILE VIEW ===== */
-	.profile-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+	.profile-view { display: flex; flex-direction: column; height: 100%; overflow: hidden;}
 
-	/* Panel caution inline */
 	.panel-caution { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; margin-bottom: 8px; }
 	.caution-danger { background: rgba(239,68,68,0.08); color: #f87171; }
 	.caution-warning { background: rgba(245,158,11,0.08); color: #fbbf24; }
 
-	/* Danger/warning panel variants */
 	.panel-danger { border: 1px solid rgba(239,68,68,0.35) !important; }
 	.panel-warning { border: 1px solid rgba(245,158,11,0.35) !important; }
 	.cnt-danger { background: rgba(239,68,68,0.12) !important; color: #f87171 !important; }
@@ -1154,14 +1323,12 @@
 	.copy-toast { color: #34d399; font-size: 11px; font-weight: 500; animation: fadeToast 1.4s ease-in-out; }
 	@keyframes fadeToast { 0%,100% { opacity: 0; } 30%,70% { opacity: 1; } }
 
-	/* Stats strip - inline like dashboard */
 	.pstats-row { display: flex; align-items: center; padding: 0 20px; height: 44px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.06); gap: 0; }
 	.pstat { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid rgba(255,255,255,0.06); }
 	.pstat:last-child { border-right: none; }
 	.pstat-val { color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 700; line-height: 1; }
 	.pstat-lbl { color: rgba(255,255,255,0.3); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
 
-	/* Body */
 	.profile-body { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; overflow: hidden; }
 
 	.profile-sidebar { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
@@ -1187,19 +1354,9 @@
 	.dvalue.clickable:hover { color: #60a5fa; }
 	.dvalue .edit-icon { font-size: 11px; margin-left: 4px; opacity: 0; transition: opacity 0.12s; vertical-align: middle; }
 	.dvalue.clickable:hover .edit-icon { opacity: 0.5; }
-	.dna-input {
-		background: rgba(255,255,255,0.06);
-		border: 1px solid rgba(96,165,250,0.3);
-		border-radius: 3px;
-		color: rgba(255,255,255,0.9);
-		font-size: 12px;
-		padding: 2px 6px;
-		outline: none;
-		width: 120px;
-	}
+	.dna-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(96,165,250,0.3); border-radius: 3px; color: rgba(255,255,255,0.9); font-size: 12px; padding: 2px 6px; outline: none; width: 120px; }
 	.dna-input:focus { border-color: rgba(96,165,250,0.6); }
 
-	.license-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; color: rgba(255,255,255,0.6); }
 	.license-status { font-size: 11px; color: rgba(239, 68, 68, 0.8); font-weight: 500; }
 	.license-status.license-active { color: rgba(34, 197, 94, 0.8); }
 
@@ -1217,7 +1374,6 @@
 	.profile-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
 	.sections-grid { display: grid; grid-template-columns: 1fr 1fr; }
 
-	/* Sections grid panels - use borders, no gaps */
 	.sections-grid .panel { border-bottom: 1px solid rgba(255,255,255,0.06); border-right: 1px solid rgba(255,255,255,0.06); }
 	.sections-grid .panel:nth-child(2n) { border-right: none; }
 	.profile-main > .panel { border-bottom: 1px solid rgba(255,255,255,0.06); }
@@ -1241,7 +1397,6 @@
 
 	.empty-msg { color: rgba(255,255,255,0.15); font-size: 11px; text-align: center; padding: 14px 0; }
 
-	/* ── Section mini-pager ── */
 	.section-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 0; margin-top: 2px; }
 	.spager-btn { background: transparent; border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; padding: 2px 4px; color: rgba(255,255,255,0.3); cursor: pointer; display: flex; align-items: center; transition: all 0.12s ease; }
 	.spager-btn:hover:not(:disabled) { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
@@ -1253,16 +1408,18 @@
 	.photo-action-btn:hover:not(:disabled) { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
 	.photo-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 	.upload-spinner { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,0.15); border-left-color: var(--accent-60); border-radius: 50%; animation: spin 0.8s linear infinite; }
-	@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
-	/* Vehicle detail modal */
+	/* ── Shared modals ── */
 	.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(2px); }
 	.modal-card { background: var(--dark-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; width: 360px; max-height: 80%; overflow-y: auto; }
+	.modal-card-property { width: 400px; }
 	.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
-	.modal-header h3 { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
-	.modal-close { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; }
+	.modal-header h3 { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	.modal-close { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; flex-shrink: 0; }
 	.modal-close:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
 	.modal-body { padding: 0; }
+
+	/* ── Vehicle modal rows ── */
 	.vd-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
 	.vd-row:last-child { border-bottom: none; }
 	.vd-label { color: rgba(255,255,255,0.3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
@@ -1275,6 +1432,53 @@
 	.vd-status-bolo { color: #fbbf24 !important; }
 	.vd-status-valid { color: #34d399 !important; }
 
+	/* ── Property modal ── */
+	.prop-modal-title-group { display: flex; align-items: flex-start; gap: 7px; flex: 1; min-width: 0; }
+	.prop-modal-title-group h3 { white-space: normal; line-height: 1.3; }
+
+	/* Location banner — clickable strip */
+	.prop-location-banner { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(96,165,250,0.04); border-bottom: 1px solid rgba(96,165,250,0.08); cursor: pointer; width: 100%; border: none; text-align: left; transition: background 0.12s; }
+	.prop-location-banner:hover { background: rgba(96,165,250,0.08); }
+	.prop-location-banner.waypoint-active { background: rgba(52,211,153,0.05); border-bottom-color: rgba(52,211,153,0.1); }
+	.prop-location-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
+	.prop-location-left svg { color: rgba(96,165,250,0.5); flex-shrink: 0; }
+	.prop-location-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+	.prop-location-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.25); }
+	.prop-location-coords { font-size: 11px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	.prop-person-clickable { cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; font: inherit; color: inherit; }
+	.prop-person-clickable:hover { background: rgba(255,255,255,0.03); }
+
+	.prop-waypoint-btn { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: rgba(96,165,250,0.6); flex-shrink: 0; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(96,165,250,0.12); background: rgba(96,165,250,0.05); transition: all 0.12s; }
+	.prop-location-banner:hover .prop-waypoint-btn { color: rgba(96,165,250,0.9); border-color: rgba(96,165,250,0.25); background: rgba(96,165,250,0.1); }
+	.prop-waypoint-btn.waypoint-done { color: #34d399; border-color: rgba(52,211,153,0.2); background: rgba(52,211,153,0.06); }
+
+	/* Property body sections */
+	.prop-section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.25); padding: 12px 16px 6px; display: flex; align-items: center; gap: 6px; }
+	.prop-section-label-gap { padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.04); }
+	.prop-kh-count { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); font-size: 9px; padding: 0 5px; border-radius: 3px; line-height: 15px; }
+
+	.prop-person-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; transition: background 0.1s; }
+	.prop-person-row:hover { background: rgba(255,255,255,0.02); }
+	.prop-keyholders-list { display: flex; flex-direction: column; padding-bottom: 4px; }
+
+	.prop-person-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(255,255,255,0.25); }
+	.prop-owner-avatar { background: rgba(96,165,250,0.08); color: rgba(96,165,250,0.5); }
+
+	.prop-person-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
+	.prop-person-name { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	.prop-person-cid { font-size: 10px; color: rgba(255,255,255,0.25); font-family: monospace; }
+
+	.prop-role-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; border: 1px solid transparent; }
+	.prop-role-owner { background: rgba(96,165,250,0.1); color: #93c5fd; border-color: rgba(96,165,250,0.15); }
+	.prop-role-key { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.06); }
+
+	.prop-empty-row { padding: 10px 16px; font-size: 11px; color: rgba(255,255,255,0.2); }
+
+	.prop-owner-row { border-bottom: none; }
+
+	.prop-coords-row { display: flex; align-items: center; gap: 6px; padding: 8px 16px 12px; border-top: 1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.2); font-size: 10px; font-family: monospace; }
+	.prop-coords-row svg { color: rgba(255,255,255,0.15); flex-shrink: 0; }
+
 	/* Issue License button */
 	.issue-license-btn { display: flex; align-items: center; gap: 3px; margin-left: auto; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.1); border-radius: 3px; padding: 2px 8px; color: rgba(147,197,253,0.7); font-size: 9px; font-weight: 600; cursor: pointer; transition: all 0.12s; text-transform: none; letter-spacing: 0; }
 	.issue-license-btn:hover { background: rgba(59,130,246,0.12); color: rgba(147,197,253,0.9); }
@@ -1286,4 +1490,4 @@
 	.license-modal-info { display: flex; align-items: center; gap: 8px; }
 	.license-modal-name { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 500; }
 	.license-modal-type { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.25); }
-</style>
+</style>
\ No newline at end of file

From 44d06e7dec73b91c43da0b287a2bc4cc4bdca327 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Wed, 6 May 2026 11:38:37 +0200
Subject: [PATCH 035/144] added new events

added new events
---
 web/src/constants/nuiEvents.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index e5175863..aa12e66f 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -65,6 +65,8 @@ export const NUI_EVENTS = {
 	},
 	CITIZEN: {
 		GET_CITIZENS: "getCitizens",
+		GET_PROPERTY: "getProperty",
+		SET_WAYPOINT: "setWaypoint",
 		SEARCH_CITIZENS: "searchCitizens",
 		GET_CITIZEN: "getCitizen",
 		UPDATE_CITIZEN: "updateCitizen",

From 33642753a7733049a3c32e650762f605ccfda73c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Wed, 6 May 2026 11:41:36 +0200
Subject: [PATCH 036/144] removed german debug

removed german debug
---
 client/backend/citizens.lua | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/backend/citizens.lua b/client/backend/citizens.lua
index ee6f3780..e7befd4a 100644
--- a/client/backend/citizens.lua
+++ b/client/backend/citizens.lua
@@ -18,7 +18,6 @@ RegisterNUICallback('getProperty', function(data, cb)
         return
     end
 
-    -- Straßenname client-seitig auflösen
     if result.property and result.property.coords then
         local coords = result.property.coords
         local street1, street2 = GetStreetNameAtCoord(coords.x, coords.y, coords.z)

From dfcc111a3e499c55b19b1a3cc4e50893d28adee2 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 07:10:40 +0200
Subject: [PATCH 037/144] use authorplaintxt with badge instead of author (
 citizenid )

https://r2.fivemanage.com/image/hKphHOBUH2pG.png
---
 web/src/pages/Reports.svelte | 58 +++++++++++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/Reports.svelte b/web/src/pages/Reports.svelte
index fe45e9d1..d3a316f6 100644
--- a/web/src/pages/Reports.svelte
+++ b/web/src/pages/Reports.svelte
@@ -42,6 +42,7 @@
 		title: string;
 		reportId: string;
 		author: string;
+		authorplaintext: string;
 		type: string;
 		datecreated: number;
 		dateupdated: number;
@@ -106,13 +107,13 @@
 		if (isEnvBrowser()) {
 			const now = Date.now();
 			reports = [
-				{ id: '1', title: 'Armed Robbery at Fleeca Bank', reportId: 'RPT-001', author: 'Ofc. Smith', type: 'Incident', datecreated: now - 86400000, dateupdated: now - 3600000, tag: 'Priority' },
-				{ id: '2', title: 'Traffic Stop - Suspended License', reportId: 'RPT-002', author: 'Ofc. Johnson', type: 'Citation', datecreated: now - 172800000, dateupdated: now - 86400000 },
-				{ id: '3', title: 'Drive-by Shooting on Vinewood Blvd', reportId: 'RPT-003', author: 'Det. Williams', type: 'Incident', datecreated: now - 259200000, dateupdated: now - 172800000, tag: 'Priority' },
-				{ id: '4', title: 'Arrest Report - David Chen', reportId: 'RPT-004', author: 'Sgt. Garcia', type: 'Arrest', datecreated: now - 345600000, dateupdated: now - 259200000 },
-				{ id: '5', title: 'Noise Complaint - Vespucci Beach', reportId: 'RPT-005', author: 'Ofc. Brown', type: 'Incident', datecreated: now - 432000000, dateupdated: now - 345600000 },
-				{ id: '6', title: 'Warrant Execution - Marcus Johnson', reportId: 'RPT-006', author: 'Det. Williams', type: 'Arrest', datecreated: now - 518400000, dateupdated: now - 432000000, tag: 'Warrant' },
-				{ id: '7', title: 'Hit and Run - Del Perro Pier', reportId: 'RPT-007', author: 'Ofc. Smith', type: 'Incident', datecreated: now - 604800000, dateupdated: now - 518400000 },
+				{ id: '1', title: 'Armed Robbery at Fleeca Bank', reportId: 'RPT-001', author: 'identifier_123', authorplaintext: 'Ofc. Smith', type: 'Incident', datecreated: now - 86400000, dateupdated: now - 3600000, tag: 'Priority' },
+				{ id: '2', title: 'Traffic Stop - Suspended License', reportId: 'RPT-002', author: 'identifier_123', authorplaintext: 'Ofc. Johnson', type: 'Citation', datecreated: now - 172800000, dateupdated: now - 86400000 },
+				{ id: '3', title: 'Drive-by Shooting on Vinewood Blvd', reportId: 'RPT-003', author: 'identifier_123', authorplaintext: 'Det. Williams', type: 'Incident', datecreated: now - 259200000, dateupdated: now - 172800000, tag: 'Priority' },
+				{ id: '4', title: 'Arrest Report - David Chen', reportId: 'RPT-004', author: 'identifier_123', authorplaintext: 'Sgt. Smith', type: 'Arrest', datecreated: now - 345600000, dateupdated: now - 259200000 },
+				{ id: '5', title: 'Noise Complaint - Vespucci Beach', reportId: 'RPT-005', author: 'identifier_123', authorplaintext: 'Ofc. Brown', type: 'Incident', datecreated: now - 432000000, dateupdated: now - 345600000 },
+				{ id: '6', title: 'Warrant Execution - Marcus Johnson', reportId: 'RPT-006', author: 'identifier_123', authorplaintext: 'Det. Williams', type: 'Arrest', datecreated: now - 518400000, dateupdated: now - 432000000, tag: 'Warrant' },
+				{ id: '7', title: 'Hit and Run - Del Perro Pier', reportId: 'RPT-007', author: 'identifier_123', authorplaintext: 'Ofc. Smith', type: 'Incident', datecreated: now - 604800000, dateupdated: now - 518400000 },
 			];
 			filteredReports = reports;
 			analytics = { incidents: 4, arrests: 2, warrants: 1 };
@@ -376,7 +377,21 @@
 						<button class="report-row" onclick={() => viewReport(report.id)}>
 							<span class="col-title">{report.title}</span>
 							<span class="col-id mono">{report.reportId}</span>
-							<span class="col-author">{report.author}</span>
+							<span class="col-author">
+								{#if report.authorplaintext}
+									{#if report.authorplaintext.startsWith('NO CALLSIGN')}
+										<span class="author-badge no-callsign">NO CS</span>
+										<span>{report.authorplaintext.replace('NO CALLSIGN', '').trim()}</span>
+									{:else if report.authorplaintext.includes(' ')}
+										<span class="author-badge">{report.authorplaintext.split(' ')[0]}</span>
+										<span>{report.authorplaintext.split(' ').slice(1).join(' ')}</span>
+									{:else}
+										{report.authorplaintext}
+									{/if}
+								{:else}
+									{report.author}
+								{/if}
+							</span>
 							<span class="col-type">
 								<span class={getTypePillClass(report.type)}>{report.type}</span>
 							</span>
@@ -666,6 +681,33 @@
 		text-overflow: ellipsis;
 	}
 
+	.col-author {
+		display: flex;
+		color: rgba(255, 255, 255, 0.4);
+		font-size: 11px;
+		align-items: center;
+		gap: 5px;
+		overflow: hidden;
+	}
+
+	.author-badge {
+		background: rgba(var(--accent-rgb), 0.1);
+		border: 1px solid rgba(var(--accent-rgb), 0.2);
+		color: rgba(var(--accent-text-rgb), 0.8);
+		font-size: 9px;
+		font-weight: 600;
+		padding: 1px 5px;
+		border-radius: 3px;
+		letter-spacing: 0.3px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.author-badge.no-callsign {
+		background: rgba(255, 255, 255, 0.03);
+		border-color: rgba(255, 255, 255, 0.06);
+		color: rgba(255, 255, 255, 0.35);
+	}
 	.col-type {
 		display: flex;
 		align-items: center;

From ea41a63540a759681cd588e1186ae01c5e11f163 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 07:21:36 +0200
Subject: [PATCH 038/144] fixed not allowing callsign changes

fixed not allowing callsign changes
---
 web/src/pages/Roster.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/Roster.svelte b/web/src/pages/Roster.svelte
index aff499f8..862ce2a9 100644
--- a/web/src/pages/Roster.svelte
+++ b/web/src/pages/Roster.svelte
@@ -982,7 +982,7 @@
 					<button
 						class="btn-save"
 						onclick={saveCallsign}
-						disabled={isSavingBoss || !editCallsign.trim()}
+						disabled={isSavingBoss || editCallsign.length === 0}
 					>
 						{isSavingBoss ? "Saving..." : "Save Callsign"}
 					</button>

From b3566723498d6917c509650564d72f850bf4abdc Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 13:45:43 +0200
Subject: [PATCH 039/144] changed from property_name to property_id

changed from property_name to property_id
---
 client/backend/citizens.lua | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/backend/citizens.lua b/client/backend/citizens.lua
index e7befd4a..703ad80a 100644
--- a/client/backend/citizens.lua
+++ b/client/backend/citizens.lua
@@ -8,26 +8,24 @@ end)
 
 RegisterNUICallback('getProperty', function(data, cb)
     if not MDTOpen then cb({ success = false }) return end
-    if not data or not data.property_name then
-        cb({ success = false, message = 'Missing property name' })
+    if not data or not data.property_id then
+        cb({ success = false, message = 'Missing property id' })
         return
     end
-    local result = ps.callback(resourceName .. ':server:getProperty', data.property_name)
+    local result = ps.callback(resourceName .. ':server:getProperty', data.property_id)
     if not result or not result.success then
         cb(result or { success = false, message = 'Property not found' })
         return
     end
-
     if result.property and result.property.coords then
         local coords = result.property.coords
-        local street1, street2 = GetStreetNameAtCoord(coords.x, coords.y, coords.z)
+        local street1, street2 = GetStreetNameAtCoord(coords.x, coords.y, coords.z, 1.0)
         local s1 = street1 and GetStreetNameFromHashKey(street1) or nil
         local s2 = street2 and GetStreetNameFromHashKey(street2) or nil
         if s1 and s1 ~= '' then
             result.property.streetName = (s2 and s2 ~= '') and (s1 .. ' / ' .. s2) or s1
         end
     end
-
     cb(result)
 end)
  

From 1f131d2ea19526b9eecb02bbd5c2b2f06e07b590 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 13:46:05 +0200
Subject: [PATCH 040/144] changed from property_name to property_id

changed from property_name to property_id
---
 server/backend/citizens.lua | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/server/backend/citizens.lua b/server/backend/citizens.lua
index 2d984b5a..e484bba1 100644
--- a/server/backend/citizens.lua
+++ b/server/backend/citizens.lua
@@ -1109,21 +1109,20 @@ ps.registerCallback(resourceName .. ':server:getMyProfile', function(source)
     }
 end)
 
-ps.registerCallback(resourceName .. ':server:getProperty', function(source, propertyName)
+ps.registerCallback(resourceName .. ':server:getProperty', function(source, propertyId)
     local src = source
     if not CheckAuth(src) then return { success = false, message = 'Unauthorized' } end
- 
-    if not propertyName or propertyName == '' then
-        return { success = false, message = 'Missing property name' }
+
+    if not propertyId then
+        return { success = false, message = 'Missing property id' }
     end
- 
-    -- Fetch the property row (match by property_name)
+
     local propRow = MySQL.single.await([[
         SELECT id, property_name, coords, owner, keyholders
         FROM properties
-        WHERE property_name = ?
+        WHERE id = ?
         LIMIT 1
-    ]], { propertyName })
+    ]], { propertyId })
  
     if not propRow then
         return { success = false, message = 'Property not found' }

From 682783c4d6413e1d2cba83d1766f4096c075c812 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 13:46:30 +0200
Subject: [PATCH 041/144] changed from property_name to property_id

changed from property_name to property_id
---
 web/src/pages/Citizens.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index 0cb2313c..66d89c7d 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -87,6 +87,7 @@
 			vehicle: string;
 		}>;
 		propertiesList?: Array<{
+			id: number;
 			property_name: string;
 		}>;
 	}
@@ -474,8 +475,8 @@
 		vehicleDetail = null;
 	}
 
-	async function openPropertyFromProfile(propertyName: string) {
-		if (!propertyName) return;
+	async function openPropertyFromProfile(propertyId: number, propertyName: string) {
+		if (!propertyId) return;
 		propertyDetailLoading = true;
 		propertyDetail = null;
 		waypointSet = false;
@@ -497,7 +498,7 @@
 		}
 
 		try {
-			const response = await fetchNui<any>(NUI_EVENTS.CITIZEN.GET_PROPERTY, { property_name: propertyName });
+			const response = await fetchNui<any>('getProperty', { property_id: propertyId });
 			if (response?.property) {
 				propertyDetail = response.property;
 			} else {
@@ -929,7 +930,7 @@
 									{#each sectionSlice(selectedProfile.propertiesList, propertiesPage) as p}
 										<div class="sitem">
 											<div class="sitem-info"><span class="sitem-primary">{p.property_name}</span></div>
-											<button class="sitem-arrow" title="View Property" onclick={() => openPropertyFromProfile(p.property_name)}>
+											<button class="sitem-arrow" title="View Property" onclick={() => openPropertyFromProfile(p.id, p.property_name)}>
 												<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
 											</button>
 										</div>

From ba2e7987422afe69c28f73c288dbe5a490a5fb79 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 16:06:12 +0200
Subject: [PATCH 042/144] edited correctly

changed SELECT citizenid to owner
---
 server/backend/citizens.lua | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/server/backend/citizens.lua b/server/backend/citizens.lua
index e484bba1..5839cb0f 100644
--- a/server/backend/citizens.lua
+++ b/server/backend/citizens.lua
@@ -143,11 +143,11 @@ ps.registerCallback(resourceName .. ':server:getCitizens', function(source, page
         end
 
         local propRows = safeQuery(
-            ('SELECT citizenid, COUNT(*) AS cnt FROM properties WHERE owner IN (%s) GROUP BY owner'):format(inClause),
+            ('SELECT owner, COUNT(*) AS cnt FROM properties WHERE owner IN (%s) GROUP BY owner'):format(inClause),
             citizenids
         )
         for _, row in ipairs(propRows) do
-            propCounts[row.citizenid] = tonumber(row.cnt) or 0
+            propCounts[row.owner] = tonumber(row.cnt) or 0
         end
 
         local vehRows = safeQuery(
@@ -280,7 +280,7 @@ ps.registerCallback(resourceName .. ':server:searchCitizens', function(source, q
             citizenids
         )
         for _, row in ipairs(propRows) do
-            propCounts[row.citizenid] = tonumber(row.cnt) or 0
+            propCounts[row.owner] = tonumber(row.cnt) or 0
         end
 
         local vehRows = safeQuery(

From 71ef6a39d2daa19ba648cb7301dcae99e7ee7406 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 20:06:24 +0200
Subject: [PATCH 043/144] added weapon flags to citizen profil

added weapon flags to citizen profil
---
 web/src/pages/Citizens.svelte | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Citizens.svelte b/web/src/pages/Citizens.svelte
index fa834a55..211ceb5a 100644
--- a/web/src/pages/Citizens.svelte
+++ b/web/src/pages/Citizens.svelte
@@ -81,6 +81,7 @@
 			information?: string;
 			weaponClass?: number;
 			weaponModel?: string;
+			flags?: Array<{ type: string; info: string }>;
 		}>;
 		linkedReports?: Array<{
 			id: number;
@@ -329,6 +330,16 @@
 		}
 	}
 
+	function getFlagClass(flag: { type: string; info: string }): string {
+		switch (flag.type) {
+			case "Stolen":
+			case "Wanted":
+				return "pill pill-red";
+			default:
+				return "pill pill-grey";
+		}
+	}
+
 	function formatOccupations(list: string[] = []) {
 		const cleaned = list.filter((item) => item && item.trim());
 		return cleaned.length ? cleaned.join(", ") : "None";
@@ -1088,8 +1099,20 @@
 								{#if selectedProfile.weapons && selectedProfile.weapons.length > 0}
 									{#each sectionSlice(selectedProfile.weapons, weaponsPage) as w}
 										<div class="sitem">
-											<div class="sitem-info"><span class="sitem-primary">{w.weaponModel}</span><span class="sitem-secondary">{w.serial}</span></div>
-											{#if w.scratched}<span class="badge badge-red">Scratched</span>{:else}<span class="badge badge-green">Intact</span>{/if}
+											<div class="sitem-info">
+												<span class="sitem-primary">{w.weaponModel}</span>
+												<span class="sitem-secondary">{w.serial}</span>
+											</div>
+											<div style="display:flex;align-items:center;gap:4px;flex-wrap:wrap;">
+												{#if w.scratched}
+													<span class="badge badge-red">Scratched</span>
+												{:else}
+													<span class="badge badge-green">Intact</span>
+												{/if}
+												{#each w.flags ?? [] as flag}
+													<span class="badge {flag.type === 'Stolen' || flag.type === 'Wanted' ? 'badge-red' : ''}">{flag.type}</span>
+												{/each}
+											</div>
 										</div>
 									{/each}
 								{:else}<div class="empty-msg">No weapons</div>{/if}

From 03dcd42c53c17a2f75edb6f8c87f4475c3b24b7e Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 20:07:14 +0200
Subject: [PATCH 044/144] made sure add weapon works as intended

made sure add weapon works as intended

From 2d2679d1fdc1efec413f17f7c3f39b88e75b6bf0 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 20:07:33 +0200
Subject: [PATCH 045/144] made sure add weapon works as intended

made sure add weapon works as intended
---
 server/backend/citizens.lua | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/server/backend/citizens.lua b/server/backend/citizens.lua
index 7e58726d..2f182030 100644
--- a/server/backend/citizens.lua
+++ b/server/backend/citizens.lua
@@ -517,12 +517,25 @@ ps.registerCallback(resourceName .. ':server:getCitizenProfile', function(source
     end
 
     local weapons = MySQL.query.await([[
-        SELECT id, serial, scratched, owner, information, weaponClass, weaponModel
+        SELECT id, serial, scratched, owner, information, weaponClass, weaponModel, flags
         FROM mdt_weapons
         WHERE owner = ?
         ORDER BY id DESC
     ]], { citizenid }) or {}
 
+    local weaponsMapped = {}
+    for _, w in ipairs(weapons) do
+        weaponsMapped[#weaponsMapped + 1] = {
+            id = w.id,
+            serial = w.serial,
+            scratched = w.scratched,
+            information = w.information,
+            weaponClass = w.weaponClass,
+            weaponModel = w.weaponModel,
+            flags = w.flags and json.decode(w.flags) or {},
+        }
+    end
+
     local linkedReports = {}
     if #involvedReportIds > 0 then
         local placeholders = (string.rep('?,', #involvedReportIds)):sub(1, -2)
@@ -589,7 +602,7 @@ ps.registerCallback(resourceName .. ':server:getCitizenProfile', function(source
             activeWarrants = activeWarrants,
             activeBolos = activeBoloDetails,
             evidence = evidence,
-            weapons = weapons,
+            weapons = weaponsMapped,
             linkedReports = linkedReports,
             ownedVehicles = vehicles,
             propertiesList = properties,

From 5afd4e49fffa05e09d311e0ade3ff316f6d0bebd Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 20:27:42 +0200
Subject: [PATCH 046/144] fixed ownership history

fixed ownership history
---
 server/backend/weapons.lua | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/server/backend/weapons.lua b/server/backend/weapons.lua
index d5dcd903..732a4f5c 100644
--- a/server/backend/weapons.lua
+++ b/server/backend/weapons.lua
@@ -165,8 +165,7 @@ ps.registerCallback(resourceName .. ':server:getWeaponOwnershipHistory', functio
     local src = source
     if not CheckAuth(src) then return {} end
 
-    payload = payload or {}
-    local serial = payload.serial
+    local serial = payload
 
     if not serial or serial == '' then return {} end
 
@@ -184,6 +183,10 @@ ps.registerCallback(resourceName .. ':server:getWeaponOwnershipHistory', functio
     return rows or {}
 end)
 
+ps.registerCallback(resourceName .. ':server:getWeaponConfig', function(source)
+    return { weapons = Config.Weapons }
+end)
+
 ps.registerCallback(resourceName .. ':server:saveWeaponFlags', function(source, serial, flags)
     local src = source
     if not CheckAuth(src) then return { success = false } end

From 72a88fdf8059aed2f753dd027c53d91c578d89cf Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 20:28:01 +0200
Subject: [PATCH 047/144] fixed ownership history

fixed ownership history
---
 web/src/pages/Weapons.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Weapons.svelte b/web/src/pages/Weapons.svelte
index 120580d2..10a52994 100644
--- a/web/src/pages/Weapons.svelte
+++ b/web/src/pages/Weapons.svelte
@@ -154,7 +154,7 @@
 		historyLoading = true;
 		try {
 			const response = await fetchNui<WeaponHistoryEntry[]>(
-				"getWeaponOwnershipHistory" as unknown as typeof NUI_EVENTS.WEAPON.GET_WEAPONS,
+				NUI_EVENTS.WEAPON.GET_WEAPON_HISTORY,
 				{ serial: weapon.serial },
 				[],
 			);
@@ -240,7 +240,7 @@
 			weapons = Array.isArray(weaponsRes.weapons) ? weaponsRes.weapons : [];
 			weaponOptions = configRes.weapons ?? [];
 		} catch (error) {
-			globalNotifications.error("Failed to load weapons");
+			globalNotifications.error("Failed to load weapons #1");
 			weapons = [];
 		}
 		loading = false;
@@ -253,7 +253,7 @@
 			const response = await fetchNui(NUI_EVENTS.WEAPON.GET_WEAPONS);
 			weapons = Array.isArray(response.weapons) ? response.weapons : [];
 		} catch (error) {
-			globalNotifications.error("Failed to load weapons");
+			globalNotifications.error("Failed to load weapons #2");
 			weapons = [];
 		}
 		loading = false;

From ab9e97f423861a453e0a8efb29c4d40ca5c8d630 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 7 May 2026 21:28:43 +0200
Subject: [PATCH 048/144] changed reports order to show newest at the top

changed reports order to show newest at the top
---
 server/backend/reports.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/backend/reports.lua b/server/backend/reports.lua
index 9794939f..a93c91bb 100644
--- a/server/backend/reports.lua
+++ b/server/backend/reports.lua
@@ -242,7 +242,7 @@ ps.registerCallback(resourceName .. ':server:getReports', function(source, page,
 		GROUP BY
 			mr.id
 		ORDER BY
-			mr.datecreated DESC
+			mr.id
 		LIMIT %d
 		OFFSET %d
 	]]):format(buildReportAccessClause(), filterClause, limit, offset)

From 4205ef21aa48bdc4304445fea698b66dcfd11bee Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 8 May 2026 13:38:17 +0200
Subject: [PATCH 049/144] fixed bodycam rotation and position

fixed bodycam rotation and position
---
 client/backend/bodycams.lua | 2 +-
 client/backend/cameras.lua  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/backend/bodycams.lua b/client/backend/bodycams.lua
index f10fa0d0..aaeac0ed 100644
--- a/client/backend/bodycams.lua
+++ b/client/backend/bodycams.lua
@@ -22,7 +22,7 @@ RegisterNUICallback('viewBodycam', function(data, cb)
     local result = ps.callback(resourceName .. ':server:viewBodycam', bodycamId)
 
     if result and result.success then
-        CloseMDT()
+        CloseMDT(true)
         cb({ success = true })
     else
         cb({ success = false, message = result and result.error or 'Failed to view bodycam' })
diff --git a/client/backend/cameras.lua b/client/backend/cameras.lua
index 2c1ac1a1..57566958 100644
--- a/client/backend/cameras.lua
+++ b/client/backend/cameras.lua
@@ -22,7 +22,7 @@ RegisterNUICallback('viewCamera', function(data, cb)
     local result = ps.callback(resourceName .. ':server:viewCamera', cameraId)
 
     if result and result.success then
-        CloseMDT()
+        CloseMDT(true)
         cb({ success = true })
     else
         cb({ success = false, message = result and result.error or 'Failed to view camera' })

From ad3a890854845fc48f07f9288fe22b2487e7409b Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 8 May 2026 13:39:14 +0200
Subject: [PATCH 050/144] fixed bodycam rotation ,position and animation

fixed bodycam rotation ,position and animation
---
 client/cameras.lua | 20 +++++++++-----------
 client/keys.lua    |  7 +++++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/client/cameras.lua b/client/cameras.lua
index 3db4fd91..f0b5b85d 100644
--- a/client/cameras.lua
+++ b/client/cameras.lua
@@ -50,6 +50,7 @@ local function stopCameraView(notifyServer)
         ClearTimecycleModifier()
 
         ps.debug('Clearing focus area')
+        StopTabletAnimation()
         ClearFocus()
 
         DoScreenFadeIn(250)
@@ -195,22 +196,19 @@ updateCameraControls = function()
     if currentCameraData and currentCameraData.isBodycam and currentCameraData.targetSource then
         local targetPed = GetPlayerPed(GetPlayerFromServerId(currentCameraData.targetSource))
         if targetPed and targetPed ~= 0 and DoesEntityExist(targetPed) then
-            -- SKEL_Head bone index = 31086
-            local boneIndex = GetPedBoneIndex(targetPed, 31086)
-            local boneCoords = GetPedBoneCoords(targetPed, boneIndex, 0.0, 0.0, 0.0)
-            -- Offset slightly forward and up from the head to simulate chest/shoulder bodycam
             local forward = GetEntityForwardVector(targetPed)
-            local camX = boneCoords.x + forward.x * 0.1
-            local camY = boneCoords.y + forward.y * 0.1
-            local camZ = boneCoords.z + 0.05
+            local pedCoords = GetEntityCoords(targetPed)
+
+            local camX = pedCoords.x + forward.x * 0.3
+            local camY = pedCoords.y + forward.y * 0.3
+            local camZ = pedCoords.z + 0.4
+
             SetCamCoord(currentCamera, camX, camY, camZ)
 
-            -- Point camera in the direction the ped is facing
             local heading = GetEntityHeading(targetPed)
-            local currentRot = GetCamRot(currentCamera, 2)
-            SetCamRot(currentCamera, currentRot.x, currentRot.y, -heading, 2)
+            local camZ_rot = heading
 
-            -- Update focus area so world streams around the target
+            SetCamRot(currentCamera, -10.0, 0.0, camZ_rot, 2)
             SetFocusPosAndVel(camX, camY, camZ, 0, 0, 0)
         end
     end
diff --git a/client/keys.lua b/client/keys.lua
index 14f7677a..3daa614f 100644
--- a/client/keys.lua
+++ b/client/keys.lua
@@ -174,11 +174,14 @@ end
 -- Close MDT
 local closeControlsPending = false
 
-function CloseMDT()
+
+function CloseMDT(keepAnimation)
     if MDTOpen then
         MDTOpen = false
 
-        StopTabletAnimation()
+        if not keepAnimation then
+            StopTabletAnimation()
+        end
 
         SendNUI('setVisible', { visible = false })
         SetNuiFocus(false, false)

From 5b590899db999542c1c7ea42567fa0d09cf6961c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 9 May 2026 20:37:38 +0200
Subject: [PATCH 051/144] SQL THAT NEEDS TO BE IMPORTED

---
 README.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b8a504d4..0d057823 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,12 @@
+THIS CHANGES NEEDS TO BE DONE:
+```lua
+ALTER TABLE mdt_reports_evidence
+  ADD COLUMN title VARCHAR(255) NOT NULL DEFAULT '' AFTER reportid,
+  ADD COLUMN images LONGTEXT NULL DEFAULT NULL AFTER stored;
+
+ALTER TABLE `mdt_weapons` ADD COLUMN `flags` JSON DEFAULT NULL;
+```
+
 # ps-mdt v3
 
 Police MDT (Mobile Data Terminal) for FiveM. Built with Svelte 5 and Lua. Works on QBCore and QBX through the ps_lib abstraction layer.
@@ -305,4 +314,4 @@ We host some of the biggest FiveM servers in the industry such as Prodigy RP, Sm
 - Free transfer of files and setup  
 - Free Windows licenses  
 - Windows Remote Desktop  
-- 24/7 Support with ~30 min average ticket response  
\ No newline at end of file
+- 24/7 Support with ~30 min average ticket response  

From a8837e164f333e0105647814d1b6b0986a9f97ba Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 13:48:17 +0200
Subject: [PATCH 052/144] Update README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 0d057823..bc6253a5 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,9 @@ ALTER TABLE mdt_reports_evidence
   ADD COLUMN images LONGTEXT NULL DEFAULT NULL AFTER stored;
 
 ALTER TABLE `mdt_weapons` ADD COLUMN `flags` JSON DEFAULT NULL;
+
+ALTER TABLE player_vehicles 
+MODIFY COLUMN mdt_vehicle_status VARCHAR(500) DEFAULT 'valid';
 ```
 
 # ps-mdt v3

From 4c47f630a691217a9267e9fe99405a6e6371f0c4 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 13:49:52 +0200
Subject: [PATCH 053/144] Update qbx.sql

---
 sql/qbx.sql | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sql/qbx.sql b/sql/qbx.sql
index b148f9c4..487c28df 100644
--- a/sql/qbx.sql
+++ b/sql/qbx.sql
@@ -553,7 +553,7 @@ CREATE TABLE IF NOT EXISTS `mdt_audit_logs` (
 ALTER TABLE `player_vehicles`
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_information` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_points` int(11) NOT NULL DEFAULT 0,
-  ADD COLUMN IF NOT EXISTS `mdt_vehicle_status` enum('valid','suspended','expired','impounded') NOT NULL DEFAULT 'valid',
+  ADD COLUMN IF NOT EXISTS `mdt_vehicle_status` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'valid',
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_stolen` tinyint(1) NOT NULL DEFAULT 0,
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_boloactive` tinyint(1) NOT NULL DEFAULT 0,
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL;
@@ -1324,4 +1324,4 @@ CREATE TABLE IF NOT EXISTS `mdt_warrant_reviews` (
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 -- Add lawyer_requested column to mdt_reports
-ALTER TABLE `mdt_reports` ADD COLUMN IF NOT EXISTS `lawyer_requested` tinyint(1) NOT NULL DEFAULT 0;
\ No newline at end of file
+ALTER TABLE `mdt_reports` ADD COLUMN IF NOT EXISTS `lawyer_requested` tinyint(1) NOT NULL DEFAULT 0;

From b5bc8c47d6d188f49d523ed9678d8303d82cbf75 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 13:50:19 +0200
Subject: [PATCH 054/144] Update qbcore.sql

---
 sql/qbcore.sql | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/sql/qbcore.sql b/sql/qbcore.sql
index 27d40e0d..735bb3e0 100644
--- a/sql/qbcore.sql
+++ b/sql/qbcore.sql
@@ -551,12 +551,12 @@ CREATE TABLE IF NOT EXISTS `mdt_audit_logs` (
 
 -- Extend player_vehicles with MDT fields (fresh install)
 ALTER TABLE `player_vehicles`
-  ADD COLUMN IF NOT EXISTS `mdt_vehicle_information` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
+  ADD COLUMN IF NOT EXISTS `mdt_vehicle_information` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_points` int(11) NOT NULL DEFAULT 0,
-  ADD COLUMN IF NOT EXISTS `mdt_vehicle_status` enum('valid','suspended','expired','impounded') NOT NULL DEFAULT 'valid',
+  ADD COLUMN IF NOT EXISTS `mdt_vehicle_status` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'valid',
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_stolen` tinyint(1) NOT NULL DEFAULT 0,
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_boloactive` tinyint(1) NOT NULL DEFAULT 0,
-  ADD COLUMN IF NOT EXISTS `mdt_vehicle_image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL;
+  ADD COLUMN IF NOT EXISTS `mdt_vehicle_image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL;
 
 CREATE TABLE IF NOT EXISTS `mdt_weapons` (
   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
@@ -1324,4 +1324,4 @@ CREATE TABLE IF NOT EXISTS `mdt_warrant_reviews` (
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
 -- Add lawyer_requested column to mdt_reports
-ALTER TABLE `mdt_reports` ADD COLUMN IF NOT EXISTS `lawyer_requested` tinyint(1) NOT NULL DEFAULT 0;
\ No newline at end of file
+ALTER TABLE `mdt_reports` ADD COLUMN IF NOT EXISTS `lawyer_requested` tinyint(1) NOT NULL DEFAULT 0;

From de40792760903b7e532930fa767d86a5a32a6b3f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 13:54:23 +0200
Subject: [PATCH 055/144] updates sql for my updates

---
 sql/qbx.sql | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/sql/qbx.sql b/sql/qbx.sql
index 487c28df..fb8dff33 100644
--- a/sql/qbx.sql
+++ b/sql/qbx.sql
@@ -1325,3 +1325,10 @@ CREATE TABLE IF NOT EXISTS `mdt_warrant_reviews` (
 
 -- Add lawyer_requested column to mdt_reports
 ALTER TABLE `mdt_reports` ADD COLUMN IF NOT EXISTS `lawyer_requested` tinyint(1) NOT NULL DEFAULT 0;
+-- Update mdt_reports_evidence with new columns
+ALTER TABLE mdt_reports_evidence
+  ADD COLUMN IF NOT EXISTS title VARCHAR(255) NOT NULL DEFAULT '' AFTER reportid,
+  ADD COLUMN IF NOT EXISTS images LONGTEXT NULL DEFAULT NULL AFTER stored;
+
+-- Add flags column to mdt_weapons
+ALTER TABLE `mdt_weapons` ADD COLUMN IF NOT EXISTS `flags` JSON DEFAULT NULL;

From 0a3be635843b04f19f2be7b0631184c1d26476c8 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 13:54:43 +0200
Subject: [PATCH 056/144] Update qbcore.sql

---
 sql/qbcore.sql | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/sql/qbcore.sql b/sql/qbcore.sql
index 735bb3e0..b0d6fc96 100644
--- a/sql/qbcore.sql
+++ b/sql/qbcore.sql
@@ -551,12 +551,12 @@ CREATE TABLE IF NOT EXISTS `mdt_audit_logs` (
 
 -- Extend player_vehicles with MDT fields (fresh install)
 ALTER TABLE `player_vehicles`
-  ADD COLUMN IF NOT EXISTS `mdt_vehicle_information` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
+  ADD COLUMN IF NOT EXISTS `mdt_vehicle_information` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_points` int(11) NOT NULL DEFAULT 0,
-  ADD COLUMN IF NOT EXISTS `mdt_vehicle_status` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'valid',
+  ADD COLUMN IF NOT EXISTS `mdt_vehicle_status` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT 'valid',
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_stolen` tinyint(1) NOT NULL DEFAULT 0,
   ADD COLUMN IF NOT EXISTS `mdt_vehicle_boloactive` tinyint(1) NOT NULL DEFAULT 0,
-  ADD COLUMN IF NOT EXISTS `mdt_vehicle_image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL;
+  ADD COLUMN IF NOT EXISTS `mdt_vehicle_image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL;
 
 CREATE TABLE IF NOT EXISTS `mdt_weapons` (
   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
@@ -1325,3 +1325,10 @@ CREATE TABLE IF NOT EXISTS `mdt_warrant_reviews` (
 
 -- Add lawyer_requested column to mdt_reports
 ALTER TABLE `mdt_reports` ADD COLUMN IF NOT EXISTS `lawyer_requested` tinyint(1) NOT NULL DEFAULT 0;
+-- Update mdt_reports_evidence with new columns
+ALTER TABLE mdt_reports_evidence
+  ADD COLUMN IF NOT EXISTS title VARCHAR(255) NOT NULL DEFAULT '' AFTER reportid,
+  ADD COLUMN IF NOT EXISTS images LONGTEXT NULL DEFAULT NULL AFTER stored;
+
+-- Add flags column to mdt_weapons
+ALTER TABLE `mdt_weapons` ADD COLUMN IF NOT EXISTS `flags` JSON DEFAULT NULL;

From 5fc3c477c646ac5f7be45663b80a5ef220d706c9 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 13:57:38 +0200
Subject: [PATCH 057/144] Add files via upload

---
 web/src/pages/Vehicles.svelte | 511 ++++++++++++++++++++++++++++------
 1 file changed, 432 insertions(+), 79 deletions(-)

diff --git a/web/src/pages/Vehicles.svelte b/web/src/pages/Vehicles.svelte
index d75a4964..da70a650 100644
--- a/web/src/pages/Vehicles.svelte
+++ b/web/src/pages/Vehicles.svelte
@@ -23,6 +23,7 @@
 		seenIn?: number;
 		points?: number;
 		status?: string;
+		reason?: string;
 		core_state?: number;
 	}
 
@@ -32,6 +33,7 @@
 		stolen?: boolean;
 		boloactive?: boolean;
 		core_state?: number;
+		reason?: string;
 		bolos?: Array<{
 			id: number;
 			reportId: string;
@@ -48,15 +50,52 @@
 	let vehicleDetailLoading = $state(false);
 	let vehicleDetailError = $state<string | null>(null);
 	let vehicleSaving = $state(false);
+	let editingNotes = $state(false);
+	let notesValue = $state("");
+	let notesSaving = $state(false);
 	let imageModalOpen = $state(false);
 	let imageUrlInput = $state("");
 	let imageSaving = $state(false);
 	let vehicleLightboxOpen = $state(false);
 	let vehicleImageBroken = $state(false)
+
 	$effect(() => {
 		if (selectedVehicle) vehicleImageBroken = false;
 	});
 
+	$effect(() => {
+		if (selectedVehicle) {
+			editingNotes = false;
+			notesValue = "";
+		}
+	});
+
+	function startEditNotes() {
+		notesValue = selectedVehicle?.information || "";
+		editingNotes = true;
+	}
+
+	async function saveNotes() {
+		if (!selectedVehicle) return;
+		notesSaving = true;
+		try {
+			const response = await fetchNui(NUI_EVENTS.VEHICLE.UPDATE_VEHICLE, {
+				plate: selectedVehicle.plate,
+				information: notesValue,
+			});
+			if (response?.success) {
+				selectedVehicle = { ...selectedVehicle, information: notesValue };
+				editingNotes = false;
+				globalNotifications.success("Notes saved");
+			} else {
+				globalNotifications.error(response?.message || "Failed to save notes");
+			}
+		} catch {
+			globalNotifications.error("Failed to save notes");
+		}
+		notesSaving = false;
+	}
+
 	function openVehicleLightbox() {
 		if (!selectedVehicle?.image || selectedVehicle.image.startsWith('https://docs.fivem.net')) return;
 		vehicleLightboxOpen = true;
@@ -183,7 +222,7 @@
 				};
 				vehicleForm.points = match.points ?? 0;
 				vehicleForm.status = match.status ?? "valid";
-				vehicleForm.reason = "";
+				vehicleForm.reason = match.reason ?? "";
 				linkedReports = [
 					{ id: 42, title: "Armed Robbery - Fleeca Bank", type: "Incident Report", datecreated: "2026-03-19", authorplaintext: "D2020 Ofc. Smith" },
 				];
@@ -194,11 +233,12 @@
 
 		try {
 			const response = await fetchNui(NUI_EVENTS.VEHICLE.GET_VEHICLE, { plate });
+			console.log(response.vehicle)
 			if (response?.vehicle) {
 				selectedVehicle = response.vehicle;
 				vehicleForm.points = response.vehicle.points ?? 0;
 				vehicleForm.status = response.vehicle.status ?? "valid";
-				vehicleForm.reason = "";
+				vehicleForm.reason = response.vehicle.reason ?? "";
 			} else {
 				vehicleDetailError = response?.message || "Failed to load vehicle";
 			}
@@ -241,6 +281,9 @@
 		vehicleDetailLoading = false;
 		vehicleSaving = false;
 		linkedReports = [];
+		editingNotes = false;
+		notesValue = "";
+		notesSaving = false;
 	}
 
 	async function saveVehicle() {
@@ -251,6 +294,7 @@
 				plate: selectedVehicle.plate,
 				points: vehicleForm.points,
 				status: vehicleForm.status,
+				reason: vehicleForm.reason,
 			});
 			if (!response?.success) {
 				vehicleDetailError = response?.message || "Failed to update vehicle";
@@ -260,10 +304,11 @@
 				...selectedVehicle,
 				points: vehicleForm.points,
 				status: vehicleForm.status,
+				reason: vehicleForm.reason,
 			};
 			vehicleList = vehicleList.map((vehicle) =>
 				vehicle.plate === selectedVehicle?.plate
-					? { ...vehicle, points: vehicleForm.points, status: vehicleForm.status }
+					? { ...vehicle, points: vehicleForm.points, status: vehicleForm.status, reason: vehicleForm.reason }
 					: vehicle,
 			);
 		} catch (error) {
@@ -331,7 +376,9 @@
 					{#if selectedVehicle.boloactive}
 						<span class="pill pill-orange">BOLO</span>
 					{/if}
-					<span class="pill {getStatusClass(selectedVehicle.status || 'valid')}">{selectedVehicle.status || 'Valid'}</span>
+					<span class="pill {getStatusClass(selectedVehicle.status || 'valid')}">
+						{(selectedVehicle.status || 'Valid').charAt(0).toUpperCase() + (selectedVehicle.status || 'Valid').slice(1)}{selectedVehicle.reason?.trim() ? ` (${selectedVehicle.reason.trim()})` : ''}
+					</span>
 				</div>
 			{/if}
 		</div>
@@ -383,24 +430,55 @@
 					</div>
 				</div>
 
-				{#if selectedVehicle.flags && selectedVehicle.flags.length}
+				<div class="section">
+					<div class="section-title">
+						Notes
+						{#if !editingNotes}
+							<button class="notes-edit-btn" onclick={startEditNotes}>
+								<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+								Edit
+							</button>
+						{/if}
+					</div>
+					{#if editingNotes}
+						<textarea
+							class="notes-textarea"
+							bind:value={notesValue}
+							placeholder="Enter notes..."
+							maxlength={500}
+							onkeydown={(e) => { if (e.key === 'Enter' && e.ctrlKey) saveNotes(); if (e.key === 'Escape') { editingNotes = false; } }}
+						></textarea>
+						<div class="notes-actions">
+							<div style="display:flex;gap:6px;">
+								<button class="notes-save-btn" onclick={saveNotes} disabled={notesSaving}>
+									{notesSaving ? 'Saving...' : 'Save'}
+								</button>
+								<button class="notes-cancel-btn" onclick={() => { editingNotes = false; }}>Cancel</button>
+							</div>
+							<span class="notes-char-count" class:notes-char-warn={notesValue.length > 450}>
+								{notesValue.length}/500
+							</span>
+						</div>
+					{:else}
+						{#if selectedVehicle.information?.trim()}
+							<p class="section-text">{selectedVehicle.information}</p>
+						{:else}
+							<div class="section-empty">No notes on file.</div>
+						{/if}
+					{/if}
+				</div>
+
+				{#if selectedVehicle.flags?.filter(f => !f.toLowerCase().startsWith('status:')).length}
 					<div class="section">
 						<div class="section-title">Flags</div>
 						<div class="flags-row">
-							{#each selectedVehicle.flags as flag}
+							{#each selectedVehicle.flags.filter(f => !f.toLowerCase().startsWith('status:')) as flag}
 								<span class={getFlagClass(flag)}>{flag}</span>
 							{/each}
 						</div>
 					</div>
 				{/if}
 
-				{#if selectedVehicle.information}
-					<div class="section">
-						<div class="section-title">Information</div>
-						<p class="section-text">{selectedVehicle.information}</p>
-					</div>
-				{/if}
-
 				<div class="section">
 					<div class="section-title">DMV Updates</div>
 					<div class="dmv-form">
@@ -571,10 +649,14 @@
 							<span class="col-class">{vehicle.class}</span>
 							<span class="col-points" class:accent-red={(vehicle.points ?? 0) > 0}>{vehicle.points ?? 0}</span>
 							<span class="col-status">
-								<span class="status-pill {getStatusClass(vehicle.status || 'valid')}">{vehicle.status || 'Valid'}</span>
+								<span 
+									class="status-pill {getStatusClass(vehicle.status || 'valid')}"
+									title={vehicle.reason?.trim() ? `${vehicle.status}: ${vehicle.reason}` : undefined}
+									>{vehicle.status || 'Valid'}
+								</span>
 							</span>
 							<span class="col-flags">
-								{#each vehicle.flags || [] as flag}
+								{#each (vehicle.flags || []).filter(f => !f.toLowerCase().startsWith('status:')) as flag}
 									<span class={getFlagClass(flag)}>{flag}</span>
 								{/each}
 							</span>
@@ -822,7 +904,7 @@
 		text-overflow: ellipsis;
 	}
 
-	.col-class, .col-type {
+	.col-class {
 		color: rgba(255, 255, 255, 0.35);
 		font-size: 10px;
 	}
@@ -1023,20 +1105,13 @@
 		border-bottom: none;
 	}
 
-	.section-title {
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 9px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.6px;
-		margin-bottom: 8px;
-	}
-
 	.section-text {
 		margin: 0;
 		color: rgba(255, 255, 255, 0.5);
 		font-size: 11px;
 		line-height: 1.5;
+		word-break: break-word;
+		white-space: pre-wrap;
 	}
 
 	.flags-row {
@@ -1243,57 +1318,335 @@
 	.state-garaged { color: rgba(var(--accent-text-rgb), 0.8) !important; }
 	.state-impounded-state { color: rgba(251, 191, 36, 0.8) !important; }
 
-	/* MODAL FOR LINK/PROFIL PIC */
-	
-	.img-modal-overlay { position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px); }
-	
-	.img-modal { background:var(--dark-bg);border:1px solid rgba(255,255,255,0.08);border-radius:6px;width:min(360px,92vw);display:flex;flex-direction:column; }
-	
-	.img-modal-header { display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.06);font-size:12px;font-weight:600;color:rgba(255,255,255,0.85); }
-	
-	.img-modal-close { background:transparent;border:1px solid rgba(255,255,255,0.06);border-radius:3px;color:rgba(255,255,255,0.3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:all 0.1s; }
-	
-	.img-modal-close:hover { color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.1); }
-	
-	.img-modal-body { padding:14px 16px;display:flex;flex-direction:column;gap:6px; }
-	
-	.img-modal-label { color:rgba(255,255,255,0.35);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px; }
-	
-	.img-modal-input { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:3px;padding:5px 8px;color:rgba(255,255,255,0.8);font-size:11px;font-family:inherit;width:100%; }
-	
-	.img-modal-input:focus { outline:none;border-color:rgba(255,255,255,0.1); }
-	
-	.img-modal-input::placeholder { color:rgba(255,255,255,0.2); }
-	
-	.img-modal-hint { display:flex;align-items:center;gap:5px;font-size:10px;color:rgba(255,255,255,0.25);line-height:1.4; }
-	
-	.img-modal-hint a { color:rgba(var(--accent-text-rgb),0.5);text-decoration:none;transition:color 0.1s; }
-	
-	.img-modal-hint a:hover { color:rgba(var(--accent-text-rgb),0.85);text-decoration:underline; }
-	
-	.img-modal-footer { display:flex;justify-content:flex-end;gap:6px;padding:10px 16px;border-top:1px solid rgba(255,255,255,0.06); }
-	
-	.img-modal-cancel { background:transparent;border:1px solid rgba(255,255,255,0.06);border-radius:3px;padding:4px 10px;color:rgba(255,255,255,0.4);font-size:10px;font-weight:500;cursor:pointer;transition:all 0.1s; }
-	
-	.img-modal-cancel:hover:not(:disabled) { color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.1); }
-	
-	.img-modal-cancel:disabled { opacity:0.4;cursor:not-allowed; }
-	
-	.img-modal-confirm { background:rgba(16,185,129,0.06);color:rgba(52,211,153,0.7);border:1px solid rgba(16,185,129,0.1);border-radius:3px;padding:4px 12px;font-size:10px;font-weight:600;cursor:pointer;transition:all 0.1s; }
-	
-	.img-modal-confirm:hover:not(:disabled) { background:rgba(16,185,129,0.12);color:rgba(110,231,183,0.9); }
-	
-	.img-modal-confirm:disabled { opacity:0.4;cursor:not-allowed; }
-
-	.img-edit-btn { position: absolute; bottom: -1px; right: -1px; width: 22px; height: 22px; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }	
-	
-	.img-edit-btn:hover { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); }
-	
-	.vehicle-lightbox { position: relative; padding-top: 32px; }
-	
-	.lightbox-close-btn { position: absolute; top: 0; right: 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
-	
-	.lightbox-close-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
-	
-	.vehicle-lightbox-img { max-width: 90vw; max-height: calc(90vh - 32px); object-fit: contain; display: block; border-radius: 4px; }
-</style>
+	/* ===== Modal ===== */
+	.img-modal-overlay {
+		position: absolute;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 100;
+		backdrop-filter: blur(2px);
+	}
+
+	.img-modal {
+		background: var(--dark-bg);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-radius: 6px;
+		width: min(360px, 92vw);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.img-modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 16px;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+		font-size: 12px;
+		font-weight: 600;
+		color: rgba(255, 255, 255, 0.85);
+	}
+
+	.img-modal-close {
+		background: transparent;
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		color: rgba(255, 255, 255, 0.3);
+		cursor: pointer;
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.1s;
+	}
+
+	.img-modal-close:hover {
+		color: rgba(255, 255, 255, 0.7);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.img-modal-body {
+		padding: 14px 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.img-modal-label {
+		color: rgba(255, 255, 255, 0.35);
+		font-size: 9px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.6px;
+	}
+
+	.img-modal-input {
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 5px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		font-family: inherit;
+		width: 100%;
+	}
+
+	.img-modal-input:focus {
+		outline: none;
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.img-modal-input::placeholder {
+		color: rgba(255, 255, 255, 0.2);
+	}
+
+	.img-modal-hint {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.25);
+		line-height: 1.4;
+	}
+
+	.img-modal-hint a {
+		color: rgba(var(--accent-text-rgb), 0.5);
+		text-decoration: none;
+		transition: color 0.1s;
+	}
+
+	.img-modal-hint a:hover {
+		color: rgba(var(--accent-text-rgb), 0.85);
+		text-decoration: underline;
+	}
+
+	.img-modal-footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 6px;
+		padding: 10px 16px;
+		border-top: 1px solid rgba(255, 255, 255, 0.06);
+	}
+
+	.img-modal-cancel {
+		background: transparent;
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 4px 10px;
+		color: rgba(255, 255, 255, 0.4);
+		font-size: 10px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+
+	.img-modal-cancel:hover:not(:disabled) {
+		color: rgba(255, 255, 255, 0.7);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.img-modal-cancel:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.img-modal-confirm {
+		background: rgba(16, 185, 129, 0.06);
+		color: rgba(52, 211, 153, 0.7);
+		border: 1px solid rgba(16, 185, 129, 0.1);
+		border-radius: 3px;
+		padding: 4px 12px;
+		font-size: 10px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+
+	.img-modal-confirm:hover:not(:disabled) {
+		background: rgba(16, 185, 129, 0.12);
+		color: rgba(110, 231, 183, 0.9);
+	}
+
+	.img-modal-confirm:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	/* ===== Image Edit / Lightbox ===== */
+	.img-edit-btn {
+		position: absolute;
+		bottom: -1px;
+		right: -1px;
+		width: 22px;
+		height: 22px;
+		background: rgba(0, 0, 0, 0.7);
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		border-radius: 4px;
+		color: rgba(255, 255, 255, 0.5);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.1s;
+	}
+
+	.img-edit-btn:hover {
+		color: rgba(255, 255, 255, 0.9);
+		border-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.vehicle-lightbox {
+		position: relative;
+		padding-top: 32px;
+	}
+
+	.lightbox-close-btn {
+		position: absolute;
+		top: 0;
+		right: 0;
+		background: rgba(255, 255, 255, 0.1);
+		border: 1px solid rgba(255, 255, 255, 0.12);
+		border-radius: 4px;
+		color: rgba(255, 255, 255, 0.6);
+		cursor: pointer;
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.1s;
+	}
+
+	.lightbox-close-btn:hover {
+		background: rgba(255, 255, 255, 0.2);
+		color: #fff;
+	}
+
+	.vehicle-lightbox-img {
+		max-width: 90vw;
+		max-height: calc(90vh - 32px);
+		object-fit: contain;
+		display: block;
+		border-radius: 4px;
+	}
+
+	/* ===== Vehicle Notes ===== */
+	.section-title {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		color: rgba(255, 255, 255, 0.35);
+		font-size: 9px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.6px;
+		margin-bottom: 8px;
+	}
+
+	.notes-edit-btn {
+		display: flex;
+		align-items: center;
+		gap: 3px;
+		margin-left: auto;
+		background: rgba(59, 130, 246, 0.06);
+		border: 1px solid rgba(59, 130, 246, 0.1);
+		border-radius: 3px;
+		padding: 2px 8px;
+		color: rgba(147, 197, 253, 0.7);
+		font-size: 9px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.12s;
+		text-transform: none;
+		letter-spacing: 0;
+	}
+
+	.notes-edit-btn:hover {
+		background: rgba(59, 130, 246, 0.12);
+		color: rgba(147, 197, 253, 0.9);
+	}
+
+	.notes-textarea {
+		width: 100%;
+		min-height: 80px;
+		max-height: 300px;
+		resize: vertical;
+		overflow-y: auto;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-radius: 3px;
+		padding: 6px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		font-family: inherit;
+		line-height: 1.5;
+		outline: none;
+		box-sizing: border-box;
+		transition: border-color 0.1s;
+	}
+
+	.notes-textarea:focus {
+		border-color: rgba(96, 165, 250, 0.3);
+	}
+
+	.notes-textarea::placeholder {
+		color: rgba(255, 255, 255, 0.2);
+	}
+
+	.notes-actions {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: 8px;
+	}
+
+	.notes-save-btn {
+		background: rgba(16, 185, 129, 0.08);
+		border: 1px solid rgba(16, 185, 129, 0.15);
+		color: rgba(52, 211, 153, 0.8);
+		padding: 4px 12px;
+		border-radius: 3px;
+		font-size: 10px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.12s;
+	}
+
+	.notes-save-btn:hover:not(:disabled) {
+		background: rgba(16, 185, 129, 0.14);
+		color: #34d399;
+	}
+
+	.notes-save-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.notes-cancel-btn {
+		background: transparent;
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		color: rgba(255, 255, 255, 0.35);
+		padding: 4px 10px;
+		border-radius: 3px;
+		font-size: 10px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.12s;
+	}
+
+	.notes-cancel-btn:hover {
+		color: rgba(255, 255, 255, 0.6);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.notes-char-count {
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.2);
+	}
+
+	.notes-char-warn {
+		color: #f87171;
+	}
+</style>
\ No newline at end of file

From 7324229dd199b799f43b01f96f17f417b4a4f0bf Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 13:57:58 +0200
Subject: [PATCH 058/144] Add files via upload

---
 server/backend/vehicles.lua | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/server/backend/vehicles.lua b/server/backend/vehicles.lua
index c25dc2a8..162c8b0d 100644
--- a/server/backend/vehicles.lua
+++ b/server/backend/vehicles.lua
@@ -31,6 +31,16 @@ local function formatLabel(value)
     return formatted
 end
 
+local function parseStatus(raw)
+    if not raw or raw == '' then return 'valid', '' end
+    local ok, decoded = pcall(function() return json.decode(raw) end)
+    if ok and type(decoded) == 'table' then
+        return decoded.status or 'valid', decoded.reason or ''
+    end
+    -- Fallback für alte plain-text Werte
+    return raw, ''
+end
+
 local function getVehicleShared(model)
     if not Core or not Core.Shared or not Core.Shared.Vehicles then
         return nil
@@ -118,7 +128,8 @@ ps.registerCallback(resourceName .. ':server:GetVehicles', function(source)
         local plate = v.plate and string.upper(v.plate) or 'UNKNOWN'
         local reportCount = countSetItems(reportIdsByPlate[plate])
         local hasActiveBolo = activeBoloByPlate[plate] == true or v.boloactive == 1
-        local flags = buildVehicleFlags(v.stolen == 1, hasActiveBolo, v.status)
+        local statusName, statusReason = parseStatus(v.status)
+        local flags = buildVehicleFlags(v.stolen == 1, hasActiveBolo, statusName)
 
         table.insert(vehicles, {
             id = v.id,
@@ -132,7 +143,8 @@ ps.registerCallback(resourceName .. ':server:GetVehicles', function(source)
             image = (v.image and v.image ~= '' and v.image) or ('https://docs.fivem.net/vehicles/' .. v.vehicle .. '.webp'),
             seenIn = reportCount,
             points = tonumber(v.points) or 0,
-            status = v.status or 'valid',
+            status = statusName,
+            reason = statusReason,
             core_state = tonumber(v.core_state) or 0,
         })
     end
@@ -204,8 +216,10 @@ ps.registerCallback(resourceName .. ':server:UpdateVehicle', function(source, pa
     end
 
     if status ~= nil then
+        local reason = payload.reason or ''
+        local encoded = json.encode({ status = status, reason = reason })
         updates[#updates + 1] = 'mdt_vehicle_status = ?'
-        values[#values + 1] = status
+        values[#values + 1] = encoded
     end
 
     if #updates == 0 then
@@ -283,7 +297,8 @@ ps.registerCallback(resourceName .. ':server:GetVehicle', function(source, plate
     end
 
     local reportCount = countSetItems(reportIdSet)
-    local flags = buildVehicleFlags(row.stolen == 1, hasActiveBolo or row.boloactive == 1, row.status)
+    local statusName, statusReason = parseStatus(row.status)
+    local flags = buildVehicleFlags(row.stolen == 1, hasActiveBolo or row.boloactive == 1, statusName)
 
     return {
         success = true,
@@ -299,7 +314,8 @@ ps.registerCallback(resourceName .. ':server:GetVehicle', function(source, plate
             image = (row.image and row.image ~= '' and row.image) or ('https://docs.fivem.net/vehicles/' .. row.vehicle .. '.webp'),
             information = row.information or '',
             points = tonumber(row.points) or 0,
-            status = row.status or 'valid',
+            status = statusName,
+            reason = statusReason,
             core_state = tonumber(row.core_state) or 0,
             stolen = row.stolen == 1,
             boloactive = row.boloactive == 1,

From f0322534cc4cbfec7171ff86689cf3020b31e92c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 10 May 2026 15:09:43 +0200
Subject: [PATCH 059/144] fixed offset

fixed offset
---
 web/src/pages/Map.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Map.svelte b/web/src/pages/Map.svelte
index c7fc7249..1a151d1c 100644
--- a/web/src/pages/Map.svelte
+++ b/web/src/pages/Map.svelte
@@ -26,10 +26,19 @@
 	let vehicleLayer = L.layerGroup();
 	let bodycamLayer = L.layerGroup();
 
-	const coordScale = 4.5;
+	// bigger = right
+	// smaller = left
+	const offsetX = 13;
+
+	// bigger = down
+	// smaller = up
+	const offsetY = 5;
 
 	function toMapLatLng(coords: { x: number; y: number }) {
-		return [coords.y / coordScale, coords.x / coordScale] as [number, number];
+		return [
+			coords.y - offsetY,
+			coords.x + offsetX
+		];
 	}
 
 	function getTrackConfig(kind: "officer" | "vehicle" | "bodycam") {

From 2c1459e49e50c6f74d51c02b42269fc8cece02f6 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 13:42:49 +0200
Subject: [PATCH 060/144] added new svelte ( fixed evidence tab and case tab )

added new svelte ( fixed evidence tab and case tab )
---
 web/src/pages/Cases.svelte    |  10 -
 web/src/pages/Evidence.svelte | 997 +++++++++++++---------------------
 2 files changed, 364 insertions(+), 643 deletions(-)

diff --git a/web/src/pages/Cases.svelte b/web/src/pages/Cases.svelte
index 1c1c0bec..2aa6d723 100644
--- a/web/src/pages/Cases.svelte
+++ b/web/src/pages/Cases.svelte
@@ -831,16 +831,6 @@
 						<input class="form-input" placeholder="Label" bind:value={attachmentDraft.label} />
 						<button class="action-btn" onclick={handleAddAttachment}>Add</button>
 					</div>
-					<div class="upload-row">
-						<input type="file" accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input" onchange={(event) => {
-							const input = event.target as HTMLInputElement;
-							attachmentFile = input.files && input.files[0] ? input.files[0] : null;
-						}} />
-						{#if attachmentFile}
-							<span class="muted-text">{attachmentFile.name} ({formatBytes(attachmentFile.size)})</span>
-						{/if}
-						<button class="primary-btn" onclick={handleUploadAttachment}>Upload</button>
-					</div>
 					{#if attachmentError}
 						<p class="error-text">{attachmentError}</p>
 					{/if}
diff --git a/web/src/pages/Evidence.svelte b/web/src/pages/Evidence.svelte
index cb91f1e7..ae75c808 100644
--- a/web/src/pages/Evidence.svelte
+++ b/web/src/pages/Evidence.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { createEvidenceService } from "../services/evidenceService.svelte";
-	import { formatBytes, compressImage } from "../services/uploadService";
 	import { isEnvBrowser } from "../utils/misc";
 	import type { createTabService } from "../services/tabService.svelte";
 	import type { MDTTab } from "../constants";
@@ -58,7 +57,7 @@
 		quantity: "",
 	});
 
-	// Per-type field config: which fields to show and custom labels/placeholders
+	// Per-type field config
 	const TYPE_FIELDS: Record<string, {
 		serial?: boolean; serialLabel?: string; serialPlaceholder?: string;
 		description?: boolean; descriptionPlaceholder?: string;
@@ -81,24 +80,30 @@
 	let custodyEntries = $state<any[]>([]);
 	let transferCitizenId = $state("");
 	let transferNotes = $state("");
-	let evidenceImageFile = $state<File | null>(null);
-	let evidenceImageLabel = $state("");
 	let evidenceError = $state("");
-	let isUploading = $state(false);
 	let linkCaseId = $state("");
 	let linkReportId = $state("");
 	let statusMessage: { text: string; type: "success" | "error" } | null = $state(null);
 	let lightboxUrl = $state<string | null>(null);
 	let lightboxLabel = $state("");
-	let createImageFiles = $state<File[]>([]);
+
+	// ── Image URL modal (for create form) ──
+	let createImageUrlModalOpen = $state(false);
+	let createImageUrlInput = $state("");
+	let createImageUrls = $state<{ url: string; label: string }[]>([]);
+
+	// ── Image URL modal (for selected evidence sidebar) ──
+	let sidebarImageUrlModalOpen = $state(false);
+	let sidebarImageUrlInput = $state("");
+	let sidebarImageLabelInput = $state("");
+	let isSidebarUploading = $state(false);
+	let uploadSuccess = $state("");
 
 	function showStatus(text: string, type: "success" | "error" = "success") {
 		statusMessage = { text, type };
 		setTimeout(() => { statusMessage = null; }, 3000);
 	}
 
-	const allowedEvidenceImageTypes = ["image/jpeg", "image/png", "image/webp"];
-
 	function openLightbox(url: string, label: string) {
 		lightboxUrl = url;
 		lightboxLabel = label;
@@ -126,13 +131,11 @@
 				items = response.data?.items || [];
 				total = response.data?.total || 0;
 			} else {
-				const response = await evidenceService.getEvidenceItems(
-					pageNumber,
-					limit,
-				);
+				const response = await evidenceService.getEvidenceItems(pageNumber, limit);
 				items = response.data?.items || [];
 				total = response.data?.total || 0;
 			}
+			
 			page = pageNumber;
 		} catch (error) {
 			items = [];
@@ -144,7 +147,7 @@
 
 	function resetCreateForm() {
 		createForm = { caseId: "", reportId: "", title: "", type: "Physical", serial: "", description: "", location: "", stashId: "", stored: false, notes: "", plateNumber: "", quantity: "" };
-		createImageFiles = [];
+		createImageUrls = [];
 	}
 
 	function buildNotes(): string {
@@ -162,9 +165,10 @@
 			evidenceError = "Title is required.";
 			return;
 		}
+
 		if (isEnvBrowser()) {
 			const newItem = {
-				id: items.length + 10,
+				id: Date.now(),
 				case_id: createForm.caseId ? Number(createForm.caseId) : null,
 				title: createForm.title.trim(),
 				type: createForm.type,
@@ -175,56 +179,67 @@
 				notes: buildNotes(),
 				created_at: new Date().toISOString(),
 				updated_by: "You",
+				images: createImageUrls.map((img, i) => ({ id: i + 1, url: img.url, label: img.label })),
 			};
 			items = [newItem, ...items];
 			total = items.length;
 			showCreate = false;
 			resetCreateForm();
+			showStatus("Evidence created successfully");
 			return;
 		}
-		const payload = {
-			caseId: createForm.caseId ? Number(createForm.caseId) : undefined,
-			reportId: createForm.reportId ? Number(createForm.reportId) : undefined,
-			evidence: {
-				title: createForm.title.trim(),
-				type: createForm.type,
-				serial: createForm.serial.trim() || (createForm.plateNumber.trim() ? createForm.plateNumber.trim() : ""),
-				location: createForm.location.trim(),
-				stashId: createForm.stashId.trim(),
-				stored: createForm.stored,
-				notes: buildNotes(),
-			},
-		};
-		const stashToOpen = createForm.stashId.trim();
-		const response = await evidenceService.addEvidenceItem(payload as any);
-		if (response.success) {
-			const newId = response.id || response.data?.id;
-			if (newId && createImageFiles.length > 0) {
-				for (const file of createImageFiles) {
-					const base64 = await fileToBase64(file);
-					await evidenceService.addEvidenceImage(newId, {
-						data: base64,
-						filename: file.name,
-						contentType: file.type,
-						label: file.name,
-					});
+
+		try {
+			const payload = {
+				caseId: createForm.caseId ? Number(createForm.caseId) : undefined,
+				reportId: createForm.reportId && createForm.reportId.trim() !== "" 
+					? Number(createForm.reportId) 
+					: undefined,  // explizit undefined statt leerer String
+				evidence: {
+					title: createForm.title.trim(),
+					type: createForm.type,
+					serial: createForm.serial.trim() || (createForm.plateNumber.trim() ? createForm.plateNumber.trim() : ""),
+					location: createForm.location.trim(),
+					stashId: createForm.stashId.trim(),
+					stored: createForm.stored,
+					notes: buildNotes(),
+				},
+			};
+			const stashToOpen = createForm.stashId.trim();
+			const response = await evidenceService.addEvidenceItem(payload as any);
+
+			if (response?.success) {
+				const newId = response.id || response.data?.id;
+				if (newId && createImageUrls.length > 0) {
+					for (const img of createImageUrls) {
+						await evidenceService.addEvidenceImage(newId, {
+							data: img.url,
+							filename: img.label || "image",
+							contentType: "url",
+							label: img.label,
+						});
+					}
 				}
+				showCreate = false;
+				resetCreateForm();
+				await loadEvidence(1);
+				showStatus("Evidence created successfully");
+				if (stashToOpen) {
+					await openStash(stashToOpen);
+				}
+			} else {
+				evidenceError = (response as any)?.error || "Failed to create evidence. Please try again.";
 			}
-			showCreate = false;
-			resetCreateForm();
-			await loadEvidence(1);
-			if (stashToOpen) {
-				await openStash(stashToOpen);
-			}
+		} catch (err) {
+			evidenceError = "An error occurred while creating evidence.";
 		}
 	}
 
 	async function selectEvidence(item: any) {
 		selectedEvidenceId = item.id;
-		selectedEvidence = item;
+		selectedEvidence = items.find(i => i.id === item.id) || item;
 		linkCaseId = item.case_id ? String(item.case_id) : "";
 		linkReportId = item.report_id ? String(item.report_id) : "";
-		// Log that this evidence was viewed (fire and forget, then refresh custody)
 		evidenceService.logEvidenceViewed(item.id);
 		custodyEntries = await evidenceService.getEvidenceCustody(item.id);
 	}
@@ -235,7 +250,6 @@
 			return;
 		}
 		try {
-			// Pass raw string - server handles both numeric IDs and case numbers like "CASE-2026-003"
 			const caseIdValue = /^\d+$/.test(linkCaseId.trim()) ? Number(linkCaseId.trim()) : linkCaseId.trim();
 			const result = await evidenceService.linkEvidenceToCase(
 				selectedEvidenceId,
@@ -264,10 +278,7 @@
 				showStatus("Report ID must be a number", "error");
 				return;
 			}
-			const result = await evidenceService.linkEvidenceToReport(
-				selectedEvidenceId,
-				reportIdNum,
-			);
+			const result = await evidenceService.linkEvidenceToReport(selectedEvidenceId, reportIdNum);
 			if (result?.success) {
 				showStatus("Evidence linked to Report #" + linkReportId.trim());
 				await loadEvidence(page);
@@ -317,38 +328,42 @@
 			transferCitizenId.trim(),
 			transferNotes.trim(),
 		);
-		custodyEntries = await evidenceService.getEvidenceCustody(
-			selectedEvidenceId,
-		);
+		custodyEntries = await evidenceService.getEvidenceCustody(selectedEvidenceId);
 		transferCitizenId = "";
 		transferNotes = "";
 	}
 
-	let uploadSuccess = $state("");
+	// ── Sidebar: add image via URL ──
+	async function handleAddSidebarImageUrl() {
+		const url = sidebarImageUrlInput.trim();
+		if (!selectedEvidenceId || !url || isSidebarUploading) return;
+		isSidebarUploading = true;
 
-	async function handleUploadEvidenceImage() {
-		if (!selectedEvidenceId || !evidenceImageFile || isUploading) return;
-		if (!allowedEvidenceImageTypes.includes(evidenceImageFile.type)) {
-			evidenceError = "Unsupported image type.";
-			return;
-		}
-		isUploading = true;
 		if (isEnvBrowser()) {
-			await new Promise((r) => setTimeout(r, 1000));
-			uploadSuccess = `Uploaded: ${evidenceImageFile.name}`;
-			evidenceImageFile = null;
-			evidenceImageLabel = "";
-			isUploading = false;
+			await new Promise((r) => setTimeout(r, 600));
+			if (selectedEvidence) {
+				if (!selectedEvidence.images) selectedEvidence.images = [];
+				selectedEvidence.images = [...selectedEvidence.images, {
+					id: Date.now(),
+					url,
+					label: sidebarImageLabelInput.trim() || "Evidence",
+				}];
+			}
+			uploadSuccess = "Image added successfully";
+			sidebarImageUrlInput = "";
+			sidebarImageLabelInput = "";
+			sidebarImageUrlModalOpen = false;
+			isSidebarUploading = false;
 			setTimeout(() => { uploadSuccess = ""; }, 3000);
 			return;
 		}
+
 		try {
-			const base64 = await compressImage(evidenceImageFile);
 			const result = await evidenceService.addEvidenceImage(selectedEvidenceId, {
-				data: base64,
-				filename: evidenceImageFile.name,
-				contentType: evidenceImageFile.type,
-				label: evidenceImageLabel.trim(),
+				data: url,
+				filename: sidebarImageLabelInput.trim() || "image",
+				contentType: "url",
+				label: sidebarImageLabelInput.trim(),
 			});
 			if (result?.success && result.url) {
 				if (selectedEvidence) {
@@ -356,19 +371,21 @@
 					selectedEvidence.images = [...selectedEvidence.images, {
 						id: result.id || Date.now(),
 						url: result.url,
-						label: evidenceImageLabel.trim(),
+						label: sidebarImageLabelInput.trim(),
 					}];
 				}
-				uploadSuccess = `Uploaded: ${evidenceImageFile.name}`;
+				uploadSuccess = "Image added successfully";
 			} else {
-				evidenceError = "Upload failed";
+				evidenceError = "Failed to add image";
 			}
 		} catch {
-			evidenceError = "Upload failed";
+			evidenceError = "Failed to add image";
 		}
-		evidenceImageFile = null;
-		evidenceImageLabel = "";
-		isUploading = false;
+
+		sidebarImageUrlInput = "";
+		sidebarImageLabelInput = "";
+		sidebarImageUrlModalOpen = false;
+		isSidebarUploading = false;
 		setTimeout(() => { uploadSuccess = ""; }, 3000);
 	}
 
@@ -400,6 +417,103 @@
 	});
 </script>
 
+<!-- ── Sidebar Image URL Modal ── -->
+{#if sidebarImageUrlModalOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div class="modal-backdrop" onclick={(e) => { if (e.target === e.currentTarget) sidebarImageUrlModalOpen = false; }}>
+		<div class="modal image-url-modal" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
+			<div class="modal-header">
+				<h3>Add Evidence Image</h3>
+				<button class="close-btn" onclick={() => sidebarImageUrlModalOpen = false}>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+				</button>
+			</div>
+			<div class="modal-body img-modal-body">
+				<div class="img-form-group">
+					<span class="img-label">Image URL</span>
+					<input
+						class="img-input"
+						type="url"
+						placeholder="https://example.com/photo.jpg"
+						bind:value={sidebarImageUrlInput}
+						onkeydown={(e) => { if (e.key === 'Enter') handleAddSidebarImageUrl(); if (e.key === 'Escape') sidebarImageUrlModalOpen = false; }}
+					/>
+				</div>
+				<div class="img-form-group">
+					<span class="img-label">Label <span class="img-label-optional">(optional)</span></span>
+					<input
+						class="img-input"
+						type="text"
+						placeholder="e.g. Crime scene photo"
+						bind:value={sidebarImageLabelInput}
+						onkeydown={(e) => { if (e.key === 'Enter') handleAddSidebarImageUrl(); }}
+					/>
+				</div>
+				<span class="url-hint">
+					<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+					Use <a href="https://fivemanage.com" target="_blank" rel="noopener noreferrer">FiveManage</a> to make sure your links persist forever.
+				</span>
+			</div>
+			<div class="modal-footer">
+				<button class="cancel-btn" onclick={() => sidebarImageUrlModalOpen = false} disabled={isSidebarUploading}>Cancel</button>
+				<button class="save-btn" onclick={handleAddSidebarImageUrl} disabled={isSidebarUploading || !sidebarImageUrlInput.trim()}>
+					{isSidebarUploading ? "Adding…" : "Add Image"}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- ── Create Image URL Modal ── -->
+{#if createImageUrlModalOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div class="modal-backdrop" onclick={(e) => { if (e.target === e.currentTarget) createImageUrlModalOpen = false; }}>
+		<div class="modal image-url-modal" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
+			<div class="modal-header">
+				<h3>Add Image URL</h3>
+				<button class="close-btn" onclick={() => createImageUrlModalOpen = false}>
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+				</button>
+			</div>
+			<div class="modal-body img-modal-body">
+				<div class="img-form-group">
+					<span class="img-label">Image URL</span>
+					<input
+						class="img-input"
+						type="url"
+						placeholder="https://example.com/photo.jpg"
+						bind:value={createImageUrlInput}
+						onkeydown={(e) => {
+							if (e.key === 'Enter' && createImageUrlInput.trim()) {
+								createImageUrls = [...createImageUrls, { url: createImageUrlInput.trim(), label: "" }];
+								createImageUrlInput = "";
+								createImageUrlModalOpen = false;
+							}
+							if (e.key === 'Escape') createImageUrlModalOpen = false;
+						}}
+					/>
+				</div>
+				<span class="url-hint">
+					<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+					Use <a href="https://fivemanage.com" target="_blank" rel="noopener noreferrer">FiveManage</a> to make sure your links persist forever.
+				</span>
+			</div>
+			<div class="modal-footer">
+				<button class="cancel-btn" onclick={() => createImageUrlModalOpen = false}>Cancel</button>
+				<button class="save-btn" onclick={() => {
+					if (createImageUrlInput.trim()) {
+						createImageUrls = [...createImageUrls, { url: createImageUrlInput.trim(), label: "" }];
+						createImageUrlInput = "";
+						createImageUrlModalOpen = false;
+					}
+				}} disabled={!createImageUrlInput.trim()}>
+					Add URL
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <div class="evidence-page">
 	<!-- Topbar -->
 	<div class="topbar">
@@ -414,15 +528,12 @@
 				}}
 			/>
 		</div>
-		<button class="action-btn" onclick={() => loadEvidence(1)}>
-			Search
-		</button>
+		<button class="action-btn" onclick={() => loadEvidence(1)}>Search</button>
 		<button class="create-btn" onclick={() => {
 			resetCreateForm();
 			const nextNum = total + 1;
 			createForm.serial = `EVD-${String(nextNum).padStart(3, "0")}`;
 			createForm.stashId = `LOCKER-${String(nextNum).padStart(3, "0")}`;
-			// Auto-populate Case ID from most recent case in evidence list
 			const latestCaseId = items.reduce((max, item) => {
 				const id = item.case_id ? Number(item.case_id) : 0;
 				return id > max ? id : max;
@@ -500,31 +611,17 @@
 		<!-- Detail Sidebar (right) -->
 		<div class="detail-sidebar">
 			{#if selectedEvidenceId}
-				<!-- Custody Log -->
+				<!-- Link Evidence + Custody -->
 				<div class="section">
 					<div class="section-title">Link Evidence</div>
 					<div class="section-actions">
-						<input
-							class="form-input"
-							placeholder="Case ID or CASE-2026-..."
-							bind:value={linkCaseId}
-						/>
-						<button class="action-btn" onclick={handleLinkEvidenceCase}>
-							Link to Case
-						</button>
-						<button class="action-btn" onclick={handleCreateCaseFromEvidence}>
-							Create Case
-						</button>
+						<input class="form-input" placeholder="Case ID or CASE-2026-..." bind:value={linkCaseId} />
+						<button class="action-btn" onclick={handleLinkEvidenceCase}>Link to Case</button>
+						<button class="action-btn" onclick={handleCreateCaseFromEvidence}>Create Case</button>
 					</div>
 					<div class="section-actions">
-						<input
-							class="form-input"
-							placeholder="Report ID"
-							bind:value={linkReportId}
-						/>
-						<button class="action-btn" onclick={handleLinkEvidenceReport}>
-							Link to Report
-						</button>
+						<input class="form-input" placeholder="Report ID" bind:value={linkReportId} />
+						<button class="action-btn" onclick={handleLinkEvidenceReport}>Link to Report</button>
 					</div>
 					<div class="section-title" style="margin-top: 8px;">Custody Log</div>
 					{#if custodyEntries.length === 0}
@@ -561,61 +658,26 @@
 					<div class="transfer-row">
 						<input class="form-input" placeholder="Citizen ID" bind:value={transferCitizenId} />
 						<input class="form-input" placeholder="Transfer notes" bind:value={transferNotes} />
-						<button class="action-btn" onclick={handleTransferEvidence}>
-							Transfer
-						</button>
+						<button class="action-btn" onclick={handleTransferEvidence}>Transfer</button>
 					</div>
 				</div>
 
-				<!-- Upload Image -->
+				<!-- Add Image via URL -->
 				<div class="section">
-					<div class="section-title">Upload Evidence Image</div>
-					<div class="upload-row">
-						<input
-							type="file"
-							accept=".jpg,.jpeg,.png,.webp"
-							class="file-input"
-							onchange={(event) => {
-								const input = event.target as HTMLInputElement;
-								evidenceImageFile = input.files && input.files[0] ? input.files[0] : null;
-							}}
-						/>
-						<input class="form-input" placeholder="Image label" bind:value={evidenceImageLabel} />
-						<button class="create-btn" disabled={isUploading} onclick={handleUploadEvidenceImage}>
-							{isUploading ? "Uploading..." : "Upload"}
-						</button>
-					</div>
-					{#if isUploading}
-						<p class="uploading-text">Uploading image, please wait...</p>
-					{:else if evidenceImageFile}
-						<p class="muted-text" style="margin-top:6px;">
-							{evidenceImageFile.name} ({formatBytes(evidenceImageFile.size)})
-						</p>
-					{/if}
+					<div class="section-title">Evidence Images</div>
+					<button class="add-image-url-btn" onclick={() => {
+						sidebarImageUrlInput = "";
+						sidebarImageLabelInput = "";
+						sidebarImageUrlModalOpen = true;
+					}}>
+						<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+						Add Image URL
+					</button>
 					{#if uploadSuccess}
 						<p class="upload-success">{uploadSuccess}</p>
 					{/if}
-				</div>
-
-				<!-- Open Stash -->
-				{#if selectedEvidence?.stash_id}
-					<div class="section">
-						<div class="section-title">Evidence Stash</div>
-						<div class="stash-row">
-							<span class="stash-id">{selectedEvidence.stash_id}</span>
-							<button class="action-btn" onclick={() => openStash(selectedEvidence.stash_id)}>
-								<span class="material-icons" style="font-size:14px; margin-right:4px;">inventory_2</span>
-								Open Stash
-							</button>
-						</div>
-					</div>
-				{/if}
-
-				<!-- Uploaded Images -->
-				{#if selectedEvidence?.images && selectedEvidence.images.length > 0}
-					<div class="section">
-						<div class="section-title">Evidence Images</div>
-						<div class="image-gallery">
+					{#if selectedEvidence?.images && selectedEvidence.images.length > 0}
+						<div class="image-gallery" style="margin-top: 8px;">
 							{#each selectedEvidence.images as img}
 								<div class="image-item">
 									<button class="image-btn" onclick={() => openLightbox(img.url, img.label || 'Evidence')}>
@@ -630,6 +692,20 @@
 								</div>
 							{/each}
 						</div>
+					{/if}
+				</div>
+
+				<!-- Open Stash -->
+				{#if selectedEvidence?.stash_id}
+					<div class="section">
+						<div class="section-title">Evidence Stash</div>
+						<div class="stash-row">
+							<span class="stash-id">{selectedEvidence.stash_id}</span>
+							<button class="action-btn" onclick={() => openStash(selectedEvidence.stash_id)}>
+								<span class="material-icons" style="font-size:14px; margin-right:4px;">inventory_2</span>
+								Open Stash
+							</button>
+						</div>
 					</div>
 				{/if}
 			{:else}
@@ -642,6 +718,7 @@
 	</div>
 </div>
 
+<!-- ── Create Evidence Modal ── -->
 {#if showCreate}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions a11y_no_noninteractive_element_interactions a11y_role_has_required_aria_props -->
 	<div class="modal-backdrop" role="button" tabindex="-1" onclick={() => (showCreate = false)}>
@@ -682,7 +759,7 @@
 					</div>
 				</div>
 
-				<!-- Row 2: Dynamic fields based on type -->
+				<!-- Row 2: Dynamic fields -->
 				<div class="form-grid">
 					{#if typeConfig.description}
 						<div class="form-group" style="grid-column: span 2;">
@@ -710,7 +787,7 @@
 					{/if}
 				</div>
 
-				<!-- Row 3: Location + conditional Stash -->
+				<!-- Row 3: Location + Stash -->
 				<div class="form-grid">
 					<div class="form-group" style={typeConfig.stash ? "" : "grid-column: span 3;"}>
 						<span class="form-label">Location</span>
@@ -730,37 +807,12 @@
 						<span>Evidence is stored / secured</span>
 					</label>
 				{/if}
+
 				<div class="form-group">
 					<span class="form-label">Notes</span>
 					<textarea rows="4" bind:value={createForm.notes} placeholder="Additional notes..." class="form-input"></textarea>
 				</div>
-				<div class="form-group">
-					<span class="form-label">Attach Images</span>
-					<input
-						type="file"
-						accept=".jpg,.jpeg,.png,.webp"
-						multiple
-						class="file-input"
-						onchange={(event) => {
-							const input = event.target as HTMLInputElement;
-							if (input.files) {
-								createImageFiles = [...createImageFiles, ...Array.from(input.files)];
-							}
-						}}
-					/>
-					{#if createImageFiles.length > 0}
-						<div class="create-image-list">
-							{#each createImageFiles as file, i}
-								<div class="create-image-item">
-									<span class="create-image-name">{file.name} ({formatBytes(file.size)})</span>
-									<button class="remove-image-btn" onclick={() => { createImageFiles = createImageFiles.filter((_, idx) => idx !== i); }}>
-										<span class="material-icons" style="font-size:14px;">close</span>
-									</button>
-								</div>
-							{/each}
-						</div>
-					{/if}
-				</div>
+
 			</div>
 			{#if evidenceError}
 				<p class="error-text">{evidenceError}</p>
@@ -773,6 +825,7 @@
 	</div>
 {/if}
 
+<!-- Lightbox -->
 {#if lightboxUrl}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions a11y_no_noninteractive_element_interactions -->
 	<div class="lightbox-overlay" onclick={closeLightbox} onkeydown={(e) => { if (e.key === 'Escape') closeLightbox(); }}>
@@ -832,9 +885,7 @@
 		outline: none;
 	}
 
-	.search-box input::placeholder {
-		color: rgba(255, 255, 255, 0.2);
-	}
+	.search-box input::placeholder { color: rgba(255, 255, 255, 0.2); }
 
 	/* ── Main Grid ── */
 	.main-grid {
@@ -848,9 +899,7 @@
 	/* ── List Panel ── */
 	.list-panel {
 		background: transparent;
-		border: none;
 		border-right: 1px solid rgba(255, 255, 255, 0.04);
-		border-radius: 0;
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
@@ -887,46 +936,21 @@
 		width: 100%;
 	}
 
-	.table-row:hover {
-		background: rgba(255, 255, 255, 0.02);
-	}
-
+	.table-row:hover { background: rgba(255, 255, 255, 0.02); }
 	.table-row.selected {
 		background: rgba(var(--accent-rgb), 0.04);
 		border-left: 2px solid rgba(var(--accent-rgb), 0.4);
 	}
 
-	.table-row .col-title {
-		font-weight: 500;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.table-row .col-location {
-		color: rgba(255, 255, 255, 0.35);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
+	.table-row .col-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	.table-row .col-location { color: rgba(255, 255, 255, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 	.table-row .col-serial,
 	.table-row .col-case,
 	.table-row .col-report,
-	.table-row .col-date {
-		color: rgba(255, 255, 255, 0.35);
-	}
+	.table-row .col-date { color: rgba(255, 255, 255, 0.35); }
 
-	.nav-link {
-		color: rgba(var(--accent-rgb), 0.6);
-		cursor: pointer;
-		transition: all 0.1s;
-	}
-
-	.nav-link:hover {
-		color: rgba(var(--accent-rgb), 0.9);
-		text-decoration: underline;
-	}
+	.nav-link { color: rgba(var(--accent-rgb), 0.6); cursor: pointer; transition: all 0.1s; }
+	.nav-link:hover { color: rgba(var(--accent-rgb), 0.9); text-decoration: underline; }
 
 	.type-badge {
 		display: inline-block;
@@ -940,25 +964,9 @@
 		background: rgba(255, 255, 255, 0.02);
 	}
 
-	.col-stored {
-		display: flex;
-		align-items: center;
-		gap: 5px;
-		font-size: 10px;
-		color: rgba(255, 255, 255, 0.35);
-	}
-
-	.stored-dot {
-		width: 5px;
-		height: 5px;
-		border-radius: 50%;
-		background: rgba(239, 68, 68, 0.5);
-		flex-shrink: 0;
-	}
-
-	.stored-dot.stored {
-		background: rgba(16, 185, 129, 0.6);
-	}
+	.col-stored { display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(255, 255, 255, 0.35); }
+	.stored-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(239, 68, 68, 0.5); flex-shrink: 0; }
+	.stored-dot.stored { background: rgba(16, 185, 129, 0.6); }
 
 	.empty-state {
 		display: flex;
@@ -971,24 +979,14 @@
 	}
 
 	/* ── Detail Sidebar ── */
-	.detail-sidebar {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-		overflow-y: auto;
-	}
+	.detail-sidebar { display: flex; flex-direction: column; gap: 0; overflow-y: auto; }
 
 	.section {
 		background: transparent;
-		border: none;
 		border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-		border-radius: 0;
 		padding: 12px 16px;
 	}
-
-	.section:last-child {
-		border-bottom: none;
-	}
+	.section:last-child { border-bottom: none; }
 
 	.section-title {
 		color: rgba(255, 255, 255, 0.35);
@@ -1006,16 +1004,9 @@
 		flex-wrap: wrap;
 		margin-bottom: 8px;
 	}
-
-	.section-actions .form-input {
-		flex: 1;
-		min-width: 70px;
-	}
+	.section-actions .form-input { flex: 1; min-width: 70px; }
 
 	.empty-detail {
-		background: transparent;
-		border: none;
-		border-radius: 0;
 		padding: 40px 16px;
 		display: flex;
 		flex-direction: column;
@@ -1026,18 +1017,10 @@
 		font-size: 11px;
 		flex: 1;
 	}
-
-	.empty-detail p {
-		margin: 0;
-	}
+	.empty-detail p { margin: 0; }
 
 	/* ── Custody ── */
-	.custody-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-	}
-
+	.custody-list { display: flex; flex-direction: column; gap: 0; }
 	.custody-item {
 		display: grid;
 		grid-template-columns: 70px 1fr auto;
@@ -1048,256 +1031,73 @@
 		align-items: center;
 	}
 
-	.custody-action {
-		color: rgba(255, 255, 255, 0.5);
-		font-weight: 600;
-		text-transform: uppercase;
-		font-size: 9px;
-		letter-spacing: 0.5px;
-	}
-
+	.custody-action { color: rgba(255, 255, 255, 0.5); font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; }
 	.custody-action.viewed { color: rgba(var(--accent-rgb), 0.6); }
 	.custody-action.collected { color: rgba(16, 185, 129, 0.6); }
 	.custody-action.transferred { color: rgba(251, 191, 36, 0.6); }
+	.custody-detail { color: rgba(255, 255, 255, 0.4); font-family: monospace; font-size: 10px; }
+	.custody-time { color: rgba(255, 255, 255, 0.2); font-size: 9px; white-space: nowrap; }
+	.custody-notes { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.35); font-size: 10px; }
 
-	.custody-detail {
-		color: rgba(255, 255, 255, 0.4);
-		font-family: monospace;
-		font-size: 10px;
-	}
-
-	.custody-time {
-		color: rgba(255, 255, 255, 0.2);
-		font-size: 9px;
-		white-space: nowrap;
-	}
+	/* ── Transfer Row ── */
+	.transfer-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+	.transfer-row .form-input { flex: 1; min-width: 80px; }
 
-	.custody-notes {
-		grid-column: 1 / -1;
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 10px;
-	}
-
-	/* ── Transfer / Upload Rows ── */
-	.transfer-row {
-		display: flex;
-		gap: 6px;
-		align-items: center;
-		flex-wrap: wrap;
-	}
-
-	.transfer-row .form-input {
-		flex: 1;
-		min-width: 80px;
-	}
-
-	.upload-row {
-		display: flex;
-		gap: 6px;
+	/* ── Add Image URL button ── */
+	.add-image-url-btn {
+		display: inline-flex;
 		align-items: center;
-		flex-wrap: wrap;
-	}
-
-	.upload-row .form-input {
-		flex: 1;
-		min-width: 80px;
-	}
-
-	.file-input {
-		font-size: 10px;
-		color: rgba(255, 255, 255, 0.35);
-		max-width: 170px;
-	}
-
-	.file-input::file-selector-button {
+		gap: 5px;
 		background: rgba(255, 255, 255, 0.03);
-		border: 1px solid rgba(255, 255, 255, 0.06);
+		color: rgba(255, 255, 255, 0.4);
+		border: 1px solid rgba(255, 255, 255, 0.07);
+		padding: 5px 10px;
 		border-radius: 3px;
-		padding: 3px 8px;
-		color: rgba(255, 255, 255, 0.5);
-		font-size: 10px;
-		cursor: pointer;
-		margin-right: 6px;
-	}
-
-	.muted-text {
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 11px;
-		margin: 0;
-	}
-
-	.upload-success {
-		color: rgba(110, 231, 183, 0.8);
 		font-size: 10px;
-		margin: 4px 0 0 0;
-	}
-
-	.uploading-text {
-		color: rgba(251, 191, 36, 0.8);
-		font-size: 10px;
-		margin: 4px 0 0 0;
-		animation: pulse-text 1.5s ease-in-out infinite;
-	}
-
-	@keyframes pulse-text {
-		0%, 100% { opacity: 1; }
-		50% { opacity: 0.5; }
-	}
-
-	.create-btn:disabled {
-		opacity: 0.3;
-		cursor: not-allowed;
-	}
-
-	.image-gallery {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-		gap: 6px;
-	}
-
-	.image-item {
-		background: rgba(255, 255, 255, 0.02);
-		border: 1px solid rgba(255, 255, 255, 0.04);
-		border-radius: 3px;
-		overflow: hidden;
-	}
-
-	.evidence-thumb {
-		width: 100%;
-		height: 70px;
-		object-fit: cover;
-		display: block;
+		font-weight: 500;
 		cursor: pointer;
-	}
-
-	.image-info {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 3px 5px;
-	}
-
-	.image-label {
-		font-size: 9px;
-		color: rgba(255, 255, 255, 0.4);
-		overflow: hidden;
-		text-overflow: ellipsis;
+		transition: all 0.1s;
 		white-space: nowrap;
-		flex: 1;
 	}
-
-	.remove-image-btn {
-		background: none;
-		border: none;
-		color: rgba(255, 255, 255, 0.2);
-		cursor: pointer;
-		padding: 2px;
-		display: flex;
-		align-items: center;
-		transition: color 0.1s;
+	.add-image-url-btn:hover {
+		background: rgba(255, 255, 255, 0.05);
+		color: rgba(255, 255, 255, 0.7);
+		border-color: rgba(255, 255, 255, 0.12);
 	}
 
-	.remove-image-btn:hover {
-		color: rgba(239, 68, 68, 0.7);
-	}
+	.muted-text { color: rgba(255, 255, 255, 0.35); font-size: 11px; margin: 0; }
+	.upload-success { color: rgba(110, 231, 183, 0.8); font-size: 10px; margin: 4px 0 0 0; }
 
-	.image-btn {
-		background: none;
-		border: none;
-		padding: 0;
-		cursor: pointer;
-		display: block;
-		width: 100%;
-	}
+	.image-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
+	.image-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 3px; overflow: hidden; }
+	.evidence-thumb { width: 100%; height: 70px; object-fit: cover; display: block; cursor: pointer; }
+	.image-info { display: flex; align-items: center; justify-content: space-between; padding: 3px 5px; }
+	.image-label { font-size: 9px; color: rgba(255, 255, 255, 0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+	.remove-image-btn { background: none; border: none; color: rgba(255, 255, 255, 0.2); cursor: pointer; padding: 2px; display: flex; align-items: center; transition: color 0.1s; }
+	.remove-image-btn:hover { color: rgba(239, 68, 68, 0.7); }
+	.image-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; width: 100%; }
 
 	/* ── Stash ── */
-	.stash-row {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.stash-id {
-		font-size: 11px;
-		font-family: monospace;
-		color: rgba(255, 255, 255, 0.5);
-		background: rgba(255, 255, 255, 0.02);
-		padding: 4px 8px;
-		border-radius: 3px;
-		border: 1px solid rgba(255, 255, 255, 0.04);
-		flex: 1;
-	}
+	.stash-row { display: flex; align-items: center; gap: 8px; }
+	.stash-id { font-size: 11px; font-family: monospace; color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.02); padding: 4px 8px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.04); flex: 1; }
 
 	/* ── Lightbox ── */
-	.lightbox-overlay {
-		position: fixed;
-		inset: 0;
-		background: rgba(0, 0, 0, 0.88);
-		backdrop-filter: blur(8px);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 200;
-	}
+	.lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 200; }
+	.lightbox-content { max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; background: var(--card-dark-bg); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; overflow: hidden; }
+	.lightbox-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+	.lightbox-label { font-size: 11px; color: rgba(255, 255, 255, 0.6); font-weight: 500; }
+	.lightbox-image { max-width: 85vw; max-height: 80vh; object-fit: contain; display: block; }
+
+	/* ── Create Image list ── */
+	.create-image-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
+	.create-image-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
+	.create-image-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
+	.create-image-name { font-size: 10px; color: rgba(255, 255, 255, 0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-family: monospace; }
 
-	.lightbox-content {
-		max-width: 90vw;
-		max-height: 90vh;
-		display: flex;
-		flex-direction: column;
-		background: var(--card-dark-bg);
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 6px;
-		overflow: hidden;
-	}
-
-	.lightbox-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 8px 12px;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-	}
-
-	.lightbox-label {
-		font-size: 11px;
-		color: rgba(255, 255, 255, 0.6);
-		font-weight: 500;
-	}
-
-	.lightbox-image {
-		max-width: 85vw;
-		max-height: 80vh;
-		object-fit: contain;
-		display: block;
-	}
-
-	/* ── Create Modal Image List ── */
-	.create-image-list {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		margin-top: 4px;
-	}
-
-	.create-image-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 3px 6px;
-		background: transparent;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-		border-radius: 0;
-	}
-
-	.create-image-name {
-		font-size: 10px;
-		color: rgba(255, 255, 255, 0.5);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		flex: 1;
-	}
+	/* ── Status Toast ── */
+	.status-toast { padding: 5px 12px; border-radius: 3px; font-size: 10px; font-weight: 500; flex-shrink: 0; margin: 0 16px; }
+	.status-toast.success { background: rgba(16, 185, 129, 0.06); color: rgba(110, 231, 183, 0.8); border: 1px solid rgba(16, 185, 129, 0.1); }
+	.status-toast.error { background: rgba(239, 68, 68, 0.06); color: rgba(252, 165, 165, 0.8); border: 1px solid rgba(239, 68, 68, 0.1); }
 
 	/* ── Buttons ── */
 	.action-btn {
@@ -1315,11 +1115,7 @@
 		transition: all 0.1s;
 		white-space: nowrap;
 	}
-
-	.action-btn:hover {
-		background: rgba(var(--accent-rgb), 0.12);
-		color: rgba(var(--accent-text-rgb), 0.9);
-	}
+	.action-btn:hover { background: rgba(var(--accent-rgb), 0.12); color: rgba(var(--accent-text-rgb), 0.9); }
 
 	.create-btn {
 		display: inline-flex;
@@ -1336,11 +1132,7 @@
 		transition: all 0.1s;
 		white-space: nowrap;
 	}
-
-	.create-btn:hover {
-		background: rgba(16, 185, 129, 0.12);
-		color: rgba(110, 231, 183, 0.9);
-	}
+	.create-btn:hover { background: rgba(16, 185, 129, 0.12); color: rgba(110, 231, 183, 0.9); }
 
 	/* ── Form Inputs ── */
 	.form-input {
@@ -1353,44 +1145,60 @@
 		outline: none;
 		transition: border-color 0.1s;
 	}
+	.form-input:focus { border-color: rgba(255, 255, 255, 0.1); }
+	.form-input::placeholder { color: rgba(255, 255, 255, 0.2); }
+	textarea.form-input { resize: vertical; min-height: 60px; font-family: inherit; }
 
-	.form-input:focus {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
+	/* ── Image URL Modal ── */
+	.image-url-modal { max-width: 380px; }
 
-	.form-input::placeholder {
-		color: rgba(255, 255, 255, 0.2);
+	.img-modal-body {
+		padding: 14px 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
 	}
 
-	textarea.form-input {
-		resize: vertical;
-		min-height: 60px;
-		font-family: inherit;
-	}
+	.img-form-group { display: flex; flex-direction: column; gap: 4px; }
 
-	/* ── Status Toast ── */
-	.status-toast {
-		padding: 5px 12px;
-		border-radius: 3px;
-		font-size: 10px;
-		font-weight: 500;
-		flex-shrink: 0;
-		margin: 0 16px;
+	.img-label {
+		font-size: 9px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.6px;
+		color: rgba(255, 255, 255, 0.35);
 	}
+	.img-label-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.2); }
 
-	.status-toast.success {
-		background: rgba(16, 185, 129, 0.06);
-		color: rgba(110, 231, 183, 0.8);
-		border: 1px solid rgba(16, 185, 129, 0.1);
+	.img-input {
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 6px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		outline: none;
+		transition: border-color 0.1s;
+		font-family: inherit;
+		width: 100%;
+		box-sizing: border-box;
 	}
+	.img-input:focus { border-color: rgba(255, 255, 255, 0.12); }
+	.img-input::placeholder { color: rgba(255, 255, 255, 0.2); }
 
-	.status-toast.error {
-		background: rgba(239, 68, 68, 0.06);
-		color: rgba(252, 165, 165, 0.8);
-		border: 1px solid rgba(239, 68, 68, 0.1);
+	.url-hint {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.25);
+		line-height: 1.4;
 	}
+	.url-hint svg { flex-shrink: 0; opacity: 0.45; }
+	.url-hint a { color: rgba(var(--accent-text-rgb), 0.5); text-decoration: none; transition: color 0.1s; }
+	.url-hint a:hover { color: rgba(var(--accent-text-rgb), 0.85); text-decoration: underline; }
 
-	/* ── Modal ── */
+	/* ── Modal shared ── */
 	.modal-backdrop {
 		position: fixed;
 		inset: 0;
@@ -1420,13 +1228,7 @@
 		padding: 10px 16px;
 		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 	}
-
-	.modal-header h3 {
-		margin: 0;
-		font-size: 13px;
-		font-weight: 600;
-		color: rgba(255, 255, 255, 0.85);
-	}
+	.modal-header h3 { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
 
 	.close-btn {
 		background: transparent;
@@ -1440,11 +1242,7 @@
 		justify-content: center;
 		transition: all 0.1s;
 	}
-
-	.close-btn:hover {
-		color: rgba(255, 255, 255, 0.7);
-		border-color: rgba(255, 255, 255, 0.1);
-	}
+	.close-btn:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
 
 	.modal-body {
 		padding: 14px 16px;
@@ -1453,50 +1251,15 @@
 		gap: 12px;
 	}
 
-	.form-grid {
-		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
-		gap: 8px;
-	}
-
-	.form-grid-4 {
-		grid-template-columns: 1fr 1fr 2fr 1fr;
-	}
+	.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
+	.form-grid-4 { grid-template-columns: 1fr 1fr 2fr 1fr; }
+	.mono-input { font-family: monospace; letter-spacing: 0.5px; }
 
-	.mono-input {
-		font-family: monospace;
-		letter-spacing: 0.5px;
-	}
-
-	.form-group {
-		display: flex;
-		flex-direction: column;
-		gap: 3px;
-	}
-
-	.form-label {
-		font-size: 9px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.35);
-	}
-
-	.checkbox-label {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 6px;
-		cursor: pointer;
-		font-size: 11px;
-		color: rgba(255, 255, 255, 0.5);
-	}
+	.form-group { display: flex; flex-direction: column; gap: 3px; }
+	.form-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.35); }
 
-	.checkbox-label input[type="checkbox"] {
-		accent-color: rgba(52, 211, 153, 0.8);
-		width: 13px;
-		height: 13px;
-	}
+	.checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
+	.checkbox-label input[type="checkbox"] { accent-color: rgba(52, 211, 153, 0.8); width: 13px; height: 13px; }
 
 	.modal-footer {
 		display: flex;
@@ -1517,11 +1280,8 @@
 		cursor: pointer;
 		transition: all 0.1s;
 	}
-
-	.cancel-btn:hover {
-		color: rgba(255, 255, 255, 0.7);
-		border-color: rgba(255, 255, 255, 0.1);
-	}
+	.cancel-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+	.cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
 	.save-btn {
 		display: inline-flex;
@@ -1537,50 +1297,21 @@
 		cursor: pointer;
 		transition: all 0.1s;
 	}
+	.save-btn:hover:not(:disabled) { background: rgba(16, 185, 129, 0.12); color: rgba(110, 231, 183, 0.9); }
+	.save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
-	.save-btn:hover {
-		background: rgba(16, 185, 129, 0.12);
-		color: rgba(110, 231, 183, 0.9);
-	}
-
-	.error-text {
-		color: rgba(252, 165, 165, 0.8);
-		font-size: 10px;
-		padding: 0 16px;
-		margin: 0;
-	}
+	.error-text { color: rgba(252, 165, 165, 0.8); font-size: 10px; padding: 0 16px; margin: 0; }
 
 	/* ── Scrollbar ── */
-	.detail-sidebar::-webkit-scrollbar {
-		width: 4px;
-	}
-
-	.detail-sidebar::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.detail-sidebar::-webkit-scrollbar-thumb {
-		background: rgba(255, 255, 255, 0.06);
-		border-radius: 2px;
-	}
+	.detail-sidebar::-webkit-scrollbar { width: 4px; }
+	.detail-sidebar::-webkit-scrollbar-track { background: transparent; }
+	.detail-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
 
 	/* ── Responsive ── */
 	@media (max-width: 1024px) {
-		.main-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.list-panel {
-			border-right: none;
-			border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-		}
-
-		.topbar {
-			flex-wrap: wrap;
-		}
-
-		.search-box {
-			max-width: 100%;
-		}
+		.main-grid { grid-template-columns: 1fr; }
+		.list-panel { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
+		.topbar { flex-wrap: wrap; }
+		.search-box { max-width: 100%; }
 	}
-</style>
+</style>
\ No newline at end of file

From 2e25415b79785dfa06064a6a6e449b29e9b708d2 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 13:45:58 +0200
Subject: [PATCH 061/144] changed in evidence manager

changed in evidence manager

From 99d2502c406fcbafa6d889e4ed1ec97b803a105d Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 13:46:41 +0200
Subject: [PATCH 062/144] fixed add fingerprint button

fixed add fingerprint button

From 29b4d945685c9d8bd56983ef1d31bfde873a23af Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 13:47:29 +0200
Subject: [PATCH 063/144] fixed fingerprint and cases/evidence tab

fixed fingerprint and cases/evidence tab
---
 server/backend/cases.lua    |  33 ++++++--
 server/backend/evidence.lua | 165 ++++++++++++++++++++++++++----------
 server/backend/reports.lua  |  14 +--
 3 files changed, 158 insertions(+), 54 deletions(-)

diff --git a/server/backend/cases.lua b/server/backend/cases.lua
index 2d510a0e..30674619 100644
--- a/server/backend/cases.lua
+++ b/server/backend/cases.lua
@@ -549,21 +549,42 @@ ps.registerCallback(resourceName .. ':server:removeCaseAttachment', function(sou
     return { success = true }
 end)
 
-ps.registerCallback(resourceName .. ':server:addEvidenceItem', function(source, caseId, evidence)
+ps.registerCallback(resourceName .. ':server:addEvidenceItem', function(source, payload)
     local src = source
     if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
 
-    caseId = tonumber(caseId)
-    if not caseId or not evidence or not evidence.title then
-        return { success = false, error = 'Invalid evidence' }
+    payload = payload or {}
+    local caseId = tonumber(payload.caseId)
+    local reportId = tonumber(payload.reportId)
+    local evidence = payload.evidence or payload
+
+    if not evidence or not evidence.title then
+        return { success = false, error = 'Invalid evidence: title is required' }
+    end
+
+    -- Validiere caseId falls angegeben
+    if caseId then
+        local caseExists = MySQL.single.await('SELECT id FROM mdt_cases WHERE id = ?', { caseId })
+        if not caseExists then
+            caseId = nil -- Setze auf nil wenn Case nicht existiert
+        end
+    end
+
+    -- Validiere reportId falls angegeben — das ist der Hauptfehler!
+    if reportId then
+        local reportExists = MySQL.single.await('SELECT id FROM mdt_reports WHERE id = ?', { reportId })
+        if not reportExists then
+            reportId = nil -- Setze auf nil wenn Report nicht existiert
+        end
     end
 
     local evidenceId = MySQL.insert.await([[
         INSERT INTO mdt_evidence_items
-        (case_id, title, type, serial, notes, location, stash_id, stored, last_holder, created_by)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        (case_id, report_id, title, type, serial, notes, location, stash_id, stored, last_holder, created_by)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
     ]], {
         caseId,
+        reportId,
         evidence.title,
         evidence.type or 'Evidence',
         evidence.serial or '',
diff --git a/server/backend/evidence.lua b/server/backend/evidence.lua
index 29b9230d..20b4e3d2 100644
--- a/server/backend/evidence.lua
+++ b/server/backend/evidence.lua
@@ -42,6 +42,38 @@ ps.registerCallback(resourceName .. ':server:getEvidenceItems', function(source,
         LIMIT ? OFFSET ?
     ]]):format(whereClause), listValues)
 
+    -- Images batch-laden
+    if evidence and #evidence > 0 then
+        local ids = {}
+        local idLookup = {}
+        for _, item in ipairs(evidence) do
+            ids[#ids + 1] = item.id
+            idLookup[item.id] = item
+            item.images = {}
+        end
+
+        local placeholders = string.rep('?,', #ids - 1) .. '?'
+        local images = MySQL.query.await(([[
+            SELECT id, evidence_id, url, label, uploaded_by, uploaded_at
+            FROM mdt_evidence_images
+            WHERE evidence_id IN (%s)
+            ORDER BY uploaded_at DESC
+        ]]):format(placeholders), ids)
+
+        for _, img in ipairs(images or {}) do
+            local parent = idLookup[img.evidence_id]
+            if parent then
+                parent.images[#parent.images + 1] = {
+                    id = img.id,
+                    url = img.url,
+                    label = img.label,
+                    uploaded_by = img.uploaded_by,
+                    uploaded_at = img.uploaded_at
+                }
+            end
+        end
+    end
+
     return {
         success = true,
         data = {
@@ -83,6 +115,38 @@ ps.registerCallback(resourceName .. ':server:searchEvidenceItems', function(sour
         LIMIT ? OFFSET ?
     ]], { likeQuery, likeQuery, likeQuery, likeQuery, likeQuery, limit, offset })
 
+    -- Images batch-laden
+    if evidence and #evidence > 0 then
+        local ids = {}
+        local idLookup = {}
+        for _, item in ipairs(evidence) do
+            ids[#ids + 1] = item.id
+            idLookup[item.id] = item
+            item.images = {}
+        end
+
+        local placeholders = string.rep('?,', #ids - 1) .. '?'
+        local images = MySQL.query.await(([[
+            SELECT id, evidence_id, url, label, uploaded_by, uploaded_at
+            FROM mdt_evidence_images
+            WHERE evidence_id IN (%s)
+            ORDER BY uploaded_at DESC
+        ]]):format(placeholders), ids)
+
+        for _, img in ipairs(images or {}) do
+            local parent = idLookup[img.evidence_id]
+            if parent then
+                parent.images[#parent.images + 1] = {
+                    id = img.id,
+                    url = img.url,
+                    label = img.label,
+                    uploaded_by = img.uploaded_by,
+                    uploaded_at = img.uploaded_at
+                }
+            end
+        end
+    end
+
     return {
         success = true,
         data = {
@@ -99,14 +163,36 @@ ps.registerCallback(resourceName .. ':server:addEvidenceItem', function(source,
     if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
 
     payload = payload or {}
-    local caseId = tonumber(payload.caseId)
-    local reportId = tonumber(payload.reportId)
     local evidence = payload.evidence or payload
 
     if not evidence or not evidence.title then
         return { success = false, error = 'Invalid evidence: title is required' }
     end
 
+    local caseId = nil
+    if payload.caseId and tostring(payload.caseId) ~= '' then
+        local n = tonumber(payload.caseId)
+        if n then
+            local row = MySQL.single.await('SELECT id FROM mdt_cases WHERE id = ?', { n })
+            if not row then
+                return { success = false, error = 'Case #' .. tostring(n) .. ' doesnt exist' }
+            end
+            caseId = n
+        end
+    end
+
+    local reportId = nil
+    if payload.reportId and tostring(payload.reportId) ~= '' then
+        local n = tonumber(payload.reportId)
+        if n then
+            local row = MySQL.single.await('SELECT id FROM mdt_reports WHERE id = ?', { n })
+            if not row then
+                return { success = false, error = 'Report #' .. tostring(n) .. ' doesnt exist' }
+            end
+            reportId = n
+        end
+    end
+
     local evidenceId = MySQL.insert.await([[
         INSERT INTO mdt_evidence_items
         (case_id, report_id, title, type, serial, notes, location, stash_id, stored, last_holder, created_by)
@@ -303,41 +389,9 @@ ps.registerCallback(resourceName .. ':server:addEvidenceImage', function(source,
         return { success = false, error = 'Invalid image' }
     end
 
-    local url = image.url
+    local url = image.url or image.data or ''
     local label = image.label or ''
 
-    -- Upload via FiveManage if base64 data is provided
-    if image.data and image.filename then
-        local contentType = image.contentType or ''
-        if Config.Uploads and Config.Uploads.AllowedEvidenceImageTypes then
-            local allowed = false
-            for _, mime in ipairs(Config.Uploads.AllowedEvidenceImageTypes) do
-                if mime == contentType then
-                    allowed = true
-                    break
-                end
-            end
-            if not allowed then
-                return { success = false, error = 'Unsupported image type' }
-            end
-        end
-
-        if not FiveManageUpload then
-            return { success = false, error = 'FiveManage upload not available' }
-        end
-
-        local dataUri = image.data
-        if type(dataUri) ~= 'string' or dataUri == '' then
-            return { success = false, error = 'Invalid image data' }
-        end
-
-        local uploadedUrl, uploadError = FiveManageUpload(dataUri, image.filename)
-        if not uploadedUrl then
-            return { success = false, error = 'Upload failed: ' .. (uploadError or 'Unknown error') }
-        end
-        url = uploadedUrl
-    end
-
     if not url or url == '' then
         return { success = false, error = 'Missing image URL' }
     end
@@ -409,7 +463,6 @@ ps.registerCallback(resourceName .. ':server:linkEvidenceToCase', function(sourc
     evidenceId = tonumber(evidenceId)
     reportId = tonumber(reportId)
 
-    -- Support case number format like "CASE-2026-003" by looking up the numeric ID
     local numericCaseId = tonumber(caseId)
     if not numericCaseId and type(caseId) == 'string' and caseId ~= '' then
         local row = MySQL.single.await('SELECT id FROM mdt_cases WHERE case_number = ? LIMIT 1', { caseId })
@@ -423,9 +476,18 @@ ps.registerCallback(resourceName .. ':server:linkEvidenceToCase', function(sourc
         return { success = false, error = 'Invalid evidence or case' }
     end
 
+    local caseExists = MySQL.single.await('SELECT id FROM mdt_cases WHERE id = ?', { caseId })
+    if not caseExists then
+        return { success = false, error = 'Case #' .. tostring(caseId) .. ' does not exist' }
+    end
+
     MySQL.update.await('UPDATE mdt_evidence_items SET case_id = ? WHERE id = ?', { caseId, evidenceId })
+
     if reportId then
-        linkReportToCase(reportId, caseId, ps.getIdentifier(src))
+        local reportExists = MySQL.single.await('SELECT id FROM mdt_reports WHERE id = ?', { reportId })
+        if reportExists then
+            linkReportToCase(reportId, caseId, ps.getIdentifier(src))
+        end
     end
 
     if ps.auditLog then
@@ -449,6 +511,11 @@ ps.registerCallback(resourceName .. ':server:linkEvidenceToReport', function(sou
         return { success = false, error = 'Invalid evidence or report' }
     end
 
+    local reportExists = MySQL.single.await('SELECT id FROM mdt_reports WHERE id = ?', { reportId })
+    if not reportExists then
+        return { success = false, error = 'Report #' .. tostring(reportId) .. ' does not exist' }
+    end
+
     MySQL.update.await('UPDATE mdt_evidence_items SET report_id = ? WHERE id = ?', { reportId, evidenceId })
 
     if ps.auditLog then
@@ -503,11 +570,23 @@ end)
 RegisterNetEvent(resourceName .. ':server:openEvidenceStash', function(stashId)
     local src = source
     if not CheckAuth(src) then return end
-
     if not stashId or stashId == '' then return end
 
-    exports['qb-inventory']:OpenInventory(src, stashId, {
-        maxweight = 4000000,
-        slots = 500,
-    })
-end)
+    -- qb-inventory
+    if GetResourceState('qb-inventory') == 'started' then
+        exports['qb-inventory']:OpenInventory(src, stashId, {
+            maxweight = 4000000,
+            slots = 500,
+        })
+        return
+    end
+
+    -- ox_inventory mit forceOpenInventory
+    if GetResourceState('ox_inventory') == 'started' then
+        
+        exports.ox_inventory:RegisterStash(stashId, stashId , 500 , 4000000)
+
+        exports.ox_inventory:forceOpenInventory(src, 'stash', stashId)
+        return
+    end
+end)
\ No newline at end of file
diff --git a/server/backend/reports.lua b/server/backend/reports.lua
index a93c91bb..2abb7dba 100644
--- a/server/backend/reports.lua
+++ b/server/backend/reports.lua
@@ -361,7 +361,8 @@ ps.registerCallback(resourceName..':server:getReport', function(source, reportid
                         ' ',
                         JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.lastname'))
                     ) as fullname,
-                    mp.profilepicture as image
+                    mp.profilepicture as image,
+                    JSON_UNQUOTE(JSON_EXTRACT(p.metadata, '$.fingerprint')) as fingerprint
                 FROM players p
                 LEFT JOIN mdt_profiles mp ON mp.citizenid COLLATE utf8mb4_general_ci = p.citizenid COLLATE utf8mb4_general_ci
                 WHERE p.citizenid COLLATE utf8mb4_general_ci IN (%s)
@@ -369,10 +370,12 @@ ps.registerCallback(resourceName..':server:getReport', function(source, reportid
 
             local lookupRows = MySQL.query.await(lookupQuery, cidList)
             local cidInfo = {}
-            if lookupRows then
-                for _, row in ipairs(lookupRows) do
-                    cidInfo[row.citizenid] = { name = row.fullname, image = row.image }
-                end
+            for _, row in ipairs(lookupRows) do
+                cidInfo[row.citizenid] = {
+                    name = row.fullname,
+                    image = row.image,
+                    fingerprint = (row.fingerprint and row.fingerprint ~= 'null') and row.fingerprint or nil  -- neu
+                }
             end
 
             for _, entry in ipairs(involved) do
@@ -380,6 +383,7 @@ ps.registerCallback(resourceName..':server:getReport', function(source, reportid
                     local info = cidInfo[entry.citizenid]
                     entry.name = info.name or entry.name
                     entry.image = info.image
+                    entry.fingerprint = info.fingerprint
                 end
             end
         end

From 6c612baa242e44b28ed47353951c674ebc533cb0 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 13:48:19 +0200
Subject: [PATCH 064/144] Add files via upload

---
 client/backend/cases.lua | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/backend/cases.lua b/client/backend/cases.lua
index 3629ce2b..5f27c5ee 100644
--- a/client/backend/cases.lua
+++ b/client/backend/cases.lua
@@ -190,12 +190,22 @@ RegisterNUICallback('addEvidenceItem', function(data, cb)
         return
     end
 
-    local result = ps.callback(
-        resourceName .. ':server:addEvidenceItem',
-        data.caseId,
-        data.evidence
-    )
-    cb(result or { success = false })
+    local payload = data or {}
+    
+    if payload.evidence then
+        local result = ps.callback(
+            resourceName .. ':server:addEvidenceItem',
+            payload
+        )
+        cb(result or { success = false })
+    else
+        local result = ps.callback(
+            resourceName .. ':server:addEvidenceItem',
+            data.caseId,
+            data.evidence
+        )
+        cb(result or { success = false })
+    end
 end)
 
 RegisterNUICallback('updateEvidenceItem', function(data, cb)

From f6e74910bcdd203f6f903b290db8cc1c3880bfe8 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 13:49:11 +0200
Subject: [PATCH 065/144] Add files via upload

---
 web/src/services/reportService.svelte.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/services/reportService.svelte.ts b/web/src/services/reportService.svelte.ts
index 119388ad..87cb6dec 100644
--- a/web/src/services/reportService.svelte.ts
+++ b/web/src/services/reportService.svelte.ts
@@ -299,6 +299,7 @@ export function createReportService() {
 					notes: entry?.notes || "",
 					warrantActive: entry?.warrantActive || false,
 					profileImage: entry?.image || undefined,
+					fingerprint: entry?.fingerprint || undefined,
 				});
 			}
 		}

From 4d00336e93355d9e2f11f6cb399163e5641d23b7 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 13:53:08 +0200
Subject: [PATCH 066/144] removed german prints

removed german prints
---
 server/backend/cases.lua    | 8 ++------
 server/backend/evidence.lua | 4 +---
 server/backend/reports.lua  | 2 +-
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/server/backend/cases.lua b/server/backend/cases.lua
index 30674619..a69216a2 100644
--- a/server/backend/cases.lua
+++ b/server/backend/cases.lua
@@ -562,19 +562,17 @@ ps.registerCallback(resourceName .. ':server:addEvidenceItem', function(source,
         return { success = false, error = 'Invalid evidence: title is required' }
     end
 
-    -- Validiere caseId falls angegeben
     if caseId then
         local caseExists = MySQL.single.await('SELECT id FROM mdt_cases WHERE id = ?', { caseId })
         if not caseExists then
-            caseId = nil -- Setze auf nil wenn Case nicht existiert
+            caseId = nil
         end
     end
 
-    -- Validiere reportId falls angegeben — das ist der Hauptfehler!
     if reportId then
         local reportExists = MySQL.single.await('SELECT id FROM mdt_reports WHERE id = ?', { reportId })
         if not reportExists then
-            reportId = nil -- Setze auf nil wenn Report nicht existiert
+            reportId = nil
         end
     end
 
@@ -612,8 +610,6 @@ ps.registerCallback(resourceName .. ':server:addEvidenceItem', function(source,
     return { success = true, id = evidenceId }
 end)
 
--- addEvidenceImage handler is in evidence.lua (not duplicated here)
-
 ps.registerCallback(resourceName .. ':server:removeEvidenceImage', function(source, imageId)
     local src = source
     if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
diff --git a/server/backend/evidence.lua b/server/backend/evidence.lua
index 20b4e3d2..858c8b6c 100644
--- a/server/backend/evidence.lua
+++ b/server/backend/evidence.lua
@@ -42,7 +42,6 @@ ps.registerCallback(resourceName .. ':server:getEvidenceItems', function(source,
         LIMIT ? OFFSET ?
     ]]):format(whereClause), listValues)
 
-    -- Images batch-laden
     if evidence and #evidence > 0 then
         local ids = {}
         local idLookup = {}
@@ -115,7 +114,6 @@ ps.registerCallback(resourceName .. ':server:searchEvidenceItems', function(sour
         LIMIT ? OFFSET ?
     ]], { likeQuery, likeQuery, likeQuery, likeQuery, likeQuery, limit, offset })
 
-    -- Images batch-laden
     if evidence and #evidence > 0 then
         local ids = {}
         local idLookup = {}
@@ -581,7 +579,7 @@ RegisterNetEvent(resourceName .. ':server:openEvidenceStash', function(stashId)
         return
     end
 
-    -- ox_inventory mit forceOpenInventory
+    -- ox_inventory with forceOpenInventory
     if GetResourceState('ox_inventory') == 'started' then
         
         exports.ox_inventory:RegisterStash(stashId, stashId , 500 , 4000000)
diff --git a/server/backend/reports.lua b/server/backend/reports.lua
index 2abb7dba..89e4f1ba 100644
--- a/server/backend/reports.lua
+++ b/server/backend/reports.lua
@@ -374,7 +374,7 @@ ps.registerCallback(resourceName..':server:getReport', function(source, reportid
                 cidInfo[row.citizenid] = {
                     name = row.fullname,
                     image = row.image,
-                    fingerprint = (row.fingerprint and row.fingerprint ~= 'null') and row.fingerprint or nil  -- neu
+                    fingerprint = (row.fingerprint and row.fingerprint ~= 'null') and row.fingerprint or nil
                 }
             end
 

From 8a187a13097585918eea58fec8071bf3521dcd79 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 14:26:27 +0200
Subject: [PATCH 067/144] added custom placeholder when type changes

added custom placeholder when type changes
---
 .../report-editor/EvidenceManager.svelte      | 42 +++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/web/src/components/report-editor/EvidenceManager.svelte b/web/src/components/report-editor/EvidenceManager.svelte
index 535cf8ec..3b1288a3 100644
--- a/web/src/components/report-editor/EvidenceManager.svelte
+++ b/web/src/components/report-editor/EvidenceManager.svelte
@@ -38,6 +38,42 @@
 		"Other",
 	];
 
+		function getSerialPlaceholder(type: string) {
+		switch (type) {
+			case "Physical": return "Item ID / Description";
+			case "Digital": return "File Hash / ID";
+			case "Document": return "Document Number";
+			case "Weapon": return "Weapon Serial Number";
+			case "Drug": return "Batch / Substance ID";
+			case "Vehicle": return "VIN / License Plate";
+			default: return "Reference ID";
+		}
+	}
+
+	function getNotesPlaceholder(type: string) {
+		switch (type) {
+			case "Physical": return "Describe the physical evidence...";
+			case "Digital": return "Describe the digital evidence...";
+			case "Document": return "Document details...";
+			case "Weapon": return "Weapon condition, caliber, etc...";
+			case "Drug": return "Type, quantity, packaging...";
+			case "Vehicle": return "Vehicle condition, location...";
+			default: return "Additional notes...";
+		}
+	}
+	
+	function getTitlePlaceholder(type: string) {
+		switch (type) {
+			case "Physical": return "Item name (e.g. Blood-stained shirt)";
+			case "Digital": return "File name (e.g. chat_log.txt)";
+			case "Document": return "Document title (e.g. Contract)";
+			case "Weapon": return "Weapon name + Serial Number (e.g. Glock 17)";
+			case "Drug": return "Substance name (e.g. Cocaine)";
+			case "Vehicle": return "Vehicle (e.g. Sultan RS)";
+			default: return "Evidence title";
+		}
+	}
+
 	// --- Add Image Modal state ---
 	let addImgOpen = $state(false);
 	let addImgEvidenceId = $state<string | null>(null);
@@ -164,7 +200,7 @@
 				<div class="card-info">
 					<input
 						type="text"
-						placeholder="Evidence Title"
+						placeholder={getTitlePlaceholder(item.type)}
 						value={item.title}
 						oninput={(e) => updateEvidence(item.id, "title", e.currentTarget.value)}
 						class="title-input"
@@ -200,14 +236,14 @@
 					</select>
 					<input
 						type="text"
-						placeholder="Serial Number"
+						placeholder={getSerialPlaceholder(item.type)}
 						value={item.serial}
 						oninput={(e) => updateEvidence(item.id, "serial", e.currentTarget.value)}
 						class="field-input"
 					/>
 				</div>
 				<textarea
-					placeholder="Notes"
+					placeholder={getNotesPlaceholder(item.type)}
 					value={item.notes}
 					oninput={(e) => updateEvidence(item.id, "notes", e.currentTarget.value)}
 					class="notes-input"

From 23be93c0e5a32943e9d200d2b5553045326ba513 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 18:40:38 +0200
Subject: [PATCH 068/144] overhaul of vehicle tracking - server side

overhaul of vehicle tracking - server side
---
 server/backend/tracking.lua | 138 +++++++++++++++++++++++++++++++++---
 1 file changed, 130 insertions(+), 8 deletions(-)

diff --git a/server/backend/tracking.lua b/server/backend/tracking.lua
index a70a7c4b..b61ae9e5 100644
--- a/server/backend/tracking.lua
+++ b/server/backend/tracking.lua
@@ -1,4 +1,5 @@
 local resourceName = tostring(GetCurrentResourceName())
+local vehicleCache = {}
 
 local function getOfficerTrackers()
     local officers = {}
@@ -56,7 +57,6 @@ local function getOfficerTrackers()
             end
         end
     end
-
     return officers
 end
 
@@ -76,20 +76,66 @@ local function getVehicleTrackers()
                     if veh and veh ~= 0 and not seen[veh] then
                         seen[veh] = true
                         local coords = GetEntityCoords(veh)
-                        local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
-                        local heading = GetEntityHeading(veh)
-                        local plate = GetVehicleNumberPlateText(veh)
-                        vehicles[#vehicles + 1] = {
+                        local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+                        local entry = {
                             plate = plate,
-                            coords = coordsTable,
-                            heading = heading,
+                            coords = { x = coords.x, y = coords.y, z = coords.z },
+                            heading = GetEntityHeading(veh),
                         }
+                        vehicles[#vehicles + 1] = entry
+                        vehicleCache[plate] = entry
                     end
                 end
             end
         end
     end
 
+    if ps and ps.getAllPlayers then
+        local players = ps.getAllPlayers() or {}
+        for playerId, _ in pairs(players) do
+            if ps.getJobDuty(playerId) then
+                local jobName = ps.getJobName and ps.getJobName(playerId) or nil
+                local jobType = ps.getJobType and ps.getJobType(playerId) or nil
+                if IsPoliceJob(jobName, jobType) then
+                    local ped = GetPlayerPed(playerId)
+                    if ped and ped ~= 0 then
+                        local veh = GetVehiclePedIsIn(ped, false)
+                        if veh and veh ~= 0 and not seen[veh] then
+                            seen[veh] = true
+                            local coords = GetEntityCoords(veh)
+                            local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+                            local entry = {
+                                plate = plate,
+                                coords = { x = coords.x, y = coords.y, z = coords.z },
+                                heading = GetEntityHeading(veh),
+                            }
+                            vehicles[#vehicles + 1] = entry
+                            vehicleCache[plate] = {
+                                plate = plate,
+                                coords = { x = coords.x, y = coords.y, z = coords.z },
+                                heading = GetEntityHeading(veh),
+                            }
+                        end
+                    end
+                end
+            end
+        end
+    end
+
+    for plate, cacheData in pairs(vehicleCache) do
+        local alreadyLive = false
+        for _, v in pairs(vehicles) do
+            if v.plate == plate then
+                alreadyLive = true
+                break
+            end
+        end
+        if not alreadyLive then
+            vehicles[#vehicles + 1] = cacheData
+        end
+    end
+
+    print(json.encode(vehicles, {indent = true}))
     return vehicles
 end
 
@@ -146,7 +192,6 @@ local function getBodycamTrackers()
             end
         end
     end
-
     return bodycams
 end
 
@@ -160,3 +205,80 @@ ps.registerCallback(resourceName .. ':server:getTracking', function(source)
         bodycams = getBodycamTrackers(),
     }
 end)
+
+RegisterNetEvent('baseevents:leftVehicle', function(vehicle, seat, model, netId)
+    local src = source
+    if not CheckAuth(src) then return end
+
+    if exports['qb-core'] then
+        local QBCore = exports['qb-core']:GetCoreObject()
+        local player = QBCore.Functions.GetPlayer(src)
+        if not player then return end
+        local job = player.PlayerData.job
+        if not job or not job.onduty or not IsPoliceJob(job.name, job.type) then return end
+    end
+
+    local veh = NetworkGetEntityFromNetworkId(netId)
+    if not veh or veh == 0 then return end
+
+    local coords = GetEntityCoords(veh)
+    local heading = GetEntityHeading(veh)
+    local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+    if not plate or #plate == 0 then return end
+
+    TriggerClientEvent(resourceName .. ':client:checkVehicleClass', src, netId, plate, { x = coords.x, y = coords.y, z = coords.z }, heading)
+end)
+
+RegisterNetEvent(resourceName .. ':server:cacheVehicle', function(plate, coords, heading)
+    local src = source
+    if not CheckAuth(src) then return end
+
+    if exports['qb-core'] then
+        local QBCore = exports['qb-core']:GetCoreObject()
+        local player = QBCore.Functions.GetPlayer(src)
+        if not player then return end
+        local job = player.PlayerData.job
+        if not job or not job.onduty or not IsPoliceJob(job.name, job.type) then return end
+    end
+
+    if not plate or type(plate) ~= 'string' or #plate == 0 or #plate > 8 then return end
+
+    if type(coords) ~= 'table' or not coords.x or not coords.y or not coords.z then return end
+    if type(coords.x) ~= 'number' or type(coords.y) ~= 'number' or type(coords.z) ~= 'number' then return end
+
+    if not heading or type(heading) ~= 'number' then return end
+    if heading < 0 or heading > 360 then return end
+
+    if coords.x < -4000 or coords.x > 4000 or coords.y < -4000 or coords.y > 8000 then return end
+
+    -- rate limit pro spieler
+    local cooldowns = {}
+    if cooldowns[src] and os.time() - cooldowns[src] < 5 then
+        ps.warn('Rate limit hit for ' .. src)
+        return
+    end
+    cooldowns[src] = os.time()
+
+    if not vehicleCache[plate] then
+        ps.info(plate .. ' was added into vehicleCache for Maps')
+    end
+
+    vehicleCache[plate] = {
+        plate = plate,
+        coords = { x = coords.x, y = coords.y, z = coords.z },
+        heading = heading,
+    }
+end)
+
+AddEventHandler('entityRemoved', function(entity)
+    if GetEntityType(entity) ~= 2 then return end -- 2 = vehicle
+
+    local plate = GetVehicleNumberPlateText(entity)
+    if not plate or plate == '' then return end
+    plate = plate:gsub('%s+', '')
+
+    if vehicleCache[plate] then
+        ps.success(plate .. ' despawned, removing from vehicleCache')
+        vehicleCache[plate] = nil
+    end
+end)
\ No newline at end of file

From 59b70c17352a7da912117a6168252a06870be9d1 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 18:41:08 +0200
Subject: [PATCH 069/144] overhaul of vehicle tracking - client side

overhaul of vehicle tracking - client side
---
 client/backend/tracking.lua | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/backend/tracking.lua b/client/backend/tracking.lua
index ce59dc51..2c0025fd 100644
--- a/client/backend/tracking.lua
+++ b/client/backend/tracking.lua
@@ -13,3 +13,13 @@ RegisterNUICallback('getTracking', function(_, cb)
         cb({ success = false, message = 'Failed to fetch tracking data', data = {} })
     end
 end)
+
+RegisterNetEvent(resourceName .. ':client:checkVehicleClass', function(netId, plate, coords, heading)
+    local veh = NetworkGetEntityFromNetworkId(netId)
+    if not veh or veh == 0 then return end
+
+    local vehClass = GetVehicleClass(veh)
+    if vehClass ~= 18 then     ps.error(plate.. ' is not a emergency vehicle') return end
+
+    TriggerServerEvent(resourceName .. ':server:cacheVehicle', plate, coords, heading)
+end)
\ No newline at end of file

From ff231cab5f8813b32cfe53da1b2bd32cea66f565 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 18:42:40 +0200
Subject: [PATCH 070/144] added heading into the map

added heading into the map:
- since we already push the data into svelte, we could use it
---
 web/src/pages/Map.svelte | 94 ++++++++++++++++++++++++++++++++--------
 1 file changed, 77 insertions(+), 17 deletions(-)

diff --git a/web/src/pages/Map.svelte b/web/src/pages/Map.svelte
index 1a151d1c..67e05f4f 100644
--- a/web/src/pages/Map.svelte
+++ b/web/src/pages/Map.svelte
@@ -55,27 +55,47 @@
 		kind: "officer" | "vehicle" | "bodycam",
 		coords: { x: number; y: number },
 		label: string,
+		heading?: number
 	) {
 		const config = getTrackConfig(kind);
 		const latLng = toMapLatLng(coords);
+
+		// Heading umrechnen: GTA heading → CSS rotation
+		// GTA: 0 = Nord, 90 = West — CSS: 0 = oben, dreht clockwise
+		const rotation = heading != null ? (360 - heading) : 0;
+		const hasHeading = heading != null;
+
 		if (iconStyle === "badge") {
-			return L.marker(latLng, {
+			return L.marker(latLng as any, {
 				icon: L.divIcon({
-					className: `tracking-icon tracking-${kind}`,
-					html: `<span>${config.label}</span>`,
-					iconSize: [24, 24],
-					iconAnchor: [12, 12],
+					className: "",
+					html: `
+						<div class="tracking-badge-wrap" style="transform: rotate(${rotation}deg)">
+							<div class="tracking-icon tracking-${kind}">
+								<span style="transform: rotate(-${rotation}deg)">${config.label}</span>
+							</div>
+							${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
+						</div>
+					`,
+					iconSize: [28, 28],
+					iconAnchor: [14, 14],
 				}),
-			}).bindTooltip(label, { direction: "top", offset: [0, -10] });
+			}).bindTooltip(label, { direction: "top", offset: [0, -14] });
 		}
 
-		return L.circleMarker(latLng, {
-			radius: 6,
-			color: config.color,
-			weight: 2,
-			fillColor: config.fill,
-			fillOpacity: 0.9,
-		}).bindTooltip(label, { direction: "top", offset: [0, -6] });
+		return L.marker(latLng as any, {
+			icon: L.divIcon({
+				className: "",
+				html: `
+					<div class="tracking-dot-wrap" style="transform: rotate(${rotation}deg)">
+						<div class="tracking-dot" style="background:${config.fill}; border: 2px solid ${config.color}"></div>
+						${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
+					</div>
+				`,
+				iconSize: [20, 20],
+				iconAnchor: [10, 10],
+			}),
+		}).bindTooltip(label, { direction: "top", offset: [0, -10] });
 	}
 
 	function normalizeCoords(raw: any) {
@@ -108,7 +128,7 @@
 					const coords = normalizeCoords((officer as any).coords);
 					if (!coords) continue;
 					const name = `${(officer as any).callsign ? (officer as any).callsign + " " : ""}${(officer as any).name}`;
-					createMarker("officer", coords, name).addTo(officerLayer);
+					createMarker("officer", coords, name, (officer as any).heading).addTo(officerLayer);
 				}
 			}
 
@@ -117,7 +137,7 @@
 					const coords = normalizeCoords((vehicle as any).coords);
 					if (!coords) continue;
 					const label = `Vehicle ${(vehicle as any).plate || ""}`.trim();
-					createMarker("vehicle", coords, label).addTo(vehicleLayer);
+					createMarker("vehicle", coords, label, (vehicle as any).heading).addTo(vehicleLayer);
 				}
 			}
 
@@ -126,7 +146,7 @@
 					const coords = normalizeCoords((bodycam as any).coords);
 					if (!coords) continue;
 					const label = `Bodycam ${(bodycam as any).callsign ? (bodycam as any).callsign + " " : ""}${(bodycam as any).name}`;
-					createMarker("bodycam", coords, label).addTo(bodycamLayer);
+					createMarker("bodycam", coords, label, (bodycam as any).heading).addTo(bodycamLayer);
 				}
 			}
 		} catch (error) {
@@ -230,7 +250,7 @@
 		bodycamLayer = L.layerGroup().addTo(map);
 		syncLayerVisibility();
 		refreshTracking();
-		refreshTimer = setInterval(refreshTracking, 5000);
+		refreshTimer = setInterval(refreshTracking, 2500);
 	}
 
 	onMount(() => {
@@ -529,4 +549,44 @@
 	:global(.tracking-bodycam) {
 		background: #a855f7;
 	}
+
+	:global(.tracking-dot-wrap),
+	:global(.tracking-badge-wrap) {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	:global(.tracking-dot) {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+	}
+
+	:global(.tracking-arrow) {
+		position: absolute;
+		top: -7px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 4px solid transparent;
+		border-right: 4px solid transparent;
+	}
+
+	:global(.tracking-arrow-officer) {
+		border-bottom: 8px solid #38bdf8;
+	}
+
+	:global(.tracking-arrow-vehicle) {
+		border-bottom: 8px solid #f97316;
+	}
+
+	:global(.tracking-arrow-bodycam) {
+		border-bottom: 8px solid #a855f7;
+	}
+
 </style>

From 12ba291c2ccbe5af60792c7e54ed7956c8ee7350 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 18:44:50 +0200
Subject: [PATCH 071/144] removed prints

---
 web/src/pages/Map.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/pages/Map.svelte b/web/src/pages/Map.svelte
index 67e05f4f..f413e559 100644
--- a/web/src/pages/Map.svelte
+++ b/web/src/pages/Map.svelte
@@ -60,8 +60,6 @@
 		const config = getTrackConfig(kind);
 		const latLng = toMapLatLng(coords);
 
-		// Heading umrechnen: GTA heading → CSS rotation
-		// GTA: 0 = Nord, 90 = West — CSS: 0 = oben, dreht clockwise
 		const rotation = heading != null ? (360 - heading) : 0;
 		const hasHeading = heading != null;
 

From b4421620213379d15d13282e93391513a8f20daa Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 17 May 2026 18:45:08 +0200
Subject: [PATCH 072/144] removed prints

---
 server/backend/tracking.lua | 1 -
 1 file changed, 1 deletion(-)

diff --git a/server/backend/tracking.lua b/server/backend/tracking.lua
index b61ae9e5..a2ecdbee 100644
--- a/server/backend/tracking.lua
+++ b/server/backend/tracking.lua
@@ -135,7 +135,6 @@ local function getVehicleTrackers()
         end
     end
 
-    print(json.encode(vehicles, {indent = true}))
     return vehicles
 end
 

From 203090d31c9b814954b0d16b7ec48108d6b4cc19 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Mon, 18 May 2026 15:22:14 +0200
Subject: [PATCH 073/144] fixed tracking performance

fixed tracking performance
---
 server/backend/tracking.lua | 360 +++++++++++++-----------------------
 1 file changed, 131 insertions(+), 229 deletions(-)

diff --git a/server/backend/tracking.lua b/server/backend/tracking.lua
index a2ecdbee..3b9541b8 100644
--- a/server/backend/tracking.lua
+++ b/server/backend/tracking.lua
@@ -1,213 +1,145 @@
 local resourceName = tostring(GetCurrentResourceName())
 local vehicleCache = {}
+local cacheVehicleCooldowns = {}
 
-local function getOfficerTrackers()
-    local officers = {}
+local function getAllTrackers()
+    local vehicles = {}
+    local bodycams = {}
+    local seenVehicles = {}
+
+    local players = {}
 
     if exports['qb-core'] then
         local QBCore = exports['qb-core']:GetCoreObject()
-        local players = QBCore.Functions.GetQBPlayers() or {}
+        players = QBCore.Functions.GetQBPlayers() or {}
+
         for _, player in pairs(players) do
             local data = player.PlayerData
-            if data and data.job and data.job.onduty then
-                if IsPoliceJob(data.job.name, data.job.type) then
-                    local src = data.source
-                    local ped = GetPlayerPed(src)
-                    if ped and ped ~= 0 then
-                        local coords = GetEntityCoords(ped)
-                        local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
-                        local heading = GetEntityHeading(ped)
-                        officers[#officers + 1] = {
-                            citizenid = data.citizenid,
-                            name = (data.charinfo.firstname .. ' ' .. data.charinfo.lastname),
-                            callsign = data.metadata and data.metadata.callsign or nil,
-                            rank = data.job.grade and data.job.grade.name or 'Officer',
-                            coords = coordsTable,
-                            heading = heading,
-                        }
-                    end
-                end
+            if not data or not data.job or not data.job.onduty then goto continue end
+            if not IsPoliceJob(data.job.name, data.job.type) then goto continue end
+
+            local src = data.source
+            local ped = GetPlayerPed(src)
+            if not ped or ped == 0 then goto continue end
+
+            local coords = GetEntityCoords(ped)
+            local heading = GetEntityHeading(ped)
+            local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
+
+            local name = data.charinfo.firstname .. ' ' .. data.charinfo.lastname
+            local callsign = data.metadata and data.metadata.callsign or nil
+            local rank = data.job.grade and data.job.grade.name or 'Officer'
+
+            local entry = {
+                citizenid = data.citizenid,
+                name = name,
+                callsign = callsign,
+                rank = rank,
+                coords = coordsTable,
+                heading = heading,
+            }
+            bodycams[#bodycams + 1] = entry
+
+            local veh = GetVehiclePedIsIn(ped, false)
+            if veh and veh ~= 0 and not seenVehicles[veh] then
+                seenVehicles[veh] = true
+                local vCoords = GetEntityCoords(veh)
+                local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+                local vEntry = {
+                    plate = plate,
+                    coords = { x = vCoords.x, y = vCoords.y, z = vCoords.z },
+                    heading = GetEntityHeading(veh),
+                }
+                vehicles[#vehicles + 1] = vEntry
+                vehicleCache[plate] = vEntry
             end
-        end
-        return officers
-    end
 
-    if ps and ps.getAllPlayers then
-        local players = ps.getAllPlayers() or {}
-        for _, playerId in pairs(players) do
-            if ps.getJobDuty and ps.getJobDuty(playerId) then
-                local jobName = ps.getJobName and ps.getJobName(playerId) or nil
-                local jobType = ps.getJobType and ps.getJobType(playerId) or nil
-                if IsPoliceJob(jobName, jobType) then
-                    local ped = GetPlayerPed(playerId)
-                    if ped and ped ~= 0 then
-                        local coords = GetEntityCoords(ped)
-                        local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
-                        local heading = GetEntityHeading(ped)
-                        officers[#officers + 1] = {
-                            citizenid = ps.getIdentifier and ps.getIdentifier(playerId) or nil,
-                            name = ps.getPlayerName and ps.getPlayerName(playerId) or GetPlayerName(playerId) or 'Unknown',
-                            callsign = ps.getMetadata and ps.getMetadata(playerId, 'callsign') or nil,
-                            rank = ps.getJobGradeName and ps.getJobGradeName(playerId) or 'Officer',
-                            coords = coordsTable,
-                            heading = heading,
-                        }
-                    end
-                end
-            end
+            ::continue::
         end
-    end
-    return officers
-end
-
-local function getVehicleTrackers()
-    local vehicles = {}
-    local seen = {}
 
-    if exports['qb-core'] then
-        local QBCore = exports['qb-core']:GetCoreObject()
-        local players = QBCore.Functions.GetQBPlayers() or {}
-        for _, player in pairs(players) do
-            local data = player.PlayerData
-            if data and data.job and data.job.onduty and IsPoliceJob(data.job.name, data.job.type) then
-                local ped = GetPlayerPed(data.source)
-                if ped and ped ~= 0 then
-                    local veh = GetVehiclePedIsIn(ped, false)
-                    if veh and veh ~= 0 and not seen[veh] then
-                        seen[veh] = true
-                        local coords = GetEntityCoords(veh)
-                        local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
-                        local entry = {
-                            plate = plate,
-                            coords = { x = coords.x, y = coords.y, z = coords.z },
-                            heading = GetEntityHeading(veh),
-                        }
-                        vehicles[#vehicles + 1] = entry
-                        vehicleCache[plate] = entry
-                    end
-                end
+    elseif ps and ps.getAllPlayers then
+        local playerList = ps.getAllPlayers() or {}
+
+        for _, playerId in pairs(playerList) do
+            if not (ps.getJobDuty and ps.getJobDuty(playerId)) then goto continue end
+
+            local jobName = ps.getJobName and ps.getJobName(playerId) or nil
+            local jobType = ps.getJobType and ps.getJobType(playerId) or nil
+            if not IsPoliceJob(jobName, jobType) then goto continue end
+
+            local ped = GetPlayerPed(playerId)
+            if not ped or ped == 0 then goto continue end
+
+            local coords = GetEntityCoords(ped)
+            local heading = GetEntityHeading(ped)
+            local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
+            local name = (ps.getPlayerName and ps.getPlayerName(playerId)) or GetPlayerName(playerId) or 'Unknown'
+            local callsign = ps.getMetadata and ps.getMetadata(playerId, 'callsign') or nil
+
+            local entry = {
+                citizenid = ps.getIdentifier and ps.getIdentifier(playerId) or nil,
+                name = name,
+                callsign = callsign,
+                rank = ps.getJobGradeName and ps.getJobGradeName(playerId) or 'Officer',
+                coords = coordsTable,
+                heading = heading,
+            }
+            bodycams[#bodycams + 1] = entry
+
+            local veh = GetVehiclePedIsIn(ped, false)
+            if veh and veh ~= 0 and not seenVehicles[veh] then
+                seenVehicles[veh] = true
+                local vCoords = GetEntityCoords(veh)
+                local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+                local vEntry = {
+                    plate = plate,
+                    coords = { x = vCoords.x, y = vCoords.y, z = vCoords.z },
+                    heading = GetEntityHeading(veh),
+                }
+                vehicles[#vehicles + 1] = vEntry
+                vehicleCache[plate] = vEntry
             end
-        end
-    end
 
-    if ps and ps.getAllPlayers then
-        local players = ps.getAllPlayers() or {}
-        for playerId, _ in pairs(players) do
-            if ps.getJobDuty(playerId) then
-                local jobName = ps.getJobName and ps.getJobName(playerId) or nil
-                local jobType = ps.getJobType and ps.getJobType(playerId) or nil
-                if IsPoliceJob(jobName, jobType) then
-                    local ped = GetPlayerPed(playerId)
-                    if ped and ped ~= 0 then
-                        local veh = GetVehiclePedIsIn(ped, false)
-                        if veh and veh ~= 0 and not seen[veh] then
-                            seen[veh] = true
-                            local coords = GetEntityCoords(veh)
-                            local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
-                            local entry = {
-                                plate = plate,
-                                coords = { x = coords.x, y = coords.y, z = coords.z },
-                                heading = GetEntityHeading(veh),
-                            }
-                            vehicles[#vehicles + 1] = entry
-                            vehicleCache[plate] = {
-                                plate = plate,
-                                coords = { x = coords.x, y = coords.y, z = coords.z },
-                                heading = GetEntityHeading(veh),
-                            }
-                        end
-                    end
-                end
-            end
+            ::continue::
         end
     end
 
     for plate, cacheData in pairs(vehicleCache) do
-        local alreadyLive = false
-        for _, v in pairs(vehicles) do
-            if v.plate == plate then
-                alreadyLive = true
-                break
+        if not seenVehicles[cacheData._entity] then
+            local alreadyAdded = false
+            for _, v in pairs(vehicles) do
+                if v.plate == plate then alreadyAdded = true; break end
             end
-        end
-        if not alreadyLive then
-            vehicles[#vehicles + 1] = cacheData
-        end
-    end
-
-    return vehicles
-end
-
-local function getBodycamTrackers()
-    local bodycams = {}
-
-    if exports['qb-core'] then
-        local QBCore = exports['qb-core']:GetCoreObject()
-        local players = QBCore.Functions.GetQBPlayers() or {}
-        for _, player in pairs(players) do
-            local data = player.PlayerData
-            if data and data.job and data.job.onduty then
-                if IsPoliceJob(data.job.name, data.job.type) then
-                    local ped = GetPlayerPed(data.source)
-                    if ped and ped ~= 0 then
-                        local coords = GetEntityCoords(ped)
-                        local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
-                        local heading = GetEntityHeading(ped)
-                        bodycams[#bodycams + 1] = {
-                            citizenid = data.citizenid,
-                            name = (data.charinfo.firstname .. ' ' .. data.charinfo.lastname),
-                            callsign = data.metadata and data.metadata.callsign or nil,
-                            coords = coordsTable,
-                            heading = heading,
-                        }
-                    end
-                end
+            if not alreadyAdded then
+                vehicles[#vehicles + 1] = cacheData
             end
         end
-        return bodycams
     end
 
-    if ps and ps.getAllPlayers then
-        local players = ps.getAllPlayers() or {}
-        for _, playerId in pairs(players) do
-            if ps.getJobDuty and ps.getJobDuty(playerId) then
-                local jobName = ps.getJobName and ps.getJobName(playerId) or nil
-                local jobType = ps.getJobType and ps.getJobType(playerId) or nil
-                if IsPoliceJob(jobName, jobType) then
-                    local ped = GetPlayerPed(playerId)
-                    if ped and ped ~= 0 then
-                        local coords = GetEntityCoords(ped)
-                        local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
-                        local heading = GetEntityHeading(ped)
-                        bodycams[#bodycams + 1] = {
-                            citizenid = ps.getIdentifier and ps.getIdentifier(playerId) or nil,
-                            name = ps.getPlayerName and ps.getPlayerName(playerId) or GetPlayerName(playerId) or 'Unknown',
-                            callsign = ps.getMetadata and ps.getMetadata(playerId, 'callsign') or nil,
-                            coords = coordsTable,
-                            heading = heading,
-                        }
-                    end
-                end
-            end
-        end
-    end
-    return bodycams
+    return vehicles, bodycams
 end
 
 ps.registerCallback(resourceName .. ':server:getTracking', function(source)
-    local src = source
-    if not CheckAuth(src) then return { officers = {}, vehicles = {}, bodycams = {} } end
+    if not CheckAuth(source) then
+        return { vehicles = {}, bodycams = {} }
+    end
 
-    return {
-        officers = getOfficerTrackers(),
-        vehicles = getVehicleTrackers(),
-        bodycams = getBodycamTrackers(),
-    }
+    local vehicles, bodycams = getAllTrackers()
+    return { vehicles = vehicles, bodycams = bodycams }
 end)
 
-RegisterNetEvent('baseevents:leftVehicle', function(vehicle, seat, model, netId)
+RegisterNetEvent(resourceName .. ':server:cacheVehicle', function(plate, coords, heading)
     local src = source
-    if not CheckAuth(src) then return end
+
+    if type(plate) ~= 'string' or #plate == 0 or #plate > 8 then return end
+    if type(coords) ~= 'table' or type(coords.x) ~= 'number'
+       or type(coords.y) ~= 'number' or type(coords.z) ~= 'number' then return end
+    if type(heading) ~= 'number' or heading < 0 or heading > 360 then return end
+    if coords.x < -4000 or coords.x > 4000 or coords.y < -4000 or coords.y > 8000 then return end
+
+    local now = os.time()
+    if cacheVehicleCooldowns[src] and now - cacheVehicleCooldowns[src] < 5 then return end
+    cacheVehicleCooldowns[src] = now
 
     if exports['qb-core'] then
         local QBCore = exports['qb-core']:GetCoreObject()
@@ -217,67 +149,37 @@ RegisterNetEvent('baseevents:leftVehicle', function(vehicle, seat, model, netId)
         if not job or not job.onduty or not IsPoliceJob(job.name, job.type) then return end
     end
 
-    local veh = NetworkGetEntityFromNetworkId(netId)
-    if not veh or veh == 0 then return end
-
-    local coords = GetEntityCoords(veh)
-    local heading = GetEntityHeading(veh)
-    local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
-    if not plate or #plate == 0 then return end
+    vehicleCache[plate] = {
+        plate = plate,
+        coords = { x = coords.x, y = coords.y, z = coords.z },
+        heading = heading,
+    }
+end)
 
-    TriggerClientEvent(resourceName .. ':client:checkVehicleClass', src, netId, plate, { x = coords.x, y = coords.y, z = coords.z }, heading)
+AddEventHandler('playerDropped', function()
+    cacheVehicleCooldowns[source] = nil
 end)
 
-RegisterNetEvent(resourceName .. ':server:cacheVehicle', function(plate, coords, heading)
+RegisterNetEvent('baseevents:leftVehicle', function(vehicle, seat, model, netId)
     local src = source
     if not CheckAuth(src) then return end
 
-    if exports['qb-core'] then
-        local QBCore = exports['qb-core']:GetCoreObject()
-        local player = QBCore.Functions.GetPlayer(src)
-        if not player then return end
-        local job = player.PlayerData.job
-        if not job or not job.onduty or not IsPoliceJob(job.name, job.type) then return end
-    end
-
-    if not plate or type(plate) ~= 'string' or #plate == 0 or #plate > 8 then return end
-
-    if type(coords) ~= 'table' or not coords.x or not coords.y or not coords.z then return end
-    if type(coords.x) ~= 'number' or type(coords.y) ~= 'number' or type(coords.z) ~= 'number' then return end
-
-    if not heading or type(heading) ~= 'number' then return end
-    if heading < 0 or heading > 360 then return end
-
-    if coords.x < -4000 or coords.x > 4000 or coords.y < -4000 or coords.y > 8000 then return end
-
-    -- rate limit pro spieler
-    local cooldowns = {}
-    if cooldowns[src] and os.time() - cooldowns[src] < 5 then
-        ps.warn('Rate limit hit for ' .. src)
-        return
-    end
-    cooldowns[src] = os.time()
+    local veh = NetworkGetEntityFromNetworkId(netId)
+    if not veh or veh == 0 then return end
 
-    if not vehicleCache[plate] then
-        ps.info(plate .. ' was added into vehicleCache for Maps')
-    end
+    local coords = GetEntityCoords(veh)
+    local heading = GetEntityHeading(veh)
+    local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+    if not plate or #plate == 0 then return end
 
-    vehicleCache[plate] = {
-        plate = plate,
-        coords = { x = coords.x, y = coords.y, z = coords.z },
-        heading = heading,
-    }
+    TriggerClientEvent(resourceName .. ':client:checkVehicleClass', src, netId, plate,
+        { x = coords.x, y = coords.y, z = coords.z }, heading)
 end)
 
 AddEventHandler('entityRemoved', function(entity)
-    if GetEntityType(entity) ~= 2 then return end -- 2 = vehicle
-
+    if GetEntityType(entity) ~= 2 then return end
     local plate = GetVehicleNumberPlateText(entity)
     if not plate or plate == '' then return end
     plate = plate:gsub('%s+', '')
-
-    if vehicleCache[plate] then
-        ps.success(plate .. ' despawned, removing from vehicleCache')
-        vehicleCache[plate] = nil
-    end
+    vehicleCache[plate] = nil
 end)
\ No newline at end of file

From e01ea1e7c8b6390211a9e951c471a4b1a9b19d77 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Mon, 18 May 2026 15:22:39 +0200
Subject: [PATCH 074/144] fixed tracking performance - client

fixed tracking performance - client
---
 client/backend/tracking.lua | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/backend/tracking.lua b/client/backend/tracking.lua
index 2c0025fd..3895731c 100644
--- a/client/backend/tracking.lua
+++ b/client/backend/tracking.lua
@@ -18,8 +18,7 @@ RegisterNetEvent(resourceName .. ':client:checkVehicleClass', function(netId, pl
     local veh = NetworkGetEntityFromNetworkId(netId)
     if not veh or veh == 0 then return end
 
-    local vehClass = GetVehicleClass(veh)
-    if vehClass ~= 18 then     ps.error(plate.. ' is not a emergency vehicle') return end
+    if GetVehicleClass(veh) ~= 18 then return end
 
     TriggerServerEvent(resourceName .. ':server:cacheVehicle', plate, coords, heading)
 end)
\ No newline at end of file

From a6a9b66c791489e551ae5beb92e00079e5fa1630 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Mon, 18 May 2026 15:23:52 +0200
Subject: [PATCH 075/144] fixed tracking performance - svelte

fixed tracking performance
changed refreshticking from 2000 to 4500, added tabvisible check to stop when not shown
---
 web/src/pages/Map.svelte | 1055 +++++++++++++++++---------------------
 1 file changed, 472 insertions(+), 583 deletions(-)

diff --git a/web/src/pages/Map.svelte b/web/src/pages/Map.svelte
index f413e559..5d012722 100644
--- a/web/src/pages/Map.svelte
+++ b/web/src/pages/Map.svelte
@@ -1,590 +1,479 @@
 <script lang="ts">
-	import { onMount, onDestroy } from "svelte";
-	import L, {
-		CRS,
-		Projection,
-		LatLngBounds,
-		Transformation,
-		Map,
-	} from "leaflet";
-	import "leaflet/dist/leaflet.css";
-	import { fetchNui } from "../utils/fetchNui";
-	import { isEnvBrowser } from "../utils/misc";
-	import { NUI_EVENTS } from "../constants/nuiEvents";
-	import { globalNotifications } from "../services/notificationService.svelte";
-
-	let mapContainer: HTMLDivElement | null = null;
-	let map: L.Map | null = null;
-	let mapInitialized = false;
-	let refreshTimer: ReturnType<typeof setInterval> | null = null;
-	let showOfficers = $state(true);
-	let showVehicles = $state(true);
-	let showBodycams = $state(true);
-	let iconStyle = $state<"dot" | "badge">("dot");
-
-	let officerLayer = L.layerGroup();
-	let vehicleLayer = L.layerGroup();
-	let bodycamLayer = L.layerGroup();
-
-	// bigger = right
-	// smaller = left
-	const offsetX = 13;
-
-	// bigger = down
-	// smaller = up
-	const offsetY = 5;
-
-	function toMapLatLng(coords: { x: number; y: number }) {
-		return [
-			coords.y - offsetY,
-			coords.x + offsetX
-		];
-	}
-
-	function getTrackConfig(kind: "officer" | "vehicle" | "bodycam") {
-		if (kind === "vehicle") {
-			return { color: "#f97316", fill: "#fb923c", label: "V" };
-		}
-		if (kind === "bodycam") {
-			return { color: "#a855f7", fill: "#c084fc", label: "B" };
-		}
-		return { color: "#38bdf8", fill: "#0ea5e9", label: "O" };
-	}
-
-	function createMarker(
-		kind: "officer" | "vehicle" | "bodycam",
-		coords: { x: number; y: number },
-		label: string,
-		heading?: number
-	) {
-		const config = getTrackConfig(kind);
-		const latLng = toMapLatLng(coords);
-
-		const rotation = heading != null ? (360 - heading) : 0;
-		const hasHeading = heading != null;
-
-		if (iconStyle === "badge") {
-			return L.marker(latLng as any, {
-				icon: L.divIcon({
-					className: "",
-					html: `
-						<div class="tracking-badge-wrap" style="transform: rotate(${rotation}deg)">
-							<div class="tracking-icon tracking-${kind}">
-								<span style="transform: rotate(-${rotation}deg)">${config.label}</span>
-							</div>
-							${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
-						</div>
-					`,
-					iconSize: [28, 28],
-					iconAnchor: [14, 14],
-				}),
-			}).bindTooltip(label, { direction: "top", offset: [0, -14] });
-		}
-
-		return L.marker(latLng as any, {
-			icon: L.divIcon({
-				className: "",
-				html: `
-					<div class="tracking-dot-wrap" style="transform: rotate(${rotation}deg)">
-						<div class="tracking-dot" style="background:${config.fill}; border: 2px solid ${config.color}"></div>
-						${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
-					</div>
-				`,
-				iconSize: [20, 20],
-				iconAnchor: [10, 10],
-			}),
-		}).bindTooltip(label, { direction: "top", offset: [0, -10] });
-	}
-
-	function normalizeCoords(raw: any) {
-		if (!raw) return null;
-		if (Array.isArray(raw) && raw.length >= 2) {
-			return { x: Number(raw[0]), y: Number(raw[1]) };
-		}
-		if (typeof raw.x === "number" && typeof raw.y === "number") {
-			return { x: raw.x, y: raw.y };
-		}
-		return null;
-	}
-
-	async function refreshTracking() {
-		if (!map || isEnvBrowser()) return;
-		try {
-			const response = await fetchNui(
-				NUI_EVENTS.MAP.GET_TRACKING,
-				{},
-				{ data: { officers: [], vehicles: [], bodycams: [] } },
-			);
-	const data = (response as any).data ?? response;
-
-			officerLayer.clearLayers();
-			vehicleLayer.clearLayers();
-			bodycamLayer.clearLayers();
-
-			if (showOfficers) {
-				for (const officer of (data as any).officers || []) {
-					const coords = normalizeCoords((officer as any).coords);
-					if (!coords) continue;
-					const name = `${(officer as any).callsign ? (officer as any).callsign + " " : ""}${(officer as any).name}`;
-					createMarker("officer", coords, name, (officer as any).heading).addTo(officerLayer);
-				}
-			}
-
-			if (showVehicles) {
-				for (const vehicle of (data as any).vehicles || []) {
-					const coords = normalizeCoords((vehicle as any).coords);
-					if (!coords) continue;
-					const label = `Vehicle ${(vehicle as any).plate || ""}`.trim();
-					createMarker("vehicle", coords, label, (vehicle as any).heading).addTo(vehicleLayer);
-				}
-			}
-
-			if (showBodycams) {
-				for (const bodycam of (data as any).bodycams || []) {
-					const coords = normalizeCoords((bodycam as any).coords);
-					if (!coords) continue;
-					const label = `Bodycam ${(bodycam as any).callsign ? (bodycam as any).callsign + " " : ""}${(bodycam as any).name}`;
-					createMarker("bodycam", coords, label, (bodycam as any).heading).addTo(bodycamLayer);
-				}
-			}
-		} catch (error) {
-			globalNotifications.error("Failed to refresh tracking");
-		}
-	}
-
-	function syncLayerVisibility() {
-		if (!map) return;
-		if (showOfficers) {
-			if (!map.hasLayer(officerLayer)) officerLayer.addTo(map);
-		} else if (map.hasLayer(officerLayer)) {
-			map.removeLayer(officerLayer);
-		}
-
-		if (showVehicles) {
-			if (!map.hasLayer(vehicleLayer)) vehicleLayer.addTo(map);
-		} else if (map.hasLayer(vehicleLayer)) {
-			map.removeLayer(vehicleLayer);
-		}
-
-		if (showBodycams) {
-			if (!map.hasLayer(bodycamLayer)) bodycamLayer.addTo(map);
-		} else if (map.hasLayer(bodycamLayer)) {
-			map.removeLayer(bodycamLayer);
-		}
-	}
-
-	function getCustomCRS() {
-		const zoomNumb = 0.6931471805599453;
-		return L.extend({}, CRS.Simple, {
-			projection: Projection.LonLat,
-			scale: function (zoom: number) {
-				return Math.pow(2, zoom);
-			},
-			zoom: function (sc: number) {
-				return Math.log(sc) / zoomNumb;
-			},
-			distance: function (
-				pos1: { lng: number; lat: number },
-				pos2: { lng: number; lat: number },
-			) {
-				var x_difference = pos2.lng - pos1.lng;
-				var y_difference = pos2.lat - pos1.lat;
-				return Math.sqrt(
-					x_difference * x_difference + y_difference * y_difference,
-				);
-			},
-			transformation: new Transformation(0.02072, 117.3, -0.0205, 172.8),
-			infinite: false,
-		});
-	}
-
-	function getMapBounds(map: Map) {
-		const sw = map.unproject([0, 1024], 2);
-		const ne = map.unproject([1024, 0], 2);
-		return new LatLngBounds(sw, ne);
-	}
-
-	function addMapImageOverlay(map: Map, bounds: LatLngBounds) {
-		const imageUrl = "./images/map.jpeg";
-		L.imageOverlay(imageUrl, bounds).addTo(map);
-	}
-
-	function setupMapEvents(map: Map, bounds: LatLngBounds) {
-		map.on("dragend", () => {
-			if (!bounds.contains(map.getCenter())) {
-				map.panTo(bounds.getCenter(), { animate: false });
-			}
-		});
-	}
-
-	function initializeMap() {
-		if (mapInitialized) return;
-		mapInitialized = true;
-		const CustomCRS = getCustomCRS();
-
-		map = L.map(mapContainer as HTMLDivElement, {
-			crs: CustomCRS,
-			minZoom: 3,
-			maxZoom: 10,
-			zoom: 5,
-			preferCanvas: true,
-			center: [0, -1024],
-			maxBoundsViscosity: 1.0,
-			zoomControl: false,
-		} as any);
-
-		L.control.zoom({ position: "topright" }).addTo(map);
-
-		const bounds = getMapBounds(map);
-		map.setView([-300, -1500], 4);
-		map.setMaxBounds(bounds);
-		map.attributionControl.setPrefix(false);
-
-		addMapImageOverlay(map, bounds);
-		setupMapEvents(map, bounds);
-
-		officerLayer = L.layerGroup().addTo(map);
-		vehicleLayer = L.layerGroup().addTo(map);
-		bodycamLayer = L.layerGroup().addTo(map);
-		syncLayerVisibility();
-		refreshTracking();
-		refreshTimer = setInterval(refreshTracking, 2500);
-	}
-
-	onMount(() => {
-		initializeMap();
-	});
-
-	onDestroy(() => {
-		if (map) {
-			map.remove();
-			map = null;
-			mapInitialized = false;
-		}
-		if (refreshTimer) {
-			clearInterval(refreshTimer);
-			refreshTimer = null;
-		}
-	});
-
-	$effect(() => {
-		syncLayerVisibility();
-	});
-
-	$effect(() => {
-		iconStyle;
-		refreshTracking();
-	});
+    import { onMount, onDestroy } from "svelte";
+    import L, { CRS, Projection, LatLngBounds, Transformation, Map } from "leaflet";
+    import "leaflet/dist/leaflet.css";
+    import { fetchNui } from "../utils/fetchNui";
+    import { isEnvBrowser } from "../utils/misc";
+    import { NUI_EVENTS } from "../constants/nuiEvents";
+    import { globalNotifications } from "../services/notificationService.svelte";
+
+    let mapContainer: HTMLDivElement | null = null;
+    let map: L.Map | null = null;
+    let mapInitialized = false;
+    let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+    let tabVisible = $state(true);
+
+    let showVehicles = $state(true);
+    let showBodycams = $state(true);
+    let iconStyle = $state<"dot" | "badge">("dot");
+
+    let vehicleLayer = L.layerGroup();
+    let bodycamLayer = L.layerGroup();
+
+    const offsetX = 13;
+    const offsetY = 5;
+
+    function toMapLatLng(coords: { x: number; y: number }) {
+        return [coords.y - offsetY, coords.x + offsetX];
+    }
+
+    function getTrackConfig(kind: "vehicle" | "bodycam") {
+        if (kind === "vehicle") return { color: "#f97316", fill: "#fb923c", label: "V" };
+        if (kind === "bodycam") return { color: "#a855f7", fill: "#c084fc", label: "B" };
+        return { color: "#38bdf8", fill: "#0ea5e9", label: "O" };
+    }
+
+    function createMarker(
+        kind: "vehicle" | "bodycam",
+        coords: { x: number; y: number },
+        label: string,
+        heading?: number
+    ) {
+        const config = getTrackConfig(kind);
+        const latLng = toMapLatLng(coords);
+        const rotation = heading != null ? 360 - heading : 0;
+        const hasHeading = heading != null;
+
+        if (iconStyle === "badge") {
+            return L.marker(latLng as any, {
+                icon: L.divIcon({
+                    className: "",
+                    html: `
+                        <div class="tracking-badge-wrap" style="transform: rotate(${rotation}deg)">
+                            <div class="tracking-icon tracking-${kind}">
+                                <span style="transform: rotate(-${rotation}deg)">${config.label}</span>
+                            </div>
+                            ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
+                        </div>
+                    `,
+                    iconSize: [28, 28],
+                    iconAnchor: [14, 14],
+                }),
+            }).bindTooltip(label, { direction: "top", offset: [0, -14] });
+        }
+
+        return L.marker(latLng as any, {
+            icon: L.divIcon({
+                className: "",
+                html: `
+                    <div class="tracking-dot-wrap" style="transform: rotate(${rotation}deg)">
+                        <div class="tracking-dot" style="background:${config.fill}; border: 2px solid ${config.color}"></div>
+                        ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
+                    </div>
+                `,
+                iconSize: [20, 20],
+                iconAnchor: [10, 10],
+            }),
+        }).bindTooltip(label, { direction: "top", offset: [0, -10] });
+    }
+
+    function normalizeCoords(raw: any) {
+        if (!raw) return null;
+        if (Array.isArray(raw) && raw.length >= 2) return { x: Number(raw[0]), y: Number(raw[1]) };
+        if (typeof raw.x === "number" && typeof raw.y === "number") return { x: raw.x, y: raw.y };
+        return null;
+    }
+
+    async function refreshTracking() {
+        if (!map || !tabVisible) return;
+        if (isEnvBrowser()) return;
+
+        try {
+            const response = await fetchNui(
+                NUI_EVENTS.MAP.GET_TRACKING,
+                {},
+                { data: { vehicles: [], bodycams: [] } }
+            );
+            const data = (response as any).data ?? response;
+
+            vehicleLayer.clearLayers();
+            bodycamLayer.clearLayers();
+
+            if (showVehicles) {
+                for (const vehicle of (data as any).vehicles || []) {
+                    const coords = normalizeCoords((vehicle as any).coords);
+                    if (!coords) continue;
+                    const label = `${(vehicle as any).plate || ""}`.trim();
+                    createMarker("vehicle", coords, label, (vehicle as any).heading).addTo(vehicleLayer);
+                }
+            }
+
+            if (showBodycams) {
+                for (const bodycam of (data as any).bodycams || []) {
+                    const coords = normalizeCoords((bodycam as any).coords);
+                    if (!coords) continue;
+                    const label = `${[(bodycam as any).rank, (bodycam as any).callsign].filter(Boolean).join(" | ")}${(bodycam as any).name ? " | " + (bodycam as any).name : ""}`;
+                    createMarker("bodycam", coords, label, (bodycam as any).heading).addTo(bodycamLayer);
+                }
+            }
+        } catch {
+            globalNotifications.error("Failed to refresh tracking");
+        }
+    }
+
+    function handleVisibilityChange() {
+        tabVisible = !document.hidden;
+    }
+
+    function syncLayerVisibility() {
+        if (!map) return;
+
+        if (showVehicles) {
+            if (!map.hasLayer(vehicleLayer)) vehicleLayer.addTo(map);
+        } else if (map.hasLayer(vehicleLayer)) {
+            map.removeLayer(vehicleLayer);
+        }
+
+        if (showBodycams) {
+            if (!map.hasLayer(bodycamLayer)) bodycamLayer.addTo(map);
+        } else if (map.hasLayer(bodycamLayer)) {
+            map.removeLayer(bodycamLayer);
+        }
+    }
+
+    function getCustomCRS() {
+        const zoomNumb = 0.6931471805599453;
+        return L.extend({}, CRS.Simple, {
+            projection: Projection.LonLat,
+            scale: (zoom: number) => Math.pow(2, zoom),
+            zoom: (sc: number) => Math.log(sc) / zoomNumb,
+            distance: (pos1: { lng: number; lat: number }, pos2: { lng: number; lat: number }) => {
+                const dx = pos2.lng - pos1.lng;
+                const dy = pos2.lat - pos1.lat;
+                return Math.sqrt(dx * dx + dy * dy);
+            },
+            transformation: new Transformation(0.02072, 117.3, -0.0205, 172.8),
+            infinite: false,
+        });
+    }
+
+    function initializeMap() {
+        if (mapInitialized) return;
+        mapInitialized = true;
+
+        const CustomCRS = getCustomCRS();
+        map = L.map(mapContainer as HTMLDivElement, {
+            crs: CustomCRS,
+            minZoom: 3,
+            maxZoom: 10,
+            zoom: 5,
+            preferCanvas: true,
+            center: [0, -1024],
+            maxBoundsViscosity: 1.0,
+            zoomControl: false,
+        } as any);
+
+        L.control.zoom({ position: "topright" }).addTo(map);
+
+        const bounds = getMapBounds(map);
+        map.setView([-300, -1500], 4);
+        map.setMaxBounds(bounds);
+        map.attributionControl.setPrefix(false);
+
+        L.imageOverlay("./images/map.jpeg", bounds).addTo(map);
+
+        map.on("dragend", () => {
+            if (!bounds.contains(map!.getCenter())) {
+                map!.panTo(bounds.getCenter(), { animate: false });
+            }
+        });
+
+        vehicleLayer = L.layerGroup().addTo(map);
+        bodycamLayer = L.layerGroup().addTo(map);
+
+        syncLayerVisibility();
+        refreshTracking();
+        refreshTimer = setInterval(refreshTracking, 4500);
+    }
+
+    function getMapBounds(map: Map) {
+        const sw = map.unproject([0, 1024], 2);
+        const ne = map.unproject([1024, 0], 2);
+        return new LatLngBounds(sw, ne);
+    }
+
+    onMount(() => {
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        initializeMap();
+    });
+
+    onDestroy(() => {
+        document.removeEventListener("visibilitychange", handleVisibilityChange);
+
+        if (map) {
+            map.remove();
+            map = null;
+            mapInitialized = false;
+        }
+        if (refreshTimer) {
+            clearInterval(refreshTimer);
+            refreshTimer = null;
+        }
+    });
+
+    $effect(() => { syncLayerVisibility(); });
+    $effect(() => { iconStyle; refreshTracking(); });
 </script>
 
 <div class="map-page">
-	<div class="map-wrapper">
-		<div class="map-controls">
-			<span class="controls-header">Tracking</span>
-
-			<div class="controls-group">
-				<label class="control-toggle">
-					<input type="checkbox" bind:checked={showOfficers} />
-					<span class="toggle-label">Officers</span>
-				</label>
-				<label class="control-toggle">
-					<input type="checkbox" bind:checked={showVehicles} />
-					<span class="toggle-label">Vehicles</span>
-				</label>
-				<label class="control-toggle">
-					<input type="checkbox" bind:checked={showBodycams} />
-					<span class="toggle-label">Bodycams</span>
-				</label>
-			</div>
-
-			<div class="controls-divider"></div>
-
-			<div class="controls-group">
-				<span class="controls-label">Style</span>
-				<div class="segment">
-					<button
-						class:active={iconStyle === "dot"}
-						onclick={() => (iconStyle = "dot")}
-						type="button"
-					>
-						Dots
-					</button>
-					<button
-						class:active={iconStyle === "badge"}
-						onclick={() => (iconStyle = "badge")}
-						type="button"
-					>
-						Badges
-					</button>
-				</div>
-			</div>
-
-			<div class="controls-divider"></div>
-
-			<div class="legend">
-				<span class="legend-item officer">Officer</span>
-				<span class="legend-item vehicle">Vehicle</span>
-				<span class="legend-item bodycam">Bodycam</span>
-			</div>
-		</div>
-		<div
-			bind:this={mapContainer}
-			class="map-container"
-		></div>
-	</div>
+    <div class="map-wrapper">
+        <div class="map-controls">
+            <span class="controls-header">Tracking</span>
+
+            <div class="controls-group">
+                <label class="control-toggle">
+                    <input type="checkbox" bind:checked={showVehicles} />
+                    <span class="toggle-label">Vehicles</span>
+                </label>
+                <label class="control-toggle">
+                    <input type="checkbox" bind:checked={showBodycams} />
+                    <span class="toggle-label">Bodycams</span>
+                </label>
+            </div>
+
+            <div class="controls-divider"></div>
+
+            <div class="controls-group">
+                <span class="controls-label">Style</span>
+                <div class="segment">
+                    <button
+                        class:active={iconStyle === "dot"}
+                        onclick={() => (iconStyle = "dot")}
+                        type="button"
+                    >
+                        Dots
+                    </button>
+                    <button
+                        class:active={iconStyle === "badge"}
+                        onclick={() => (iconStyle = "badge")}
+                        type="button"
+                    >
+                        Badges
+                    </button>
+                </div>
+            </div>
+
+            <div class="controls-divider"></div>
+
+            <div class="legend">
+                <span class="legend-item vehicle">Vehicle</span>
+                <span class="legend-item bodycam">Bodycam</span>
+            </div>
+        </div>
+        <div bind:this={mapContainer} class="map-container"></div>
+    </div>
 </div>
 
 <style>
-	:global(.leaflet-popup-content-wrapper) {
-		background: var(--dark-bg);
-		color: rgba(255, 255, 255, 0.8);
-		border-radius: 8px;
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		box-shadow: none;
-	}
-	:global(.leaflet-popup-tip) {
-		background: var(--dark-bg);
-	}
-	:global(.leaflet-tooltip) {
-		background: var(--dark-bg);
-		color: rgba(255, 255, 255, 0.8);
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 6px;
-		font-size: 11px;
-		padding: 4px 8px;
-		box-shadow: none;
-	}
-	:global(.leaflet-tooltip-top::before) {
-		border-top-color: #111111;
-	}
-
-	:global(.leaflet-control-zoom) {
-		border: 1px solid rgba(255, 255, 255, 0.06) !important;
-		border-radius: 8px !important;
-		overflow: hidden;
-		box-shadow: none !important;
-	}
-	:global(.leaflet-control-zoom a) {
-		background: rgba(17, 17, 17, 0.92) !important;
-		color: rgba(255, 255, 255, 0.6) !important;
-		border-color: rgba(255, 255, 255, 0.04) !important;
-		width: 30px !important;
-		height: 30px !important;
-		line-height: 30px !important;
-		font-size: 14px !important;
-	}
-	:global(.leaflet-control-zoom a:hover) {
-		background: rgba(255, 255, 255, 0.08) !important;
-		color: rgba(255, 255, 255, 0.9) !important;
-	}
-
-	.map-page {
-		height: 100%;
-		padding: 10px 20px 20px;
-		background: var(--card-dark-bg);
-	}
-
-	.map-wrapper {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		border-radius: 10px;
-		overflow: hidden;
-		border: 1px solid rgba(255, 255, 255, 0.06);
-	}
-
-	.map-container {
-		width: 100%;
-		height: 100%;
-	}
-
-	.map-controls {
-		position: absolute;
-		z-index: 1001;
-		top: 12px;
-		left: 12px;
-		background: rgba(17, 17, 17, 0.92);
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 10px;
-		padding: 12px 14px;
-		min-width: 160px;
-		color: rgba(255, 255, 255, 0.9);
-		font-size: 12px;
-	}
-
-	.controls-header {
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		font-size: 11px;
-		color: rgba(255, 255, 255, 0.5);
-		margin-bottom: 10px;
-	}
-
-	.controls-group {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-	}
-
-	.controls-label {
-		font-size: 11px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.5);
-		margin-bottom: 2px;
-	}
-
-	.controls-divider {
-		height: 1px;
-		background: rgba(255, 255, 255, 0.04);
-		margin: 10px 0;
-	}
-
-	.control-toggle {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		cursor: pointer;
-		font-size: 12px;
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	.control-toggle input[type="checkbox"] {
-		width: 14px;
-		height: 14px;
-		accent-color: rgba(var(--accent-rgb), 0.7);
-		cursor: pointer;
-	}
-
-	.segment {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 4px;
-	}
-
-	.segment button {
-		border-radius: 6px;
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		background: rgba(255, 255, 255, 0.04);
-		color: rgba(255, 255, 255, 0.5);
-		font-size: 11px;
-		font-weight: 500;
-		padding: 5px 8px;
-		cursor: pointer;
-		transition: all 0.1s ease;
-	}
-
-	.segment button:hover {
-		background: rgba(255, 255, 255, 0.06);
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	.segment button.active {
-		background: rgba(255, 255, 255, 0.08);
-		border-color: rgba(255, 255, 255, 0.12);
-		color: rgba(255, 255, 255, 0.9);
-	}
-
-	.legend {
-		display: flex;
-		flex-direction: column;
-		gap: 5px;
-		font-size: 11px;
-		color: rgba(255, 255, 255, 0.45);
-	}
-
-	.legend-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.legend-item::before {
-		content: "";
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		display: inline-block;
-		flex-shrink: 0;
-	}
-
-	.legend-item.officer::before {
-		background: #38bdf8;
-	}
-
-	.legend-item.vehicle::before {
-		background: #f97316;
-	}
-
-	.legend-item.bodycam::before {
-		background: #a855f7;
-	}
-
-	:global(.tracking-icon) {
-		width: 22px;
-		height: 22px;
-		border-radius: 5px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 11px;
-		font-weight: 700;
-		color: #0c0c0c;
-		border: none;
-		box-shadow: none;
-	}
-
-	:global(.tracking-officer) {
-		background: #38bdf8;
-	}
-
-	:global(.tracking-vehicle) {
-		background: #f97316;
-	}
-
-	:global(.tracking-bodycam) {
-		background: #a855f7;
-	}
-
-	:global(.tracking-dot-wrap),
-	:global(.tracking-badge-wrap) {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-	}
-
-	:global(.tracking-dot) {
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-	}
-
-	:global(.tracking-arrow) {
-		position: absolute;
-		top: -7px;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 0;
-		height: 0;
-		border-left: 4px solid transparent;
-		border-right: 4px solid transparent;
-	}
-
-	:global(.tracking-arrow-officer) {
-		border-bottom: 8px solid #38bdf8;
-	}
-
-	:global(.tracking-arrow-vehicle) {
-		border-bottom: 8px solid #f97316;
-	}
-
-	:global(.tracking-arrow-bodycam) {
-		border-bottom: 8px solid #a855f7;
-	}
-
-</style>
+    :global(.leaflet-popup-content-wrapper) {
+        background: var(--dark-bg);
+        color: rgba(255, 255, 255, 0.8);
+        border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        box-shadow: none;
+    }
+    :global(.leaflet-popup-tip) {
+        background: var(--dark-bg);
+    }
+    :global(.leaflet-tooltip) {
+        background: var(--dark-bg);
+        color: rgba(255, 255, 255, 0.8);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 6px;
+        font-size: 11px;
+        padding: 4px 8px;
+        box-shadow: none;
+    }
+    :global(.leaflet-tooltip-top::before) {
+        border-top-color: #111111;
+    }
+    :global(.leaflet-control-zoom) {
+        border: 1px solid rgba(255, 255, 255, 0.06) !important;
+        border-radius: 8px !important;
+        overflow: hidden;
+        box-shadow: none !important;
+    }
+    :global(.leaflet-control-zoom a) {
+        background: rgba(17, 17, 17, 0.92) !important;
+        color: rgba(255, 255, 255, 0.6) !important;
+        border-color: rgba(255, 255, 255, 0.04) !important;
+        width: 30px !important;
+        height: 30px !important;
+        line-height: 30px !important;
+        font-size: 14px !important;
+    }
+    :global(.leaflet-control-zoom a:hover) {
+        background: rgba(255, 255, 255, 0.08) !important;
+        color: rgba(255, 255, 255, 0.9) !important;
+    }
+
+    .map-page {
+        height: 100%;
+        padding: 10px 20px 20px;
+        background: var(--card-dark-bg);
+    }
+    .map-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.06);
+    }
+    .map-container {
+        width: 100%;
+        height: 100%;
+    }
+    .map-controls {
+        position: absolute;
+        z-index: 1001;
+        top: 12px;
+        left: 12px;
+        background: rgba(17, 17, 17, 0.92);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 10px;
+        padding: 12px 14px;
+        min-width: 160px;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 12px;
+    }
+    .controls-header {
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.5);
+        margin-bottom: 10px;
+    }
+    .controls-group {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+    .controls-label {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: rgba(255, 255, 255, 0.5);
+        margin-bottom: 2px;
+    }
+    .controls-divider {
+        height: 1px;
+        background: rgba(255, 255, 255, 0.04);
+        margin: 10px 0;
+    }
+    .control-toggle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.7);
+    }
+    .control-toggle input[type="checkbox"] {
+        width: 14px;
+        height: 14px;
+        accent-color: rgba(var(--accent-rgb), 0.7);
+        cursor: pointer;
+    }
+    .segment {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4px;
+    }
+    .segment button {
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: rgba(255, 255, 255, 0.04);
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 11px;
+        font-weight: 500;
+        padding: 5px 8px;
+        cursor: pointer;
+        transition: all 0.1s ease;
+    }
+    .segment button:hover {
+        background: rgba(255, 255, 255, 0.06);
+        color: rgba(255, 255, 255, 0.7);
+    }
+    .segment button.active {
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.12);
+        color: rgba(255, 255, 255, 0.9);
+    }
+    .legend {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.45);
+    }
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    .legend-item::before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        display: inline-block;
+        flex-shrink: 0;
+    }
+    .legend-item.vehicle::before { background: #f97316; }
+    .legend-item.bodycam::before { background: #a855f7; }
+
+    :global(.tracking-icon) {
+        width: 22px;
+        height: 22px;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        font-weight: 700;
+        color: #0c0c0c;
+    }
+    :global(.tracking-vehicle) { background: #f97316; }
+    :global(.tracking-bodycam) { background: #a855f7; }
+
+    :global(.tracking-dot-wrap),
+    :global(.tracking-badge-wrap) {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+    }
+    :global(.tracking-dot) {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+    }
+    :global(.tracking-arrow) {
+        position: absolute;
+        top: -7px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+    }
+    :global(.tracking-arrow-vehicle) { border-bottom: 8px solid #f97316; }
+    :global(.tracking-arrow-bodycam) { border-bottom: 8px solid #a855f7; }
+</style>
\ No newline at end of file

From 412b4c63d20f6a796d14db4f1d0ffdc3f6f3944b Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:07:33 +0200
Subject: [PATCH 076/144] Update README.md

---
 README.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/README.md b/README.md
index bc6253a5..db8e315d 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,58 @@ ALTER TABLE `mdt_weapons` ADD COLUMN `flags` JSON DEFAULT NULL;
 
 ALTER TABLE player_vehicles 
 MODIFY COLUMN mdt_vehicle_status VARCHAR(500) DEFAULT 'valid';
+
+CREATE TABLE IF NOT EXISTS `mdt_bulletin_posts` (
+    `id`          INT UNSIGNED  NOT NULL AUTO_INCREMENT,
+    `title`       VARCHAR(255)  NOT NULL,
+    `content`     LONGTEXT      NOT NULL,
+    `author`      VARCHAR(100)  NOT NULL,
+    `author_rank` VARCHAR(100)  NOT NULL DEFAULT '',
+    `category`    ENUM(
+                    'announcement',
+                    'operations',
+                    'training',
+                    'general',
+                    'warrants'
+                  )             NOT NULL DEFAULT 'general',
+    `priority`    ENUM(
+                    'low',
+                    'normal',
+                    'high',
+                    'urgent'
+                  )             NOT NULL DEFAULT 'normal',
+    `pinned`      TINYINT(1)    NOT NULL DEFAULT 0,
+    `job`         VARCHAR(50)   NOT NULL DEFAULT '',
+    `created_by`  VARCHAR(60)   NOT NULL,
+    `created_at`  DATETIME      NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    `updated_at`  DATETIME      NULL     DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
+    `deleted_at`  DATETIME      NULL     DEFAULT NULL,
+    PRIMARY KEY (`id`),
+    KEY `idx_job`        (`job`),
+    KEY `idx_category`   (`category`),
+    KEY `idx_pinned`     (`pinned`),
+    KEY `idx_deleted_at` (`deleted_at`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+ 
+ CREATE TABLE IF NOT EXISTS `mdt_bulletin_settings` (
+    `key`        VARCHAR(64)  NOT NULL                              COMMENT 'Setting key, e.g., bulletin_categories',
+    `value`      LONGTEXT     NOT NULL                              COMMENT 'JSON-encoded value',
+    `updated_at` TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP
+                              ON UPDATE CURRENT_TIMESTAMP           COMMENT 'Last Change',
+    PRIMARY KEY (`key`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  COMMENT='MDT – Key-Value-Store for Bulletin-Einstellungen';
+ 
+INSERT IGNORE INTO `mdt_bulletin_settings` (`key`, `value`)
+VALUES (
+    'bulletin_categories',
+    '[
+        {"value":"announcement","label":"Announcements","icon":"campaign"},
+        {"value":"operations",  "label":"Operations",   "icon":"local_police"},
+        {"value":"training",    "label":"Training",     "icon":"school"},
+        {"value":"general",     "label":"General",      "icon":"forum"}
+    ]'
+);
 ```
 
 # ps-mdt v3

From d1d34ad3a16f7cbccc9d5bb5a3591c6763ebd568 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:07:55 +0200
Subject: [PATCH 077/144] Update README.md

---
 README.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/README.md b/README.md
index db8e315d..41113f44 100644
--- a/README.md
+++ b/README.md
@@ -33,12 +33,10 @@ CREATE TABLE IF NOT EXISTS `mdt_bulletin_posts` (
     `created_by`  VARCHAR(60)   NOT NULL,
     `created_at`  DATETIME      NOT NULL DEFAULT CURRENT_TIMESTAMP,
     `updated_at`  DATETIME      NULL     DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
-    `deleted_at`  DATETIME      NULL     DEFAULT NULL,
     PRIMARY KEY (`id`),
     KEY `idx_job`        (`job`),
     KEY `idx_category`   (`category`),
     KEY `idx_pinned`     (`pinned`),
-    KEY `idx_deleted_at` (`deleted_at`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  
  CREATE TABLE IF NOT EXISTS `mdt_bulletin_settings` (

From 1f859c25deeaf78bdec8ec50a9b78e75689b9595 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:09:16 +0200
Subject: [PATCH 078/144] added new BulletinBoard svelte and changes to SOP

added new BulletinBoard svelte and changes to SOP
---
 web/src/pages/BulletInBoard.svelte | 1106 ++++++++++++++++++++++++++++
 1 file changed, 1106 insertions(+)
 create mode 100644 web/src/pages/BulletInBoard.svelte

diff --git a/web/src/pages/BulletInBoard.svelte b/web/src/pages/BulletInBoard.svelte
new file mode 100644
index 00000000..2f01ec71
--- /dev/null
+++ b/web/src/pages/BulletInBoard.svelte
@@ -0,0 +1,1106 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { fetchNui } from "../utils/fetchNui";
+    import { NUI_EVENTS } from "../constants/nuiEvents";
+    import type { AuthService } from "../services/authService.svelte";
+
+    // ── Types ──────────────────────────────────────────────────
+
+    interface BulletinPost {
+        id: number;
+        title: string;
+        content: string;
+        author: string;
+        author_rank: string;
+        category: BulletinCategory;
+        priority: BulletinPriority;
+        pinned: boolean;
+        created_by: string;
+        created_at: string;
+        updated_at?: string;
+    }
+
+    interface SidebarCategory {
+        value: string;
+        label: string;
+        icon: string;
+    }
+
+    type BulletinCategory = 'announcement' | 'operations' | 'training' | 'general';
+    type BulletinPriority = 'low' | 'normal' | 'high' | 'urgent';
+
+    interface ModalState {
+        open: boolean;
+        mode: 'create' | 'edit';
+        post: Partial<BulletinPost>;
+    }
+
+    let { authService }: { authService?: AuthService } = $props();
+
+    // ── Constants ──────────────────────────────────────────────
+
+    const STATIC_ALL_CATEGORY: SidebarCategory = { label: 'All Posts', icon: 'dashboard', value: 'all' };
+
+    const DEFAULT_DYNAMIC_CATEGORIES: SidebarCategory[] = [
+        { label: 'Announcements', icon: 'campaign',     value: 'announcement' },
+        { label: 'Operations',    icon: 'local_police', value: 'operations'   },
+        { label: 'Training',      icon: 'school',       value: 'training'     },
+        { label: 'General',       icon: 'forum',        value: 'general'      },
+    ];
+
+    const PRIORITY_META: Record<BulletinPriority, { label: string; icon: string; color: string }> = {
+        low:    { label: 'Low',    icon: 'arrow_downward', color: 'rgba(100,200,100,0.80)' },
+        normal: { label: 'Normal', icon: 'remove',         color: 'rgba(160,160,210,0.80)' },
+        high:   { label: 'High',   icon: 'arrow_upward',   color: 'rgba(240,180,40,0.90)'  },
+        urgent: { label: 'Urgent', icon: 'priority_high',  color: 'rgba(220,70,60,0.95)'   },
+    };
+
+    // ── State ──────────────────────────────────────────────────
+
+    let posts           = $state<BulletinPost[]>([]);
+    let loading         = $state(true);
+    let saving          = $state(false);
+    let searchQuery     = $state('');
+    let activeCategory  = $state('all');
+    let expandedId      = $state<number | null>(null);
+
+    let dynamicCategories = $state<SidebarCategory[]>(DEFAULT_DYNAMIC_CATEGORIES);
+
+    let modal = $state<ModalState>({
+        open: false,
+        mode: 'create',
+        post: defaultPost(),
+    });
+
+    let deleteConfirm = $state<{ open: boolean; postId: number | null }>({
+        open: false,
+        postId: null,
+    });
+
+    // ── Derived ────────────────────────────────────────────────
+
+    let sidebarCategories = $derived([STATIC_ALL_CATEGORY, ...dynamicCategories]);
+
+    let categoryLabels = $derived(
+        Object.fromEntries(dynamicCategories.map(c => [c.value, c.label]))
+    );
+
+    let pinnedPosts = $derived(
+        posts.filter(p =>
+            p.pinned &&
+            (activeCategory === 'all' || p.category === activeCategory) &&
+            matchesSearch(p)
+        )
+    );
+
+    let regularPosts = $derived(() => {
+        const base = posts.filter(p =>
+            !p.pinned &&
+            (activeCategory === 'all' || p.category === activeCategory) &&
+            matchesSearch(p)
+        );
+        const order: Record<BulletinPriority, number> = { urgent: 0, high: 1, normal: 2, low: 3 };
+        return base.sort((a, b) => {
+            const pd = order[a.priority] - order[b.priority];
+            return pd !== 0 ? pd : new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        });
+    });
+
+    let postCountFor = $derived((cat: string) =>
+        cat === 'all'
+            ? posts.length
+            : posts.filter(p => p.category === cat).length
+    );
+
+    // ── Helpers ────────────────────────────────────────────────
+
+    function defaultPost(): Partial<BulletinPost> {
+        return { title: '', content: '', category: 'general', priority: 'normal', pinned: false };
+    }
+
+    function matchesSearch(p: BulletinPost): boolean {
+        const q = searchQuery.toLowerCase().trim();
+        if (!q) return true;
+        return (
+            p.title.toLowerCase().includes(q) ||
+            p.content.toLowerCase().includes(q) ||
+            p.author.toLowerCase().includes(q)
+        );
+    }
+
+    function formatDate(dateStr: string): string {
+        try {
+            const d = new Date(dateStr);
+            return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) +
+                   ' · ' +
+                   d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+        } catch { return dateStr; }
+    }
+
+    function canEdit(post: BulletinPost): boolean {
+        return authService?.hasPermission?.('bulletin_post') || false;
+    }
+
+    function canPost(): boolean {
+        return authService?.hasPermission?.('bulletin_post') || false;
+    }
+
+    function canPin(): boolean {
+        return authService?.hasPermission?.('bulletin_pin') || false;
+    }
+
+    // ── Data loading ───────────────────────────────────────────
+
+    onMount(async () => {
+        await Promise.all([loadPosts(), loadCategories()]);
+    });
+
+    async function loadCategories() {
+        try {
+            const result = await fetchNui<SidebarCategory[]>(NUI_EVENTS.BULLETIN.GET_CATEGORIES, {}, []);
+            if (Array.isArray(result) && result.length > 0) {
+                dynamicCategories = result;
+            }
+        } catch {
+            // keep defaults
+        }
+    }
+
+    async function loadPosts() {
+        loading = true;
+        try {
+            const result = await fetchNui<BulletinPost[]>(NUI_EVENTS.BULLETIN.GET_POSTS, {}, []);
+            posts = result || [];
+        } catch {
+            posts = [];
+        } finally {
+            loading = false;
+        }
+    }
+
+    // ── CRUD actions ───────────────────────────────────────────
+
+    function openCreate() {
+        modal = { open: true, mode: 'create', post: defaultPost() };
+    }
+
+    function openEdit(post: BulletinPost) {
+        modal = { open: true, mode: 'edit', post: { ...post } };
+    }
+
+    function closeModal() {
+        modal = { open: false, mode: 'create', post: defaultPost() };
+    }
+
+    async function savePost() {
+        if (!modal.post.title?.trim() || !modal.post.content?.trim()) return;
+        saving = true;
+        try {
+            if (modal.mode === 'create') {
+                const res = await fetchNui<{ success: boolean; id?: number }>(
+                    NUI_EVENTS.BULLETIN.CREATE_POST, modal.post, { success: false }
+                );
+                if (res?.success) { await loadPosts(); closeModal(); }
+            } else {
+                const res = await fetchNui<{ success: boolean }>(
+                    NUI_EVENTS.BULLETIN.UPDATE_POST, modal.post, { success: false }
+                );
+                if (res?.success) { await loadPosts(); closeModal(); }
+            }
+        } finally {
+            saving = false;
+        }
+    }
+
+    function askDelete(postId: number) {
+        deleteConfirm = { open: true, postId };
+    }
+
+    async function confirmDelete() {
+        if (!deleteConfirm.postId) return;
+        saving = true;
+        try {
+            await fetchNui(NUI_EVENTS.BULLETIN.DELETE_POST, { id: deleteConfirm.postId }, {});
+            await loadPosts();
+            deleteConfirm = { open: false, postId: null };
+        } finally {
+            saving = false;
+        }
+    }
+
+    async function togglePin(post: BulletinPost) {
+        await fetchNui(NUI_EVENTS.BULLETIN.TOGGLE_PIN, { id: post.id }, {});
+        await loadPosts();
+    }
+</script>
+
+<!-- ════════════════════════════════════════════════════════════
+     Layout
+═════════════════════════════════════════════════════════════ -->
+<div class="bulletin-page">
+
+    <!-- ── Sidebar ── -->
+    <div class="bulletin-sidebar">
+        <div class="sidebar-header">
+            <span class="material-icons header-icon">campaign</span>
+            <h2>Bulletin Board</h2>
+        </div>
+
+        <div class="search-box">
+            <span class="material-icons search-icon">search</span>
+            <input type="text" placeholder="Search posts..." bind:value={searchQuery} />
+        </div>
+
+        <div class="category-list">
+            {#each sidebarCategories as cat}
+                <button
+                    class="category-item"
+                    class:active={activeCategory === cat.value}
+                    onclick={() => activeCategory = cat.value}
+                >
+                    <span class="material-icons cat-icon">{cat.icon}</span>
+                    <div class="cat-info">
+                        <span class="cat-title">{cat.label}</span>
+                        <span class="cat-count">
+                            {postCountFor(cat.value)} post{postCountFor(cat.value) !== 1 ? 's' : ''}
+                        </span>
+                    </div>
+                </button>
+            {/each}
+        </div>
+
+        <div class="sidebar-footer">
+            {#if canPost()}
+                <button class="create-btn" onclick={openCreate}>
+                    <span class="material-icons">add</span>
+                    New Post
+                </button>
+            {/if}
+        </div>
+    </div>
+
+    <!-- ── Main Content ── -->
+    <div class="bulletin-content">
+        {#if loading}
+            <div class="content-empty">
+                <div class="spinner"></div>
+                <span>Loading bulletin board...</span>
+            </div>
+
+        {:else if posts.length === 0}
+            <div class="content-empty">
+                <span class="material-icons empty-icon">campaign</span>
+                <h3>No Posts Yet</h3>
+                <p>Be the first to post on the bulletin board.</p>
+            </div>
+
+        {:else}
+
+            <!-- Pinned Posts -->
+            {#if pinnedPosts.length > 0}
+                <div class="section-label">
+                    <span class="material-icons label-icon">push_pin</span>
+                    <span>Pinned</span>
+                </div>
+                <div class="posts-list">
+                    {#each pinnedPosts as post (post.id)}
+                        <div class="post-card pinned" class:expanded={expandedId === post.id}>
+                            <button class="post-header" onclick={() => expandedId = expandedId === post.id ? null : post.id}>
+                                <div class="post-header-left">
+                                    <span
+                                        class="priority-badge"
+                                        style="color:{PRIORITY_META[post.priority].color};border-color:{PRIORITY_META[post.priority].color};"
+                                    >
+                                        <span class="material-icons prio-icon">{PRIORITY_META[post.priority].icon}</span>
+                                        {PRIORITY_META[post.priority].label}
+                                    </span>
+                                    <h3 class="post-title">{post.title}</h3>
+                                </div>
+                                <div class="post-header-right">
+                                    <span class="material-icons pin-icon">push_pin</span>
+                                    <span class="material-icons expand-icon">{expandedId === post.id ? 'expand_less' : 'expand_more'}</span>
+                                </div>
+                            </button>
+
+                            <div class="post-meta">
+                                <span class="material-icons meta-icon">person</span>
+                                <span class="meta-author">{post.author}</span>
+                                {#if post.author_rank}
+                                    <span class="meta-rank">{post.author_rank}</span>
+                                {/if}
+                                <span class="meta-sep">·</span>
+                                <span class="material-icons meta-icon">label</span>
+                                <span class="meta-cat">{categoryLabels[post.category] ?? post.category}</span>
+                                <span class="meta-sep">·</span>
+                                <span class="material-icons meta-icon">schedule</span>
+                                <span class="meta-date">{formatDate(post.created_at)}</span>
+                            </div>
+
+                            {#if expandedId === post.id}
+                                <div class="post-body prose">
+                                    {@html post.content}
+                                </div>
+                                <div class="post-actions">
+                                    {#if canPin()}
+                                        <button class="action-btn pin" onclick={() => togglePin(post)}>
+                                            <span class="material-icons">push_pin</span>
+                                            Unpin
+                                        </button>
+                                    {/if}
+                                    {#if canEdit(post)}
+                                        <button class="action-btn edit" onclick={() => openEdit(post)}>
+                                            <span class="material-icons">edit</span>
+                                            Edit
+                                        </button>
+                                    {/if}
+                                    <button class="action-btn delete" onclick={() => askDelete(post.id)}>
+                                        <span class="material-icons">delete</span>
+                                        Delete
+                                    </button>
+                                </div>
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+
+            <!-- Regular Posts -->
+            {#if regularPosts().length > 0}
+                <div class="section-label" style="margin-top: {pinnedPosts.length > 0 ? '16px' : '0'};">
+                    <span class="material-icons label-icon">article</span>
+                    <span>Posts</span>
+                </div>
+                <div class="posts-list">
+                    {#each regularPosts() as post (post.id)}
+                        <div class="post-card" class:expanded={expandedId === post.id}>
+                            <button class="post-header" onclick={() => expandedId = expandedId === post.id ? null : post.id}>
+                                <div class="post-header-left">
+                                    <span
+                                        class="priority-badge"
+                                        style="color:{PRIORITY_META[post.priority].color};border-color:{PRIORITY_META[post.priority].color};"
+                                    >
+                                        <span class="material-icons prio-icon">{PRIORITY_META[post.priority].icon}</span>
+                                        {PRIORITY_META[post.priority].label}
+                                    </span>
+                                    <h3 class="post-title">{post.title}</h3>
+                                </div>
+                                <span class="material-icons expand-icon">{expandedId === post.id ? 'expand_less' : 'expand_more'}</span>
+                            </button>
+
+                            <div class="post-meta">
+                                <span class="material-icons meta-icon">person</span>
+                                <span class="meta-author">{post.author}</span>
+                                {#if post.author_rank}
+                                    <span class="meta-rank">{post.author_rank}</span>
+                                {/if}
+                                <span class="meta-sep">·</span>
+                                <span class="material-icons meta-icon">label</span>
+                                <span class="meta-cat">{categoryLabels[post.category] ?? post.category}</span>
+                                <span class="meta-sep">·</span>
+                                <span class="material-icons meta-icon">schedule</span>
+                                <span class="meta-date">{formatDate(post.created_at)}</span>
+                            </div>
+
+                            {#if expandedId === post.id}
+                                <div class="post-body prose">
+                                    {@html post.content}
+                                </div>
+                                <div class="post-actions">
+                                    {#if canPin()}
+                                        <button class="action-btn pin" onclick={() => togglePin(post)}>
+                                            <span class="material-icons">push_pin</span>
+                                            Pin
+                                        </button>
+                                    {/if}
+                                    {#if canEdit(post)}
+                                        <button class="action-btn edit" onclick={() => openEdit(post)}>
+                                            <span class="material-icons">edit</span>
+                                            Edit
+                                        </button>
+                                    {/if}
+                                    <button class="action-btn delete" onclick={() => askDelete(post.id)}>
+                                        <span class="material-icons">delete</span>
+                                        Delete
+                                    </button>
+                                </div>
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            {:else if pinnedPosts.length === 0}
+                <div class="content-empty">
+                    <span class="material-icons empty-icon">search_off</span>
+                    <h3>No posts found</h3>
+                    <p>Try adjusting your search or category filter.</p>
+                </div>
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<!-- ════════════════════════════════════════════════════════════
+     Create / Edit Modal  (Weapons-style)
+═════════════════════════════════════════════════════════════ -->
+{#if modal.open}
+    <div class="modal-backdrop" onclick={closeModal}>
+        <div class="modal" onclick={(e) => e.stopPropagation()}>
+            <div class="modal-header">
+                <span class="material-icons modal-header-icon">
+                    {modal.mode === 'create' ? 'add_circle' : 'edit'}
+                </span>
+                <h3>{modal.mode === 'create' ? 'New Bulletin Post' : 'Edit Post'}</h3>
+                <button class="close-btn" onclick={closeModal} aria-label="Close">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="modal-body">
+                <div class="form-group form-full">
+                    <span class="field-label">Title <span class="required">*</span></span>
+                    <input
+                        class="form-input"
+                        type="text"
+                        placeholder="Post title..."
+                        bind:value={modal.post.title}
+                        maxlength="255"
+                    />
+                </div>
+
+                <div class="form-group">
+                    <span class="field-label">Category</span>
+                    <select class="form-input form-select" bind:value={modal.post.category}>
+                        {#each dynamicCategories as cat}
+                            <option value={cat.value}>{cat.label}</option>
+                        {/each}
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <span class="field-label">Priority</span>
+                    <select class="form-input form-select" bind:value={modal.post.priority}>
+                        <option value="low">Low</option>
+                        <option value="normal">Normal</option>
+                        <option value="high">High</option>
+                        <option value="urgent">Urgent</option>
+                    </select>
+                </div>
+
+                <div class="form-group form-full">
+                    <span class="field-label">Content <span class="required">*</span></span>
+                    <textarea
+                        class="form-input"
+                        placeholder="Write your post content here... (HTML supported)"
+                        bind:value={modal.post.content}
+                        rows="8"
+                    ></textarea>
+                    <span class="field-hint">Basic HTML tags are supported: &lt;b&gt;, &lt;ul&gt;, &lt;li&gt;, &lt;p&gt;, etc.</span>
+                </div>
+
+                {#if canPin()}
+                    <div class="form-group form-full field-check">
+                        <input type="checkbox" id="chk-pinned" bind:checked={modal.post.pinned} />
+                        <label for="chk-pinned">
+                            <span class="material-icons">push_pin</span>
+                            Pin this post to the top
+                        </label>
+                    </div>
+                {/if}
+            </div>
+
+            <div class="modal-footer">
+                <button class="cancel-btn" onclick={closeModal} disabled={saving}>Cancel</button>
+                <button
+                    class="primary-btn"
+                    onclick={savePost}
+                    disabled={saving || !modal.post.title?.trim() || !modal.post.content?.trim()}
+                >
+                    {#if saving}
+                        <div class="spinner-sm"></div>
+                    {:else}
+                        <span class="material-icons" style="font-size: 13px;">save</span>
+                    {/if}
+                    {modal.mode === 'create' ? 'Post' : 'Save Changes'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<!-- ════════════════════════════════════════════════════════════
+     Delete Confirm Modal  (Weapons-style)
+═════════════════════════════════════════════════════════════ -->
+{#if deleteConfirm.open}
+    <div class="modal-backdrop" onclick={() => deleteConfirm = { open: false, postId: null }}>
+        <div class="modal modal-sm" onclick={(e) => e.stopPropagation()}>
+            <div class="modal-header">
+                <span class="material-icons modal-header-icon" style="color: rgba(220,70,60,0.85);">warning</span>
+                <h3>Delete Post</h3>
+                <button class="close-btn" onclick={() => deleteConfirm = { open: false, postId: null }} aria-label="Close">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p class="confirm-text">Are you sure you want to delete this post? This action cannot be undone.</p>
+            </div>
+            <div class="modal-footer">
+                <button class="cancel-btn" onclick={() => deleteConfirm = { open: false, postId: null }} disabled={saving}>Cancel</button>
+                <button class="delete-btn" onclick={confirmDelete} disabled={saving}>
+                    {#if saving}<div class="spinner-sm"></div>{:else}<span class="material-icons" style="font-size: 13px;">delete</span>{/if}
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    /* ── Layout ──────────────────────────────────────────────── */
+    .bulletin-page {
+        display: flex;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    /* ── Sidebar ─────────────────────────────────────────────── */
+    .bulletin-sidebar {
+        width: 280px;
+        min-width: 280px;
+        border-right: 1px solid rgba(255, 255, 255, 0.06);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .sidebar-header {
+        padding: 20px 20px 16px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+        flex-shrink: 0;
+    }
+
+    .header-icon { font-size: 22px; color: var(--accent-70); }
+
+    .sidebar-header h2 {
+        font-size: 14px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 0;
+    }
+
+    .search-box {
+        padding: 12px 16px;
+        position: relative;
+        flex-shrink: 0;
+    }
+
+    .search-icon {
+        position: absolute;
+        left: 26px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.3);
+    }
+
+    .search-box input {
+        width: 100%;
+        padding: 8px 12px 8px 34px;
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 6px;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 12px;
+        outline: none;
+        transition: border-color 0.15s;
+    }
+
+    .search-box input:focus { border-color: var(--accent-35); }
+    .search-box input::placeholder { color: rgba(255, 255, 255, 0.3); }
+
+    .category-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 4px 8px;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+    }
+
+    .category-item {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        border: 1px solid transparent;
+        background: transparent;
+        border-radius: 6px;
+        cursor: pointer;
+        text-align: left;
+        transition: all 0.15s;
+        margin-bottom: 2px;
+        outline: none;
+    }
+
+    .category-item:hover:not(.active) { background: rgba(255, 255, 255, 0.04); }
+    .category-item.active { background: var(--accent-10); border-color: var(--accent-15); }
+
+    .cat-icon { font-size: 18px; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
+    .category-item.active .cat-icon { color: var(--accent-70); }
+
+    .cat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+
+    .cat-title {
+        font-size: 12px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.8);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .cat-count { font-size: 10px; color: rgba(255, 255, 255, 0.35); }
+
+    .sidebar-footer {
+        padding: 12px 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        flex-shrink: 0;
+    }
+
+    .create-btn {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 9px 14px;
+        background: var(--accent-15);
+        border: 1px solid var(--accent-30);
+        border-radius: 6px;
+        color: var(--accent-80, rgba(100,160,255,0.9));
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.15s;
+        outline: none;
+    }
+
+    .create-btn:hover { background: var(--accent-20); border-color: var(--accent-45); }
+    .create-btn .material-icons { font-size: 16px; }
+
+    /* ── Main Content ────────────────────────────────────────── */
+    .bulletin-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 24px 32px;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+    }
+
+    .content-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        gap: 8px;
+        color: rgba(255, 255, 255, 0.4);
+        text-align: center;
+    }
+
+    .empty-icon { font-size: 48px; color: rgba(255, 255, 255, 0.15); margin-bottom: 8px; }
+    .content-empty h3 { font-size: 16px; color: rgba(255, 255, 255, 0.6); margin: 0; }
+    .content-empty p  { font-size: 13px; color: rgba(255, 255, 255, 0.35); margin: 0; }
+
+    .section-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 10px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.8px;
+        color: rgba(255, 255, 255, 0.3);
+        margin-bottom: 10px;
+    }
+
+    .label-icon { font-size: 13px; color: rgba(255, 255, 255, 0.25); }
+
+    .posts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
+
+    .post-card {
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 10px;
+        overflow: hidden;
+        transition: border-color 0.15s;
+    }
+
+    .post-card:hover { border-color: rgba(255, 255, 255, 0.10); }
+
+    .post-card.pinned {
+        background: linear-gradient(135deg,
+            rgba(var(--accent-rgb, 59,130,246), 0.05),
+            rgba(var(--accent-rgb, 59,130,246), 0.01)
+        );
+        border-color: rgba(var(--accent-rgb, 59,130,246), 0.14);
+    }
+
+    .post-card.expanded { border-color: rgba(255, 255, 255, 0.12); }
+
+    .post-header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 12px 16px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        text-align: left;
+        outline: none;
+    }
+
+    .post-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
+    .post-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+
+    .priority-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        padding: 2px 7px 2px 5px;
+        border: 1px solid;
+        border-radius: 4px;
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.4px;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
+    .prio-icon { font-size: 11px; }
+
+    .post-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.88);
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .pin-icon    { font-size: 14px; color: var(--accent-50, rgba(59,130,246,0.5)); }
+    .expand-icon { font-size: 18px; color: rgba(255, 255, 255, 0.25); flex-shrink: 0; }
+
+    .post-meta {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        padding: 0 16px 10px;
+        flex-wrap: wrap;
+    }
+
+    .meta-icon   { font-size: 12px; color: rgba(255, 255, 255, 0.25); }
+    .meta-author { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
+    .meta-rank   {
+        font-size: 10px;
+        color: rgba(255, 255, 255, 0.3);
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.07);
+        border-radius: 3px;
+        padding: 1px 5px;
+    }
+    .meta-cat  { font-size: 11px; color: rgba(255, 255, 255, 0.35); }
+    .meta-sep  { color: rgba(255, 255, 255, 0.18); font-size: 11px; }
+    .meta-date { font-size: 11px; color: rgba(255, 255, 255, 0.30); }
+
+    .post-body {
+        padding: 14px 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.04);
+        color: rgba(255, 255, 255, 0.72);
+        font-size: 12.5px;
+        line-height: 1.7;
+    }
+
+    .post-body :global(h1),
+    .post-body :global(h2),
+    .post-body :global(h3) { color: rgba(255, 255, 255, 0.9); margin: 12px 0 6px; }
+    .post-body :global(h1) { font-size: 15px; }
+    .post-body :global(h2) { font-size: 14px; }
+    .post-body :global(h3) { font-size: 13px; }
+    .post-body :global(p)  { margin: 5px 0; }
+    .post-body :global(ul),
+    .post-body :global(ol) { padding-left: 20px; margin: 5px 0; }
+    .post-body :global(li) { margin: 3px 0; }
+    .post-body :global(strong) { color: rgba(255, 255, 255, 0.95); }
+
+    .post-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 16px 12px;
+        border-top: 1px solid rgba(255, 255, 255, 0.04);
+    }
+
+    .action-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 5px 10px;
+        border-radius: 5px;
+        font-size: 11px;
+        font-weight: 500;
+        cursor: pointer;
+        border: 1px solid;
+        transition: all 0.15s;
+        outline: none;
+    }
+
+    .action-btn .material-icons { font-size: 13px; }
+
+    .action-btn.pin {
+        color: var(--accent-70);
+        background: var(--accent-08, rgba(59,130,246,0.08));
+        border-color: var(--accent-20);
+    }
+    .action-btn.pin:hover { background: var(--accent-15); }
+
+    .action-btn.edit {
+        color: rgba(255, 255, 255, 0.65);
+        background: rgba(255, 255, 255, 0.04);
+        border-color: rgba(255, 255, 255, 0.08);
+    }
+    .action-btn.edit:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.07); }
+
+    .action-btn.delete {
+        color: rgba(220, 70, 60, 0.85);
+        background: rgba(220, 70, 60, 0.06);
+        border-color: rgba(220, 70, 60, 0.18);
+        margin-left: auto;
+    }
+    .action-btn.delete:hover { background: rgba(220, 70, 60, 0.12); }
+
+    /* ════════════════════════════════════════════════════════
+       Modals — Weapons.svelte style
+    ════════════════════════════════════════════════════════ */
+    .modal-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(4px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+    }
+
+    .modal {
+        background: var(--card-dark-bg, #1a1c22);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 6px;
+        width: min(540px, 92vw);
+        max-height: 85vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    }
+
+    .modal-sm { width: min(380px, 92vw); }
+
+    .modal-header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 16px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+        flex-shrink: 0;
+    }
+
+    .modal-header-icon { font-size: 16px; color: var(--accent-70); }
+
+    .modal-header h3 {
+        font-size: 12px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.85);
+        margin: 0;
+        flex: 1;
+    }
+
+    .close-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        color: rgba(255, 255, 255, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        padding: 4px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: all 0.1s;
+        outline: none;
+    }
+    .close-btn:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+
+    .modal-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 14px 16px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        align-content: start;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+    }
+
+    .form-group { display: flex; flex-direction: column; gap: 4px; }
+    .form-full  { grid-column: 1 / -1; }
+
+    .field-label {
+        font-size: 9px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.35);
+        text-transform: uppercase;
+        letter-spacing: 0.6px;
+    }
+
+    .required { color: rgba(220, 70, 60, 0.85); }
+
+    .form-input {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 3px;
+        padding: 5px 8px;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 11px;
+        font-family: inherit;
+        outline: none;
+        transition: border-color 0.1s;
+    }
+
+    .form-input:focus { border-color: rgba(255, 255, 255, 0.12); }
+    .form-input::placeholder { color: rgba(255, 255, 255, 0.2); }
+
+    .form-select { padding-right: 22px; cursor: pointer; }
+    .form-select option { background: #1a1c22; }
+
+    textarea.form-input { resize: vertical; min-height: 120px; line-height: 1.6; }
+
+    .field-hint { font-size: 10px; color: rgba(255, 255, 255, 0.25); }
+
+    .field-check {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .field-check input[type="checkbox"] { accent-color: var(--accent-60); width: 14px; height: 14px; cursor: pointer; }
+
+    .field-check label {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.6);
+        cursor: pointer;
+    }
+
+    .field-check label .material-icons { font-size: 14px; color: var(--accent-60); }
+
+    .confirm-text { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.6; grid-column: 1 / -1; }
+
+    .modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 6px;
+        padding: 10px 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        flex-shrink: 0;
+    }
+
+    .cancel-btn {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 3px;
+        padding: 4px 12px;
+        color: rgba(255, 255, 255, 0.4);
+        font-size: 10px;
+        font-weight: 500;
+        cursor: pointer;
+        outline: none;
+        transition: all 0.1s;
+    }
+    .cancel-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+    .cancel-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+    .primary-btn {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        background: rgba(16, 185, 129, 0.06);
+        border: 1px solid rgba(16, 185, 129, 0.1);
+        border-radius: 3px;
+        padding: 4px 12px;
+        color: rgba(52, 211, 153, 0.7);
+        font-size: 10px;
+        font-weight: 600;
+        cursor: pointer;
+        outline: none;
+        transition: all 0.1s;
+    }
+    .primary-btn:hover:not(:disabled) { background: rgba(16, 185, 129, 0.12); color: rgba(110, 231, 183, 0.9); }
+    .primary-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+    .delete-btn {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        background: rgba(220, 70, 60, 0.06);
+        border: 1px solid rgba(220, 70, 60, 0.18);
+        border-radius: 3px;
+        padding: 4px 12px;
+        color: rgba(220, 70, 60, 0.85);
+        font-size: 10px;
+        font-weight: 600;
+        cursor: pointer;
+        outline: none;
+        transition: all 0.1s;
+    }
+    .delete-btn:hover:not(:disabled) { background: rgba(220, 70, 60, 0.12); }
+    .delete-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+    /* ── Spinner ─────────────────────────────────────────────── */
+    .spinner {
+        width: 24px;
+        height: 24px;
+        border: 2px solid rgba(255, 255, 255, 0.06);
+        border-left-color: var(--accent-60);
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+        margin-bottom: 8px;
+    }
+
+    .spinner-sm {
+        width: 11px;
+        height: 11px;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-left-color: currentColor;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+        0%   { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
\ No newline at end of file

From 267793c69032d4521fef29f747e55ce603122bb3 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:09:57 +0200
Subject: [PATCH 079/144] Update config.lua

---
 config.lua | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/config.lua b/config.lua
index 1850829e..31fe01c1 100644
--- a/config.lua
+++ b/config.lua
@@ -257,6 +257,10 @@ Config.ManagementPermissions = {
     -- FTO
     'fto_view',
     'fto_manage',
+    -- BulletIn Board
+    'bulletin_view',
+    'bulletin_post',
+    'bulletin_pin',
     -- Management
     'management_permissions',
     'management_bulletins',
@@ -343,4 +347,4 @@ Config.Weapons = {
     { model = "weapon_doubleaction", label = "Double-Action Revolver" },
     { model = "weapon_navyrevolver", label = "Navy Revolver" },
     { model = "weapon_musket", label = "Musket" },
-}
\ No newline at end of file
+}

From 68ae8337aa2ed7aabc96d0e3914ef3315912a891 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:10:24 +0200
Subject: [PATCH 080/144] added new bulletinboard

added new bulletinboard
---
 server/backend/bulletinboard.lua | 218 +++++++++++++++++++++++++++++++
 1 file changed, 218 insertions(+)
 create mode 100644 server/backend/bulletinboard.lua

diff --git a/server/backend/bulletinboard.lua b/server/backend/bulletinboard.lua
new file mode 100644
index 00000000..13f26998
--- /dev/null
+++ b/server/backend/bulletinboard.lua
@@ -0,0 +1,218 @@
+local resourceName = tostring(GetCurrentResourceName())
+
+-- ── Get all bulletin posts for the officer's department ──────
+
+ps.registerCallback(resourceName .. ':server:getBulletinPosts', function(source)
+    local src = source
+    if not CheckAuth(src) then return {} end
+
+    local jobName = ps.getJobName(src)
+    if not jobName or jobName == '' then return {} end
+
+    local ok, posts = pcall(MySQL.query.await, [[
+        SELECT
+            id, title, content, author, author_rank,
+            category, priority, pinned, created_by,
+            created_at, updated_at
+        FROM mdt_bulletin_posts
+        WHERE job = ?
+        ORDER BY pinned DESC, FIELD(priority, 'urgent', 'high', 'normal', 'low'), created_at DESC
+    ]], { jobName })
+
+    if not ok or not posts then return {} end
+
+    -- Convert tinyint pinned → boolean for JSON
+    for _, post in ipairs(posts) do
+        post.pinned = post.pinned == 1 or post.pinned == "1" or post.pinned == true
+    end
+
+    return posts
+end)
+
+-- ── Create a bulletin post ────────────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:createBulletinPost', function(source, data)
+    local src = source
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+    if not CheckPermission(src, 'bulletin_post') then
+        return { success = false, error = 'No permission to create bulletin posts' }
+    end
+
+    data = data or {}
+
+    local VALID_CATEGORIES = { announcement = true, operations = true, training = true, general = true, warrants = true }
+    local VALID_PRIORITIES  = { low = true, normal = true, high = true, urgent = true }
+
+    local title = tostring(data.title or ''):gsub('^%s+', ''):gsub('%s+$', '')
+    if title == '' then return { success = false, error = 'Title is required' } end
+    if not VALID_CATEGORIES[data.category] then return { success = false, error = 'Invalid category' } end
+    if not VALID_PRIORITIES[data.priority]  then return { success = false, error = 'Invalid priority'  } end
+
+    local jobName   = ps.getJobName(src)
+    local jobRank   = ps.getJobGradeName(src)
+    local citizenId = ps.getIdentifier(src)
+
+    -- Resolve author name + rank from profile
+    local profile = MySQL.single.await('SELECT fullname FROM mdt_profiles WHERE citizenid = ?', { citizenId })
+    local author  = (profile and profile.fullname) or tostring(GetPlayerName(src) or 'Unknown')
+
+    -- Only supervisors may pin
+    local canPin = CheckPermission(src, 'bulletin_pin')
+    local pinned = (canPin and data.pinned == true) and 1 or 0
+
+    local id = MySQL.insert.await([[
+        INSERT INTO mdt_bulletin_posts
+            (title, content, author, author_rank, category, priority, pinned, job, created_by)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ]], {
+        title:sub(1, 255),
+        tostring(data.content or ''):sub(1, 65535),
+        author:sub(1, 100),
+        jobRank,
+        data.category,
+        data.priority,
+        pinned,
+        jobName,
+        citizenId
+    })
+
+    if not id then return { success = false, error = 'Database error' } end
+    return { success = true, id = id }
+end)
+
+-- ── Update a bulletin post ────────────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:updateBulletinPost', function(source, postId, updates)
+    local src = source
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+
+    postId  = tonumber(postId)
+    updates = updates or {}
+    if not postId then return { success = false, error = 'Invalid post id' } end
+
+    -- Fetch post to verify ownership / permission
+    local existing = MySQL.single.await(
+        'SELECT created_by, job FROM mdt_bulletin_posts WHERE id = ?',
+        { postId }
+    )
+    if not existing then return { success = false, error = 'Post not found' } end
+
+    local jobName   = ps.getJobName(src)
+    local citizenId = ps.getIdentifier(src)
+    local isSupervisor = CheckPermission(src, 'bulletin_post')
+    local isOwner      = existing.created_by == citizenId
+
+    -- Authors can edit their own posts; supervisors can edit any post in the same department
+    if not isOwner and not isSupervisor then
+        return { success = false, error = 'No permission to edit this post' }
+    end
+    if existing.job ~= jobName then
+        return { success = false, error = 'Post belongs to a different department' }
+    end
+
+    local VALID_CATEGORIES = { announcement = true, operations = true, training = true, general = true, warrants = true }
+    local VALID_PRIORITIES  = { low = true, normal = true, high = true, urgent = true }
+
+    local sets = {}
+    local vals = {}
+
+    if updates.title ~= nil then
+        local t = tostring(updates.title):gsub('^%s+', ''):gsub('%s+$', '')
+        if t ~= '' then
+            sets[#sets + 1] = 'title = ?'
+            vals[#vals + 1] = t:sub(1, 255)
+        end
+    end
+    if updates.content ~= nil then
+        sets[#sets + 1] = 'content = ?'
+        vals[#vals + 1] = tostring(updates.content):sub(1, 65535)
+    end
+    if updates.category ~= nil and VALID_CATEGORIES[updates.category] then
+        sets[#sets + 1] = 'category = ?'
+        vals[#vals + 1] = updates.category
+    end
+    if updates.priority ~= nil and VALID_PRIORITIES[updates.priority] then
+        sets[#sets + 1] = 'priority = ?'
+        vals[#vals + 1] = updates.priority
+    end
+    -- Only supervisors may change pin state
+    if updates.pinned ~= nil and isSupervisor then
+        sets[#sets + 1] = 'pinned = ?'
+        vals[#vals + 1] = updates.pinned and 1 or 0
+    end
+
+    if #sets == 0 then return { success = false, error = 'No valid fields to update' } end
+
+    vals[#vals + 1] = postId
+    MySQL.update.await('UPDATE mdt_bulletin_posts SET ' .. table.concat(sets, ', ') .. ' WHERE id = ?', vals)
+    return { success = true }
+end)
+
+-- ── Delete a bulletin post (soft delete) ─────────────────────
+
+ps.registerCallback(resourceName .. ':server:deleteBulletinPost', function(source, postId)
+    local src = source
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+
+    postId = tonumber(postId)
+    if not postId then return { success = false, error = 'Invalid post id' } end
+
+    local existing = MySQL.single.await(
+        'SELECT created_by, job FROM mdt_bulletin_posts WHERE id = ?',
+        { postId }
+    )
+    if not existing then return { success = false, error = 'Post not found' } end
+
+    local jobName      = ps.getJobName(src)
+    local citizenId    = ps.getIdentifier(src)
+    local isSupervisor = CheckPermission(src, 'bulletin_pin')
+    local isOwner      = existing.created_by == citizenId
+
+    if not isOwner and not isSupervisor then
+        return { success = false, error = 'No permission to delete this post' }
+    end
+    if existing.job ~= jobName then
+        return { success = false, error = 'Post belongs to a different department' }
+    end
+
+    MySQL.update.await('DELETE FROM mdt_bulletin_posts WHERE id = ?', { postId })
+    return { success = true }
+end)
+
+-- ── Toggle pin on a bulletin post ────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:toggleBulletinPin', function(source, postId)
+    local src = source
+    local newPinned = 0
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+    if not CheckPermission(src, 'bulletin_pin') then
+        return { success = false, error = 'No permission to pin posts' }
+    end
+
+    postId = tonumber(postId)
+    if not postId then return { success = false, error = 'Invalid post id' } end
+
+    local existing = MySQL.single.await(
+        'SELECT pinned, job FROM mdt_bulletin_posts WHERE id = ?',
+        { postId }
+    )
+    if not existing then return { success = false, error = 'Post not found' } end
+
+    local jobName = ps.getJobName(src)
+    if existing.job ~= jobName then
+        return { success = false, error = 'Post belongs to a different department' }
+    end
+
+    local isPinned = existing.pinned == 1 or existing.pinned == "1" or existing.pinned == true
+    
+    if not isPinned then
+        newPinned = 1
+    end
+    
+    MySQL.update.await(
+        'UPDATE mdt_bulletin_posts SET pinned = ? WHERE id = ?',
+        { newPinned, postId }
+    )
+
+    return { success = true, pinned = newPinned }
+end)
\ No newline at end of file

From 711f9c99120bc73641977d4b2872b3f407b7dc92 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:10:45 +0200
Subject: [PATCH 081/144] added new bulletinboard - client

added new bulletinboard
---
 client/backend/bulletinboard.lua | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 client/backend/bulletinboard.lua

diff --git a/client/backend/bulletinboard.lua b/client/backend/bulletinboard.lua
new file mode 100644
index 00000000..d6729213
--- /dev/null
+++ b/client/backend/bulletinboard.lua
@@ -0,0 +1,37 @@
+local resourceName = tostring(GetCurrentResourceName())
+
+-- Get all bulletin posts for the officer's department
+RegisterNUICallback('getBulletinPosts', function(data, cb)
+    local result = ps.callback(resourceName .. ':server:getBulletinPosts')
+    cb(result or {})
+end)
+
+-- Create a new bulletin post
+RegisterNUICallback('createBulletinPost', function(data, cb)
+    if not data then cb({ success = false }) return end
+    local result = ps.callback(resourceName .. ':server:createBulletinPost', data)
+    cb(result or { success = false })
+end)
+
+-- Update an existing bulletin post
+RegisterNUICallback('updateBulletinPost', function(data, cb)
+    if not data or not data.id then cb({ success = false }) return end
+    local postId = data.id
+    data.id = nil
+    local result = ps.callback(resourceName .. ':server:updateBulletinPost', postId, data)
+    cb(result or { success = false })
+end)
+
+-- Delete a bulletin post (soft delete)
+RegisterNUICallback('deleteBulletinPost', function(data, cb)
+    if not data or not data.id then cb({ success = false }) return end
+    local result = ps.callback(resourceName .. ':server:deleteBulletinPost', data.id)
+    cb(result or { success = false })
+end)
+
+-- Toggle pin on a bulletin post (supervisor only)
+RegisterNUICallback('toggleBulletinPin', function(data, cb)
+    if not data or not data.id then cb({ success = false }) return end
+    local result = ps.callback(resourceName .. ':server:toggleBulletinPin', data.id)
+    cb(result or { success = false })
+end)
\ No newline at end of file

From e9937f04c2ed59022dd728080cb86941746ffaea Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:11:23 +0200
Subject: [PATCH 082/144] changes to bulletin management

changes to bulletin management
---
 .../management/ManagementBulletins.svelte     | 489 +++++++++++++++---
 1 file changed, 411 insertions(+), 78 deletions(-)

diff --git a/web/src/components/management/ManagementBulletins.svelte b/web/src/components/management/ManagementBulletins.svelte
index 5ed21d69..18c7994b 100644
--- a/web/src/components/management/ManagementBulletins.svelte
+++ b/web/src/components/management/ManagementBulletins.svelte
@@ -4,11 +4,21 @@
 	import { isEnvBrowser } from "../../utils/misc";
 	import { NUI_EVENTS } from "../../constants/nuiEvents";
 
+	// ── Types ──────────────────────────────────────────────────
+
 	interface Bulletin {
 		id?: number;
 		content: string;
 	}
 
+	interface BulletinCategory {
+		value: string;
+		label: string;
+		icon: string;
+	}
+
+	// ── MotD state ─────────────────────────────────────────────
+
 	let bulletins: Bulletin[] = $state([]);
 	let newTitle: string = $state("");
 	let newContent: string = $state("");
@@ -16,11 +26,28 @@
 	let isSubmitting = $state(false);
 	let statusMessage: { text: string; type: "success" | "error" } | null = $state(null);
 
+	// ── Category state ─────────────────────────────────────────
+
+	const DEFAULT_CATEGORIES: BulletinCategory[] = [
+		{ value: 'announcement', label: 'Announcements', icon: 'campaign'     },
+		{ value: 'operations',   label: 'Operations',    icon: 'local_police' },
+		{ value: 'training',     label: 'Training',      icon: 'school'       },
+		{ value: 'general',      label: 'General',       icon: 'forum'        },
+	];
+
+	let categories = $state<BulletinCategory[]>(DEFAULT_CATEGORIES.map(c => ({ ...c })));
+	let categoriesLoading = $state(false);
+	let categoriesSaving  = $state(false);
+
+	// ── Shared helpers ─────────────────────────────────────────
+
 	function showStatus(text: string, type: "success" | "error" = "success") {
 		statusMessage = { text, type };
 		setTimeout(() => { statusMessage = null; }, 3000);
 	}
 
+	// ── MotD logic ─────────────────────────────────────────────
+
 	async function loadBulletins() {
 		if (isEnvBrowser()) return;
 		try {
@@ -115,6 +142,58 @@
 		}
 	}
 
+	// ── Category logic ─────────────────────────────────────────
+
+	async function loadCategories() {
+		if (isEnvBrowser()) return;
+		try {
+			categoriesLoading = true;
+			const result = await fetchNui<BulletinCategory[]>(
+				NUI_EVENTS.BULLETIN.GET_CATEGORIES,
+				{},
+				[],
+			);
+			if (Array.isArray(result) && result.length > 0) {
+				categories = result;
+			}
+		} catch (error) {
+			console.error("Failed to load categories:", error);
+		} finally {
+			categoriesLoading = false;
+		}
+	}
+
+	async function saveCategories() {
+		if (isEnvBrowser()) {
+			showStatus("Categories saved");
+			return;
+		}
+		try {
+			categoriesSaving = true;
+			const result = await fetchNui<{ success: boolean; message?: string }>(
+				NUI_EVENTS.BULLETIN.SAVE_CATEGORIES,
+				{ categories },
+				{ success: false },
+			);
+			if (result?.success) {
+				showStatus("Categories saved");
+			} else {
+				showStatus(result?.message || "Failed to save categories", "error");
+			}
+		} catch (error) {
+			console.error("Failed to save categories:", error);
+			showStatus("Failed to save categories", "error");
+		} finally {
+			categoriesSaving = false;
+		}
+	}
+
+	function resetCategories() {
+		categories = DEFAULT_CATEGORIES.map(c => ({ ...c }));
+	}
+
+	// ── Mount ──────────────────────────────────────────────────
+
 	onMount(() => {
 		if (isEnvBrowser()) {
 			bulletins = [
@@ -125,84 +204,165 @@
 			return;
 		}
 		loadBulletins();
+		loadCategories();
 	});
 </script>
 
-<div class="bulletins-panel">
+<div class="management-panel">
 	{#if statusMessage}
 		<div class="status-toast {statusMessage.type}">
 			{statusMessage.text}
 		</div>
 	{/if}
 
-	<div class="new-bulletin">
-		<div class="bulletin-fields">
-			<input
-				class="bulletin-title-input"
-				type="text"
-				placeholder="Title (e.g. TRAINING, BOLO REMINDER)"
-				bind:value={newTitle}
-			/>
-			<textarea
-				class="bulletin-input"
-				placeholder="Write a bulletin..."
-				rows="2"
-				bind:value={newContent}
-			></textarea>
+	<!-- ═══════════════════════════════════════════════════════
+	     Section 1: Message of the Day (MotD)
+	════════════════════════════════════════════════════════ -->
+	<div class="section">
+		<div class="section-title-row">
+			<span class="section-title">Message of the Day</span>
 		</div>
-		<button
-			class="btn-post"
-			onclick={handleSubmit}
-			disabled={(!newContent.trim() && !newTitle.trim()) || isSubmitting}
-		>
-			{isSubmitting ? "Posting..." : "Post"}
-		</button>
-	</div>
 
-	{#if isLoading}
-		<div class="empty-state">
-			<div class="loading-spinner"></div>
-			<p>Loading bulletins...</p>
+		<div class="new-bulletin">
+			<div class="bulletin-fields">
+				<input
+					class="bulletin-title-input"
+					type="text"
+					placeholder="Title (e.g. TRAINING, BOLO REMINDER)"
+					bind:value={newTitle}
+				/>
+				<textarea
+					class="bulletin-input"
+					placeholder="Write a bulletin..."
+					rows="2"
+					bind:value={newContent}
+				></textarea>
+			</div>
+			<button
+				class="btn-post"
+				onclick={handleSubmit}
+				disabled={(!newContent.trim() && !newTitle.trim()) || isSubmitting}
+			>
+				{isSubmitting ? "Posting..." : "Post"}
+			</button>
 		</div>
-	{:else}
-		<div class="bulletins-list">
-			{#each bulletins as bulletin (bulletin.id || bulletin.content)}
-				{@const parsed = parseBulletin(bulletin.content)}
-				<div class="bulletin-row">
-					<div class="bulletin-body">
-						{#if parsed.title && parsed.body}
-							<span class="bulletin-title">{parsed.title}</span>
-							<p class="bulletin-text">{parsed.body}</p>
-						{:else}
-							<p class="bulletin-text">{bulletin.content}</p>
+
+		{#if isLoading}
+			<div class="empty-state">
+				<div class="loading-spinner"></div>
+				<p>Loading bulletins...</p>
+			</div>
+		{:else}
+			<div class="bulletins-list">
+				{#each bulletins as bulletin (bulletin.id || bulletin.content)}
+					{@const parsed = parseBulletin(bulletin.content)}
+					<div class="bulletin-row">
+						<div class="bulletin-body">
+							{#if parsed.title && parsed.body}
+								<span class="bulletin-title">{parsed.title}</span>
+								<p class="bulletin-text">{parsed.body}</p>
+							{:else}
+								<p class="bulletin-text">{bulletin.content}</p>
+							{/if}
+						</div>
+						{#if bulletin.id}
+							<button
+								class="delete-btn"
+								onclick={() => deleteBulletin(bulletin.id)}
+								aria-label="Delete bulletin"
+							>
+								<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+							</button>
 						{/if}
 					</div>
-					{#if bulletin.id}
-						<button
-							class="delete-btn"
-							onclick={() => deleteBulletin(bulletin.id)}
-							aria-label="Delete bulletin"
-						>
-							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-						</button>
-					{/if}
-				</div>
-			{:else}
-				<div class="empty-state">No bulletins posted.</div>
-			{/each}
+				{:else}
+					<div class="empty-state">No bulletins posted.</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<!-- ═══════════════════════════════════════════════════════
+	     Section 2: Bulletin Board Categories
+	════════════════════════════════════════════════════════ -->
+	<div class="section">
+		<div class="section-title-row">
+			<span class="section-title">Bulletin Board Categories</span>
+			<div class="section-actions">
+				<button class="btn-reset" onclick={resetCategories} disabled={categoriesSaving}>
+					Reset
+				</button>
+				<button class="btn-save-cats" onclick={saveCategories} disabled={categoriesSaving}>
+					{categoriesSaving ? "Saving..." : "Save"}
+				</button>
+			</div>
 		</div>
-	{/if}
+
+		<p class="section-hint">
+			Customize the category labels and icons shown in the Bulletin Board sidebar.
+			Use any <a href="https://fonts.google.com/icons" target="_blank" rel="noreferrer">Material Icon</a> name.
+		</p>
+
+		{#if categoriesLoading}
+			<div class="empty-state" style="min-height: 80px;">
+				<div class="loading-spinner"></div>
+				<p>Loading categories...</p>
+			</div>
+		{:else}
+			<div class="categories-list">
+				{#each categories as cat}
+					<div class="category-row">
+						<!-- Live icon preview -->
+						<div class="cat-icon-preview" title="Icon preview">
+							<span class="material-icons">{cat.icon || 'help_outline'}</span>
+						</div>
+
+						<!-- Label input -->
+						<div class="cat-field">
+							<span class="cat-field-label">Label</span>
+							<input
+								class="cat-input"
+								type="text"
+								placeholder="Category label..."
+								bind:value={cat.label}
+								maxlength="32"
+							/>
+						</div>
+
+						<!-- Icon input -->
+						<div class="cat-field">
+							<span class="cat-field-label">Icon name</span>
+							<input
+								class="cat-input cat-input-mono"
+								type="text"
+								placeholder="e.g. campaign, school, forum..."
+								bind:value={cat.icon}
+								maxlength="48"
+							/>
+						</div>
+
+						<!-- Value badge (read-only, for reference) -->
+						<div class="cat-value-badge">{cat.value}</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
 </div>
 
 <style>
-	.bulletins-panel {
+	/* ── Panel wrapper ────────────────────────────────────────── */
+	.management-panel {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
 		background: transparent;
-		overflow: hidden;
+		overflow-y: auto;
+		scrollbar-width: thin;
+		scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
 	}
 
+	/* ── Status toast ─────────────────────────────────────────── */
 	.status-toast {
 		padding: 6px 12px;
 		font-size: 10px;
@@ -224,12 +384,61 @@
 		border: 1px solid rgba(239, 68, 68, 0.1);
 	}
 
+	/* ── Sections ─────────────────────────────────────────────── */
+	.section {
+		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+		padding: 0 0 16px;
+		flex-shrink: 0;
+	}
+
+	.section:last-child {
+		border-bottom: none;
+	}
+
+	.section-title-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 12px 16px 8px;
+		gap: 8px;
+	}
+
+	.section-title {
+		font-size: 9px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.7px;
+		color: rgba(255, 255, 255, 0.35);
+	}
+
+	.section-actions {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+	}
+
+	.section-hint {
+		margin: 0 16px 10px;
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.3);
+		line-height: 1.5;
+	}
+
+	.section-hint a {
+		color: rgba(147, 197, 253, 0.6);
+		text-decoration: none;
+	}
+
+	.section-hint a:hover {
+		color: rgba(147, 197, 253, 0.9);
+		text-decoration: underline;
+	}
+
+	/* ── MotD — new bulletin composer ─────────────────────────── */
 	.new-bulletin {
 		display: flex;
 		gap: 10px;
-		padding: 10px 16px;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-		flex-shrink: 0;
+		padding: 4px 16px 10px;
 		align-items: flex-end;
 	}
 
@@ -308,23 +517,12 @@
 		cursor: not-allowed;
 	}
 
+	/* ── MotD — bulletin list ──────────────────────────────────── */
 	.bulletins-list {
-		flex: 1;
-		min-height: 0;
+		max-height: 220px;
 		overflow-y: auto;
-	}
-
-	.bulletins-list::-webkit-scrollbar {
-		width: 4px;
-	}
-
-	.bulletins-list::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.bulletins-list::-webkit-scrollbar-thumb {
-		background: rgba(255, 255, 255, 0.06);
-		border-radius: 2px;
+		scrollbar-width: thin;
+		scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
 	}
 
 	.bulletin-row {
@@ -390,28 +588,163 @@
 		background: rgba(239, 68, 68, 0.08);
 	}
 
+	/* ── Categories section buttons ──────────────────────────── */
+	.btn-reset {
+		background: transparent;
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 3px 10px;
+		color: rgba(255, 255, 255, 0.35);
+		font-size: 10px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+
+	.btn-reset:hover:not(:disabled) {
+		color: rgba(255, 255, 255, 0.6);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.btn-reset:disabled { opacity: 0.3; cursor: not-allowed; }
+
+	.btn-save-cats {
+		background: rgba(16, 185, 129, 0.06);
+		border: 1px solid rgba(16, 185, 129, 0.1);
+		border-radius: 3px;
+		padding: 3px 12px;
+		color: rgba(52, 211, 153, 0.7);
+		font-size: 10px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+
+	.btn-save-cats:hover:not(:disabled) {
+		background: rgba(16, 185, 129, 0.12);
+		color: rgba(110, 231, 183, 0.9);
+	}
+
+	.btn-save-cats:disabled { opacity: 0.3; cursor: not-allowed; }
+
+	/* ── Category rows ───────────────────────────────────────── */
+	.categories-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		padding: 0 16px;
+	}
+
+	.category-row {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 7px 0;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+	}
+
+	.category-row:last-child {
+		border-bottom: none;
+	}
+
+	/* Icon preview circle */
+	.cat-icon-preview {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.04);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.cat-icon-preview .material-icons {
+		font-size: 16px;
+		color: rgba(255, 255, 255, 0.4);
+	}
+
+	/* Label / icon fields */
+	.cat-field {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+	}
+
+	.cat-field-label {
+		font-size: 8px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: rgba(255, 255, 255, 0.25);
+	}
+
+	.cat-input {
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 4px 7px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		font-family: inherit;
+		outline: none;
+		transition: border-color 0.1s;
+		width: 100%;
+	}
+
+	.cat-input:focus {
+		border-color: rgba(255, 255, 255, 0.12);
+	}
+
+	.cat-input::placeholder {
+		color: rgba(255, 255, 255, 0.18);
+	}
+
+	.cat-input-mono {
+		font-family: monospace;
+		font-size: 10px;
+		letter-spacing: 0.3px;
+	}
+
+	/* Read-only value badge */
+	.cat-value-badge {
+		font-size: 9px;
+		font-family: monospace;
+		color: rgba(255, 255, 255, 0.25);
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.05);
+		border-radius: 3px;
+		padding: 2px 6px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	/* ── Shared empty / loading state ────────────────────────── */
 	.empty-state {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		min-height: 200px;
+		min-height: 80px;
 		color: rgba(255, 255, 255, 0.35);
 		font-size: 11px;
 	}
 
 	.loading-spinner {
-		width: 24px;
-		height: 24px;
+		width: 20px;
+		height: 20px;
 		border: 2px solid rgba(255, 255, 255, 0.06);
 		border-left: 2px solid rgba(var(--accent-rgb), 0.5);
 		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
-		margin-bottom: 10px;
+		margin-bottom: 8px;
 	}
 
 	@keyframes spin {
-		0% { transform: rotate(0deg); }
+		0%   { transform: rotate(0deg); }
 		100% { transform: rotate(360deg); }
 	}
-</style>
+</style>
\ No newline at end of file

From edab298354dfdc05a0fa171220fccf42e0132b02 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:12:01 +0200
Subject: [PATCH 083/144] changes to a new tab

changes to a new tab
---
 web/src/components/ContentArea.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/src/components/ContentArea.svelte b/web/src/components/ContentArea.svelte
index 2811e09d..cd5c3fbe 100644
--- a/web/src/components/ContentArea.svelte
+++ b/web/src/components/ContentArea.svelte
@@ -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 BulletInBoard from "@/pages/BulletInBoard.svelte";
 
 	interface Props {
 		authService: AuthService;
@@ -119,6 +120,7 @@
 		bodycams: ["bodycams_view"],
 		ia: ["ia_view"],
 		sop: ["sop_view", "sop_manage"],
+		bulletin_board: ["bulletin_view"],
 		management: ["management_settings", "management_bulletins", "management_activity", "management_permissions", "management_tracking"],
 		settings: ["management_settings"],
 	};
@@ -147,6 +149,8 @@
 			cameras: "Cameras",
 			bodycams: "Bodycams",
 			management: "Settings",
+			sop: "SOP",
+			bulletin_board: "Bulletin Board",
 			settings: "Preferences",
 		};
 		return labels[pageId] || pageId;
@@ -225,6 +229,8 @@
 			<FTO {tabService} {authService} />
 		{:else if activeComponent === "sop"}
 			<SOP {authService} />
+		{:else if activeComponent === "bulletin_board"}
+			<BulletInBoard {authService} />
 		{:else if activeComponent === "management"}
 			<Management {authService} />
 		{:else if activeComponent === "settings"}

From 755800ecb4417952dd0304828ba76077c435acfd Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:12:34 +0200
Subject: [PATCH 084/144] Add files via upload

---
 web/src/constants/index.ts      | 10 ++++++++--
 web/src/constants/management.ts | 11 +++++++++++
 web/src/constants/nuiEvents.ts  | 10 ++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/web/src/constants/index.ts b/web/src/constants/index.ts
index 5021a5ea..5ce92831 100644
--- a/web/src/constants/index.ts
+++ b/web/src/constants/index.ts
@@ -19,6 +19,7 @@ export const MDT_TABS = [
 	{ name: "PPR", icon: "rate_review" },
 	{ name: "FTO", icon: "school" },
 	{ name: "SOP", icon: "menu_book" },
+	{ name: "Bulletin Board", icon: "forum" },
 	{ name: "Court Cases", icon: "gavel" },
 	{ name: "Warrant Review", icon: "policy" },
 	{ name: "Court Orders", icon: "assignment_late" },
@@ -33,6 +34,7 @@ export const EMS_TABS: readonly (typeof MDT_TABS)[number]["name"][] = [
 	"Citizens",
 	"Reports",
 	"Roster",
+	"Bulletin Board",
 	"Map",
 	"Bodycams",
 	"Preferences",
@@ -49,6 +51,7 @@ export const DOJ_TABS: readonly string[] = [
 	"Cases",
 	"Evidence",
 	"Court Orders",
+	"Bulletin Board",
 	"Legal Documents",
 	"Charges",
 	"Settings",
@@ -73,7 +76,7 @@ export interface NavGroup {
 }
 
 export const NAV_GROUPS: NavGroup[] = [
-	{ id: "dashboard", tabs: ["Dashboard"] },
+	{ id: "dashboard", tabs: ["Dashboard", "Bulletin Board"] },
 	{ id: "operations", label: "Operations", icon: "assignment", tabs: ["Reports", "Cases", "Evidence", "BOLOs", "Warrants"] },
 	{ id: "records", label: "Records", icon: "folder_open", tabs: ["Citizens", "Vehicles", "Weapons", "Charges"] },
 	{ id: "personnel", label: "Personnel", icon: "badge", tabs: ["Roster", "Awards", "IA", "PPR", "FTO", "SOP"] },
@@ -143,6 +146,7 @@ export type ComponentId =
 	| "ppr"
 	| "fto"
 	| "sop"
+	| "bulletin_board"
 	| "court_cases"
 	| "warrant_review"
 	| "court_orders"
@@ -171,6 +175,7 @@ export const TAB_TO_COMPONENT_MAP: Record<MDTTab, ComponentId> = {
 	PPR: "ppr",
 	FTO: "fto",
 	SOP: "sop",
+	"Bulletin Board": "bulletin_board",
 	"Court Cases": "court_cases",
 	"Warrant Review": "warrant_review",
 	"Court Orders": "court_orders",
@@ -185,7 +190,7 @@ export const DEFAULT_DATE = "03.15.2024";
 /** App version and branding per job type */
 export const APP_INFO = {
 	leo: {
-		version: "LSPD MDT System v2.0",
+		version: "LSPD MDT System v3.0",
 		title: "Los Santos Police Department",
 		subtitle: "Mobile Data Terminal",
 		footerSubtext: "Authorized Personnel Only",
@@ -247,6 +252,7 @@ export const COMPONENT_DISPLAY_NAMES: Record<ComponentId, string> = {
 	ppr: "Performance Reviews",
 	fto: "Field Training",
 	sop: "Standard Operating Procedures",
+	bulletin_board: "Bulletin Board",
 	court_cases: "Court Cases",
 	warrant_review: "Warrant Review",
 	court_orders: "Court Orders",
diff --git a/web/src/constants/management.ts b/web/src/constants/management.ts
index 21d6db63..215589c8 100644
--- a/web/src/constants/management.ts
+++ b/web/src/constants/management.ts
@@ -162,6 +162,16 @@ export const PERMISSION_CATEGORIES: PermissionCategory[] = [
 			{ key: "sop_manage", label: "Manage SOP", description: "Create, edit, and publish standard operating procedures" },
 		],
 	},
+	{
+		key: "bulletin_board",
+		label: "Bulletin Board ( Creator or Manage Posts can Delete )",
+		icon: "forum",
+		permissions: [
+			{ key: "bulletin_view", label: "View BP", description: "View Bulletin Posts" },
+			{ key: "bulletin_post", label: "Manage Posts", description: "Create and Edit Bulletin Posts" },
+			{ key: "bulletin_pin", label: "Pin Posts", description: "Pin Bulletin Posts" },
+		],
+	},
 	{
 		key: "management",
 		label: "Management",
@@ -196,6 +206,7 @@ export const TAB_VISIBILITY_KEYS = [
 	{ tabName: "PPR", key: "tab_hidden_ppr", label: "PPR" },
 	{ tabName: "FTO", key: "tab_hidden_fto", label: "Field Training" },
 	{ tabName: "SOP", key: "tab_hidden_sop", label: "SOP" },
+	{ tabName: "Bulletin Board", key: "tab_hidden_bulletin_board", label: "Bulletin BoardOP" },
 ];
 
 /** Flat list of all permission keys */
diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index e085a28b..bbd10146 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -293,6 +293,15 @@ export const NUI_EVENTS = {
 		CHECK_SOP_AGREEMENT: "checkSOPAgreement",
 		ACKNOWLEDGE_SOP: "acknowledgesSOP",
 	},
+	BULLETIN: {
+		GET_POSTS:   "getBulletinPosts",
+		CREATE_POST: "createBulletinPost",
+		UPDATE_POST: "updateBulletinPost",
+		DELETE_POST: "deleteBulletinPost",
+		TOGGLE_PIN:  "toggleBulletinPin",
+		GET_CATEGORIES:  'getBulletinCategories',
+        SAVE_CATEGORIES: 'saveBulletinCategories',
+	},
 } as const;
 
 // Backwards compatibility exports (deprecated - use NUI_EVENTS instead)
@@ -338,6 +347,7 @@ export const ALL_NUI_EVENTS = [
 	...Object.values(NUI_EVENTS.COLLAB),
 	...Object.values(NUI_EVENTS.DOJ),
 	...Object.values(NUI_EVENTS.SOP),
+	...Object.values(NUI_EVENTS.BULLETIN),
 	"copyToClipboard",
 	"submitComplaint",
 	"closeComplaint",

From aa15ae8d7f104360df8f68b79e061136ac9fe05a Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:12:59 +0200
Subject: [PATCH 085/144] Add files via upload

---
 web/src/config/security.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/config/security.ts b/web/src/config/security.ts
index 391ccf29..57d02303 100644
--- a/web/src/config/security.ts
+++ b/web/src/config/security.ts
@@ -47,6 +47,7 @@ export const SECURITY_CONFIG = {
 		"PPR",
 		"FTO",
 		"SOP",
+		"Bulletin Board",
 		"Court Cases",
 		"Warrant Review",
 		"Court Orders",

From 1aab0345561130d1c47dad5e52456510a2b09000 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:13:20 +0200
Subject: [PATCH 086/144] Add files via upload

---
 client/backend/dashboard.lua | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/client/backend/dashboard.lua b/client/backend/dashboard.lua
index a56db50b..9f18165f 100644
--- a/client/backend/dashboard.lua
+++ b/client/backend/dashboard.lua
@@ -174,6 +174,32 @@ RegisterNUICallback('deleteBulletin', function(data, cb)
     cb(result or { success = false })
 end)
 
+RegisterNUICallback('getBulletinCategories', function(_, cb)
+    local result = lib.callback.await('mdt:server:getBulletinCategories', false)
+    cb(result or {})
+end)
+
+RegisterNUICallback('saveBulletinCategories', function(data, cb)
+    if not data or not data.categories then
+        cb({ success = false, message = 'Invalid data' })
+        return
+    end
+ 
+    for _, cat in ipairs(data.categories) do
+        if type(cat.value) ~= 'string' or type(cat.label) ~= 'string' or type(cat.icon) ~= 'string' then
+            cb({ success = false, message = 'Malformed category entry' })
+            return
+        end
+        if #cat.label > 32 or #cat.icon > 48 then
+            cb({ success = false, message = 'Category label or icon name too long' })
+            return
+        end
+    end
+ 
+    local result = lib.callback.await('mdt:server:saveBulletinCategories', false, data.categories)
+    cb(result or { success = false, message = 'Server error' })
+end)
+
 -- RECENT REPORTS -------------------------------------
 
 RegisterNUICallback('getRecentReports', function(data, cb)

From febe6c99caf97a51f76c6510dc368de1c0803e3a Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:13:35 +0200
Subject: [PATCH 087/144] Add files via upload

---
 server/backend/dashboard.lua | 105 +++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)

diff --git a/server/backend/dashboard.lua b/server/backend/dashboard.lua
index 17a1f6a8..55239584 100644
--- a/server/backend/dashboard.lua
+++ b/server/backend/dashboard.lua
@@ -1,6 +1,15 @@
 
 local resourceName = tostring(GetCurrentResourceName())
 
+local DEFAULT_CATEGORIES = {
+    { value = 'announcement', label = 'Announcements', icon = 'campaign'     },
+    { value = 'operations',   label = 'Operations',    icon = 'local_police' },
+    { value = 'training',     label = 'Training',      icon = 'school'       },
+    { value = 'general',      label = 'General',       icon = 'forum'        },
+}
+ 
+local SETTINGS_KEY = 'bulletin_categories'
+
 local function getEffectiveJobType(src)
     local jobType = ps.getJobType(src)
     local jobName = ps.getJobName(src)
@@ -356,3 +365,99 @@ ps.registerCallback(resourceName .. ':server:getUsageMetrics', function(source)
         }
     end)
 end)
+ 
+local function getSetting(key)
+    local rows = exports.oxmysql:executeSync(
+        'SELECT `value` FROM `mdt_bulletin_settings` WHERE `key` = ? LIMIT 1',
+        { key }
+    )
+    if rows and rows[1] then
+        return rows[1].value
+    end
+    return nil
+end
+ 
+local function setSetting(key, value)
+    exports.oxmysql:executeSync(
+        [[
+            INSERT INTO `mdt_bulletin_settings` (`key`, `value`)
+            VALUES (?, ?)
+            ON DUPLICATE KEY UPDATE `value` = VALUES(`value`), `updated_at` = CURRENT_TIMESTAMP
+        ]],
+        { key, value }
+    )
+end
+
+-- ── CALLBACK: getBulletinCategories ──────────────────────────────────────────
+ 
+lib.callback.register('mdt:server:getBulletinCategories', function(source)
+    local raw = getSetting(SETTINGS_KEY)
+ 
+    if not raw then
+        return DEFAULT_CATEGORIES
+    end
+ 
+    local ok, decoded = pcall(json.decode, raw)
+    if not ok or type(decoded) ~= 'table' or #decoded == 0 then
+        return DEFAULT_CATEGORIES
+    end
+ 
+    local sanitized = {}
+    for _, cat in ipairs(decoded) do
+        if type(cat.value) == 'string' and type(cat.label) == 'string' and type(cat.icon) == 'string' then
+            sanitized[#sanitized + 1] = {
+                value = cat.value,
+                label = cat.label,
+                icon  = cat.icon,
+            }
+        end
+    end
+ 
+    if #sanitized == 0 then
+        return DEFAULT_CATEGORIES
+    end
+ 
+    return sanitized
+end)
+ 
+-- ── CALLBACK: saveBulletinCategories ─────────────────────────────────────────
+ 
+lib.callback.register('mdt:server:saveBulletinCategories', function(source, categories)
+    if type(categories) ~= 'table' or #categories == 0 then
+        return { success = false, message = 'No categories provided' }
+    end
+ 
+    local ALLOWED_VALUES = { announcement = true, operations = true, training = true, general = true }
+ 
+    local clean = {}
+    for _, cat in ipairs(categories) do
+        if type(cat.value) ~= 'string' or not ALLOWED_VALUES[cat.value] then
+            return { success = false, message = ('Unknown category value: %s'):format(tostring(cat.value)) }
+        end
+        if type(cat.label) ~= 'string' or #cat.label == 0 or #cat.label > 32 then
+            return { success = false, message = 'Invalid label for category: ' .. tostring(cat.value) }
+        end
+        if type(cat.icon) ~= 'string' or #cat.icon == 0 or #cat.icon > 48 then
+            return { success = false, message = 'Invalid icon for category: ' .. tostring(cat.value) }
+        end
+        clean[#clean + 1] = {
+            value = cat.value,
+            label = cat.label,
+            icon  = cat.icon,
+        }
+    end
+ 
+    local ok, encoded = pcall(json.encode, clean)
+    if not ok then
+        return { success = false, message = 'JSON encode error' }
+    end
+ 
+    local saveOk, err = pcall(setSetting, SETTINGS_KEY, encoded)
+    if not saveOk then
+        ps.warn('^1[MDT] bulletin_settings save error: ' .. tostring(err) .. '^0')
+        return { success = false, message = 'Database error' }
+    end
+ 
+    ps.success(('[MDT] Bulletin categories updated by source %d'):format(source))
+    return { success = true }
+end)
\ No newline at end of file

From 2cd331c4f1a3485e31da7d4383f7562a96b2b50f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 22 May 2026 17:19:01 +0200
Subject: [PATCH 088/144] miss spelling fixed

miss spelling fixed
---
 web/src/constants/management.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/constants/management.ts b/web/src/constants/management.ts
index 215589c8..a15dda8d 100644
--- a/web/src/constants/management.ts
+++ b/web/src/constants/management.ts
@@ -206,7 +206,7 @@ export const TAB_VISIBILITY_KEYS = [
 	{ tabName: "PPR", key: "tab_hidden_ppr", label: "PPR" },
 	{ tabName: "FTO", key: "tab_hidden_fto", label: "Field Training" },
 	{ tabName: "SOP", key: "tab_hidden_sop", label: "SOP" },
-	{ tabName: "Bulletin Board", key: "tab_hidden_bulletin_board", label: "Bulletin BoardOP" },
+	{ tabName: "Bulletin Board", key: "tab_hidden_bulletin_board", label: "Bulletin Board" },
 ];
 
 /** Flat list of all permission keys */

From 288a1a2070c89bf730c6294be79c8284652f96d2 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 24 May 2026 16:18:10 +0200
Subject: [PATCH 089/144] fixed pages

fixed pages
---
 web/src/pages/Reports.svelte | 78 ++++++++++++------------------------
 1 file changed, 25 insertions(+), 53 deletions(-)

diff --git a/web/src/pages/Reports.svelte b/web/src/pages/Reports.svelte
index d3a316f6..d40b1b25 100644
--- a/web/src/pages/Reports.svelte
+++ b/web/src/pages/Reports.svelte
@@ -16,7 +16,6 @@
 	import type { createTabService } from "../services/tabService.svelte";
 	import type { MDTTab } from "../constants";
 	import Pagination from "../components/Pagination.svelte";
-
 	import type { JobType } from "../interfaces/IUser";
 
 	interface Props {
@@ -35,6 +34,7 @@
 			tabService.setInstanceTab(activeInstance.id, tab);
 		}
 	}
+
 	const reportService = createReportService();
 
 	interface Report {
@@ -51,7 +51,6 @@
 	}
 
 	let reports: Report[] = $state([]);
-	let filteredReports: Report[] = $state([]);
 	let searchQuery = $state("");
 	let filterAuthor = $state("");
 	let filterType = $state("");
@@ -60,13 +59,11 @@
 	let analytics = $state({ incidents: 0, arrests: 0, warrants: 0 });
 	let isLoading = $state(false);
 	let currentPage = $state(1);
-	let reportsPerPage = $state(50);
+	let reportsPerPage = $state(25);
 	let totalReports = $state(0);
-
 	let showEditor = $state(false);
 	let editingReportId: string | null = $state(null);
 	let pendingOpenId = $state<string | null>(null);
-	let debouncedSearchQuery = $state("");
 	let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 
 	$effect(() => {
@@ -78,30 +75,14 @@
 		}
 	});
 
-	// Debounce search input (200ms)
-	$effect(() => {
-		const query = searchQuery;
+	function handleSearchInput(e: Event) {
+		searchQuery = (e.target as HTMLInputElement).value;
 		if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
 		searchDebounceTimer = setTimeout(() => {
-			debouncedSearchQuery = query;
-		}, 200);
-	});
-
-	$effect(() => {
-		if (debouncedSearchQuery.trim() === "") {
-			filteredReports = reports;
-		} else {
-			const query = debouncedSearchQuery.toLowerCase();
-			filteredReports = reports.filter(
-				(report) =>
-					report.title.toLowerCase().includes(query) ||
-					report.reportId.toLowerCase().includes(query) ||
-					report.author.toLowerCase().includes(query) ||
-					report.type.toLowerCase().includes(query) ||
-					(report.tag && report.tag.toLowerCase().includes(query)),
-			);
-		}
-	});
+			currentPage = 1;
+			loadReports(1);
+		}, 300);
+	}
 
 	onMount(() => {
 		if (isEnvBrowser()) {
@@ -115,8 +96,8 @@
 				{ id: '6', title: 'Warrant Execution - Marcus Johnson', reportId: 'RPT-006', author: 'identifier_123', authorplaintext: 'Det. Williams', type: 'Arrest', datecreated: now - 518400000, dateupdated: now - 432000000, tag: 'Warrant' },
 				{ id: '7', title: 'Hit and Run - Del Perro Pier', reportId: 'RPT-007', author: 'identifier_123', authorplaintext: 'Ofc. Smith', type: 'Incident', datecreated: now - 604800000, dateupdated: now - 518400000 },
 			];
-			filteredReports = reports;
 			analytics = { incidents: 4, arrests: 2, warrants: 1 };
+			totalReports = 7;
 			isLoading = false;
 			return;
 		}
@@ -152,18 +133,21 @@
 		try {
 			isLoading = true;
 			const filters = {
+				search: searchQuery.trim() || undefined,
 				startDate: filterStartDate || undefined,
 				endDate: filterEndDate || undefined,
 				type: filterType || undefined,
 				author: filterAuthor.trim() || undefined,
+				limit: reportsPerPage,
 			};
 			const response = await fetchNui(
 				NUI_EVENTS.REPORT.GET_REPORTS,
 				{ page, limit: reportsPerPage, filters },
 			);
 
-			reports = response.reports || [];
-			totalReports = response.total ?? reports.length;
+			const data = response?.reports ?? response;
+			reports = data?.reports || [];
+			totalReports = data?.total ?? reports.length;
 			currentPage = page;
 		} catch (error) {
 			debugError("Failed to load reports:", error);
@@ -263,12 +247,16 @@
 	/>
 {:else}
 	<div class="reports-page">
-		<!-- Topbar -->
 		<div class="topbar">
 			<div class="topbar-left">
 				<div class="search-box">
 					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-					<input type="text" bind:value={searchQuery} placeholder="Search by title, author, ID, type or tag..." />
+					<input
+						type="text"
+						value={searchQuery}
+						oninput={handleSearchInput}
+						placeholder="Search by title, author, ID, type or tag..."
+					/>
 				</div>
 			</div>
 			<div class="topbar-right">
@@ -313,11 +301,10 @@
 					}}
 					disabled={isLoading || !hasActiveFilters()}
 				>Clear</button>
-		<button class="topbar-btn btn-primary" onclick={createNewReport}>New Report</button>
+				<button class="topbar-btn btn-primary" onclick={createNewReport}>New Report</button>
 			</div>
 		</div>
 
-		<!-- Analytics Strip -->
 		<div class="analytics-strip">
 			<div class="stat-item">
 				<svg class="stat-icon stat-icon-blue" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
@@ -338,7 +325,6 @@
 			</div>
 		</div>
 
-		<!-- List Panel -->
 		<div class="list-panel">
 			<div class="list-header">
 				<span>Title</span>
@@ -355,7 +341,7 @@
 						<div class="loading-spinner"></div>
 						Loading reports...
 					</div>
-				{:else if filteredReports.length === 0}
+				{:else if reports.length === 0}
 					<div class="empty-state">
 						<div class="empty-content">
 							<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.3; margin-bottom: 12px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
@@ -373,7 +359,7 @@
 						</div>
 					</div>
 				{:else}
-					{#each filteredReports.slice().reverse() as report}
+					{#each reports as report}
 						<button class="report-row" onclick={() => viewReport(report.id)}>
 							<span class="col-title">{report.title}</span>
 							<span class="col-id mono">{report.reportId}</span>
@@ -424,7 +410,6 @@
 {/if}
 
 <style>
-	/* ===== Page ===== */
 	.reports-page {
 		height: 100%;
 		display: flex;
@@ -433,7 +418,6 @@
 		overflow: hidden;
 	}
 
-	/* ===== Topbar ===== */
 	.topbar {
 		display: flex;
 		align-items: center;
@@ -547,7 +531,6 @@
 		color: #93c5fd;
 	}
 
-	/* ===== Analytics Strip ===== */
 	.analytics-strip {
 		display: flex;
 		align-items: center;
@@ -599,7 +582,6 @@
 		flex-shrink: 0;
 	}
 
-	/* ===== List Panel ===== */
 	.list-panel {
 		background: transparent;
 		border: none;
@@ -637,7 +619,6 @@
 	.list-body::-webkit-scrollbar-track { background: transparent; }
 	.list-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
 
-	/* ===== Report Row ===== */
 	.report-row {
 		display: grid;
 		grid-template-columns: 2fr 0.8fr 1fr 0.8fr 0.8fr 0.8fr 0.8fr;
@@ -673,14 +654,6 @@
 		font-size: 11px;
 	}
 
-	.col-author {
-		color: rgba(255, 255, 255, 0.4);
-		font-size: 11px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
 	.col-author {
 		display: flex;
 		color: rgba(255, 255, 255, 0.4);
@@ -708,6 +681,7 @@
 		border-color: rgba(255, 255, 255, 0.06);
 		color: rgba(255, 255, 255, 0.35);
 	}
+
 	.col-type {
 		display: flex;
 		align-items: center;
@@ -728,7 +702,6 @@
 		letter-spacing: 0.5px;
 	}
 
-	/* ===== Pills ===== */
 	.pill {
 		padding: 2px 7px;
 		border-radius: 3px;
@@ -775,7 +748,6 @@
 		white-space: nowrap;
 	}
 
-	/* ===== Empty / Loading ===== */
 	.empty-state {
 		display: flex;
 		align-items: center;
@@ -818,4 +790,4 @@
 		0% { transform: rotate(0deg); }
 		100% { transform: rotate(360deg); }
 	}
-</style>
+</style>
\ No newline at end of file

From ace35d381c101fbbde1b4b9d9a60f0b0ff895251 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 24 May 2026 16:18:49 +0200
Subject: [PATCH 090/144] fixed vehicle search in report

fixed vehicle search in report
---
 web/src/components/report-editor/VehiclesManager.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/components/report-editor/VehiclesManager.svelte b/web/src/components/report-editor/VehiclesManager.svelte
index c41b8e45..e73ed32f 100644
--- a/web/src/components/report-editor/VehiclesManager.svelte
+++ b/web/src/components/report-editor/VehiclesManager.svelte
@@ -40,7 +40,6 @@
 
 	async function performSearch(query: string) {
 		if (!query) return;
-		const normalizedQuery = query.toUpperCase().replace(/\s+/g, '');
 		isSearching = true;
 		try {
 			if (isEnvBrowser()) {
@@ -51,7 +50,7 @@
 			} else {
 				const results = await fetchNui<ReportVehicle[]>(
 					NUI_EVENTS.REPORT.SEARCH_VEHICLES_FOR_REPORT,
-					{ query: normalizedQuery },
+					{ query: query },
 					[],
 				);
 				searchResults = Array.isArray(results) ? results : [];

From e074640255df47eb74b33f4bfef5057ce499763b Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 24 May 2026 16:19:21 +0200
Subject: [PATCH 091/144] fixed pages

---
 server/backend/reports.lua | 213 ++++++++++++++++++++++---------------
 1 file changed, 125 insertions(+), 88 deletions(-)

diff --git a/server/backend/reports.lua b/server/backend/reports.lua
index 89e4f1ba..b29b99cc 100644
--- a/server/backend/reports.lua
+++ b/server/backend/reports.lua
@@ -91,36 +91,51 @@ local function normalizeDateFilter(value)
 end
 
 local function buildReportFilterClause(filters)
-	local clauses = {}
-	local values = {}
-	if not filters then
-		return '', values
-	end
+    local clauses = {}
+    local values = {}
+    if not filters then
+        return '', values
+    end
 
-	local function hasValue(value)
-		if value == nil then
-			return false
-		end
-		if json and value == json.null then
-			return false
-		end
-		if type(value) == 'string' then
-			return value:gsub('%s+', '') ~= ''
-		end
-		return true
-	end
+    local function hasValue(value)
+        if value == nil then return false end
+        if json and value == json.null then return false end
+        if type(value) == 'string' then return value:gsub('%s+', '') ~= '' end
+        return true
+    end
 
-	if hasValue(filters.type) then
-		clauses[#clauses + 1] = 'mr.type = ?'
-		values[#values + 1] = filters.type
-	end
+    if hasValue(filters.search) then
+        local likeQuery = '%' .. tostring(filters.search) .. '%'
+        clauses[#clauses + 1] = [[
+            (
+                mr.title LIKE ?
+                OR CAST(mr.id AS CHAR) LIKE ?
+                OR mr.authorplaintext LIKE ?
+                OR mr.type LIKE ?
+                OR EXISTS (
+                    SELECT 1 FROM mdt_reports_tags mrt2
+                    WHERE mrt2.reportid = mr.id AND mrt2.tag LIKE ?
+                )
+            )
+        ]]
+        values[#values + 1] = likeQuery
+        values[#values + 1] = likeQuery
+        values[#values + 1] = likeQuery
+        values[#values + 1] = likeQuery
+        values[#values + 1] = likeQuery
+    end
 
-	if hasValue(filters.author) then
-		local likeQuery = '%' .. tostring(filters.author) .. '%'
-		clauses[#clauses + 1] = '(mr.authorplaintext LIKE ? OR mr.author LIKE ?)'
-		values[#values + 1] = likeQuery
-		values[#values + 1] = likeQuery
-	end
+    if hasValue(filters.type) then
+        clauses[#clauses + 1] = 'mr.type = ?'
+        values[#values + 1] = filters.type
+    end
+
+    if hasValue(filters.author) then
+        local likeQuery = '%' .. tostring(filters.author) .. '%'
+        clauses[#clauses + 1] = '(mr.authorplaintext LIKE ? OR mr.author LIKE ?)'
+        values[#values + 1] = likeQuery
+        values[#values + 1] = likeQuery
+    end
 
     local startDate = normalizeDateFilter(filters.startDate)
     if startDate then
@@ -204,54 +219,67 @@ end
 
 
 ps.registerCallback(resourceName .. ':server:getReports', function(source, page, filters)
-	local src = source
-	if not CheckAuth(src) then return end
+    local src = source
+    if not CheckAuth(src) then return end
 
     local identifier = ps.getIdentifier(src)
     local job = ps.getJobName(src)
     local jobType = getEffectiveJobType(src)
 
-	local pageNumber = tonumber(page) or 1
-	pageNumber = math.max(1, pageNumber)
-	local limit = 20
-	local offset = (pageNumber - 1) * limit
-
-	local filterClause, filterValues = buildReportFilterClause(filters)
-	filterClause = filterClause or ''
-
-	local reportsQuery = ([[
-		SELECT
-			mr.id,
-			mr.id as reportId,
-			mr.title,
-			mr.type,
-			mr.contentyjs,
-			mr.contentplaintext,
-			mr.author,
-			mr.authorplaintext,
-			mr.datecreated,
-			mr.dateupdated,
-			(SELECT mrt.tag FROM mdt_reports_tags mrt WHERE mrt.reportid = mr.id LIMIT 1) as tag,
-			(SELECT COUNT(*) FROM mdt_reports_tags mrt WHERE mrt.reportid = mr.id) as tagCount
-		FROM
-			mdt_reports AS mr
-		LEFT JOIN
-			mdt_reports_restrictions AS mrr ON mr.id = mrr.reportid
-		WHERE
-			%s%s
-		GROUP BY
-			mr.id
-		ORDER BY
-			mr.id
-		LIMIT %d
-		OFFSET %d
-	]]):format(buildReportAccessClause(), filterClause, limit, offset)
-	local params = { jobType, jobType, jobType, identifier, job, jobType }
-	for _, value in ipairs(filterValues or {}) do
-		params[#params + 1] = value
-	end
-	local reports = MySQL.query.await(reportsQuery, params)
-	return reports
+    local pageNumber = tonumber(page) or 1
+    pageNumber = math.max(1, pageNumber)
+    local limit = math.min(tonumber(filters and filters.limit) or 20, 100)
+    local offset = (pageNumber - 1) * limit
+
+    local filterClause, filterValues = buildReportFilterClause(filters)
+    filterClause = filterClause or ''
+
+    local accessClause = buildReportAccessClause()
+    local baseParams = { jobType, jobType, jobType, identifier, job, jobType }
+
+    local queryParams = {}
+    for _, v in ipairs(baseParams) do queryParams[#queryParams + 1] = v end
+    for _, v in ipairs(filterValues or {}) do queryParams[#queryParams + 1] = v end
+
+    local countQuery = ([[
+        SELECT COUNT(DISTINCT mr.id) AS total
+        FROM mdt_reports AS mr
+        LEFT JOIN mdt_reports_restrictions AS mrr ON mr.id = mrr.reportid
+        WHERE %s%s
+    ]]):format(accessClause, filterClause)
+
+    local countRow = MySQL.single.await(countQuery, queryParams)
+    local total = tonumber(countRow and countRow.total) or 0
+
+    local reportsQuery = ([[
+        SELECT
+            mr.id,
+            mr.id as reportId,
+            mr.title,
+            mr.type,
+            mr.contentyjs,
+            mr.contentplaintext,
+            mr.author,
+            mr.authorplaintext,
+            mr.datecreated,
+            mr.dateupdated,
+            (SELECT mrt.tag FROM mdt_reports_tags mrt WHERE mrt.reportid = mr.id LIMIT 1) as tag,
+            (SELECT COUNT(*) FROM mdt_reports_tags mrt WHERE mrt.reportid = mr.id) as tagCount
+        FROM mdt_reports AS mr
+        LEFT JOIN mdt_reports_restrictions AS mrr ON mr.id = mrr.reportid
+        WHERE %s%s
+        GROUP BY mr.id
+        ORDER BY mr.id DESC
+        LIMIT %d OFFSET %d
+    ]]):format(accessClause, filterClause, limit, offset)
+
+    local reportsParams = {}
+    for _, v in ipairs(baseParams) do reportsParams[#reportsParams + 1] = v end
+    for _, v in ipairs(filterValues or {}) do reportsParams[#reportsParams + 1] = v end
+
+    local reports = MySQL.query.await(reportsQuery, reportsParams)
+
+    return { reports = reports or {}, total = total }
 end)
 
 ps.registerCallback(resourceName..':server:getReport', function(source, reportid)
@@ -523,43 +551,52 @@ ps.registerCallback(resourceName .. ':server:searchVehiclesForReport', function(
         return {}
     end
 
-    local likeQuery = '%' .. query .. '%'
+    local vehicleShared = nil
+    local ok, core = pcall(function() return exports['qb-core']:GetCoreObject() end)
+    if ok and core and core.Shared and core.Shared.Vehicles then
+        vehicleShared = core.Shared.Vehicles
+    end
+
+    local likeQuery = '%' .. query:upper() .. '%'
+    local likeQueryRaw = '%' .. query .. '%'
 
     local rows = MySQL.query.await([[
         SELECT
             pv.plate,
             pv.vehicle,
             pv.citizenid,
-            CONCAT(
-                JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.firstname')),
-                ' ',
-                JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.lastname'))
+            COALESCE(
+                NULLIF(
+                    CONCAT(
+                        COALESCE(JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.firstname')), ''),
+                        ' ',
+                        COALESCE(JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.lastname')), '')
+                    ),
+                    ' '
+                ),
+                'Unknown'
             ) as owner_name
         FROM player_vehicles pv
         LEFT JOIN players p ON p.citizenid COLLATE utf8mb4_general_ci = pv.citizenid COLLATE utf8mb4_general_ci
         WHERE (
-            pv.plate LIKE ?
+            UPPER(REPLACE(pv.plate, ' ', '')) LIKE REPLACE(?, ' ', '')
+            OR UPPER(pv.plate) LIKE ?
             OR CONCAT(
-                JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.firstname')),
+                COALESCE(JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.firstname')), ''),
                 ' ',
-                JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.lastname'))
+                COALESCE(JSON_UNQUOTE(JSON_EXTRACT(p.charinfo, '$.lastname')), '')
             ) LIKE ?
+            OR p.citizenid LIKE ?
         )
+        ORDER BY pv.plate ASC
         LIMIT 25
-    ]], { likeQuery, likeQuery })
+    ]], { likeQuery, likeQuery, likeQueryRaw, likeQueryRaw })
 
     local results = {}
     for _, row in ipairs(rows or {}) do
-        local vehicleData = nil
-        local ok, core = pcall(function()
-            return exports['qb-core']:GetCoreObject()
-        end)
-        if ok and core and core.Shared and core.Shared.Vehicles then
-            vehicleData = core.Shared.Vehicles[row.vehicle]
-        end
-
+        local vehicleData = vehicleShared and vehicleShared[row.vehicle] or nil
         table.insert(results, {
-            plate = row.plate and string.upper(row.plate) or 'UNKNOWN',
+            plate = row.plate and string.upper(row.plate):gsub('%s+', '') or 'UNKNOWN',
             vehicle_label = vehicleData and vehicleData.name or row.vehicle or 'Unknown',
             owner_name = row.owner_name or 'Unknown',
             owner_citizenid = row.citizenid or nil,

From 078d4bf2d1f20a813410e5e854f66d50e0fa9a0f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 24 May 2026 16:19:46 +0200
Subject: [PATCH 092/144] fixed pages

fixed pages
---
 client/backend/reports.lua | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/backend/reports.lua b/client/backend/reports.lua
index c87e879b..b7922576 100644
--- a/client/backend/reports.lua
+++ b/client/backend/reports.lua
@@ -315,6 +315,11 @@ RegisterNUICallback('searchVehiclesForReport', function(data, cb)
     end
 
     local query = data and data.query or ''
+    if query == '' then
+        cb({})
+        return
+    end
+
     local result = ps.callback(resourceName .. ':server:searchVehiclesForReport', query)
     cb(result or {})
-end)
+end)
\ No newline at end of file

From 91ad33537db4910d2413b567a9cd4b0f93c4e079 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Mon, 25 May 2026 14:19:52 +0200
Subject: [PATCH 093/144] removed mugshot button and fixed upload photo button

removed mugshot button and fixed upload photo button
---
 .../report-editor/SuspectsManager.svelte      | 275 ++++++++++++++++--
 1 file changed, 250 insertions(+), 25 deletions(-)

diff --git a/web/src/components/report-editor/SuspectsManager.svelte b/web/src/components/report-editor/SuspectsManager.svelte
index 0511ec71..efd074d5 100644
--- a/web/src/components/report-editor/SuspectsManager.svelte
+++ b/web/src/components/report-editor/SuspectsManager.svelte
@@ -2,6 +2,51 @@
 	import type { Suspect } from "../../interfaces/IReportEditor";
 	import PersonnelSection from "./PersonnelSection.svelte";
 	import PersonnelCard from "./PersonnelCard.svelte";
+	import { globalNotifications } from "../../services/notificationService.svelte";
+	import { fetchNui } from "../../utils/fetchNui";
+	import { NUI_EVENTS } from "../../constants/nuiEvents";
+
+	let photoModalOpen = $state(false);
+	let photoUrlInput = $state("");
+	let photoSaving = $state(false);
+	let photoTargetSuspect: Suspect | null = $state(null);
+
+	function openPhotoModal(suspect: Suspect) {
+		photoTargetSuspect = suspect;
+		photoUrlInput = "";
+		photoModalOpen = true;
+	}
+
+	function closePhotoModal() {
+		photoModalOpen = false;
+		photoUrlInput = "";
+		photoTargetSuspect = null;
+	}
+
+
+	async function confirmPhotoUrl() {
+		const url = photoUrlInput.trim();
+		if (!url || !photoTargetSuspect || photoSaving) return;
+		photoSaving = true;
+		try {
+			const result = await fetchNui<{ success: boolean; message?: string }>(
+				NUI_EVENTS.CITIZEN.UPLOAD_SUSPECT_PHOTO,
+				{ citizenid: photoTargetSuspect.citizenid, image: url },
+				{ success: true, message: "Photo updated" },
+			);
+			if (result.success) {
+				onUpdate({ ...photoTargetSuspect, profileImage: url });
+				globalNotifications.success(result.message || "Photo updated successfully");
+				closePhotoModal();
+			} else {
+				globalNotifications.error(result.message || "Failed to update photo");
+			}
+		} catch {
+			globalNotifications.error("Failed to update photo");
+		} finally {
+			photoSaving = false;
+		}
+	}
 
 	interface Props {
 		suspects: Suspect[];
@@ -43,32 +88,18 @@
 		{#if !suspect.profileImage}
 			<div class="image-warning">
 				<svg class="warning-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-				<span class="warning-text">No mugshot on file for <strong>{suspect.fullName}</strong>.</span>
+				<span class="warning-text">No Picture on file for <strong>{suspect.fullName}</strong>.</span>
 				<div class="warning-actions">
-					{#if onUploadPhoto}
-						<button
-							class="warning-action-btn"
-							onclick={() => onUploadPhoto(suspect)}
-							disabled={!suspect.citizenid}
-							type="button"
-							title="Upload a photo"
-						>
-							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-							Upload
-						</button>
-					{/if}
-					{#if onTakeMugshot}
-						<button
-							class="warning-action-btn"
-							onclick={() => onTakeMugshot(suspect)}
-							disabled={!suspect.citizenid}
-							type="button"
-							title="Take mugshot (suspect must be online)"
-						>
-							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
-							Take Mugshot
-						</button>
-					{/if}
+					<button
+						class="warning-action-btn"
+						onclick={() => openPhotoModal(suspect)}
+						disabled={!suspect.citizenid}
+						type="button"
+						title="Upload a photo"
+					>
+						<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+						Upload a photo
+					</button>
 				</div>
 			</div>
 		{/if}
@@ -137,6 +168,39 @@
 			{/snippet}
 		</PersonnelCard>
 	{/each}
+
+	{#if photoModalOpen}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="modal-overlay" onclick={(e) => { if (e.target === e.currentTarget) closePhotoModal(); }}>
+			<div class="modal-card photo-modal" onclick={(e) => e.stopPropagation()} role="dialog">
+				<div class="modal-header">
+					<h3>Set Profile Photo</h3>
+					<button class="modal-close" onclick={closePhotoModal}>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+					</button>
+				</div>
+				<div class="modal-body photo-modal-body">
+					<div class="photo-form-group">
+						<span class="photo-label">Image URL</span>
+						<input
+							class="photo-input"
+							type="url"
+							placeholder="https://example.com/photo.jpg"
+							bind:value={photoUrlInput}
+							onkeydown={(e) => { if (e.key === 'Enter') confirmPhotoUrl(); if (e.key === 'Escape') closePhotoModal(); }}
+						/>
+					</div>
+				</div>
+				<div class="modal-footer-row">
+					<button class="photo-cancel-btn" onclick={closePhotoModal} disabled={photoSaving}>Cancel</button>
+					<button class="photo-confirm-btn" onclick={confirmPhotoUrl} disabled={photoSaving || !photoUrlInput.trim()}>
+						{photoSaving ? "Saving…" : "Set Photo"}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 </PersonnelSection>
 
 <style>
@@ -230,4 +294,165 @@
 	.suspect-actions-row :global(.action-btn.bolo:hover) {
 		background: rgba(245, 158, 11, 0.15);
 	}
+
+	.modal-overlay {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 9999;
+		backdrop-filter: blur(2px);
+	}
+
+	.modal-card {
+		background: var(--dark-bg);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-radius: 8px;
+		width: 360px;
+		max-height: 80%;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.photo-modal {
+		width: min(380px, 92vw);
+	}
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 16px;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+		flex-shrink: 0;
+	}
+
+	.modal-header h3 {
+		margin: 0;
+		font-size: 12px;
+		font-weight: 600;
+		color: rgba(255, 255, 255, 0.85);
+	}
+
+	.modal-close {
+		background: transparent;
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		color: rgba(255, 255, 255, 0.3);
+		cursor: pointer;
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.1s;
+	}
+
+	.modal-close:hover {
+		color: rgba(255, 255, 255, 0.7);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.modal-body {
+		padding: 0;
+	}
+
+	.photo-modal-body {
+		padding: 14px 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.photo-form-group {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.photo-label {
+		color: rgba(255, 255, 255, 0.35);
+		font-size: 9px;
+		font-weight: 600;
+		margin-top: 5px;
+		text-transform: uppercase;
+		letter-spacing: 0.6px;
+	}
+
+	.photo-input {
+		display: flex;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 5px 8px;
+		color: rgba(255, 255, 255, 0.8);
+		font-size: 11px;
+		transition: border-color 0.1s;
+		font-family: inherit;
+		width: 90%;
+	}
+
+	.photo-input:focus {
+		outline: none;
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.photo-input::placeholder {
+		color: rgba(255, 255, 255, 0.2);
+	}
+
+	.modal-footer-row {
+		display: flex;
+		justify-content: flex-end;
+		gap: 6px;
+		padding: 10px 16px;
+		border-top: 1px solid rgba(255, 255, 255, 0.06);
+	}
+
+	.photo-cancel-btn {
+		background: transparent;
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		border-radius: 3px;
+		padding: 4px 10px;
+		color: rgba(255, 255, 255, 0.4);
+		font-size: 10px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+
+	.photo-cancel-btn:hover:not(:disabled) {
+		color: rgba(255, 255, 255, 0.7);
+		border-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.photo-cancel-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.photo-confirm-btn {
+		background: rgba(16, 185, 129, 0.06);
+		color: rgba(52, 211, 153, 0.7);
+		border: 1px solid rgba(16, 185, 129, 0.1);
+		border-radius: 3px;
+		padding: 4px 12px;
+		font-size: 10px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.1s;
+	}
+
+	.photo-confirm-btn:hover:not(:disabled) {
+		background: rgba(16, 185, 129, 0.12);
+		color: rgba(110, 231, 183, 0.9);
+	}
+
+	.photo-confirm-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
 </style>

From dc476410430d0644af5c7b26b3db9d4cb2385565 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:28:58 +0200
Subject: [PATCH 094/144] Update README.md

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 41113f44..89e39b04 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,13 @@
 THIS CHANGES NEEDS TO BE DONE:
 ```lua
+CREATE TABLE IF NOT EXISTS mdt_patrols (
+   id VARCHAR(64) PRIMARY KEY,
+   name VARCHAR(64) NOT NULL,
+   color VARCHAR(7) NOT NULL,
+   sort_order INT NOT NULL DEFAULT 0,
+   member_ids TEXT NOT NULL DEFAULT '[]'
+);
+
 ALTER TABLE mdt_reports_evidence
   ADD COLUMN title VARCHAR(255) NOT NULL DEFAULT '' AFTER reportid,
   ADD COLUMN images LONGTEXT NULL DEFAULT NULL AFTER stored;

From b8d5c8aa9632257347f6b70321980fd3ec10c4af Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:30:04 +0200
Subject: [PATCH 095/144] Add files via upload

---
 web/src/constants/management.ts |  3 +++
 web/src/constants/nuiEvents.ts  | 10 +++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/src/constants/management.ts b/web/src/constants/management.ts
index a15dda8d..03927112 100644
--- a/web/src/constants/management.ts
+++ b/web/src/constants/management.ts
@@ -140,6 +140,9 @@ export const PERMISSION_CATEGORIES: PermissionCategory[] = [
 		label: "Dispatch",
 		icon: "cell_tower",
 		permissions: [
+			{ key: "map_patrols_view",   label: "View Patrols",   description: "View patrol assignments on the map" },
+			{ key: "map_patrols_manage", label: "Manage Patrols", description: "Assign or remove officers from patrols" },
+			{ key: "map_patrols_edit",   label: "Edit Patrols",   description: "Create, rename, delete and reorder patrols" },
 			{ key: "dispatch_attach", label: "Attach to Calls", description: "Attach or detach from dispatch calls" },
 			{ key: "dispatch_route", label: "Route to Calls", description: "Set GPS route to dispatch calls" },
 		],
diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index bbd10146..d20ba376 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -211,7 +211,15 @@ export const NUI_EVENTS = {
 		VIEW_BODYCAM: "viewBodycam",
 	},
 	MAP: {
-		GET_TRACKING: "getTracking",
+		GET_TRACKING:       "getTracking",
+		GET_PATROLS:        "getPatrols",
+        CREATE_PATROL:      "createPatrol",
+        DELETE_PATROL:      "deletePatrol",
+        RENAME_PATROL:      "renamePatrol",
+        ASSIGN_OFFICER:     "assignOfficer",
+        REMOVE_FROM_PATROL: "removeFromPatrol",
+		SAVE_UI_STATE: "saveMapUiState",
+		REORDER_PATROLS: "reorderPatrols",
 	},
 	MANAGEMENT: {
 		GET_PERMISSION_ROLES: "getPermissionRoles",

From 5b64a221e858d4843d6ea1088850d3e7759a5f08 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:30:43 +0200
Subject: [PATCH 096/144] Update config.lua

---
 config.lua | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/config.lua b/config.lua
index 31fe01c1..d8a43d3c 100644
--- a/config.lua
+++ b/config.lua
@@ -241,6 +241,9 @@ Config.ManagementPermissions = {
     'charges_view',
     'charges_edit',
     -- Dispatch
+    'map_patrols_view',
+    "map_patrols_manage",
+    "map_patrols_edit",
     'dispatch_attach',
     'dispatch_route',
     -- Cameras & Bodycams

From fa990e8f0455a632727f4c125c8e224a76188ef9 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:31:18 +0200
Subject: [PATCH 097/144] Add files via upload

---
 server/backend/management.lua |   2 +-
 server/backend/tracking.lua   | 272 ++++++++++++++++++++++++++++------
 2 files changed, 230 insertions(+), 44 deletions(-)

diff --git a/server/backend/management.lua b/server/backend/management.lua
index 5b3e3511..2b2c0da9 100644
--- a/server/backend/management.lua
+++ b/server/backend/management.lua
@@ -66,7 +66,7 @@ local function getAllPermissions()
         'reports_view', 'reports_create', 'reports_delete',
         'warrants_view', 'warrants_issue', 'warrants_close',
         'charges_view', 'charges_edit',
-        'dispatch_attach', 'dispatch_route',
+        'map_patrols_view', 'map_patrols_manage', 'map_patrols_edit', 'dispatch_attach', 'dispatch_route', 
         'cameras_view', 'bodycams_view',
         'roster_manage_certifications', 'roster_manage_officers',
         'management_permissions', 'management_bulletins', 'management_activity',
diff --git a/server/backend/tracking.lua b/server/backend/tracking.lua
index 3b9541b8..f89106ee 100644
--- a/server/backend/tracking.lua
+++ b/server/backend/tracking.lua
@@ -1,17 +1,73 @@
+-- server_patrols.lua
 local resourceName = tostring(GetCurrentResourceName())
 local vehicleCache = {}
 local cacheVehicleCooldowns = {}
+local patrols = {}       -- { [id] = patrol }
+local patrolOrder = {}   -- { id, id, id, ... } – ordered list
+
+-- ─── Validierung ──────────────────────────────────────────────────────────
+
+local function isValidPatrolId(id)
+    return type(id) == "string" and #id > 0 and #id <= 64
+end
+local function isValidColor(color)
+    return type(color) == "string" and color:match("^#%x%x%x%x%x%x$")
+end
+local function isValidName(name)
+    return type(name) == "string" and #name > 0 and #name <= 64
+end
+local function isValidCitizenId(cid)
+    return type(cid) == "string" and #cid > 0 and #cid <= 64
+end
+
+-- ─── DB ───────────────────────────────────────────────────────────────────
+
+local function savePatrol(patrol)
+    if not patrol then return end
+    MySQL.insert(
+        "INSERT INTO mdt_patrols (id, name, color, member_ids, sort_order) VALUES (?, ?, ?, ?, ?) " ..
+        "ON DUPLICATE KEY UPDATE name = VALUES(name), color = VALUES(color), member_ids = VALUES(member_ids), sort_order = VALUES(sort_order)",
+        { patrol.id, patrol.name, patrol.color, json.encode(patrol.memberIds), patrol.sortOrder or 0 }
+    )
+end
+
+local function deletePatrolFromDB(id)
+    MySQL.execute("DELETE FROM mdt_patrols WHERE id = ?", { id })
+end
+
+local function saveOrder()
+    for i, id in ipairs(patrolOrder) do
+        if patrols[id] then
+            patrols[id].sortOrder = i
+            MySQL.execute("UPDATE mdt_patrols SET sort_order = ? WHERE id = ?", { i, id })
+        end
+    end
+end
+
+-- ─── Broadcast ────────────────────────────────────────────────────────────
+
+-- Sends patrols as sorted array instead of map,
+-- so all clients see the same order
+local function broadcastPatrols(action, citizenid)
+    local ordered = {}
+    for _, id in ipairs(patrolOrder) do
+        if patrols[id] then
+            ordered[#ordered + 1] = patrols[id]
+        end
+    end
+    TriggerClientEvent(resourceName .. ":client:syncPatrols", -1, ordered, action, citizenid)
+end
+
+-- ─── Tracking ─────────────────────────────────────────────────────────────
 
 local function getAllTrackers()
     local vehicles = {}
     local bodycams = {}
     local seenVehicles = {}
 
-    local players = {}
-
     if exports['qb-core'] then
         local QBCore = exports['qb-core']:GetCoreObject()
-        players = QBCore.Functions.GetQBPlayers() or {}
+        local players = QBCore.Functions.GetQBPlayers() or {}
 
         for _, player in pairs(players) do
             local data = player.PlayerData
@@ -23,22 +79,14 @@ local function getAllTrackers()
             if not ped or ped == 0 then goto continue end
 
             local coords = GetEntityCoords(ped)
-            local heading = GetEntityHeading(ped)
-            local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
-
-            local name = data.charinfo.firstname .. ' ' .. data.charinfo.lastname
-            local callsign = data.metadata and data.metadata.callsign or nil
-            local rank = data.job.grade and data.job.grade.name or 'Officer'
-
-            local entry = {
+            bodycams[#bodycams + 1] = {
                 citizenid = data.citizenid,
-                name = name,
-                callsign = callsign,
-                rank = rank,
-                coords = coordsTable,
-                heading = heading,
+                name = data.charinfo.firstname .. ' ' .. data.charinfo.lastname,
+                callsign = data.metadata and data.metadata.callsign or nil,
+                rank = data.job.grade and data.job.grade.name or 'Officer',
+                coords = { x = coords.x, y = coords.y, z = coords.z },
+                heading = GetEntityHeading(ped),
             }
-            bodycams[#bodycams + 1] = entry
 
             local veh = GetVehiclePedIsIn(ped, false)
             if veh and veh ~= 0 and not seenVehicles[veh] then
@@ -53,16 +101,13 @@ local function getAllTrackers()
                 vehicles[#vehicles + 1] = vEntry
                 vehicleCache[plate] = vEntry
             end
-
             ::continue::
         end
 
     elseif ps and ps.getAllPlayers then
         local playerList = ps.getAllPlayers() or {}
-
         for _, playerId in pairs(playerList) do
             if not (ps.getJobDuty and ps.getJobDuty(playerId)) then goto continue end
-
             local jobName = ps.getJobName and ps.getJobName(playerId) or nil
             local jobType = ps.getJobType and ps.getJobType(playerId) or nil
             if not IsPoliceJob(jobName, jobType) then goto continue end
@@ -71,20 +116,14 @@ local function getAllTrackers()
             if not ped or ped == 0 then goto continue end
 
             local coords = GetEntityCoords(ped)
-            local heading = GetEntityHeading(ped)
-            local coordsTable = { x = coords.x, y = coords.y, z = coords.z }
-            local name = (ps.getPlayerName and ps.getPlayerName(playerId)) or GetPlayerName(playerId) or 'Unknown'
-            local callsign = ps.getMetadata and ps.getMetadata(playerId, 'callsign') or nil
-
-            local entry = {
+            bodycams[#bodycams + 1] = {
                 citizenid = ps.getIdentifier and ps.getIdentifier(playerId) or nil,
-                name = name,
-                callsign = callsign,
+                name = (ps.getPlayerName and ps.getPlayerName(playerId)) or GetPlayerName(playerId) or 'Unknown',
+                callsign = ps.getMetadata and ps.getMetadata(playerId, 'callsign') or nil,
                 rank = ps.getJobGradeName and ps.getJobGradeName(playerId) or 'Officer',
-                coords = coordsTable,
-                heading = heading,
+                coords = { x = coords.x, y = coords.y, z = coords.z },
+                heading = GetEntityHeading(ped),
             }
-            bodycams[#bodycams + 1] = entry
 
             local veh = GetVehiclePedIsIn(ped, false)
             if veh and veh ~= 0 and not seenVehicles[veh] then
@@ -99,11 +138,11 @@ local function getAllTrackers()
                 vehicles[#vehicles + 1] = vEntry
                 vehicleCache[plate] = vEntry
             end
-
             ::continue::
         end
     end
 
+    -- Cached vehicles not currently driven by anyone
     for plate, cacheData in pairs(vehicleCache) do
         if not seenVehicles[cacheData._entity] then
             local alreadyAdded = false
@@ -123,17 +162,14 @@ ps.registerCallback(resourceName .. ':server:getTracking', function(source)
     if not CheckAuth(source) then
         return { vehicles = {}, bodycams = {} }
     end
-
     local vehicles, bodycams = getAllTrackers()
     return { vehicles = vehicles, bodycams = bodycams }
 end)
 
 RegisterNetEvent(resourceName .. ':server:cacheVehicle', function(plate, coords, heading)
     local src = source
-
     if type(plate) ~= 'string' or #plate == 0 or #plate > 8 then return end
-    if type(coords) ~= 'table' or type(coords.x) ~= 'number'
-       or type(coords.y) ~= 'number' or type(coords.z) ~= 'number' then return end
+    if type(coords) ~= 'table' or type(coords.x) ~= 'number' or type(coords.y) ~= 'number' or type(coords.z) ~= 'number' then return end
     if type(heading) ~= 'number' or heading < 0 or heading > 360 then return end
     if coords.x < -4000 or coords.x > 4000 or coords.y < -4000 or coords.y > 8000 then return end
 
@@ -156,22 +192,15 @@ RegisterNetEvent(resourceName .. ':server:cacheVehicle', function(plate, coords,
     }
 end)
 
-AddEventHandler('playerDropped', function()
-    cacheVehicleCooldowns[source] = nil
-end)
-
 RegisterNetEvent('baseevents:leftVehicle', function(vehicle, seat, model, netId)
     local src = source
     if not CheckAuth(src) then return end
-
     local veh = NetworkGetEntityFromNetworkId(netId)
     if not veh or veh == 0 then return end
-
     local coords = GetEntityCoords(veh)
     local heading = GetEntityHeading(veh)
     local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
     if not plate or #plate == 0 then return end
-
     TriggerClientEvent(resourceName .. ':client:checkVehicleClass', src, netId, plate,
         { x = coords.x, y = coords.y, z = coords.z }, heading)
 end)
@@ -182,4 +211,161 @@ AddEventHandler('entityRemoved', function(entity)
     if not plate or plate == '' then return end
     plate = plate:gsub('%s+', '')
     vehicleCache[plate] = nil
+end)
+
+-- ─── Patrols ──────────────────────────────────────────────────────────────
+
+ps.registerCallback(resourceName .. ":server:getPatrols", function(source)
+    if not CheckAuth(source) then return {} end
+    -- Return sorted array
+    local ordered = {}
+    for _, id in ipairs(patrolOrder) do
+        if patrols[id] then
+            ordered[#ordered + 1] = patrols[id]
+        end
+    end
+    return ordered
+end)
+
+RegisterNetEvent(resourceName .. ":server:createPatrol", function(id, name, color)
+    local src = source
+    if not CheckAuth(src) then return end
+    if not isValidPatrolId(id) or not isValidName(name) or not isValidColor(color) then return end
+    if patrols[id] then return end
+
+    local sortOrder = #patrolOrder + 1
+    patrols[id] = { id = id, name = name, color = color, memberIds = {}, sortOrder = sortOrder }
+    patrolOrder[#patrolOrder + 1] = id
+    broadcastPatrols()
+    savePatrol(patrols[id])
+end)
+
+RegisterNetEvent(resourceName .. ":server:deletePatrol", function(id)
+    local src = source
+    if not CheckAuth(src) then return end
+    if not isValidPatrolId(id) then return end
+
+    patrols[id] = nil
+    -- Remove from order list
+    for i = #patrolOrder, 1, -1 do
+        if patrolOrder[i] == id then
+            table.remove(patrolOrder, i)
+            break
+        end
+    end
+    deletePatrolFromDB(id)
+    saveOrder()
+    broadcastPatrols()
+end)
+
+RegisterNetEvent(resourceName .. ":server:renamePatrol", function(id, newName)
+    local src = source
+    if not CheckAuth(src) then return end
+    if not isValidPatrolId(id) or not isValidName(newName) then return end
+    if not patrols[id] then return end
+
+    patrols[id].name = newName
+    broadcastPatrols()
+    savePatrol(patrols[id])
+end)
+
+-- New order from client – ids is an array of patrol IDs in the desired order
+RegisterNetEvent(resourceName .. ":server:reorderPatrols", function(ids)
+    local src = source
+    if not CheckAuth(src) then return end
+    if type(ids) ~= "table" then return end
+
+    -- Validate: only known IDs, no duplicates
+    local seen = {}
+    local newOrder = {}
+    for _, id in ipairs(ids) do
+        if isValidPatrolId(id) and patrols[id] and not seen[id] then
+            seen[id] = true
+            newOrder[#newOrder + 1] = id
+        end
+    end
+    -- Append any missing IDs
+    for _, id in ipairs(patrolOrder) do
+        if not seen[id] then
+            newOrder[#newOrder + 1] = id
+        end
+    end
+
+    patrolOrder = newOrder
+    saveOrder()
+    broadcastPatrols()
+end)
+
+RegisterNetEvent(resourceName .. ":server:assignOfficer", function(patrolId, citizenId)
+    local src = source
+    if not CheckAuth(src) then return end
+    if not isValidPatrolId(patrolId) or not isValidCitizenId(citizenId) then return end
+    if not patrols[patrolId] then return end
+
+    for _, patrol in pairs(patrols) do
+        for i = #patrol.memberIds, 1, -1 do
+            if patrol.memberIds[i] == citizenId then
+                table.remove(patrol.memberIds, i)
+            end
+        end
+    end
+    table.insert(patrols[patrolId].memberIds, citizenId)
+    broadcastPatrols("assigned", citizenId)
+    savePatrol(patrols[patrolId])
+end)
+
+RegisterNetEvent(resourceName .. ":server:removeFromPatrol", function(citizenId)
+    local src = source
+    if not CheckAuth(src) then return end
+    if not isValidCitizenId(citizenId) then return end
+
+    for _, patrol in pairs(patrols) do
+        for i = #patrol.memberIds, 1, -1 do
+            if patrol.memberIds[i] == citizenId then
+                table.remove(patrol.memberIds, i)
+                savePatrol(patrol)
+            end
+        end
+    end
+    broadcastPatrols("removed", citizenId)
+end)
+
+AddEventHandler("playerDropped", function()
+    cacheVehicleCooldowns[source] = nil
+
+    if exports["qb-core"] then
+        local QBCore = exports["qb-core"]:GetCoreObject()
+        local player = QBCore.Functions.GetPlayer(source)
+        if player then
+            local citizenId = player.PlayerData.citizenid
+            for _, patrol in pairs(patrols) do
+                for i = #patrol.memberIds, 1, -1 do
+                    if patrol.memberIds[i] == citizenId then
+                        table.remove(patrol.memberIds, i)
+                        savePatrol(patrol)
+                    end
+                end
+            end
+            broadcastPatrols()
+        end
+    end
+end)
+
+AddEventHandler("onResourceStart", function(res)
+    if res ~= resourceName then return end
+    local rows = MySQL.query.await("SELECT * FROM mdt_patrols ORDER BY sort_order ASC")
+    patrolOrder = {}
+    for _, row in ipairs(rows) do
+        patrols[row.id] = {
+            id = row.id,
+            name = row.name,
+            color = row.color,
+            memberIds = {},
+            sortOrder = row.sort_order or 0,
+        }
+        patrolOrder[#patrolOrder + 1] = row.id
+    end
+    -- Clear members in DB as well
+    MySQL.execute("UPDATE mdt_patrols SET member_ids = '[]'", {})
+    print("[MDT] " .. #rows .. " patrols loaded.")
 end)
\ No newline at end of file

From 70752b38c05a56676962b42939a7ce09b08b0727 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:31:38 +0200
Subject: [PATCH 098/144] Add files via upload

---
 client/keys.lua | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/keys.lua b/client/keys.lua
index 3daa614f..0e0023f8 100644
--- a/client/keys.lua
+++ b/client/keys.lua
@@ -147,7 +147,8 @@ function OpenMDT()
     MDTOpen = true
 
     SendNUI('setVisible', { visible = true, debugMode = Config.Debug })
-
+    SendMapUiState()
+    
     if isCivilian then
         -- Civilian mode: send auth with civilian flag
         local playerData = ps.getPlayerData()

From 1dd17c64be8d1bdc3abcaf70f1a8f23e93d0b581 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:32:11 +0200
Subject: [PATCH 099/144] Add files via upload

---
 client/backend/tracking.lua | 103 ++++++++++++++++++++++++++++++++----
 1 file changed, 94 insertions(+), 9 deletions(-)

diff --git a/client/backend/tracking.lua b/client/backend/tracking.lua
index 3895731c..fc9d2a90 100644
--- a/client/backend/tracking.lua
+++ b/client/backend/tracking.lua
@@ -1,24 +1,109 @@
+-- client_patrols.lua
 local resourceName = tostring(GetCurrentResourceName())
 
-RegisterNUICallback('getTracking', function(_, cb)
+-- UI state held in Lua client (survives MDT open/close)
+local mapUiState = {
+    sidebarOpen  = true,
+    officersOpen = true,
+    patrolsOpen  = true,
+}
+
+-- ─── Server → NUI ─────────────────────────────────────────────────────────
+
+RegisterNetEvent(resourceName .. ":client:syncPatrols", function(patrols, action, citizenid)
+    SendNUIMessage({ type = "syncPatrols", data = patrols, action = action, citizenid = citizenid })
+end)
+
+RegisterNetEvent(resourceName .. ':client:checkVehicleClass', function(netId, plate, coords, heading)
+    local veh = NetworkGetEntityFromNetworkId(netId)
+    if not veh or veh == 0 then return end
+    if GetVehicleClass(veh) ~= 18 then return end
+    TriggerServerEvent(resourceName .. ':server:cacheVehicle', plate, coords, heading)
+end)
+
+-- ─── UI State ─────────────────────────────────────────────────────────────
+
+-- Call this in client.lua after SendNUI('setVisible', { visible = true })
+function SendMapUiState()
+    SendNUIMessage({ type = "mapUiState", data = mapUiState })
+end
+
+RegisterNUICallback("saveMapUiState", function(data, cb)
+    if type(data.key) == "string" and type(data.value) == "boolean" then
+        mapUiState[data.key] = data.value
+    end
+    cb({})
+end)
+
+-- ─── Tracking ─────────────────────────────────────────────────────────────
+
+-- Register only once – always call cb() to prevent timeout
+RegisterNUICallback("getTracking", function(_, cb)
     if not MDTOpen then
-        cb({ success = false, message = 'MDT is not open', data = {} })
+        cb({ success = false, data = { vehicles = {}, bodycams = {} } })
         return
     end
 
-    local tracking = ps.callback(resourceName .. ':server:getTracking')
+    local tracking = ps.callback(resourceName .. ":server:getTracking")
     if tracking then
         cb({ success = true, data = tracking })
     else
-        cb({ success = false, message = 'Failed to fetch tracking data', data = {} })
+        cb({ success = false, data = { vehicles = {}, bodycams = {} } })
     end
 end)
 
-RegisterNetEvent(resourceName .. ':client:checkVehicleClass', function(netId, plate, coords, heading)
-    local veh = NetworkGetEntityFromNetworkId(netId)
-    if not veh or veh == 0 then return end
+-- ─── Patrols ──────────────────────────────────────────────────────────────
 
-    if GetVehicleClass(veh) ~= 18 then return end
+RegisterNUICallback("getPatrols", function(_, cb)
+    local result = ps.callback(resourceName .. ":server:getPatrols")
+    cb({ success = true, data = result or {} })
+end)
 
-    TriggerServerEvent(resourceName .. ':server:cacheVehicle', plate, coords, heading)
+RegisterNUICallback("createPatrol", function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    local id, name, color = data.id, data.name, data.color
+    if type(id) ~= "string" or type(name) ~= "string" or type(color) ~= "string" then
+        cb({ success = false }) return
+    end
+    TriggerServerEvent(resourceName .. ":server:createPatrol", id, name, color)
+    cb({ success = true })
+end)
+
+RegisterNUICallback("deletePatrol", function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    if type(data.id) ~= "string" then cb({ success = false }) return end
+    TriggerServerEvent(resourceName .. ":server:deletePatrol", data.id)
+    cb({ success = true })
+end)
+
+RegisterNUICallback("renamePatrol", function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    if type(data.id) ~= "string" or type(data.name) ~= "string" then
+        cb({ success = false }) return
+    end
+    TriggerServerEvent(resourceName .. ":server:renamePatrol", data.id, data.name)
+    cb({ success = true })
+end)
+
+RegisterNUICallback("assignOfficer", function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    if type(data.patrolId) ~= "string" or type(data.citizenId) ~= "string" then
+        cb({ success = false }) return
+    end
+    TriggerServerEvent(resourceName .. ":server:assignOfficer", data.patrolId, data.citizenId)
+    cb({ success = true })
+end)
+
+RegisterNUICallback("reorderPatrols", function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    if type(data.ids) ~= "table" then cb({ success = false }) return end
+    TriggerServerEvent(resourceName .. ":server:reorderPatrols", data.ids)
+    cb({ success = true })
+end)
+
+RegisterNUICallback("removeFromPatrol", function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    if type(data.citizenId) ~= "string" then cb({ success = false }) return end
+    TriggerServerEvent(resourceName .. ":server:removeFromPatrol", data.citizenId)
+    cb({ success = true })
 end)
\ No newline at end of file

From 2d847bb030b74c8361d0b02892db3bf478f3ebaa Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:32:44 +0200
Subject: [PATCH 100/144] Add files via upload

---
 web/src/components/ContentArea.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/ContentArea.svelte b/web/src/components/ContentArea.svelte
index cd5c3fbe..043e66f9 100644
--- a/web/src/components/ContentArea.svelte
+++ b/web/src/components/ContentArea.svelte
@@ -208,7 +208,7 @@
 		{:else if activeComponent === "roster"}
 			<Roster {authService} {tabService} />
 		{:else if activeComponent === "map"}
-			<Map />
+			<Map {authService}/>
 		{:else if activeComponent === "vehicles"}
 			<Vehicles {tabService} />
 		{:else if activeComponent === "weapons"}

From 71aaa8216b6dbcee3aa79c3bd9dcb34bbf03424f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:33:13 +0200
Subject: [PATCH 101/144] Add files via upload


From d4c6a8f37ff640cacb8a7d9ca672d0611b825fb8 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:33:56 +0200
Subject: [PATCH 102/144] Add files via upload

---
 web/src/services/managementService.svelte.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/services/managementService.svelte.ts b/web/src/services/managementService.svelte.ts
index c4290af7..682a57b0 100644
--- a/web/src/services/managementService.svelte.ts
+++ b/web/src/services/managementService.svelte.ts
@@ -36,9 +36,9 @@ export function createManagementService() {
 			permissions = [...ALL_PERMISSION_KEYS];
 			// Dev mock: roles with escalating permissions (labels match whatever the job grades are)
 			const basicPerms = ["citizens_search", "bolos_view", "vehicles_search", "weapons_search", "reports_view", "warrants_view", "charges_view"];
-			const midPerms = [...basicPerms, "reports_create", "cases_view", "evidence_view", "bolos_create", "dispatch_attach", "dispatch_route"];
-			const seniorPerms = [...midPerms, "cases_create", "cases_edit", "evidence_create", "evidence_transfer", "reports_delete", "warrants_issue", "cameras_view", "bodycams_view", "citizens_edit_licenses", "vehicles_edit_dmv", "weapons_add"];
-			const commandPerms = [...seniorPerms, "cases_delete", "evidence_upload", "warrants_close", "charges_edit", "management_activity", "management_bulletins", "roster_manage_officers", "roster_manage_certifications"];
+			const midPerms = [...basicPerms, "reports_create", "cases_view", "evidence_view", "bolos_create", "dispatch_attach", "dispatch_route", "map_patrols_view"];
+			const seniorPerms = [...midPerms, "cases_create", "cases_edit", "evidence_create", "evidence_transfer", "reports_delete", "warrants_issue", "cameras_view", "bodycams_view", "citizens_edit_licenses", "vehicles_edit_dmv", "weapons_add", "map_patrols_manage",];
+			const commandPerms = [...seniorPerms, "cases_delete", "evidence_upload", "warrants_close", "charges_edit", "management_activity", "management_bulletins", "roster_manage_officers", "roster_manage_certifications", "map_patrols_edit"];
 			roles = [
 				{ key: "0", label: "Grade 0", permissions: basicPerms, isBoss: false },
 				{ key: "1", label: "Grade 1", permissions: midPerms, isBoss: false },

From c7bf4f4d01407319cf25464cf4a62cbefcb72ebb Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:34:20 +0200
Subject: [PATCH 103/144] Add files via upload

---
 web/src/pages/Map.svelte | 1284 +++++++++++++++++++++++++++++++++-----
 1 file changed, 1121 insertions(+), 163 deletions(-)

diff --git a/web/src/pages/Map.svelte b/web/src/pages/Map.svelte
index 5d012722..6da8c9fb 100644
--- a/web/src/pages/Map.svelte
+++ b/web/src/pages/Map.svelte
@@ -6,21 +6,100 @@
     import { isEnvBrowser } from "../utils/misc";
     import { NUI_EVENTS } from "../constants/nuiEvents";
     import { globalNotifications } from "../services/notificationService.svelte";
+    import type { AuthService } from "../services/authService.svelte";
 
+    interface Props {
+        authService?: AuthService;
+    }
+    let { authService }: Props = $props();
+
+    // Default true = everyone can use it unless authService explicitly denies
+    let canViewPatrols   = $derived(authService ? (authService.hasPermission("map_patrols_view")   ?? true) : true);
+    let canManagePatrols = $derived(authService ? (authService.hasPermission("map_patrols_manage") ?? true) : true);
+    let canEditPatrols   = $derived(authService ? (authService.hasPermission("map_patrols_edit")   ?? true) : true);
+
+    // ─── Map state ───────────────────────────────────────────────────────────
     let mapContainer: HTMLDivElement | null = null;
     let map: L.Map | null = null;
     let mapInitialized = false;
     let refreshTimer: ReturnType<typeof setInterval> | null = null;
 
     let tabVisible = $state(true);
-
-    let showVehicles = $state(true);
-    let showBodycams = $state(true);
-    let iconStyle = $state<"dot" | "badge">("dot");
+    let showVehicles = $state(localStorage.getItem("mdt_map_vehicles") !== "false");
+    let showBodycams = $state(localStorage.getItem("mdt_map_bodycams") !== "false");
+    let showPatrols  = $state(localStorage.getItem("mdt_map_patrols_layer") !== "false");
+    let iconStyle = $state<"dot" | "badge">(
+        (localStorage.getItem("mdt_map_icon_style") as "dot" | "badge") ?? "dot"
+    );
 
     let vehicleLayer = L.layerGroup();
     let bodycamLayer = L.layerGroup();
+    let patrolLayer = L.layerGroup();
+
+    // ─── Sidebar state ────────────────────────────────────────────────────────
+    // localStorage as default – overridden by Lua client on open
+    let sidebarOpen  = $state(localStorage.getItem("mdt_map_sidebar")   !== "false");
+    let officersOpen = $state(localStorage.getItem("mdt_map_officers")  !== "false");
+    let patrolsOpen  = $state(localStorage.getItem("mdt_map_patrols")   !== "false");
+
+    function toggleSidebar() {
+        sidebarOpen = !sidebarOpen;
+        localStorage.setItem("mdt_map_sidebar", String(sidebarOpen));
+        // Also save in Lua client (survives resource restart)
+        fetchNui(NUI_EVENTS.MAP.SAVE_UI_STATE, { key: "sidebarOpen", value: sidebarOpen }, {}).catch(() => {});
+    }
+    function toggleOfficers() {
+        officersOpen = !officersOpen;
+        localStorage.setItem("mdt_map_officers", String(officersOpen));
+        fetchNui(NUI_EVENTS.MAP.SAVE_UI_STATE, { key: "officersOpen", value: officersOpen }, {}).catch(() => {});
+    }
+    function togglePatrols() {
+        patrolsOpen = !patrolsOpen;
+        localStorage.setItem("mdt_map_patrols", String(patrolsOpen));
+        fetchNui(NUI_EVENTS.MAP.SAVE_UI_STATE, { key: "patrolsOpen", value: patrolsOpen }, {}).catch(() => {});
+    }
+
+    // Sidebar-Breite: 260px pro offenem Panel + 36px pro zugeklapptem + 1px Divider
+    let sidebarWidth = $derived(
+        (officersOpen ? 260 : 36) + 1 + (patrolsOpen ? 260 : 36)
+    );
 
+    // ─── Patrol types ─────────────────────────────────────────────────────────
+    type Bodycam = {
+        citizenid: string;
+        name: string;
+        callsign?: string;
+        rank?: string;
+        coords: { x: number; y: number; z: number };
+        heading?: number;
+    };
+
+    type Patrol = {
+        id: string;
+        name: string;
+        color: string;
+        memberIds: string[];
+    };
+
+    // ─── Officers & Patrols ───────────────────────────────────────────────────
+    let officers = $state<Bodycam[]>([]);
+    let patrols = $state<Patrol[]>([]);
+
+    // New patrol form
+    let newPatrolName = $state("");
+    let newPatrolColor = $state("#38bdf8");
+    let showCreateForm = $state(false);
+
+    // Edit patrol name
+    let editingPatrolId = $state<string | null>(null);
+    let editingPatrolName = $state("");
+
+    const PATROL_COLORS = [
+        "#38bdf8", "#f97316", "#a855f7", "#22c55e",
+        "#ef4444", "#eab308", "#ec4899", "#14b8a6"
+    ];
+
+    // ─── Helpers ──────────────────────────────────────────────────────────────
     const offsetX = 13;
     const offsetY = 5;
 
@@ -30,17 +109,19 @@
 
     function getTrackConfig(kind: "vehicle" | "bodycam") {
         if (kind === "vehicle") return { color: "#f97316", fill: "#fb923c", label: "V" };
-        if (kind === "bodycam") return { color: "#a855f7", fill: "#c084fc", label: "B" };
-        return { color: "#38bdf8", fill: "#0ea5e9", label: "O" };
+        return { color: "#a855f7", fill: "#c084fc", label: "B" };
     }
 
     function createMarker(
         kind: "vehicle" | "bodycam",
         coords: { x: number; y: number },
         label: string,
-        heading?: number
+        heading?: number,
+        patrolColor?: string
     ) {
         const config = getTrackConfig(kind);
+        const dotColor = patrolColor ?? config.fill;
+        const borderColor = patrolColor ? patrolColor : config.color;
         const latLng = toMapLatLng(coords);
         const rotation = heading != null ? 360 - heading : 0;
         const hasHeading = heading != null;
@@ -51,10 +132,10 @@
                     className: "",
                     html: `
                         <div class="tracking-badge-wrap" style="transform: rotate(${rotation}deg)">
-                            <div class="tracking-icon tracking-${kind}">
+                            <div class="tracking-icon tracking-${kind}" style="${patrolColor ? `background:${patrolColor}` : ""}">
                                 <span style="transform: rotate(-${rotation}deg)">${config.label}</span>
                             </div>
-                            ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
+                            ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}" style="${patrolColor ? `border-bottom-color:${patrolColor}` : ""}"></div>` : ""}
                         </div>
                     `,
                     iconSize: [28, 28],
@@ -68,8 +149,8 @@
                 className: "",
                 html: `
                     <div class="tracking-dot-wrap" style="transform: rotate(${rotation}deg)">
-                        <div class="tracking-dot" style="background:${config.fill}; border: 2px solid ${config.color}"></div>
-                        ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}"></div>` : ""}
+                        <div class="tracking-dot" style="background:${dotColor}; border: 2px solid ${borderColor}"></div>
+                        ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}" style="${patrolColor ? `border-bottom-color:${patrolColor}` : ""}"></div>` : ""}
                     </div>
                 `,
                 iconSize: [20, 20],
@@ -85,6 +166,57 @@
         return null;
     }
 
+    function getOfficerPatrol(citizenid: string): Patrol | undefined {
+        return patrols.find(p => p.memberIds.includes(citizenid));
+    }
+
+    function unassignedOfficers() {
+        return officers.filter(o => !patrols.some(p => p.memberIds.includes(o.citizenid)));
+    }
+
+    // ─── Patrol map labels ────────────────────────────────────────────────────
+    function refreshPatrolLabels() {
+        patrolLayer.clearLayers();
+        if (!showPatrols) return;
+
+        for (const patrol of patrols) {
+            const members = officers.filter(o => patrol.memberIds.includes(o.citizenid));
+            if (members.length === 0) continue;
+
+            // Centroid berechnen
+            const centroid = members.reduce(
+                (acc, o) => ({ x: acc.x + o.coords.x, y: acc.y + o.coords.y }),
+                { x: 0, y: 0 }
+            );
+            centroid.x /= members.length;
+            centroid.y /= members.length;
+
+            // Place label at the member closest to the centroid
+            
+            const anchor = members.reduce((closest, o) => {
+                const dx = o.coords.x - centroid.x;
+                const dy = o.coords.y - centroid.y;
+                const cdx = closest.coords.x - centroid.x;
+                const cdy = closest.coords.y - centroid.y;
+                return (dx*dx + dy*dy) < (cdx*cdx + cdy*cdy) ? o : closest;
+            });
+
+            const latLng = toMapLatLng(anchor.coords);
+
+            L.marker(latLng as any, {
+                icon: L.divIcon({
+                    className: "",
+                    html: `<div class="patrol-label" style="border-color:${patrol.color};color:${patrol.color}">${patrol.name}</div>`,
+                    iconSize: [null as any, null as any],
+                    iconAnchor: [0, 24], // offset upward above the marker
+                }),
+                interactive: false,
+                zIndexOffset: -100,
+            }).addTo(patrolLayer);
+        }
+    }
+
+    // ─── Refresh tracking ─────────────────────────────────────────────────────
     async function refreshTracking() {
         if (!map || !tabVisible) return;
         if (isEnvBrowser()) return;
@@ -93,15 +225,52 @@
             const response = await fetchNui(
                 NUI_EVENTS.MAP.GET_TRACKING,
                 {},
-                { data: { vehicles: [], bodycams: [] } }
+                { data: { vehicles: [], bodycams: [] } },
+                3000,
             );
+
+            // Bei Fehler oder leerem Response bestehende Daten behalten
+            const success = (response as any).success;
+            if (success === false) return;
+
             const data = (response as any).data ?? response;
+            const bodycams = (data as any).bodycams;
+            const vehicles = (data as any).vehicles;
+
+            // Nur updaten wenn der Server wirklich Daten geliefert hat
+            if (!Array.isArray(bodycams) && !Array.isArray(vehicles)) return;
 
             vehicleLayer.clearLayers();
             bodycamLayer.clearLayers();
 
+            const freshOfficers: Bodycam[] = [];
+
+            for (const bodycam of bodycams || []) {
+                const coords = normalizeCoords((bodycam as any).coords);
+                if (!coords) continue;
+
+                const bc: Bodycam = {
+                    citizenid: bodycam.citizenid ?? bodycam.name ?? String(Math.random()),
+                    name: bodycam.name ?? "",
+                    callsign: bodycam.callsign,
+                    rank: bodycam.rank,
+                    coords: { x: coords.x, y: coords.y, z: bodycam.coords?.z ?? 0 },
+                    heading: bodycam.heading,
+                };
+                freshOfficers.push(bc);
+
+                if (showBodycams) {
+                    const patrol = getOfficerPatrol(bc.citizenid);
+                    const label = `${[bc.rank, bc.callsign].filter(Boolean).join(" | ")}${bc.name ? " | " + bc.name : ""}`;
+                    const color = patrol?.color ?? "#6b7280";
+                    createMarker("bodycam", coords, label, bodycam.heading, color).addTo(bodycamLayer);
+                }
+            }
+
+            officers = freshOfficers;
+
             if (showVehicles) {
-                for (const vehicle of (data as any).vehicles || []) {
+                for (const vehicle of vehicles || []) {
                     const coords = normalizeCoords((vehicle as any).coords);
                     if (!coords) continue;
                     const label = `${(vehicle as any).plate || ""}`.trim();
@@ -109,37 +278,269 @@
                 }
             }
 
-            if (showBodycams) {
-                for (const bodycam of (data as any).bodycams || []) {
-                    const coords = normalizeCoords((bodycam as any).coords);
-                    if (!coords) continue;
-                    const label = `${[(bodycam as any).rank, (bodycam as any).callsign].filter(Boolean).join(" | ")}${(bodycam as any).name ? " | " + (bodycam as any).name : ""}`;
-                    createMarker("bodycam", coords, label, (bodycam as any).heading).addTo(bodycamLayer);
+            refreshPatrolLabels();
+        } catch {
+            // Timeout oder Netzwerkfehler – bestehende Officer/Marker behalten
+        }
+    }
+
+    // ─── Mouse-based Drag System (kein HTML5 draggable – CEF-kompatibel) ──────
+    type DragKind = "officer" | "patrol";
+    type DragState = {
+        kind: DragKind;
+        id: string;
+        label: string;
+        x: number;
+        y: number;
+        active: boolean;
+    };
+
+    let drag = $state<DragState | null>(null);
+    let dragOverPatrolId = $state<string | null>(null);
+    let dragOverPatrolSortId = $state<string | null>(null);
+    let isDragging = $state(false);
+
+    // Ghost element for visual drag feedback
+    let ghostEl: HTMLDivElement | null = null;
+
+    function createGhost(label: string, kind: DragKind, x: number, y: number) {
+        removeGhost();
+        ghostEl = document.createElement("div");
+        ghostEl.className = `drag-ghost drag-ghost--${kind}`;
+        ghostEl.textContent = label;
+        ghostEl.style.left = `${x + 12}px`;
+        ghostEl.style.top  = `${y - 16}px`;
+        document.body.appendChild(ghostEl);
+    }
+
+    function moveGhost(x: number, y: number) {
+        if (!ghostEl) return;
+        ghostEl.style.left = `${x + 12}px`;
+        ghostEl.style.top  = `${y - 16}px`;
+    }
+
+    function removeGhost() {
+        ghostEl?.remove();
+        ghostEl = null;
+    }
+
+    // Patrol-Card-Elemente per data-patrol-id finden
+    function getPatrolIdFromPoint(x: number, y: number): string | null {
+        const els = document.elementsFromPoint(x, y);
+        for (const el of els) {
+            const card = (el as HTMLElement).closest("[data-patrol-id]") as HTMLElement | null;
+            if (card) return card.dataset.patrolId ?? null;
+        }
+        return null;
+    }
+
+    function onMouseDown(e: MouseEvent, kind: DragKind, id: string, label: string) {
+        if (e.button !== 0) return;
+        e.preventDefault();
+        drag = { kind, id, label, x: e.clientX, y: e.clientY, active: false };
+    }
+
+    function onGlobalMouseMove(e: MouseEvent) {
+        if (!drag) return;
+
+        if (!drag.active) {
+            // Only count as drag after 5px movement
+            const dx = e.clientX - drag.x;
+            const dy = e.clientY - drag.y;
+            if (Math.sqrt(dx*dx + dy*dy) < 5) return;
+            drag.active = true;
+            isDragging = true;
+            createGhost(drag.label, drag.kind, e.clientX, e.clientY);
+        }
+
+        moveGhost(e.clientX, e.clientY);
+
+        const pid = getPatrolIdFromPoint(e.clientX, e.clientY);
+        if (drag.kind === "officer") {
+            dragOverPatrolId = pid;
+            dragOverPatrolSortId = null;
+        } else {
+            dragOverPatrolSortId = pid !== drag.id ? pid : null;
+            dragOverPatrolId = null;
+        }
+    }
+
+    function onGlobalMouseUp(e: MouseEvent) {
+        if (!drag) return;
+
+        if (drag.active) {
+            const pid = getPatrolIdFromPoint(e.clientX, e.clientY);
+
+            if (drag.kind === "officer") {
+                if (pid) {
+                    assignOfficer(drag.id, pid);
+                } else {
+                    // Auf Officers-Panel losgelassen → aus Streife entfernen
+                    const el = document.elementFromPoint(e.clientX, e.clientY);
+                    if (el?.closest(".panel-officers")) {
+                        removeFromPatrol(drag.id);
+                    }
+                }
+            } else if (drag.kind === "patrol" && pid && pid !== drag.id) {
+                // Streifen sortieren
+                const arr = [...patrols];
+                const fromIdx = arr.findIndex(p => p.id === drag!.id);
+                const toIdx   = arr.findIndex(p => p.id === pid);
+                if (fromIdx >= 0 && toIdx >= 0) {
+                    const [moved] = arr.splice(fromIdx, 1);
+                    arr.splice(toIdx, 0, moved);
+                    patrols = arr;
+                    syncPatrolOrder(arr);
                 }
             }
+        }
+
+        removeGhost();
+        drag = null;
+        isDragging = false;
+        dragOverPatrolId = null;
+        dragOverPatrolSortId = null;
+    }
+    function handleNuiMessage(event: MessageEvent) {
+        const { type, data } = event.data ?? {};
+
+        if (type === "setVisible") {
+            if (data?.visible === true) {
+                // Short delay to ensure MDTOpen is set in Lua client
+                setTimeout(() => {
+                    refreshTracking();
+                    loadPatrols();
+                }, 300);
+            }
+            return;
+        }
+
+        if (type === "mapUiState") {
+            // Lua client state overrides localStorage (authoritative after resource restart)
+            if (typeof data?.sidebarOpen  === "boolean") { sidebarOpen  = data.sidebarOpen;  localStorage.setItem("mdt_map_sidebar",  String(sidebarOpen)); }
+            if (typeof data?.officersOpen === "boolean") { officersOpen = data.officersOpen; localStorage.setItem("mdt_map_officers", String(officersOpen)); }
+            if (typeof data?.patrolsOpen  === "boolean") { patrolsOpen  = data.patrolsOpen;  localStorage.setItem("mdt_map_patrols",  String(patrolsOpen)); }
+            return;
+        }
+
+        if (type === "syncPatrols") {
+            // Server sends sorted array
+            patrols = Array.isArray(data) ? data as Patrol[] : Object.values(data as Record<string, Patrol>);
+            refreshPatrolLabels();
+            // Trigger animation for all clients based on server hint
+            const msg = event.data as any;
+            if (msg.action === "assigned" && msg.citizenid) flashAssigned(msg.citizenid);
+            if (msg.action === "removed"  && msg.citizenid) flashRemoved(msg.citizenid);
+        }
+    }
+
+    // ─── Assignment animation state ───────────────────────────────────────────
+    let recentlyAssigned = $state<Set<string>>(new Set());
+    let recentlyRemoved  = $state<Set<string>>(new Set());
+
+    function flashAssigned(citizenid: string) {
+        recentlyAssigned = new Set([...recentlyAssigned, citizenid]);
+        setTimeout(() => {
+            recentlyAssigned = new Set([...recentlyAssigned].filter(id => id !== citizenid));
+        }, 700);
+    }
+
+    function flashRemoved(citizenid: string) {
+        recentlyRemoved = new Set([...recentlyRemoved, citizenid]);
+        setTimeout(() => {
+            recentlyRemoved = new Set([...recentlyRemoved].filter(id => id !== citizenid));
+        }, 700);
+    }
+    async function loadPatrols() {
+        if (isEnvBrowser()) return;
+        try {
+            const res = await fetchNui(NUI_EVENTS.MAP.GET_PATROLS, {}, { success: true, data: [] });
+            const data = (res as any).data ?? res;
+            patrols = Array.isArray(data) ? data as Patrol[] : Object.values(data as Record<string, Patrol>);
+            refreshPatrolLabels();
         } catch {
-            globalNotifications.error("Failed to refresh tracking");
+            globalNotifications.error("Failed to load patrols");
+        }
+    }
+
+    // Doppelter Name?
+    function patrolNameExists(name: string, excludeId?: string) {
+        return patrols.some(p => p.name.toLowerCase() === name.toLowerCase() && p.id !== excludeId);
+    }
+
+    async function createPatrol() {
+        const name = newPatrolName.trim();
+        if (!name) return;
+        if (patrolNameExists(name)) {
+            globalNotifications.error(`Patrol "${name}" already exists`);
+            return;
         }
+        const id = crypto.randomUUID();
+        try {
+            await fetchNui(NUI_EVENTS.MAP.CREATE_PATROL, { id, name, color: newPatrolColor }, { success: true });
+        } catch { /* Server broadcasts syncPatrols */ }
+        newPatrolName = "";
+        showCreateForm = false;
     }
 
+    async function deletePatrol(id: string) {
+        try {
+            await fetchNui(NUI_EVENTS.MAP.DELETE_PATROL, { id }, { success: true });
+        } catch { /* Server broadcastet syncPatrols */ }
+    }
+
+    async function renamePatrolOnServer(id: string, name: string) {
+        if (patrolNameExists(name, id)) {
+            globalNotifications.error(`Patrol "${name}" already exists`);
+            return;
+        }
+        try {
+            await fetchNui(NUI_EVENTS.MAP.RENAME_PATROL, { id, name }, { success: true });
+        } catch { /* Server broadcastet syncPatrols */ }
+    }
+
+    async function assignOfficer(officerId: string, patrolId: string) {
+        try {
+            await fetchNui(NUI_EVENTS.MAP.ASSIGN_OFFICER, { patrolId, citizenId: officerId }, { success: true });
+        } catch { }
+    }
+
+    async function removeFromPatrol(officerId: string) {
+        try {
+            await fetchNui(NUI_EVENTS.MAP.REMOVE_FROM_PATROL, { citizenId: officerId }, { success: true });
+        } catch { }
+    }
+
+    // Move patrol up/down in the list
+    function movePatrol(id: string, dir: -1 | 1) {
+        const idx = patrols.findIndex(p => p.id === id);
+        if (idx < 0) return;
+        const newIdx = idx + dir;
+        if (newIdx < 0 || newIdx >= patrols.length) return;
+        const arr = [...patrols];
+        [arr[idx], arr[newIdx]] = [arr[newIdx], arr[idx]];
+        patrols = arr;
+        syncPatrolOrder(arr);
+    }
+
+    function syncPatrolOrder(arr: Patrol[]) {
+        fetchNui(NUI_EVENTS.MAP.REORDER_PATROLS, { ids: arr.map(p => p.id) }, { success: true }).catch(() => {});
+    }
+
+    // ─── NUI Message Listener (Server → Client → NUI sync) ───────────────────
     function handleVisibilityChange() {
         tabVisible = !document.hidden;
     }
 
     function syncLayerVisibility() {
         if (!map) return;
-
-        if (showVehicles) {
-            if (!map.hasLayer(vehicleLayer)) vehicleLayer.addTo(map);
-        } else if (map.hasLayer(vehicleLayer)) {
-            map.removeLayer(vehicleLayer);
-        }
-
-        if (showBodycams) {
-            if (!map.hasLayer(bodycamLayer)) bodycamLayer.addTo(map);
-        } else if (map.hasLayer(bodycamLayer)) {
-            map.removeLayer(bodycamLayer);
-        }
+        const toggle = (layer: L.LayerGroup, show: boolean) => {
+            if (show && !map!.hasLayer(layer)) layer.addTo(map!);
+            else if (!show && map!.hasLayer(layer)) map!.removeLayer(layer);
+        };
+        toggle(vehicleLayer, showVehicles);
+        toggle(bodycamLayer, showBodycams);
+        toggle(patrolLayer, showPatrols);
     }
 
     function getCustomCRS() {
@@ -191,6 +592,7 @@
 
         vehicleLayer = L.layerGroup().addTo(map);
         bodycamLayer = L.layerGroup().addTo(map);
+        patrolLayer = L.layerGroup().addTo(map);
 
         syncLayerVisibility();
         refreshTracking();
@@ -205,41 +607,48 @@
 
     onMount(() => {
         document.addEventListener("visibilitychange", handleVisibilityChange);
+        window.addEventListener("message", handleNuiMessage);
+        window.addEventListener("mousemove", onGlobalMouseMove);
+        window.addEventListener("mouseup", onGlobalMouseUp);
         initializeMap();
+        loadPatrols();
     });
 
     onDestroy(() => {
         document.removeEventListener("visibilitychange", handleVisibilityChange);
-
-        if (map) {
-            map.remove();
-            map = null;
-            mapInitialized = false;
-        }
-        if (refreshTimer) {
-            clearInterval(refreshTimer);
-            refreshTimer = null;
-        }
+        window.removeEventListener("message", handleNuiMessage);
+        window.removeEventListener("mousemove", onGlobalMouseMove);
+        window.removeEventListener("mouseup", onGlobalMouseUp);
+        removeGhost();
+        if (map) { map.remove(); map = null; mapInitialized = false; }
+        if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
     });
 
     $effect(() => { syncLayerVisibility(); });
     $effect(() => { iconStyle; refreshTracking(); });
+    $effect(() => { showPatrols; refreshPatrolLabels(); });
 </script>
 
 <div class="map-page">
-    <div class="map-wrapper">
+    <div class="map-wrapper" style="--sidebar-width:{sidebarWidth}px">
+
+        <!-- ── Left Controls ────────────────────────────────────── -->
         <div class="map-controls">
             <span class="controls-header">Tracking</span>
 
             <div class="controls-group">
                 <label class="control-toggle">
-                    <input type="checkbox" bind:checked={showVehicles} />
+                    <input type="checkbox" bind:checked={showVehicles} onchange={() => localStorage.setItem("mdt_map_vehicles", String(showVehicles))} />
                     <span class="toggle-label">Vehicles</span>
                 </label>
                 <label class="control-toggle">
-                    <input type="checkbox" bind:checked={showBodycams} />
+                    <input type="checkbox" bind:checked={showBodycams} onchange={() => localStorage.setItem("mdt_map_bodycams", String(showBodycams))} />
                     <span class="toggle-label">Bodycams</span>
                 </label>
+                <label class="control-toggle">
+                    <input type="checkbox" bind:checked={showPatrols} onchange={() => localStorage.setItem("mdt_map_patrols_layer", String(showPatrols))} />
+                    <span class="toggle-label">Patrols</span>
+                </label>
             </div>
 
             <div class="controls-divider"></div>
@@ -247,20 +656,8 @@
             <div class="controls-group">
                 <span class="controls-label">Style</span>
                 <div class="segment">
-                    <button
-                        class:active={iconStyle === "dot"}
-                        onclick={() => (iconStyle = "dot")}
-                        type="button"
-                    >
-                        Dots
-                    </button>
-                    <button
-                        class:active={iconStyle === "badge"}
-                        onclick={() => (iconStyle = "badge")}
-                        type="button"
-                    >
-                        Badges
-                    </button>
+                    <button class:active={iconStyle === "dot"} onclick={() => { iconStyle = "dot"; localStorage.setItem("mdt_map_icon_style", "dot"); }} type="button">Dots</button>
+                    <button class:active={iconStyle === "badge"} onclick={() => { iconStyle = "badge"; localStorage.setItem("mdt_map_icon_style", "badge"); }} type="button">Badges</button>
                 </div>
             </div>
 
@@ -268,14 +665,243 @@
 
             <div class="legend">
                 <span class="legend-item vehicle">Vehicle</span>
-                <span class="legend-item bodycam">Bodycam</span>
+                <span class="legend-item bodycam-unassigned">Unassigned</span>
+                {#each patrols.filter(p => p.memberIds.length > 0) as patrol}
+                    <span class="legend-item" style="--dot:{patrol.color}">{patrol.name}</span>
+                {/each}
+            </div>
+        </div>
+
+        <!-- ── Map ────────────────────────────────────────────────── -->
+        <div bind:this={mapContainer} class="map-container" class:map-no-pointer={isDragging}></div>
+
+        <!-- ── Sidebar Toggle Button ──────────────────────────────── -->
+        {#if canViewPatrols}
+        <button
+            class="sidebar-toggle"
+            class:open={sidebarOpen}
+            onclick={() => toggleSidebar()}
+            type="button"
+            title={sidebarOpen ? "Close sidebar" : "Manage patrols"}
+        >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                {#if sidebarOpen}
+                    <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                {:else}
+                    <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                {/if}
+            </svg>
+            {#if !sidebarOpen}
+                <span class="sidebar-toggle-label">Patrols</span>
+            {/if}
+        </button>
+
+        <!-- ── Right Sidebar ──────────────────────────────────────── -->
+        <div class="sidebar" class:sidebar--open={sidebarOpen}>
+
+            <!-- ── Officers Panel ────────────────────────────────── -->
+            <div class="panel" class:panel--open={officersOpen} class:panel--closed={!officersOpen}>
+                <div class="panel-header panel-header--clickable" onclick={toggleOfficers}>
+                    {#if officersOpen}
+                        <span class="panel-title">Officers</span>
+                        <span class="tab-badge">{officers.length}</span>
+                    {:else}
+                        <span class="panel-title-vertical">Officers</span>
+                    {/if}
+                    <svg class="panel-chevron" class:rotated={!officersOpen} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+                        <path d="M2 4.5l4 4 4-4"/>
+                    </svg>
+                </div>
+                {#if officersOpen}
+                <div class="panel-content panel-officers-content">
+
+                    {#if officers.length === 0}
+                        <div class="empty-hint">No officers on duty.</div>
+                    {/if}
+
+                    <!-- Nicht zugeteilt -->
+                    {#if unassignedOfficers().length > 0}
+                        <div class="section-label">Unassigned ({unassignedOfficers().length})</div>
+                        {#each unassignedOfficers() as officer (officer.citizenid)}
+                            <div
+                                class="officer-card"
+                                class:dragging={drag?.kind === "officer" && drag.id === officer.citizenid && drag.active}
+                                class:anim-removed={recentlyRemoved.has(officer.citizenid)}
+                                onmousedown={(e) => canManagePatrols && onMouseDown(e, "officer", officer.citizenid, officer.name)}
+                                style={canManagePatrols ? "cursor:grab" : "cursor:default"}
+                            >
+                                {#if canManagePatrols}<div class="officer-drag-handle">⠿</div>{/if}
+                                <div class="officer-info">
+                                    <span class="officer-name">{officer.name}</span>
+                                    <span class="officer-meta">{[officer.rank, officer.callsign].filter(Boolean).join(" · ")}</span>
+                                </div>
+                            </div>
+                        {/each}
+                    {/if}
+
+                    <!-- In Streifen -->
+                    {#each patrols as patrol}
+                        {@const members = patrol.memberIds.map(id => officers.find(o => o.citizenid === id)).filter(Boolean)}
+                        {#if members.length > 0}
+                            <div class="section-label" style="margin-top:8px">
+                                <span class="section-dot" style="background:{patrol.color}"></span>
+                                {patrol.name}
+                            </div>
+                            {#each members as officer (officer!.citizenid)}
+                                <div
+                                    class="officer-card officer-card--assigned"
+                                    class:dragging={drag?.kind === "officer" && drag.id === officer!.citizenid && drag.active}
+                                    class:anim-assigned={recentlyAssigned.has(officer!.citizenid)}
+                                    style="border-left: 2px solid {patrol.color};{canManagePatrols ? '' : 'cursor:default'}"
+                                    onmousedown={(e) => canManagePatrols && onMouseDown(e, "officer", officer!.citizenid, officer!.name)}
+                                >
+                                    {#if canManagePatrols}<div class="officer-drag-handle">⠿</div>{/if}
+                                    <div class="officer-info">
+                                        <span class="officer-name">{officer!.name}</span>
+                                        <span class="officer-meta">{[officer!.rank, officer!.callsign].filter(Boolean).join(" · ")}</span>
+                                    </div>
+                                    {#if canManagePatrols}
+                                        <button class="officer-kick" onmousedown={(e) => e.stopPropagation()} onclick={() => removeFromPatrol(officer!.citizenid)} title="Remove">×</button>
+                                    {/if}
+                                </div>
+                            {/each}
+                        {/if}
+                    {/each}
+
+                </div>
+                {/if}
             </div>
+
+            <!-- ── Divider ────────────────────────────────────────── -->
+            <div class="panel-divider"></div>
+
+            <!-- ── Patrols Panel ─────────────────────────────────── -->
+            <div class="panel" class:panel--open={patrolsOpen} class:panel--closed={!patrolsOpen}>
+                <div class="panel-header panel-header--clickable" onclick={togglePatrols}>
+                    {#if patrolsOpen}
+                        <span class="panel-title">Patrols</span>
+                        <span class="tab-badge">{patrols.length}</span>
+                        {#if canEditPatrols}
+                            <button class="btn-icon-add" onmousedown={(e) => e.stopPropagation()} onclick={(e) => { e.stopPropagation(); showCreateForm = !showCreateForm; }} type="button" title="New patrol">
+                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                                    <line x1="6" y1="1" x2="6" y2="11"/>
+                                    <line x1="1" y1="6" x2="11" y2="6"/>
+                                </svg>
+                            </button>
+                        {/if}
+                    {:else}
+                        <span class="panel-title-vertical">Patrols</span>
+                    {/if}
+                    <svg class="panel-chevron" class:rotated={!patrolsOpen} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+                        <path d="M2 4.5l4 4 4-4"/>
+                    </svg>
+                </div>
+
+                {#if patrolsOpen}
+                {#if showCreateForm && canEditPatrols}
+                    <div class="create-form">
+                        <input
+                            class="create-input"
+                            placeholder="Patrol name…"
+                            bind:value={newPatrolName}
+                            onkeydown={(e) => e.key === "Enter" && createPatrol()}
+                            autofocus
+                        />
+                        <div class="color-row">
+                            {#each PATROL_COLORS as c}
+                                <button
+                                    class="color-swatch"
+                                    class:selected={newPatrolColor === c}
+                                    style="background:{c}"
+                                    onclick={() => (newPatrolColor = c)}
+                                    type="button"
+                                ></button>
+                            {/each}
+                        </div>
+                        <div class="create-actions">
+                            <button class="btn-create" onclick={createPatrol} type="button">Create</button>
+                            <button class="btn-cancel" onclick={() => (showCreateForm = false)} type="button">Cancel</button>
+                        </div>
+                    </div>
+                {/if}
+
+                <div class="panel-content">
+                    {#if patrols.length === 0}
+                        <div class="empty-hint">No patrols yet.<br/>Press + above.</div>
+                    {/if}
+
+                    {#each patrols as patrol, idx (patrol.id)}
+                        <div
+                            class="patrol-card"
+                            class:drag-over={dragOverPatrolId === patrol.id}
+                            class:sort-over={dragOverPatrolSortId === patrol.id}
+                            data-patrol-id={patrol.id}
+                        >
+                            <div class="patrol-header">
+                                {#if canEditPatrols}
+                                    <div
+                                        class="patrol-sort-handle"
+                                        title="Drag to reorder"
+                                        onmousedown={(e) => onMouseDown(e, "patrol", patrol.id, patrol.name)}
+                                    >⠿</div>
+                                {/if}
+                                <div class="patrol-color-bar" style="background:{patrol.color}"></div>
+                                {#if editingPatrolId === patrol.id && canEditPatrols}
+                                    <input
+                                        class="patrol-name-edit"
+                                        bind:value={editingPatrolName}
+                                        onblur={() => { const n = editingPatrolName.trim(); if (n) renamePatrolOnServer(patrol.id, n); editingPatrolId = null; }}
+                                        onkeydown={(e) => { if (e.key === "Enter") { const n = editingPatrolName.trim(); if (n) renamePatrolOnServer(patrol.id, n); editingPatrolId = null; } if (e.key === "Escape") editingPatrolId = null; }}
+                                        autofocus
+                                    />
+                                {:else}
+                                    <span
+                                        class="patrol-name"
+                                        ondblclick={() => { if (canEditPatrols) { editingPatrolId = patrol.id; editingPatrolName = patrol.name; } }}
+                                        title={canEditPatrols ? "Double-click to rename" : ""}
+                                    >{patrol.name}</span>
+                                {/if}
+                                <span class="patrol-count">{patrol.memberIds.length}</span>
+                                {#if canEditPatrols}
+                                    <div class="patrol-sort-arrows">
+                                        <button class="sort-arrow" onclick={() => movePatrol(patrol.id, -1)} disabled={idx === 0} type="button" title="Move up">▲</button>
+                                        <button class="sort-arrow" onclick={() => movePatrol(patrol.id, 1)} disabled={idx === patrols.length - 1} type="button" title="Move down">▼</button>
+                                    </div>
+                                    <button class="patrol-delete" onclick={() => deletePatrol(patrol.id)} type="button" title="Delete">
+                                        <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l8 8M10 2L2 10"/></svg>
+                                    </button>
+                                {/if}
+                            </div>
+
+                            {#if patrol.memberIds.length === 0}
+                                {#if canManagePatrols}
+                                    <div class="drop-hint">Drag an officer here →</div>
+                                {/if}
+                            {:else}
+                                {#each patrol.memberIds as mid}
+                                    {@const officer = officers.find(o => o.citizenid === mid)}
+                                    {#if officer}
+                                        <div class="patrol-member" class:anim-assigned={recentlyAssigned.has(mid)}>
+                                            <span class="member-name">{officer.name}</span>
+                                            <span class="member-meta">{officer.callsign ?? ""}</span>
+                                        </div>
+                                    {/if}
+                                {/each}
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+                {/if}
+            </div>
+
         </div>
-        <div bind:this={mapContainer} class="map-container"></div>
+        {/if}
+
     </div>
 </div>
 
 <style>
+    /* ── Leaflet global overrides ───────────────────────────────── */
     :global(.leaflet-popup-content-wrapper) {
         background: var(--dark-bg);
         color: rgba(255, 255, 255, 0.8);
@@ -283,9 +909,7 @@
         border: 1px solid rgba(255, 255, 255, 0.06);
         box-shadow: none;
     }
-    :global(.leaflet-popup-tip) {
-        background: var(--dark-bg);
-    }
+    :global(.leaflet-popup-tip) { background: var(--dark-bg); }
     :global(.leaflet-tooltip) {
         background: var(--dark-bg);
         color: rgba(255, 255, 255, 0.8);
@@ -295,9 +919,7 @@
         padding: 4px 8px;
         box-shadow: none;
     }
-    :global(.leaflet-tooltip-top::before) {
-        border-top-color: #111111;
-    }
+    :global(.leaflet-tooltip-top::before) { border-top-color: #111111; }
     :global(.leaflet-control-zoom) {
         border: 1px solid rgba(255, 255, 255, 0.06) !important;
         border-radius: 8px !important;
@@ -308,16 +930,55 @@
         background: rgba(17, 17, 17, 0.92) !important;
         color: rgba(255, 255, 255, 0.6) !important;
         border-color: rgba(255, 255, 255, 0.04) !important;
-        width: 30px !important;
-        height: 30px !important;
-        line-height: 30px !important;
-        font-size: 14px !important;
+        width: 30px !important; height: 30px !important;
+        line-height: 30px !important; font-size: 14px !important;
     }
     :global(.leaflet-control-zoom a:hover) {
         background: rgba(255, 255, 255, 0.08) !important;
         color: rgba(255, 255, 255, 0.9) !important;
     }
 
+    /* ── Patrol label (on map) ─────────────────────────────────── */
+    :global(.patrol-label) {
+        background: rgba(0, 0, 0, 0.55);
+        border: 1px solid;
+        border-radius: 4px;
+        padding: 2px 6px;
+        font-size: 9px;
+        font-weight: 600;
+        letter-spacing: 0.4px;
+        text-transform: uppercase;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0.7;
+    }
+
+    /* ── Marker globals ────────────────────────────────────────── */
+    :global(.tracking-icon) {
+        width: 22px; height: 22px;
+        border-radius: 5px;
+        display: flex; align-items: center; justify-content: center;
+        font-size: 11px; font-weight: 700; color: #0c0c0c;
+    }
+    :global(.tracking-vehicle) { background: #f97316; }
+    :global(.tracking-bodycam) { background: #a855f7; }
+    :global(.tracking-dot-wrap), :global(.tracking-badge-wrap) {
+        position: relative;
+        display: flex; align-items: center; justify-content: center;
+        width: 100%; height: 100%;
+    }
+    :global(.tracking-dot) { width: 12px; height: 12px; border-radius: 50%; }
+    :global(.tracking-arrow) {
+        position: absolute; top: -7px; left: 50%;
+        transform: translateX(-50%);
+        width: 0; height: 0;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+    }
+    :global(.tracking-arrow-vehicle) { border-bottom: 8px solid #f97316; }
+    :global(.tracking-arrow-bodycam) { border-bottom: 8px solid #a855f7; }
+
+    /* ── Page layout ──────────────────────────────────────────── */
     .map-page {
         height: 100%;
         padding: 10px 20px 20px;
@@ -325,21 +986,46 @@
     }
     .map-wrapper {
         position: relative;
-        width: 100%;
-        height: 100%;
+        width: 100%; height: 100%;
         border-radius: 10px;
         overflow: hidden;
         border: 1px solid rgba(255, 255, 255, 0.06);
+        display: flex;
     }
-    .map-container {
-        width: 100%;
-        height: 100%;
+    .map-container { flex: 1; height: 100%; }
+    .map-no-pointer { pointer-events: none !important; }
+
+    /* ── Drag Ghost (global, fixed) ───────────────────────────── */
+    :global(.drag-ghost) {
+        position: fixed;
+        z-index: 9999;
+        pointer-events: none;
+        padding: 5px 10px;
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 600;
+        white-space: nowrap;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+        transform: rotate(2deg);
+        transition: none;
+    }
+    :global(.drag-ghost--officer) {
+        background: rgba(30,30,30,0.97);
+        border: 1px solid rgba(255,255,255,0.15);
+        color: rgba(255,255,255,0.9);
     }
+    :global(.drag-ghost--patrol) {
+        background: rgba(30,30,30,0.97);
+        border: 1px solid rgba(255,255,255,0.12);
+        color: rgba(255,255,255,0.7);
+    }
+    .officer-card.dragging { opacity: 0.35; }
+
+    /* ── Left Controls ────────────────────────────────────────── */
     .map-controls {
         position: absolute;
         z-index: 1001;
-        top: 12px;
-        left: 12px;
+        top: 12px; left: 12px;
         background: rgba(17, 17, 17, 0.92);
         border: 1px solid rgba(255, 255, 255, 0.06);
         border-radius: 10px;
@@ -355,19 +1041,13 @@
         font-size: 11px;
         color: rgba(255, 255, 255, 0.5);
         margin-bottom: 10px;
+        display: block;
     }
-    .controls-group {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-    }
+    .controls-group { display: flex; flex-direction: column; gap: 6px; }
     .controls-label {
-        font-size: 11px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        color: rgba(255, 255, 255, 0.5);
-        margin-bottom: 2px;
+        font-size: 11px; font-weight: 600;
+        text-transform: uppercase; letter-spacing: 0.5px;
+        color: rgba(255, 255, 255, 0.5); margin-bottom: 2px;
     }
     .controls-divider {
         height: 1px;
@@ -375,105 +1055,383 @@
         margin: 10px 0;
     }
     .control-toggle {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-        font-size: 12px;
+        display: flex; align-items: center; gap: 8px;
+        cursor: pointer; font-size: 12px;
         color: rgba(255, 255, 255, 0.7);
     }
     .control-toggle input[type="checkbox"] {
-        width: 14px;
-        height: 14px;
+        width: 14px; height: 14px;
         accent-color: rgba(var(--accent-rgb), 0.7);
         cursor: pointer;
     }
-    .segment {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 4px;
-    }
+    .segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
     .segment button {
         border-radius: 6px;
         border: 1px solid rgba(255, 255, 255, 0.06);
         background: rgba(255, 255, 255, 0.04);
         color: rgba(255, 255, 255, 0.5);
-        font-size: 11px;
-        font-weight: 500;
-        padding: 5px 8px;
-        cursor: pointer;
+        font-size: 11px; font-weight: 500;
+        padding: 5px 8px; cursor: pointer;
         transition: all 0.1s ease;
     }
-    .segment button:hover {
-        background: rgba(255, 255, 255, 0.06);
-        color: rgba(255, 255, 255, 0.7);
-    }
+    .segment button:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
     .segment button.active {
-        background: rgba(255, 255, 255, 0.08);
-        border-color: rgba(255, 255, 255, 0.12);
-        color: rgba(255, 255, 255, 0.9);
+        background: rgba(255,255,255,0.08);
+        border-color: rgba(255,255,255,0.12);
+        color: rgba(255,255,255,0.9);
     }
-    .legend {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-        font-size: 11px;
-        color: rgba(255, 255, 255, 0.45);
+    .legend { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.45); }
+    .legend-item { display: flex; align-items: center; gap: 8px; }
+    .legend-item::before {
+        content: ""; width: 6px; height: 6px;
+        border-radius: 50%; display: inline-block; flex-shrink: 0;
+        background: var(--dot, #888);
     }
-    .legend-item {
-        display: flex;
+    .legend-item.vehicle::before { background: #f97316; }
+    .legend-item.bodycam-unassigned::before { background: #6b7280; }
+
+    /* ── Sidebar Toggle Button ────────────────────────────────── */
+    .sidebar-toggle {
+        position: absolute;
+        z-index: 1002;
+        right: 0; top: 50%;
+        transform: translateY(-50%);
+        display: flex; align-items: center; gap: 6px;
+        background: rgba(17, 17, 17, 0.92);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-right: none;
+        border-radius: 8px 0 0 8px;
+        padding: 10px 10px;
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 11px; font-weight: 600;
+        letter-spacing: 0.4px;
+        cursor: pointer;
+        transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s;
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+    }
+    .sidebar-toggle:hover { background: rgba(30,30,30,0.95); color: rgba(255,255,255,0.9); }
+    .sidebar-toggle.open { right: var(--sidebar-width, 520px); }
+    .sidebar-toggle-label { writing-mode: vertical-rl; text-orientation: mixed; }
+
+    /* ── Right Sidebar (split) ────────────────────────────────── */
+    .sidebar {
+        position: absolute;
+        z-index: 1001;
+        top: 0; right: 0; bottom: 0;
+        width: var(--sidebar-width, 520px);
+        display: flex; flex-direction: row;
+        background: rgba(13, 13, 13, 0.96);
+        border-left: 1px solid rgba(255, 255, 255, 0.06);
+        transform: translateX(100%);
+        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+                    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+    }
+    .sidebar--open { transform: translateX(0); }
+
+    /* ── Panels ───────────────────────────────────────────────── */
+    .panel {
+        display: flex; flex-direction: column;
+        overflow: hidden;
+        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .panel--open { width: 260px; flex-shrink: 0; }
+    .panel--closed { width: 36px; flex-shrink: 0; }
+
+    .panel-divider {
+        width: 1px;
+        background: rgba(255, 255, 255, 0.05);
+        flex-shrink: 0;
+    }
+    .panel-header {
+        display: flex; align-items: center; gap: 6px;
+        padding: 11px 12px 10px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        flex-shrink: 0;
+        min-height: 40px;
+    }
+    .panel--closed .panel-header {
+        flex-direction: column;
         align-items: center;
-        gap: 8px;
+        justify-content: flex-start;
+        padding: 10px 0;
+        gap: 4px;
+        border-bottom: none;
+        height: 100%;
+        overflow: hidden;
     }
-    .legend-item::before {
-        content: "";
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        display: inline-block;
+    .panel-title-vertical {
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+        font-size: 10px; font-weight: 700;
+        text-transform: uppercase; letter-spacing: 0.5px;
+        color: rgba(255, 255, 255, 0.3);
+        flex: 1;
+        margin-top: 6px;
+    }
+    .panel--closed .panel-chevron { transform: rotate(-90deg); }
+    .panel--closed .panel-chevron.rotated { transform: rotate(90deg); }
+    .panel-header--clickable {
+        cursor: pointer;
+        user-select: none;
+        transition: background 0.1s;
+    }
+    .panel-header--clickable:hover { background: rgba(255,255,255,0.03); }
+    .panel-chevron {
+        color: rgba(255,255,255,0.25);
         flex-shrink: 0;
+        transition: transform 0.2s ease;
     }
-    .legend-item.vehicle::before { background: #f97316; }
-    .legend-item.bodycam::before { background: #a855f7; }
+    .panel-chevron.rotated { transform: rotate(-90deg); }
+    .panel-title {
+        font-size: 11px; font-weight: 700;
+        text-transform: uppercase; letter-spacing: 0.5px;
+        color: rgba(255, 255, 255, 0.5);
+        flex: 1;
+    }
+    .tab-badge {
+        background: rgba(255, 255, 255, 0.07);
+        border-radius: 10px;
+        padding: 1px 6px;
+        font-size: 10px;
+        color: rgba(255, 255, 255, 0.35);
+    }
+    .btn-icon-add {
+        display: flex; align-items: center; justify-content: center;
+        width: 22px; height: 22px;
+        background: rgba(255,255,255,0.05);
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 5px;
+        color: rgba(255,255,255,0.5);
+        cursor: pointer;
+        transition: all 0.1s;
+        flex-shrink: 0;
+    }
+    .btn-icon-add:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
 
-    :global(.tracking-icon) {
-        width: 22px;
-        height: 22px;
+    .panel-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+        display: flex; flex-direction: column; gap: 3px;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255,255,255,0.07) transparent;
+        min-height: 0;
+    }
+
+    .section-label {
+        display: flex; align-items: center; gap: 5px;
+        font-size: 10px; font-weight: 700;
+        text-transform: uppercase; letter-spacing: 0.5px;
+        color: rgba(255, 255, 255, 0.25);
+        padding: 5px 3px 2px;
+    }
+    .section-dot {
+        width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+    }
+
+    .empty-hint {
+        text-align: center; font-size: 11px;
+        color: rgba(255, 255, 255, 0.18);
+        padding: 20px 10px; line-height: 1.6;
+    }
+
+    /* ── Officer Cards ────────────────────────────────────────── */
+    .officer-card {
+        display: flex; align-items: center; gap: 7px;
+        padding: 7px 8px;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        cursor: grab;
+        transition: background 0.1s, border-color 0.1s;
+        user-select: none;
+        flex-shrink: 0;
+    }
+    .officer-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); }
+    .officer-card:active { cursor: grabbing; }
+    .officer-card--assigned { opacity: 0.65; }
+    .officer-drag-handle {
+        flex-shrink: 0; font-size: 14px; line-height: 1;
+        color: rgba(255,255,255,0.2); cursor: grab;
+    }
+    .officer-info { flex: 1; min-width: 0; }
+    .officer-name {
+        display: block; font-size: 11px; font-weight: 500;
+        color: rgba(255,255,255,0.82);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .officer-meta {
+        display: block; font-size: 10px;
+        color: rgba(255,255,255,0.28);
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .officer-kick {
+        background: transparent; border: none;
+        color: rgba(255,255,255,0.15); font-size: 15px; line-height: 1;
+        cursor: pointer; padding: 0 2px; border-radius: 3px;
+        transition: all 0.1s; flex-shrink: 0;
+    }
+    .officer-kick:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
+
+    /* ── Create Form ──────────────────────────────────────────── */
+    .create-form {
+        display: flex; flex-direction: column; gap: 7px;
+        padding: 8px;
+        background: rgba(255,255,255,0.03);
+        border-bottom: 1px solid rgba(255,255,255,0.06);
+        flex-shrink: 0;
+    }
+    .create-input {
+        background: rgba(255,255,255,0.05);
+        border: 1px solid rgba(255,255,255,0.08);
         border-radius: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 11px;
-        font-weight: 700;
-        color: #0c0c0c;
+        padding: 6px 9px;
+        color: rgba(255,255,255,0.9);
+        font-size: 12px; outline: none; width: 100%;
+        box-sizing: border-box;
     }
-    :global(.tracking-vehicle) { background: #f97316; }
-    :global(.tracking-bodycam) { background: #a855f7; }
+    .create-input:focus { border-color: rgba(255,255,255,0.2); }
+    .color-row { display: flex; gap: 5px; flex-wrap: wrap; }
+    .color-swatch {
+        width: 18px; height: 18px; border-radius: 50%;
+        border: 2px solid transparent;
+        cursor: pointer; transition: transform 0.1s;
+    }
+    .color-swatch:hover { transform: scale(1.15); }
+    .color-swatch.selected { border-color: rgba(255,255,255,0.75); transform: scale(1.1); }
+    .create-actions { display: flex; gap: 5px; }
+    .btn-create {
+        flex: 1; padding: 6px;
+        background: rgba(var(--accent-rgb), 0.14);
+        border: 1px solid rgba(var(--accent-rgb), 0.28);
+        border-radius: 5px;
+        color: rgba(255,255,255,0.8);
+        font-size: 11px; font-weight: 600;
+        cursor: pointer; transition: all 0.1s;
+    }
+    .btn-create:hover { background: rgba(var(--accent-rgb), 0.24); }
+    .btn-cancel {
+        padding: 6px 10px;
+        background: rgba(255,255,255,0.04);
+        border: 1px solid rgba(255,255,255,0.06);
+        border-radius: 5px;
+        color: rgba(255,255,255,0.35);
+        font-size: 11px; cursor: pointer; transition: all 0.1s;
+    }
+    .btn-cancel:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
 
-    :global(.tracking-dot-wrap),
-    :global(.tracking-badge-wrap) {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
+    /* ── Patrol Cards ─────────────────────────────────────────── */
+    .patrol-card {
+        background: rgba(255,255,255,0.03);
+        border: 1px solid rgba(255,255,255,0.05);
+        border-radius: 7px;
+        overflow: hidden;
+        transition: border-color 0.15s, background 0.15s;
+        margin-bottom: 2px;
+        min-height: 36px;
+        flex-shrink: 0;
     }
-    :global(.tracking-dot) {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
+    .patrol-card.drag-over {
+        border-color: rgba(255,255,255,0.22);
+        background: rgba(255,255,255,0.06);
     }
-    :global(.tracking-arrow) {
-        position: absolute;
-        top: -7px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0;
-        height: 0;
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
+    .patrol-card.sort-over {
+        border-color: rgba(var(--accent-rgb), 0.5);
+        background: rgba(var(--accent-rgb), 0.06);
+    }
+    .patrol-header {
+        display: flex; align-items: center; gap: 7px;
+        padding: 7px 8px;
+    }
+    .patrol-color-bar { width: 3px; height: 20px; border-radius: 2px; flex-shrink: 0; }
+    .patrol-name {
+        flex: 1; font-size: 11px; font-weight: 600;
+        color: rgba(255,255,255,0.82); cursor: default;
+    }
+    .patrol-name-edit {
+        flex: 1;
+        background: rgba(255,255,255,0.07);
+        border: 1px solid rgba(255,255,255,0.15);
+        border-radius: 3px; padding: 1px 5px;
+        font-size: 11px; font-weight: 600;
+        color: rgba(255,255,255,0.9); outline: none;
+    }
+    .patrol-count {
+        font-size: 10px; font-weight: 700;
+        color: rgba(255,255,255,0.22);
+        background: rgba(255,255,255,0.05);
+        border-radius: 10px; padding: 1px 6px;
+    }
+    .patrol-delete {
+        background: transparent; border: none;
+        color: rgba(255,255,255,0.18);
+        cursor: pointer; padding: 2px;
+        display: flex; align-items: center; border-radius: 3px;
+        transition: all 0.1s;
+    }
+    .patrol-delete:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
+
+    .patrol-sort-handle {
+        font-size: 13px; line-height: 1;
+        color: rgba(255,255,255,0.18);
+        cursor: grab; flex-shrink: 0;
+        padding: 0 2px;
+    }
+    .patrol-sort-handle:active { cursor: grabbing; }
+
+    .patrol-sort-arrows {
+        display: flex; flex-direction: column; gap: 1px; flex-shrink: 0;
+    }
+    .sort-arrow {
+        background: transparent; border: none;
+        color: rgba(255,255,255,0.2);
+        font-size: 8px; line-height: 1;
+        cursor: pointer; padding: 1px 2px;
+        border-radius: 2px; transition: all 0.1s;
+    }
+    .sort-arrow:hover:not(:disabled) { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
+    .sort-arrow:disabled { opacity: 0.2; cursor: default; }
+
+    .drop-hint {
+        font-size: 10px; color: rgba(255,255,255,0.15);
+        text-align: center; padding: 7px;
+        border-top: 1px dashed rgba(255,255,255,0.05);
+    }
+    .patrol-member {
+        display: flex; align-items: center; gap: 5px;
+        padding: 4px 8px 4px 18px;
+        border-top: 1px solid rgba(255,255,255,0.04);
+    }
+    .member-name {
+        font-size: 11px; color: rgba(255,255,255,0.65);
+        flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .member-meta { font-size: 10px; color: rgba(255,255,255,0.22); white-space: nowrap; }
+
+    /* ── Assignment animations ────────────────────────────────── */
+    @keyframes anim-assign-in {
+        0%   { background: rgba(34, 197, 94, 0.18); box-shadow: 0 0 0 1px rgba(34,197,94,0.35); transform: scaleX(0.97); }
+        40%  { background: rgba(34, 197, 94, 0.10); box-shadow: 0 0 0 1px rgba(34,197,94,0.2); transform: scaleX(1.01); }
+        100% { background: transparent; box-shadow: none; transform: scaleX(1); }
+    }
+    @keyframes anim-remove-in {
+        0%   { background: rgba(239, 68, 68, 0.15); box-shadow: 0 0 0 1px rgba(239,68,68,0.3); opacity: 1; transform: scaleX(1); }
+        60%  { background: rgba(239, 68, 68, 0.08); opacity: 0.7; transform: scaleX(0.98); }
+        100% { background: transparent; box-shadow: none; opacity: 1; transform: scaleX(1); }
+    }
+    @keyframes slide-down {
+        0%   { opacity: 0; transform: translateY(-6px); }
+        100% { opacity: 1; transform: translateY(0); }
+    }
+
+    .anim-assigned {
+        animation: anim-assign-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards,
+                   slide-down 0.25s ease-out;
+    }
+    .anim-removed {
+        animation: anim-remove-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards,
+                   slide-down 0.25s ease-out;
     }
-    :global(.tracking-arrow-vehicle) { border-bottom: 8px solid #f97316; }
-    :global(.tracking-arrow-bodycam) { border-bottom: 8px solid #a855f7; }
 </style>
\ No newline at end of file

From 3c0840c8dacd1d6ca9b59cadd886f8e93e8ae76e Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 26 May 2026 09:34:38 +0200
Subject: [PATCH 104/144] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 89e39b04..a3f6b32d 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+DONT FORGET TO BUILT IT
 THIS CHANGES NEEDS TO BE DONE:
 ```lua
 CREATE TABLE IF NOT EXISTS mdt_patrols (

From d870d6041c8223f29d2294a5857da033b028cb42 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:34:45 +0200
Subject: [PATCH 105/144] Update qbcore.sql

---
 sql/qbcore.sql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sql/qbcore.sql b/sql/qbcore.sql
index b0d6fc96..5d85f1cb 100644
--- a/sql/qbcore.sql
+++ b/sql/qbcore.sql
@@ -355,7 +355,7 @@ CREATE TABLE IF NOT EXISTS `mdt_reports_involved` (
   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
   `reportid` int(10) unsigned NOT NULL,
   `citizenid` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
-  `type` varchar(7) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
+  `type` varchar(15) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
   `notes` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
   PRIMARY KEY (`id`),
   KEY `FK_mdt_reports_involved_mdt_reports` (`reportid`),

From a44d06f0e2f0d9225e1782a3ae98fac074b7169c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:35:09 +0200
Subject: [PATCH 106/144] Update qbx.sql

---
 sql/qbx.sql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sql/qbx.sql b/sql/qbx.sql
index fb8dff33..445e6c8b 100644
--- a/sql/qbx.sql
+++ b/sql/qbx.sql
@@ -355,7 +355,7 @@ CREATE TABLE IF NOT EXISTS `mdt_reports_involved` (
   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
   `reportid` int(10) unsigned NOT NULL,
   `citizenid` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
-  `type` varchar(7) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
+  `type` varchar(15) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
   `notes` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   PRIMARY KEY (`id`),
   KEY `FK_mdt_reports_involved_mdt_reports` (`reportid`),

From 100e159d7a280b744724578c35e6a814587fb9f4 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:36:04 +0200
Subject: [PATCH 107/144] fixes no notes/types for vitims - client

fixes no notes/types for vitims
---
 client/backend/reports.lua | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/backend/reports.lua b/client/backend/reports.lua
index b7922576..0918e2d5 100644
--- a/client/backend/reports.lua
+++ b/client/backend/reports.lua
@@ -83,8 +83,8 @@ RegisterNUICallback('saveReport', function(data, cb)
                 if victim.citizenid then
                     table.insert(involved, {
                         citizenid = victim.citizenid,
-                        type = 'victim',
-                        notes = ''
+                        type = victim.type or 'victim',
+                        notes = victim.notes or ''
                     })
                 end
             end

From f269d75526c40b55e74d696d50299fc2a9ccf03d Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:36:20 +0200
Subject: [PATCH 108/144] fixes no notes/types for vitims

fixes no notes/types for vitims
---
 server/backend/reports.lua | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/backend/reports.lua b/server/backend/reports.lua
index b29b99cc..c44a0e7b 100644
--- a/server/backend/reports.lua
+++ b/server/backend/reports.lua
@@ -1135,4 +1135,4 @@ ps.registerCallback(resourceName .. ':server:getReportsByPlate', function(source
     ]], { plate })
 
     return rows or {}
-end)
+end)
\ No newline at end of file

From fae3c05c5fac4221bed1b5a45cfb0fe089581268 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:36:49 +0200
Subject: [PATCH 109/144] fixes no notes/types for vitims

fixes no notes/types for vitims
---
 web/src/components/InvolvedPersons.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/InvolvedPersons.svelte b/web/src/components/InvolvedPersons.svelte
index 61d695d4..092fd94a 100644
--- a/web/src/components/InvolvedPersons.svelte
+++ b/web/src/components/InvolvedPersons.svelte
@@ -336,4 +336,4 @@
 		border: 1px dashed var(--border-color);
 		border-radius: 0.375rem;
 	}
-</style>
+</style>
\ No newline at end of file

From d74a4dfcdb90bce024b378543971a61b21a3c701 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:37:08 +0200
Subject: [PATCH 110/144] fixes no notes/types for vitims

fixes no notes/types for vitims
---
 web/src/components/report-editor/VictimsManager.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/report-editor/VictimsManager.svelte b/web/src/components/report-editor/VictimsManager.svelte
index 3acca7e0..e4e77524 100644
--- a/web/src/components/report-editor/VictimsManager.svelte
+++ b/web/src/components/report-editor/VictimsManager.svelte
@@ -31,6 +31,7 @@
 			secondaryInfo={`ID: ${victim.citizenid}`}
 			type={victim.type}
 			typeOptions={VICTIM_TYPES}
+			notes={victim.notes}
 			{onRemove}
 			onUpdate={updateVictim}
 		/>

From 876eb8193c05d6adb823aa344c02d21de9cab3bc Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:37:50 +0200
Subject: [PATCH 111/144] fixes no notes/types for vitims

fixes no notes/types for vitims
---
 web/src/services/reportService.svelte.ts | 25 +++++++++++-------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/web/src/services/reportService.svelte.ts b/web/src/services/reportService.svelte.ts
index 87cb6dec..fe5b9421 100644
--- a/web/src/services/reportService.svelte.ts
+++ b/web/src/services/reportService.svelte.ts
@@ -262,19 +262,15 @@ export function createReportService() {
 
 	function normalizeInvolved(involved: any): Report["involved"] {
 		const parsed = parseJsonString(involved);
-		const list = Array.isArray(parsed)
-			? parsed
-			: Array.isArray(involved)
-				? involved
-				: [];
-		const normalized = {
-			officers: [],
-			suspects: [],
-			victims: [],
-		} as Report["involved"];
+		const list = Array.isArray(parsed) ? parsed : Array.isArray(involved) ? involved : [];
+
+		const normalized = { officers: [], suspects: [], victims: [] } as Report["involved"];
+
+		const VICTIM_TYPES = new Set(["victim", "primary", "secondary", "witness", "complainant"]);
 
 		for (const entry of list) {
 			const type = (entry?.type || "").toLowerCase();
+
 			if (type === "officer") {
 				normalized.officers.push({
 					id: crypto.randomUUID(),
@@ -284,12 +280,13 @@ export function createReportService() {
 					type: entry?.type || "Officer",
 					notes: entry?.notes || "",
 				});
-			} else if (type === "victim") {
+			} else if (VICTIM_TYPES.has(type)) {
 				normalized.victims.push({
 					id: entry?.citizenid || crypto.randomUUID(),
 					citizenid: entry?.citizenid || "",
 					fullName: entry?.name || entry?.fullname || "Unknown",
-					type: entry?.type || "Victim",
+					type: entry?.type || "victim",
+					notes: entry?.notes || "",
 				});
 			} else {
 				normalized.suspects.push({
@@ -521,8 +518,8 @@ export function createReportService() {
 			citizenid: victim.citizenid || "",
 			fullName: victim.fullName,
 			type: "Primary",
+			notes: "",   // ← fehlte
 		};
-
 		return {
 			...report,
 			involved: {
@@ -678,4 +675,4 @@ export function createReportService() {
 	};
 }
 
-export type ReportService = ReturnType<typeof createReportService>;
+export type ReportService = ReturnType<typeof createReportService>;
\ No newline at end of file

From 6def7378b007ddf4df91babe46bad2eaeb8c1cd2 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Thu, 28 May 2026 20:38:21 +0200
Subject: [PATCH 112/144] fixes no notes/types for vitims

fixes no notes/types for vitims
---
 web/src/interfaces/IReportEditor.ts | 123 ++++++++++++++--------------
 1 file changed, 62 insertions(+), 61 deletions(-)

diff --git a/web/src/interfaces/IReportEditor.ts b/web/src/interfaces/IReportEditor.ts
index 931ab363..804b1e3c 100644
--- a/web/src/interfaces/IReportEditor.ts
+++ b/web/src/interfaces/IReportEditor.ts
@@ -1,83 +1,84 @@
 export interface Report {
-	id?: string;
-	title: string;
-	reportId: string;
-	officer: string;
-	type: string;
-	created: number;
-	lastUpdated: number;
-	content: string;
-	tags: string[];
-	involved: {
-		officers: Officer[];
-		suspects: Suspect[];
-		victims: Victim[];
-	};
-	evidence: Evidence[];
-	charges: ReportCharge[];
-	restrictions: string[];
-	vehicles: ReportVehicle[];
+    id?: string;
+    title: string;
+    reportId: string;
+    officer: string;
+    type: string;
+    created: number;
+    lastUpdated: number;
+    content: string;
+    tags: string[];
+    involved: {
+        officers: Officer[];
+        suspects: Suspect[];
+        victims: Victim[];
+    };
+    evidence: Evidence[];
+    charges: ReportCharge[];
+    restrictions: string[];
+    vehicles: ReportVehicle[];
 }
 
 export interface Officer {
-	id: string;
-	citizenid: string;
-	fullName: string;
-	badgeId: string;
-	type: string;
-	notes: string;
+    id: string;
+    citizenid: string;
+    fullName: string;
+    badgeId: string;
+    type: string;
+    notes: string;
 }
 
 export interface Suspect {
-	id: string;
-	citizenid: string;
-	fullName: string;
-	notes: string;
-	warrantActive?: boolean;
-	profileImage?: string;
-	fingerprint?: string;
+    id: string;
+    citizenid: string;
+    fullName: string;
+    notes: string;
+    warrantActive?: boolean;
+    profileImage?: string;
+    fingerprint?: string;
 }
 
 export interface Victim {
-	id: string;
-	citizenid: string;
-	fullName: string;
-	type: string;
+    id: string;
+    citizenid: string;
+    fullName: string;
+    type: string;
+    notes: string;
 }
 
 export interface Evidence {
-	id: string;
-	title: string;
-	type: string;
-	serial: string;
-	notes: string;
-	images: string[];
-	caseId?: string;
+    id: string;
+    title: string;
+    type: string;
+    serial: string;
+    notes: string;
+    images: string[];
+    caseId?: string;
 }
 
 export interface ReportVehicle {
-	plate: string;
-	vehicle_label: string;
-	owner_name: string;
-	owner_citizenid?: string;
+    plate: string;
+    vehicle_label: string;
+    owner_name: string;
+    owner_citizenid?: string;
 }
 
 export interface ReportCharge {
-	id: string;
-	citizenid: string;
-	suspectName: string;
-	charge: string;
-	count: number;
-	time: number;
-	fine: number;
+    id: string;
+    citizenid: string;
+    suspectName: string;
+    charge: string;
+    count: number;
+    time: number;
+    fine: number;
 }
 
 export interface SearchResult {
-	id: string;
-	fullName: string;
-	badgeId?: string;
-	citizenid?: string;
-	rank?: string;
-	image?: string;
-	fingerprint?: string;
-}
+    id: string;
+    fullName: string;
+    badgeId?: string;
+    citizenid?: string;
+    rank?: string;
+    image?: string;
+    fingerprint?: string;
+}
\ No newline at end of file

From 53258251c9182ad5a08ea719f42e8aa67a98c6f8 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Fri, 29 May 2026 01:36:00 +0200
Subject: [PATCH 113/144] Update README.md

---
 README.md | 52 ++++++++++++++++++----------------------------------
 1 file changed, 18 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index a3f6b32d..223d0cf4 100644
--- a/README.md
+++ b/README.md
@@ -9,28 +9,13 @@ CREATE TABLE IF NOT EXISTS mdt_patrols (
    member_ids TEXT NOT NULL DEFAULT '[]'
 );
 
-ALTER TABLE mdt_reports_evidence
-  ADD COLUMN title VARCHAR(255) NOT NULL DEFAULT '' AFTER reportid,
-  ADD COLUMN images LONGTEXT NULL DEFAULT NULL AFTER stored;
-
-ALTER TABLE `mdt_weapons` ADD COLUMN `flags` JSON DEFAULT NULL;
-
-ALTER TABLE player_vehicles 
-MODIFY COLUMN mdt_vehicle_status VARCHAR(500) DEFAULT 'valid';
-
 CREATE TABLE IF NOT EXISTS `mdt_bulletin_posts` (
     `id`          INT UNSIGNED  NOT NULL AUTO_INCREMENT,
     `title`       VARCHAR(255)  NOT NULL,
     `content`     LONGTEXT      NOT NULL,
     `author`      VARCHAR(100)  NOT NULL,
     `author_rank` VARCHAR(100)  NOT NULL DEFAULT '',
-    `category`    ENUM(
-                    'announcement',
-                    'operations',
-                    'training',
-                    'general',
-                    'warrants'
-                  )             NOT NULL DEFAULT 'general',
+    `category`    VARCHAR(48)   NOT NULL DEFAULT 'general',
     `priority`    ENUM(
                     'low',
                     'normal',
@@ -42,31 +27,30 @@ CREATE TABLE IF NOT EXISTS `mdt_bulletin_posts` (
     `created_by`  VARCHAR(60)   NOT NULL,
     `created_at`  DATETIME      NOT NULL DEFAULT CURRENT_TIMESTAMP,
     `updated_at`  DATETIME      NULL     DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
+    `deleted_at`  DATETIME      NULL     DEFAULT NULL,
     PRIMARY KEY (`id`),
     KEY `idx_job`        (`job`),
     KEY `idx_category`   (`category`),
     KEY `idx_pinned`     (`pinned`),
+    KEY `idx_deleted_at` (`deleted_at`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  
- CREATE TABLE IF NOT EXISTS `mdt_bulletin_settings` (
-    `key`        VARCHAR(64)  NOT NULL                              COMMENT 'Setting key, e.g., bulletin_categories',
-    `value`      LONGTEXT     NOT NULL                              COMMENT 'JSON-encoded value',
-    `updated_at` TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP
-                              ON UPDATE CURRENT_TIMESTAMP           COMMENT 'Last Change',
-    PRIMARY KEY (`key`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
-  COMMENT='MDT – Key-Value-Store for Bulletin-Einstellungen';
+ALTER TABLE `mdt_bulletin_posts`
+    MODIFY COLUMN `category` VARCHAR(48) NOT NULL DEFAULT 'general';
  
-INSERT IGNORE INTO `mdt_bulletin_settings` (`key`, `value`)
-VALUES (
-    'bulletin_categories',
-    '[
-        {"value":"announcement","label":"Announcements","icon":"campaign"},
-        {"value":"operations",  "label":"Operations",   "icon":"local_police"},
-        {"value":"training",    "label":"Training",     "icon":"school"},
-        {"value":"general",     "label":"General",      "icon":"forum"}
-    ]'
-);
+CREATE TABLE IF NOT EXISTS `mdt_bulletin_categories` (
+    `id`          INT UNSIGNED  NOT NULL AUTO_INCREMENT,
+    `job`         VARCHAR(50)   NOT NULL,
+    `value`       VARCHAR(48)   NOT NULL,
+    `label`       VARCHAR(48)   NOT NULL,
+    `icon`        VARCHAR(48)   NOT NULL DEFAULT 'label',
+    `color`       VARCHAR(7)    NOT NULL DEFAULT '#6B7280',
+    `sort_order`  SMALLINT      NOT NULL DEFAULT 0,
+    `is_default`  TINYINT(1)    NOT NULL DEFAULT 0,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `uq_job_value`  (`job`, `value`),
+    INDEX      `idx_job_order` (`job`, `sort_order`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 ```
 
 # ps-mdt v3

From e89e7aefdb7e0eda42ff084fa328e0a6777ea28e Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 00:30:01 +0200
Subject: [PATCH 114/144] Add files via upload

---
 server/backend/bulletinboard.lua | 362 +++++++++++++++++++++++++++----
 server/backend/dashboard.lua     | 267 +++++------------------
 2 files changed, 376 insertions(+), 253 deletions(-)

diff --git a/server/backend/bulletinboard.lua b/server/backend/bulletinboard.lua
index 13f26998..2d7817ac 100644
--- a/server/backend/bulletinboard.lua
+++ b/server/backend/bulletinboard.lua
@@ -1,5 +1,9 @@
 local resourceName = tostring(GetCurrentResourceName())
 
+-- ════════════════════════════════════════════════════════════
+--  Bulletin Posts
+-- ════════════════════════════════════════════════════════════
+
 -- ── Get all bulletin posts for the officer's department ──────
 
 ps.registerCallback(resourceName .. ':server:getBulletinPosts', function(source)
@@ -11,19 +15,24 @@ ps.registerCallback(resourceName .. ':server:getBulletinPosts', function(source)
 
     local ok, posts = pcall(MySQL.query.await, [[
         SELECT
-            id, title, content, author, author_rank,
-            category, priority, pinned, created_by,
-            created_at, updated_at
-        FROM mdt_bulletin_posts
-        WHERE job = ?
-        ORDER BY pinned DESC, FIELD(priority, 'urgent', 'high', 'normal', 'low'), created_at DESC
+            bp.id, bp.title, bp.content, bp.author, bp.author_rank,
+            bp.category, bp.priority, bp.pinned, bp.created_by,
+            bp.created_at, bp.updated_at,
+            COALESCE(bc.label, bp.category) AS category_label,
+            COALESCE(bc.color, '#6B7280')   AS category_color
+        FROM mdt_bulletin_posts bp
+        LEFT JOIN mdt_bulletin_categories bc
+            ON bc.value = bp.category AND bc.job = bp.job
+        WHERE bp.job = ?
+        ORDER BY bp.pinned DESC,
+                 FIELD(bp.priority, 'urgent', 'high', 'normal', 'low'),
+                 bp.created_at DESC
     ]], { jobName })
 
     if not ok or not posts then return {} end
 
-    -- Convert tinyint pinned → boolean for JSON
     for _, post in ipairs(posts) do
-        post.pinned = post.pinned == 1 or post.pinned == "1" or post.pinned == true
+        post.pinned = post.pinned == 1 or post.pinned == '1' or post.pinned == true
     end
 
     return posts
@@ -40,23 +49,34 @@ ps.registerCallback(resourceName .. ':server:createBulletinPost', function(sourc
 
     data = data or {}
 
-    local VALID_CATEGORIES = { announcement = true, operations = true, training = true, general = true, warrants = true }
-    local VALID_PRIORITIES  = { low = true, normal = true, high = true, urgent = true }
+    -- Validate category exists for this job (or allow any stored value)
+    local jobName   = ps.getJobName(src)
+    local jobRank   = ps.getJobGradeName(src)
+    local citizenId = ps.getIdentifier(src)
 
     local title = tostring(data.title or ''):gsub('^%s+', ''):gsub('%s+$', '')
     if title == '' then return { success = false, error = 'Title is required' } end
-    if not VALID_CATEGORIES[data.category] then return { success = false, error = 'Invalid category' } end
-    if not VALID_PRIORITIES[data.priority]  then return { success = false, error = 'Invalid priority'  } end
 
-    local jobName   = ps.getJobName(src)
-    local jobRank   = ps.getJobGradeName(src)
-    local citizenId = ps.getIdentifier(src)
+    local VALID_PRIORITIES = { low = true, normal = true, high = true, urgent = true }
+    if not VALID_PRIORITIES[data.priority] then
+        return { success = false, error = 'Invalid priority' }
+    end
 
-    -- Resolve author name + rank from profile
-    local profile = MySQL.single.await('SELECT fullname FROM mdt_profiles WHERE citizenid = ?', { citizenId })
-    local author  = (profile and profile.fullname) or tostring(GetPlayerName(src) or 'Unknown')
+    -- Check category exists for job
+    local catRow = MySQL.single.await(
+        'SELECT value FROM mdt_bulletin_categories WHERE value = ? AND job = ?',
+        { data.category, jobName }
+    )
+    if not catRow then
+        return { success = false, error = 'Invalid or unknown category' }
+    end
+
+    local profile = MySQL.single.await(
+        'SELECT fullname FROM mdt_profiles WHERE citizenid = ?',
+        { citizenId }
+    )
+    local author = (profile and profile.fullname) or tostring(GetPlayerName(src) or 'Unknown')
 
-    -- Only supervisors may pin
     local canPin = CheckPermission(src, 'bulletin_pin')
     local pinned = (canPin and data.pinned == true) and 1 or 0
 
@@ -90,19 +110,17 @@ ps.registerCallback(resourceName .. ':server:updateBulletinPost', function(sourc
     updates = updates or {}
     if not postId then return { success = false, error = 'Invalid post id' } end
 
-    -- Fetch post to verify ownership / permission
     local existing = MySQL.single.await(
         'SELECT created_by, job FROM mdt_bulletin_posts WHERE id = ?',
         { postId }
     )
     if not existing then return { success = false, error = 'Post not found' } end
 
-    local jobName   = ps.getJobName(src)
-    local citizenId = ps.getIdentifier(src)
+    local jobName      = ps.getJobName(src)
+    local citizenId    = ps.getIdentifier(src)
     local isSupervisor = CheckPermission(src, 'bulletin_post')
     local isOwner      = existing.created_by == citizenId
 
-    -- Authors can edit their own posts; supervisors can edit any post in the same department
     if not isOwner and not isSupervisor then
         return { success = false, error = 'No permission to edit this post' }
     end
@@ -110,8 +128,7 @@ ps.registerCallback(resourceName .. ':server:updateBulletinPost', function(sourc
         return { success = false, error = 'Post belongs to a different department' }
     end
 
-    local VALID_CATEGORIES = { announcement = true, operations = true, training = true, general = true, warrants = true }
-    local VALID_PRIORITIES  = { low = true, normal = true, high = true, urgent = true }
+    local VALID_PRIORITIES = { low = true, normal = true, high = true, urgent = true }
 
     local sets = {}
     local vals = {}
@@ -127,15 +144,21 @@ ps.registerCallback(resourceName .. ':server:updateBulletinPost', function(sourc
         sets[#sets + 1] = 'content = ?'
         vals[#vals + 1] = tostring(updates.content):sub(1, 65535)
     end
-    if updates.category ~= nil and VALID_CATEGORIES[updates.category] then
-        sets[#sets + 1] = 'category = ?'
-        vals[#vals + 1] = updates.category
+    if updates.category ~= nil then
+        -- Validate category belongs to this job
+        local catRow = MySQL.single.await(
+            'SELECT value FROM mdt_bulletin_categories WHERE value = ? AND job = ?',
+            { updates.category, jobName }
+        )
+        if catRow then
+            sets[#sets + 1] = 'category = ?'
+            vals[#vals + 1] = updates.category
+        end
     end
     if updates.priority ~= nil and VALID_PRIORITIES[updates.priority] then
         sets[#sets + 1] = 'priority = ?'
         vals[#vals + 1] = updates.priority
     end
-    -- Only supervisors may change pin state
     if updates.pinned ~= nil and isSupervisor then
         sets[#sets + 1] = 'pinned = ?'
         vals[#vals + 1] = updates.pinned and 1 or 0
@@ -144,11 +167,14 @@ ps.registerCallback(resourceName .. ':server:updateBulletinPost', function(sourc
     if #sets == 0 then return { success = false, error = 'No valid fields to update' } end
 
     vals[#vals + 1] = postId
-    MySQL.update.await('UPDATE mdt_bulletin_posts SET ' .. table.concat(sets, ', ') .. ' WHERE id = ?', vals)
+    MySQL.update.await(
+        'UPDATE mdt_bulletin_posts SET ' .. table.concat(sets, ', ') .. ' WHERE id = ?',
+        vals
+    )
     return { success = true }
 end)
 
--- ── Delete a bulletin post (soft delete) ─────────────────────
+-- ── Delete a bulletin post ────────────────────────────────────
 
 ps.registerCallback(resourceName .. ':server:deleteBulletinPost', function(source, postId)
     local src = source
@@ -183,7 +209,6 @@ end)
 
 ps.registerCallback(resourceName .. ':server:toggleBulletinPin', function(source, postId)
     local src = source
-    local newPinned = 0
     if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
     if not CheckPermission(src, 'bulletin_pin') then
         return { success = false, error = 'No permission to pin posts' }
@@ -203,16 +228,275 @@ ps.registerCallback(resourceName .. ':server:toggleBulletinPin', function(source
         return { success = false, error = 'Post belongs to a different department' }
     end
 
-    local isPinned = existing.pinned == 1 or existing.pinned == "1" or existing.pinned == true
-    
-    if not isPinned then
-        newPinned = 1
-    end
-    
+    local isPinned  = existing.pinned == 1 or existing.pinned == '1' or existing.pinned == true
+    local newPinned = isPinned and 0 or 1
+
     MySQL.update.await(
         'UPDATE mdt_bulletin_posts SET pinned = ? WHERE id = ?',
         { newPinned, postId }
     )
-
     return { success = true, pinned = newPinned }
+end)
+
+-- ════════════════════════════════════════════════════════════
+--  Category Management  (one row per category)
+--
+--  Table: mdt_bulletin_categories
+--  Columns: id, job, value, label, icon, color, sort_order, is_default
+-- ════════════════════════════════════════════════════════════
+
+-- Slugify a label into a safe DB value  (e.g. "My Custom Cat" → "my_custom_cat")
+local function slugify(str)
+    return tostring(str)
+        :lower()
+        :gsub('%s+', '_')
+        :gsub('[^%w_]', '')
+        :sub(1, 48)
+end
+
+-- Seed default categories for a job if none exist yet
+local function ensureDefaultCategories(jobName)
+    local count = MySQL.scalar.await(
+        'SELECT COUNT(*) FROM mdt_bulletin_categories WHERE job = ?',
+        { jobName }
+    )
+    if (count or 0) > 0 then return end
+
+    local defaults = {
+        { value = 'announcement', label = 'Announcements', icon = 'campaign',     color = '#3B82F6', sort_order = 1 },
+        { value = 'operations',   label = 'Operations',    icon = 'local_police', color = '#8B5CF6', sort_order = 2 },
+        { value = 'training',     label = 'Training',      icon = 'school',       color = '#10B981', sort_order = 3 },
+        { value = 'general',      label = 'General',       icon = 'forum',        color = '#6B7280', sort_order = 4 },
+    }
+
+    for _, cat in ipairs(defaults) do
+        MySQL.insert.await([[
+            INSERT IGNORE INTO mdt_bulletin_categories
+                (job, value, label, icon, color, sort_order, is_default)
+            VALUES (?, ?, ?, ?, ?, ?, 1)
+        ]], { jobName, cat.value, cat.label, cat.icon, cat.color, cat.sort_order })
+    end
+end
+
+-- ── GET categories ────────────────────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:getBulletinCategories', function(source)
+    local src = source
+    if not CheckAuth(src) then return {} end
+
+    local jobName = ps.getJobName(src)
+    if not jobName or jobName == '' then return {} end
+
+    ensureDefaultCategories(jobName)
+
+    local ok, cats = pcall(MySQL.query.await, [[
+        SELECT value, label, icon, color, sort_order, is_default
+        FROM mdt_bulletin_categories
+        WHERE job = ?
+        ORDER BY sort_order ASC, id ASC
+    ]], { jobName })
+
+    if not ok or not cats then return {} end
+
+    for _, c in ipairs(cats) do
+        c.is_default = c.is_default == 1 or c.is_default == '1' or c.is_default == true
+    end
+
+    return cats
+end)
+
+-- ── ADD category ──────────────────────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:addBulletinCategory', function(source, data)
+    local src = source
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+    if not CheckPermission(src, 'bulletin_post') then
+        return { success = false, error = 'No permission to manage categories' }
+    end
+
+    data = data or {}
+    local jobName = ps.getJobName(src)
+
+    local label = tostring(data.label or ''):gsub('^%s+', ''):gsub('%s+$', '')
+    if label == '' then return { success = false, error = 'Label is required' } end
+
+    -- Build value from label if not provided
+    local value = (data.value and data.value ~= '') and slugify(data.value) or slugify(label)
+    if value == '' then return { success = false, error = 'Could not generate a valid category key' } end
+
+    -- Check for duplicate
+    local existing = MySQL.scalar.await(
+        'SELECT COUNT(*) FROM mdt_bulletin_categories WHERE job = ? AND value = ?',
+        { jobName, value }
+    )
+    if (existing or 0) > 0 then
+        return { success = false, error = 'A category with that key already exists' }
+    end
+
+    -- Max 20 categories per job
+    local total = MySQL.scalar.await(
+        'SELECT COUNT(*) FROM mdt_bulletin_categories WHERE job = ?',
+        { jobName }
+    )
+    if (total or 0) >= 20 then
+        return { success = false, error = 'Maximum of 20 categories per department reached' }
+    end
+
+    local nextOrder = MySQL.scalar.await(
+        'SELECT COALESCE(MAX(sort_order), 0) + 1 FROM mdt_bulletin_categories WHERE job = ?',
+        { jobName }
+    )
+
+    local id = MySQL.insert.await([[
+        INSERT INTO mdt_bulletin_categories (job, value, label, icon, color, sort_order, is_default)
+        VALUES (?, ?, ?, ?, ?, ?, 0)
+    ]], {
+        jobName,
+        value,
+        label:sub(1, 48),
+        tostring(data.icon  or 'label'):sub(1, 48),
+        tostring(data.color or '#6B7280'):sub(1, 7),
+        nextOrder
+    })
+
+    if not id then return { success = false, error = 'Database error' } end
+    return { success = true, value = value, id = id }
+end)
+
+-- ── UPDATE category ───────────────────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:updateBulletinCategory', function(source, data)
+    local src = source
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+    if not CheckPermission(src, 'bulletin_post') then
+        return { success = false, error = 'No permission to manage categories' }
+    end
+
+    data = data or {}
+    local jobName = ps.getJobName(src)
+
+    local existing = MySQL.single.await(
+        'SELECT id, is_default FROM mdt_bulletin_categories WHERE job = ? AND value = ?',
+        { jobName, data.value }
+    )
+    if not existing then return { success = false, error = 'Category not found' } end
+
+    local sets = {}
+    local vals = {}
+
+    if data.label ~= nil then
+        local l = tostring(data.label):gsub('^%s+', ''):gsub('%s+$', '')
+        if l ~= '' then
+            sets[#sets + 1] = 'label = ?'
+            vals[#vals + 1] = l:sub(1, 48)
+        end
+    end
+    if data.icon ~= nil then
+        sets[#sets + 1] = 'icon = ?'
+        vals[#vals + 1] = tostring(data.icon):sub(1, 48)
+    end
+    if data.color ~= nil then
+        -- Validate hex color
+        local color = tostring(data.color)
+        if color:match('^#%x%x%x%x%x%x$') or color:match('^#%x%x%x$') then
+            sets[#sets + 1] = 'color = ?'
+            vals[#vals + 1] = color
+        end
+    end
+
+    if #sets == 0 then return { success = false, error = 'No valid fields to update' } end
+
+    vals[#vals + 1] = jobName
+    vals[#vals + 1] = data.value
+
+    MySQL.update.await(
+        'UPDATE mdt_bulletin_categories SET ' .. table.concat(sets, ', ') ..
+        ' WHERE job = ? AND value = ?',
+        vals
+    )
+    return { success = true }
+end)
+
+-- ── REMOVE category ───────────────────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:removeBulletinCategory', function(source, data)
+    local src = source
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+    if not CheckPermission(src, 'bulletin_post') then
+        return { success = false, error = 'No permission to manage categories' }
+    end
+
+    -- Accept either a table { value = '...' } or a plain string (backwards compat)
+    local value = type(data) == 'table' and tostring(data.value or '') or tostring(data or '')
+    local jobName = ps.getJobName(src)
+
+    if value == '' then return { success = false, error = 'Missing category value' } end
+
+    local existing = MySQL.single.await(
+        'SELECT id, is_default FROM mdt_bulletin_categories WHERE job = ? AND value = ?',
+        { jobName, value }
+    )
+    if not existing then return { success = false, error = 'Category not found' } end
+
+    -- Count remaining categories — keep at least 1
+    local total = MySQL.scalar.await(
+        'SELECT COUNT(*) FROM mdt_bulletin_categories WHERE job = ?',
+        { jobName }
+    )
+    if (total or 0) <= 1 then
+        return { success = false, error = 'Cannot remove the last category' }
+    end
+
+    -- Reassign posts in this category to 'general' (or the first remaining category)
+    local fallback = MySQL.single.await(
+        'SELECT value FROM mdt_bulletin_categories WHERE job = ? AND value != ? ORDER BY sort_order ASC LIMIT 1',
+        { jobName, value }
+    )
+    if fallback then
+        MySQL.update.await(
+            'UPDATE mdt_bulletin_posts SET category = ? WHERE job = ? AND category = ?',
+            { fallback.value, jobName, value }
+        )
+    end
+
+    MySQL.update.await(
+        'DELETE FROM mdt_bulletin_categories WHERE job = ? AND value = ?',
+        { jobName, value }
+    )
+    return { success = true }
+end)
+
+-- ── REORDER categories ────────────────────────────────────────
+
+ps.registerCallback(resourceName .. ':server:reorderBulletinCategories', function(source, data)
+    local src = source
+    if not CheckAuth(src) then return { success = false, error = 'Unauthorized' } end
+    if not CheckPermission(src, 'bulletin_post') then
+        return { success = false, error = 'No permission to manage categories' }
+    end
+
+    local jobName = ps.getJobName(src)
+
+    -- data may arrive as the array directly, or wrapped: { order = [...] }
+    local order = data
+    if type(data) == 'table' and data.order then
+        order = data.order
+    end
+
+    if type(order) ~= 'table' then
+        return { success = false, error = 'Invalid order data' }
+    end
+
+    for i, item in ipairs(order) do
+        local val   = item.value      and tostring(item.value)           or nil
+        local sord  = item.sort_order and tonumber(item.sort_order)      or i
+        if val then
+            MySQL.update.await(
+                'UPDATE mdt_bulletin_categories SET sort_order = ? WHERE job = ? AND value = ?',
+                { sord, jobName, val }
+            )
+        end
+    end
+
+    return { success = true }
 end)
\ No newline at end of file
diff --git a/server/backend/dashboard.lua b/server/backend/dashboard.lua
index 55239584..86225fdc 100644
--- a/server/backend/dashboard.lua
+++ b/server/backend/dashboard.lua
@@ -1,15 +1,5 @@
-
 local resourceName = tostring(GetCurrentResourceName())
 
-local DEFAULT_CATEGORIES = {
-    { value = 'announcement', label = 'Announcements', icon = 'campaign'     },
-    { value = 'operations',   label = 'Operations',    icon = 'local_police' },
-    { value = 'training',     label = 'Training',      icon = 'school'       },
-    { value = 'general',      label = 'General',       icon = 'forum'        },
-}
- 
-local SETTINGS_KEY = 'bulletin_categories'
-
 local function getEffectiveJobType(src)
     local jobType = ps.getJobType(src)
     local jobName = ps.getJobName(src)
@@ -26,8 +16,8 @@ ps.registerCallback(resourceName .. ':server:getJobData', function(source)
     local src = source
     assert(src, 'Player ID cannot be nil')
     local response = {
-        rank = ps.getJobGradeName(src) or "Officer",
-        payRate = "$" .. (ps.getJobGradePay(src) or 300) .. "/hr",
+        rank    = ps.getJobGradeName(src) or 'Officer',
+        payRate = '$' .. (ps.getJobGradePay(src) or 300) .. '/hr',
     }
     return response
 end)
@@ -45,25 +35,13 @@ ps.registerCallback(resourceName .. ':server:getReportStatistics', function(sour
         ]], {})
 
         local row = response and response[1] or { totalThisWeek = 0, totalLastWeek = 0 }
-        local reportStatistics = {
-            totalThisWeek = tonumber(row.totalThisWeek) or 0,
-            changeFromLastWeek = (tonumber(row.totalThisWeek) or 0) - (tonumber(row.totalLastWeek) or 0)
+        return {
+            totalThisWeek      = tonumber(row.totalThisWeek) or 0,
+            changeFromLastWeek = (tonumber(row.totalThisWeek) or 0) - (tonumber(row.totalLastWeek) or 0),
         }
-        return reportStatistics
     end)
 end)
 
-local function parseDateOnly(value)
-    if not value then
-        return nil
-    end
-    local year, month, day = tostring(value):match('^(%d%d%d%d)%-(%d%d)%-(%d%d)$')
-    if not year then
-        return nil
-    end
-    return os.time({ year = tonumber(year), month = tonumber(month), day = tonumber(day), hour = 0 })
-end
-
 ps.registerCallback(resourceName .. ':server:getTimeStatistics', function(source)
     local src = source
     assert(src, 'Player ID cannot be nil')
@@ -87,16 +65,14 @@ ps.registerCallback(resourceName .. ':server:getTimeStatistics', function(source
 
     local result = {}
     for i = 6, 0, -1 do
-        local dayTs = os.time() - (i * 24 * 60 * 60)
+        local dayTs  = os.time() - (i * 24 * 60 * 60)
         local dayKey = os.date('%Y-%m-%d', dayTs)
-        local label = os.date('%a', dayTs)
-        local seconds = secondsByDay[dayKey] or 0
+        local label  = os.date('%a', dayTs)
         result[#result + 1] = {
-            day = label,
-            hours = math.floor((seconds / 3600) * 10) / 10
+            day   = label,
+            hours = math.floor(((secondsByDay[dayKey] or 0) / 3600) * 10) / 10,
         }
     end
-
     return result
 end)
 
@@ -150,26 +126,16 @@ ps.registerCallback(resourceName .. ':server:deleteBulletin', function(source, p
 end)
 
 ps.registerCallback(resourceName .. ':server:getRecentReports', function(source, page, limit)
-    local src = source
+    local src      = source
     assert(src, 'Player ID cannot be nil')
-    local pageNumber = tonumber(page) or 1
-    if pageNumber < 1 then
-        pageNumber = 1
-    end
-
-    local pageSize = tonumber(limit) or 10
-    if pageSize < 1 then
-        pageSize = 10
-    end
-    if pageSize > 50 then
-        pageSize = 50
-    end
+    local pageNumber = math.max(1, tonumber(page) or 1)
+    local pageSize   = math.min(50, math.max(1, tonumber(limit) or 10))
 
     local identifier = ps.getIdentifier(src)
-    local job = ps.getJobName(src)
-    local jobType = getEffectiveJobType(src)
+    local job        = ps.getJobName(src)
+    local jobType    = getEffectiveJobType(src)
+    local offset     = (pageNumber - 1) * pageSize
 
-    local offset = (pageNumber - 1) * pageSize
     local rows = MySQL.query.await([[
         SELECT mr.id, mr.title, mr.type, mr.contentplaintext, mr.author, mr.authorplaintext, mr.datecreated, mr.dateupdated
         FROM mdt_reports mr
@@ -181,8 +147,8 @@ ps.registerCallback(resourceName .. ':server:getRecentReports', function(source,
             ))
             OR (mrr.reportid IS NULL AND (? = 'leo' OR ? = 'ems'))
             OR (mrr.type = 'citizenid' AND mrr.identifier = ?)
-            OR (mrr.type = 'job' AND mrr.identifier = ?)
-            OR (mrr.type = 'jobtype' AND mrr.identifier = ?)
+            OR (mrr.type = 'job'       AND mrr.identifier = ?)
+            OR (mrr.type = 'jobtype'   AND mrr.identifier = ?)
         )
         GROUP BY mr.id
         ORDER BY mr.datecreated DESC
@@ -199,15 +165,14 @@ ps.registerCallback(resourceName .. ':server:getActiveBolos', function(source)
     local BOLOS = MySQL.query.await('SELECT * FROM mdt_bolos WHERE status = ? ORDER BY id DESC', { 'active' })
     local result = {}
     for _, v in pairs(BOLOS or {}) do
-        local formattedBolo = {
-            id = v.id,
+        result[#result + 1] = {
+            id       = v.id,
             reportId = v.reportId and tostring(v.reportId) or 'N/A',
-            name = v.subject_name or ps.getPlayerNameByIdentifier(v.subject_id) or 'Unknown',
-            type = v.type,
-            notes = v.notes or '',
-            status = v.status,
+            name     = v.subject_name or ps.getPlayerNameByIdentifier(v.subject_id) or 'Unknown',
+            type     = v.type,
+            notes    = v.notes or '',
+            status   = v.status,
         }
-        table.insert(result, formattedBolo)
     end
     ps.debug('Fetched ' .. #result .. ' active BOLOs from database for source ' .. src, result)
     return result
@@ -221,32 +186,27 @@ ps.registerCallback(resourceName .. ':server:getActiveUnits', function(source)
     end)
 end)
 
--- Sanitize dispatch data for safe serialization through ps.callback
--- ps-dispatch objects contain vectors/coords that msgpack can't serialize
 local function sanitizeDispatch(call)
     if not call or type(call) ~= 'table' then return nil end
-
     local sanitized = {
-        id = call.id,
-        message = call.message or call.dispatchMessage or '',
-        code = call.code or call.dispatchCode or '',
-        street = call.street or '',
-        priority = call.priority or 0,
-        time = call.time or 0,
-        gender = call.gender,
-        plate = call.plate,
-        color = call.color,
-        model = call.model,
-        weapon = call.weapon,
-        heading = call.heading,
-        speed = call.speed,
-        callSign = call.callSign,
+        id          = call.id,
+        message     = call.message     or call.dispatchMessage or '',
+        code        = call.code        or call.dispatchCode    or '',
+        street      = call.street      or '',
+        priority    = call.priority    or 0,
+        time        = call.time        or 0,
+        gender      = call.gender,
+        plate       = call.plate,
+        color       = call.color,
+        model       = call.model,
+        weapon      = call.weapon,
+        heading     = call.heading,
+        speed       = call.speed,
+        callSign    = call.callSign,
         description = call.description,
-        camId = call.camId,
-        firstColor = call.firstColor,
+        camId       = call.camId,
+        firstColor  = call.firstColor,
     }
-
-    -- Sanitize coords (vectors can't serialize)
     if call.coords then
         if type(call.coords) == 'vector3' or type(call.coords) == 'vector4' then
             sanitized.coords = { x = call.coords.x, y = call.coords.y, z = call.coords.z }
@@ -254,30 +214,25 @@ local function sanitizeDispatch(call)
             sanitized.coords = { x = call.coords.x or call.coords[1], y = call.coords.y or call.coords[2], z = call.coords.z or call.coords[3] }
         end
     end
-
-    -- Sanitize units array
     sanitized.units = {}
     if call.units and type(call.units) == 'table' then
         for _, unit in pairs(call.units) do
             if type(unit) == 'table' then
                 sanitized.units[#sanitized.units + 1] = {
                     citizenid = unit.citizenid,
-                    charinfo = unit.charinfo,
-                    job = unit.job,
-                    metadata = unit.metadata and { callsign = unit.metadata.callsign } or nil,
+                    charinfo  = unit.charinfo,
+                    job       = unit.job,
+                    metadata  = unit.metadata and { callsign = unit.metadata.callsign } or nil,
                 }
             end
         end
     end
-
-    -- Sanitize jobs array
     if call.jobs and type(call.jobs) == 'table' then
         sanitized.jobs = {}
         for _, job in ipairs(call.jobs) do
             sanitized.jobs[#sanitized.jobs + 1] = job
         end
     end
-
     return sanitized
 end
 
@@ -291,7 +246,6 @@ ps.registerCallback(resourceName .. ':server:getRecentDispatches', function(sour
     if not ok then return {} end
     recentDispatches = recentDispatches or {}
 
-    -- Filter by job if configured
     local dispatches = recentDispatches
     if Config and Config.Dispatch and Config.Dispatch.FilterByJob == true then
         local jobName = ps.getJobName(src)
@@ -302,31 +256,23 @@ ps.registerCallback(resourceName .. ':server:getRecentDispatches', function(sour
                 if not call.jobs or #call.jobs == 0 then
                     filtered[#filtered + 1] = call
                 else
-                    local matched = false
                     for _, job in ipairs(call.jobs) do
                         if job == jobName or job == jobType then
-                            matched = true
+                            filtered[#filtered + 1] = call
                             break
                         end
                     end
-                    if matched then
-                        filtered[#filtered + 1] = call
-                    end
                 end
             end
             dispatches = filtered
         end
     end
 
-    -- Sanitize for serialization
     local result = {}
     for _, call in ipairs(dispatches) do
         local sanitized = sanitizeDispatch(call)
-        if sanitized then
-            result[#result + 1] = sanitized
-        end
+        if sanitized then result[#result + 1] = sanitized end
     end
-
     return result
 end)
 
@@ -335,129 +281,22 @@ ps.registerCallback(resourceName .. ':server:getUsageMetrics', function(source)
     if not CheckAuth(src) then return {} end
 
     return Cache.getOrSet('dashboard:usageMetrics', Config.CacheTTL and Config.CacheTTL.UsageMetrics or 60, function()
-        -- Use separate queries with pcall to handle missing tables gracefully
         local function safeCount(query, params)
             local ok, result = pcall(MySQL.scalar.await, query, params or {})
-            if ok then return tonumber(result) or 0 end
-            return 0
+            return ok and (tonumber(result) or 0) or 0
         end
-
-        local totalReports = safeCount('SELECT COUNT(*) FROM mdt_reports')
-        local reportsLast7 = safeCount('SELECT COUNT(*) FROM mdt_reports WHERE datecreated >= NOW() - INTERVAL 7 DAY')
-        local reportsLast30 = safeCount('SELECT COUNT(*) FROM mdt_reports WHERE datecreated >= NOW() - INTERVAL 30 DAY')
-        local totalArrests = safeCount('SELECT COUNT(*) FROM mdt_arrests')
-        local arrestsLast7 = safeCount('SELECT COUNT(*) FROM mdt_arrests WHERE created_at >= NOW() - INTERVAL 7 DAY')
-        local arrestsLast30 = safeCount('SELECT COUNT(*) FROM mdt_arrests WHERE created_at >= NOW() - INTERVAL 30 DAY')
-        local activeWarrants = safeCount('SELECT COUNT(*) FROM mdt_reports_warrants WHERE expirydate >= NOW()')
-
         return {
             totals = {
-                reports = totalReports,
-                arrests = totalArrests,
-                activeWarrants = activeWarrants,
+                reports       = safeCount('SELECT COUNT(*) FROM mdt_reports'),
+                arrests       = safeCount('SELECT COUNT(*) FROM mdt_arrests'),
+                activeWarrants = safeCount('SELECT COUNT(*) FROM mdt_reports_warrants WHERE expirydate >= NOW()'),
             },
             windows = {
-                reportsLast7 = reportsLast7,
-                reportsLast30 = reportsLast30,
-                arrestsLast7 = arrestsLast7,
-                arrestsLast30 = arrestsLast30,
-            }
+                reportsLast7   = safeCount('SELECT COUNT(*) FROM mdt_reports WHERE datecreated >= NOW() - INTERVAL 7 DAY'),
+                reportsLast30  = safeCount('SELECT COUNT(*) FROM mdt_reports WHERE datecreated >= NOW() - INTERVAL 30 DAY'),
+                arrestsLast7   = safeCount('SELECT COUNT(*) FROM mdt_arrests WHERE created_at >= NOW() - INTERVAL 7 DAY'),
+                arrestsLast30  = safeCount('SELECT COUNT(*) FROM mdt_arrests WHERE created_at >= NOW() - INTERVAL 30 DAY'),
+            },
         }
     end)
-end)
- 
-local function getSetting(key)
-    local rows = exports.oxmysql:executeSync(
-        'SELECT `value` FROM `mdt_bulletin_settings` WHERE `key` = ? LIMIT 1',
-        { key }
-    )
-    if rows and rows[1] then
-        return rows[1].value
-    end
-    return nil
-end
- 
-local function setSetting(key, value)
-    exports.oxmysql:executeSync(
-        [[
-            INSERT INTO `mdt_bulletin_settings` (`key`, `value`)
-            VALUES (?, ?)
-            ON DUPLICATE KEY UPDATE `value` = VALUES(`value`), `updated_at` = CURRENT_TIMESTAMP
-        ]],
-        { key, value }
-    )
-end
-
--- ── CALLBACK: getBulletinCategories ──────────────────────────────────────────
- 
-lib.callback.register('mdt:server:getBulletinCategories', function(source)
-    local raw = getSetting(SETTINGS_KEY)
- 
-    if not raw then
-        return DEFAULT_CATEGORIES
-    end
- 
-    local ok, decoded = pcall(json.decode, raw)
-    if not ok or type(decoded) ~= 'table' or #decoded == 0 then
-        return DEFAULT_CATEGORIES
-    end
- 
-    local sanitized = {}
-    for _, cat in ipairs(decoded) do
-        if type(cat.value) == 'string' and type(cat.label) == 'string' and type(cat.icon) == 'string' then
-            sanitized[#sanitized + 1] = {
-                value = cat.value,
-                label = cat.label,
-                icon  = cat.icon,
-            }
-        end
-    end
- 
-    if #sanitized == 0 then
-        return DEFAULT_CATEGORIES
-    end
- 
-    return sanitized
-end)
- 
--- ── CALLBACK: saveBulletinCategories ─────────────────────────────────────────
- 
-lib.callback.register('mdt:server:saveBulletinCategories', function(source, categories)
-    if type(categories) ~= 'table' or #categories == 0 then
-        return { success = false, message = 'No categories provided' }
-    end
- 
-    local ALLOWED_VALUES = { announcement = true, operations = true, training = true, general = true }
- 
-    local clean = {}
-    for _, cat in ipairs(categories) do
-        if type(cat.value) ~= 'string' or not ALLOWED_VALUES[cat.value] then
-            return { success = false, message = ('Unknown category value: %s'):format(tostring(cat.value)) }
-        end
-        if type(cat.label) ~= 'string' or #cat.label == 0 or #cat.label > 32 then
-            return { success = false, message = 'Invalid label for category: ' .. tostring(cat.value) }
-        end
-        if type(cat.icon) ~= 'string' or #cat.icon == 0 or #cat.icon > 48 then
-            return { success = false, message = 'Invalid icon for category: ' .. tostring(cat.value) }
-        end
-        clean[#clean + 1] = {
-            value = cat.value,
-            label = cat.label,
-            icon  = cat.icon,
-        }
-    end
- 
-    local ok, encoded = pcall(json.encode, clean)
-    if not ok then
-        return { success = false, message = 'JSON encode error' }
-    end
- 
-    local saveOk, err = pcall(setSetting, SETTINGS_KEY, encoded)
-    if not saveOk then
-        ps.warn('^1[MDT] bulletin_settings save error: ' .. tostring(err) .. '^0')
-        return { success = false, message = 'Database error' }
-    end
- 
-    ps.success(('[MDT] Bulletin categories updated by source %d'):format(source))
-    return { success = true }
 end)
\ No newline at end of file

From 1e546f65381e617e93d365e01e11c114b0bdf44c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 00:30:54 +0200
Subject: [PATCH 115/144] Add files via upload

---
 client/backend/bulletinboard.lua | 51 +++++++++++++++++++++++++++++++-
 client/backend/dashboard.lua     |  4 +--
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/client/backend/bulletinboard.lua b/client/backend/bulletinboard.lua
index d6729213..bbd989e8 100644
--- a/client/backend/bulletinboard.lua
+++ b/client/backend/bulletinboard.lua
@@ -22,7 +22,7 @@ RegisterNUICallback('updateBulletinPost', function(data, cb)
     cb(result or { success = false })
 end)
 
--- Delete a bulletin post (soft delete)
+-- Delete a bulletin post
 RegisterNUICallback('deleteBulletinPost', function(data, cb)
     if not data or not data.id then cb({ success = false }) return end
     local result = ps.callback(resourceName .. ':server:deleteBulletinPost', data.id)
@@ -34,4 +34,53 @@ RegisterNUICallback('toggleBulletinPin', function(data, cb)
     if not data or not data.id then cb({ success = false }) return end
     local result = ps.callback(resourceName .. ':server:toggleBulletinPin', data.id)
     cb(result or { success = false })
+end)
+
+-- ── Category management ───────────────────────────────────────
+
+-- Get all categories for the current job
+RegisterNUICallback('getBulletinCategories', function(data, cb)
+    local result = ps.callback(resourceName .. ':server:getBulletinCategories')
+    cb(result or {})
+end)
+
+-- Add a new category
+RegisterNUICallback('addBulletinCategory', function(data, cb)
+    if not data or not data.label or data.label == '' then
+        cb({ success = false, error = 'Missing required fields' })
+        return
+    end
+    local result = ps.callback(resourceName .. ':server:addBulletinCategory', data)
+    cb(result or { success = false })
+end)
+
+-- Update an existing category (label, icon, color, sort_order)
+RegisterNUICallback('updateBulletinCategory', function(data, cb)
+    if not data or not data.value then
+        cb({ success = false, error = 'Missing category value' })
+        return
+    end
+    local result = ps.callback(resourceName .. ':server:updateBulletinCategory', data)
+    cb(result or { success = false })
+end)
+
+-- Remove a category by value
+RegisterNUICallback('removeBulletinCategory', function(data, cb)
+    if not data or not data.value then
+        cb({ success = false, error = 'Missing category value' })
+        return
+    end
+    local result = ps.callback(resourceName .. ':server:removeBulletinCategory', data)
+    cb(result or { success = false })
+end)
+
+-- Reorder categories (bulk sort_order update)
+RegisterNUICallback('reorderBulletinCategories', function(data, cb)
+    if not data or not data.order then
+        cb({ success = false, error = 'Missing order data' })
+        return
+    end
+    -- Pass the whole data table so server can read data.order reliably
+    local result = ps.callback(resourceName .. ':server:reorderBulletinCategories', data)
+    cb(result or { success = false })
 end)
\ No newline at end of file
diff --git a/client/backend/dashboard.lua b/client/backend/dashboard.lua
index 9f18165f..3f0d45d2 100644
--- a/client/backend/dashboard.lua
+++ b/client/backend/dashboard.lua
@@ -175,7 +175,7 @@ RegisterNUICallback('deleteBulletin', function(data, cb)
 end)
 
 RegisterNUICallback('getBulletinCategories', function(_, cb)
-    local result = lib.callback.await('mdt:server:getBulletinCategories', false)
+    local result = ps.callback(resourceName .. ':server:getBulletinCategories', false)
     cb(result or {})
 end)
 
@@ -196,7 +196,7 @@ RegisterNUICallback('saveBulletinCategories', function(data, cb)
         end
     end
  
-    local result = lib.callback.await('mdt:server:saveBulletinCategories', false, data.categories)
+    local result = ps.callback('mdt:server:saveBulletinCategories', false, data.categories)
     cb(result or { success = false, message = 'Server error' })
 end)
 

From fd6994ca04e62f3a2212c1ef711579335920cde6 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 00:31:24 +0200
Subject: [PATCH 116/144] Add files via upload

---
 web/src/constants/nuiEvents.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index d20ba376..b8b3f9e2 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -302,13 +302,17 @@ export const NUI_EVENTS = {
 		ACKNOWLEDGE_SOP: "acknowledgesSOP",
 	},
 	BULLETIN: {
-		GET_POSTS:   "getBulletinPosts",
-		CREATE_POST: "createBulletinPost",
-		UPDATE_POST: "updateBulletinPost",
-		DELETE_POST: "deleteBulletinPost",
-		TOGGLE_PIN:  "toggleBulletinPin",
-		GET_CATEGORIES:  'getBulletinCategories',
-        SAVE_CATEGORIES: 'saveBulletinCategories',
+        GET_POSTS:           'getBulletinPosts',
+        CREATE_POST:         'createBulletinPost',
+        UPDATE_POST:         'updateBulletinPost',
+        DELETE_POST:         'deleteBulletinPost',
+        TOGGLE_PIN:          'toggleBulletinPin',
+        GET_CATEGORIES:      'getBulletinCategories',
+        ADD_CATEGORY:        'addBulletinCategory',
+        UPDATE_CATEGORY:     'updateBulletinCategory',
+        REMOVE_CATEGORY:     'removeBulletinCategory',
+        REORDER_CATEGORIES:  'reorderBulletinCategories',
+        SAVE_CATEGORIES:     'updateBulletinCategory',
 	},
 } as const;
 

From e6e00697a075b89de355dee8637d5afeca9d0e84 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 00:31:51 +0200
Subject: [PATCH 117/144] Add files via upload

---
 web/src/pages/BulletInBoard.svelte | 725 +++++++++++------------------
 1 file changed, 282 insertions(+), 443 deletions(-)

diff --git a/web/src/pages/BulletInBoard.svelte b/web/src/pages/BulletInBoard.svelte
index 2f01ec71..375da161 100644
--- a/web/src/pages/BulletInBoard.svelte
+++ b/web/src/pages/BulletInBoard.svelte
@@ -12,7 +12,9 @@
         content: string;
         author: string;
         author_rank: string;
-        category: BulletinCategory;
+        category: string;
+        category_label?: string;
+        category_color?: string;
         priority: BulletinPriority;
         pinned: boolean;
         created_by: string;
@@ -24,9 +26,11 @@
         value: string;
         label: string;
         icon: string;
+        color: string;
+        sort_order?: number;
+        is_default?: boolean;
     }
 
-    type BulletinCategory = 'announcement' | 'operations' | 'training' | 'general';
     type BulletinPriority = 'low' | 'normal' | 'high' | 'urgent';
 
     interface ModalState {
@@ -39,14 +43,9 @@
 
     // ── Constants ──────────────────────────────────────────────
 
-    const STATIC_ALL_CATEGORY: SidebarCategory = { label: 'All Posts', icon: 'dashboard', value: 'all' };
-
-    const DEFAULT_DYNAMIC_CATEGORIES: SidebarCategory[] = [
-        { label: 'Announcements', icon: 'campaign',     value: 'announcement' },
-        { label: 'Operations',    icon: 'local_police', value: 'operations'   },
-        { label: 'Training',      icon: 'school',       value: 'training'     },
-        { label: 'General',       icon: 'forum',        value: 'general'      },
-    ];
+    const STATIC_ALL_CATEGORY: SidebarCategory = {
+        label: 'All Posts', icon: 'dashboard', value: 'all', color: '#6B7280'
+    };
 
     const PRIORITY_META: Record<BulletinPriority, { label: string; icon: string; color: string }> = {
         low:    { label: 'Low',    icon: 'arrow_downward', color: 'rgba(100,200,100,0.80)' },
@@ -58,14 +57,13 @@
     // ── State ──────────────────────────────────────────────────
 
     let posts           = $state<BulletinPost[]>([]);
+    let categories      = $state<SidebarCategory[]>([]);
     let loading         = $state(true);
     let saving          = $state(false);
     let searchQuery     = $state('');
     let activeCategory  = $state('all');
     let expandedId      = $state<number | null>(null);
 
-    let dynamicCategories = $state<SidebarCategory[]>(DEFAULT_DYNAMIC_CATEGORIES);
-
     let modal = $state<ModalState>({
         open: false,
         mode: 'create',
@@ -79,10 +77,10 @@
 
     // ── Derived ────────────────────────────────────────────────
 
-    let sidebarCategories = $derived([STATIC_ALL_CATEGORY, ...dynamicCategories]);
+    let sidebarCategories = $derived([STATIC_ALL_CATEGORY, ...categories]);
 
-    let categoryLabels = $derived(
-        Object.fromEntries(dynamicCategories.map(c => [c.value, c.label]))
+    let activeCatMeta = $derived(
+        sidebarCategories.find(c => c.value === activeCategory) ?? STATIC_ALL_CATEGORY
     );
 
     let pinnedPosts = $derived(
@@ -115,7 +113,8 @@
     // ── Helpers ────────────────────────────────────────────────
 
     function defaultPost(): Partial<BulletinPost> {
-        return { title: '', content: '', category: 'general', priority: 'normal', pinned: false };
+        const firstCat = categories[0]?.value ?? 'general';
+        return { title: '', content: '', category: firstCat, priority: 'normal', pinned: false };
     }
 
     function matchesSearch(p: BulletinPost): boolean {
@@ -137,7 +136,16 @@
         } catch { return dateStr; }
     }
 
-    function canEdit(post: BulletinPost): boolean {
+    function getCategoryMeta(value: string): SidebarCategory {
+        return categories.find(c => c.value === value) ?? {
+            value,
+            label: value,
+            icon: 'label',
+            color: '#6B7280',
+        };
+    }
+
+    function canEdit(_post: BulletinPost): boolean {
         return authService?.hasPermission?.('bulletin_post') || false;
     }
 
@@ -152,17 +160,18 @@
     // ── Data loading ───────────────────────────────────────────
 
     onMount(async () => {
-        await Promise.all([loadPosts(), loadCategories()]);
+        await loadCategories();
+        await loadPosts();
     });
 
     async function loadCategories() {
         try {
             const result = await fetchNui<SidebarCategory[]>(NUI_EVENTS.BULLETIN.GET_CATEGORIES, {}, []);
             if (Array.isArray(result) && result.length > 0) {
-                dynamicCategories = result;
+                categories = result;
             }
         } catch {
-            // keep defaults
+            // keep empty, posts still load fine
         }
     }
 
@@ -253,18 +262,36 @@
 
         <div class="category-list">
             {#each sidebarCategories as cat}
+                {@const count = postCountFor(cat.value)}
                 <button
                     class="category-item"
                     class:active={activeCategory === cat.value}
                     onclick={() => activeCategory = cat.value}
+                    style={activeCategory === cat.value && cat.value !== 'all'
+                        ? `--cat-color: ${cat.color};`
+                        : ''}
                 >
-                    <span class="material-icons cat-icon">{cat.icon}</span>
+                    <!-- Colored dot for non-"all" categories -->
+                    {#if cat.value !== 'all'}
+                        <span
+                            class="cat-color-dot"
+                            style="background:{cat.color};"
+                        ></span>
+                    {/if}
+                    <span
+                        class="material-icons cat-icon"
+                        style={activeCategory === cat.value && cat.value !== 'all' ? `color:${cat.color};` : ''}
+                    >{cat.icon}</span>
                     <div class="cat-info">
                         <span class="cat-title">{cat.label}</span>
-                        <span class="cat-count">
-                            {postCountFor(cat.value)} post{postCountFor(cat.value) !== 1 ? 's' : ''}
-                        </span>
+                        <span class="cat-count">{count} post{count !== 1 ? 's' : ''}</span>
                     </div>
+                    {#if activeCategory === cat.value && cat.value !== 'all'}
+                        <span
+                            class="cat-active-bar"
+                            style="background:{cat.color};"
+                        ></span>
+                    {/if}
                 </button>
             {/each}
         </div>
@@ -281,6 +308,20 @@
 
     <!-- ── Main Content ── -->
     <div class="bulletin-content">
+
+        <!-- Active category header bar -->
+        {#if activeCategory !== 'all'}
+            <div
+                class="content-cat-header"
+                style="border-left-color:{activeCatMeta.color}; background:linear-gradient(90deg, {activeCatMeta.color}12, transparent);"
+            >
+                <span class="material-icons" style="color:{activeCatMeta.color}; font-size:16px;">{activeCatMeta.icon}</span>
+                <span class="content-cat-title" style="color:{activeCatMeta.color};">{activeCatMeta.label}</span>
+                <span class="content-cat-sep">·</span>
+                <span class="content-cat-count">{postCountFor(activeCategory)} post{postCountFor(activeCategory) !== 1 ? 's' : ''}</span>
+            </div>
+        {/if}
+
         {#if loading}
             <div class="content-empty">
                 <div class="spinner"></div>
@@ -304,7 +345,9 @@
                 </div>
                 <div class="posts-list">
                     {#each pinnedPosts as post (post.id)}
-                        <div class="post-card pinned" class:expanded={expandedId === post.id}>
+                        {@const catMeta = getCategoryMeta(post.category)}
+                        <div class="post-card pinned" class:expanded={expandedId === post.id}
+                             style="--post-cat-color:{catMeta.color};">
                             <button class="post-header" onclick={() => expandedId = expandedId === post.id ? null : post.id}>
                                 <div class="post-header-left">
                                     <span
@@ -317,7 +360,7 @@
                                     <h3 class="post-title">{post.title}</h3>
                                 </div>
                                 <div class="post-header-right">
-                                    <span class="material-icons pin-icon">push_pin</span>
+                                    <span class="material-icons pin-icon" style="color:{catMeta.color}40;">push_pin</span>
                                     <span class="material-icons expand-icon">{expandedId === post.id ? 'expand_less' : 'expand_more'}</span>
                                 </div>
                             </button>
@@ -329,8 +372,14 @@
                                     <span class="meta-rank">{post.author_rank}</span>
                                 {/if}
                                 <span class="meta-sep">·</span>
-                                <span class="material-icons meta-icon">label</span>
-                                <span class="meta-cat">{categoryLabels[post.category] ?? post.category}</span>
+                                <!-- Category tag with color -->
+                                <span
+                                    class="meta-cat-tag"
+                                    style="color:{catMeta.color};background:{catMeta.color}12;border-color:{catMeta.color}25;"
+                                >
+                                    <span class="material-icons" style="font-size:10px;">{catMeta.icon}</span>
+                                    {post.category_label ?? catMeta.label}
+                                </span>
                                 <span class="meta-sep">·</span>
                                 <span class="material-icons meta-icon">schedule</span>
                                 <span class="meta-date">{formatDate(post.created_at)}</span>
@@ -372,7 +421,12 @@
                 </div>
                 <div class="posts-list">
                     {#each regularPosts() as post (post.id)}
-                        <div class="post-card" class:expanded={expandedId === post.id}>
+                        {@const catMeta = getCategoryMeta(post.category)}
+                        <div class="post-card" class:expanded={expandedId === post.id}
+                             style="--post-cat-color:{catMeta.color};">
+                            <!-- Left color accent bar -->
+                            <div class="post-cat-bar" style="background:{catMeta.color};"></div>
+
                             <button class="post-header" onclick={() => expandedId = expandedId === post.id ? null : post.id}>
                                 <div class="post-header-left">
                                     <span
@@ -394,8 +448,14 @@
                                     <span class="meta-rank">{post.author_rank}</span>
                                 {/if}
                                 <span class="meta-sep">·</span>
-                                <span class="material-icons meta-icon">label</span>
-                                <span class="meta-cat">{categoryLabels[post.category] ?? post.category}</span>
+                                <!-- Category tag with color -->
+                                <span
+                                    class="meta-cat-tag"
+                                    style="color:{catMeta.color};background:{catMeta.color}12;border-color:{catMeta.color}25;"
+                                >
+                                    <span class="material-icons" style="font-size:10px;">{catMeta.icon}</span>
+                                    {post.category_label ?? catMeta.label}
+                                </span>
                                 <span class="meta-sep">·</span>
                                 <span class="material-icons meta-icon">schedule</span>
                                 <span class="meta-date">{formatDate(post.created_at)}</span>
@@ -439,7 +499,7 @@
 </div>
 
 <!-- ════════════════════════════════════════════════════════════
-     Create / Edit Modal  (Weapons-style)
+     Create / Edit Modal
 ═════════════════════════════════════════════════════════════ -->
 {#if modal.open}
     <div class="modal-backdrop" onclick={closeModal}>
@@ -471,10 +531,19 @@
                 <div class="form-group">
                     <span class="field-label">Category</span>
                     <select class="form-input form-select" bind:value={modal.post.category}>
-                        {#each dynamicCategories as cat}
+                        {#each categories as cat}
                             <option value={cat.value}>{cat.label}</option>
                         {/each}
                     </select>
+                    <!-- Color preview for selected category -->
+                    {#if modal.post.category}
+                        {@const selCat = getCategoryMeta(modal.post.category)}
+                        <div class="cat-select-preview">
+                            <span class="dot" style="background:{selCat.color};"></span>
+                            <span class="material-icons" style="font-size:12px;color:{selCat.color};">{selCat.icon}</span>
+                            <span style="color:{selCat.color}; font-size:10px;">{selCat.label}</span>
+                        </div>
+                    {/if}
                 </div>
 
                 <div class="form-group">
@@ -529,7 +598,7 @@
 {/if}
 
 <!-- ════════════════════════════════════════════════════════════
-     Delete Confirm Modal  (Weapons-style)
+     Delete Confirm Modal
 ═════════════════════════════════════════════════════════════ -->
 {#if deleteConfirm.open}
     <div class="modal-backdrop" onclick={() => deleteConfirm = { open: false, postId: null }}>
@@ -559,548 +628,318 @@
 
 <style>
     /* ── Layout ──────────────────────────────────────────────── */
-    .bulletin-page {
-        display: flex;
-        height: 100%;
-        overflow: hidden;
-    }
+    .bulletin-page { display: flex; height: 100%; overflow: hidden; }
 
     /* ── Sidebar ─────────────────────────────────────────────── */
     .bulletin-sidebar {
-        width: 280px;
-        min-width: 280px;
-        border-right: 1px solid rgba(255, 255, 255, 0.06);
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
+        width: 280px; min-width: 280px;
+        border-right: 1px solid rgba(255,255,255,0.06);
+        display: flex; flex-direction: column; overflow: hidden;
     }
 
     .sidebar-header {
         padding: 20px 20px 16px;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+        display: flex; align-items: center; gap: 10px;
+        border-bottom: 1px solid rgba(255,255,255,0.06);
         flex-shrink: 0;
     }
 
     .header-icon { font-size: 22px; color: var(--accent-70); }
+    .sidebar-header h2 { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); margin: 0; }
 
-    .sidebar-header h2 {
-        font-size: 14px;
-        font-weight: 600;
-        color: rgba(255, 255, 255, 0.9);
-        margin: 0;
-    }
-
-    .search-box {
-        padding: 12px 16px;
-        position: relative;
-        flex-shrink: 0;
-    }
-
-    .search-icon {
-        position: absolute;
-        left: 26px;
-        top: 50%;
-        transform: translateY(-50%);
-        font-size: 16px;
-        color: rgba(255, 255, 255, 0.3);
-    }
-
+    .search-box { padding: 12px 16px; position: relative; flex-shrink: 0; }
+    .search-icon { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); font-size: 16px; color: rgba(255,255,255,0.3); }
     .search-box input {
-        width: 100%;
-        padding: 8px 12px 8px 34px;
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 6px;
-        color: rgba(255, 255, 255, 0.9);
-        font-size: 12px;
-        outline: none;
-        transition: border-color 0.15s;
+        width: 100%; padding: 8px 12px 8px 34px;
+        background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 6px; color: rgba(255,255,255,0.9); font-size: 12px; outline: none; transition: border-color 0.15s;
     }
-
     .search-box input:focus { border-color: var(--accent-35); }
-    .search-box input::placeholder { color: rgba(255, 255, 255, 0.3); }
+    .search-box input::placeholder { color: rgba(255,255,255,0.3); }
 
     .category-list {
-        flex: 1;
-        overflow-y: auto;
-        padding: 4px 8px;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+        flex: 1; overflow-y: auto; padding: 4px 8px;
+        scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
     }
 
     .category-item {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        gap: 10px;
+        width: 100%; display: flex; align-items: center; gap: 10px;
         padding: 10px 12px;
-        border: 1px solid transparent;
-        background: transparent;
-        border-radius: 6px;
-        cursor: pointer;
-        text-align: left;
-        transition: all 0.15s;
-        margin-bottom: 2px;
-        outline: none;
+        border: 1px solid transparent; background: transparent;
+        border-radius: 6px; cursor: pointer; text-align: left;
+        transition: all 0.15s; margin-bottom: 2px; outline: none;
+        position: relative; overflow: hidden;
+    }
+    .category-item:hover:not(.active) { background: rgba(255,255,255,0.04); }
+    .category-item.active {
+        background: color-mix(in srgb, var(--cat-color, var(--accent-color)) 8%, transparent);
+        border-color: color-mix(in srgb, var(--cat-color, var(--accent-color)) 20%, transparent);
     }
 
-    .category-item:hover:not(.active) { background: rgba(255, 255, 255, 0.04); }
-    .category-item.active { background: var(--accent-10); border-color: var(--accent-15); }
-
-    .cat-icon { font-size: 18px; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
-    .category-item.active .cat-icon { color: var(--accent-70); }
-
-    .cat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+    .cat-color-dot {
+        width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+        opacity: 0.7;
+    }
 
-    .cat-title {
-        font-size: 12px;
-        font-weight: 500;
-        color: rgba(255, 255, 255, 0.8);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .cat-active-bar {
+        position: absolute; right: 0; top: 20%; bottom: 20%;
+        width: 2px; border-radius: 2px 0 0 2px; opacity: 0.6;
     }
 
-    .cat-count { font-size: 10px; color: rgba(255, 255, 255, 0.35); }
+    .cat-icon { font-size: 18px; color: rgba(255,255,255,0.4); flex-shrink: 0; }
 
-    .sidebar-footer {
-        padding: 12px 16px;
-        border-top: 1px solid rgba(255, 255, 255, 0.06);
-        flex-shrink: 0;
-    }
+    .cat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+    .cat-title { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cat-count { font-size: 10px; color: rgba(255,255,255,0.35); }
+
+    .sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
 
     .create-btn {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-        padding: 9px 14px;
-        background: var(--accent-15);
-        border: 1px solid var(--accent-30);
-        border-radius: 6px;
-        color: var(--accent-80, rgba(100,160,255,0.9));
-        font-size: 12px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.15s;
-        outline: none;
+        width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
+        padding: 9px 14px; background: var(--accent-15); border: 1px solid var(--accent-30);
+        border-radius: 6px; color: var(--accent-80, rgba(100,160,255,0.9));
+        font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; outline: none;
     }
-
     .create-btn:hover { background: var(--accent-20); border-color: var(--accent-45); }
     .create-btn .material-icons { font-size: 16px; }
 
     /* ── Main Content ────────────────────────────────────────── */
     .bulletin-content {
-        flex: 1;
-        overflow-y: auto;
-        padding: 24px 32px;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+        flex: 1; overflow-y: auto; padding: 24px 32px;
+        scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
     }
 
-    .content-empty {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        gap: 8px;
-        color: rgba(255, 255, 255, 0.4);
-        text-align: center;
+    /* Category header bar */
+    .content-cat-header {
+        display: flex; align-items: center; gap: 8px;
+        padding: 8px 14px; border-radius: 6px; border-left: 3px solid;
+        margin-bottom: 18px;
     }
+    .content-cat-title { font-size: 13px; font-weight: 600; }
+    .content-cat-sep   { color: rgba(255,255,255,0.2); font-size: 12px; }
+    .content-cat-count { font-size: 11px; color: rgba(255,255,255,0.4); }
 
-    .empty-icon { font-size: 48px; color: rgba(255, 255, 255, 0.15); margin-bottom: 8px; }
-    .content-empty h3 { font-size: 16px; color: rgba(255, 255, 255, 0.6); margin: 0; }
-    .content-empty p  { font-size: 13px; color: rgba(255, 255, 255, 0.35); margin: 0; }
+    .content-empty {
+        display: flex; flex-direction: column; align-items: center; justify-content: center;
+        height: 100%; gap: 8px; color: rgba(255,255,255,0.4); text-align: center;
+    }
+    .empty-icon { font-size: 48px; color: rgba(255,255,255,0.15); margin-bottom: 8px; }
+    .content-empty h3 { font-size: 16px; color: rgba(255,255,255,0.6); margin: 0; }
+    .content-empty p  { font-size: 13px; color: rgba(255,255,255,0.35); margin: 0; }
 
     .section-label {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 10px;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.8px;
-        color: rgba(255, 255, 255, 0.3);
-        margin-bottom: 10px;
+        display: flex; align-items: center; gap: 6px;
+        font-size: 10px; font-weight: 700; text-transform: uppercase;
+        letter-spacing: 0.8px; color: rgba(255,255,255,0.3); margin-bottom: 10px;
     }
-
-    .label-icon { font-size: 13px; color: rgba(255, 255, 255, 0.25); }
+    .label-icon { font-size: 13px; color: rgba(255,255,255,0.25); }
 
     .posts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
 
+    /* ── Post cards ──────────────────────────────────────────── */
     .post-card {
-        background: rgba(255, 255, 255, 0.02);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 10px;
-        overflow: hidden;
-        transition: border-color 0.15s;
+        background: rgba(255,255,255,0.02);
+        border: 1px solid transparent;
+        border-radius: 10px; overflow: hidden; transition: border-color 0.15s;
+        position: relative;
     }
+    .post-card:hover { border-color: rgba(255,255,255,0.06); }
 
-    .post-card:hover { border-color: rgba(255, 255, 255, 0.10); }
+    /* Left accent bar (regular posts) */
+    .post-cat-bar {
+        position: absolute; left: 0; top: 0; bottom: 0;
+        width: 3px; opacity: 0.5;
+    }
 
     .post-card.pinned {
-        background: linear-gradient(135deg,
-            rgba(var(--accent-rgb, 59,130,246), 0.05),
-            rgba(var(--accent-rgb, 59,130,246), 0.01)
-        );
-        border-color: rgba(var(--accent-rgb, 59,130,246), 0.14);
+        background: rgba(59,130,246,0.07);
+        border-color: rgba(59,130,246,0.18);
     }
+    .post-card.pinned:hover { border-color: rgba(59,130,246,0.28); }
 
-    .post-card.expanded { border-color: rgba(255, 255, 255, 0.12); }
+    .post-card.expanded { border-color: rgba(255,255,255,0.08); }
+    .post-card.pinned.expanded { border-color: rgba(59,130,246,0.30); }
 
     .post-header {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        padding: 12px 16px;
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        text-align: left;
-        outline: none;
+        width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
+        padding: 12px 16px 12px 20px;
+        background: transparent; border: none; cursor: pointer; text-align: left; outline: none;
     }
-
-    .post-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
+    .post-header-left  { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
     .post-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
 
     .priority-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 3px;
-        padding: 2px 7px 2px 5px;
-        border: 1px solid;
-        border-radius: 4px;
-        font-size: 10px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.4px;
-        flex-shrink: 0;
-        white-space: nowrap;
+        display: inline-flex; align-items: center; gap: 3px;
+        padding: 2px 7px 2px 5px; border: 1px solid; border-radius: 4px;
+        font-size: 10px; font-weight: 600; text-transform: uppercase;
+        letter-spacing: 0.4px; flex-shrink: 0; white-space: nowrap;
     }
-
     .prio-icon { font-size: 11px; }
 
     .post-title {
-        font-size: 13px;
-        font-weight: 600;
-        color: rgba(255, 255, 255, 0.88);
-        margin: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.88);
+        margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
 
-    .pin-icon    { font-size: 14px; color: var(--accent-50, rgba(59,130,246,0.5)); }
-    .expand-icon { font-size: 18px; color: rgba(255, 255, 255, 0.25); flex-shrink: 0; }
+    .pin-icon    { font-size: 14px; }
+    .expand-icon { font-size: 18px; color: rgba(255,255,255,0.25); flex-shrink: 0; }
 
+    /* Meta row */
     .post-meta {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        padding: 0 16px 10px;
-        flex-wrap: wrap;
+        display: flex; align-items: center; gap: 5px;
+        padding: 0 16px 10px; flex-wrap: wrap;
     }
-
-    .meta-icon   { font-size: 12px; color: rgba(255, 255, 255, 0.25); }
-    .meta-author { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
+    .meta-icon   { font-size: 12px; color: rgba(255,255,255,0.25); }
+    .meta-author { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.55); }
     .meta-rank   {
-        font-size: 10px;
-        color: rgba(255, 255, 255, 0.3);
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.07);
-        border-radius: 3px;
-        padding: 1px 5px;
+        font-size: 10px; color: rgba(255,255,255,0.3);
+        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07);
+        border-radius: 3px; padding: 1px 5px;
     }
-    .meta-cat  { font-size: 11px; color: rgba(255, 255, 255, 0.35); }
-    .meta-sep  { color: rgba(255, 255, 255, 0.18); font-size: 11px; }
-    .meta-date { font-size: 11px; color: rgba(255, 255, 255, 0.30); }
+    .meta-sep  { color: rgba(255,255,255,0.18); font-size: 11px; }
+    .meta-date { font-size: 11px; color: rgba(255,255,255,0.30); }
 
-    .post-body {
-        padding: 14px 16px;
-        border-top: 1px solid rgba(255, 255, 255, 0.04);
-        color: rgba(255, 255, 255, 0.72);
-        font-size: 12.5px;
-        line-height: 1.7;
+    .meta-cat-tag {
+        display: inline-flex; align-items: center; gap: 3px;
+        font-size: 10px; font-weight: 500;
+        padding: 1px 6px; border-radius: 3px; border: 1px solid;
     }
 
-    .post-body :global(h1),
-    .post-body :global(h2),
-    .post-body :global(h3) { color: rgba(255, 255, 255, 0.9); margin: 12px 0 6px; }
+    /* Post body */
+    .post-body {
+        padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.04);
+        color: rgba(255,255,255,0.72); font-size: 12.5px; line-height: 1.7;
+    }
+    .post-body :global(h1), .post-body :global(h2), .post-body :global(h3) { color: rgba(255,255,255,0.9); margin: 12px 0 6px; }
     .post-body :global(h1) { font-size: 15px; }
     .post-body :global(h2) { font-size: 14px; }
     .post-body :global(h3) { font-size: 13px; }
     .post-body :global(p)  { margin: 5px 0; }
-    .post-body :global(ul),
-    .post-body :global(ol) { padding-left: 20px; margin: 5px 0; }
+    .post-body :global(ul), .post-body :global(ol) { padding-left: 20px; margin: 5px 0; }
     .post-body :global(li) { margin: 3px 0; }
-    .post-body :global(strong) { color: rgba(255, 255, 255, 0.95); }
+    .post-body :global(strong) { color: rgba(255,255,255,0.95); }
 
+    /* Post actions */
     .post-actions {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 10px 16px 12px;
-        border-top: 1px solid rgba(255, 255, 255, 0.04);
+        display: flex; align-items: center; gap: 6px;
+        padding: 10px 16px 12px; border-top: 1px solid rgba(255,255,255,0.04);
     }
 
     .action-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 5px 10px;
-        border-radius: 5px;
-        font-size: 11px;
-        font-weight: 500;
-        cursor: pointer;
-        border: 1px solid;
-        transition: all 0.15s;
-        outline: none;
+        display: inline-flex; align-items: center; gap: 4px;
+        padding: 5px 10px; border-radius: 5px; font-size: 11px; font-weight: 500;
+        cursor: pointer; border: 1px solid; transition: all 0.15s; outline: none;
     }
-
     .action-btn .material-icons { font-size: 13px; }
-
-    .action-btn.pin {
-        color: var(--accent-70);
-        background: var(--accent-08, rgba(59,130,246,0.08));
-        border-color: var(--accent-20);
-    }
-    .action-btn.pin:hover { background: var(--accent-15); }
-
-    .action-btn.edit {
-        color: rgba(255, 255, 255, 0.65);
-        background: rgba(255, 255, 255, 0.04);
-        border-color: rgba(255, 255, 255, 0.08);
-    }
-    .action-btn.edit:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.07); }
-
-    .action-btn.delete {
-        color: rgba(220, 70, 60, 0.85);
-        background: rgba(220, 70, 60, 0.06);
-        border-color: rgba(220, 70, 60, 0.18);
-        margin-left: auto;
-    }
-    .action-btn.delete:hover { background: rgba(220, 70, 60, 0.12); }
-
-    /* ════════════════════════════════════════════════════════
-       Modals — Weapons.svelte style
-    ════════════════════════════════════════════════════════ */
+    .action-btn.pin  { color: var(--accent-70); background: var(--accent-08, rgba(59,130,246,0.08)); border-color: var(--accent-20); }
+    .action-btn.pin:hover  { background: var(--accent-15); }
+    .action-btn.edit { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
+    .action-btn.edit:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.07); }
+    .action-btn.delete { color: rgba(220,70,60,0.85); background: rgba(220,70,60,0.06); border-color: rgba(220,70,60,0.18); margin-left: auto; }
+    .action-btn.delete:hover { background: rgba(220,70,60,0.12); }
+
+    /* ════ Modals ════════════════════════════════════════════ */
     .modal-backdrop {
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, 0.7);
-        backdrop-filter: blur(4px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 100;
+        position: fixed; inset: 0; background: rgba(0,0,0,0.7);
+        backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100;
     }
-
     .modal {
-        background: var(--card-dark-bg, #1a1c22);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 6px;
-        width: min(540px, 92vw);
-        max-height: 85vh;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        background: var(--card-dark-bg, #1a1c22); border: 1px solid rgba(255,255,255,0.06);
+        border-radius: 6px; width: min(540px, 92vw); max-height: 85vh; overflow: hidden;
+        display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
     }
-
     .modal-sm { width: min(380px, 92vw); }
 
     .modal-header {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 10px 16px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-        flex-shrink: 0;
+        display: flex; align-items: center; gap: 10px;
+        padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
     }
-
     .modal-header-icon { font-size: 16px; color: var(--accent-70); }
-
-    .modal-header h3 {
-        font-size: 12px;
-        font-weight: 600;
-        color: rgba(255, 255, 255, 0.85);
-        margin: 0;
-        flex: 1;
-    }
+    .modal-header h3 { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); margin: 0; flex: 1; }
 
     .close-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: transparent;
-        color: rgba(255, 255, 255, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        padding: 4px;
-        border-radius: 3px;
-        cursor: pointer;
-        transition: all 0.1s;
-        outline: none;
+        display: flex; align-items: center; justify-content: center;
+        background: transparent; color: rgba(255,255,255,0.3);
+        border: 1px solid rgba(255,255,255,0.06); padding: 4px; border-radius: 3px;
+        cursor: pointer; transition: all 0.1s; outline: none;
     }
-    .close-btn:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+    .close-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }
 
     .modal-body {
-        flex: 1;
-        overflow-y: auto;
-        padding: 14px 16px;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 10px;
-        align-content: start;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+        flex: 1; overflow-y: auto; padding: 14px 16px;
+        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
+        scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
     }
 
     .form-group { display: flex; flex-direction: column; gap: 4px; }
     .form-full  { grid-column: 1 / -1; }
 
-    .field-label {
-        font-size: 9px;
-        font-weight: 600;
-        color: rgba(255, 255, 255, 0.35);
-        text-transform: uppercase;
-        letter-spacing: 0.6px;
-    }
-
-    .required { color: rgba(220, 70, 60, 0.85); }
+    .field-label { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.6px; }
+    .required    { color: rgba(220,70,60,0.85); }
 
     .form-input {
-        background: rgba(255, 255, 255, 0.03);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 3px;
-        padding: 5px 8px;
-        color: rgba(255, 255, 255, 0.8);
-        font-size: 11px;
-        font-family: inherit;
-        outline: none;
-        transition: border-color 0.1s;
+        background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 3px;
+        padding: 5px 8px; color: rgba(255,255,255,0.8); font-size: 11px; font-family: inherit; outline: none; transition: border-color 0.1s;
     }
-
-    .form-input:focus { border-color: rgba(255, 255, 255, 0.12); }
-    .form-input::placeholder { color: rgba(255, 255, 255, 0.2); }
-
-    .form-select { padding-right: 22px; cursor: pointer; }
+    .form-input:focus { border-color: rgba(255,255,255,0.12); }
+    .form-input::placeholder { color: rgba(255,255,255,0.2); }
+    .form-select  { padding-right: 22px; cursor: pointer; }
     .form-select option { background: #1a1c22; }
-
     textarea.form-input { resize: vertical; min-height: 120px; line-height: 1.6; }
 
-    .field-hint { font-size: 10px; color: rgba(255, 255, 255, 0.25); }
-
-    .field-check {
-        display: flex;
-        align-items: center;
-        gap: 8px;
+    .cat-select-preview {
+        display: flex; align-items: center; gap: 5px; padding: 3px 0;
     }
+    .cat-select-preview .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 
-    .field-check input[type="checkbox"] { accent-color: var(--accent-60); width: 14px; height: 14px; cursor: pointer; }
-
-    .field-check label {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        font-size: 11px;
-        color: rgba(255, 255, 255, 0.6);
-        cursor: pointer;
-    }
+    .field-hint  { font-size: 10px; color: rgba(255,255,255,0.25); }
 
+    .field-check { display: flex; align-items: center; gap: 8px; }
+    .field-check input[type="checkbox"] { accent-color: var(--accent-60); width: 14px; height: 14px; cursor: pointer; }
+    .field-check label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.6); cursor: pointer; }
     .field-check label .material-icons { font-size: 14px; color: var(--accent-60); }
 
-    .confirm-text { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.6; grid-column: 1 / -1; }
+    .confirm-text { font-size: 11px; color: rgba(255,255,255,0.6); margin: 0; line-height: 1.6; grid-column: 1 / -1; }
 
     .modal-footer {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 6px;
-        padding: 10px 16px;
-        border-top: 1px solid rgba(255, 255, 255, 0.06);
-        flex-shrink: 0;
+        display: flex; align-items: center; justify-content: flex-end; gap: 6px;
+        padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
     }
 
     .cancel-btn {
-        background: transparent;
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 3px;
-        padding: 4px 12px;
-        color: rgba(255, 255, 255, 0.4);
-        font-size: 10px;
-        font-weight: 500;
-        cursor: pointer;
-        outline: none;
-        transition: all 0.1s;
+        background: transparent; border: 1px solid rgba(255,255,255,0.06); border-radius: 3px;
+        padding: 4px 12px; color: rgba(255,255,255,0.4); font-size: 10px; font-weight: 500; cursor: pointer; outline: none; transition: all 0.1s;
     }
-    .cancel-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+    .cancel-btn:hover:not(:disabled) { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }
     .cancel-btn:disabled { opacity: 0.3; cursor: not-allowed; }
 
     .primary-btn {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        background: rgba(16, 185, 129, 0.06);
-        border: 1px solid rgba(16, 185, 129, 0.1);
-        border-radius: 3px;
-        padding: 4px 12px;
-        color: rgba(52, 211, 153, 0.7);
-        font-size: 10px;
-        font-weight: 600;
-        cursor: pointer;
-        outline: none;
-        transition: all 0.1s;
+        display: flex; align-items: center; gap: 4px;
+        background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.1); border-radius: 3px;
+        padding: 4px 12px; color: rgba(52,211,153,0.7); font-size: 10px; font-weight: 600; cursor: pointer; outline: none; transition: all 0.1s;
     }
-    .primary-btn:hover:not(:disabled) { background: rgba(16, 185, 129, 0.12); color: rgba(110, 231, 183, 0.9); }
+    .primary-btn:hover:not(:disabled) { background: rgba(16,185,129,0.12); color: rgba(110,231,183,0.9); }
     .primary-btn:disabled { opacity: 0.3; cursor: not-allowed; }
 
     .delete-btn {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        background: rgba(220, 70, 60, 0.06);
-        border: 1px solid rgba(220, 70, 60, 0.18);
-        border-radius: 3px;
-        padding: 4px 12px;
-        color: rgba(220, 70, 60, 0.85);
-        font-size: 10px;
-        font-weight: 600;
-        cursor: pointer;
-        outline: none;
-        transition: all 0.1s;
+        display: flex; align-items: center; gap: 4px;
+        background: rgba(220,70,60,0.06); border: 1px solid rgba(220,70,60,0.18); border-radius: 3px;
+        padding: 4px 12px; color: rgba(220,70,60,0.85); font-size: 10px; font-weight: 600; cursor: pointer; outline: none; transition: all 0.1s;
     }
-    .delete-btn:hover:not(:disabled) { background: rgba(220, 70, 60, 0.12); }
+    .delete-btn:hover:not(:disabled) { background: rgba(220,70,60,0.12); }
     .delete-btn:disabled { opacity: 0.3; cursor: not-allowed; }
 
-    /* ── Spinner ─────────────────────────────────────────────── */
+    /* ── Spinners ─────────────────────────────────────────────── */
     .spinner {
-        width: 24px;
-        height: 24px;
-        border: 2px solid rgba(255, 255, 255, 0.06);
-        border-left-color: var(--accent-60);
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-        margin-bottom: 8px;
+        width: 24px; height: 24px;
+        border: 2px solid rgba(255,255,255,0.06); border-left-color: var(--accent-60);
+        border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 8px;
     }
-
     .spinner-sm {
-        width: 11px;
-        height: 11px;
-        border: 2px solid rgba(255, 255, 255, 0.1);
-        border-left-color: currentColor;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
+        width: 11px; height: 11px;
+        border: 2px solid rgba(255,255,255,0.1); border-left-color: currentColor;
+        border-radius: 50%; animation: spin 0.8s linear infinite;
     }
 
-    @keyframes spin {
-        0%   { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
+    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 </style>
\ No newline at end of file

From e1ecb87272786e4465cb75c0977fe21fc311bf38 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 00:32:41 +0200
Subject: [PATCH 118/144] Add files via upload

---
 .../management/ManagementBulletins.svelte     | 1094 ++++++++---------
 1 file changed, 491 insertions(+), 603 deletions(-)

diff --git a/web/src/components/management/ManagementBulletins.svelte b/web/src/components/management/ManagementBulletins.svelte
index 18c7994b..5ff805ba 100644
--- a/web/src/components/management/ManagementBulletins.svelte
+++ b/web/src/components/management/ManagementBulletins.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { onMount, onDestroy } from "svelte";
 	import { fetchNui } from "../../utils/fetchNui";
 	import { isEnvBrowser } from "../../utils/misc";
 	import { NUI_EVENTS } from "../../constants/nuiEvents";
@@ -15,209 +15,291 @@
 		value: string;
 		label: string;
 		icon: string;
-	}
+		color: string;
+		sort_order?: number;
+		is_default?: boolean;
+	}
+
+	// ── NUI callback names (hardcoded to avoid missing-key issues) ──
+	// These must match RegisterNUICallback names in client.lua exactly.
+	const CB = {
+		GET_BULLETINS:      (NUI_EVENTS.DASHBOARD as any)?.GET_BULLETINS      ?? 'getBulletins',
+		CREATE_BULLETIN:    (NUI_EVENTS.DASHBOARD as any)?.CREATE_BULLETIN    ?? 'createBulletin',
+		DELETE_BULLETIN:    (NUI_EVENTS.DASHBOARD as any)?.DELETE_BULLETIN    ?? 'deleteBulletin',
+		GET_CATEGORIES:     'getBulletinCategories',
+		ADD_CATEGORY:       'addBulletinCategory',
+		UPDATE_CATEGORY:    'updateBulletinCategory',
+		REMOVE_CATEGORY:    'removeBulletinCategory',
+		REORDER_CATEGORIES: 'reorderBulletinCategories',
+	} as const;
 
 	// ── MotD state ─────────────────────────────────────────────
 
 	let bulletins: Bulletin[] = $state([]);
-	let newTitle: string = $state("");
-	let newContent: string = $state("");
-	let isLoading = $state(false);
-	let isSubmitting = $state(false);
-	let statusMessage: { text: string; type: "success" | "error" } | null = $state(null);
+	let newTitle              = $state('');
+	let newContent            = $state('');
+	let isLoading             = $state(false);
+	let isSubmitting          = $state(false);
+	let statusMessage: { text: string; type: 'success' | 'error' } | null = $state(null);
 
 	// ── Category state ─────────────────────────────────────────
 
 	const DEFAULT_CATEGORIES: BulletinCategory[] = [
-		{ value: 'announcement', label: 'Announcements', icon: 'campaign'     },
-		{ value: 'operations',   label: 'Operations',    icon: 'local_police' },
-		{ value: 'training',     label: 'Training',      icon: 'school'       },
-		{ value: 'general',      label: 'General',       icon: 'forum'        },
+		{ value: 'announcement', label: 'Announcements', icon: 'campaign',     color: '#3B82F6', is_default: true },
+		{ value: 'operations',   label: 'Operations',    icon: 'local_police', color: '#8B5CF6', is_default: true },
+		{ value: 'training',     label: 'Training',      icon: 'school',       color: '#10B981', is_default: true },
+		{ value: 'general',      label: 'General',       icon: 'forum',        color: '#6B7280', is_default: true },
+	];
+
+	const ICON_SUGGESTIONS = [
+		'campaign','local_police','school','forum','push_pin','gavel',
+		'shield','directions_car','emergency','radio','groups','assignment',
+		'inventory','badge','security','warning','star','notifications',
+		'flag','location_on','map','schedule','lock','vpn_key',
+		'help_center','feedback','event','rule','checklist','handshake',
 	];
 
-	let categories = $state<BulletinCategory[]>(DEFAULT_CATEGORIES.map(c => ({ ...c })));
+	let categories      = $state<BulletinCategory[]>(DEFAULT_CATEGORIES.map(c => ({ ...c })));
 	let categoriesLoading = $state(false);
-	let categoriesSaving  = $state(false);
+	let newCatLabel     = $state('');
+	let newCatIcon      = $state('label');
+	let newCatColor     = $state('#6B7280');
+	let addingCat       = $state(false);
+	let showAddForm     = $state(false);
+	let showIconPicker  = $state<string | null>(null);
+	let savingCat       = $state<string | null>(null);
+	let removingCat     = $state<string | null>(null);
+
+	// ── Mouse-drag reorder (Map.svelte pattern – no HTML5 draggable) ──
+
+	type DragState = { idx: number; label: string; x: number; y: number; active: boolean };
+
+	let drag        = $state<DragState | null>(null);
+	let dragOverIdx = $state<number | null>(null);
+	let isDragging  = $state(false);
+	let ghostEl: HTMLDivElement | null = null;
+
+	function createGhost(label: string, x: number, y: number) {
+		removeGhost();
+		ghostEl = document.createElement('div');
+		ghostEl.className = 'cat-drag-ghost';
+		ghostEl.textContent = label;
+		ghostEl.style.left = `${x + 14}px`;
+		ghostEl.style.top  = `${y - 18}px`;
+		document.body.appendChild(ghostEl);
+	}
+	function moveGhost(x: number, y: number) {
+		if (!ghostEl) return;
+		ghostEl.style.left = `${x + 14}px`;
+		ghostEl.style.top  = `${y - 18}px`;
+	}
+	function removeGhost() { ghostEl?.remove(); ghostEl = null; }
+
+	function getRowIdxFromPoint(x: number, y: number): number | null {
+		const els = document.elementsFromPoint(x, y);
+		for (const el of els) {
+			const row = (el as HTMLElement).closest('[data-cat-idx]') as HTMLElement | null;
+			if (row) return Number(row.dataset.catIdx);
+		}
+		return null;
+	}
+
+	function onHandleMouseDown(e: MouseEvent, idx: number) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		drag = { idx, label: categories[idx].label, x: e.clientX, y: e.clientY, active: false };
+	}
+
+	function onGlobalMouseMove(e: MouseEvent) {
+		if (!drag) return;
+		if (!drag.active) {
+			const dx = e.clientX - drag.x, dy = e.clientY - drag.y;
+			if (Math.sqrt(dx*dx + dy*dy) < 5) return;
+			drag.active = true;
+			isDragging  = true;
+			createGhost(drag.label, e.clientX, e.clientY);
+		}
+		moveGhost(e.clientX, e.clientY);
+
+		const toIdx = getRowIdxFromPoint(e.clientX, e.clientY);
+		if (toIdx !== null && toIdx !== drag.idx) {
+			// Reorder live so data-cat-idx attributes stay in sync
+			const arr = [...categories];
+			const [moved] = arr.splice(drag.idx, 1);
+			arr.splice(toIdx, 0, moved);
+			categories  = arr;
+			drag.idx    = toIdx;   // track new position
+			dragOverIdx = toIdx;
+		} else {
+			dragOverIdx = toIdx !== drag.idx ? toIdx : null;
+		}
+	}
+
+	async function onGlobalMouseUp(e: MouseEvent) {
+		if (!drag) return;
+		if (drag.active && !isEnvBrowser()) {
+			// categories array is already in final order from live moves above
+			// Send as flat array directly — client.lua unwraps data.order and passes it straight to ps.callback
+			const order = categories.map((c, i) => ({ value: c.value, sort_order: i + 1 }));
+			await fetchNui(CB.REORDER_CATEGORIES, { order }, {});
+		}
+		removeGhost();
+		drag = null; isDragging = false; dragOverIdx = null;
+	}
+
+	// ── Lifecycle ──────────────────────────────────────────────
 
-	// ── Shared helpers ─────────────────────────────────────────
+	onMount(() => {
+		window.addEventListener('mousemove', onGlobalMouseMove);
+		window.addEventListener('mouseup',   onGlobalMouseUp);
+		if (isEnvBrowser()) {
+			bulletins = [
+				{ id: 1, content: 'TRAINING: FTO certification renewal is due by end of month.' },
+				{ id: 2, content: 'BOLO REMINDER: Black Kuruma from Pacific Standard is still outstanding.' },
+				{ id: 3, content: 'Radio channel 3 is now reserved for tactical operations.' },
+			];
+			return;
+		}
+		loadBulletins();
+		loadCategories();
+	});
 
-	function showStatus(text: string, type: "success" | "error" = "success") {
+	onDestroy(() => {
+		window.removeEventListener('mousemove', onGlobalMouseMove);
+		window.removeEventListener('mouseup',   onGlobalMouseUp);
+		removeGhost();
+	});
+
+	// ── Helpers ────────────────────────────────────────────────
+
+	function showStatus(text: string, type: 'success' | 'error' = 'success') {
 		statusMessage = { text, type };
 		setTimeout(() => { statusMessage = null; }, 3000);
 	}
 
-	// ── MotD logic ─────────────────────────────────────────────
+	function slugify(str: string): string {
+		return str.toLowerCase().trim().replace(/\s+/g,'_').replace(/[^a-z0-9_]/g,'').slice(0, 48);
+	}
+
+	// ── MotD ───────────────────────────────────────────────────
 
 	async function loadBulletins() {
-		if (isEnvBrowser()) return;
 		try {
 			isLoading = true;
-			const response = await fetchNui<Bulletin[]>(
-				NUI_EVENTS.DASHBOARD.GET_BULLETINS,
-				{},
-				[],
-			);
-			bulletins = Array.isArray(response) ? response : [];
-		} catch (error) {
-			console.error("Failed to load bulletins:", error);
-			bulletins = [];
-		} finally {
-			isLoading = false;
-		}
+			const res = await fetchNui<Bulletin[]>(CB.GET_BULLETINS, {}, []);
+			bulletins = Array.isArray(res) ? res : [];
+		} catch { bulletins = []; }
+		finally   { isLoading = false; }
 	}
 
 	function buildContent(): string {
 		const title = newTitle.trim().toUpperCase();
-		const body = newContent.trim();
+		const body  = newContent.trim();
 		if (title && body) return `${title}: ${body}`;
-		if (title) return title;
-		return body;
+		return title || body;
 	}
 
 	function parseBulletin(content: string): { title: string; body: string } {
-		const colonIdx = content.indexOf(":");
-		if (colonIdx > 0 && colonIdx < 40) {
-			return {
-				title: content.slice(0, colonIdx).trim(),
-				body: content.slice(colonIdx + 1).trim(),
-			};
-		}
-		return { title: "", body: content };
+		const idx = content.indexOf(':');
+		if (idx > 0 && idx < 40) return { title: content.slice(0, idx).trim(), body: content.slice(idx + 1).trim() };
+		return { title: '', body: content };
 	}
 
 	async function handleSubmit() {
-		if (!newContent.trim() && !newTitle.trim()) return;
 		const fullContent = buildContent();
 		if (!fullContent) return;
 		if (isEnvBrowser()) {
 			bulletins = [{ id: Date.now(), content: fullContent }, ...bulletins];
-			newTitle = "";
-			newContent = "";
-			return;
+			newTitle = ''; newContent = ''; return;
 		}
 		try {
 			isSubmitting = true;
-			const result = await fetchNui<{ success: boolean; message?: string; id?: number }>(
-				NUI_EVENTS.DASHBOARD.CREATE_BULLETIN,
-				{ content: fullContent },
-				{ success: false },
+			const result = await fetchNui<{ success: boolean; message?: string }>(
+				CB.CREATE_BULLETIN, { content: fullContent }, { success: false }
 			);
-			if (result && result.success) {
-				showStatus("Bulletin posted");
-				newTitle = "";
-				newContent = "";
-				await loadBulletins();
-			} else {
-				showStatus(result?.message || "Failed to post bulletin", "error");
-			}
-		} catch (error) {
-			console.error("Failed to create bulletin:", error);
-			showStatus("Failed to post bulletin", "error");
-		} finally {
-			isSubmitting = false;
-		}
+			if (result?.success) { showStatus('Bulletin posted'); newTitle = ''; newContent = ''; await loadBulletins(); }
+			else showStatus(result?.message || 'Failed to post bulletin', 'error');
+		} finally { isSubmitting = false; }
 	}
 
 	async function deleteBulletin(id: number | undefined) {
 		if (!id) return;
-		if (isEnvBrowser()) {
-			bulletins = bulletins.filter((b) => b.id !== id);
-			return;
-		}
+		if (isEnvBrowser()) { bulletins = bulletins.filter(b => b.id !== id); return; }
 		try {
-			const result = await fetchNui<{ success: boolean; message?: string }>(
-				NUI_EVENTS.DASHBOARD.DELETE_BULLETIN,
-				{ id },
-				{ success: false },
-			);
-			if (result && result.success) {
-				showStatus("Bulletin deleted");
-				await loadBulletins();
-			} else {
-				showStatus(result?.message || "Failed to delete bulletin", "error");
-			}
-		} catch (error) {
-			console.error("Failed to delete bulletin:", error);
-			showStatus("Failed to delete bulletin", "error");
-		}
+			const result = await fetchNui<{ success: boolean; message?: string }>(CB.DELETE_BULLETIN, { id }, { success: false });
+			if (result?.success) { showStatus('Bulletin deleted'); await loadBulletins(); }
+			else showStatus(result?.message || 'Failed to delete bulletin', 'error');
+		} catch { showStatus('Failed to delete bulletin', 'error'); }
 	}
 
-	// ── Category logic ─────────────────────────────────────────
+	// ── Categories ─────────────────────────────────────────────
 
 	async function loadCategories() {
-		if (isEnvBrowser()) return;
 		try {
 			categoriesLoading = true;
-			const result = await fetchNui<BulletinCategory[]>(
-				NUI_EVENTS.BULLETIN.GET_CATEGORIES,
-				{},
-				[],
-			);
-			if (Array.isArray(result) && result.length > 0) {
-				categories = result;
-			}
-		} catch (error) {
-			console.error("Failed to load categories:", error);
-		} finally {
-			categoriesLoading = false;
-		}
+			const result = await fetchNui<BulletinCategory[]>(CB.GET_CATEGORIES, {}, []);
+			if (Array.isArray(result) && result.length > 0) categories = result;
+		} catch { /* keep defaults */ }
+		finally { categoriesLoading = false; }
 	}
 
-	async function saveCategories() {
-		if (isEnvBrowser()) {
-			showStatus("Categories saved");
-			return;
-		}
+	async function saveCategory(cat: BulletinCategory) {
+		if (isEnvBrowser()) { showStatus(`"${cat.label}" saved`); return; }
+		savingCat = cat.value;
 		try {
-			categoriesSaving = true;
 			const result = await fetchNui<{ success: boolean; message?: string }>(
-				NUI_EVENTS.BULLETIN.SAVE_CATEGORIES,
-				{ categories },
-				{ success: false },
+				CB.UPDATE_CATEGORY, { value: cat.value, label: cat.label, icon: cat.icon, color: cat.color }, { success: false }
 			);
-			if (result?.success) {
-				showStatus("Categories saved");
-			} else {
-				showStatus(result?.message || "Failed to save categories", "error");
-			}
-		} catch (error) {
-			console.error("Failed to save categories:", error);
-			showStatus("Failed to save categories", "error");
-		} finally {
-			categoriesSaving = false;
-		}
+			if (result?.success) showStatus(`"${cat.label}" updated`);
+			else showStatus(result?.message || 'Failed to save', 'error');
+		} finally { savingCat = null; }
 	}
 
-	function resetCategories() {
-		categories = DEFAULT_CATEGORIES.map(c => ({ ...c }));
-	}
-
-	// ── Mount ──────────────────────────────────────────────────
+	async function addCategory() {
+		const label = newCatLabel.trim();
+		if (!label) return;
+		const value = slugify(label);
+		if (!value)                            { showStatus('Label needs at least one letter or number', 'error'); return; }
+		if (categories.find(c => c.value === value)) { showStatus(`Key "${value}" already exists`, 'error'); return; }
+		if (categories.length >= 20)           { showStatus('Maximum of 20 categories reached', 'error'); return; }
 
-	onMount(() => {
 		if (isEnvBrowser()) {
-			bulletins = [
-				{ id: 1, content: "TRAINING: FTO certification renewal is due by end of month. Contact Lt. Park to schedule your assessment." },
-				{ id: 2, content: "BOLO REMINDER: Black Kuruma from the Pacific Standard robbery is still outstanding. If spotted, do NOT engage alone." },
-				{ id: 3, content: "Radio channel 3 is now reserved for tactical operations. Please update your radios before next shift." },
-			];
-			return;
+			categories = [...categories, { value, label, icon: newCatIcon, color: newCatColor, is_default: false }];
+			showStatus(`"${label}" added`); resetAddForm(); return;
 		}
-		loadBulletins();
-		loadCategories();
-	});
+
+		addingCat = true;
+		try {
+			const payload = { label, icon: newCatIcon, color: newCatColor };
+			const result  = await fetchNui<{ success: boolean; message?: string }>(CB.ADD_CATEGORY, payload, { success: false });
+			if (result?.success) { showStatus(`"${label}" added`); resetAddForm(); await loadCategories(); }
+			else showStatus(result?.message || 'Failed to add category', 'error');
+		} catch { showStatus('Failed to add category', 'error'); }
+		finally { addingCat = false; }
+	}
+
+	async function removeCategory(value: string) {
+		const cat = categories.find(c => c.value === value);
+		if (!cat) return;
+		if (categories.length <= 1) { showStatus('Cannot remove the last category', 'error'); return; }
+		if (isEnvBrowser()) { categories = categories.filter(c => c.value !== value); showStatus(`"${cat.label}" removed`); return; }
+		removingCat = value;
+		try {
+			const result = await fetchNui<{ success: boolean; message?: string }>(CB.REMOVE_CATEGORY, { value }, { success: false });
+			if (result?.success) { showStatus(`"${cat.label}" removed`); await loadCategories(); }
+			else showStatus(result?.message || 'Failed to remove', 'error');
+		} finally { removingCat = null; }
+	}
+
+	function resetAddForm() { newCatLabel = ''; newCatIcon = 'label'; newCatColor = '#6B7280'; showAddForm = false; }
 </script>
 
 <div class="management-panel">
 	{#if statusMessage}
-		<div class="status-toast {statusMessage.type}">
-			{statusMessage.text}
-		</div>
+		<div class="status-toast {statusMessage.type}">{statusMessage.text}</div>
 	{/if}
 
-	<!-- ═══════════════════════════════════════════════════════
-	     Section 1: Message of the Day (MotD)
-	════════════════════════════════════════════════════════ -->
+	<!-- ════════════════════════ MotD ═══════════════════════════ -->
 	<div class="section">
 		<div class="section-title-row">
 			<span class="section-title">Message of the Day</span>
@@ -225,33 +307,18 @@
 
 		<div class="new-bulletin">
 			<div class="bulletin-fields">
-				<input
-					class="bulletin-title-input"
-					type="text"
-					placeholder="Title (e.g. TRAINING, BOLO REMINDER)"
-					bind:value={newTitle}
-				/>
-				<textarea
-					class="bulletin-input"
-					placeholder="Write a bulletin..."
-					rows="2"
-					bind:value={newContent}
-				></textarea>
+				<input class="bulletin-title-input" type="text"
+					placeholder="Title (e.g. TRAINING, BOLO REMINDER)" bind:value={newTitle} />
+				<textarea class="bulletin-input" placeholder="Write a bulletin..." rows="2" bind:value={newContent}></textarea>
 			</div>
-			<button
-				class="btn-post"
-				onclick={handleSubmit}
-				disabled={(!newContent.trim() && !newTitle.trim()) || isSubmitting}
-			>
-				{isSubmitting ? "Posting..." : "Post"}
+			<button class="btn-post" onclick={handleSubmit}
+				disabled={(!newContent.trim() && !newTitle.trim()) || isSubmitting}>
+				{isSubmitting ? 'Posting...' : 'Post'}
 			</button>
 		</div>
 
 		{#if isLoading}
-			<div class="empty-state">
-				<div class="loading-spinner"></div>
-				<p>Loading bulletins...</p>
-			</div>
+			<div class="empty-state"><div class="loading-spinner"></div><p>Loading bulletins...</p></div>
 		{:else}
 			<div class="bulletins-list">
 				{#each bulletins as bulletin (bulletin.id || bulletin.content)}
@@ -266,12 +333,10 @@
 							{/if}
 						</div>
 						{#if bulletin.id}
-							<button
-								class="delete-btn"
-								onclick={() => deleteBulletin(bulletin.id)}
-								aria-label="Delete bulletin"
-							>
-								<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+							<button class="delete-btn" onclick={() => deleteBulletin(bulletin.id)} aria-label="Delete">
+								<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+									<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+								</svg>
 							</button>
 						{/if}
 					</div>
@@ -282,68 +347,159 @@
 		{/if}
 	</div>
 
-	<!-- ═══════════════════════════════════════════════════════
-	     Section 2: Bulletin Board Categories
-	════════════════════════════════════════════════════════ -->
+	<!-- ═══════════════════ Bulletin Categories ═════════════════ -->
 	<div class="section">
 		<div class="section-title-row">
-			<span class="section-title">Bulletin Board Categories</span>
-			<div class="section-actions">
-				<button class="btn-reset" onclick={resetCategories} disabled={categoriesSaving}>
-					Reset
-				</button>
-				<button class="btn-save-cats" onclick={saveCategories} disabled={categoriesSaving}>
-					{categoriesSaving ? "Saving..." : "Save"}
-				</button>
-			</div>
+			<span class="section-title">
+				Bulletin Board Categories
+				<span class="cat-count-badge">{categories.length}/20</span>
+			</span>
+			<button class="btn-add-cat"
+				onclick={() => { showAddForm = !showAddForm; showIconPicker = null; }}
+				disabled={categories.length >= 20}
+				title={categories.length >= 20 ? 'Maximum categories reached' : 'Add new category'}>
+				<span class="material-icons" style="font-size:13px;">add</span>
+				Add Category
+			</button>
 		</div>
 
 		<p class="section-hint">
-			Customize the category labels and icons shown in the Bulletin Board sidebar.
-			Use any <a href="https://fonts.google.com/icons" target="_blank" rel="noreferrer">Material Icon</a> name.
+			Drag <span class="hint-icon">⠿</span> to reorder &nbsp;·&nbsp; Click icon circle to change icon &nbsp;·&nbsp;
+			Click color dot to pick color &nbsp;·&nbsp;
+			<a href="https://fonts.google.com/icons" target="_blank" rel="noreferrer">Icon reference</a>
 		</p>
 
+		<!-- ── Add Form ── -->
+		{#if showAddForm}
+			<div class="add-cat-form">
+				<div class="add-cat-row">
+					<div class="add-color-wrap" title="Pick color">
+						<input type="color" bind:value={newCatColor} class="color-input-hidden" id="new-cat-color" />
+						<label for="new-cat-color" class="color-swatch-lg" style="background:{newCatColor};">
+							<span class="material-icons" style="font-size:11px;color:rgba(255,255,255,0.65);">colorize</span>
+						</label>
+					</div>
+					<div class="add-icon-preview" style="border-color:{newCatColor}55;color:{newCatColor};">
+						<span class="material-icons">{newCatIcon || 'help_outline'}</span>
+					</div>
+					<input class="cat-input cat-input-mono add-icon-input" type="text"
+						placeholder="icon name..." bind:value={newCatIcon} maxlength="48" />
+					<input class="cat-input add-label-input" type="text"
+						placeholder="Category label (e.g. Warrants)" bind:value={newCatLabel} maxlength="48"
+						onkeydown={(e) => e.key === 'Enter' && addCategory()} />
+					{#if newCatLabel.trim()}
+						<span class="key-preview" title="Will be saved as this key">{slugify(newCatLabel)}</span>
+					{/if}
+				</div>
+
+				<div class="icon-suggestions">
+					{#each ICON_SUGGESTIONS as icon}
+						<button class="icon-chip" class:active={newCatIcon === icon}
+							onclick={() => newCatIcon = icon} title={icon}>
+							<span class="material-icons">{icon}</span>
+						</button>
+					{/each}
+				</div>
+
+				<div class="add-cat-actions">
+					<button class="btn-cancel-add" onclick={resetAddForm}>Cancel</button>
+					<button class="btn-confirm-add" onclick={addCategory}
+						disabled={addingCat || !newCatLabel.trim()}>
+						{#if addingCat}<div class="spinner-xs"></div>
+						{:else}<span class="material-icons" style="font-size:12px;">add</span>{/if}
+						Save
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<!-- ── Category List ── -->
 		{#if categoriesLoading}
-			<div class="empty-state" style="min-height: 80px;">
-				<div class="loading-spinner"></div>
-				<p>Loading categories...</p>
+			<div class="empty-state" style="min-height:80px;">
+				<div class="loading-spinner"></div><p>Loading categories...</p>
 			</div>
 		{:else}
-			<div class="categories-list">
-				{#each categories as cat}
-					<div class="category-row">
-						<!-- Live icon preview -->
-						<div class="cat-icon-preview" title="Icon preview">
-							<span class="material-icons">{cat.icon || 'help_outline'}</span>
+			<div class="categories-list" class:no-select={isDragging}>
+				{#each categories as cat, idx (cat.value)}
+					<div
+						class="category-row"
+						class:drag-src={drag?.active && drag.idx === idx}
+						class:drag-over={dragOverIdx === idx}
+						data-cat-idx={idx}
+					>
+						<!-- Mouse-drag handle -->
+						<div class="drag-handle" title="Drag to reorder"
+							role="button" tabindex="-1" aria-label="Drag to reorder"
+							onmousedown={(e) => onHandleMouseDown(e, idx)}>⠿</div>
+
+						<!-- Color picker -->
+						<div class="color-wrap" title="Category color">
+							<input type="color" bind:value={cat.color} class="color-input-hidden" id="color-{cat.value}" />
+							<label for="color-{cat.value}" class="color-dot" style="background:{cat.color};"></label>
 						</div>
 
-						<!-- Label input -->
+						<!-- Icon circle → opens inline picker -->
+						<button class="cat-icon-circle"
+							style="border-color:{cat.color}50;color:{cat.color};"
+							onclick={() => showIconPicker = showIconPicker === cat.value ? null : cat.value}
+							title="Click to change icon">
+							<span class="material-icons">{cat.icon || 'help_outline'}</span>
+						</button>
+
+						<!-- Label field -->
 						<div class="cat-field">
 							<span class="cat-field-label">Label</span>
-							<input
-								class="cat-input"
-								type="text"
-								placeholder="Category label..."
-								bind:value={cat.label}
-								maxlength="32"
-							/>
+							<input class="cat-input" type="text" placeholder="Category label..."
+								bind:value={cat.label} maxlength="48" />
 						</div>
 
-						<!-- Icon input -->
-						<div class="cat-field">
-							<span class="cat-field-label">Icon name</span>
-							<input
-								class="cat-input cat-input-mono"
-								type="text"
-								placeholder="e.g. campaign, school, forum..."
-								bind:value={cat.icon}
-								maxlength="48"
-							/>
+						<!-- Icon name field -->
+						<div class="cat-field cat-field-icon">
+							<span class="cat-field-label">Icon</span>
+							<input class="cat-input cat-input-mono" type="text"
+								placeholder="icon name..." bind:value={cat.icon} maxlength="48" />
 						</div>
 
-						<!-- Value badge (read-only, for reference) -->
-						<div class="cat-value-badge">{cat.value}</div>
+						<!-- DB key badge -->
+						<div class="cat-value-badge" title="Database key (read-only)">{cat.value}</div>
+
+						{#if cat.is_default}
+							<span class="default-badge" title="Built-in default">default</span>
+						{/if}
+
+						<!-- Save -->
+						<button class="btn-row-icon btn-save" onclick={() => saveCategory(cat)}
+							disabled={savingCat === cat.value} title="Save changes">
+							{#if savingCat === cat.value}
+								<div class="spinner-xs"></div>
+							{:else}
+								<span class="material-icons">save</span>
+							{/if}
+						</button>
+
+						<!-- Remove -->
+						<button class="btn-row-icon btn-remove" onclick={() => removeCategory(cat.value)}
+							disabled={removingCat === cat.value || categories.length <= 1}
+							title={categories.length <= 1 ? 'Cannot remove last category' : 'Remove category'}>
+							{#if removingCat === cat.value}
+								<div class="spinner-xs"></div>
+							{:else}
+								<span class="material-icons">delete_outline</span>
+							{/if}
+						</button>
 					</div>
+
+					<!-- Inline icon picker -->
+					{#if showIconPicker === cat.value}
+						<div class="icon-picker-inline">
+							{#each ICON_SUGGESTIONS as icon}
+								<button class="icon-chip" class:active={cat.icon === icon}
+									onclick={() => { cat.icon = icon; showIconPicker = null; }} title={icon}>
+									<span class="material-icons">{icon}</span>
+								</button>
+							{/each}
+						</div>
+					{/if}
 				{/each}
 			</div>
 		{/if}
@@ -351,400 +507,132 @@
 </div>
 
 <style>
-	/* ── Panel wrapper ────────────────────────────────────────── */
 	.management-panel {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		background: transparent;
-		overflow-y: auto;
-		scrollbar-width: thin;
-		scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
-	}
-
-	/* ── Status toast ─────────────────────────────────────────── */
-	.status-toast {
-		padding: 6px 12px;
-		font-size: 10px;
-		font-weight: 500;
-		flex-shrink: 0;
-		margin: 8px 16px 0;
-		border-radius: 3px;
-	}
-
-	.status-toast.success {
-		background: rgba(16, 185, 129, 0.08);
-		color: rgba(110, 231, 183, 0.8);
-		border: 1px solid rgba(16, 185, 129, 0.1);
-	}
-
-	.status-toast.error {
-		background: rgba(239, 68, 68, 0.08);
-		color: rgba(252, 165, 165, 0.8);
-		border: 1px solid rgba(239, 68, 68, 0.1);
-	}
-
-	/* ── Sections ─────────────────────────────────────────────── */
-	.section {
-		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-		padding: 0 0 16px;
-		flex-shrink: 0;
-	}
-
-	.section:last-child {
-		border-bottom: none;
-	}
-
-	.section-title-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 12px 16px 8px;
-		gap: 8px;
-	}
-
-	.section-title {
-		font-size: 9px;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.7px;
-		color: rgba(255, 255, 255, 0.35);
-	}
-
-	.section-actions {
-		display: flex;
-		align-items: center;
-		gap: 5px;
-	}
-
-	.section-hint {
-		margin: 0 16px 10px;
-		font-size: 10px;
-		color: rgba(255, 255, 255, 0.3);
-		line-height: 1.5;
-	}
-
-	.section-hint a {
-		color: rgba(147, 197, 253, 0.6);
-		text-decoration: none;
-	}
-
-	.section-hint a:hover {
-		color: rgba(147, 197, 253, 0.9);
-		text-decoration: underline;
-	}
-
-	/* ── MotD — new bulletin composer ─────────────────────────── */
-	.new-bulletin {
-		display: flex;
-		gap: 10px;
-		padding: 4px 16px 10px;
-		align-items: flex-end;
-	}
-
-	.bulletin-fields {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 5px;
-	}
-
-	.bulletin-title-input {
-		background: rgba(255, 255, 255, 0.03);
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 3px;
-		padding: 5px 8px;
-		color: rgba(255, 255, 255, 0.9);
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.3px;
-	}
-
-	.bulletin-title-input:focus {
-		outline: none;
-		border-color: rgba(255, 255, 255, 0.12);
-	}
-
-	.bulletin-title-input::placeholder {
-		color: rgba(255, 255, 255, 0.35);
-		font-weight: 400;
-		text-transform: none;
-		letter-spacing: 0;
-	}
-
-	.bulletin-input {
-		background: rgba(255, 255, 255, 0.03);
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 3px;
-		padding: 6px 8px;
-		color: rgba(255, 255, 255, 0.8);
-		font-size: 11px;
-		font-family: inherit;
-		resize: vertical;
-		min-height: 32px;
-	}
-
-	.bulletin-input:focus {
-		outline: none;
-		border-color: rgba(255, 255, 255, 0.12);
-	}
-
-	.bulletin-input::placeholder {
-		color: rgba(255, 255, 255, 0.2);
-	}
-
-	.btn-post {
-		background: rgba(var(--accent-rgb), 0.06);
-		border: 1px solid rgba(var(--accent-rgb), 0.1);
-		border-radius: 3px;
-		padding: 5px 12px;
-		color: rgba(var(--accent-text-rgb), 0.7);
-		font-size: 10px;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.1s;
-		flex-shrink: 0;
-	}
-
-	.btn-post:hover:not(:disabled) {
-		background: rgba(var(--accent-rgb), 0.12);
-		color: rgba(var(--accent-text-rgb), 0.9);
-	}
-
-	.btn-post:disabled {
-		opacity: 0.3;
-		cursor: not-allowed;
-	}
-
-	/* ── MotD — bulletin list ──────────────────────────────────── */
-	.bulletins-list {
-		max-height: 220px;
-		overflow-y: auto;
-		scrollbar-width: thin;
-		scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
-	}
-
-	.bulletin-row {
-		display: flex;
-		align-items: flex-start;
-		gap: 10px;
-		padding: 8px 16px;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-		transition: background 0.1s;
-	}
-
-	.bulletin-row:hover {
-		background: rgba(255, 255, 255, 0.02);
-	}
-
-	.bulletin-row:last-child {
-		border-bottom: none;
-	}
-
-	.bulletin-body {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		min-width: 0;
-	}
-
-	.bulletin-title {
-		font-size: 9px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.35);
-	}
-
-	.bulletin-text {
-		color: rgba(255, 255, 255, 0.6);
-		font-size: 11px;
-		line-height: 1.5;
-		margin: 0;
-	}
-
-	.delete-btn {
-		background: none;
-		border: none;
-		color: rgba(255, 255, 255, 0.3);
-		cursor: pointer;
-		padding: 3px;
-		border-radius: 3px;
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		transition: all 0.1s;
-		opacity: 0;
-	}
-
-	.bulletin-row:hover .delete-btn {
-		opacity: 1;
-	}
-
-	.delete-btn:hover {
-		color: rgba(252, 165, 165, 0.8);
-		background: rgba(239, 68, 68, 0.08);
-	}
-
-	/* ── Categories section buttons ──────────────────────────── */
-	.btn-reset {
-		background: transparent;
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 3px;
-		padding: 3px 10px;
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 10px;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.1s;
-	}
-
-	.btn-reset:hover:not(:disabled) {
-		color: rgba(255, 255, 255, 0.6);
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.btn-reset:disabled { opacity: 0.3; cursor: not-allowed; }
-
-	.btn-save-cats {
-		background: rgba(16, 185, 129, 0.06);
-		border: 1px solid rgba(16, 185, 129, 0.1);
-		border-radius: 3px;
-		padding: 3px 12px;
-		color: rgba(52, 211, 153, 0.7);
-		font-size: 10px;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.1s;
-	}
-
-	.btn-save-cats:hover:not(:disabled) {
-		background: rgba(16, 185, 129, 0.12);
-		color: rgba(110, 231, 183, 0.9);
-	}
-
-	.btn-save-cats:disabled { opacity: 0.3; cursor: not-allowed; }
-
-	/* ── Category rows ───────────────────────────────────────── */
-	.categories-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-		padding: 0 16px;
-	}
-
-	.category-row {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		padding: 7px 0;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-	}
-
-	.category-row:last-child {
-		border-bottom: none;
-	}
-
-	/* Icon preview circle */
-	.cat-icon-preview {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: rgba(255, 255, 255, 0.04);
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-	}
-
-	.cat-icon-preview .material-icons {
-		font-size: 16px;
-		color: rgba(255, 255, 255, 0.4);
-	}
-
-	/* Label / icon fields */
-	.cat-field {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		min-width: 0;
-	}
-
-	.cat-field-label {
-		font-size: 8px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.25);
-	}
-
-	.cat-input {
-		background: rgba(255, 255, 255, 0.03);
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 3px;
-		padding: 4px 7px;
-		color: rgba(255, 255, 255, 0.8);
-		font-size: 11px;
-		font-family: inherit;
-		outline: none;
-		transition: border-color 0.1s;
-		width: 100%;
-	}
-
-	.cat-input:focus {
-		border-color: rgba(255, 255, 255, 0.12);
-	}
-
-	.cat-input::placeholder {
-		color: rgba(255, 255, 255, 0.18);
-	}
-
-	.cat-input-mono {
-		font-family: monospace;
-		font-size: 10px;
-		letter-spacing: 0.3px;
-	}
-
-	/* Read-only value badge */
-	.cat-value-badge {
-		font-size: 9px;
-		font-family: monospace;
-		color: rgba(255, 255, 255, 0.25);
-		background: rgba(255, 255, 255, 0.03);
-		border: 1px solid rgba(255, 255, 255, 0.05);
-		border-radius: 3px;
-		padding: 2px 6px;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	/* ── Shared empty / loading state ────────────────────────── */
-	.empty-state {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		min-height: 80px;
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 11px;
-	}
-
-	.loading-spinner {
-		width: 20px;
-		height: 20px;
-		border: 2px solid rgba(255, 255, 255, 0.06);
-		border-left: 2px solid rgba(var(--accent-rgb), 0.5);
-		border-radius: 50%;
-		animation: spin 0.8s linear infinite;
-		margin-bottom: 8px;
-	}
-
-	@keyframes spin {
-		0%   { transform: rotate(0deg); }
-		100% { transform: rotate(360deg); }
-	}
+		display: flex; flex-direction: column; height: 100%; background: transparent;
+		overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent;
+	}
+
+	/* Toast */
+	.status-toast { padding: 6px 12px; font-size: 10px; font-weight: 500; flex-shrink: 0; margin: 8px 16px 0; border-radius: 3px; }
+	.status-toast.success { background: rgba(16,185,129,0.08); color: rgba(110,231,183,0.8); border: 1px solid rgba(16,185,129,0.1); }
+	.status-toast.error   { background: rgba(239,68,68,0.08);  color: rgba(252,165,165,0.8); border: 1px solid rgba(239,68,68,0.1); }
+
+	/* Sections */
+	.section { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0 0 16px; flex-shrink: 0; }
+	.section:last-child { border-bottom: none; }
+	.section-title-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; gap: 8px; }
+	.section-title { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: rgba(255,255,255,0.35); }
+	.cat-count-badge { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; padding: 1px 5px; font-size: 9px; color: rgba(255,255,255,0.3); font-weight: 600; letter-spacing: 0; }
+	.section-hint { margin: 0 16px 10px; font-size: 10px; color: rgba(255,255,255,0.3); line-height: 1.5; }
+	.section-hint a { color: rgba(147,197,253,0.6); text-decoration: none; }
+	.section-hint a:hover { color: rgba(147,197,253,0.9); text-decoration: underline; }
+	.hint-icon { font-family: monospace; opacity: 0.6; }
+
+	/* MotD */
+	.new-bulletin { display: flex; gap: 10px; padding: 4px 16px 10px; align-items: flex-end; }
+	.bulletin-fields { flex: 1; display: flex; flex-direction: column; gap: 5px; }
+	.bulletin-title-input { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; padding: 5px 8px; color: rgba(255,255,255,0.9); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; outline: none; }
+	.bulletin-title-input:focus { border-color: rgba(255,255,255,0.12); }
+	.bulletin-title-input::placeholder { color: rgba(255,255,255,0.35); font-weight: 400; text-transform: none; letter-spacing: 0; }
+	.bulletin-input { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; padding: 6px 8px; color: rgba(255,255,255,0.8); font-size: 11px; font-family: inherit; resize: vertical; min-height: 32px; outline: none; }
+	.bulletin-input:focus { border-color: rgba(255,255,255,0.12); }
+	.bulletin-input::placeholder { color: rgba(255,255,255,0.2); }
+	.btn-post { background: rgba(var(--accent-rgb),0.06); border: 1px solid rgba(var(--accent-rgb),0.1); border-radius: 3px; padding: 5px 12px; color: rgba(var(--accent-text-rgb),0.7); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.1s; flex-shrink: 0; }
+	.btn-post:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.12); color: rgba(var(--accent-text-rgb),0.9); }
+	.btn-post:disabled { opacity: 0.3; cursor: not-allowed; }
+	.bulletins-list { max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
+	.bulletin-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.1s; }
+	.bulletin-row:hover { background: rgba(255,255,255,0.02); }
+	.bulletin-row:last-child { border-bottom: none; }
+	.bulletin-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+	.bulletin-title { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.35); }
+	.bulletin-text  { color: rgba(255,255,255,0.6); font-size: 11px; line-height: 1.5; margin: 0; }
+	.delete-btn { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; padding: 3px; border-radius: 3px; display: flex; align-items: center; flex-shrink: 0; transition: all 0.1s; opacity: 0; }
+	.bulletin-row:hover .delete-btn { opacity: 1; }
+	.delete-btn:hover { color: rgba(252,165,165,0.8); background: rgba(239,68,68,0.08); }
+
+	/* Add category */
+	.btn-add-cat { display: flex; align-items: center; gap: 4px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.1); border-radius: 3px; padding: 3px 10px; color: rgba(52,211,153,0.7); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.1s; flex-shrink: 0; }
+	.btn-add-cat:hover:not(:disabled) { background: rgba(16,185,129,0.12); color: rgba(110,231,183,0.9); }
+	.btn-add-cat:disabled { opacity: 0.3; cursor: not-allowed; }
+
+	/* Add form */
+	.add-cat-form { margin: 0 16px 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
+	.add-cat-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
+	.add-color-wrap { position: relative; flex-shrink: 0; }
+	.color-input-hidden { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
+	.color-swatch-lg { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 5px; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); transition: border-color 0.1s; }
+	.color-swatch-lg:hover { border-color: rgba(255,255,255,0.25); }
+	.add-icon-preview { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+	.add-icon-preview .material-icons { font-size: 16px; }
+	.add-icon-input { width: 110px; flex-shrink: 0; }
+	.add-label-input { flex: 1; min-width: 130px; }
+	.key-preview { font-size: 9px; font-family: monospace; color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 3px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; }
+	.icon-suggestions { display: flex; flex-wrap: wrap; gap: 4px; }
+	.icon-chip { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; cursor: pointer; transition: all 0.1s; color: rgba(255,255,255,0.4); }
+	.icon-chip:hover  { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); }
+	.icon-chip.active { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.3); color: rgba(var(--accent-text-rgb),0.9); }
+	.icon-chip .material-icons { font-size: 15px; }
+	.add-cat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.04); }
+	.btn-cancel-add { background: transparent; border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; padding: 3px 10px; color: rgba(255,255,255,0.35); font-size: 10px; font-weight: 500; cursor: pointer; }
+	.btn-cancel-add:hover { color: rgba(255,255,255,0.6); }
+	.btn-confirm-add { display: flex; align-items: center; gap: 4px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.1); border-radius: 3px; padding: 3px 12px; color: rgba(52,211,153,0.7); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.1s; }
+	.btn-confirm-add:hover:not(:disabled) { background: rgba(16,185,129,0.12); color: rgba(110,231,183,0.9); }
+	.btn-confirm-add:disabled { opacity: 0.3; cursor: not-allowed; }
+
+	/* Category list */
+	.categories-list { display: flex; flex-direction: column; gap: 0; padding: 0 16px; }
+	.categories-list.no-select { user-select: none; }
+
+	/* Ghost (appended to document.body by JS) */
+	:global(.cat-drag-ghost) {
+		position: fixed; z-index: 9999; pointer-events: none;
+		padding: 5px 10px; border-radius: 5px;
+		background: rgba(22,22,22,0.97); border: 1px solid rgba(255,255,255,0.14);
+		color: rgba(255,255,255,0.88); font-size: 11px; font-weight: 600;
+		white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.45);
+		transform: rotate(1.5deg);
+	}
+
+	.category-row { display: flex; align-items: center; gap: 7px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.1s, opacity 0.1s; user-select: none; }
+	.category-row:last-child { border-bottom: none; }
+	.category-row.drag-src  { opacity: 0.35; }
+	.category-row.drag-over { background: rgba(255,255,255,0.04); border-radius: 4px; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.3); }
+
+	.drag-handle { font-family: monospace; font-size: 14px; line-height: 1; color: rgba(255,255,255,0.2); cursor: grab; flex-shrink: 0; padding: 0 2px; }
+	.drag-handle:active { cursor: grabbing; }
+
+	.color-wrap { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
+	.color-dot { display: block; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,0.15); transition: border-color 0.1s; }
+	.color-dot:hover { border-color: rgba(255,255,255,0.35); }
+
+	.cat-icon-circle { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all 0.15s; padding: 0; }
+	.cat-icon-circle:hover { background: rgba(255,255,255,0.07); }
+	.cat-icon-circle .material-icons { font-size: 15px; }
+
+	.cat-field { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+	.cat-field-icon { max-width: 120px; }
+	.cat-field-label { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.25); }
+	.cat-input { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 3px; padding: 4px 7px; color: rgba(255,255,255,0.8); font-size: 11px; font-family: inherit; outline: none; transition: border-color 0.1s; width: 100%; }
+	.cat-input:focus { border-color: rgba(255,255,255,0.12); }
+	.cat-input::placeholder { color: rgba(255,255,255,0.18); }
+	.cat-input-mono { font-family: monospace; font-size: 10px; letter-spacing: 0.3px; }
+
+	.cat-value-badge { font-size: 9px; font-family: monospace; color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 3px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; }
+	.default-badge { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(var(--accent-rgb),0.6); background: rgba(var(--accent-rgb),0.06); border: 1px solid rgba(var(--accent-rgb),0.12); border-radius: 3px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; }
+
+	.btn-row-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; transition: all 0.1s; flex-shrink: 0; }
+	.btn-row-icon .material-icons { font-size: 13px; }
+	.btn-row-icon:disabled { opacity: 0.25; cursor: not-allowed; }
+	.btn-save   { background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.1); color: rgba(52,211,153,0.6); }
+	.btn-save:hover:not(:disabled)   { background: rgba(16,185,129,0.14); color: rgba(110,231,183,0.9); }
+	.btn-remove { background: rgba(220,70,60,0.04); border: 1px solid rgba(220,70,60,0.1); color: rgba(220,70,60,0.5); }
+	.btn-remove:hover:not(:disabled) { background: rgba(220,70,60,0.12); color: rgba(220,70,60,0.9); }
+
+	.icon-picker-inline { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 8px 36px; border-bottom: 1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.01); }
+
+	.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80px; color: rgba(255,255,255,0.35); font-size: 11px; }
+	.loading-spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.06); border-left: 2px solid rgba(var(--accent-rgb),0.5); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 8px; }
+	.spinner-xs { width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.1); border-left-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; }
+	@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
 </style>
\ No newline at end of file

From 0b31d2dd20ac09ce13a01cd4ca625bd950659430 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 18:01:31 +0200
Subject: [PATCH 119/144] callsign missing warning

callsign missing warning
---
 client/backend/dashboard.lua |  3 +++
 client/backend/officers.lua  | 12 ++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/backend/dashboard.lua b/client/backend/dashboard.lua
index 3f0d45d2..e3319fc5 100644
--- a/client/backend/dashboard.lua
+++ b/client/backend/dashboard.lua
@@ -60,6 +60,9 @@ function NUIUpdateAuth()
             citizenid = playerData.citizenid,
             job = playerData.job,
             charinfo = playerData.charinfo,
+            metadata = type(playerData.metadata) == 'table' and {
+                callsign = playerData.metadata.callsign or '',
+            } or nil,
         } or nil,
         isLEO = isAuthorized,
         onDuty = ps.getJobDuty() or false,
diff --git a/client/backend/officers.lua b/client/backend/officers.lua
index 7fb7a99f..448bbe3d 100644
--- a/client/backend/officers.lua
+++ b/client/backend/officers.lua
@@ -6,12 +6,10 @@ RegisterNUICallback('setCallsign', function(data, cb)
         cb({ success = false, message = 'MDT is not open' })
         return
     end
-
     if type(data) ~= 'table' or (not data.cid and not data.citizenid) or (not data.newcallsign and not data.callsign) then
         cb({ success = false, message = 'Missing citizen ID or callsign' })
         return
     end
-
     local result = ps.callback(resourceName .. ':server:setCallsign', {
         citizenid = data.cid or data.citizenid,
         callsign = data.newcallsign or data.callsign,
@@ -19,6 +17,16 @@ RegisterNUICallback('setCallsign', function(data, cb)
     cb(result or { success = false, message = 'Failed to set callsign' })
 end)
 
+RegisterNUICallback('getCallsign', function(data, cb)
+    print("test 1")
+    if not MDTOpen then cb({ callsign = '' }) return end
+    print("test 2")
+    local result = ps.callback(resourceName .. ':server:getCallsign', {
+        citizenid = data.citizenid,
+    })
+    cb(result or { callsign = '' })
+end)
+
 -- Set Radio Frequency
 RegisterNUICallback('setRadio', function(data, cb)
     if not MDTOpen then

From 0bdb0333d5e50b5e85047f4df014ad3dbac9068c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 18:01:59 +0200
Subject: [PATCH 120/144] callsign missing warning

callsign missing warning
---
 server/backend/officers.lua | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/server/backend/officers.lua b/server/backend/officers.lua
index 60bb9d60..4d29fc3b 100644
--- a/server/backend/officers.lua
+++ b/server/backend/officers.lua
@@ -17,7 +17,6 @@ end)
 ps.registerCallback(resourceName .. ':server:setCallsign', function(source, payload)
     local src = source
     if not CheckAuth(src) then return { success = false, message = 'Unauthorized' } end
-
     payload = payload or {}
     local cid = payload.citizenid or payload.cid
     local newCallsign = payload.callsign or payload.newcallsign
@@ -25,7 +24,6 @@ ps.registerCallback(resourceName .. ':server:setCallsign', function(source, payl
     if not cid or not newCallsign then
         return { success = false, message = 'Missing citizen ID or callsign' }
     end
-
     if not QBCore then return { success = false, message = 'Core framework not available' } end
     local Player = QBCore.Functions.GetPlayerByCitizenId(cid)
     if Player then
@@ -40,10 +38,29 @@ ps.registerCallback(resourceName .. ':server:setCallsign', function(source, payl
 
         return { success = true, message = 'Callsign updated to ' .. newCallsign }
     end
-
+    print("test bestanden 4")
     return { success = false, message = 'Player must be online to update callsign' }
 end)
 
+ps.registerCallback(resourceName .. ':server:getCallsign', function(source, payload)
+    print("test bestanden 1")
+    if not CheckAuth(source) then return { callsign = '' } end
+    print("test bestanden 2")
+    local cid = payload.citizenid
+    if not cid then return { callsign = '' } end
+    print("test bestanden 3")
+
+    if not QBCore then return { success = false, message = 'Core framework not available' } end
+    print("test bestanden 4")
+    local Player = QBCore.Functions.GetPlayerByCitizenId(cid)
+    if Player then
+        return { callsign = Player.PlayerData.metadata.callsign or '' }
+    end
+    print("test bestanden 5")
+    local row = MySQL.single.await('SELECT callsign FROM mdt_profiles WHERE citizenid = ?', { cid })
+    return { callsign = row and row.callsign or '' }
+end)
+
 -- Set Radio Frequency
 ps.registerCallback(resourceName .. ':server:setRadio', function(source, payload)
     local src = source

From a979a0d9c7ad1cee79a5d923f66ef36477a8e92f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 18:02:27 +0200
Subject: [PATCH 121/144] callsign missing warning

callsign missing warning
---
 web/src/pages/Dashboard.svelte | 913 ++++++++++++---------------------
 1 file changed, 322 insertions(+), 591 deletions(-)

diff --git a/web/src/pages/Dashboard.svelte b/web/src/pages/Dashboard.svelte
index fd641e26..1276093c 100644
--- a/web/src/pages/Dashboard.svelte
+++ b/web/src/pages/Dashboard.svelte
@@ -10,6 +10,7 @@
 	import { createDispatchService } from "../services/dispatchService.svelte";
 	import ReportItem from "../components/dashboard/ReportItem.svelte";
 	import type { PlayerData } from "@/interfaces/IPlayerData";
+
 	interface ActiveBolo {
 		id: number;
 		reportId: string;
@@ -52,7 +53,7 @@
 		dojCourtOrders = Array.isArray(orders) ? orders.slice(0, 5) : [];
 	}
 
-	// Create services
+	// Services
 	const dashboardService = createDashboardService() as ReturnType<
 		typeof createDashboardService
 	> & {
@@ -62,55 +63,119 @@
 	};
 	const dispatchService = createDispatchService();
 
-	// UI state (keep in component since it's view-specific)
+	// UI state
 	let expandedDispatch: string | null = $state(null);
 	let reportOpened: number | null = $state(null);
-	let warrantOpened: number | null = $state(null);
 
-	// Pagination for warrants and BOLOs
+	// Pagination
 	const PAGE_SIZE = 10;
 	let warrantPage = $state(0);
 	let boloPage = $state(0);
 
 	let warrantTotalPages = $derived(Math.max(1, Math.ceil(dashboardService.activeWarrants.length / PAGE_SIZE)));
 	let boloTotalPages = $derived(Math.max(1, Math.ceil((dashboardService.activeBolos || []).length / PAGE_SIZE)));
-
 	let pagedWarrants = $derived(dashboardService.activeWarrants.slice(warrantPage * PAGE_SIZE, (warrantPage + 1) * PAGE_SIZE));
 	let pagedBolos = $derived((dashboardService.activeBolos || []).slice(boloPage * PAGE_SIZE, (boloPage + 1) * PAGE_SIZE));
 
-	onMount(() => {
+	// ── Callsign ──
+	const EMPTY_CALLSIGN_VALUES = new Set(['', 'NIL', 'NO CALLSIGN', 'NONE', 'NULL']);
+
+	function isValidCallsign(cs: string | null | undefined): boolean {
+		if (!cs) return false;
+		const upper = cs.trim().toUpperCase();
+		if (EMPTY_CALLSIGN_VALUES.has(upper)) return false;
+		if (!upper.startsWith('PD-')) return false;
+		return upper.length > 3;
+	}
+
+	let callsignModalOpen = $state(false);
+	let callsignInput = $state("");
+	let callsignSaving = $state(false);
+	let callsignLoading = $state(true);
+	let localCallsign = $state("");
+
+	async function fetchCallsign() {
+		callsignLoading = true;
+		const result = await fetchNui<{ callsign?: string }>(
+			NUI_EVENTS.DASHBOARD.GET_CALLSIGN,
+			{ citizenid: playerData?.citizenid },
+			{ callsign: '' }
+		);
+		const cs = result?.callsign?.trim() ?? "";
+		if (isValidCallsign(cs)) {
+			localCallsign = cs;
+		}
+		callsignLoading = false;
+	}
+
+	let hasCallsign = $derived(isValidCallsign(localCallsign));
+
+	function openCallsignModal() {
+		callsignInput = hasCallsign ? localCallsign : "PD-";
+		callsignModalOpen = true;
+	}
+
+	function closeCallsignModal() {
+		callsignModalOpen = false;
+		callsignInput = "";
+	}
+
+	function handleCallsignInput(e: Event) {
+		let val = (e.target as HTMLInputElement).value
+			.toUpperCase()
+			.replace(/[^A-Z0-9\-]/g, "");
+
+		if (!val.startsWith('PD-')) {
+			if (val.startsWith('PD')) {
+				val = 'PD-' + val.slice(2);
+			} else if (val.startsWith('P')) {
+				val = 'PD-' + val.slice(1).replace(/^D-?/, '');
+			} else {
+				val = 'PD-' + val.replace(/^[PD\-]+/, '');
+			}
+		}
+
+		callsignInput = val.slice(0, 6);
+		(e.target as HTMLInputElement).value = callsignInput;
+	}
+
+	async function saveCallsign() {
+		const cs = callsignInput.trim();
+		if (!isValidCallsign(cs) || callsignSaving) return;
+		callsignSaving = true;
+		try {
+			await fetchNui(NUI_EVENTS.DASHBOARD.SET_CALLSIGN, { callsign: cs, citizenid: playerData?.citizenid });
+			localCallsign = cs;
+			closeCallsignModal();
+		} catch {
+			/* silent */
+		} finally {
+			callsignSaving = false;
+		}
+	}
+
+	onMount(async () => {
 		dashboardService.initialize();
 		dashboardService.startCarouselTimer();
 		loadDojDashboard();
+		await fetchCallsign();
 	});
 
 	onDestroy(() => {
 		dashboardService.destroy();
 	});
 
-	function viewWarrant(warrantId: string) {
-		tabService.setActiveTab("Warrants");
-		const activeInstance = tabService.getActiveInstance();
-		if (activeInstance) {
-			tabService.setInstanceTab(activeInstance.id, "Warrants");
-		}
-	}
-
 	function viewBolo(boloId: number) {
 		tabService.setActiveTab("BOLOs");
 		const activeInstance = tabService.getActiveInstance();
-		if (activeInstance) {
-			tabService.setInstanceTab(activeInstance.id, "BOLOs");
-		}
+		if (activeInstance) tabService.setInstanceTab(activeInstance.id, "BOLOs");
 	}
 
 	function viewReport(reportId: string) {
 		openReportInEditor(reportId);
 		tabService.setActiveTab("Reports");
 		const activeInstance = tabService.getActiveInstance();
-		if (activeInstance) {
-			tabService.setInstanceTab(activeInstance.id, "Reports");
-		}
+		if (activeInstance) tabService.setInstanceTab(activeInstance.id, "Reports");
 	}
 
 	function toggleDispatch(dispatchId: string) {
@@ -133,9 +198,7 @@
 	function getTimeTranslated(time: number): string {
 		const now = Date.now();
 		let diffInMs = now - time;
-
 		if (diffInMs < 0) return "in the future";
-
 		const units = [
 			{ label: "year", ms: 1000 * 60 * 60 * 24 * 365 },
 			{ label: "month", ms: 1000 * 60 * 60 * 24 * 30 },
@@ -144,9 +207,7 @@
 			{ label: "hour", ms: 1000 * 60 * 60 },
 			{ label: "minute", ms: 1000 * 60 },
 		];
-
 		const parts = [];
-
 		for (const unit of units) {
 			const count = Math.floor(diffInMs / unit.ms);
 			if (count >= 1) {
@@ -154,34 +215,21 @@
 				diffInMs -= count * unit.ms;
 			}
 		}
-
-		if (parts.length === 0) return "just now";
-
-		return parts.join(", ") + " ago";
+		return parts.length === 0 ? "just now" : parts.join(", ") + " ago";
 	}
 
 	async function attachYourselfToDispatch(dispatchId: string) {
-		const result =
-			await dispatchService.attachYourselfToDispatch(dispatchId);
-		if (result) {
-			dashboardService.setRecentDispatches(result);
-		}
+		const result = await dispatchService.attachYourselfToDispatch(dispatchId);
+		if (result) dashboardService.setRecentDispatches(result);
 	}
 
 	async function detachYourselfFromDispatch(dispatchId: string) {
-		const result =
-			await dispatchService.detachYourselfFromDispatch(dispatchId);
-		if (result) {
-			dashboardService.setRecentDispatches(result);
-		}
+		const result = await dispatchService.detachYourselfFromDispatch(dispatchId);
+		if (result) dashboardService.setRecentDispatches(result);
 	}
 
 	function openReport(id: number) {
-		if (reportOpened === id) {
-			reportOpened = null;
-		} else {
-			reportOpened = id;
-		}
+		reportOpened = reportOpened === id ? null : id;
 	}
 
 	async function loadMoreReports() {
@@ -193,9 +241,7 @@
 		openReportInEditor(reportId);
 		tabService.setActiveTab("Reports");
 		const activeInstance = tabService.getActiveInstance();
-		if (activeInstance) {
-			tabService.setInstanceTab(activeInstance.id, "Reports");
-		}
+		if (activeInstance) tabService.setInstanceTab(activeInstance.id, "Reports");
 	}
 
 	function getCarouselDotOpacity(index: number): number {
@@ -204,12 +250,16 @@
 		}
 		return 0.3;
 	}
+
+	let currentBulletinContent = $derived(
+		dashboardService.bulletins[dashboardService.currentBulletinIndex]?.content ?? dashboardService.bulletinContent ?? ""
+	);
 </script>
 
 <div class="dashboard">
-	<!-- Top Bar: Stats + Bulletin + Quick Actions -->
 	<div class="top-section">
 		<div class="stats-strip">
+			<!-- Rank -->
 			<div class="stat-item">
 				<div class="stat-icon rank-icon">
 					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
@@ -220,16 +270,25 @@
 				</div>
 			</div>
 			<div class="stat-divider"></div>
+
+			<!-- Reports -->
 			<div class="stat-item">
 				<div class="stat-icon reports-icon">
 					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
 				</div>
 				<div class="stat-content">
-					<span class="stat-value">{dashboardService.reportsInfo.totalThisWeek} <span class="stat-change" class:positive={dashboardService.reportsInfo.changeFromLastWeek > 0} class:negative={dashboardService.reportsInfo.changeFromLastWeek < 0}>{#if dashboardService.reportsInfo.changeFromLastWeek > 0}+{/if}{dashboardService.reportsInfo.changeFromLastWeek}</span></span>
+					<span class="stat-value">
+						{dashboardService.reportsInfo.totalThisWeek}
+						<span class="stat-change" class:positive={dashboardService.reportsInfo.changeFromLastWeek > 0} class:negative={dashboardService.reportsInfo.changeFromLastWeek < 0}>
+							{#if dashboardService.reportsInfo.changeFromLastWeek > 0}+{/if}{dashboardService.reportsInfo.changeFromLastWeek}
+						</span>
+					</span>
 					<span class="stat-label">Reports this week</span>
 				</div>
 			</div>
 			<div class="stat-divider"></div>
+
+			<!-- Active Units -->
 			<div class="stat-item">
 				<div class="stat-icon units-icon">
 					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
@@ -239,17 +298,16 @@
 					<span class="stat-label">Active units</span>
 				</div>
 			</div>
-
 			<div class="stat-divider"></div>
 
-			<!-- Bulletin inline -->
+			<!-- Bulletin with tooltip -->
 			<div class="stat-item bulletin-item">
 				<div class="stat-icon bulletin-icon">
 					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17H2a3 3 0 006 0h8a3 3 0 006 0zm0 0V5a2 2 0 00-2-2H4a2 2 0 00-2 2v12"/></svg>
 				</div>
 				<div class="stat-content bulletin-content">
 					{#if dashboardService.bulletins.length > 0}
-						<span class="bulletin-text">{dashboardService.bulletins[dashboardService.currentBulletinIndex]?.content || dashboardService.bulletinContent}</span>
+						<span class="bulletin-text">{currentBulletinContent}</span>
 						{#if dashboardService.bulletins.length > 1}
 							<div class="carousel-dots">
 								{#each dashboardService.bulletins as _, index}
@@ -263,15 +321,39 @@
 								{/each}
 							</div>
 						{/if}
+						{#if currentBulletinContent}
+							<div class="bulletin-tooltip">{currentBulletinContent}</div>
+						{/if}
 					{:else}
 						<span class="bulletin-empty">No active bulletins</span>
 					{/if}
 				</div>
 			</div>
-
 			<div class="stat-divider"></div>
 
-			<!-- Quick Actions inline -->
+			<!-- Callsign -->
+			{#if !callsignLoading}
+				{#if hasCallsign}
+					<button class="callsign-display" onclick={openCallsignModal} title="Change callsign">
+						<div class="stat-icon callsign-icon">
+							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="8" cy="12" r="2"/><path d="M14 9h4M14 12h4M14 15h2"/></svg>
+						</div>
+						<div class="stat-content">
+							<span class="stat-value callsign-value">{localCallsign}</span>
+							<span class="stat-label">Callsign</span>
+						</div>
+					</button>
+				{:else}
+					<div class="callsign-warn">
+						<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cs-warn-icon"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+						<span class="cs-warn-text">No callsign set</span>
+						<button class="cs-warn-btn" onclick={openCallsignModal}>Set Callsign</button>
+					</div>
+				{/if}
+				<div class="stat-divider"></div>
+			{/if}
+
+			<!-- Quick Actions -->
 			<div class="quick-actions">
 				<button class="qa-btn qa-duty" onclick={toggleDuty} title="Toggle Duty">
 					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/></svg>
@@ -286,7 +368,6 @@
 	<!-- Main Content Grid -->
 	<div class="main-grid">
 		{#if isLEO}
-		<!-- Left Column: Warrants + BOLOs (LEO only) -->
 		<div class="column">
 			<div class="panel">
 				<div class="panel-header">
@@ -301,9 +382,7 @@
 							<button class="list-item" onclick={() => openWarrant(warrant.reportid)}>
 								<div class="item-left">
 									<span class="item-name">{warrant.name}</span>
-									<span class="item-meta">
-										#{warrant.reportid} · Exp. {new Date(warrant.expirydate).toLocaleDateString()}
-									</span>
+									<span class="item-meta">#{warrant.reportid} · Exp. {new Date(warrant.expirydate).toLocaleDateString()}</span>
 									<div class="pill-row">
 										{#if warrant.felonies > 0}<span class="pill pill-red">{warrant.felonies} Felony</span>{/if}
 										{#if warrant.misdemeanors > 0}<span class="pill pill-orange">{warrant.misdemeanors} Misd.</span>{/if}
@@ -341,9 +420,7 @@
 							<button class="list-item" onclick={() => viewBolo(bolo.id)}>
 								<div class="item-left">
 									<span class="item-name">{bolo.name}</span>
-									<span class="item-meta">
-										#{bolo.reportId} · <span class="pill pill-blue">{bolo.type}</span>
-									</span>
+									<span class="item-meta">#{bolo.reportId} · <span class="pill pill-blue">{bolo.type}</span></span>
 									{#if bolo.notes && bolo.notes.trim()}
 										<span class="item-notes">{bolo.notes}</span>
 									{/if}
@@ -368,7 +445,7 @@
 		</div>
 		{/if}
 
-		<!-- Center Column: Recent Reports -->
+		<!-- Center: Recent Reports -->
 		<div class="column">
 			<div class="panel">
 				<div class="panel-header">
@@ -395,7 +472,7 @@
 			</div>
 		</div>
 
-		<!-- Right Column: Dispatches (LEO/EMS) or DOJ Panels -->
+		<!-- Right: Dispatches or DOJ -->
 		<div class="column">
 			{#if isDOJ}
 				<div class="panel">
@@ -461,45 +538,27 @@
 					<div class="panel-body">
 						{#each dashboardService.recentDispatches && Array.isArray(dashboardService.recentDispatches) ? dashboardService.recentDispatches.slice().reverse() : [] as dispatch}
 							<div class="dispatch-item" class:expanded={expandedDispatch === dispatch.id}>
-								<button
-									class="dispatch-btn"
-									onclick={() => toggleDispatch(dispatch.id)}
-									aria-expanded={expandedDispatch === dispatch.id}
-								>
+								<button class="dispatch-btn" onclick={() => toggleDispatch(dispatch.id)} aria-expanded={expandedDispatch === dispatch.id}>
 									<div class="priority-bar" style="background: {getPriorityColor(dispatch.priority)}"></div>
 									<div class="item-left">
 										<span class="item-name">{dispatch.message}</span>
 										<span class="item-meta">{dispatch.street} · {getTimeTranslated(dispatch.time)}</span>
 									</div>
 								</button>
-
 								{#if expandedDispatch === dispatch.id}
 									<div class="dispatch-detail">
 										<div class="dispatch-detail-header">
 											<span class="detail-label">Attached Units</span>
 											<div class="dispatch-btns">
-												<button
-													class="d-action-btn"
-													onclick={() =>
-														dispatchService.isUserAttachedToDispatch(dispatch, playerData)
-															? detachYourselfFromDispatch(dispatch.id)
-															: attachYourselfToDispatch(dispatch.id)}
-												>
+												<button class="d-action-btn" onclick={() => dispatchService.isUserAttachedToDispatch(dispatch, playerData) ? detachYourselfFromDispatch(dispatch.id) : attachYourselfToDispatch(dispatch.id)}>
 													{dispatchService.isUserAttachedToDispatch(dispatch, playerData) ? "Detach" : "Attach"}
 												</button>
-												<button
-													class="d-action-btn"
-													onclick={() => dispatchService.routeToDispatch(dispatch)}
-												>
-													Route
-												</button>
+												<button class="d-action-btn" onclick={() => dispatchService.routeToDispatch(dispatch)}>Route</button>
 											</div>
 										</div>
 										<div class="unit-chips">
 											{#each dispatch.units as unit}
-												<span class="unit-chip">
-													{dispatchService.getCallSign(unit.metadata?.callsign)} - {unit.charinfo?.firstname} {unit.charinfo?.lastname}
-												</span>
+												<span class="unit-chip">{dispatchService.getCallSign(unit.metadata?.callsign)} - {unit.charinfo?.firstname} {unit.charinfo?.lastname}</span>
 											{/each}
 										</div>
 									</div>
@@ -511,533 +570,205 @@
 			{/if}
 		</div>
 	</div>
+
+	<!-- Callsign Modal -->
+	{#if callsignModalOpen}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="cs-modal-overlay" onclick={(e) => { if (e.target === e.currentTarget) closeCallsignModal(); }}>
+			<div class="cs-modal" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
+				<div class="cs-modal-header">
+					<span class="cs-modal-title">{hasCallsign ? 'Change Callsign' : 'Set Callsign'}</span>
+					<button class="cs-modal-close" onclick={closeCallsignModal} aria-label="Close">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+					</button>
+				</div>
+				<div class="cs-modal-body">
+					<span class="cs-input-label">Callsign</span>
+					<input
+						class="cs-input"
+						type="text"
+						placeholder="PD-01"
+						value={callsignInput}
+						oninput={handleCallsignInput}
+						onkeydown={(e) => { if (e.key === 'Enter') saveCallsign(); if (e.key === 'Escape') closeCallsignModal(); }}
+						maxlength={6}
+						spellcheck={false}
+						autofocus
+					/>
+					<span class="cs-hint">{callsignInput.length}/6 · format: PD-XX</span>
+				</div>
+				<div class="cs-modal-footer">
+					<button class="cs-btn-cancel" onclick={closeCallsignModal} disabled={callsignSaving}>Cancel</button>
+					<button class="cs-btn-confirm" onclick={saveCallsign} disabled={callsignSaving || !isValidCallsign(callsignInput)}>
+						{callsignSaving ? "Saving..." : "Save"}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 </div>
 
 <style>
-	/* ===== Layout ===== */
-	.dashboard {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		overflow: hidden;
-		background: var(--card-dark-bg);
-	}
-
-	/* ===== Top Stats Strip ===== */
-	.top-section {
-		flex-shrink: 0;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-	}
-
-	.stats-strip {
-		display: flex;
-		align-items: center;
-		padding: 0 20px;
-		height: 52px;
-		gap: 0;
-	}
-
-	.stat-divider {
-		width: 1px;
-		height: 28px;
-		background: rgba(255, 255, 255, 0.06);
-		flex-shrink: 0;
-	}
-
-	.stat-item {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		padding: 0 16px;
-		flex-shrink: 0;
-	}
-
-	.bulletin-item {
-		flex: 1;
-		min-width: 0;
-	}
+	.dashboard { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--card-dark-bg); }
 
-	.stat-icon {
-		width: 30px;
-		height: 30px;
-		border-radius: 8px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-	}
+	.top-section { flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+	.stats-strip { display: flex; align-items: center; padding: 0 20px; height: 52px; gap: 0; }
+	.stat-divider { width: 1px; height: 28px; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; }
+	.stat-item { display: flex; align-items: center; gap: 10px; padding: 0 16px; flex-shrink: 0; }
+	.bulletin-item { flex: 1; min-width: 0; position: relative; }
 
+	.stat-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
 	.rank-icon { background: rgba(168, 85, 247, 0.12); color: #a78bfa; }
 	.reports-icon { background: rgba(16, 185, 129, 0.12); color: #34d399; }
 	.units-icon { background: rgba(var(--accent-rgb), 0.12); color: #60a5fa; }
 	.bulletin-icon { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
+	.callsign-icon { background: rgba(var(--accent-rgb), 0.12); color: #60a5fa; }
 
-	.stat-content {
-		display: flex;
-		flex-direction: column;
-		min-width: 0;
-	}
-
-	.bulletin-content {
-		flex: 1;
-	}
-
-	.stat-value {
-		color: rgba(255, 255, 255, 0.9);
-		font-size: 13px;
-		font-weight: 600;
-		line-height: 1.2;
-		display: flex;
-		align-items: center;
-		gap: 6px;
-	}
+	.stat-content { display: flex; flex-direction: column; min-width: 0; }
+	.bulletin-content { flex: 1; min-width: 0; }
 
-	.stat-label {
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 10px;
-		font-weight: 500;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-	}
-
-	.stat-change {
-		font-size: 11px;
-		font-weight: 600;
-	}
+	.stat-value { color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; line-height: 1.2; display: flex; align-items: center; gap: 6px; }
+	.callsign-value { font-family: monospace; letter-spacing: 1px; color: #60a5fa; }
+	.stat-label { color: rgba(255, 255, 255, 0.35); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
+	.stat-change { font-size: 11px; font-weight: 600; }
 	.stat-change.positive { color: #34d399; }
 	.stat-change.negative { color: #f87171; }
-
-	.stat-badge {
-		font-size: 9px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		background: rgba(var(--accent-rgb), 0.15);
-		color: #60a5fa;
-		padding: 1px 6px;
-		border-radius: 3px;
-	}
-
-	/* ===== Bulletin (inline) ===== */
-	.bulletin-text {
-		color: rgba(255, 255, 255, 0.6);
-		font-size: 12px;
-		line-height: 1.3;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.bulletin-empty {
-		color: rgba(255, 255, 255, 0.3);
+	.stat-badge { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(var(--accent-rgb), 0.15); color: #60a5fa; padding: 1px 6px; border-radius: 3px; }
+
+	/* Bulletin */
+	.bulletin-text { color: rgba(255, 255, 255, 0.6); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
+	.bulletin-empty { color: rgba(255, 255, 255, 0.3); font-size: 11px; }
+	.carousel-dots { display: flex; gap: 4px; margin-top: 2px; }
+	.carousel-dot { width: 4px; height: 4px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.8); cursor: pointer; padding: 0; transition: opacity 0.1s ease, transform 0.2s ease; }
+	.carousel-dot.active { transform: scale(1.4); }
+	.carousel-dot:hover { opacity: 0.9 !important; }
+
+	/* Bulletin tooltip */
+	.bulletin-tooltip {
+		display: none;
+		position: absolute;
+		top: calc(100% + 10px);
+		left: 0;
+		background: #111113;
+		border: 1px solid rgba(255, 255, 255, 0.12);
+		border-radius: 5px;
+		padding: 8px 12px;
 		font-size: 11px;
-	}
-
-	.carousel-dots {
-		display: flex;
-		gap: 4px;
-		margin-top: 2px;
-	}
-
-	.carousel-dot {
-		width: 4px;
-		height: 4px;
-		border-radius: 50%;
-		border: none;
-		background: rgba(255, 255, 255, 0.8);
-		cursor: pointer;
-		padding: 0;
-		transition: opacity 0.1s ease, transform 0.2s ease;
-	}
-
-	.carousel-dot.active {
-		transform: scale(1.4);
-	}
-
-	.carousel-dot:hover {
-		opacity: 0.9 !important;
-	}
-
-	/* ===== Quick Actions (inline) ===== */
-	.quick-actions {
-		display: flex;
-		gap: 6px;
-		padding-left: 16px;
-		flex-shrink: 0;
-	}
-
-	.qa-btn {
-		width: 32px;
-		height: 32px;
-		border-radius: 8px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all 0.15s;
-		border: 1px solid transparent;
-	}
-
-	.qa-duty {
-		background: rgba(16, 185, 129, 0.1);
-		color: #34d399;
-		border-color: rgba(16, 185, 129, 0.15);
-	}
-
-	.qa-duty:hover {
-		background: rgba(16, 185, 129, 0.2);
-		border-color: rgba(16, 185, 129, 0.3);
-	}
-
-	.qa-signout {
-		background: rgba(239, 68, 68, 0.08);
-		color: #f87171;
-		border-color: rgba(239, 68, 68, 0.1);
-	}
-
-	.qa-signout:hover {
-		background: rgba(239, 68, 68, 0.15);
-		border-color: rgba(239, 68, 68, 0.25);
-	}
-
-	/* ===== Main Grid ===== */
-	.main-grid {
-		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
-		flex: 1;
-		min-height: 0;
-	}
-
-	.column {
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		border-right: 1px solid rgba(255, 255, 255, 0.06);
-	}
-
-	.column:last-child {
-		border-right: none;
-	}
-
-	/* ===== Panels ===== */
-	.panel {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
-		overflow: hidden;
-	}
-
-	.panel + .panel {
-		border-top: 1px solid rgba(255, 255, 255, 0.06);
-	}
-
-	.panel-header {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 12px 16px 10px;
-		flex-shrink: 0;
-	}
-
-	.panel-title {
-		color: rgba(255, 255, 255, 0.4);
-		font-size: 10px;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 1px;
-	}
-
-	.panel-count {
-		background: rgba(255, 255, 255, 0.06);
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 10px;
-		font-weight: 600;
-		padding: 0 5px;
-		border-radius: 4px;
-		line-height: 16px;
-	}
-
-	/* ===== Panel Body ===== */
-	.panel-body {
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		padding: 0 10px 10px;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		scrollbar-width: thin;
-		scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
-	}
-
+		color: rgba(255, 255, 255, 0.92);
+		line-height: 1.5;
+		max-width: 320px;
+		white-space: normal;
+		word-break: break-word;
+		z-index: 100;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+	}
+
+	.bulletin-item:hover .bulletin-tooltip { display: block; }
+
+	/* Callsign display */
+	.callsign-display { display: flex; align-items: center; gap: 10px; padding: 0 16px; flex-shrink: 0; background: transparent; border: none; cursor: pointer; color: inherit; font: inherit; height: 100%; transition: background 0.12s; }
+	.callsign-display:hover { background: rgba(255, 255, 255, 0.04); }
+
+	/* Callsign warning */
+	.callsign-warn { display: flex; align-items: center; gap: 6px; padding: 4px 10px; margin: 0 8px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.15); border-radius: 5px; flex-shrink: 0; }
+	.cs-warn-icon { color: rgba(251, 191, 36, 0.7); flex-shrink: 0; }
+	.cs-warn-text { color: rgba(251, 191, 36, 0.75); font-size: 11px; font-weight: 500; white-space: nowrap; }
+	.cs-warn-btn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(251, 191, 36, 0.25); background: rgba(251, 191, 36, 0.1); color: rgba(251, 191, 36, 0.9); font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.12s ease; margin-left: 2px; }
+	.cs-warn-btn:hover { background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.4); }
+
+	/* Quick Actions */
+	.quick-actions { display: flex; gap: 6px; padding-left: 16px; flex-shrink: 0; }
+	.qa-btn { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
+	.qa-duty { background: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.15); }
+	.qa-duty:hover { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.3); }
+	.qa-signout { background: rgba(239, 68, 68, 0.08); color: #f87171; border-color: rgba(239, 68, 68, 0.1); }
+	.qa-signout:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.25); }
+
+	/* Main Grid */
+	.main-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; flex: 1; min-height: 0; }
+	.column { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, 0.06); }
+	.column:last-child { border-right: none; }
+
+	/* Panels */
+	.panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
+	.panel + .panel { border-top: 1px solid rgba(255, 255, 255, 0.06); }
+	.panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; flex-shrink: 0; }
+	.panel-title { color: rgba(255, 255, 255, 0.4); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
+	.panel-count { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35); font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 4px; line-height: 16px; }
+
+	.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; }
 	.panel-body::-webkit-scrollbar { width: 3px; }
 	.panel-body::-webkit-scrollbar-track { background: transparent; }
 	.panel-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
 
-	/* ===== List Items ===== */
-	.list-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 8px 10px;
-		border-radius: 6px;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		transition: background 0.1s;
-		text-align: left;
-		color: inherit;
-		font: inherit;
-		width: 100%;
-	}
-
-	.list-item:hover {
-		background: rgba(255, 255, 255, 0.04);
-	}
-
-	.item-left {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		flex: 1;
-		min-width: 0;
-	}
-
-	.item-name {
-		color: rgba(255, 255, 255, 0.85);
-		font-size: 12px;
-		font-weight: 500;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.item-meta {
-		color: rgba(255, 255, 255, 0.3);
-		font-size: 11px;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	.item-notes {
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 11px;
-		line-height: 1.3;
-		margin-top: 1px;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
-
-	.item-arrow {
-		color: rgba(255, 255, 255, 0.15);
-		flex-shrink: 0;
-		transition: color 0.12s;
-	}
-
-	.list-item:hover .item-arrow {
-		color: rgba(255, 255, 255, 0.4);
-	}
-
-	/* ===== Pills ===== */
-	.pill-row {
-		display: flex;
-		gap: 4px;
-		margin-top: 3px;
-		flex-wrap: wrap;
-	}
-
-	.pill {
-		padding: 1px 5px;
-		border-radius: 3px;
-		font-size: 9px;
-		font-weight: 600;
-		letter-spacing: 0.2px;
-		border: 1px solid transparent;
-	}
-
+	/* List Items */
+	.list-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; background: transparent; border: none; cursor: pointer; transition: background 0.1s; text-align: left; color: inherit; font: inherit; width: 100%; }
+	.list-item:hover { background: rgba(255, 255, 255, 0.04); }
+	.item-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+	.item-name { color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	.item-meta { color: rgba(255, 255, 255, 0.3); font-size: 11px; display: flex; align-items: center; gap: 4px; }
+	.item-notes { color: rgba(255, 255, 255, 0.35); font-size: 11px; line-height: 1.3; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+	.item-arrow { color: rgba(255, 255, 255, 0.15); flex-shrink: 0; transition: color 0.12s; }
+	.list-item:hover .item-arrow { color: rgba(255, 255, 255, 0.4); }
+
+	/* Pills */
+	.pill-row { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
+	.pill { padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0.2px; border: 1px solid transparent; }
 	.pill-red { background: rgba(239, 68, 68, 0.12); color: #f87171; border-color: rgba(239, 68, 68, 0.15); }
 	.pill-orange { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245, 158, 11, 0.15); }
 	.pill-green { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16, 185, 129, 0.15); }
 	.pill-blue { background: rgba(var(--accent-rgb), 0.12); color: #60a5fa; border-color: rgba(var(--accent-rgb), 0.15); }
 
-	/* ===== Pager ===== */
-	.pager {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 8px;
-		padding: 6px 16px 10px;
-		flex-shrink: 0;
-	}
-
-	.pager-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 22px;
-		height: 22px;
-		background: transparent;
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 4px;
-		color: rgba(255, 255, 255, 0.35);
-		cursor: pointer;
-		transition: all 0.12s;
-	}
-
-	.pager-btn:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.06);
-		color: rgba(255, 255, 255, 0.7);
-	}
-
-	.pager-btn:disabled {
-		opacity: 0.2;
-		cursor: default;
-	}
-
-	.pager-info {
-		font-size: 10px;
-		color: rgba(255, 255, 255, 0.35);
-		font-weight: 500;
-	}
-
-	/* ===== Empty & Load More ===== */
-	.empty-state {
-		color: rgba(255, 255, 255, 0.2);
-		font-size: 11px;
-		text-align: center;
-		padding: 24px 0;
-	}
-
-	.load-more-btn {
-		background: transparent;
-		color: rgba(255, 255, 255, 0.35);
-		border: none;
-		border-top: 1px solid rgba(255, 255, 255, 0.04);
-		padding: 8px;
-		font-size: 11px;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.12s;
-		text-align: center;
-		flex-shrink: 0;
-	}
-
-	.load-more-btn:hover {
-		color: rgba(255, 255, 255, 0.5);
-		background: rgba(255, 255, 255, 0.02);
-	}
-
-	/* ===== Dispatch Items ===== */
-	.dispatch-item {
-		border-radius: 6px;
-		overflow: hidden;
-		transition: background 0.1s;
-	}
-
-	.dispatch-item:hover {
-		background: rgba(255, 255, 255, 0.02);
-	}
-
-	.dispatch-item.expanded {
-		background: rgba(255, 255, 255, 0.03);
-	}
-
-	.dispatch-btn {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		padding: 8px 10px;
-		background: none;
-		border: none;
-		cursor: pointer;
-		color: inherit;
-		font: inherit;
-		text-align: left;
-	}
-
-	.priority-bar {
-		width: 3px;
-		height: 24px;
-		border-radius: 2px;
-		flex-shrink: 0;
-	}
-
-	.dispatch-detail {
-		padding: 0 10px 10px 23px;
-	}
-
-	.dispatch-detail-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-bottom: 6px;
-	}
-
-	.detail-label {
-		color: rgba(255, 255, 255, 0.3);
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-	}
-
-	.dispatch-btns {
-		display: flex;
-		gap: 4px;
-	}
-
-	.d-action-btn {
-		background: rgba(var(--accent-rgb), 0.1);
-		color: #60a5fa;
-		border: 1px solid rgba(var(--accent-rgb), 0.15);
-		padding: 3px 8px;
-		border-radius: 4px;
-		font-size: 10px;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.12s;
-	}
-
-	.d-action-btn:hover {
-		background: rgba(var(--accent-rgb), 0.18);
-		border-color: rgba(var(--accent-rgb), 0.3);
-	}
-
-	.unit-chips {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 4px;
-	}
-
-	.unit-chip {
-		background: rgba(255, 255, 255, 0.04);
-		color: rgba(255, 255, 255, 0.5);
-		padding: 2px 7px;
-		border-radius: 3px;
-		font-size: 10px;
-		font-weight: 500;
-	}
-
-	.list-item-btn {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		width: 100%;
-		padding: 8px 12px;
-		background: none;
-		border: none;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-		cursor: pointer;
-		text-align: left;
-		color: inherit;
-	}
-
-	.list-item-btn:hover {
-		background: rgba(255, 255, 255, 0.04);
-	}
-</style>
+	/* Pager */
+	.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px 10px; flex-shrink: 0; }
+	.pager-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; color: rgba(255, 255, 255, 0.35); cursor: pointer; transition: all 0.12s; }
+	.pager-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); }
+	.pager-btn:disabled { opacity: 0.2; cursor: default; }
+	.pager-info { font-size: 10px; color: rgba(255, 255, 255, 0.35); font-weight: 500; }
+
+	/* Empty & Load More */
+	.empty-state { color: rgba(255, 255, 255, 0.2); font-size: 11px; text-align: center; padding: 24px 0; }
+	.load-more-btn { background: transparent; color: rgba(255, 255, 255, 0.35); border: none; border-top: 1px solid rgba(255, 255, 255, 0.04); padding: 8px; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.12s; text-align: center; flex-shrink: 0; }
+	.load-more-btn:hover { color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.02); }
+
+	/* Dispatch */
+	.dispatch-item { border-radius: 6px; overflow: hidden; transition: background 0.1s; }
+	.dispatch-item:hover { background: rgba(255, 255, 255, 0.02); }
+	.dispatch-item.expanded { background: rgba(255, 255, 255, 0.03); }
+	.dispatch-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: none; border: none; cursor: pointer; color: inherit; font: inherit; text-align: left; }
+	.priority-bar { width: 3px; height: 24px; border-radius: 2px; flex-shrink: 0; }
+	.dispatch-detail { padding: 0 10px 10px 23px; }
+	.dispatch-detail-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
+	.detail-label { color: rgba(255, 255, 255, 0.3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+	.dispatch-btns { display: flex; gap: 4px; }
+	.d-action-btn { background: rgba(var(--accent-rgb), 0.1); color: #60a5fa; border: 1px solid rgba(var(--accent-rgb), 0.15); padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.12s; }
+	.d-action-btn:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.3); }
+	.unit-chips { display: flex; flex-wrap: wrap; gap: 4px; }
+	.unit-chip { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 500; }
+
+	.list-item-btn { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 12px; background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; text-align: left; color: inherit; }
+	.list-item-btn:hover { background: rgba(255, 255, 255, 0.04); }
+
+	/* Callsign Modal */
+	.cs-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; }
+	.cs-modal { background: var(--card-dark-bg); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; width: min(320px, 92vw); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
+	.cs-modal-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
+	.cs-modal-title { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
+	.cs-modal-current { font-size: 9px; color: rgba(255, 255, 255, 0.25); flex: 1; }
+	.cs-modal-close { display: flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); padding: 4px; border-radius: 3px; cursor: pointer; transition: all 0.1s; margin-left: auto; }
+	.cs-modal-close:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+	.cs-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
+	.cs-input-label { color: rgba(255, 255, 255, 0.35); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
+	.cs-input { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 3px; padding: 5px 8px; color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; font-family: inherit; text-transform: uppercase; width: 100%; box-sizing: border-box; transition: border-color 0.1s; }
+	.cs-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.1); }
+	.cs-input::placeholder { color: rgba(255, 255, 255, 0.15); letter-spacing: 1.5px; font-weight: 400; }
+	.cs-hint { color: rgba(255, 255, 255, 0.2); font-size: 9px; margin-top: 1px; }
+	.cs-modal-footer { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
+	.cs-btn-cancel { background: transparent; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 3px; padding: 4px 10px; color: rgba(255, 255, 255, 0.4); font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.1s; }
+	.cs-btn-cancel:hover:not(:disabled) { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
+	.cs-btn-cancel:disabled { opacity: 0.4; cursor: not-allowed; }
+	.cs-btn-confirm { background: rgba(16, 185, 129, 0.06); color: rgba(52, 211, 153, 0.7); border: 1px solid rgba(16, 185, 129, 0.1); border-radius: 3px; padding: 4px 12px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.1s; }
+	.cs-btn-confirm:hover:not(:disabled) { background: rgba(16, 185, 129, 0.12); color: rgba(110, 231, 183, 0.9); }
+	.cs-btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
+</style>
\ No newline at end of file

From ada1f2594d51b81ddf35c412f1984feecc2fd312 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 18:02:51 +0200
Subject: [PATCH 122/144] callsign missing warning

callsign missing warning
---
 web/src/constants/nuiEvents.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index b8b3f9e2..226e7c95 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -23,6 +23,8 @@ export const NUI_EVENTS = {
 		UPDATE_ACTIVE_UNITS: "updateActiveUnits",
 		UPDATE_RECENT_DISPATCHES: "updateRecentDispatches",
 		UPDATE_USAGE_METRICS: "updateUsageMetrics",
+		SET_CALLSIGN: "setCallsign",
+		GET_CALLSIGN: "getCallsign"
 	},
 	DISPATCH: {
 		ATTACH_TO_DISPATCH: "attachToDispatch",

From d40ee5c02308c88919be8c6c0780078fcce4e627 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 18:07:01 +0200
Subject: [PATCH 123/144] callsign missing warning - removed debug prints

callsign missing warning - removed debug prints
---
 client/backend/officers.lua | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/backend/officers.lua b/client/backend/officers.lua
index 448bbe3d..16475bb7 100644
--- a/client/backend/officers.lua
+++ b/client/backend/officers.lua
@@ -18,9 +18,7 @@ RegisterNUICallback('setCallsign', function(data, cb)
 end)
 
 RegisterNUICallback('getCallsign', function(data, cb)
-    print("test 1")
     if not MDTOpen then cb({ callsign = '' }) return end
-    print("test 2")
     local result = ps.callback(resourceName .. ':server:getCallsign', {
         citizenid = data.citizenid,
     })

From 073124e2d8b30c1eebd6ea3a66ff2878409c1837 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 30 May 2026 18:07:14 +0200
Subject: [PATCH 124/144] callsign missing warning - removed debug prints

callsign missing warning - removed debug prints
---
 server/backend/officers.lua | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/server/backend/officers.lua b/server/backend/officers.lua
index 4d29fc3b..082b02b7 100644
--- a/server/backend/officers.lua
+++ b/server/backend/officers.lua
@@ -38,25 +38,19 @@ ps.registerCallback(resourceName .. ':server:setCallsign', function(source, payl
 
         return { success = true, message = 'Callsign updated to ' .. newCallsign }
     end
-    print("test bestanden 4")
     return { success = false, message = 'Player must be online to update callsign' }
 end)
 
 ps.registerCallback(resourceName .. ':server:getCallsign', function(source, payload)
-    print("test bestanden 1")
     if not CheckAuth(source) then return { callsign = '' } end
-    print("test bestanden 2")
     local cid = payload.citizenid
     if not cid then return { callsign = '' } end
-    print("test bestanden 3")
 
     if not QBCore then return { success = false, message = 'Core framework not available' } end
-    print("test bestanden 4")
     local Player = QBCore.Functions.GetPlayerByCitizenId(cid)
     if Player then
         return { callsign = Player.PlayerData.metadata.callsign or '' }
     end
-    print("test bestanden 5")
     local row = MySQL.single.await('SELECT callsign FROM mdt_profiles WHERE citizenid = ?', { cid })
     return { callsign = row and row.callsign or '' }
 end)

From 909ae0129bf5477377ccda8a43ac8002e9483254 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 6 Jun 2026 18:33:08 +0200
Subject: [PATCH 125/144] fixed activewarrant function error

fixed activewarrant function error
---
 web/src/services/dashboardService.svelte.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/src/services/dashboardService.svelte.ts b/web/src/services/dashboardService.svelte.ts
index 81bdaa51..af4ac01d 100644
--- a/web/src/services/dashboardService.svelte.ts
+++ b/web/src/services/dashboardService.svelte.ts
@@ -168,7 +168,7 @@ export function createDashboardService() {
 		useNuiEvent<DashboardData["activeWarrants"]>(
 			NUI_EVENTS.DASHBOARD.UPDATE_ACTIVE_WARRANTS,
 			(data) => {
-				activeWarrants = data || activeWarrants;
+				activeWarrants = Array.isArray(data) ? data : activeWarrants;
 			},
 		);
 
@@ -251,8 +251,7 @@ export function createDashboardService() {
 			{
 				key: NUI_EVENTS.DASHBOARD.GET_ACTIVE_WARRANTS,
 				setter: (value) => {
-					activeWarrants =
-						(value as typeof activeWarrants) || activeWarrants;
+					activeWarrants = Array.isArray(value) ? value : activeWarrants;
 				},
 				errorMsg: "Failed to fetch active warrants",
 			},

From 3cdd1bfd61154eed6da51cf9ea087a91d4d562ae Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sat, 6 Jun 2026 18:33:41 +0200
Subject: [PATCH 126/144] fixed activewarrants function error

fixed activewarrants function error
---
 web/src/pages/Dashboard.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Dashboard.svelte b/web/src/pages/Dashboard.svelte
index 1276093c..1dc82579 100644
--- a/web/src/pages/Dashboard.svelte
+++ b/web/src/pages/Dashboard.svelte
@@ -72,9 +72,9 @@
 	let warrantPage = $state(0);
 	let boloPage = $state(0);
 
-	let warrantTotalPages = $derived(Math.max(1, Math.ceil(dashboardService.activeWarrants.length / PAGE_SIZE)));
+	let warrantTotalPages = $derived(Math.max(1, Math.ceil((dashboardService.activeWarrants ?? []).length / PAGE_SIZE)));
 	let boloTotalPages = $derived(Math.max(1, Math.ceil((dashboardService.activeBolos || []).length / PAGE_SIZE)));
-	let pagedWarrants = $derived(dashboardService.activeWarrants.slice(warrantPage * PAGE_SIZE, (warrantPage + 1) * PAGE_SIZE));
+	let pagedWarrants = $derived((dashboardService.activeWarrants ?? []).slice(warrantPage * PAGE_SIZE, (warrantPage + 1) * PAGE_SIZE));
 	let pagedBolos = $derived((dashboardService.activeBolos || []).slice(boloPage * PAGE_SIZE, (boloPage + 1) * PAGE_SIZE));
 
 	// ── Callsign ──

From 79c978f3a4b35303006540a2b36b440abd6daf9b Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:41:39 +0200
Subject: [PATCH 127/144] Update README.md

---
 README.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 223d0cf4..9639f94e 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@ CREATE TABLE IF NOT EXISTS mdt_patrols (
    id VARCHAR(64) PRIMARY KEY,
    name VARCHAR(64) NOT NULL,
    color VARCHAR(7) NOT NULL,
+   zone_points LONGTEXT NULL DEFAULT NULL,
    sort_order INT NOT NULL DEFAULT 0,
    member_ids TEXT NOT NULL DEFAULT '[]'
 );
@@ -35,9 +36,6 @@ CREATE TABLE IF NOT EXISTS `mdt_bulletin_posts` (
     KEY `idx_deleted_at` (`deleted_at`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  
-ALTER TABLE `mdt_bulletin_posts`
-    MODIFY COLUMN `category` VARCHAR(48) NOT NULL DEFAULT 'general';
- 
 CREATE TABLE IF NOT EXISTS `mdt_bulletin_categories` (
     `id`          INT UNSIGNED  NOT NULL AUTO_INCREMENT,
     `job`         VARCHAR(50)   NOT NULL,
@@ -50,7 +48,7 @@ CREATE TABLE IF NOT EXISTS `mdt_bulletin_categories` (
     PRIMARY KEY (`id`),
     UNIQUE KEY `uq_job_value`  (`job`, `value`),
     INDEX      `idx_job_order` (`job`, `sort_order`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=UTF8MB4_UNICODE_CI;
 ```
 
 # ps-mdt v3

From 5829547f688f691ed2272fb4b99106cafdb5ec22 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:43:10 +0200
Subject: [PATCH 128/144] changed to new animation ( looks better )

---
 client/animation.lua | 10 +++++-----
 client/keys.lua      |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/animation.lua b/client/animation.lua
index e68dd589..0ac64766 100644
--- a/client/animation.lua
+++ b/client/animation.lua
@@ -1,7 +1,7 @@
 local tabletProp = nil
 local isPlayingTabletAnim = false
-local animDict = Config.Animation and Config.Animation.Dict or 'amb@world_human_tourist_map@male@base'
-local animName = Config.Animation and Config.Animation.Name or 'base'
+local animDict = Config.Animation and Config.Animation.Dict or 'amb@code_human_in_bus_passenger_idles@female@tablet@idle_a'
+local animName = Config.Animation and Config.Animation.Name or 'idle_a'
 local propModel = 'ps-mdt'
 
 -- Helper to always get current ped (never stale)
@@ -12,10 +12,10 @@ end
 -- Options ----------------------------------
 
 local propOptions = {
-    xPos = 0.0, -- X-axis offset from the center of entity2
-    yPos = -0.03, -- Y-axis offset from the center of entity2
+    xPos = -0.050, -- X-axis offset from the center of entity2
+    yPos = 0.0, -- Y-axis offset from the center of entity2
     zPos = 0.0, -- Z-axis offset from the center of entity2
-    xRot = 20.0, -- X-axis rotation
+    xRot = 0.0, -- X-axis rotation
     yRot = -90.0, -- Y-axis rotation
     zRot = 0.0, -- Z-axis rotation
     p9 = true, -- Unknown
diff --git a/client/keys.lua b/client/keys.lua
index 0e0023f8..3f2f44f9 100644
--- a/client/keys.lua
+++ b/client/keys.lua
@@ -147,6 +147,7 @@ function OpenMDT()
     MDTOpen = true
 
     SendNUI('setVisible', { visible = true, debugMode = Config.Debug })
+    SendMapCitizenId()
     SendMapUiState()
     
     if isCivilian then

From 67f4b2b987e7e9cfb5298478d7450d4a253b3357 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:43:28 +0200
Subject: [PATCH 129/144] new animation

---
 config.lua | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/config.lua b/config.lua
index d8a43d3c..a3b10f62 100644
--- a/config.lua
+++ b/config.lua
@@ -17,7 +17,7 @@ Config.CivilianAccess = {
 Config.DateTime = {
     GameTime = true, -- If set to true, the game time will be used instead of the server time (boolean)
     TimeFormat = '24', -- Format for displaying time ('24' or '12')
-    DateFormat = "MM-DD-YYYY" -- Format for displaying date (string: "MM-DD-YYYY", "DD-MM-YYYY", or "YYYY-MM-DD")
+    DateFormat = "DD-MM-YYYY" -- Format for displaying date (string: "MM-DD-YYYY", "DD-MM-YYYY", or "YYYY-MM-DD")
 }
 
 -- Department data sharing
@@ -100,7 +100,7 @@ Config.FingerprintAutoFilled = false -- Auto-populate fingerprints on citizen pr
 
 -- Fingerprint Scan Integration
 Config.FingerprintScan = {
-    enabled = false,                                         -- Enable fingerprint scan trigger from MDT
+    enabled = true,                                         -- Enable fingerprint scan trigger from MDT
     officerEvent = 'police:client:showFingerprint',          -- Client event triggered on the officer
     suspectEvent = 'police:client:showFingerprint',          -- Client event triggered on the suspect
 }
@@ -182,8 +182,8 @@ Config.CacheTTL = {
 
 -- Tablet Animation
 Config.Animation = {
-    Dict = 'amb@world_human_tourist_map@male@base',
-    Name = 'base',
+    Dict = 'amb@code_human_in_bus_passenger_idles@female@tablet@idle_a',
+    Name = 'idle_a',
 }
 
 -- Mugshot Camera
@@ -350,4 +350,4 @@ Config.Weapons = {
     { model = "weapon_doubleaction", label = "Double-Action Revolver" },
     { model = "weapon_navyrevolver", label = "Navy Revolver" },
     { model = "weapon_musket", label = "Musket" },
-}
+}
\ No newline at end of file

From b72a1ca966996c00a0275444435d6fdd00879aca Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:44:23 +0200
Subject: [PATCH 130/144] new setting ( notify for entering/leaving the zone )
 + new zone feature

---
 server/backend/settings.lua |  13 +-
 server/backend/tracking.lua | 538 ++++++++++++++++++++++++++++++------
 2 files changed, 460 insertions(+), 91 deletions(-)

diff --git a/server/backend/settings.lua b/server/backend/settings.lua
index d8b56a40..7378e074 100644
--- a/server/backend/settings.lua
+++ b/server/backend/settings.lua
@@ -44,6 +44,16 @@ local ACTION_CATEGORIES = {
     icu_deleted = 'icu',
     camera_viewed = 'cameras',
     bodycam_viewed = 'bodycams',
+    -- ── Patrol management ────────────────────────────────────────────────────
+    patrol_created          = 'patrols',
+    patrol_deleted          = 'patrols',
+    patrol_renamed          = 'patrols',
+    patrol_zone_created     = 'patrols',
+    patrol_zone_updated     = 'patrols',
+    patrol_zone_cleared     = 'patrols',
+    patrol_officer_assigned = 'patrols',
+    patrol_officer_removed  = 'patrols',
+    patrols_reordered       = 'patrols',
 }
 
 -- Cache for tracking config (loaded once, updated on save)
@@ -67,6 +77,7 @@ local function getDefaultTracking()
         icu = true,
         cameras = true,
         bodycams = true,
+        patrols = true,   -- ← new
     }
 end
 
@@ -410,4 +421,4 @@ ps.registerCallback(resourceName .. ':server:saveColorConfig', function(source,
     end
 
     return { success = true }
-end)
+end)
\ No newline at end of file
diff --git a/server/backend/tracking.lua b/server/backend/tracking.lua
index f89106ee..2ced8155 100644
--- a/server/backend/tracking.lua
+++ b/server/backend/tracking.lua
@@ -1,11 +1,65 @@
--- server_patrols.lua
+-- ============================================================================
+--  server_patrols.lua  —  MDT patrol & live tracking (server side)
+-- ----------------------------------------------------------------------------
+--  Responsibilities:
+--    * Live officer/vehicle tracking served to the map NUI (getTracking).
+--    * Patrol CRUD + ordering + zone storage, persisted in `mdt_patrols`.
+--    * Audit logging of every patrol mutation via ps.auditLog.
+--
+--  Performance notes for future devs:
+--    * getTracking is polled by EVERY open MDT (~every 4.5s in the NUI). The
+--      result is cached for TRACKING_CACHE_TTL ms so the heavy player/entity
+--      scan runs at most once per TTL no matter how many MDTs are open. Never
+--      call getAllTrackers() directly from the callback — use getTrackingSnapshot().
+--    * vehicleCache holds recently-parked police vehicles. Entries self-expire
+--      after VEHICLE_CACHE_TTL so ghost markers disappear even when the
+--      'entityRemoved' event never fires (common when entities get culled).
+--      Cache-served vehicles carry `cached = true` so the NUI can dim them.
+--    * DB writes for frequent mutations (assign/remove) are debounced
+--      (SAVE_DEBOUNCE_MS) and coalesced per patrol. Structural changes
+--      (create/rename/zone/delete) are written immediately so a crash can't
+--      lose them.
+--    * broadcastPatrols coalesces plain broadcasts to one per frame. Action
+--      broadcasts (assigned/removed) bypass coalescing because the NUI needs
+--      the flash hint immediately.
+--
+--  Set MDT_DEBUG = true for verbose console logging while developing.
+-- ============================================================================
+
 local resourceName = tostring(GetCurrentResourceName())
-local vehicleCache = {}
-local cacheVehicleCooldowns = {}
-local patrols = {}       -- { [id] = patrol }
-local patrolOrder = {}   -- { id, id, id, ... } – ordered list
 
--- ─── Validierung ──────────────────────────────────────────────────────────
+-- ─── Tunables ───────────────────────────────────────────────────────────────
+local MDT_DEBUG           = false   -- verbose dev logging; KEEP FALSE on production (log spam)
+local TRACKING_CACHE_TTL  = 2000    -- ms — shared tracking snapshot lifetime
+local VEHICLE_CACHE_TTL   = 600000  -- ms — parked-vehicle cache entry lifetime (10 min)
+local SAVE_DEBOUNCE_MS    = 1000    -- ms — coalesce window for debounced patrol saves
+
+-- ─── State ──────────────────────────────────────────────────────────────────
+local vehicleCache = {}             -- [plate] = { plate, coords, heading, _ts }
+local cacheVehicleCooldowns = {}    -- [src]   = os.time() of last cacheVehicle event
+local patrols = {}                  -- [id]    = patrol
+local patrolOrder = {}              -- ordered list of patrol ids
+local trackingCache = { vehicles = {}, bodycams = {}, ts = 0 }
+
+-- ─── Tiny helpers ─────────────────────────────────────────────────────────
+
+-- Gated dev logger. No-op unless MDT_DEBUG is on, so it's free in production.
+local function dbg(...)
+    if MDT_DEBUG then print('[MDT]', ...) end
+end
+
+-- Cache the QBCore object once instead of crossing the export boundary on
+-- every call. Returns nil on non-QB frameworks (then the `ps`/ESX path is used).
+local _qbCore
+local function getQBCore()
+    if _qbCore then return _qbCore end
+    if exports['qb-core'] then
+        _qbCore = exports['qb-core']:GetCoreObject()
+    end
+    return _qbCore
+end
+
+-- ─── Validation ─────────────────────────────────────────────────────────────
 
 local function isValidPatrolId(id)
     return type(id) == "string" and #id > 0 and #id <= 64
@@ -20,17 +74,121 @@ local function isValidCitizenId(cid)
     return type(cid) == "string" and #cid > 0 and #cid <= 64
 end
 
--- ─── DB ───────────────────────────────────────────────────────────────────
+-- Validate zone_points: array of {x, y} pairs, max 64 points
+local function isValidZonePoints(points)
+    if points == nil then return true end -- nil = no zone, valid
+    if type(points) ~= "table" then return false end
+    if #points > 64 then return false end
+    for _, pt in ipairs(points) do
+        if type(pt) ~= "table" then return false end
+        if type(pt.x) ~= "number" or type(pt.y) ~= "number" then return false end
+        if pt.x < -10000 or pt.x > 10000 or pt.y < -10000 or pt.y > 10000 then return false end
+    end
+    return true
+end
 
-local function savePatrol(patrol)
+-- ─── Audit helpers ────────────────────────────────────────────────────────
+
+local function getOfficerInfo(src)
+    local QBCore = getQBCore()
+    if QBCore then
+        local player = QBCore.Functions.GetPlayer(src)
+        if player then
+            local d = player.PlayerData
+            return {
+                citizenid = d.citizenid,
+                name      = d.charinfo.firstname .. ' ' .. d.charinfo.lastname,
+                callsign  = d.metadata and d.metadata.callsign or nil,
+                rank      = d.job and d.job.grade and d.job.grade.name or nil,
+                job       = d.job and d.job.name or nil,
+            }
+        end
+    elseif ps and ps.getIdentifier then
+        local name = (ps.getPlayerName and ps.getPlayerName(src)) or GetPlayerName(src) or 'Unknown'
+        return {
+            citizenid = ps.getIdentifier(src),
+            name      = name,
+            callsign  = ps.getMetadata and ps.getMetadata(src, 'callsign') or nil,
+            rank      = ps.getJobGradeName and ps.getJobGradeName(src) or nil,
+            job       = ps.getJobName and ps.getJobName(src) or nil,
+        }
+    end
+    return { name = GetPlayerName(src) or ('Player #' .. src) }
+end
+
+-- Resolve a citizenid -> "Firstname Lastname" without scanning every online
+-- player. GetPlayerByCitizenId is a direct lookup on QBCore.
+local function getNameByCitizenId(citizenId)
+    local QBCore = getQBCore()
+    if QBCore and QBCore.Functions.GetPlayerByCitizenId then
+        local p = QBCore.Functions.GetPlayerByCitizenId(citizenId)
+        if p and p.PlayerData and p.PlayerData.charinfo then
+            return p.PlayerData.charinfo.firstname .. ' ' .. p.PlayerData.charinfo.lastname
+        end
+    end
+    return citizenId
+end
+
+local function auditPatrol(src, action, patrolId, extra)
+    if not ps.auditLog then return end
+    local officer = getOfficerInfo(src)
+    local data = {
+        officer_name     = officer.name,
+        officer_callsign = officer.callsign,
+        officer_rank     = officer.rank,
+        officer_id       = officer.citizenid,
+    }
+    if extra then
+        for k, v in pairs(extra) do data[k] = v end
+    end
+    ps.auditLog(src, action, 'mdt_patrol', patrolId or 'none', data)
+end
+
+-- ─── DB ─────────────────────────────────────────────────────────────────────
+
+-- Immediate write. Used directly for structural changes; the debounced
+-- savePatrol() below funnels frequent membership writes through this.
+local function savePatrolNow(patrol)
     if not patrol then return end
     MySQL.insert(
-        "INSERT INTO mdt_patrols (id, name, color, member_ids, sort_order) VALUES (?, ?, ?, ?, ?) " ..
-        "ON DUPLICATE KEY UPDATE name = VALUES(name), color = VALUES(color), member_ids = VALUES(member_ids), sort_order = VALUES(sort_order)",
-        { patrol.id, patrol.name, patrol.color, json.encode(patrol.memberIds), patrol.sortOrder or 0 }
+        "INSERT INTO mdt_patrols (id, name, color, member_ids, sort_order, zone_points) VALUES (?, ?, ?, ?, ?, ?) " ..
+        "ON DUPLICATE KEY UPDATE name = VALUES(name), color = VALUES(color), " ..
+        "member_ids = VALUES(member_ids), sort_order = VALUES(sort_order), zone_points = VALUES(zone_points)",
+        {
+            patrol.id,
+            patrol.name,
+            patrol.color,
+            json.encode(patrol.memberIds),
+            patrol.sortOrder or 0,
+            patrol.zonePoints and json.encode(patrol.zonePoints) or nil,
+        }
     )
 end
 
+-- Debounced save: coalesces rapid writes for the same patrol into a single DB
+-- write after SAVE_DEBOUNCE_MS. Heavy assign/remove churn no longer hits the DB
+-- on every click. Always references the live patrol table, so the flush writes
+-- the latest state. delete cancels any pending save (see deletePatrol).
+local pendingSaves = {}     -- [id] = patrol
+local saveTimerArmed = false
+
+local function flushSaves()
+    saveTimerArmed = false
+    for id, patrol in pairs(pendingSaves) do
+        pendingSaves[id] = nil
+        savePatrolNow(patrol)
+    end
+end
+
+local function savePatrol(patrol)
+    if not patrol then return end
+    pendingSaves[patrol.id] = patrol
+    if not saveTimerArmed then
+        saveTimerArmed = true
+        SetTimeout(SAVE_DEBOUNCE_MS, flushSaves)
+    end
+end
+
 local function deletePatrolFromDB(id)
     MySQL.execute("DELETE FROM mdt_patrols WHERE id = ?", { id })
 end
@@ -44,11 +202,9 @@ local function saveOrder()
     end
 end
 
--- ─── Broadcast ────────────────────────────────────────────────────────────
+-- ─── Broadcast ──────────────────────────────────────────────────────────────
 
--- Sends patrols as sorted array instead of map,
--- so all clients see the same order
-local function broadcastPatrols(action, citizenid)
+local function doBroadcast(action, citizenid)
     local ordered = {}
     for _, id in ipairs(patrolOrder) do
         if patrols[id] then
@@ -58,15 +214,36 @@ local function broadcastPatrols(action, citizenid)
     TriggerClientEvent(resourceName .. ":client:syncPatrols", -1, ordered, action, citizenid)
 end
 
+-- Plain broadcasts (create/delete/rename/reorder/zone/disconnect) are coalesced
+-- to one per frame so a burst of mutations doesn't fan the full list out to
+-- every client multiple times. Action broadcasts (assigned/removed) carry a
+-- flash hint the NUI needs, so they go out immediately.
+local broadcastScheduled = false
+local function broadcastPatrols(action, citizenid)
+    if action then
+        doBroadcast(action, citizenid)
+        return
+    end
+    if broadcastScheduled then return end
+    broadcastScheduled = true
+    SetTimeout(0, function()
+        broadcastScheduled = false
+        doBroadcast()
+    end)
+end
+
 -- ─── Tracking ─────────────────────────────────────────────────────────────
 
+-- HEAVY: scans all on-duty police players + their vehicles. Do not call this
+-- per client request — it's wrapped by getTrackingSnapshot() which caches it.
 local function getAllTrackers()
     local vehicles = {}
     local bodycams = {}
     local seenVehicles = {}
+    local now = GetGameTimer()
 
-    if exports['qb-core'] then
-        local QBCore = exports['qb-core']:GetCoreObject()
+    local QBCore = getQBCore()
+    if QBCore then
         local players = QBCore.Functions.GetQBPlayers() or {}
 
         for _, player in pairs(players) do
@@ -79,27 +256,25 @@ local function getAllTrackers()
             if not ped or ped == 0 then goto continue end
 
             local coords = GetEntityCoords(ped)
+            local veh = GetVehiclePedIsIn(ped, false)
             bodycams[#bodycams + 1] = {
                 citizenid = data.citizenid,
-                name = data.charinfo.firstname .. ' ' .. data.charinfo.lastname,
-                callsign = data.metadata and data.metadata.callsign or nil,
-                rank = data.job.grade and data.job.grade.name or 'Officer',
-                coords = { x = coords.x, y = coords.y, z = coords.z },
-                heading = GetEntityHeading(ped),
+                name      = data.charinfo.firstname .. ' ' .. data.charinfo.lastname,
+                callsign  = data.metadata and data.metadata.callsign or nil,
+                rank      = data.job.grade and data.job.grade.name or 'Officer',
+                coords    = { x = coords.x, y = coords.y, z = coords.z },
+                heading   = GetEntityHeading(ped),
+                inVehicle = veh and veh ~= 0,
             }
 
-            local veh = GetVehiclePedIsIn(ped, false)
             if veh and veh ~= 0 and not seenVehicles[veh] then
                 seenVehicles[veh] = true
-                local vCoords = GetEntityCoords(veh)
-                local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
-                local vEntry = {
-                    plate = plate,
-                    coords = { x = vCoords.x, y = vCoords.y, z = vCoords.z },
-                    heading = GetEntityHeading(veh),
-                }
-                vehicles[#vehicles + 1] = vEntry
-                vehicleCache[plate] = vEntry
+                local vCoords  = GetEntityCoords(veh)
+                local vHeading = GetEntityHeading(veh)
+                local plate    = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+                local coordsTbl = { x = vCoords.x, y = vCoords.y, z = vCoords.z }
+                vehicles[#vehicles + 1] = { plate = plate, coords = coordsTbl, heading = vHeading }
+                vehicleCache[plate]     = { plate = plate, coords = coordsTbl, heading = vHeading, _ts = now }
             end
             ::continue::
         end
@@ -116,79 +291,107 @@ local function getAllTrackers()
             if not ped or ped == 0 then goto continue end
 
             local coords = GetEntityCoords(ped)
+            local veh = GetVehiclePedIsIn(ped, false)
             bodycams[#bodycams + 1] = {
                 citizenid = ps.getIdentifier and ps.getIdentifier(playerId) or nil,
-                name = (ps.getPlayerName and ps.getPlayerName(playerId)) or GetPlayerName(playerId) or 'Unknown',
-                callsign = ps.getMetadata and ps.getMetadata(playerId, 'callsign') or nil,
-                rank = ps.getJobGradeName and ps.getJobGradeName(playerId) or 'Officer',
-                coords = { x = coords.x, y = coords.y, z = coords.z },
-                heading = GetEntityHeading(ped),
+                name      = (ps.getPlayerName and ps.getPlayerName(playerId)) or GetPlayerName(playerId) or 'Unknown',
+                callsign  = ps.getMetadata and ps.getMetadata(playerId, 'callsign') or nil,
+                rank      = ps.getJobGradeName and ps.getJobGradeName(playerId) or 'Officer',
+                coords    = { x = coords.x, y = coords.y, z = coords.z },
+                heading   = GetEntityHeading(ped),
+                inVehicle = veh and veh ~= 0,
             }
 
-            local veh = GetVehiclePedIsIn(ped, false)
             if veh and veh ~= 0 and not seenVehicles[veh] then
                 seenVehicles[veh] = true
-                local vCoords = GetEntityCoords(veh)
-                local plate = GetVehicleNumberPlateText(veh):gsub('%s+', '')
-                local vEntry = {
-                    plate = plate,
-                    coords = { x = vCoords.x, y = vCoords.y, z = vCoords.z },
-                    heading = GetEntityHeading(veh),
-                }
-                vehicles[#vehicles + 1] = vEntry
-                vehicleCache[plate] = vEntry
+                local vCoords  = GetEntityCoords(veh)
+                local vHeading = GetEntityHeading(veh)
+                local plate    = GetVehicleNumberPlateText(veh):gsub('%s+', '')
+                local coordsTbl = { x = vCoords.x, y = vCoords.y, z = vCoords.z }
+                vehicles[#vehicles + 1] = { plate = plate, coords = coordsTbl, heading = vHeading }
+                vehicleCache[plate]     = { plate = plate, coords = coordsTbl, heading = vHeading, _ts = now }
             end
             ::continue::
         end
     end
 
-    -- Cached vehicles not currently driven by anyone
+    -- Merge in cached (parked / recently-left) police vehicles that weren't
+    -- seen live this pass. Stale entries are pruned here so ghost markers vanish
+    -- after VEHICLE_CACHE_TTL even if 'entityRemoved' never fires. These carry
+    -- `cached = true` so the NUI can render them dimmed ("last known position").
+    local seenPlates = {}
+    for _, v in ipairs(vehicles) do seenPlates[v.plate] = true end
     for plate, cacheData in pairs(vehicleCache) do
-        if not seenVehicles[cacheData._entity] then
-            local alreadyAdded = false
-            for _, v in pairs(vehicles) do
-                if v.plate == plate then alreadyAdded = true; break end
-            end
-            if not alreadyAdded then
-                vehicles[#vehicles + 1] = cacheData
-            end
+        if (now - (cacheData._ts or 0)) > VEHICLE_CACHE_TTL then
+            vehicleCache[plate] = nil
+        elseif not seenPlates[plate] then
+            vehicles[#vehicles + 1] = {
+                plate   = cacheData.plate,
+                coords  = cacheData.coords,
+                heading = cacheData.heading,
+                cached  = true,
+            }
+            seenPlates[plate] = true
         end
     end
 
     return vehicles, bodycams
 end
 
+-- Returns a shared, throttled snapshot. With N MDTs open the expensive scan
+-- runs at most once per TRACKING_CACHE_TTL instead of N times per poll cycle.
+local function getTrackingSnapshot()
+    local now = GetGameTimer()
+    if trackingCache.ts ~= 0 and (now - trackingCache.ts) < TRACKING_CACHE_TTL then
+        return trackingCache
+    end
+    local vehicles, bodycams = getAllTrackers()
+    trackingCache.vehicles = vehicles
+    trackingCache.bodycams = bodycams
+    trackingCache.ts = now
+    return trackingCache
+end
+
 ps.registerCallback(resourceName .. ':server:getTracking', function(source)
     if not CheckAuth(source) then
         return { vehicles = {}, bodycams = {} }
     end
-    local vehicles, bodycams = getAllTrackers()
-    return { vehicles = vehicles, bodycams = bodycams }
+    local snap = getTrackingSnapshot()
+    return { vehicles = snap.vehicles, bodycams = snap.bodycams }
 end)
 
 RegisterNetEvent(resourceName .. ':server:cacheVehicle', function(plate, coords, heading)
     local src = source
+    -- Defense in depth: only authorised, on-duty police may inject cache markers.
+    if not CheckAuth(src) then return end
     if type(plate) ~= 'string' or #plate == 0 or #plate > 8 then return end
     if type(coords) ~= 'table' or type(coords.x) ~= 'number' or type(coords.y) ~= 'number' or type(coords.z) ~= 'number' then return end
     if type(heading) ~= 'number' or heading < 0 or heading > 360 then return end
     if coords.x < -4000 or coords.x > 4000 or coords.y < -4000 or coords.y > 8000 then return end
 
-    local now = os.time()
-    if cacheVehicleCooldowns[src] and now - cacheVehicleCooldowns[src] < 5 then return end
-    cacheVehicleCooldowns[src] = now
+    local nowSec = os.time()
+    if cacheVehicleCooldowns[src] and nowSec - cacheVehicleCooldowns[src] < 5 then return end
+    cacheVehicleCooldowns[src] = nowSec
 
-    if exports['qb-core'] then
-        local QBCore = exports['qb-core']:GetCoreObject()
+    -- Per-framework duty/police check (QB path and ps/ESX path).
+    local QBCore = getQBCore()
+    if QBCore then
         local player = QBCore.Functions.GetPlayer(src)
         if not player then return end
         local job = player.PlayerData.job
         if not job or not job.onduty or not IsPoliceJob(job.name, job.type) then return end
+    elseif ps and ps.getJobName then
+        if not (ps.getJobDuty and ps.getJobDuty(src)) then return end
+        local jobName = ps.getJobName(src)
+        local jobType = ps.getJobType and ps.getJobType(src) or nil
+        if not IsPoliceJob(jobName, jobType) then return end
     end
 
     vehicleCache[plate] = {
         plate = plate,
         coords = { x = coords.x, y = coords.y, z = coords.z },
         heading = heading,
+        _ts = GetGameTimer(),
     }
 end)
 
@@ -216,8 +419,8 @@ end)
 -- ─── Patrols ──────────────────────────────────────────────────────────────
 
 ps.registerCallback(resourceName .. ":server:getPatrols", function(source)
-    if not CheckAuth(source) then return {} end
-    -- Return sorted array
+    local src = source
+    if not CheckAuth(src) then return {} end
     local ordered = {}
     for _, id in ipairs(patrolOrder) do
         if patrols[id] then
@@ -234,19 +437,30 @@ RegisterNetEvent(resourceName .. ":server:createPatrol", function(id, name, colo
     if patrols[id] then return end
 
     local sortOrder = #patrolOrder + 1
-    patrols[id] = { id = id, name = name, color = color, memberIds = {}, sortOrder = sortOrder }
+    patrols[id] = { id = id, name = name, color = color, memberIds = {}, zonePoints = nil, sortOrder = sortOrder }
     patrolOrder[#patrolOrder + 1] = id
     broadcastPatrols()
-    savePatrol(patrols[id])
+    savePatrolNow(patrols[id]) -- structural change → write immediately
+    dbg(('patrol created: "%s" (%s)'):format(name, id))
+    auditPatrol(src, 'patrol_created', id, {
+        patrol_name  = name,
+        patrol_color = color,
+        action_label = ('Created patrol "%s"'):format(name),
+    })
 end)
 
 RegisterNetEvent(resourceName .. ":server:deletePatrol", function(id)
     local src = source
     if not CheckAuth(src) then return end
     if not isValidPatrolId(id) then return end
+    if not patrols[id] then return end
 
+    -- Capture the name BEFORE removing the entry (previous code read it after
+    -- nil-ing patrols[id], so the audit log always showed the raw id).
+    local deletedName = patrols[id].name or id
+
+    pendingSaves[id] = nil -- cancel any debounced save so it can't re-insert the row
     patrols[id] = nil
-    -- Remove from order list
     for i = #patrolOrder, 1, -1 do
         if patrolOrder[i] == id then
             table.remove(patrolOrder, i)
@@ -256,6 +470,11 @@ RegisterNetEvent(resourceName .. ":server:deletePatrol", function(id)
     deletePatrolFromDB(id)
     saveOrder()
     broadcastPatrols()
+    dbg(('patrol deleted: "%s" (%s)'):format(deletedName, id))
+    auditPatrol(src, 'patrol_deleted', id, {
+        patrol_name  = deletedName,
+        action_label = ('Deleted patrol "%s"'):format(deletedName),
+    })
 end)
 
 RegisterNetEvent(resourceName .. ":server:renamePatrol", function(id, newName)
@@ -264,18 +483,55 @@ RegisterNetEvent(resourceName .. ":server:renamePatrol", function(id, newName)
     if not isValidPatrolId(id) or not isValidName(newName) then return end
     if not patrols[id] then return end
 
+    local oldName = patrols[id].name
     patrols[id].name = newName
     broadcastPatrols()
-    savePatrol(patrols[id])
+    savePatrolNow(patrols[id]) -- structural change → write immediately
+    dbg(('patrol renamed: "%s" -> "%s"'):format(oldName, newName))
+    auditPatrol(src, 'patrol_renamed', id, {
+        patrol_old_name = oldName,
+        patrol_new_name = newName,
+        action_label    = ('Renamed patrol "%s" → "%s"'):format(oldName, newName),
+    })
+end)
+
+-- ─── Zone Points ────────────────────────────────────────────────────────────
+-- Client sends updated zone_points for a patrol after drawing on the map.
+-- points = array of { x, y } in GTA world coordinates, or nil to clear zone.
+RegisterNetEvent(resourceName .. ":server:setPatrolZone", function(id, points)
+    local src = source
+    if not CheckAuth(src) then return end
+    if not isValidPatrolId(id) then return end
+    if not patrols[id] then return end
+    if not isValidZonePoints(points) then return end
+
+    -- nil clears the zone; fewer than 3 points also clears it
+    local hadZone = patrols[id].zonePoints ~= nil
+    patrols[id].zonePoints = (points and #points >= 3) and points or nil
+    broadcastPatrols()
+    savePatrolNow(patrols[id]) -- zone data is precious → write immediately
+    local zoneAction = patrols[id].zonePoints
+        and (hadZone and 'patrol_zone_updated' or 'patrol_zone_created')
+        or  'patrol_zone_cleared'
+    local pts = patrols[id].zonePoints and #patrols[id].zonePoints or 0
+    local label = patrols[id].zonePoints
+        and ('Drew zone for patrol "%s" (%d points)'):format(patrols[id].name, pts)
+        or  ('Cleared zone for patrol "%s"'):format(patrols[id].name)
+    dbg(label)
+    auditPatrol(src, zoneAction, id, {
+        patrol_name  = patrols[id].name,
+        point_count  = pts,
+        action_label = label,
+    })
 end)
 
--- New order from client – ids is an array of patrol IDs in the desired order
+-- ─── Order / Assign ───────────────────────────────────────────────────────
+
 RegisterNetEvent(resourceName .. ":server:reorderPatrols", function(ids)
     local src = source
     if not CheckAuth(src) then return end
     if type(ids) ~= "table" then return end
 
-    -- Validate: only known IDs, no duplicates
     local seen = {}
     local newOrder = {}
     for _, id in ipairs(ids) do
@@ -284,7 +540,6 @@ RegisterNetEvent(resourceName .. ":server:reorderPatrols", function(ids)
             newOrder[#newOrder + 1] = id
         end
     end
-    -- Append any missing IDs
     for _, id in ipairs(patrolOrder) do
         if not seen[id] then
             newOrder[#newOrder + 1] = id
@@ -294,6 +549,17 @@ RegisterNetEvent(resourceName .. ":server:reorderPatrols", function(ids)
     patrolOrder = newOrder
     saveOrder()
     broadcastPatrols()
+    local nameOrder = {}
+    for _, pid in ipairs(newOrder) do
+        nameOrder[#nameOrder + 1] = patrols[pid] and patrols[pid].name or pid
+    end
+    dbg('patrols reordered: ' .. table.concat(nameOrder, ' -> '))
+    -- NOTE: previous code passed `extra` as a 5th arg (after a nil), so it was
+    -- silently dropped. auditPatrol is (src, action, patrolId, extra).
+    auditPatrol(src, 'patrols_reordered', 'order', {
+        new_order    = table.concat(nameOrder, ' → '),
+        action_label = 'Reordered patrols: ' .. table.concat(nameOrder, ' → '),
+    })
 end)
 
 RegisterNetEvent(resourceName .. ":server:assignOfficer", function(patrolId, citizenId)
@@ -311,7 +577,16 @@ RegisterNetEvent(resourceName .. ":server:assignOfficer", function(patrolId, cit
     end
     table.insert(patrols[patrolId].memberIds, citizenId)
     broadcastPatrols("assigned", citizenId)
-    savePatrol(patrols[patrolId])
+    savePatrol(patrols[patrolId]) -- frequent mutation → debounced
+
+    local assignedName = getNameByCitizenId(citizenId)
+    dbg(('assigned %s to "%s"'):format(assignedName, patrols[patrolId].name))
+    auditPatrol(src, 'patrol_officer_assigned', patrolId, {
+        patrol_name   = patrols[patrolId].name,
+        assigned_name = assignedName,
+        assigned_id   = citizenId,
+        action_label  = ('Assigned %s to patrol "%s"'):format(assignedName, patrols[patrolId].name),
+    })
 end)
 
 RegisterNetEvent(resourceName .. ":server:removeFromPatrol", function(citizenId)
@@ -319,53 +594,136 @@ RegisterNetEvent(resourceName .. ":server:removeFromPatrol", function(citizenId)
     if not CheckAuth(src) then return end
     if not isValidCitizenId(citizenId) then return end
 
+    -- Find which patrol the officer belongs to BEFORE removal (for the audit log)
+    local removedFromPatrol = 'unknown'
+    for _, patrol in pairs(patrols) do
+        for _, mid in ipairs(patrol.memberIds) do
+            if mid == citizenId then removedFromPatrol = patrol.name; break end
+        end
+    end
     for _, patrol in pairs(patrols) do
         for i = #patrol.memberIds, 1, -1 do
             if patrol.memberIds[i] == citizenId then
                 table.remove(patrol.memberIds, i)
-                savePatrol(patrol)
+                savePatrol(patrol) -- frequent mutation → debounced
             end
         end
     end
     broadcastPatrols("removed", citizenId)
+    -- Only audit if the officer was actually found in a patrol
+    if removedFromPatrol ~= 'unknown' then
+        dbg(('removed %s from "%s"'):format(citizenId, removedFromPatrol))
+        auditPatrol(src, 'patrol_officer_removed', citizenId, {
+            removed_id   = citizenId,
+            removed_from = removedFromPatrol,
+            action_label = ('Removed officer from patrol "%s"'):format(removedFromPatrol),
+        })
+    end
 end)
 
 AddEventHandler("playerDropped", function()
-    cacheVehicleCooldowns[source] = nil
+    local src = source
+    cacheVehicleCooldowns[src] = nil
 
-    if exports["qb-core"] then
-        local QBCore = exports["qb-core"]:GetCoreObject()
-        local player = QBCore.Functions.GetPlayer(source)
+    local citizenId = nil
+    local officerName = GetPlayerName(src) or ('Player #' .. src)
+
+    local QBCore = getQBCore()
+    if QBCore then
+        local player = QBCore.Functions.GetPlayer(src)
         if player then
-            local citizenId = player.PlayerData.citizenid
-            for _, patrol in pairs(patrols) do
-                for i = #patrol.memberIds, 1, -1 do
-                    if patrol.memberIds[i] == citizenId then
-                        table.remove(patrol.memberIds, i)
-                        savePatrol(patrol)
-                    end
-                end
+            citizenId  = player.PlayerData.citizenid
+            officerName = player.PlayerData.charinfo.firstname .. ' ' .. player.PlayerData.charinfo.lastname
+        end
+    elseif ps and ps.getIdentifier then
+        citizenId   = ps.getIdentifier(src)
+        officerName = (ps.getPlayerName and ps.getPlayerName(src)) or officerName
+    end
+
+    if not citizenId then return end
+
+    -- Find patrol membership BEFORE removal so we can log it
+    local removedFromPatrol = nil
+    local removedFromId     = nil
+    for pid, patrol in pairs(patrols) do
+        for _, mid in ipairs(patrol.memberIds) do
+            if mid == citizenId then
+                removedFromPatrol = patrol.name
+                removedFromId     = pid
+                break
+            end
+        end
+        if removedFromPatrol then break end
+    end
+
+    -- Remove from patrol
+    for _, patrol in pairs(patrols) do
+        for i = #patrol.memberIds, 1, -1 do
+            if patrol.memberIds[i] == citizenId then
+                table.remove(patrol.memberIds, i)
+                savePatrol(patrol) -- frequent mutation → debounced
             end
-            broadcastPatrols()
         end
     end
+
+    broadcastPatrols()
+
+    -- Audit log only if they were actually in a patrol
+    if removedFromPatrol and ps.auditLog then
+        dbg(('%s disconnected from patrol "%s"'):format(officerName, removedFromPatrol))
+        ps.auditLog(src, 'patrol_officer_removed', removedFromId or citizenId, {
+            officer_name = officerName,
+            officer_id   = citizenId,
+            removed_from = removedFromPatrol,
+            action_label = ('%s left patrol "%s" (disconnected)'):format(officerName, removedFromPatrol),
+        })
+    end
 end)
 
 AddEventHandler("onResourceStart", function(res)
     if res ~= resourceName then return end
-    local rows = MySQL.query.await("SELECT * FROM mdt_patrols ORDER BY sort_order ASC")
+
+    -- Wrapped in pcall so a missing/broken `mdt_patrols` table produces a clear
+    -- error for the next dev instead of a hard crash on boot.
+    local ok, rows = pcall(function()
+        return MySQL.query.await("SELECT * FROM mdt_patrols ORDER BY sort_order ASC")
+    end)
+    if not ok or type(rows) ~= "table" then
+        print(('^1[MDT]^7 Failed to load patrols. Is the `mdt_patrols` table installed? Error: %s')
+            :format(tostring(rows)))
+        return
+    end
+
     patrolOrder = {}
     for _, row in ipairs(rows) do
+        local zonePoints = nil
+        if row.zone_points and row.zone_points ~= "" and row.zone_points ~= "null" then
+            local okDecode, decoded = pcall(json.decode, row.zone_points)
+            if okDecode and type(decoded) == "table" then
+                zonePoints = decoded
+            else
+                print(('^3[MDT]^7 Patrol "%s" has unparseable zone_points; ignoring.'):format(row.id))
+            end
+        end
         patrols[row.id] = {
             id = row.id,
             name = row.name,
             color = row.color,
             memberIds = {},
+            zonePoints = zonePoints,
             sortOrder = row.sort_order or 0,
         }
         patrolOrder[#patrolOrder + 1] = row.id
     end
-    -- Clear members in DB as well
+    -- Members reset on restart (officers need to be reassigned after a restart)
     MySQL.execute("UPDATE mdt_patrols SET member_ids = '[]'", {})
-    print("[MDT] " .. #rows .. " patrols loaded.")
+    ps.debug(('^2[MDT]^7 Loaded %d patrol(s).')
+        :format(#rows))
+end)
+
+-- Flush any pending debounced saves before the resource stops so nothing queued
+-- in the last SAVE_DEBOUNCE_MS window is lost on restart.
+AddEventHandler("onResourceStop", function(res)
+    if res ~= resourceName then return end
+    flushSaves()
 end)
\ No newline at end of file

From bd6431d25e282e5975ae1a06089704fc5ed3db2f Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:44:42 +0200
Subject: [PATCH 131/144] new zone feature

---
 client/backend/tracking.lua | 277 +++++++++++++++++++++++++++++++++++-
 1 file changed, 272 insertions(+), 5 deletions(-)

diff --git a/client/backend/tracking.lua b/client/backend/tracking.lua
index fc9d2a90..06407428 100644
--- a/client/backend/tracking.lua
+++ b/client/backend/tracking.lua
@@ -1,6 +1,32 @@
--- client_patrols.lua
+-- ----------------------------------------------------------------------------
+--  Responsibilities:
+--    * Forwards patrol/tracking data between server and the map NUI.
+--    * Maintains one ox_lib PolyZone per patrol and fires enter/exit
+--      notifications, but ONLY for the patrol the local player belongs to.
+--    * Zones live independently of the MDT: they are built on spawn and on
+--      resource start, so notifications work without ever opening the MDT.
+--
+--  Performance notes for future devs:
+--    * syncPatrols is broadcast to ALL clients on EVERY patrol mutation
+--      (create/delete/assign/remove/rename/reorder/zone). syncZones() therefore
+--      diffs each zone's geometry signature and only rebuilds zones whose points
+--      actually changed — a rename/reorder/assign no longer tears down and
+--      recreates every PolyZone on every client.
+--    * Patrol names shown in zone notifications are read live from
+--      zonePatrolNames, so a rename never forces a zone rebuild.
+--
+--  Set MDT_DEBUG = true for verbose console logging while developing.
+-- ============================================================================
+
 local resourceName = tostring(GetCurrentResourceName())
 
+-- ─── Tunables ───────────────────────────────────────────────────────────────
+local MDT_DEBUG = false -- verbose dev logging; KEEP FALSE on production
+
+local function dbg(...)
+    if MDT_DEBUG then print('[MDT]', ...) end
+end
+
 -- UI state held in Lua client (survives MDT open/close)
 local mapUiState = {
     sidebarOpen  = true,
@@ -8,22 +34,204 @@ local mapUiState = {
     patrolsOpen  = true,
 }
 
+-- ─── Patrol zone notification preference ─────────────────────────────────────
+-- Read from localStorage via a NUI message on resource start.
+-- Defaults to true (enabled) until the NUI reports otherwise.
+local patrolZoneNotificationsEnabled = true
+
+AddEventHandler('onClientResourceStart', function(res)
+    if res ~= resourceName then return end
+    -- Ask the NUI to send us the stored preference
+    SendNUIMessage({ type = 'requestPatrolZonePref' })
+end)
+
+-- The NUI page reads localStorage and sends this back
+RegisterNUICallback('patrolZonePref', function(data, cb)
+    if type(data.enabled) == 'boolean' then
+        patrolZoneNotificationsEnabled = data.enabled
+    end
+    cb({})
+end)
+
+-- ─── Notification helper (works with QBCore, ox_lib, ps-ui) ─────────────────
+
+local function mdtNotify(title, description, notifyType, duration)
+    -- Respect the player's preference stored in localStorage via NUI
+    if not patrolZoneNotificationsEnabled then return end
+    duration = duration or 4000
+    if exports['ox_lib'] then
+        lib.notify({ title = title, description = description, type = notifyType, duration = duration })
+    elseif exports['qb-core'] then
+        exports['qb-core']:GetCoreObject().Functions.Notify(('[%s] %s'):format(title, description), notifyType, duration)
+    elseif exports['ps-ui'] then
+        exports['ps-ui']:Notify({ text = ('[%s] %s'):format(title, description), type = notifyType, length = duration })
+    else
+        BeginTextCommandThefeedPost('STRING')
+        AddTextComponentSubstringPlayerName(('[%s] %s'):format(title, description))
+        EndTextCommandThefeedPostTick()
+    end
+end
+
+-- ─── Patrol Zone tracking ──────────────────────────────────────────────────
+-- Keeps one PolyZone per patrol id. Zones are (re)built only when their
+-- geometry changes (see syncZones).
+
+local activeZones     = {}  -- [patrolId] = ox_lib PolyZone object
+local zoneSignatures  = {}  -- [patrolId] = geometry signature (string)
+local zonePatrolNames = {}  -- [patrolId] = latest patrol name (read live by callbacks)
+local myPatrolId      = nil -- patrol the local player currently belongs to
+
+local function getCitizenId()
+    if exports['qb-core'] then
+        return exports['qb-core']:GetCoreObject().Functions.GetPlayerData().citizenid
+    elseif ps and ps.getIdentifier then
+        return ps.getIdentifier()
+    end
+    return nil
+end
+
+local function destroyZone(patrolId)
+    if activeZones[patrolId] then
+        activeZones[patrolId]:remove()
+        activeZones[patrolId] = nil
+    end
+end
+
+local function destroyAllZones()
+    for id in pairs(activeZones) do
+        destroyZone(id)
+    end
+    zoneSignatures  = {}
+    zonePatrolNames = {}
+end
+
+-- A cheap, stable string fingerprint of a zone's points. Identical geometry =>
+-- identical signature => no rebuild needed.
+local function pointsSignature(points)
+    if not points then return "" end
+    local parts = {}
+    for i = 1, #points do
+        parts[i] = string.format("%.1f,%.1f", points[i].x or 0.0, points[i].y or 0.0)
+    end
+    return table.concat(parts, ";")
+end
+
+-- Convert GTA world {x,y} array → ox_lib poly-zone points (vector3; z required,
+-- but ignored by lib.zones.poly).
+local function toVector3List(points)
+    local vecs = {}
+    for i = 1, #points do
+        vecs[i] = vector3(points[i].x, points[i].y, 0.0)
+    end
+    return vecs
+end
+
+local function createZoneForPatrol(patrol)
+    destroyZone(patrol.id)
+
+    local points = patrol.zonePoints
+    if not points or #points < 3 then return end
+
+    local vecs = toVector3List(points)
+    local pid  = patrol.id
+
+    -- Suppress the initial onEnter that fires when the zone is first created
+    -- (happens on spawn, MDT open, resource restart)
+    local suppressInitial = true
+    SetTimeout(2500, function() suppressInitial = false end)
+
+    local zone = lib.zones.poly({
+        points    = vecs,
+        thickness = 1600,
+        debug     = false,
+        onEnter   = function()
+            if pid ~= myPatrolId then return end
+            if suppressInitial then return end
+            mdtNotify(zonePatrolNames[pid] or 'Patrol', 'entered Zone', 'success', 3000)
+        end,
+        onExit    = function()
+            if pid ~= myPatrolId then return end
+            mdtNotify(zonePatrolNames[pid] or 'Patrol', 'left Zone', 'error', 5000)
+        end,
+    })
+
+    activeZones[pid] = zone
+end
+
+-- Rebuild only the zones whose geometry changed, and figure out which patrol the
+-- local player is in. Cheap to call on every syncPatrols broadcast.
+local function syncZones(patrols)
+    local citizenId = getCitizenId()
+    myPatrolId = nil
+
+    -- Destroy zones for patrols that no longer exist
+    local incoming = {}
+    for _, p in ipairs(patrols) do incoming[p.id] = true end
+    for id in pairs(activeZones) do
+        if not incoming[id] then
+            destroyZone(id)
+            zoneSignatures[id]  = nil
+            zonePatrolNames[id] = nil
+        end
+    end
+
+    for _, patrol in ipairs(patrols) do
+        -- Keep the name fresh so renames update notifications without a rebuild
+        zonePatrolNames[patrol.id] = patrol.name
+
+        -- Resolve local membership
+        if citizenId then
+            for _, mid in ipairs(patrol.memberIds) do
+                if mid == citizenId then
+                    myPatrolId = patrol.id
+                    break
+                end
+            end
+        end
+
+        local hasZone = patrol.zonePoints and #patrol.zonePoints >= 3
+        if hasZone then
+            local sig = pointsSignature(patrol.zonePoints)
+            if zoneSignatures[patrol.id] ~= sig then
+                createZoneForPatrol(patrol)
+                zoneSignatures[patrol.id] = sig
+                dbg(('rebuilt zone for "%s" (%d pts)'):format(patrol.name, #patrol.zonePoints))
+            end
+        else
+            if activeZones[patrol.id] then destroyZone(patrol.id) end
+            zoneSignatures[patrol.id] = nil
+        end
+    end
+end
+
 -- ─── Server → NUI ─────────────────────────────────────────────────────────
 
 RegisterNetEvent(resourceName .. ":client:syncPatrols", function(patrols, action, citizenid)
     SendNUIMessage({ type = "syncPatrols", data = patrols, action = action, citizenid = citizenid })
+
+    -- Rebuild PolyZones whenever patrol data changes (diffed inside syncZones)
+    if type(patrols) == "table" then
+        syncZones(patrols)
+    end
 end)
 
+-- Called from client.lua after setVisible(true) — send citizenId so map centers on self
+function SendMapCitizenId()
+    local cid = getCitizenId()
+    if cid then
+        SendNUIMessage({ type = 'setLocalCitizenId', data = { citizenid = cid } })
+    end
+end
+
 RegisterNetEvent(resourceName .. ':client:checkVehicleClass', function(netId, plate, coords, heading)
     local veh = NetworkGetEntityFromNetworkId(netId)
     if not veh or veh == 0 then return end
-    if GetVehicleClass(veh) ~= 18 then return end
+    if GetVehicleClass(veh) ~= 18 then return end -- 18 = Emergency
     TriggerServerEvent(resourceName .. ':server:cacheVehicle', plate, coords, heading)
 end)
 
 -- ─── UI State ─────────────────────────────────────────────────────────────
 
--- Call this in client.lua after SendNUI('setVisible', { visible = true })
 function SendMapUiState()
     SendNUIMessage({ type = "mapUiState", data = mapUiState })
 end
@@ -37,7 +245,6 @@ end)
 
 -- ─── Tracking ─────────────────────────────────────────────────────────────
 
--- Register only once – always call cb() to prevent timeout
 RegisterNUICallback("getTracking", function(_, cb)
     if not MDTOpen then
         cb({ success = false, data = { vehicles = {}, bodycams = {} } })
@@ -56,7 +263,12 @@ end)
 
 RegisterNUICallback("getPatrols", function(_, cb)
     local result = ps.callback(resourceName .. ":server:getPatrols")
-    cb({ success = true, data = result or {} })
+    local patrols = result or {}
+    cb({ success = true, data = patrols })
+    -- Also sync zones immediately on load
+    if type(patrols) == "table" then
+        syncZones(patrols)
+    end
 end)
 
 RegisterNUICallback("createPatrol", function(data, cb)
@@ -106,4 +318,59 @@ RegisterNUICallback("removeFromPatrol", function(data, cb)
     if type(data.citizenId) ~= "string" then cb({ success = false }) return end
     TriggerServerEvent(resourceName .. ":server:removeFromPatrol", data.citizenId)
     cb({ success = true })
+end)
+
+-- ─── Cleanup ──────────────────────────────────────────────────────────────
+
+AddEventHandler("onResourceStop", function(res)
+    if res ~= resourceName then return end
+    destroyAllZones()
+end)
+
+-- ─── Auto-init zones on spawn (independent of MDT) ────────────────────────
+-- Loads patrol zone data from the server as soon as the player spawns, so zone
+-- entry/exit notifications work without ever opening the MDT.
+
+local function initZonesFromServer()
+    -- Send citizenId so the map can center on the officer's own position
+    local cid = getCitizenId()
+    if cid then
+        SendNUIMessage({ type = 'setLocalCitizenId', data = { citizenid = cid } })
+    end
+
+    local result = ps.callback(resourceName .. ":server:getPatrols")
+    if type(result) == "table" then
+        syncZones(result)
+    end
+end
+
+-- Fires when the player first spawns
+RegisterNetEvent('QBCore:Client:OnPlayerLoaded', function()
+    -- Small delay so the framework has finished setting up the player
+    SetTimeout(2000, initZonesFromServer)
+end)
+
+-- ─── Zone Drawing ─────────────────────────────────────────────────────────
+-- Called by the Svelte map after the user finishes drawing a zone polygon.
+-- data.id     = patrol id (string)
+-- data.points = array of { x, y } in GTA world coordinates, or nil to clear
+RegisterNUICallback("setPatrolZone", function(data, cb)
+    if not MDTOpen then cb({ success = false }) return end
+    if type(data.id) ~= "string" then cb({ success = false }) return end
+
+    -- Validate points on client before sending to server
+    local points = data.points
+    if points ~= nil then
+        if type(points) ~= "table" or #points < 3 then
+            cb({ success = false, error = "need_3_points" }) return
+        end
+        for _, pt in ipairs(points) do
+            if type(pt) ~= "table" or type(pt.x) ~= "number" or type(pt.y) ~= "number" then
+                cb({ success = false, error = "invalid_point" }) return
+            end
+        end
+    end
+
+    TriggerServerEvent(resourceName .. ":server:setPatrolZone", data.id, points)
+    cb({ success = true })
 end)
\ No newline at end of file

From af8ca49f66d99a104a09351e8d315f0e5e23768a Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:45:15 +0200
Subject: [PATCH 132/144] new zone feature

---
 web/src/pages/Map.svelte      | 1513 ++++++++++++++++++---------------
 web/src/pages/Settings.svelte |  174 ++--
 2 files changed, 912 insertions(+), 775 deletions(-)

diff --git a/web/src/pages/Map.svelte b/web/src/pages/Map.svelte
index 6da8c9fb..84b9c279 100644
--- a/web/src/pages/Map.svelte
+++ b/web/src/pages/Map.svelte
@@ -13,12 +13,10 @@
     }
     let { authService }: Props = $props();
 
-    // Default true = everyone can use it unless authService explicitly denies
     let canViewPatrols   = $derived(authService ? (authService.hasPermission("map_patrols_view")   ?? true) : true);
     let canManagePatrols = $derived(authService ? (authService.hasPermission("map_patrols_manage") ?? true) : true);
     let canEditPatrols   = $derived(authService ? (authService.hasPermission("map_patrols_edit")   ?? true) : true);
 
-    // ─── Map state ───────────────────────────────────────────────────────────
     let mapContainer: HTMLDivElement | null = null;
     let map: L.Map | null = null;
     let mapInitialized = false;
@@ -28,16 +26,16 @@
     let showVehicles = $state(localStorage.getItem("mdt_map_vehicles") !== "false");
     let showBodycams = $state(localStorage.getItem("mdt_map_bodycams") !== "false");
     let showPatrols  = $state(localStorage.getItem("mdt_map_patrols_layer") !== "false");
+    let showZones    = $state(localStorage.getItem("mdt_map_zones") !== "false");
     let iconStyle = $state<"dot" | "badge">(
         (localStorage.getItem("mdt_map_icon_style") as "dot" | "badge") ?? "dot"
     );
 
     let vehicleLayer = L.layerGroup();
     let bodycamLayer = L.layerGroup();
-    let patrolLayer = L.layerGroup();
+    let patrolLayer  = L.layerGroup();
+    let zoneLayer    = L.layerGroup();
 
-    // ─── Sidebar state ────────────────────────────────────────────────────────
-    // localStorage as default – overridden by Lua client on open
     let sidebarOpen  = $state(localStorage.getItem("mdt_map_sidebar")   !== "false");
     let officersOpen = $state(localStorage.getItem("mdt_map_officers")  !== "false");
     let patrolsOpen  = $state(localStorage.getItem("mdt_map_patrols")   !== "false");
@@ -45,7 +43,6 @@
     function toggleSidebar() {
         sidebarOpen = !sidebarOpen;
         localStorage.setItem("mdt_map_sidebar", String(sidebarOpen));
-        // Also save in Lua client (survives resource restart)
         fetchNui(NUI_EVENTS.MAP.SAVE_UI_STATE, { key: "sidebarOpen", value: sidebarOpen }, {}).catch(() => {});
     }
     function toggleOfficers() {
@@ -59,12 +56,12 @@
         fetchNui(NUI_EVENTS.MAP.SAVE_UI_STATE, { key: "patrolsOpen", value: patrolsOpen }, {}).catch(() => {});
     }
 
-    // Sidebar-Breite: 260px pro offenem Panel + 36px pro zugeklapptem + 1px Divider
     let sidebarWidth = $derived(
         (officersOpen ? 260 : 36) + 1 + (patrolsOpen ? 260 : 36)
     );
 
-    // ─── Patrol types ─────────────────────────────────────────────────────────
+    type GtaPoint = { x: number; y: number };
+
     type Bodycam = {
         citizenid: string;
         name: string;
@@ -72,6 +69,7 @@
         rank?: string;
         coords: { x: number; y: number; z: number };
         heading?: number;
+        inVehicle?: boolean;
     };
 
     type Patrol = {
@@ -79,19 +77,147 @@
         name: string;
         color: string;
         memberIds: string[];
+        zonePoints?: GtaPoint[] | null;
     };
 
-    // ─── Officers & Patrols ───────────────────────────────────────────────────
-    let officers = $state<Bodycam[]>([]);
-    let patrols = $state<Patrol[]>([]);
+    let officers        = $state<Bodycam[]>([]);
+    let patrols         = $state<Patrol[]>([]);
+    let officerSearch   = $state("");
+
+    // Search-filtered officer lists (recomputed when officers/patrols/search change)
+    let unassignedFiltered   = $derived(filterOfficers(unassignedOfficers()));
+    let totalVisibleOfficers = $derived(filterOfficers(officers).length);
+
+    // One-time centering flag — pan to own position on first data load
+    let centeredOnSelf = false;
+    // Own citizenId sent from Lua on open
+    let ownCitizenId: string | null = null;
+
+    // Officer highlight state
+    let selectedOfficerId = $state<string | null>(null);
+    let highlightMarker: L.Marker | null = null;
+    let highlightPopup:  L.Popup  | null = null;
+
+    function selectOfficer(citizenid: string) {
+        // Toggle off if already selected
+        if (selectedOfficerId === citizenid) {
+            clearOfficerHighlight();
+            return;
+        }
+        selectedOfficerId = citizenid;
+        highlightOfficerOnMap(citizenid);
+    }
+
+    function clearOfficerHighlight() {
+        selectedOfficerId = null;
+        highlightMarker?.remove(); highlightMarker = null;
+        highlightPopup?.remove();  highlightPopup  = null;
+    }
+
+    // Build the full popup HTML for an officer
+    function buildOfficerPopupHtml(officer: Bodycam): string {
+        const patrol   = getOfficerPatrol(officer.citizenid);
+        const color    = patrol?.color ?? "#38bdf8";
+
+        // Heading → compass direction label
+        const headingLabel = (h: number) => {
+            const dirs = ["N","NE","E","SE","S","SW","W","NW","N"];
+            return dirs[Math.round(((360 - h) % 360) / 45)];
+        };
+        const heading  = officer.heading != null
+            ? `<span class="op-heading">
+                   <svg width="10" height="10" viewBox="0 0 12 12" style="transform:rotate(${360 - officer.heading}deg);display:inline-block">
+                       <polygon points="6,1 9,11 6,8 3,11" fill="currentColor"/>
+                   </svg>
+                   ${headingLabel(officer.heading)}
+               </span>`
+            : "";
+
+        // Use server-provided flag — no coordinate guessing, no flicker
+        const inVehicle = officer.inVehicle ?? false;
+        const vehicleBadge = inVehicle
+            ? `<span class="op-badge op-badge--vehicle">🚔 In Vehicle</span>`
+            : `<span class="op-badge op-badge--foot">🦶 On Foot</span>`;
+
+        const patrolHtml = patrol
+            ? `<span class="op-patrol" style="color:${patrol.color}">● ${patrol.name}</span>`
+            : `<span class="op-patrol op-patrol--none">● Unassigned</span>`;
+
+        return `
+            <div class="op-wrap">
+                <div class="op-header" style="--op-color:${color}">
+                    <div class="op-name">${officer.name}</div>
+                    ${officer.callsign ? `<div class="op-callsign-badge">${officer.callsign}</div>` : ""}
+                </div>
+                <div class="op-body">
+                    ${officer.rank ? `<div class="op-row"><span class="op-label">Rank</span><span class="op-value">${officer.rank}</span></div>` : ""}
+                    <div class="op-row"><span class="op-label">Patrol</span>${patrolHtml}</div>
+                    <div class="op-row"><span class="op-label">Status</span>${vehicleBadge}</div>
+                    <div class="op-row op-row--coords">
+                        <span class="op-label">Position</span>
+                        <span class="op-value">${officer.coords.x.toFixed(0)}, ${officer.coords.y.toFixed(0)}</span>
+                        ${heading}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    function highlightOfficerOnMap(citizenid: string) {
+        if (!map) return;
+        const officer = officers.find(o => o.citizenid === citizenid);
+        if (!officer) return;
+
+        const patrol  = getOfficerPatrol(citizenid);
+        const color   = patrol?.color ?? "#38bdf8";
+        const latlng  = toMapLatLng(officer.coords) as L.LatLng;
+
+        if (highlightMarker) {
+            // Reposition existing marker
+            highlightMarker.setLatLng(latlng);
+        } else {
+            // First time: create marker
+            highlightMarker = L.marker(latlng, {
+                icon: L.divIcon({
+                    className: "",
+                    html: `<div class="officer-highlight-ring" style="--ring-color:${color}"></div>`,
+                    iconSize:   [40, 40],
+                    iconAnchor: [20, 20],
+                }),
+                zIndexOffset: 500,
+                interactive: false,
+            }).addTo(map);
+
+            // Create popup
+            highlightPopup = L.popup({
+                closeButton:  true,
+                autoClose:    false,
+                closeOnClick: false,
+                className:    "officer-popup",
+                offset:       [0, -8],
+            })
+            .setLatLng(latlng)
+            .setContent(buildOfficerPopupHtml(officer))
+            .addTo(map);
+
+            highlightPopup.on("remove", () => { clearOfficerHighlight(); });
+
+            // Pan only on first selection
+            map.panTo(latlng, { animate: true, duration: 0.5 });
+        }
+
+        // Always update popup: position + full content (so all live data refreshes)
+        if (highlightPopup) {
+            highlightPopup.setLatLng(latlng);
+            highlightPopup.setContent(buildOfficerPopupHtml(officer));
+        }
+    }
 
-    // New patrol form
-    let newPatrolName = $state("");
+    let newPatrolName  = $state("");
     let newPatrolColor = $state("#38bdf8");
     let showCreateForm = $state(false);
 
-    // Edit patrol name
-    let editingPatrolId = $state<string | null>(null);
+    let editingPatrolId   = $state<string | null>(null);
     let editingPatrolName = $state("");
 
     const PATROL_COLORS = [
@@ -99,64 +225,309 @@
         "#ef4444", "#eab308", "#ec4899", "#14b8a6"
     ];
 
-    // ─── Helpers ──────────────────────────────────────────────────────────────
-    const offsetX = 13;
-    const offsetY = 5;
+    // ── Zone drawing state ────────────────────────────────────────────────────
+    let drawingPatrolId = $state<string | null>(null);
+    let drawPoints      = $state<L.LatLng[]>([]);
+    let drawPolyline:  L.Polyline    | null = null;
+    let drawPolygon:   L.Polygon     | null = null;
+    let drawMarkers:   L.CircleMarker[]     = [];
+    // cursorMarker removed – using DOM dot instead (see createCursorDot)
+    const zonePolygons = new globalThis.Map<string, { poly: L.Polygon; label: L.Marker }>();
+
+    // Marker pools for recycling — keyed by citizenid / plate so existing markers
+    // are moved (setLatLng/setIcon) instead of cleared and rebuilt every refresh.
+    const bodycamMarkers = new globalThis.Map<string, L.Marker>();
+    const vehicleMarkers = new globalThis.Map<string, L.Marker>();
+
+    const offsetX = 40;
+    const offsetY = 31;
 
     function toMapLatLng(coords: { x: number; y: number }) {
         return [coords.y - offsetY, coords.x + offsetX];
     }
+    function toGtaCoords(latlng: L.LatLng): GtaPoint {
+        return { x: latlng.lng - offsetX, y: latlng.lat + offsetY };
+    }
+
+    // ── Zone rendering ────────────────────────────────────────────────────────
+    function renderAllZones() {
+        if (!map) return;
+        for (const { poly, label } of zonePolygons.values()) { poly.remove(); label.remove(); }
+        zonePolygons.clear();
+        zoneLayer.clearLayers();
+        if (!showZones) return;
+        for (const patrol of patrols) {
+            if (patrol.zonePoints && patrol.zonePoints.length >= 3) renderZone(patrol);
+        }
+    }
+
+    function renderZone(patrol: Patrol) {
+        if (!map || !patrol.zonePoints || patrol.zonePoints.length < 3) return;
+        const latlngs = patrol.zonePoints.map(pt => toMapLatLng(pt) as L.LatLng);
+        const poly = L.polygon(latlngs, {
+            color: patrol.color, weight: 2, opacity: 0.85,
+            fillColor: patrol.color, fillOpacity: 0.12,
+            dashArray: "6 4", className: "patrol-zone-poly",
+        }).addTo(zoneLayer);
+        const center = poly.getBounds().getCenter();
+        const label = L.marker(center, {
+            icon: L.divIcon({
+                className: "",
+                html: `<div class="zone-label" style="color:${patrol.color};border-color:${patrol.color}">${patrol.name}</div>`,
+                iconSize: [null as any, null as any], iconAnchor: [0, 0],
+            }),
+            interactive: false, zIndexOffset: -200,
+        }).addTo(zoneLayer);
+        zonePolygons.set(patrol.id, { poly, label });
+    }
+
+    function removeZoneById(id: string) {
+        const e = zonePolygons.get(id);
+        if (e) { e.poly.remove(); e.label.remove(); zonePolygons.delete(id); }
+    }
+
+    function refreshZoneForPatrol(patrol: Patrol) {
+        removeZoneById(patrol.id);
+        if (showZones && patrol.zonePoints && patrol.zonePoints.length >= 3) renderZone(patrol);
+    }
+
+    // ── Zone drawing ──────────────────────────────────────────────────────────
+    function getDrawColor() {
+        return patrols.find(p => p.id === drawingPatrolId)?.color ?? "#38bdf8";
+    }
+
+    // ── DOM cursor dot (bypasses CSS zoom coordinate issues) ─────────────────
+    let cursorDotEl: HTMLDivElement | null = null;
+
+    function createCursorDot() {
+        removeCursorDot();
+        cursorDotEl = document.createElement("div");
+        cursorDotEl.className = "draw-cursor-dot";
+        cursorDotEl.style.setProperty("--dot-color", getDrawColor());
+        document.body.appendChild(cursorDotEl);
+    }
+
+    function moveCursorDot(clientX: number, clientY: number) {
+        if (!cursorDotEl) return;
+        cursorDotEl.style.left = `${clientX}px`;
+        cursorDotEl.style.top  = `${clientY}px`;
+    }
+
+    function removeCursorDot() {
+        cursorDotEl?.remove();
+        cursorDotEl = null;
+    }
+
+    function startDrawing(patrolId: string) {
+        if (!map || !canEditPatrols) return;
+        stopDrawing(false);
+        drawingPatrolId = patrolId;
+        drawPoints = [];
+        // Hide native cursor, use our DOM dot instead (immune to CSS zoom offset)
+        mapContainer?.classList.add("map-cursor-none");
+        createCursorDot();
+        map.on("mousemove", onDrawMouseMove);
+        map.on("click", onDrawClick);
+        globalNotifications.info("Click to place points • Enter to finish • Backspace to undo • Esc to cancel");
+    }
+
+    // The MDT is commonly scaled by CSS `zoom` (and sometimes `transform: scale()`)
+    // on a parent for resolution-independent UI. We must undo that scale to map a
+    // mouse position into Leaflet's own container-pixel space, otherwise placed
+    // points drift by a constant on-screen offset. We read the declared zoom /
+    // transform off the ancestor chain — that's reliable across Chromium versions,
+    // unlike deriving it from offsetWidth (which itself becomes scaled under `zoom`).
+    function getAncestorScale(): number {
+        let el: HTMLElement | null = mapContainer;
+        let s = 1;
+        while (el) {
+            const cs = getComputedStyle(el);
+            const zoomStr = (cs as any).zoom as string | undefined;
+            if (zoomStr && zoomStr !== "" && zoomStr !== "normal") {
+                const zv = parseFloat(zoomStr);
+                if (!isNaN(zv) && zv !== 1) s *= zv;
+            }
+            const t = cs.transform;
+            if (t && t !== "none") {
+                try {
+                    const m = new DOMMatrixReadOnly(t);
+                    if (m.a && !isNaN(m.a) && m.a !== 1) s *= m.a; // horizontal scale
+                } catch { /* unparseable transform — ignore */ }
+            }
+            el = el.parentElement;
+        }
+        return s;
+    }
+
+    function mouseEventToLatLng(e: L.LeafletMouseEvent): L.LatLng {
+        if (!map || !mapContainer) return e.latlng;
+        const oe    = e.originalEvent as MouseEvent;
+        const rect  = mapContainer.getBoundingClientRect();
+        const scale = getAncestorScale();
+
+        // Residual constant correction (in container px) for a getBoundingClientRect
+        // quirk under CSS `zoom`: the measured rect origin is off by a fixed amount
+        // for this layout. NOTE: these are NOT the GTA<->map offsetX/offsetY above —
+        // they're a pixel fudge tied to the MDT's current zoom factor and the map's
+        // placement in the layout. Re-tune if either of those changes.
+        const clickFudgeX = 40;
+        const clickFudgeY = 30;
+
+        // rect + clientX/Y are on-screen (scaled) px; Leaflet's container point is
+        // in unscaled layout px, so undo the scale on the offset from the edge.
+        const x = ((oe.clientX - rect.left) / scale) - clickFudgeX;
+        const y = ((oe.clientY - rect.top)  / scale) - clickFudgeY;
+        return map.containerPointToLatLng(L.point(x, y));
+    }
+
+    function onDrawMouseMove(e: L.LeafletMouseEvent) {
+        if (!map) return;
+        const latlng = mouseEventToLatLng(e);
+        // Position cursor dot directly using native mouse coords — no zoom distortion
+        const oe = e.originalEvent as MouseEvent;
+        moveCursorDot(oe.clientX, oe.clientY);
+        if (drawPoints.length > 0) {
+            const pts = [...drawPoints, latlng];
+            if (!drawPolyline) {
+                drawPolyline = L.polyline(pts, { color: getDrawColor(), weight: 2, opacity: 0.7, dashArray: "5 4", interactive: false }).addTo(map);
+            } else { drawPolyline.setLatLngs(pts); }
+            if (drawPoints.length >= 2) {
+                const closed = [...drawPoints, latlng, drawPoints[0]];
+                if (!drawPolygon) {
+                    drawPolygon = L.polygon(closed, { color: getDrawColor(), weight: 1.5, opacity: 0.5, fillColor: getDrawColor(), fillOpacity: 0.08, interactive: false, dashArray: "5 4" }).addTo(map);
+                } else { drawPolygon.setLatLngs(closed); }
+            }
+        }
+    }
+
+    function onDrawClick(e: L.LeafletMouseEvent) {
+        if (!map) return;
+        const latlng = mouseEventToLatLng(e);
+        if (drawPoints.length >= 3) {
+            const fp = map.latLngToContainerPoint(drawPoints[0]);
+            const np = map.latLngToContainerPoint(latlng);
+            if (Math.hypot(fp.x - np.x, fp.y - np.y) < 14) { finishDrawing(); return; }
+        }
+        drawPoints = [...drawPoints, latlng];
+        drawMarkers.push(L.circleMarker(latlng, { radius: 4, color: getDrawColor(), fillColor: "#fff", fillOpacity: 1, weight: 2, interactive: false }).addTo(map));
+    }
+
+    async function finishDrawing() {
+        if (drawPoints.length < 3) { globalNotifications.error("Need at least 3 points."); return; }
+        const id = drawingPatrolId;
+        if (!id) return;
+        const gtaPoints = drawPoints.map(toGtaCoords);
+        stopDrawing(false);
+        patrols = patrols.map(p => p.id === id ? { ...p, zonePoints: gtaPoints } : p);
+        const patrol = patrols.find(p => p.id === id);
+        if (patrol) refreshZoneForPatrol(patrol);
+        try { await fetchNui(NUI_EVENTS.MAP.SET_PATROL_ZONE, { id, points: gtaPoints }, { success: true }); }
+        catch { globalNotifications.error("Failed to save zone."); }
+    }
+
+    async function clearZone(id: string) {
+        patrols = patrols.map(p => p.id === id ? { ...p, zonePoints: null } : p);
+        removeZoneById(id);
+        try { await fetchNui(NUI_EVENTS.MAP.SET_PATROL_ZONE, { id, points: null }, { success: true }); }
+        catch { globalNotifications.error("Failed to clear zone."); }
+    }
+
+    function stopDrawing(notify = true) {
+        if (!map) return;
+        map.off("mousemove", onDrawMouseMove);
+        map.off("click", onDrawClick);
+        drawPolyline?.remove(); drawPolyline = null;
+        drawPolygon?.remove();  drawPolygon  = null;
+        removeCursorDot();
+        for (const m of drawMarkers) m.remove();
+        drawMarkers = [];
+        mapContainer?.classList.remove("map-cursor-none");
+        drawingPatrolId = null;
+        drawPoints = [];
+        if (notify) globalNotifications.info("Zone drawing cancelled.");
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (!drawingPatrolId) return;
+        if (e.key === "Enter")     { e.preventDefault(); finishDrawing(); }
+        else if (e.key === "Escape")    { e.preventDefault(); stopDrawing(true); }
+        else if (e.key === "Backspace" && drawPoints.length > 0) {
+            e.preventDefault();
+            drawMarkers[drawMarkers.length - 1]?.remove();
+            drawMarkers.pop();
+            drawPoints = drawPoints.slice(0, -1);
+            // Update or remove preview lines after undo
+            if (drawPoints.length === 0) {
+                drawPolyline?.remove(); drawPolyline = null;
+                drawPolygon?.remove();  drawPolygon  = null;
+            } else if (drawPoints.length === 1) {
+                drawPolygon?.remove();  drawPolygon  = null;
+            }
+            // Polyline will be redrawn on next mousemove automatically
+        }
+    }
 
     function getTrackConfig(kind: "vehicle" | "bodycam") {
         if (kind === "vehicle") return { color: "#f97316", fill: "#fb923c", label: "V" };
         return { color: "#a855f7", fill: "#c084fc", label: "B" };
     }
 
-    function createMarker(
+    // Builds just the divIcon for a tracker. Split out from createMarker so we can
+    // reuse it on existing markers via setIcon() during recycling.
+    function makeTrackIcon(
         kind: "vehicle" | "bodycam",
-        coords: { x: number; y: number },
-        label: string,
         heading?: number,
-        patrolColor?: string
-    ) {
+        patrolColor?: string,
+        cached = false
+    ): L.DivIcon {
         const config = getTrackConfig(kind);
         const dotColor = patrolColor ?? config.fill;
         const borderColor = patrolColor ? patrolColor : config.color;
-        const latLng = toMapLatLng(coords);
         const rotation = heading != null ? 360 - heading : 0;
         const hasHeading = heading != null;
+        const cachedClass = cached ? " tracking-cached" : "";
 
         if (iconStyle === "badge") {
-            return L.marker(latLng as any, {
-                icon: L.divIcon({
-                    className: "",
-                    html: `
-                        <div class="tracking-badge-wrap" style="transform: rotate(${rotation}deg)">
-                            <div class="tracking-icon tracking-${kind}" style="${patrolColor ? `background:${patrolColor}` : ""}">
-                                <span style="transform: rotate(-${rotation}deg)">${config.label}</span>
-                            </div>
-                            ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}" style="${patrolColor ? `border-bottom-color:${patrolColor}` : ""}"></div>` : ""}
-                        </div>
-                    `,
-                    iconSize: [28, 28],
-                    iconAnchor: [14, 14],
-                }),
-            }).bindTooltip(label, { direction: "top", offset: [0, -14] });
-        }
-
-        return L.marker(latLng as any, {
-            icon: L.divIcon({
+            return L.divIcon({
                 className: "",
                 html: `
-                    <div class="tracking-dot-wrap" style="transform: rotate(${rotation}deg)">
-                        <div class="tracking-dot" style="background:${dotColor}; border: 2px solid ${borderColor}"></div>
+                    <div class="tracking-badge-wrap${cachedClass}" style="transform: rotate(${rotation}deg)">
+                        <div class="tracking-icon tracking-${kind}" style="${patrolColor ? `background:${patrolColor}` : ""}">
+                            <span style="transform: rotate(-${rotation}deg)">${config.label}</span>
+                        </div>
                         ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}" style="${patrolColor ? `border-bottom-color:${patrolColor}` : ""}"></div>` : ""}
                     </div>
                 `,
-                iconSize: [20, 20],
-                iconAnchor: [10, 10],
-            }),
-        }).bindTooltip(label, { direction: "top", offset: [0, -10] });
+                iconSize: [28, 28],
+                iconAnchor: [14, 14],
+            });
+        }
+
+        return L.divIcon({
+            className: "",
+            html: `
+                <div class="tracking-dot-wrap${cachedClass}" style="transform: rotate(${rotation}deg)">
+                    <div class="tracking-dot" style="background:${dotColor}; border: 2px solid ${borderColor}"></div>
+                    ${hasHeading ? `<div class="tracking-arrow tracking-arrow-${kind}" style="${patrolColor ? `border-bottom-color:${patrolColor}` : ""}"></div>` : ""}
+                </div>
+            `,
+            iconSize: [20, 20],
+            iconAnchor: [10, 10],
+        });
+    }
+
+    function createMarker(
+        kind: "vehicle" | "bodycam",
+        coords: { x: number; y: number },
+        label: string,
+        heading?: number,
+        patrolColor?: string,
+        cached = false
+    ) {
+        const offset: [number, number] = iconStyle === "badge" ? [0, -14] : [0, -10];
+        return L.marker(toMapLatLng(coords) as any, {
+            icon: makeTrackIcon(kind, heading, patrolColor, cached),
+        }).bindTooltip(label, { direction: "top", offset });
     }
 
     function normalizeCoords(raw: any) {
@@ -174,7 +545,15 @@
         return officers.filter(o => !patrols.some(p => p.memberIds.includes(o.citizenid)));
     }
 
-    // ─── Patrol map labels ────────────────────────────────────────────────────
+    // Case-insensitive filter over name / callsign / rank for the sidebar search.
+    function filterOfficers(list: Bodycam[]): Bodycam[] {
+        const q = officerSearch.trim().toLowerCase();
+        if (!q) return list;
+        return list.filter(o =>
+            [o.name, o.callsign, o.rank].some(v => String(v ?? "").toLowerCase().includes(q))
+        );
+    }
+
     function refreshPatrolLabels() {
         patrolLayer.clearLayers();
         if (!showPatrols) return;
@@ -183,7 +562,6 @@
             const members = officers.filter(o => patrol.memberIds.includes(o.citizenid));
             if (members.length === 0) continue;
 
-            // Centroid berechnen
             const centroid = members.reduce(
                 (acc, o) => ({ x: acc.x + o.coords.x, y: acc.y + o.coords.y }),
                 { x: 0, y: 0 }
@@ -191,8 +569,6 @@
             centroid.x /= members.length;
             centroid.y /= members.length;
 
-            // Place label at the member closest to the centroid
-            
             const anchor = members.reduce((closest, o) => {
                 const dx = o.coords.x - centroid.x;
                 const dy = o.coords.y - centroid.y;
@@ -202,13 +578,12 @@
             });
 
             const latLng = toMapLatLng(anchor.coords);
-
             L.marker(latLng as any, {
                 icon: L.divIcon({
                     className: "",
                     html: `<div class="patrol-label" style="border-color:${patrol.color};color:${patrol.color}">${patrol.name}</div>`,
                     iconSize: [null as any, null as any],
-                    iconAnchor: [0, 24], // offset upward above the marker
+                    iconAnchor: [0, 24],
                 }),
                 interactive: false,
                 zIndexOffset: -100,
@@ -216,7 +591,6 @@
         }
     }
 
-    // ─── Refresh tracking ─────────────────────────────────────────────────────
     async function refreshTracking() {
         if (!map || !tabVisible) return;
         if (isEnvBrowser()) return;
@@ -229,7 +603,6 @@
                 3000,
             );
 
-            // Bei Fehler oder leerem Response bestehende Daten behalten
             const success = (response as any).success;
             if (success === false) return;
 
@@ -237,54 +610,115 @@
             const bodycams = (data as any).bodycams;
             const vehicles = (data as any).vehicles;
 
-            // Nur updaten wenn der Server wirklich Daten geliefert hat
             if (!Array.isArray(bodycams) && !Array.isArray(vehicles)) return;
 
-            vehicleLayer.clearLayers();
-            bodycamLayer.clearLayers();
-
             const freshOfficers: Bodycam[] = [];
+            const seenBodycams = new Set<string>();
 
             for (const bodycam of bodycams || []) {
                 const coords = normalizeCoords((bodycam as any).coords);
                 if (!coords) continue;
 
+                // A missing citizenid forces a random fallback id below, which makes
+                // this officer's marker flicker between refreshes. Surface it for devs.
+                if (!bodycam.citizenid) console.warn("[MDT] bodycam without citizenid; marker may flicker:", bodycam.name);
+
                 const bc: Bodycam = {
                     citizenid: bodycam.citizenid ?? bodycam.name ?? String(Math.random()),
                     name: bodycam.name ?? "",
                     callsign: bodycam.callsign,
                     rank: bodycam.rank,
                     coords: { x: coords.x, y: coords.y, z: bodycam.coords?.z ?? 0 },
+                    inVehicle: (bodycam as any).inVehicle ?? false,
                     heading: bodycam.heading,
                 };
                 freshOfficers.push(bc);
+                seenBodycams.add(bc.citizenid);
+
+                const patrol = getOfficerPatrol(bc.citizenid);
+                const label = `${[bc.rank, bc.callsign].filter(Boolean).join(" | ")}${bc.name ? " | " + bc.name : ""}`;
+                const color = patrol?.color ?? "#6b7280";
+                const latLng = toMapLatLng(coords) as any;
+
+                // Recycle existing markers (move + restyle) instead of clearing the
+                // whole layer and rebuilding every divIcon each refresh.
+                const existing = bodycamMarkers.get(bc.citizenid);
+                if (existing) {
+                    existing.setLatLng(latLng);
+                    existing.setIcon(makeTrackIcon("bodycam", bodycam.heading, color));
+                    existing.setTooltipContent(label);
+                } else {
+                    const m = createMarker("bodycam", coords, label, bodycam.heading, color);
+                    m.addTo(bodycamLayer);
+                    bodycamMarkers.set(bc.citizenid, m);
+                }
+            }
 
-                if (showBodycams) {
-                    const patrol = getOfficerPatrol(bc.citizenid);
-                    const label = `${[bc.rank, bc.callsign].filter(Boolean).join(" | ")}${bc.name ? " | " + bc.name : ""}`;
-                    const color = patrol?.color ?? "#6b7280";
-                    createMarker("bodycam", coords, label, bodycam.heading, color).addTo(bodycamLayer);
+            // Drop markers for officers no longer present
+            for (const [id, m] of bodycamMarkers) {
+                if (!seenBodycams.has(id)) {
+                    bodycamLayer.removeLayer(m);
+                    bodycamMarkers.delete(id);
                 }
             }
 
             officers = freshOfficers;
 
-            if (showVehicles) {
-                for (const vehicle of vehicles || []) {
-                    const coords = normalizeCoords((vehicle as any).coords);
-                    if (!coords) continue;
-                    const label = `${(vehicle as any).plate || ""}`.trim();
-                    createMarker("vehicle", coords, label, (vehicle as any).heading).addTo(vehicleLayer);
+            // Pan to own position once per MDT open
+            if (!centeredOnSelf && map && ownCitizenId) {
+                const self = freshOfficers.find(o => o.citizenid === ownCitizenId);
+                if (self) {
+                    centeredOnSelf = true;
+                    map.setView(toMapLatLng(self.coords) as L.LatLngExpression, 5, { animate: false });
+                }
+            }
+
+            // Keep highlight in sync as the officer moves; drop it if they go off-duty.
+            if (selectedOfficerId) {
+                if (officers.some(o => o.citizenid === selectedOfficerId)) {
+                    highlightOfficerOnMap(selectedOfficerId);
+                } else {
+                    clearOfficerHighlight();
+                }
+            }
+
+            // Vehicles — same recycling approach. `cached` (parked / last-known)
+            // vehicles come from the server's vehicleCache and are rendered dimmed.
+            const seenVehicles = new Set<string>();
+            for (const vehicle of vehicles || []) {
+                const coords = normalizeCoords((vehicle as any).coords);
+                if (!coords) continue;
+                const plate  = `${(vehicle as any).plate || ""}`.trim();
+                const cached = (vehicle as any).cached === true;
+                const label  = cached ? `${plate || "Vehicle"} (Parked)` : plate;
+                const key    = plate || `v:${coords.x.toFixed(1)},${coords.y.toFixed(1)}`;
+                seenVehicles.add(key);
+                const latLng = toMapLatLng(coords) as any;
+
+                const existing = vehicleMarkers.get(key);
+                if (existing) {
+                    existing.setLatLng(latLng);
+                    existing.setIcon(makeTrackIcon("vehicle", (vehicle as any).heading, undefined, cached));
+                    existing.setTooltipContent(label);
+                } else {
+                    const m = createMarker("vehicle", coords, label, (vehicle as any).heading, undefined, cached);
+                    m.addTo(vehicleLayer);
+                    vehicleMarkers.set(key, m);
+                }
+            }
+            for (const [key, m] of vehicleMarkers) {
+                if (!seenVehicles.has(key)) {
+                    vehicleLayer.removeLayer(m);
+                    vehicleMarkers.delete(key);
                 }
             }
 
             refreshPatrolLabels();
         } catch {
-            // Timeout oder Netzwerkfehler – bestehende Officer/Marker behalten
+            // keep existing
         }
     }
 
-    // ─── Mouse-based Drag System (kein HTML5 draggable – CEF-kompatibel) ──────
     type DragKind = "officer" | "patrol";
     type DragState = {
         kind: DragKind;
@@ -300,7 +734,6 @@
     let dragOverPatrolSortId = $state<string | null>(null);
     let isDragging = $state(false);
 
-    // Ghost element for visual drag feedback
     let ghostEl: HTMLDivElement | null = null;
 
     function createGhost(label: string, kind: DragKind, x: number, y: number) {
@@ -324,7 +757,6 @@
         ghostEl = null;
     }
 
-    // Patrol-Card-Elemente per data-patrol-id finden
     function getPatrolIdFromPoint(x: number, y: number): string | null {
         const els = document.elementsFromPoint(x, y);
         for (const el of els) {
@@ -344,7 +776,6 @@
         if (!drag) return;
 
         if (!drag.active) {
-            // Only count as drag after 5px movement
             const dx = e.clientX - drag.x;
             const dy = e.clientY - drag.y;
             if (Math.sqrt(dx*dx + dy*dy) < 5) return;
@@ -375,14 +806,12 @@
                 if (pid) {
                     assignOfficer(drag.id, pid);
                 } else {
-                    // Auf Officers-Panel losgelassen → aus Streife entfernen
                     const el = document.elementFromPoint(e.clientX, e.clientY);
                     if (el?.closest(".panel-officers")) {
                         removeFromPatrol(drag.id);
                     }
                 }
             } else if (drag.kind === "patrol" && pid && pid !== drag.id) {
-                // Streifen sortieren
                 const arr = [...patrols];
                 const fromIdx = arr.findIndex(p => p.id === drag!.id);
                 const toIdx   = arr.findIndex(p => p.id === pid);
@@ -401,12 +830,13 @@
         dragOverPatrolId = null;
         dragOverPatrolSortId = null;
     }
+
     function handleNuiMessage(event: MessageEvent) {
         const { type, data } = event.data ?? {};
 
         if (type === "setVisible") {
             if (data?.visible === true) {
-                // Short delay to ensure MDTOpen is set in Lua client
+                centeredOnSelf = false; // re-center each time MDT opens
                 setTimeout(() => {
                     refreshTracking();
                     loadPatrols();
@@ -415,8 +845,12 @@
             return;
         }
 
+        if (type === "setLocalCitizenId") {
+            if (typeof data?.citizenid === "string") ownCitizenId = data.citizenid;
+            return;
+        }
+
         if (type === "mapUiState") {
-            // Lua client state overrides localStorage (authoritative after resource restart)
             if (typeof data?.sidebarOpen  === "boolean") { sidebarOpen  = data.sidebarOpen;  localStorage.setItem("mdt_map_sidebar",  String(sidebarOpen)); }
             if (typeof data?.officersOpen === "boolean") { officersOpen = data.officersOpen; localStorage.setItem("mdt_map_officers", String(officersOpen)); }
             if (typeof data?.patrolsOpen  === "boolean") { patrolsOpen  = data.patrolsOpen;  localStorage.setItem("mdt_map_patrols",  String(patrolsOpen)); }
@@ -424,17 +858,18 @@
         }
 
         if (type === "syncPatrols") {
-            // Server sends sorted array
             patrols = Array.isArray(data) ? data as Patrol[] : Object.values(data as Record<string, Patrol>);
             refreshPatrolLabels();
-            // Trigger animation for all clients based on server hint
+            renderAllZones();
             const msg = event.data as any;
             if (msg.action === "assigned" && msg.citizenid) flashAssigned(msg.citizenid);
             if (msg.action === "removed"  && msg.citizenid) flashRemoved(msg.citizenid);
+            return;
         }
+
+
     }
 
-    // ─── Assignment animation state ───────────────────────────────────────────
     let recentlyAssigned = $state<Set<string>>(new Set());
     let recentlyRemoved  = $state<Set<string>>(new Set());
 
@@ -451,6 +886,7 @@
             recentlyRemoved = new Set([...recentlyRemoved].filter(id => id !== citizenid));
         }, 700);
     }
+
     async function loadPatrols() {
         if (isEnvBrowser()) return;
         try {
@@ -458,12 +894,12 @@
             const data = (res as any).data ?? res;
             patrols = Array.isArray(data) ? data as Patrol[] : Object.values(data as Record<string, Patrol>);
             refreshPatrolLabels();
+            renderAllZones();
         } catch {
             globalNotifications.error("Failed to load patrols");
         }
     }
 
-    // Doppelter Name?
     function patrolNameExists(name: string, excludeId?: string) {
         return patrols.some(p => p.name.toLowerCase() === name.toLowerCase() && p.id !== excludeId);
     }
@@ -478,15 +914,17 @@
         const id = crypto.randomUUID();
         try {
             await fetchNui(NUI_EVENTS.MAP.CREATE_PATROL, { id, name, color: newPatrolColor }, { success: true });
-        } catch { /* Server broadcasts syncPatrols */ }
+        } catch { }
         newPatrolName = "";
         showCreateForm = false;
     }
 
     async function deletePatrol(id: string) {
+        if (drawingPatrolId === id) stopDrawing(false);
+        removeZoneById(id);
         try {
             await fetchNui(NUI_EVENTS.MAP.DELETE_PATROL, { id }, { success: true });
-        } catch { /* Server broadcastet syncPatrols */ }
+        } catch { }
     }
 
     async function renamePatrolOnServer(id: string, name: string) {
@@ -496,7 +934,7 @@
         }
         try {
             await fetchNui(NUI_EVENTS.MAP.RENAME_PATROL, { id, name }, { success: true });
-        } catch { /* Server broadcastet syncPatrols */ }
+        } catch { }
     }
 
     async function assignOfficer(officerId: string, patrolId: string) {
@@ -511,7 +949,6 @@
         } catch { }
     }
 
-    // Move patrol up/down in the list
     function movePatrol(id: string, dir: -1 | 1) {
         const idx = patrols.findIndex(p => p.id === id);
         if (idx < 0) return;
@@ -527,7 +964,6 @@
         fetchNui(NUI_EVENTS.MAP.REORDER_PATROLS, { ids: arr.map(p => p.id) }, { success: true }).catch(() => {});
     }
 
-    // ─── NUI Message Listener (Server → Client → NUI sync) ───────────────────
     function handleVisibilityChange() {
         tabVisible = !document.hidden;
     }
@@ -541,6 +977,7 @@
         toggle(vehicleLayer, showVehicles);
         toggle(bodycamLayer, showBodycams);
         toggle(patrolLayer, showPatrols);
+        toggle(zoneLayer, showZones);
     }
 
     function getCustomCRS() {
@@ -559,6 +996,7 @@
         });
     }
 
+    // IDENTICAL to original – no changes
     function initializeMap() {
         if (mapInitialized) return;
         mapInitialized = true;
@@ -578,7 +1016,7 @@
         L.control.zoom({ position: "topright" }).addTo(map);
 
         const bounds = getMapBounds(map);
-        map.setView([-300, -1500], 4);
+        map.setView([-300, -1500], 3);
         map.setMaxBounds(bounds);
         map.attributionControl.setPrefix(false);
 
@@ -592,7 +1030,8 @@
 
         vehicleLayer = L.layerGroup().addTo(map);
         bodycamLayer = L.layerGroup().addTo(map);
-        patrolLayer = L.layerGroup().addTo(map);
+        patrolLayer  = L.layerGroup().addTo(map);
+        zoneLayer    = L.layerGroup().addTo(map);
 
         syncLayerVisibility();
         refreshTracking();
@@ -605,11 +1044,13 @@
         return new LatLngBounds(sw, ne);
     }
 
+    // IDENTICAL to original onMount – no changes
     onMount(() => {
         document.addEventListener("visibilitychange", handleVisibilityChange);
         window.addEventListener("message", handleNuiMessage);
         window.addEventListener("mousemove", onGlobalMouseMove);
         window.addEventListener("mouseup", onGlobalMouseUp);
+        window.addEventListener("keydown", onKeyDown);
         initializeMap();
         loadPatrols();
     });
@@ -619,23 +1060,25 @@
         window.removeEventListener("message", handleNuiMessage);
         window.removeEventListener("mousemove", onGlobalMouseMove);
         window.removeEventListener("mouseup", onGlobalMouseUp);
+        window.removeEventListener("keydown", onKeyDown);
+        if (drawingPatrolId) stopDrawing(false);
         removeGhost();
         if (map) { map.remove(); map = null; mapInitialized = false; }
         if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
+        bodycamMarkers.clear();
+        vehicleMarkers.clear();
     });
 
     $effect(() => { syncLayerVisibility(); });
     $effect(() => { iconStyle; refreshTracking(); });
     $effect(() => { showPatrols; refreshPatrolLabels(); });
+    $effect(() => { showZones; renderAllZones(); });
 </script>
-
 <div class="map-page">
     <div class="map-wrapper" style="--sidebar-width:{sidebarWidth}px">
 
-        <!-- ── Left Controls ────────────────────────────────────── -->
         <div class="map-controls">
             <span class="controls-header">Tracking</span>
-
             <div class="controls-group">
                 <label class="control-toggle">
                     <input type="checkbox" bind:checked={showVehicles} onchange={() => localStorage.setItem("mdt_map_vehicles", String(showVehicles))} />
@@ -649,10 +1092,12 @@
                     <input type="checkbox" bind:checked={showPatrols} onchange={() => localStorage.setItem("mdt_map_patrols_layer", String(showPatrols))} />
                     <span class="toggle-label">Patrols</span>
                 </label>
+                <label class="control-toggle">
+                    <input type="checkbox" bind:checked={showZones} onchange={() => localStorage.setItem("mdt_map_zones", String(showZones))} />
+                    <span class="toggle-label">Zones</span>
+                </label>
             </div>
-
             <div class="controls-divider"></div>
-
             <div class="controls-group">
                 <span class="controls-label">Style</span>
                 <div class="segment">
@@ -660,11 +1105,10 @@
                     <button class:active={iconStyle === "badge"} onclick={() => { iconStyle = "badge"; localStorage.setItem("mdt_map_icon_style", "badge"); }} type="button">Badges</button>
                 </div>
             </div>
-
             <div class="controls-divider"></div>
-
             <div class="legend">
                 <span class="legend-item vehicle">Vehicle</span>
+                <span class="legend-item vehicle-parked">Parked</span>
                 <span class="legend-item bodycam-unassigned">Unassigned</span>
                 {#each patrols.filter(p => p.memberIds.length > 0) as patrol}
                     <span class="legend-item" style="--dot:{patrol.color}">{patrol.name}</span>
@@ -672,18 +1116,31 @@
             </div>
         </div>
 
-        <!-- ── Map ────────────────────────────────────────────────── -->
+        {#if drawingPatrolId}
+            {@const drawPatrol = patrols.find(p => p.id === drawingPatrolId)}
+            <div class="drawing-hud" style="--zone-color:{drawPatrol?.color ?? '#38bdf8'}">
+                <div class="drawing-hud-title">
+                    <span class="drawing-dot"></span>
+                    Drawing zone for <strong>{drawPatrol?.name}</strong>
+                </div>
+                <div class="drawing-hud-hints">
+                    <kbd>Click</kbd> Place point &nbsp;·&nbsp;
+                    <kbd>Enter</kbd> Finish &nbsp;·&nbsp;
+                    <kbd>⌫</kbd> Undo &nbsp;·&nbsp;
+                    <kbd>Esc</kbd> Cancel
+                </div>
+                <div class="drawing-hud-count">{drawPoints.length} point{drawPoints.length !== 1 ? "s" : ""}{drawPoints.length >= 3 ? " ✓" : ""}</div>
+                <div class="drawing-hud-actions">
+                    <button class="hud-btn hud-btn--finish" onclick={() => finishDrawing()} disabled={drawPoints.length < 3} type="button">Finish</button>
+                    <button class="hud-btn hud-btn--cancel" onclick={() => stopDrawing(true)} type="button">Cancel</button>
+                </div>
+            </div>
+        {/if}
+
         <div bind:this={mapContainer} class="map-container" class:map-no-pointer={isDragging}></div>
 
-        <!-- ── Sidebar Toggle Button ──────────────────────────────── -->
         {#if canViewPatrols}
-        <button
-            class="sidebar-toggle"
-            class:open={sidebarOpen}
-            onclick={() => toggleSidebar()}
-            type="button"
-            title={sidebarOpen ? "Close sidebar" : "Manage patrols"}
-        >
+        <button class="sidebar-toggle" class:open={sidebarOpen} onclick={() => toggleSidebar()} type="button" title={sidebarOpen ? "Close sidebar" : "Manage patrols"}>
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                 {#if sidebarOpen}
                     <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
@@ -691,15 +1148,10 @@
                     <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                 {/if}
             </svg>
-            {#if !sidebarOpen}
-                <span class="sidebar-toggle-label">Patrols</span>
-            {/if}
+            {#if !sidebarOpen}<span class="sidebar-toggle-label">Patrols</span>{/if}
         </button>
 
-        <!-- ── Right Sidebar ──────────────────────────────────────── -->
         <div class="sidebar" class:sidebar--open={sidebarOpen}>
-
-            <!-- ── Officers Panel ────────────────────────────────── -->
             <div class="panel" class:panel--open={officersOpen} class:panel--closed={!officersOpen}>
                 <div class="panel-header panel-header--clickable" onclick={toggleOfficers}>
                     {#if officersOpen}
@@ -708,28 +1160,19 @@
                     {:else}
                         <span class="panel-title-vertical">Officers</span>
                     {/if}
-                    <svg class="panel-chevron" class:rotated={!officersOpen} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
-                        <path d="M2 4.5l4 4 4-4"/>
-                    </svg>
+                    <svg class="panel-chevron" class:rotated={!officersOpen} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M2 4.5l4 4 4-4"/></svg>
                 </div>
                 {#if officersOpen}
                 <div class="panel-content panel-officers-content">
-
                     {#if officers.length === 0}
                         <div class="empty-hint">No officers on duty.</div>
+                    {:else if totalVisibleOfficers === 0}
+                        <div class="empty-hint">No officers match "{officerSearch}".</div>
                     {/if}
-
-                    <!-- Nicht zugeteilt -->
-                    {#if unassignedOfficers().length > 0}
-                        <div class="section-label">Unassigned ({unassignedOfficers().length})</div>
-                        {#each unassignedOfficers() as officer (officer.citizenid)}
-                            <div
-                                class="officer-card"
-                                class:dragging={drag?.kind === "officer" && drag.id === officer.citizenid && drag.active}
-                                class:anim-removed={recentlyRemoved.has(officer.citizenid)}
-                                onmousedown={(e) => canManagePatrols && onMouseDown(e, "officer", officer.citizenid, officer.name)}
-                                style={canManagePatrols ? "cursor:grab" : "cursor:default"}
-                            >
+                    {#if unassignedFiltered.length > 0}
+                        <div class="section-label">Unassigned ({unassignedFiltered.length})</div>
+                        {#each unassignedFiltered as officer (officer.citizenid)}
+                            <div class="officer-card" class:dragging={drag?.kind === "officer" && drag.id === officer.citizenid && drag.active} class:anim-removed={recentlyRemoved.has(officer.citizenid)} class:officer-selected={selectedOfficerId === officer.citizenid} onmousedown={(e) => canManagePatrols && onMouseDown(e, "officer", officer.citizenid, officer.name)} onclick={() => selectOfficer(officer.citizenid)} style={canManagePatrols ? "cursor:grab" : "cursor:pointer"}>
                                 {#if canManagePatrols}<div class="officer-drag-handle">⠿</div>{/if}
                                 <div class="officer-info">
                                     <span class="officer-name">{officer.name}</span>
@@ -738,44 +1181,39 @@
                             </div>
                         {/each}
                     {/if}
-
-                    <!-- In Streifen -->
                     {#each patrols as patrol}
-                        {@const members = patrol.memberIds.map(id => officers.find(o => o.citizenid === id)).filter(Boolean)}
-                        {#if members.length > 0}
+                        {@const members = patrol.memberIds.map(id => officers.find(o => o.citizenid === id)).filter(Boolean) as Bodycam[]}
+                        {@const visibleMembers = filterOfficers(members)}
+                        {#if visibleMembers.length > 0}
                             <div class="section-label" style="margin-top:8px">
                                 <span class="section-dot" style="background:{patrol.color}"></span>
                                 {patrol.name}
                             </div>
-                            {#each members as officer (officer!.citizenid)}
-                                <div
-                                    class="officer-card officer-card--assigned"
-                                    class:dragging={drag?.kind === "officer" && drag.id === officer!.citizenid && drag.active}
-                                    class:anim-assigned={recentlyAssigned.has(officer!.citizenid)}
-                                    style="border-left: 2px solid {patrol.color};{canManagePatrols ? '' : 'cursor:default'}"
-                                    onmousedown={(e) => canManagePatrols && onMouseDown(e, "officer", officer!.citizenid, officer!.name)}
-                                >
+                            {#each visibleMembers as officer (officer!.citizenid)}
+                                <div class="officer-card officer-card--assigned" class:dragging={drag?.kind === "officer" && drag.id === officer!.citizenid && drag.active} class:anim-assigned={recentlyAssigned.has(officer!.citizenid)} class:officer-selected={selectedOfficerId === officer!.citizenid} style="border-left: 2px solid {patrol.color};{canManagePatrols ? '' : 'cursor:pointer'}" onmousedown={(e) => canManagePatrols && onMouseDown(e, "officer", officer!.citizenid, officer!.name)} onclick={() => selectOfficer(officer!.citizenid)}>
                                     {#if canManagePatrols}<div class="officer-drag-handle">⠿</div>{/if}
                                     <div class="officer-info">
                                         <span class="officer-name">{officer!.name}</span>
                                         <span class="officer-meta">{[officer!.rank, officer!.callsign].filter(Boolean).join(" · ")}</span>
                                     </div>
                                     {#if canManagePatrols}
-                                        <button class="officer-kick" onmousedown={(e) => e.stopPropagation()} onclick={() => removeFromPatrol(officer!.citizenid)} title="Remove">×</button>
+                                        <button class="officer-kick" onmousedown={(e) => e.stopPropagation()} onclick={(e) => { e.stopPropagation(); removeFromPatrol(officer!.citizenid); }} title="Remove">×</button>
                                     {/if}
                                 </div>
                             {/each}
                         {/if}
                     {/each}
-
+                </div>
+                <div class="officer-search">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+                    <input class="officer-search-input" placeholder="Search officers…" bind:value={officerSearch} />
+                    {#if officerSearch}<button class="officer-search-clear" onclick={() => (officerSearch = "")} type="button" title="Clear">×</button>{/if}
                 </div>
                 {/if}
             </div>
 
-            <!-- ── Divider ────────────────────────────────────────── -->
             <div class="panel-divider"></div>
 
-            <!-- ── Patrols Panel ─────────────────────────────────── -->
             <div class="panel" class:panel--open={patrolsOpen} class:panel--closed={!patrolsOpen}>
                 <div class="panel-header panel-header--clickable" onclick={togglePatrols}>
                     {#if patrolsOpen}
@@ -783,39 +1221,22 @@
                         <span class="tab-badge">{patrols.length}</span>
                         {#if canEditPatrols}
                             <button class="btn-icon-add" onmousedown={(e) => e.stopPropagation()} onclick={(e) => { e.stopPropagation(); showCreateForm = !showCreateForm; }} type="button" title="New patrol">
-                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                                    <line x1="6" y1="1" x2="6" y2="11"/>
-                                    <line x1="1" y1="6" x2="11" y2="6"/>
-                                </svg>
+                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="6" y1="1" x2="6" y2="11"/><line x1="1" y1="6" x2="11" y2="6"/></svg>
                             </button>
                         {/if}
                     {:else}
                         <span class="panel-title-vertical">Patrols</span>
                     {/if}
-                    <svg class="panel-chevron" class:rotated={!patrolsOpen} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
-                        <path d="M2 4.5l4 4 4-4"/>
-                    </svg>
+                    <svg class="panel-chevron" class:rotated={!patrolsOpen} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M2 4.5l4 4 4-4"/></svg>
                 </div>
 
                 {#if patrolsOpen}
                 {#if showCreateForm && canEditPatrols}
                     <div class="create-form">
-                        <input
-                            class="create-input"
-                            placeholder="Patrol name…"
-                            bind:value={newPatrolName}
-                            onkeydown={(e) => e.key === "Enter" && createPatrol()}
-                            autofocus
-                        />
+                        <input class="create-input" placeholder="Patrol name…" bind:value={newPatrolName} onkeydown={(e) => e.key === "Enter" && createPatrol()} autofocus />
                         <div class="color-row">
                             {#each PATROL_COLORS as c}
-                                <button
-                                    class="color-swatch"
-                                    class:selected={newPatrolColor === c}
-                                    style="background:{c}"
-                                    onclick={() => (newPatrolColor = c)}
-                                    type="button"
-                                ></button>
+                                <button class="color-swatch" class:selected={newPatrolColor === c} style="background:{c}" onclick={() => (newPatrolColor = c)} type="button"></button>
                             {/each}
                         </div>
                         <div class="create-actions">
@@ -826,40 +1247,22 @@
                 {/if}
 
                 <div class="panel-content">
-                    {#if patrols.length === 0}
-                        <div class="empty-hint">No patrols yet.<br/>Press + above.</div>
-                    {/if}
+                    {#if patrols.length === 0}<div class="empty-hint">No patrols yet.<br/>Press + above.</div>{/if}
 
                     {#each patrols as patrol, idx (patrol.id)}
-                        <div
-                            class="patrol-card"
-                            class:drag-over={dragOverPatrolId === patrol.id}
-                            class:sort-over={dragOverPatrolSortId === patrol.id}
-                            data-patrol-id={patrol.id}
-                        >
+                        <div class="patrol-card" class:drag-over={dragOverPatrolId === patrol.id} class:sort-over={dragOverPatrolSortId === patrol.id} data-patrol-id={patrol.id}>
                             <div class="patrol-header">
                                 {#if canEditPatrols}
-                                    <div
-                                        class="patrol-sort-handle"
-                                        title="Drag to reorder"
-                                        onmousedown={(e) => onMouseDown(e, "patrol", patrol.id, patrol.name)}
-                                    >⠿</div>
+                                    <div class="patrol-sort-handle" title="Drag to reorder" onmousedown={(e) => onMouseDown(e, "patrol", patrol.id, patrol.name)}>⠿</div>
                                 {/if}
                                 <div class="patrol-color-bar" style="background:{patrol.color}"></div>
                                 {#if editingPatrolId === patrol.id && canEditPatrols}
-                                    <input
-                                        class="patrol-name-edit"
-                                        bind:value={editingPatrolName}
+                                    <input class="patrol-name-edit" bind:value={editingPatrolName}
                                         onblur={() => { const n = editingPatrolName.trim(); if (n) renamePatrolOnServer(patrol.id, n); editingPatrolId = null; }}
                                         onkeydown={(e) => { if (e.key === "Enter") { const n = editingPatrolName.trim(); if (n) renamePatrolOnServer(patrol.id, n); editingPatrolId = null; } if (e.key === "Escape") editingPatrolId = null; }}
-                                        autofocus
-                                    />
+                                        autofocus />
                                 {:else}
-                                    <span
-                                        class="patrol-name"
-                                        ondblclick={() => { if (canEditPatrols) { editingPatrolId = patrol.id; editingPatrolName = patrol.name; } }}
-                                        title={canEditPatrols ? "Double-click to rename" : ""}
-                                    >{patrol.name}</span>
+                                    <span class="patrol-name" ondblclick={() => { if (canEditPatrols) { editingPatrolId = patrol.id; editingPatrolName = patrol.name; } }} title={canEditPatrols ? "Double-click to rename" : ""}>{patrol.name}</span>
                                 {/if}
                                 <span class="patrol-count">{patrol.memberIds.length}</span>
                                 {#if canEditPatrols}
@@ -873,10 +1276,43 @@
                                 {/if}
                             </div>
 
+                            {#if canEditPatrols}
+                                <div class="zone-controls">
+                                    {#if drawingPatrolId === patrol.id}
+                                        <div class="zone-drawing-active">
+                                            <span class="zone-pulse" style="background:{patrol.color}"></span>Drawing…
+                                        </div>
+                                    {:else if patrol.zonePoints && patrol.zonePoints.length >= 3}
+                                        <div class="zone-info">
+                                            <span class="zone-badge" style="background:{patrol.color}20;border-color:{patrol.color}40;color:{patrol.color}">
+                                                <svg width="8" height="8" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 11 L3 5 L8 1 L11 4 L7 9 Z"/></svg>
+                                                Zone · {patrol.zonePoints.length} pts
+                                            </span>
+                                            <button class="zone-btn zone-btn--edit" onclick={() => startDrawing(patrol.id)} title="Redraw zone" type="button">
+                                                <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 1.5l2 2L4 10 1.5 10.5 2 8z"/><path d="M7 3l2 2"/></svg>
+                                            </button>
+                                            <button class="zone-btn zone-btn--clear" onclick={() => clearZone(patrol.id)} title="Clear zone" type="button">
+                                                <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l8 8M10 2L2 10"/></svg>
+                                            </button>
+                                        </div>
+                                    {:else}
+                                        <button class="zone-btn zone-btn--draw" onclick={() => startDrawing(patrol.id)} type="button">
+                                            <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 11 L3 5 L8 1 L11 4 L7 9 Z"/><path d="M3 5 L7 9"/></svg>
+                                            Draw zone
+                                        </button>
+                                    {/if}
+                                </div>
+                            {:else if patrol.zonePoints && patrol.zonePoints.length >= 3}
+                                <div class="zone-controls">
+                                    <div class="zone-info">
+                                        <span class="zone-indicator" style="background:{patrol.color}"></span>
+                                        <span class="zone-pts">Zone active</span>
+                                    </div>
+                                </div>
+                            {/if}
+
                             {#if patrol.memberIds.length === 0}
-                                {#if canManagePatrols}
-                                    <div class="drop-hint">Drag an officer here →</div>
-                                {/if}
+                                {#if canManagePatrols}<div class="drop-hint">Drag an officer here →</div>{/if}
                             {:else}
                                 {#each patrol.memberIds as mid}
                                     {@const officer = officers.find(o => o.citizenid === mid)}
@@ -893,545 +1329,262 @@
                 </div>
                 {/if}
             </div>
-
         </div>
         {/if}
-
     </div>
 </div>
 
 <style>
-    /* ── Leaflet global overrides ───────────────────────────────── */
-    :global(.leaflet-popup-content-wrapper) {
-        background: var(--dark-bg);
-        color: rgba(255, 255, 255, 0.8);
-        border-radius: 8px;
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        box-shadow: none;
-    }
+    :global(.leaflet-popup-content-wrapper) { background: var(--dark-bg); color: rgba(255,255,255,0.8); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); box-shadow: none; }
     :global(.leaflet-popup-tip) { background: var(--dark-bg); }
-    :global(.leaflet-tooltip) {
-        background: var(--dark-bg);
-        color: rgba(255, 255, 255, 0.8);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 6px;
-        font-size: 11px;
-        padding: 4px 8px;
-        box-shadow: none;
-    }
+    :global(.leaflet-tooltip) { background: var(--dark-bg); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; font-size: 11px; padding: 4px 8px; box-shadow: none; }
     :global(.leaflet-tooltip-top::before) { border-top-color: #111111; }
-    :global(.leaflet-control-zoom) {
-        border: 1px solid rgba(255, 255, 255, 0.06) !important;
-        border-radius: 8px !important;
-        overflow: hidden;
-        box-shadow: none !important;
-    }
-    :global(.leaflet-control-zoom a) {
-        background: rgba(17, 17, 17, 0.92) !important;
-        color: rgba(255, 255, 255, 0.6) !important;
-        border-color: rgba(255, 255, 255, 0.04) !important;
-        width: 30px !important; height: 30px !important;
-        line-height: 30px !important; font-size: 14px !important;
-    }
-    :global(.leaflet-control-zoom a:hover) {
-        background: rgba(255, 255, 255, 0.08) !important;
-        color: rgba(255, 255, 255, 0.9) !important;
-    }
-
-    /* ── Patrol label (on map) ─────────────────────────────────── */
-    :global(.patrol-label) {
-        background: rgba(0, 0, 0, 0.55);
-        border: 1px solid;
-        border-radius: 4px;
-        padding: 2px 6px;
-        font-size: 9px;
-        font-weight: 600;
-        letter-spacing: 0.4px;
-        text-transform: uppercase;
-        white-space: nowrap;
-        pointer-events: none;
-        opacity: 0.7;
-    }
-
-    /* ── Marker globals ────────────────────────────────────────── */
-    :global(.tracking-icon) {
-        width: 22px; height: 22px;
-        border-radius: 5px;
-        display: flex; align-items: center; justify-content: center;
-        font-size: 11px; font-weight: 700; color: #0c0c0c;
-    }
+    :global(.leaflet-control-zoom) { border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px !important; overflow: hidden; box-shadow: none !important; }
+    :global(.leaflet-control-zoom a) { background: rgba(17,17,17,0.92) !important; color: rgba(255,255,255,0.6) !important; border-color: rgba(255,255,255,0.04) !important; width: 30px !important; height: 30px !important; line-height: 30px !important; font-size: 14px !important; }
+    :global(.leaflet-control-zoom a:hover) { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.9) !important; }
+    :global(.patrol-label) { background: rgba(0,0,0,0.55); border: 1px solid; border-radius: 4px; padding: 2px 6px; font-size: 9px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0.7; }
+    :global(.patrol-zone-poly) { transition: fill-opacity 0.2s; }
+    :global(.patrol-zone-poly:hover) { fill-opacity: 0.22 !important; }
+    :global(.zone-label) { background: rgba(0,0,0,0.62); border: 1px solid; border-radius: 5px; padding: 3px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0.85; transform: translateX(-50%); display: inline-block; }
+    :global(.tracking-icon) { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #0c0c0c; }
     :global(.tracking-vehicle) { background: #f97316; }
     :global(.tracking-bodycam) { background: #a855f7; }
-    :global(.tracking-dot-wrap), :global(.tracking-badge-wrap) {
-        position: relative;
-        display: flex; align-items: center; justify-content: center;
-        width: 100%; height: 100%;
-    }
+    :global(.tracking-dot-wrap), :global(.tracking-badge-wrap) { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
     :global(.tracking-dot) { width: 12px; height: 12px; border-radius: 50%; }
-    :global(.tracking-arrow) {
-        position: absolute; top: -7px; left: 50%;
-        transform: translateX(-50%);
-        width: 0; height: 0;
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
-    }
+    :global(.tracking-arrow) { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
     :global(.tracking-arrow-vehicle) { border-bottom: 8px solid #f97316; }
     :global(.tracking-arrow-bodycam) { border-bottom: 8px solid #a855f7; }
-
-    /* ── Page layout ──────────────────────────────────────────── */
-    .map-page {
-        height: 100%;
-        padding: 10px 20px 20px;
-        background: var(--card-dark-bg);
-    }
-    .map-wrapper {
-        position: relative;
-        width: 100%; height: 100%;
-        border-radius: 10px;
-        overflow: hidden;
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        display: flex;
-    }
-    .map-container { flex: 1; height: 100%; }
-    .map-no-pointer { pointer-events: none !important; }
-
-    /* ── Drag Ghost (global, fixed) ───────────────────────────── */
-    :global(.drag-ghost) {
+    /* Parked / last-known vehicles served from the server cache — dimmed + dashed */
+    :global(.tracking-cached) { opacity: 0.5; }
+    :global(.tracking-cached .tracking-dot) { border-style: dashed !important; }
+    :global(.map-cursor-none) { cursor: none !important; }
+    :global(.map-cursor-none .leaflet-interactive) { cursor: none !important; }
+    :global(.map-cursor-none .leaflet-container) { cursor: none !important; }
+
+    /* DOM-based drawing cursor dot – positioned in viewport coords, immune to CSS zoom */
+    :global(.draw-cursor-dot) {
         position: fixed;
-        z-index: 9999;
+        z-index: 99999;
         pointer-events: none;
-        padding: 5px 10px;
-        border-radius: 6px;
-        font-size: 11px;
-        font-weight: 600;
-        white-space: nowrap;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-        transform: rotate(2deg);
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--dot-color, #38bdf8);
+        border: 2px solid rgba(255,255,255,0.9);
+        box-shadow: 0 0 0 1px var(--dot-color, #38bdf8), 0 2px 6px rgba(0,0,0,0.4);
+        transform: translate(-50%, -50%);
         transition: none;
     }
-    :global(.drag-ghost--officer) {
-        background: rgba(30,30,30,0.97);
-        border: 1px solid rgba(255,255,255,0.15);
-        color: rgba(255,255,255,0.9);
+    /* Officer highlight ring */
+    :global(.officer-highlight-ring) {
+        width: 40px; height: 40px;
+        border-radius: 50%;
+        border: 2.5px solid var(--ring-color, #38bdf8);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring-color, #38bdf8) 20%, transparent);
+        animation: ring-pulse 1.4s ease-in-out infinite;
+        pointer-events: none;
     }
-    :global(.drag-ghost--patrol) {
-        background: rgba(30,30,30,0.97);
-        border: 1px solid rgba(255,255,255,0.12);
-        color: rgba(255,255,255,0.7);
+    @keyframes ring-pulse {
+        0%, 100% { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring-color,#38bdf8) 20%, transparent); }
+        50%       { transform: scale(1.18); opacity: 0.75; box-shadow: 0 0 0 8px color-mix(in srgb, var(--ring-color,#38bdf8) 8%,  transparent); }
+    }
+
+    /* Officer popup */
+    :global(.officer-popup .leaflet-popup-content-wrapper) {
+        background: rgba(13,13,13,0.97) !important;
+        border: 1px solid rgba(255,255,255,0.1) !important;
+        border-radius: 10px !important;
+        padding: 0 !important;
+        min-width: 190px;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
+    }
+    :global(.officer-popup .leaflet-popup-content) { margin: 0 !important; }
+    :global(.officer-popup .leaflet-popup-tip-container) { display: none; }
+    :global(.officer-popup .leaflet-popup-close-button) {
+        color: rgba(255,255,255,0.25) !important;
+        font-size: 14px !important;
+        top: 4px !important; right: 6px !important;
+        width: 20px !important; height: 20px !important;
+        line-height: 20px !important;
+    }
+    :global(.officer-popup .leaflet-popup-close-button:hover) { color: rgba(255,255,255,0.8) !important; }
+
+    :global(.op-wrap)   { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; }
+    :global(.op-header) {
+        padding: 10px 30px 8px 12px; /* right padding makes room for the × button */
+        background: linear-gradient(135deg, color-mix(in srgb, var(--op-color,#38bdf8) 15%, transparent), transparent);
+        border-bottom: 1px solid rgba(255,255,255,0.06);
+        display: flex; flex-direction: column; gap: 3px;
     }
+    :global(.op-name)           { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.95); line-height: 1.2; }
+    :global(.op-callsign-badge) {
+        font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
+        background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
+        color: rgba(255,255,255,0.55); border-radius: 4px; padding: 1px 5px;
+        white-space: nowrap; align-self: flex-start;
+    }
+    :global(.op-body)    { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; }
+    :global(.op-row)     { display: flex; align-items: center; gap: 6px; font-size: 10px; }
+    :global(.op-label)   { color: rgba(255,255,255,0.25); min-width: 48px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; }
+    :global(.op-value)   { color: rgba(255,255,255,0.75); font-weight: 500; }
+    :global(.op-patrol)  { font-weight: 600; font-size: 10px; }
+    :global(.op-patrol--none) { color: rgba(255,255,255,0.3); font-weight: 500; }
+    :global(.op-badge)   { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
+    :global(.op-badge--vehicle) { background: rgba(249,115,22,0.15); color: rgba(249,115,22,0.9); }
+    :global(.op-badge--foot)    { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
+    :global(.op-heading) { display: inline-flex; align-items: center; gap: 3px; color: rgba(255,255,255,0.4); font-size: 9px; margin-left: auto; }
+    :global(.op-row--coords) {
+        border-top: 1px solid rgba(255,255,255,0.05);
+        padding-top: 5px; margin-top: 2px;
+        font-variant-numeric: tabular-nums;
+    }
+    :global(.op-row--coords .op-value) { color: rgba(255,255,255,0.4); font-size: 9px; }
+
+    /* Selected officer card highlight */
+    .officer-selected {
+        border-color: rgba(56,189,248,0.35) !important;
+        background: rgba(56,189,248,0.06) !important;
+    }
+
+    :global(.drag-ghost) { position: fixed; z-index: 9999; pointer-events: none; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transform: rotate(2deg); transition: none; }
+    :global(.drag-ghost--officer) { background: rgba(30,30,30,0.97); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
+    :global(.drag-ghost--patrol) { background: rgba(30,30,30,0.97); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
+
+    .map-page { height: 100%; padding: 10px 20px 20px; background: var(--card-dark-bg); }
+    .map-wrapper { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); display: flex; }
+    .map-container { flex: 1; height: 100%; }
+    .map-no-pointer { pointer-events: none !important; }
     .officer-card.dragging { opacity: 0.35; }
 
-    /* ── Left Controls ────────────────────────────────────────── */
-    .map-controls {
-        position: absolute;
-        z-index: 1001;
-        top: 12px; left: 12px;
-        background: rgba(17, 17, 17, 0.92);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 10px;
-        padding: 12px 14px;
-        min-width: 160px;
-        color: rgba(255, 255, 255, 0.9);
-        font-size: 12px;
-    }
-    .controls-header {
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        font-size: 11px;
-        color: rgba(255, 255, 255, 0.5);
-        margin-bottom: 10px;
-        display: block;
-    }
+    .drawing-hud { position: absolute; z-index: 1010; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(10,10,12,0.94); border: 1px solid var(--zone-color,#38bdf8); border-radius: 10px; padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 300px; box-shadow: 0 0 24px rgba(0,0,0,0.5); pointer-events: auto; }
+    .drawing-hud-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9); }
+    .drawing-hud-title strong { color: var(--zone-color,#38bdf8); }
+    .drawing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zone-color,#38bdf8); box-shadow: 0 0 6px var(--zone-color,#38bdf8); animation: pulse-dot 1.2s ease-in-out infinite; }
+    @keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.7); } }
+    .drawing-hud-hints { font-size: 10px; color: rgba(255,255,255,0.35); line-height: 1.5; }
+    .drawing-hud-hints kbd { display: inline-block; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; padding: 0 4px; font-size: 9px; font-family: inherit; color: rgba(255,255,255,0.55); }
+    .drawing-hud-count { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.4); }
+    .drawing-hud-actions { display: flex; gap: 5px; margin-top: 2px; }
+    .hud-btn { flex: 1; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.12s; border: 1px solid; }
+    .hud-btn--finish { background: rgba(56,189,248,0.15); border-color: var(--zone-color,#38bdf8); color: var(--zone-color,#38bdf8); }
+    .hud-btn--finish:hover:not(:disabled) { background: rgba(56,189,248,0.28); }
+    .hud-btn--finish:disabled { opacity: 0.3; cursor: default; }
+    .hud-btn--cancel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
+    .hud-btn--cancel:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.7); }
+
+    .map-controls { position: absolute; z-index: 1001; top: 12px; left: 12px; background: rgba(17,17,17,0.92); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 14px; min-width: 160px; color: rgba(255,255,255,0.9); font-size: 12px; }
+    .controls-header { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 10px; display: block; }
     .controls-group { display: flex; flex-direction: column; gap: 6px; }
-    .controls-label {
-        font-size: 11px; font-weight: 600;
-        text-transform: uppercase; letter-spacing: 0.5px;
-        color: rgba(255, 255, 255, 0.5); margin-bottom: 2px;
-    }
-    .controls-divider {
-        height: 1px;
-        background: rgba(255, 255, 255, 0.04);
-        margin: 10px 0;
-    }
-    .control-toggle {
-        display: flex; align-items: center; gap: 8px;
-        cursor: pointer; font-size: 12px;
-        color: rgba(255, 255, 255, 0.7);
-    }
-    .control-toggle input[type="checkbox"] {
-        width: 14px; height: 14px;
-        accent-color: rgba(var(--accent-rgb), 0.7);
-        cursor: pointer;
-    }
+    .controls-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
+    .controls-divider { height: 1px; background: rgba(255,255,255,0.04); margin: 10px 0; }
+    .control-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: rgba(255,255,255,0.7); }
+    .control-toggle input[type="checkbox"] { width: 14px; height: 14px; accent-color: rgba(var(--accent-rgb),0.7); cursor: pointer; }
     .segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
-    .segment button {
-        border-radius: 6px;
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        background: rgba(255, 255, 255, 0.04);
-        color: rgba(255, 255, 255, 0.5);
-        font-size: 11px; font-weight: 500;
-        padding: 5px 8px; cursor: pointer;
-        transition: all 0.1s ease;
-    }
+    .segment button { border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 500; padding: 5px 8px; cursor: pointer; transition: all 0.1s ease; }
     .segment button:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
-    .segment button.active {
-        background: rgba(255,255,255,0.08);
-        border-color: rgba(255,255,255,0.12);
-        color: rgba(255,255,255,0.9);
-    }
+    .segment button.active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }
     .legend { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.45); }
     .legend-item { display: flex; align-items: center; gap: 8px; }
-    .legend-item::before {
-        content: ""; width: 6px; height: 6px;
-        border-radius: 50%; display: inline-block; flex-shrink: 0;
-        background: var(--dot, #888);
-    }
-    .legend-item.vehicle::before { background: #f97316; }
-    .legend-item.bodycam-unassigned::before { background: #6b7280; }
-
-    /* ── Sidebar Toggle Button ────────────────────────────────── */
-    .sidebar-toggle {
-        position: absolute;
-        z-index: 1002;
-        right: 0; top: 50%;
-        transform: translateY(-50%);
-        display: flex; align-items: center; gap: 6px;
-        background: rgba(17, 17, 17, 0.92);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-right: none;
-        border-radius: 8px 0 0 8px;
-        padding: 10px 10px;
-        color: rgba(255, 255, 255, 0.6);
-        font-size: 11px; font-weight: 600;
-        letter-spacing: 0.4px;
-        cursor: pointer;
-        transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s;
-        writing-mode: vertical-rl;
-        text-orientation: mixed;
-    }
+    .legend-item::before { content:""; width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0; background:var(--dot,#888); }
+    .legend-item.vehicle::before { background:#f97316; }
+    .legend-item.vehicle-parked::before { background:#f97316; opacity:0.45; }
+    .legend-item.bodycam-unassigned::before { background:#6b7280; }
+
+    .sidebar-toggle { position: absolute; z-index: 1002; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; background: rgba(17,17,17,0.92); border: 1px solid rgba(255,255,255,0.08); border-right: none; border-radius: 8px 0 0 8px; padding: 10px 10px; color: rgba(255,255,255,0.6); font-size: 11px; font-weight: 600; letter-spacing: 0.4px; cursor: pointer; transition: right 0.25s cubic-bezier(0.4,0,0.2,1), background 0.15s; writing-mode: vertical-rl; text-orientation: mixed; }
     .sidebar-toggle:hover { background: rgba(30,30,30,0.95); color: rgba(255,255,255,0.9); }
-    .sidebar-toggle.open { right: var(--sidebar-width, 520px); }
+    .sidebar-toggle.open { right: var(--sidebar-width,520px); }
     .sidebar-toggle-label { writing-mode: vertical-rl; text-orientation: mixed; }
 
-    /* ── Right Sidebar (split) ────────────────────────────────── */
-    .sidebar {
-        position: absolute;
-        z-index: 1001;
-        top: 0; right: 0; bottom: 0;
-        width: var(--sidebar-width, 520px);
-        display: flex; flex-direction: row;
-        background: rgba(13, 13, 13, 0.96);
-        border-left: 1px solid rgba(255, 255, 255, 0.06);
-        transform: translateX(100%);
-        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-                    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-        overflow: hidden;
-    }
+    .sidebar { position: absolute; z-index: 1001; top: 0; right: 0; bottom: 0; width: var(--sidebar-width,520px); display: flex; flex-direction: row; background: rgba(13,13,13,0.96); border-left: 1px solid rgba(255,255,255,0.06); transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s cubic-bezier(0.4,0,0.2,1); overflow: hidden; }
     .sidebar--open { transform: translateX(0); }
-
-    /* ── Panels ───────────────────────────────────────────────── */
-    .panel {
-        display: flex; flex-direction: column;
-        overflow: hidden;
-        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    }
+    .panel { display: flex; flex-direction: column; overflow: hidden; transition: width 0.25s cubic-bezier(0.4,0,0.2,1); }
     .panel--open { width: 260px; flex-shrink: 0; }
     .panel--closed { width: 36px; flex-shrink: 0; }
-
-    .panel-divider {
-        width: 1px;
-        background: rgba(255, 255, 255, 0.05);
-        flex-shrink: 0;
-    }
-    .panel-header {
-        display: flex; align-items: center; gap: 6px;
-        padding: 11px 12px 10px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        flex-shrink: 0;
-        min-height: 40px;
-    }
-    .panel--closed .panel-header {
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        padding: 10px 0;
-        gap: 4px;
-        border-bottom: none;
-        height: 100%;
-        overflow: hidden;
-    }
-    .panel-title-vertical {
-        writing-mode: vertical-rl;
-        text-orientation: mixed;
-        font-size: 10px; font-weight: 700;
-        text-transform: uppercase; letter-spacing: 0.5px;
-        color: rgba(255, 255, 255, 0.3);
-        flex: 1;
-        margin-top: 6px;
-    }
+    .panel-divider { width: 1px; background: rgba(255,255,255,0.05); flex-shrink: 0; }
+    .panel-header { display: flex; align-items: center; gap: 6px; padding: 11px 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; min-height: 40px; }
+    .panel--closed .panel-header { flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 0; gap: 4px; border-bottom: none; height: 100%; overflow: hidden; }
+    .panel-title-vertical { writing-mode: vertical-rl; text-orientation: mixed; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.3); flex: 1; margin-top: 6px; }
     .panel--closed .panel-chevron { transform: rotate(-90deg); }
     .panel--closed .panel-chevron.rotated { transform: rotate(90deg); }
-    .panel-header--clickable {
-        cursor: pointer;
-        user-select: none;
-        transition: background 0.1s;
-    }
+    .panel-header--clickable { cursor: pointer; user-select: none; transition: background 0.1s; }
     .panel-header--clickable:hover { background: rgba(255,255,255,0.03); }
-    .panel-chevron {
-        color: rgba(255,255,255,0.25);
-        flex-shrink: 0;
-        transition: transform 0.2s ease;
-    }
+    .panel-chevron { color: rgba(255,255,255,0.25); flex-shrink: 0; transition: transform 0.2s ease; }
     .panel-chevron.rotated { transform: rotate(-90deg); }
-    .panel-title {
-        font-size: 11px; font-weight: 700;
-        text-transform: uppercase; letter-spacing: 0.5px;
-        color: rgba(255, 255, 255, 0.5);
-        flex: 1;
-    }
-    .tab-badge {
-        background: rgba(255, 255, 255, 0.07);
-        border-radius: 10px;
-        padding: 1px 6px;
-        font-size: 10px;
-        color: rgba(255, 255, 255, 0.35);
-    }
-    .btn-icon-add {
-        display: flex; align-items: center; justify-content: center;
-        width: 22px; height: 22px;
-        background: rgba(255,255,255,0.05);
-        border: 1px solid rgba(255,255,255,0.08);
-        border-radius: 5px;
-        color: rgba(255,255,255,0.5);
-        cursor: pointer;
-        transition: all 0.1s;
-        flex-shrink: 0;
-    }
+    .panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); flex: 1; }
+    .tab-badge { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 1px 6px; font-size: 10px; color: rgba(255,255,255,0.35); }
+    .btn-icon-add { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; color: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.1s; flex-shrink: 0; }
     .btn-icon-add:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
-
-    .panel-content {
-        flex: 1;
-        overflow-y: auto;
-        padding: 8px;
-        display: flex; flex-direction: column; gap: 3px;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255,255,255,0.07) transparent;
-        min-height: 0;
-    }
-
-    .section-label {
-        display: flex; align-items: center; gap: 5px;
-        font-size: 10px; font-weight: 700;
-        text-transform: uppercase; letter-spacing: 0.5px;
-        color: rgba(255, 255, 255, 0.25);
-        padding: 5px 3px 2px;
-    }
-    .section-dot {
-        width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
-    }
-
-    .empty-hint {
-        text-align: center; font-size: 11px;
-        color: rgba(255, 255, 255, 0.18);
-        padding: 20px 10px; line-height: 1.6;
-    }
-
-    /* ── Officer Cards ────────────────────────────────────────── */
-    .officer-card {
-        display: flex; align-items: center; gap: 7px;
-        padding: 7px 8px;
-        background: rgba(255, 255, 255, 0.03);
-        border: 1px solid rgba(255, 255, 255, 0.05);
-        border-radius: 6px;
-        cursor: grab;
-        transition: background 0.1s, border-color 0.1s;
-        user-select: none;
-        flex-shrink: 0;
-    }
+    .panel-content { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.07) transparent; min-height: 0; }
+    .section-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.25); padding: 5px 3px 2px; }
+    .section-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+    .empty-hint { text-align: center; font-size: 11px; color: rgba(255,255,255,0.18); padding: 20px 10px; line-height: 1.6; }
+    .officer-card { display: flex; align-items: center; gap: 7px; padding: 7px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; cursor: grab; transition: background 0.1s, border-color 0.1s; user-select: none; flex-shrink: 0; }
     .officer-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); }
     .officer-card:active { cursor: grabbing; }
     .officer-card--assigned { opacity: 0.65; }
-    .officer-drag-handle {
-        flex-shrink: 0; font-size: 14px; line-height: 1;
-        color: rgba(255,255,255,0.2); cursor: grab;
-    }
+    .officer-drag-handle { flex-shrink: 0; font-size: 14px; line-height: 1; color: rgba(255,255,255,0.2); cursor: grab; }
     .officer-info { flex: 1; min-width: 0; }
-    .officer-name {
-        display: block; font-size: 11px; font-weight: 500;
-        color: rgba(255,255,255,0.82);
-        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
-    .officer-meta {
-        display: block; font-size: 10px;
-        color: rgba(255,255,255,0.28);
-        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
-    .officer-kick {
-        background: transparent; border: none;
-        color: rgba(255,255,255,0.15); font-size: 15px; line-height: 1;
-        cursor: pointer; padding: 0 2px; border-radius: 3px;
-        transition: all 0.1s; flex-shrink: 0;
-    }
+    .officer-name { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .officer-meta { display: block; font-size: 10px; color: rgba(255,255,255,0.28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .officer-kick { background: transparent; border: none; color: rgba(255,255,255,0.15); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 3px; transition: all 0.1s; flex-shrink: 0; }
     .officer-kick:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
-
-    /* ── Create Form ──────────────────────────────────────────── */
-    .create-form {
-        display: flex; flex-direction: column; gap: 7px;
-        padding: 8px;
-        background: rgba(255,255,255,0.03);
-        border-bottom: 1px solid rgba(255,255,255,0.06);
-        flex-shrink: 0;
-    }
-    .create-input {
-        background: rgba(255,255,255,0.05);
-        border: 1px solid rgba(255,255,255,0.08);
-        border-radius: 5px;
-        padding: 6px 9px;
-        color: rgba(255,255,255,0.9);
-        font-size: 12px; outline: none; width: 100%;
-        box-sizing: border-box;
-    }
+    .officer-search { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); flex-shrink: 0; }
+    .officer-search svg { flex-shrink: 0; color: rgba(255,255,255,0.25); }
+    .officer-search-input { flex: 1; min-width: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 5px 8px; color: rgba(255,255,255,0.85); font-size: 11px; outline: none; }
+    .officer-search-input:focus { border-color: rgba(255,255,255,0.2); }
+    .officer-search-input::placeholder { color: rgba(255,255,255,0.25); }
+    .officer-search-clear { background: transparent; border: none; color: rgba(255,255,255,0.3); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
+    .officer-search-clear:hover { color: rgba(255,255,255,0.8); }
+    .create-form { display: flex; flex-direction: column; gap: 7px; padding: 8px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
+    .create-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 6px 9px; color: rgba(255,255,255,0.9); font-size: 12px; outline: none; width: 100%; box-sizing: border-box; }
     .create-input:focus { border-color: rgba(255,255,255,0.2); }
     .color-row { display: flex; gap: 5px; flex-wrap: wrap; }
-    .color-swatch {
-        width: 18px; height: 18px; border-radius: 50%;
-        border: 2px solid transparent;
-        cursor: pointer; transition: transform 0.1s;
-    }
+    .color-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s; }
     .color-swatch:hover { transform: scale(1.15); }
     .color-swatch.selected { border-color: rgba(255,255,255,0.75); transform: scale(1.1); }
     .create-actions { display: flex; gap: 5px; }
-    .btn-create {
-        flex: 1; padding: 6px;
-        background: rgba(var(--accent-rgb), 0.14);
-        border: 1px solid rgba(var(--accent-rgb), 0.28);
-        border-radius: 5px;
-        color: rgba(255,255,255,0.8);
-        font-size: 11px; font-weight: 600;
-        cursor: pointer; transition: all 0.1s;
-    }
-    .btn-create:hover { background: rgba(var(--accent-rgb), 0.24); }
-    .btn-cancel {
-        padding: 6px 10px;
-        background: rgba(255,255,255,0.04);
-        border: 1px solid rgba(255,255,255,0.06);
-        border-radius: 5px;
-        color: rgba(255,255,255,0.35);
-        font-size: 11px; cursor: pointer; transition: all 0.1s;
-    }
+    .btn-create { flex: 1; padding: 6px; background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 5px; color: rgba(255,255,255,0.8); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.1s; }
+    .btn-create:hover { background: rgba(var(--accent-rgb),0.24); }
+    .btn-cancel { padding: 6px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; color: rgba(255,255,255,0.35); font-size: 11px; cursor: pointer; transition: all 0.1s; }
     .btn-cancel:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
-
-    /* ── Patrol Cards ─────────────────────────────────────────── */
-    .patrol-card {
-        background: rgba(255,255,255,0.03);
-        border: 1px solid rgba(255,255,255,0.05);
-        border-radius: 7px;
-        overflow: hidden;
-        transition: border-color 0.15s, background 0.15s;
-        margin-bottom: 2px;
-        min-height: 36px;
-        flex-shrink: 0;
-    }
-    .patrol-card.drag-over {
-        border-color: rgba(255,255,255,0.22);
-        background: rgba(255,255,255,0.06);
-    }
-    .patrol-card.sort-over {
-        border-color: rgba(var(--accent-rgb), 0.5);
-        background: rgba(var(--accent-rgb), 0.06);
-    }
-    .patrol-header {
-        display: flex; align-items: center; gap: 7px;
-        padding: 7px 8px;
-    }
+    .patrol-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 7px; overflow: hidden; transition: border-color 0.15s, background 0.15s; margin-bottom: 2px; min-height: 36px; flex-shrink: 0; }
+    .patrol-card.drag-over { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
+    .patrol-card.sort-over { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.06); }
+    .patrol-header { display: flex; align-items: center; gap: 7px; padding: 7px 8px; }
     .patrol-color-bar { width: 3px; height: 20px; border-radius: 2px; flex-shrink: 0; }
-    .patrol-name {
-        flex: 1; font-size: 11px; font-weight: 600;
-        color: rgba(255,255,255,0.82); cursor: default;
-    }
-    .patrol-name-edit {
-        flex: 1;
-        background: rgba(255,255,255,0.07);
-        border: 1px solid rgba(255,255,255,0.15);
-        border-radius: 3px; padding: 1px 5px;
-        font-size: 11px; font-weight: 600;
-        color: rgba(255,255,255,0.9); outline: none;
-    }
-    .patrol-count {
-        font-size: 10px; font-weight: 700;
-        color: rgba(255,255,255,0.22);
-        background: rgba(255,255,255,0.05);
-        border-radius: 10px; padding: 1px 6px;
-    }
-    .patrol-delete {
-        background: transparent; border: none;
-        color: rgba(255,255,255,0.18);
-        cursor: pointer; padding: 2px;
-        display: flex; align-items: center; border-radius: 3px;
-        transition: all 0.1s;
-    }
+    .patrol-name { flex: 1; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.82); cursor: default; }
+    .patrol-name-edit { flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 5px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); outline: none; }
+    .patrol-count { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); border-radius: 10px; padding: 1px 6px; }
+    .patrol-delete { background: transparent; border: none; color: rgba(255,255,255,0.18); cursor: pointer; padding: 2px; display: flex; align-items: center; border-radius: 3px; transition: all 0.1s; }
     .patrol-delete:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
-
-    .patrol-sort-handle {
-        font-size: 13px; line-height: 1;
-        color: rgba(255,255,255,0.18);
-        cursor: grab; flex-shrink: 0;
-        padding: 0 2px;
-    }
+    .patrol-sort-handle { font-size: 13px; line-height: 1; color: rgba(255,255,255,0.18); cursor: grab; flex-shrink: 0; padding: 0 2px; }
     .patrol-sort-handle:active { cursor: grabbing; }
-
-    .patrol-sort-arrows {
-        display: flex; flex-direction: column; gap: 1px; flex-shrink: 0;
-    }
-    .sort-arrow {
-        background: transparent; border: none;
-        color: rgba(255,255,255,0.2);
-        font-size: 8px; line-height: 1;
-        cursor: pointer; padding: 1px 2px;
-        border-radius: 2px; transition: all 0.1s;
-    }
+    .patrol-sort-arrows { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
+    .sort-arrow { background: transparent; border: none; color: rgba(255,255,255,0.2); font-size: 8px; line-height: 1; cursor: pointer; padding: 1px 2px; border-radius: 2px; transition: all 0.1s; }
     .sort-arrow:hover:not(:disabled) { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
     .sort-arrow:disabled { opacity: 0.2; cursor: default; }
-
-    .drop-hint {
-        font-size: 10px; color: rgba(255,255,255,0.15);
-        text-align: center; padding: 7px;
-        border-top: 1px dashed rgba(255,255,255,0.05);
-    }
-    .patrol-member {
-        display: flex; align-items: center; gap: 5px;
-        padding: 4px 8px 4px 18px;
-        border-top: 1px solid rgba(255,255,255,0.04);
-    }
-    .member-name {
-        font-size: 11px; color: rgba(255,255,255,0.65);
-        flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
+    .drop-hint { font-size: 10px; color: rgba(255,255,255,0.15); text-align: center; padding: 7px; border-top: 1px dashed rgba(255,255,255,0.05); }
+    .patrol-member { display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 18px; border-top: 1px solid rgba(255,255,255,0.04); }
+    .member-name { font-size: 11px; color: rgba(255,255,255,0.65); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .member-meta { font-size: 10px; color: rgba(255,255,255,0.22); white-space: nowrap; }
 
-    /* ── Assignment animations ────────────────────────────────── */
-    @keyframes anim-assign-in {
-        0%   { background: rgba(34, 197, 94, 0.18); box-shadow: 0 0 0 1px rgba(34,197,94,0.35); transform: scaleX(0.97); }
-        40%  { background: rgba(34, 197, 94, 0.10); box-shadow: 0 0 0 1px rgba(34,197,94,0.2); transform: scaleX(1.01); }
-        100% { background: transparent; box-shadow: none; transform: scaleX(1); }
-    }
-    @keyframes anim-remove-in {
-        0%   { background: rgba(239, 68, 68, 0.15); box-shadow: 0 0 0 1px rgba(239,68,68,0.3); opacity: 1; transform: scaleX(1); }
-        60%  { background: rgba(239, 68, 68, 0.08); opacity: 0.7; transform: scaleX(0.98); }
-        100% { background: transparent; box-shadow: none; opacity: 1; transform: scaleX(1); }
-    }
-    @keyframes slide-down {
-        0%   { opacity: 0; transform: translateY(-6px); }
-        100% { opacity: 1; transform: translateY(0); }
-    }
-
-    .anim-assigned {
-        animation: anim-assign-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards,
-                   slide-down 0.25s ease-out;
-    }
-    .anim-removed {
-        animation: anim-remove-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards,
-                   slide-down 0.25s ease-out;
-    }
+    .zone-controls { display: flex; align-items: center; padding: 4px 8px 6px; border-top: 1px solid rgba(255,255,255,0.04); }
+    .zone-btn { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 5px; padding: 3px 7px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.12s; letter-spacing: 0.3px; }
+    .zone-btn--draw:hover { background: rgba(56,189,248,0.1); border-color: rgba(56,189,248,0.3); color: rgba(56,189,248,0.9); }
+    .zone-btn--edit { padding: 3px 5px; }
+    .zone-btn--edit:hover { background: rgba(234,179,8,0.1); border-color: rgba(234,179,8,0.3); color: rgba(234,179,8,0.9); }
+    .zone-btn--clear { margin-left: auto; background: transparent; border: none; color: rgba(255,255,255,0.2); padding: 2px 4px; }
+    .zone-btn--clear:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
+    .zone-info { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
+    .zone-badge { display: inline-flex; align-items: center; gap: 4px; flex: 1; min-width: 0; padding: 2px 6px; border-radius: 4px; border: 1px solid; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .zone-indicator { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+    .zone-pts { font-size: 10px; color: rgba(255,255,255,0.3); flex: 1; }
+    .zone-drawing-active { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.5); font-style: italic; }
+    .zone-pulse { width: 6px; height: 6px; border-radius: 50%; animation: pulse-dot 1.2s ease-in-out infinite; }
+
+    @keyframes anim-assign-in { 0% { background: rgba(34,197,94,0.18); box-shadow: 0 0 0 1px rgba(34,197,94,0.35); transform: scaleX(0.97); } 40% { background: rgba(34,197,94,0.10); box-shadow: 0 0 0 1px rgba(34,197,94,0.2); transform: scaleX(1.01); } 100% { background: transparent; box-shadow: none; transform: scaleX(1); } }
+    @keyframes anim-remove-in { 0% { background: rgba(239,68,68,0.15); box-shadow: 0 0 0 1px rgba(239,68,68,0.3); opacity:1; transform: scaleX(1); } 60% { background: rgba(239,68,68,0.08); opacity:0.7; transform: scaleX(0.98); } 100% { background: transparent; box-shadow: none; opacity:1; transform: scaleX(1); } }
+    @keyframes slide-down { 0% { opacity:0; transform:translateY(-6px); } 100% { opacity:1; transform:translateY(0); } }
+    .anim-assigned { animation: anim-assign-in 0.65s cubic-bezier(0.22,1,0.36,1) forwards, slide-down 0.25s ease-out; }
+    .anim-removed  { animation: anim-remove-in 0.65s cubic-bezier(0.22,1,0.36,1) forwards, slide-down 0.25s ease-out; }
 </style>
\ No newline at end of file
diff --git a/web/src/pages/Settings.svelte b/web/src/pages/Settings.svelte
index e281e216..5f30bd4e 100644
--- a/web/src/pages/Settings.svelte
+++ b/web/src/pages/Settings.svelte
@@ -14,11 +14,40 @@
 	let showVehicles = $state(true);
 	let showBodycams = $state(false);
 
+	// Patrol
+	let patrolZoneNotifications = $state(true);
+
 	let saveStatus: string | null = $state(null);
 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	onMount(() => {
 		loadPreferences();
+
+		// Respond to Lua client asking for the patrol zone notification preference.
+		// Fires on resource start so the client has the correct value immediately.
+		function handleNuiMessage(event: MessageEvent) {
+			if (event.data?.type === "requestPatrolZonePref") {
+				const saved = localStorage.getItem(STORAGE_KEY);
+				let enabled = true; // default
+				try {
+					if (saved) {
+						const data = JSON.parse(saved);
+						if (data.patrolZoneNotifications !== undefined) {
+							enabled = data.patrolZoneNotifications;
+						}
+					}
+				} catch { /* ignore */ }
+				// Send back to Lua via NUI callback
+				fetch(`https://${(window as any).GetParentResourceName?.() ?? "ps-mdt"}/patrolZonePref`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ enabled }),
+				}).catch(() => {});
+			}
+		}
+
+		window.addEventListener("message", handleNuiMessage);
+		return () => window.removeEventListener("message", handleNuiMessage);
 	});
 
 	function loadPreferences() {
@@ -33,6 +62,7 @@
 			if (data.showOfficers !== undefined) showOfficers = data.showOfficers;
 			if (data.showVehicles !== undefined) showVehicles = data.showVehicles;
 			if (data.showBodycams !== undefined) showBodycams = data.showBodycams;
+			if (data.patrolZoneNotifications !== undefined) patrolZoneNotifications = data.patrolZoneNotifications;
 		} catch {
 			// Ignore parse errors
 		}
@@ -48,8 +78,17 @@
 				showOfficers,
 				showVehicles,
 				showBodycams,
+				patrolZoneNotifications,
 			};
 			localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+
+			// Immediately sync patrol zone pref to Lua client
+			fetch(`https://${(window as any).GetParentResourceName?.() ?? "ps-mdt"}/patrolZonePref`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ enabled: patrolZoneNotifications }),
+			}).catch(() => {});
+
 			showSaveStatus("Preferences saved");
 		} catch {
 			showSaveStatus("Failed to save");
@@ -171,6 +210,19 @@
 			</div>
 		</div>
 
+		<div class="settings-card settings-card--full">
+			<span class="card-label">Patrol</span>
+			<div class="setting-row">
+				<div class="setting-info">
+					<span class="setting-label">Zone Notifications</span>
+					<span class="setting-desc">Notify when you enter or leave your assigned patrol zone</span>
+				</div>
+				<label class="toggle">
+					<input type="checkbox" bind:checked={patrolZoneNotifications} />
+					<span class="toggle-slider"></span>
+				</label>
+			</div>
+		</div>
 	</div>
 
 	<div class="save-bar">
@@ -194,18 +246,9 @@
 		overflow-y: auto;
 	}
 
-	.settings-page::-webkit-scrollbar {
-		width: 4px;
-	}
-
-	.settings-page::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.settings-page::-webkit-scrollbar-thumb {
-		background: rgba(255, 255, 255, 0.06);
-		border-radius: 2px;
-	}
+	.settings-page::-webkit-scrollbar { width: 4px; }
+	.settings-page::-webkit-scrollbar-track { background: transparent; }
+	.settings-page::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
 
 	.save-bar {
 		display: flex;
@@ -236,15 +279,11 @@
 		cursor: pointer;
 		transition: all 0.1s;
 	}
-
 	.btn-save:hover {
 		background: rgba(var(--accent-rgb), 0.12);
 		color: rgba(var(--accent-text-rgb), 0.9);
 	}
-
-	.btn-save-icon {
-		font-size: 13px;
-	}
+	.btn-save-icon { font-size: 13px; }
 
 	.settings-grid {
 		display: grid;
@@ -264,6 +303,12 @@
 		border-right: 1px solid rgba(255, 255, 255, 0.06);
 	}
 
+	/* Full-width card spanning both columns */
+	.settings-card--full {
+		grid-column: 1 / -1;
+		border-top: 1px solid rgba(255, 255, 255, 0.06);
+	}
+
 	.card-label {
 		display: block;
 		font-size: 9px;
@@ -283,28 +328,11 @@
 		padding: 7px 0;
 		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
 	}
+	.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
 
-	.setting-row:last-child {
-		border-bottom: none;
-		padding-bottom: 0;
-	}
-
-	.setting-info {
-		display: flex;
-		flex-direction: column;
-		gap: 1px;
-	}
-
-	.setting-label {
-		color: rgba(255, 255, 255, 0.8);
-		font-size: 11px;
-		font-weight: 500;
-	}
-
-	.setting-desc {
-		color: rgba(255, 255, 255, 0.35);
-		font-size: 10px;
-	}
+	.setting-info { display: flex; flex-direction: column; gap: 1px; }
+	.setting-label { color: rgba(255, 255, 255, 0.8); font-size: 11px; font-weight: 500; }
+	.setting-desc  { color: rgba(255, 255, 255, 0.35); font-size: 10px; }
 
 	.setting-select {
 		padding: 3px 24px 3px 8px;
@@ -328,25 +356,11 @@
 		outline: none;
 		transition: border-color 0.1s;
 	}
-
-	.setting-input:focus {
-		border-color: rgba(255, 255, 255, 0.12);
-	}
-
-	/* Hide number input spinners */
+	.setting-input:focus { border-color: rgba(255, 255, 255, 0.12); }
 	.setting-input::-webkit-outer-spin-button,
-	.setting-input::-webkit-inner-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-
-	/* Zoom control */
-	.zoom-control {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
+	.setting-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 
+	.zoom-control { display: flex; align-items: center; gap: 8px; }
 	.zoom-slider {
 		-webkit-appearance: none;
 		appearance: none;
@@ -357,7 +371,6 @@
 		outline: none;
 		cursor: pointer;
 	}
-
 	.zoom-slider::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
@@ -368,11 +381,7 @@
 		cursor: pointer;
 		transition: background 0.1s;
 	}
-
-	.zoom-slider::-webkit-slider-thumb:hover {
-		background: rgba(var(--accent-text-rgb), 0.9);
-	}
-
+	.zoom-slider::-webkit-slider-thumb:hover { background: rgba(var(--accent-text-rgb), 0.9); }
 	.zoom-value {
 		font-size: 10px;
 		font-weight: 600;
@@ -381,7 +390,6 @@
 		text-align: center;
 		font-variant-numeric: tabular-nums;
 	}
-
 	.zoom-reset {
 		background: transparent;
 		border: 1px solid rgba(255, 255, 255, 0.06);
@@ -393,13 +401,8 @@
 		cursor: pointer;
 		transition: all 0.1s;
 	}
+	.zoom-reset:hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.6); }
 
-	.zoom-reset:hover {
-		background: rgba(255, 255, 255, 0.04);
-		color: rgba(255, 255, 255, 0.6);
-	}
-
-	/* Toggle switch */
 	.toggle {
 		position: relative;
 		display: inline-block;
@@ -407,25 +410,15 @@
 		height: 18px;
 		flex-shrink: 0;
 	}
-
-	.toggle input {
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
-
+	.toggle input { opacity: 0; width: 0; height: 0; }
 	.toggle-slider {
 		position: absolute;
 		cursor: pointer;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
+		top: 0; left: 0; right: 0; bottom: 0;
 		background: rgba(255, 255, 255, 0.06);
 		border-radius: 18px;
 		transition: background 0.2s ease;
 	}
-
 	.toggle-slider::before {
 		content: "";
 		position: absolute;
@@ -437,29 +430,20 @@
 		border-radius: 50%;
 		transition: transform 0.2s ease;
 	}
-
-	.toggle input:checked + .toggle-slider {
-		background: rgba(var(--accent-rgb), 0.35);
-	}
-
+	.toggle input:checked + .toggle-slider { background: rgba(var(--accent-rgb), 0.35); }
 	.toggle input:checked + .toggle-slider::before {
 		transform: translateX(14px);
 		background: rgba(255, 255, 255, 0.85);
 	}
 
 	@keyframes fadeIn {
-		0% { opacity: 0; }
+		0%   { opacity: 0; }
 		100% { opacity: 1; }
 	}
 
 	@media (max-width: 900px) {
-		.settings-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.settings-card:first-child {
-			border-right: none;
-			border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-		}
+		.settings-grid { grid-template-columns: 1fr; }
+		.settings-card:first-child { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+		.settings-card--full { grid-column: 1; }
 	}
-</style>
+</style>
\ No newline at end of file

From 67104fb878d2e568eff508bad62afb6a669f96a1 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:45:55 +0200
Subject: [PATCH 133/144] new logs for patrols

new logs for patrols
---
 .../management/ManagementActivity.svelte      | 359 +++++++++++-------
 1 file changed, 220 insertions(+), 139 deletions(-)

diff --git a/web/src/components/management/ManagementActivity.svelte b/web/src/components/management/ManagementActivity.svelte
index 370a0608..d874d814 100644
--- a/web/src/components/management/ManagementActivity.svelte
+++ b/web/src/components/management/ManagementActivity.svelte
@@ -23,108 +23,202 @@
 	}
 
 	const ACTION_LABELS: Record<string, string> = {
-		mdt_login: "Logged into MDT",
+		// Authentication
+		mdt_login:  "Logged into MDT",
 		mdt_logout: "Logged out of MDT",
+		// Reports
 		report_created: "Created a report",
 		report_updated: "Updated a report",
 		report_deleted: "Deleted a report",
+		// Warrants
 		warrant_issued: "Issued a warrant",
 		warrant_closed: "Closed a warrant",
-		case_created: "Created a case",
-		case_updated: "Updated a case",
-		case_deleted: "Deleted a case",
-		case_officer_assigned: "Assigned officer to case",
-		case_officer_removed: "Removed officer from case",
-		case_attachment_added: "Added case attachment",
-		case_attachment_removed: "Removed case attachment",
-		case_attachment_uploaded: "Uploaded case attachment",
-		evidence_added: "Added evidence",
-		evidence_updated: "Updated evidence",
-		evidence_deleted: "Deleted evidence",
-		evidence_transferred: "Transferred evidence custody",
-		evidence_image_added: "Added evidence image",
-		evidence_image_removed: "Removed evidence image",
-		evidence_linked_case: "Linked evidence to case",
-		case_created_from_evidence: "Created case from evidence",
+		// Cases
+		case_created:              "Created a case",
+		case_updated:              "Updated a case",
+		case_deleted:              "Deleted a case",
+		case_officer_assigned:     "Assigned officer to case",
+		case_officer_removed:      "Removed officer from case",
+		case_attachment_added:     "Added case attachment",
+		case_attachment_removed:   "Removed case attachment",
+		case_attachment_uploaded:  "Uploaded case attachment",
+		// Evidence
+		evidence_added:            "Added evidence",
+		evidence_updated:          "Updated evidence",
+		evidence_deleted:          "Deleted evidence",
+		evidence_transferred:      "Transferred evidence custody",
+		evidence_image_added:      "Added evidence image",
+		evidence_image_removed:    "Removed evidence image",
+		evidence_linked_case:      "Linked evidence to case",
+		case_created_from_evidence:"Created case from evidence",
+		// Weapons
 		weapon_created: "Registered a weapon",
 		weapon_updated: "Updated weapon record",
 		weapon_deleted: "Deleted weapon record",
-		vehicle_updated: "Updated vehicle record",
-		vehicle_impounded: "Impounded a vehicle",
-		vehicle_released: "Released vehicle from impound",
+		// Vehicles
+		vehicle_updated:    "Updated vehicle record",
+		vehicle_impounded:  "Impounded a vehicle",
+		vehicle_released:   "Released vehicle from impound",
+		// Searches
 		search_citizens: "Searched citizens",
-		search_players: "Searched players",
+		search_players:  "Searched players",
 		search_officers: "Searched officers",
-		fine_processed: "Processed a fine",
-		charge_updated: "Updated a charge",
-		arrest_logged: "Logged an arrest",
-		sent_to_jail: "Sent citizen to jail",
-		callsign_changed: "Changed officer callsign",
-		signal100_activated: "Activated Signal 100",
+		// Charges / Fines / Sentencing
+		fine_processed:  "Processed a fine",
+		charge_updated:  "Updated a charge",
+		arrest_logged:   "Logged an arrest",
+		sent_to_jail:    "Sent citizen to jail",
+		// Officers / Dispatch
+		callsign_changed:      "Changed officer callsign",
+		signal100_activated:   "Activated Signal 100",
 		signal100_deactivated: "Deactivated Signal 100",
-		icu_deleted: "Deleted ICU record",
+		icu_deleted:           "Deleted ICU record",
+		// Cameras / Bodycams
+		camera_viewed:  "Viewed camera footage",
+		bodycam_viewed: "Viewed bodycam footage",
+		// ── Patrols ──────────────────────────────────────────────────────────
+		patrol_created:          "Created a patrol",
+		patrol_deleted:          "Deleted a patrol",
+		patrol_renamed:          "Renamed a patrol",
+		patrol_zone_created:     "Drew patrol zone",
+		patrol_zone_updated:     "Updated patrol zone",
+		patrol_zone_cleared:     "Cleared patrol zone",
+		patrol_officer_assigned: "Assigned officer to patrol",
+		patrol_officer_removed:  "Removed officer from patrol",
+		patrols_reordered:       "Reordered patrols",
 	};
 
 	const ACTION_ICONS: Record<string, { icon: string; color: string }> = {
-		mdt_login: { icon: "login", color: "#3b82f6" },
+		mdt_login:  { icon: "login",  color: "#3b82f6" },
 		mdt_logout: { icon: "logout", color: "#6b7280" },
 		report_created: { icon: "description", color: "#10b981" },
-		report_updated: { icon: "edit_note", color: "#f59e0b" },
-		report_deleted: { icon: "delete", color: "#ef4444" },
-		warrant_issued: { icon: "gavel", color: "#ef4444" },
-		warrant_closed: { icon: "check_circle", color: "#10b981" },
-		case_created: { icon: "folder_open", color: "#3b82f6" },
-		case_updated: { icon: "folder", color: "#f59e0b" },
-		case_deleted: { icon: "folder_delete", color: "#ef4444" },
-		evidence_added: { icon: "inventory_2", color: "#8b5cf6" },
-		evidence_deleted: { icon: "delete", color: "#ef4444" },
-		vehicle_updated: { icon: "directions_car", color: "#f59e0b" },
-		vehicle_impounded: { icon: "local_parking", color: "#ef4444" },
-		arrest_logged: { icon: "front_hand", color: "#ef4444" },
-		fine_processed: { icon: "payments", color: "#f59e0b" },
-		search_citizens: { icon: "person_search", color: "#6b7280" },
+		report_updated: { icon: "edit_note",   color: "#f59e0b" },
+		report_deleted: { icon: "delete",      color: "#ef4444" },
+		warrant_issued: { icon: "gavel",       color: "#ef4444" },
+		warrant_closed: { icon: "check_circle",color: "#10b981" },
+		case_created:   { icon: "folder_open", color: "#3b82f6" },
+		case_updated:   { icon: "folder",      color: "#f59e0b" },
+		case_deleted:   { icon: "folder_delete",color: "#ef4444" },
+		case_officer_assigned: { icon: "person_add",    color: "#10b981" },
+		case_officer_removed:  { icon: "person_remove", color: "#ef4444" },
+		evidence_added:     { icon: "inventory_2", color: "#8b5cf6" },
+		evidence_updated:   { icon: "inventory_2", color: "#f59e0b" },
+		evidence_deleted:   { icon: "delete",      color: "#ef4444" },
+		evidence_transferred: { icon: "swap_horiz", color: "#8b5cf6" },
+		weapon_created: { icon: "security",       color: "#10b981" },
+		weapon_updated: { icon: "security",       color: "#f59e0b" },
+		weapon_deleted: { icon: "no_encryption",  color: "#ef4444" },
+		vehicle_updated:   { icon: "directions_car", color: "#f59e0b" },
+		vehicle_impounded: { icon: "local_parking",  color: "#ef4444" },
+		vehicle_released:  { icon: "directions_car", color: "#10b981" },
+		fine_processed:  { icon: "payments",     color: "#f59e0b" },
+		charge_updated:  { icon: "gavel",        color: "#f59e0b" },
+		arrest_logged:   { icon: "front_hand",   color: "#ef4444" },
+		sent_to_jail:    { icon: "lock",         color: "#ef4444" },
+		search_citizens: { icon: "person_search",color: "#6b7280" },
+		search_players:  { icon: "manage_search",color: "#6b7280" },
+		search_officers: { icon: "badge",        color: "#6b7280" },
+		callsign_changed:      { icon: "badge",       color: "#3b82f6" },
+		signal100_activated:   { icon: "crisis_alert", color: "#ef4444" },
+		signal100_deactivated: { icon: "crisis_alert", color: "#6b7280" },
+		camera_viewed:  { icon: "videocam",      color: "#6b7280" },
+		bodycam_viewed: { icon: "camera_alt",    color: "#6b7280" },
+		// Patrols
+		patrol_created:          { icon: "groups",         color: "#38bdf8" },
+		patrol_deleted:          { icon: "group_remove",   color: "#ef4444" },
+		patrol_renamed:          { icon: "edit",           color: "#f59e0b" },
+		patrol_zone_created:     { icon: "draw",           color: "#10b981" },
+		patrol_zone_updated:     { icon: "draw",           color: "#f59e0b" },
+		patrol_zone_cleared:     { icon: "clear",          color: "#ef4444" },
+		patrol_officer_assigned: { icon: "person_add",     color: "#10b981" },
+		patrol_officer_removed:  { icon: "person_remove",  color: "#ef4444" },
+		patrols_reordered:       { icon: "swap_vert",      color: "#6b7280" },
 	};
 
 	let activities: AuditLog[] = $state([]);
-	let isLoading = $state(false);
-	let searchQuery = $state("");
-	let currentPage = $state(1);
-	let totalItems = $state(0);
-	let perPage = $state(25);
+	let isLoading    = $state(false);
+	let searchQuery  = $state("");
+	let currentPage  = $state(1);
+	let totalItems   = $state(0);
+	let perPage      = $state(25);
 	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	let totalPages = $derived(Math.max(1, Math.ceil(totalItems / perPage)));
 
 	function getActionLabel(action: string): string {
-		return ACTION_LABELS[action] || action.replace(/_/g, " ");
+		return ACTION_LABELS[action] ?? action.replace(/_/g, " ");
 	}
 
 	function getActionIcon(action: string): { icon: string; color: string } {
-		return ACTION_ICONS[action] || { icon: "info", color: "rgba(59, 130, 246, 0.6)" };
+		return ACTION_ICONS[action] ?? { icon: "info", color: "rgba(59, 130, 246, 0.6)" };
+	}
+
+	// Parse details JSON and extract the most useful human-readable string.
+	function getDetailLine(log: AuditLog): string {
+		if (!log.details) return "";
+		let d: Record<string, unknown>;
+		try { d = JSON.parse(log.details); } catch { return ""; }
+
+		// Prefer the pre-built readable label from the server
+		if (typeof d.action_label === "string") return d.action_label;
+
+		// Patrol-specific fallbacks
+		if (log.action === "patrol_renamed") {
+			if (d.patrol_old_name && d.patrol_new_name)
+				return `"${d.patrol_old_name}" → "${d.patrol_new_name}"`;
+		}
+		if (log.action === "patrol_officer_assigned") {
+			if (d.assigned_name && d.patrol_name)
+				return `${d.assigned_name} → ${d.patrol_name}`;
+		}
+		if (log.action === "patrol_officer_removed") {
+			if (d.removed_from) return `Removed from "${d.removed_from}"`;
+		}
+		if (log.action === "patrol_zone_created" || log.action === "patrol_zone_updated") {
+			if (d.patrol_name && d.point_count) return `${d.patrol_name} · ${d.point_count} pts`;
+		}
+		if (log.action === "patrol_zone_cleared") {
+			if (d.patrol_name) return `${d.patrol_name}`;
+		}
+		if (log.action === "patrols_reordered") {
+			if (typeof d.new_order === "string") return d.new_order;
+		}
+		if (log.action === "patrol_created") {
+			if (d.patrol_name) return String(d.patrol_name);
+		}
+		if (log.action === "patrol_deleted") {
+			if (d.patrol_name) return String(d.patrol_name);
+		}
+		return "";
 	}
 
 	function getEntityLabel(log: AuditLog): string {
 		if (!log.entity_id) return "";
 		const typeLabels: Record<string, string> = {
-			profile: "Profile",
-			report: "Report",
-			warrant: "Warrant",
-			case: "Case",
-			evidence: "Evidence",
-			vehicle: "Vehicle",
-			weapon: "Weapon",
-			citizen: "Citizen",
-			search: "",
-			dispatch: "Channel",
-			fine: "Fine",
-			charge: "Charge",
-			arrest: "Arrest",
-			icu: "ICU",
+			profile:         "Profile",
+			report:          "Report",
+			warrant:         "Warrant",
+			case:            "Case",
+			evidence:        "Evidence",
+			vehicle:         "Vehicle",
+			weapon:          "Weapon",
+			citizen:         "Citizen",
+			search:          "",
+			dispatch:        "Channel",
+			fine:            "Fine",
+			charge:          "Charge",
+			arrest:          "Arrest",
+			icu:             "ICU",
 			case_attachment: "Attachment",
-			evidence_image: "Image",
-			officer: "Officer",
+			evidence_image:  "Image",
+			officer:         "Officer",
+			mdt_patrol:      "Patrol",
 		};
-		const label = typeLabels[log.entity_type] || log.entity_type;
+		const label = typeLabels[log.entity_type] ?? log.entity_type;
+		// For patrol actions entity_id is the UUID or 'order' – skip the #prefix for UUIDs
+		if (log.entity_type === "mdt_patrol") {
+			return label;
+		}
 		return label ? `${label} #${log.entity_id}` : `#${log.entity_id}`;
 	}
 
@@ -132,23 +226,22 @@
 		if (!value) return "Unknown";
 		const date = new Date(value);
 		if (Number.isNaN(date.getTime())) return value;
-		const now = new Date();
+		const now  = new Date();
 		const diff = now.getTime() - date.getTime();
 		const mins = Math.floor(diff / 60000);
-		if (mins < 1) return "Just now";
+		if (mins < 1)  return "Just now";
 		if (mins < 60) return `${mins}m ago`;
 		const hours = Math.floor(mins / 60);
 		if (hours < 24) return `${hours}h ago`;
 		const days = Math.floor(hours / 24);
-		if (days < 7) return `${days}d ago`;
+		if (days < 7)  return `${days}d ago`;
 		return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 	}
 
 	function formatFullTimestamp(value: string): string {
 		if (!value) return "";
 		const date = new Date(value);
-		if (Number.isNaN(date.getTime())) return value;
-		return date.toLocaleString();
+		return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
 	}
 
 	async function loadActivity(page = 1) {
@@ -161,12 +254,12 @@
 				{ items: [], total: 0, page: 1, perPage: 25 },
 			);
 			if (response && response.items) {
-				activities = response.items;
-				totalItems = response.total || 0;
-				currentPage = response.page || page;
+				activities   = response.items;
+				totalItems   = response.total || 0;
+				currentPage  = response.page  || page;
 			} else if (Array.isArray(response)) {
-				activities = response as unknown as AuditLog[];
-				totalItems = activities.length;
+				activities  = response as unknown as AuditLog[];
+				totalItems  = activities.length;
 				currentPage = 1;
 			} else {
 				activities = [];
@@ -181,30 +274,21 @@
 		}
 	}
 
-	function goToPage(page: number) {
-		if (page < 1 || page > totalPages || page === currentPage) return;
-		loadActivity(page);
-	}
-
-
 	function handleSearch(e: Event) {
 		const value = (e.target as HTMLInputElement).value;
 		searchQuery = value;
 		if (searchTimeout) clearTimeout(searchTimeout);
-		searchTimeout = setTimeout(() => {
-			currentPage = 1;
-			loadActivity(1);
-		}, 400);
+		searchTimeout = setTimeout(() => { currentPage = 1; loadActivity(1); }, 400);
 	}
 
 	onMount(() => {
 		if (isEnvBrowser()) {
 			activities = [
-				{ id: 1, actor_name: "D2020 Sgt. J. Miller", action: "report_created", entity_type: "report", entity_id: "RPT-001", details: null, created_at: new Date(Date.now() - 300000).toISOString() },
-				{ id: 2, actor_name: "D2020 Det. R. Santos", action: "warrant_issued", entity_type: "warrant", entity_id: "5", details: null, created_at: new Date(Date.now() - 3600000).toISOString() },
-				{ id: 3, actor_name: "D2020 Ofc. K. Chen", action: "case_created", entity_type: "case", entity_id: "42", details: null, created_at: new Date(Date.now() - 7200000).toISOString() },
-				{ id: 4, actor_name: "D2020 Lt. A. Brooks", action: "mdt_login", entity_type: "profile", entity_id: "BVX67053", details: null, created_at: new Date(Date.now() - 86400000).toISOString() },
-				{ id: 5, actor_name: "D2020 Ofc. M. Torres", action: "evidence_added", entity_type: "evidence", entity_id: "12", details: null, created_at: new Date(Date.now() - 172800000).toISOString() },
+				{ id: 1, actor_name: "D2020 Sgt. J. Miller",  action: "patrol_created",          entity_type: "mdt_patrol", entity_id: "alpha-1", details: JSON.stringify({ patrol_name: "Alpha-1", patrol_color: "#38bdf8", action_label: 'Created patrol "Alpha-1"' }), created_at: new Date(Date.now() - 60000).toISOString() },
+				{ id: 2, actor_name: "D2020 Det. R. Santos",   action: "patrol_officer_assigned",  entity_type: "mdt_patrol", entity_id: "alpha-1", details: JSON.stringify({ patrol_name: "Alpha-1", assigned_name: "J. Miller", action_label: 'Assigned J. Miller to patrol "Alpha-1"' }), created_at: new Date(Date.now() - 300000).toISOString() },
+				{ id: 3, actor_name: "D2020 Ofc. K. Chen",     action: "patrol_zone_created",      entity_type: "mdt_patrol", entity_id: "alpha-1", details: JSON.stringify({ patrol_name: "Alpha-1", point_count: 6, action_label: 'Drew zone for patrol "Alpha-1" (6 points)' }), created_at: new Date(Date.now() - 3600000).toISOString() },
+				{ id: 4, actor_name: "D2020 Lt. A. Brooks",    action: "patrol_renamed",           entity_type: "mdt_patrol", entity_id: "alpha-1", details: JSON.stringify({ patrol_old_name: "Alpha", patrol_new_name: "Alpha-1", action_label: 'Renamed patrol "Alpha" → "Alpha-1"' }), created_at: new Date(Date.now() - 7200000).toISOString() },
+				{ id: 5, actor_name: "D2020 Ofc. M. Torres",   action: "report_created",           entity_type: "report",     entity_id: "RPT-042", details: null, created_at: new Date(Date.now() - 86400000).toISOString() },
 			];
 			totalItems = 5;
 			return;
@@ -233,15 +317,22 @@
 	{:else}
 		<div class="activity-list">
 			{#each activities as log (log.id)}
-				{@const iconData = getActionIcon(log.action)}
+				{@const iconData   = getActionIcon(log.action)}
+				{@const detailLine = getDetailLine(log)}
+				{@const entityLabel= getEntityLabel(log)}
 				<div class="activity-row">
-					<div class="activity-icon" style="background: {iconData.color}15; color: {iconData.color}">
+					<div class="activity-icon" style="background:{iconData.color}18;color:{iconData.color}">
 						<span class="material-icons">{iconData.icon}</span>
 					</div>
 					<div class="activity-body">
-						<span class="activity-action">{getActionLabel(log.action)}</span>
-						{#if getEntityLabel(log)}
-							<span class="activity-entity">{getEntityLabel(log)}</span>
+						<div class="activity-top-row">
+							<span class="activity-action">{getActionLabel(log.action)}</span>
+							{#if entityLabel}
+								<span class="activity-entity">{entityLabel}</span>
+							{/if}
+						</div>
+						{#if detailLine}
+							<span class="activity-detail">{detailLine}</span>
 						{/if}
 					</div>
 					<div class="activity-meta">
@@ -294,14 +385,8 @@
 		color: rgba(255, 255, 255, 0.8);
 		font-size: 11px;
 	}
-
-	.search-input:focus {
-		outline: none;
-	}
-
-	.search-input::placeholder {
-		color: rgba(255, 255, 255, 0.2);
-	}
+	.search-input:focus { outline: none; }
+	.search-input::placeholder { color: rgba(255, 255, 255, 0.2); }
 
 	.result-count {
 		color: rgba(255, 255, 255, 0.2);
@@ -314,19 +399,9 @@
 		min-height: 0;
 		overflow-y: auto;
 	}
-
-	.activity-list::-webkit-scrollbar {
-		width: 4px;
-	}
-
-	.activity-list::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.activity-list::-webkit-scrollbar-thumb {
-		background: rgba(255, 255, 255, 0.06);
-		border-radius: 2px;
-	}
+	.activity-list::-webkit-scrollbar       { width: 4px; }
+	.activity-list::-webkit-scrollbar-track { background: transparent; }
+	.activity-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
 
 	.activity-row {
 		display: flex;
@@ -336,37 +411,34 @@
 		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
 		transition: background 0.1s;
 	}
-
-	.activity-row:hover {
-		background: rgba(255, 255, 255, 0.02);
-	}
-
-	.activity-row:last-child {
-		border-bottom: none;
-	}
+	.activity-row:hover       { background: rgba(255, 255, 255, 0.02); }
+	.activity-row:last-child  { border-bottom: none; }
 
 	.activity-icon {
-		width: 24px;
-		height: 24px;
-		min-width: 24px;
-		border-radius: 3px;
+		width: 28px;
+		height: 28px;
+		min-width: 28px;
+		border-radius: 5px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
-
-	.activity-icon .material-icons {
-		font-size: 13px;
-	}
+	.activity-icon .material-icons { font-size: 14px; }
 
 	.activity-body {
 		display: flex;
 		flex-direction: column;
-		gap: 1px;
+		gap: 2px;
 		flex: 1;
 		min-width: 0;
 	}
 
+	.activity-top-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
 	.activity-action {
 		color: rgba(255, 255, 255, 0.8);
 		font-size: 11px;
@@ -377,6 +449,17 @@
 		font-size: 10px;
 		color: rgba(var(--accent-text-rgb), 0.7);
 		font-weight: 500;
+		background: rgba(var(--accent-rgb), 0.08);
+		padding: 1px 5px;
+		border-radius: 3px;
+	}
+
+	.activity-detail {
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.3);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.activity-meta {
@@ -386,13 +469,11 @@
 		gap: 1px;
 		flex-shrink: 0;
 	}
-
 	.activity-officer {
 		color: rgba(255, 255, 255, 0.35);
 		font-size: 10px;
 		white-space: nowrap;
 	}
-
 	.activity-time {
 		color: rgba(255, 255, 255, 0.2);
 		font-size: 10px;
@@ -419,7 +500,7 @@
 	}
 
 	@keyframes spin {
-		0% { transform: rotate(0deg); }
+		0%   { transform: rotate(0deg); }
 		100% { transform: rotate(360deg); }
 	}
-</style>
+</style>
\ No newline at end of file

From efa35b6caf9d6dd643c5906cb08be7f98d830976 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Sun, 7 Jun 2026 19:46:28 +0200
Subject: [PATCH 134/144] new callback

---
 web/src/constants/nuiEvents.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index 226e7c95..e070ac08 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -222,6 +222,7 @@ export const NUI_EVENTS = {
         REMOVE_FROM_PATROL: "removeFromPatrol",
 		SAVE_UI_STATE: "saveMapUiState",
 		REORDER_PATROLS: "reorderPatrols",
+		SET_PATROL_ZONE: "setPatrolZone",
 	},
 	MANAGEMENT: {
 		GET_PERMISSION_ROLES: "getPermissionRoles",

From 60c82bad329212ad94f601682024cdf091b82613 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:30:39 +0200
Subject: [PATCH 135/144] fixed double reports and added new feature

---
 server/backend/collab.lua | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/server/backend/collab.lua b/server/backend/collab.lua
index 10aff30d..669fca3a 100644
--- a/server/backend/collab.lua
+++ b/server/backend/collab.lua
@@ -119,7 +119,7 @@ ps.registerCallback(resourceName .. ':server:joinReportSession', function(source
         myName = editorName,
         myCitizenId = citizenId,
         editors = getEditorsList(session, src),
-        yjsState = session.yjsState,
+        yjsUpdates = session.yjsUpdates or {},
         lastStructuredData = session.lastStructuredData,
     }
 end)
@@ -167,11 +167,6 @@ AddEventHandler(resourceName .. ':server:collabSyncYjs', function(reportId, upda
     -- Store for late joiners
     if not session.yjsUpdates then session.yjsUpdates = {} end
     session.yjsUpdates[#session.yjsUpdates + 1] = update
-    session.yjsState = update
-    if #session.yjsUpdates > 100 then
-        session.yjsState = update
-        session.yjsUpdates = { update }
-    end
 
     -- Queue for batched broadcast
     if not yjsPendingBroadcasts[reportId] then
@@ -225,6 +220,24 @@ AddEventHandler(resourceName .. ':server:collabSyncData', function(reportId, dat
     }, src)
 end)
 
+RegisterNetEvent(resourceName .. ':server:collabSyncAwareness')
+AddEventHandler(resourceName .. ':server:collabSyncAwareness', function(reportId, update)
+    local src = source
+    if not CheckAuth(src) then return end
+    reportId = tostring(reportId)
+    local session = activeReportSessions[reportId]
+    if not session or not session.editors[src] then return end
+
+    for editorSrc, _ in pairs(session.editors) do
+        if editorSrc ~= src then
+            TriggerClientEvent(resourceName .. ':client:awarenessBatch', editorSrc, {
+                reportId = reportId,
+                updates = { update },
+            })
+        end
+    end
+end)
+
 -- Cleanup on player disconnect
 AddEventHandler('playerDropped', function()
     local src = source

From bba765bb5c1c21ae51db707cacba1be94d0a203e Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:30:57 +0200
Subject: [PATCH 136/144] fixed double reports and added new feature

---
 client/backend/collab.lua | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/client/backend/collab.lua b/client/backend/collab.lua
index 724f1a41..8ac26655 100644
--- a/client/backend/collab.lua
+++ b/client/backend/collab.lua
@@ -27,6 +27,31 @@ RegisterNUICallback('syncReportData', function(data, cb)
     TriggerServerEvent(resourceName .. ':server:collabSyncData', data.reportId, data.dataType, data.data)
 end)
 
+local awarenessIncomingBuffer = {}
+
+RegisterNUICallback('syncAwareness', function(data, cb)
+    TriggerServerEvent(resourceName .. ':server:collabSyncAwareness', data.reportId, data.update)
+    cb({ ok = true })
+end)
+
+RegisterNetEvent(resourceName .. ':client:awarenessBatch')
+AddEventHandler(resourceName .. ':client:awarenessBatch', function(payload)
+    if not payload or not payload.updates then return end
+    for _, u in ipairs(payload.updates) do
+        awarenessIncomingBuffer[#awarenessIncomingBuffer + 1] = u
+    end
+end)
+
+RegisterNUICallback('pollAwareness', function(data, cb)
+    if #awarenessIncomingBuffer == 0 then
+        cb({ updates = {} })
+        return
+    end
+    local batch = awarenessIncomingBuffer
+    awarenessIncomingBuffer = {}
+    cb({ updates = batch })
+end)
+
 -- Server push events -> forward to NUI
 RegisterNetEvent(resourceName .. ':client:reportEditorJoined', function(data)
     SendNUI('reportEditorJoined', data)

From 61611ad05c864632aaf1a0fc77732a422f61ac90 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:31:38 +0200
Subject: [PATCH 137/144] fixed double reports and added new feature

---
 web/src/services/collabService.svelte.ts | 109 ++++++++++++++++++-----
 1 file changed, 87 insertions(+), 22 deletions(-)

diff --git a/web/src/services/collabService.svelte.ts b/web/src/services/collabService.svelte.ts
index d2065d0b..b5533082 100644
--- a/web/src/services/collabService.svelte.ts
+++ b/web/src/services/collabService.svelte.ts
@@ -4,6 +4,7 @@ import { useNuiEvent } from "../utils/useNuiEvent";
 import { NUI_EVENTS } from "../constants/nuiEvents";
 import { GetParentResourceName } from "../utils/fivem";
 import { isEnvBrowser } from "../utils/misc";
+import { Awareness, encodeAwarenessUpdate, applyAwarenessUpdate, removeAwarenessStates } from "y-protocols/awareness";
 
 export interface CollabEditor {
 	source: number;
@@ -58,6 +59,7 @@ export function createCollabService() {
 
 	let myCitizenId: string = "";
 	let ydoc: Y.Doc | null = null;
+	let awareness: Awareness | null = null;
 	let isDestroyed = false;
 	let yjsPollerInterval: ReturnType<typeof setInterval> | null = null;
 
@@ -85,6 +87,8 @@ export function createCollabService() {
 		stopYjsPoller();
 		yjsPollerInterval = setInterval(async () => {
 			if (!ydoc || isDestroyed || !state.active) return;
+
+			// --- Yjs document updates ---
 			try {
 				const resp = await fetchNui<{ updates: any[] }>(
 					"pollYjsUpdates" as any,
@@ -92,32 +96,66 @@ export function createCollabService() {
 					{ updates: [] },
 					2000,
 				);
-				if (!resp?.updates || resp.updates.length === 0) return;
-				if (!ydoc || isDestroyed) return;
-
-				const allDecoded: Uint8Array[] = [];
-				for (const batch of resp.updates) {
-					if (batch.updates && Array.isArray(batch.updates)) {
-						for (const item of batch.updates) {
-							const b64 = typeof item === "string" ? item : item.update;
-							if (b64) allDecoded.push(base64ToUint8(b64));
+				if (resp?.updates && resp.updates.length > 0 && ydoc && !isDestroyed) {
+					const allDecoded: Uint8Array[] = [];
+					for (const batch of resp.updates) {
+						if (batch.updates && Array.isArray(batch.updates)) {
+							for (const item of batch.updates) {
+								const b64 = typeof item === "string" ? item : item.update;
+								if (b64) allDecoded.push(base64ToUint8(b64));
+							}
+						} else if (batch.update) {
+							allDecoded.push(base64ToUint8(batch.update));
 						}
-					} else if (batch.update) {
-						allDecoded.push(base64ToUint8(batch.update));
+					}
+					if (allDecoded.length > 0) {
+						const merged = allDecoded.length === 1
+							? allDecoded[0]
+							: Y.mergeUpdates(allDecoded);
+						Y.applyUpdate(ydoc, merged, "remote");
 					}
 				}
-				if (allDecoded.length === 0) return;
+			} catch {
+				// Ignore poll errors
+			}
 
-				const merged = allDecoded.length === 1
-					? allDecoded[0]
-					: Y.mergeUpdates(allDecoded);
-				Y.applyUpdate(ydoc, merged, "remote");
+			// --- Awareness (live cursors / presence) ---
+			try {
+				const aResp = await fetchNui<{ updates: string[] }>(
+					NUI_EVENTS.REPORT.POLL_AWARENESS,
+					{},
+					{ updates: [] },
+					2000,
+				);
+				if (aResp?.updates?.length && awareness && !isDestroyed) {
+					for (const b64 of aResp.updates) {
+						try {
+							applyAwarenessUpdate(awareness, base64ToUint8(b64), "remote");
+						} catch {
+							// ignore single bad update
+						}
+					}
+				}
 			} catch {
 				// Ignore poll errors
 			}
 		}, 100);
 	}
 
+	function onAwarenessUpdate(
+		{ added, updated, removed }: { added: number[]; updated: number[]; removed: number[] },
+		origin: any,
+	) {
+		if (origin === "remote") return; // kein Echo
+		if (!state.active || !state.reportId || !awareness) return;
+		const changed = added.concat(updated, removed);
+		const update = encodeAwarenessUpdate(awareness, changed);
+		fireNui(NUI_EVENTS.REPORT.SYNC_AWARENESS, {
+			reportId: state.reportId,
+			update: uint8ToBase64(update),
+		});
+	}
+
 	function stopYjsPoller() {
 		if (yjsPollerInterval) {
 			clearInterval(yjsPollerInterval);
@@ -149,6 +187,15 @@ export function createCollabService() {
 				}
 			}
 			onEditorsChanged?.(state.editors);
+
+			// Announce our own cursor so the new joiner sees it immediately
+			if (awareness && state.active && state.reportId) {
+				const update = encodeAwarenessUpdate(awareness, [awareness.clientID]);
+				fireNui(NUI_EVENTS.REPORT.SYNC_AWARENESS, {
+					reportId: state.reportId,
+					update: uint8ToBase64(update),
+				});
+			}
 		});
 
 		useNuiEvent<any>("reportEditorLeft", (data) => {
@@ -180,8 +227,10 @@ export function createCollabService() {
 		lastStructuredData?: Record<string, any>;
 	}> {
 		ydoc = new Y.Doc();
+		awareness = new Awareness(ydoc);
 		isDestroyed = false;
 		ydoc.on("update", onYjsUpdate);
+		awareness.on("update", onAwarenessUpdate);
 
 		const result = await fetchNui<{
 			success: boolean;
@@ -191,7 +240,7 @@ export function createCollabService() {
 			lastContent?: string;
 			lastStructuredData?: Record<string, any>;
 			version?: number;
-			yjsState?: string;
+			yjsUpdates?: string[];
 		}>(
 			NUI_EVENTS.COLLAB.JOIN_REPORT_SESSION,
 			{ reportId },
@@ -215,12 +264,17 @@ export function createCollabService() {
 			lastSentStructuredData = {};
 			onEditorsChanged?.(state.editors);
 
-			if ((result as any).yjsState && ydoc) {
+			// Hydrate from the full update history (server returns all accumulated updates)
+			const updates = (result as any).yjsUpdates as string[] | undefined;
+			if (updates && updates.length > 0 && ydoc) {
 				try {
-					const serverState = base64ToUint8((result as any).yjsState);
-					Y.applyUpdate(ydoc, serverState, "remote");
+					const decoded = updates.map(base64ToUint8);
+					const merged = decoded.length === 1
+						? decoded[0]
+						: Y.mergeUpdates(decoded);
+					Y.applyUpdate(ydoc, merged, "remote");
 				} catch {
-					// Ignore state apply errors
+					// ignore
 				}
 			}
 		}
@@ -243,6 +297,14 @@ export function createCollabService() {
 			{ success: true },
 		);
 
+		if (awareness) {
+			// broadcast removal so others drop our cursor instantly
+			removeAwarenessStates(awareness, [awareness.clientID], "local");
+			awareness.off("update", onAwarenessUpdate);
+			awareness.destroy();
+			awareness = null;
+		}
+
 		if (ydoc) {
 			ydoc.off("update", onYjsUpdate);
 			ydoc.destroy();
@@ -286,6 +348,9 @@ export function createCollabService() {
 		get ydoc() {
 			return ydoc;
 		},
+		get awareness() {
+			return awareness;
+		},
 		get myCitizenId() {
 			return myCitizenId;
 		},
@@ -304,4 +369,4 @@ export function createCollabService() {
 	};
 }
 
-export type CollabService = ReturnType<typeof createCollabService>;
+export type CollabService = ReturnType<typeof createCollabService>;
\ No newline at end of file

From 80692b916ab23bad431a4943d9af5dbd5b28fdf7 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:32:04 +0200
Subject: [PATCH 138/144] added new callbacks

---
 web/src/constants/nuiEvents.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/constants/nuiEvents.ts b/web/src/constants/nuiEvents.ts
index e070ac08..1c46b9e2 100644
--- a/web/src/constants/nuiEvents.ts
+++ b/web/src/constants/nuiEvents.ts
@@ -64,6 +64,8 @@ export const NUI_EVENTS = {
 		UPLOAD_EVIDENCE_IMAGE: "uploadEvidenceImage",
 		GENERATE_REPORT_ID: "generateReportId",
 		SEARCH_VEHICLES_FOR_REPORT: "searchVehiclesForReport",
+		SYNC_AWARENESS: "syncAwareness",
+		POLL_AWARENESS: "pollAwareness",
 	},
 	CITIZEN: {
 		GET_CITIZENS: "getCitizens",

From 0622b8c07c4f69e15797718d1c7e46dfe68e669c Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:32:42 +0200
Subject: [PATCH 139/144] fixed double reports and added new feature

---
 .../report-editor/ReportTextEditor.svelte     | 72 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/web/src/components/report-editor/ReportTextEditor.svelte b/web/src/components/report-editor/ReportTextEditor.svelte
index 1a810624..cd348eea 100644
--- a/web/src/components/report-editor/ReportTextEditor.svelte
+++ b/web/src/components/report-editor/ReportTextEditor.svelte
@@ -8,7 +8,10 @@
 	import TextStyle from "@tiptap/extension-text-style";
 	import Color from "@tiptap/extension-color";
 	import Collaboration from "@tiptap/extension-collaboration";
+	// TipTap v2. On v3 use: import CollaborationCaret from "@tiptap/extension-collaboration-caret";
+	import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 	import * as Y from "yjs";
+	import type { Awareness } from "y-protocols/awareness";
 	import ReportEditorToolbar from "./ReportEditorToolbar.svelte";
 
 	interface Props {
@@ -16,6 +19,9 @@
 		onUpdate: (content: string) => void;
 		ydoc?: Y.Doc | null;
 		collabActive?: boolean;
+		awareness?: Awareness | null;
+		userName?: string;
+		userColor?: string;
 	}
 
 	let {
@@ -23,6 +29,9 @@
 		onUpdate,
 		ydoc = null,
 		collabActive = false,
+		awareness = null,
+		userName = "",
+		userColor = "#3B82F6",
 	}: Props = $props();
 
 	let editor = $state<Editor | null>(null);
@@ -67,6 +76,19 @@
 					document: ydoc,
 				}),
 			);
+			// Live cursors + name labels for other editors
+			if (awareness) {
+				extensions.push(
+					CollaborationCursor.configure({
+						// minimal provider: the extension only reads .awareness
+						provider: { awareness },
+						user: {
+							name: userName || "Editor",
+							color: userColor || "#3B82F6",
+						},
+					}),
+				);
+			}
 		} else {
 			extensions.unshift(StarterKit);
 		}
@@ -245,4 +267,52 @@
 		background: rgba(255, 255, 255, 0.1);
 	}
 
-</style>
+	/* ---- Collaboration cursors (live carets + name labels) ---- */
+	/* Covers both v2 (.collaboration-cursor__*) and v3 (.collaboration-caret__*) */
+
+	/* Single clean caret line in the user's color.
+	   The user color comes from the inline `border-color` the extension sets,
+	   so we only touch width/style here and explicitly kill the right border. */
+	:global(.collaboration-cursor__caret),
+	:global(.collaboration-caret__caret) {
+		position: relative;
+		margin-left: -1px;
+		margin-right: -1px;
+		border: none;
+		border-left-width: 2px;
+		border-left-style: solid;
+		border-radius: 2px;
+		box-sizing: border-box;
+		pointer-events: none;
+		word-break: normal;
+	}
+
+	/* Name pill above the caret. background-color is set inline by the extension. */
+	:global(.collaboration-cursor__label),
+	:global(.collaboration-caret__label) {
+		position: absolute;
+		top: -1.55em;
+		left: -2px;
+		white-space: nowrap;
+		color: #fff;
+		font-size: 10px;
+		font-weight: 600;
+		line-height: 1;
+		letter-spacing: 0.2px;
+		padding: 3px 6px;
+		border-radius: 5px 5px 5px 1px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+		user-select: none;
+		pointer-events: none;
+		/* erscheint bei Bewegung, blendet dann sanft aus (Google-Docs-Style) */
+		opacity: 0;
+		animation: cursorLabelFade 2.6s ease forwards;
+	}
+
+	@keyframes cursorLabelFade {
+		0% { opacity: 0; transform: translateY(3px); }
+		12% { opacity: 1; transform: translateY(0); }
+		65% { opacity: 1; transform: translateY(0); }
+		100% { opacity: 0; transform: translateY(-2px); }
+	}
+</style>
\ No newline at end of file

From ed10b7ebd3597be96d08d5231080aa71475f66dc Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:33:19 +0200
Subject: [PATCH 140/144] fixed double reports and added new feature

---
 web/src/pages/ReportEditor.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/src/pages/ReportEditor.svelte b/web/src/pages/ReportEditor.svelte
index 9f2f9376..0d3eb067 100644
--- a/web/src/pages/ReportEditor.svelte
+++ b/web/src/pages/ReportEditor.svelte
@@ -934,6 +934,9 @@
 						onUpdate={handlers.handleContentUpdate}
 						ydoc={collabService.ydoc}
 						collabActive={collabService.isActive}
+						awareness={collabService.awareness}
+						userName={collabService.myName}
+						userColor={collabService.myColor}
 					/>
 				{:else}
 					<div style="padding: 16px; color: rgba(255,255,255,0.4); font-size: 13px;">

From 33d30e505e37e861241a89b54c398fcd11e960f8 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:36:32 +0200
Subject: [PATCH 141/144] Add files via upload

---
 web/src/components/report-editor/ReportTextEditor.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/report-editor/ReportTextEditor.svelte b/web/src/components/report-editor/ReportTextEditor.svelte
index cd348eea..a024828e 100644
--- a/web/src/components/report-editor/ReportTextEditor.svelte
+++ b/web/src/components/report-editor/ReportTextEditor.svelte
@@ -304,7 +304,6 @@
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
 		user-select: none;
 		pointer-events: none;
-		/* erscheint bei Bewegung, blendet dann sanft aus (Google-Docs-Style) */
 		opacity: 0;
 		animation: cursorLabelFade 2.6s ease forwards;
 	}

From fbd8f11ea50b4c47412c3e858697129f84af1641 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Tue, 9 Jun 2026 10:36:55 +0200
Subject: [PATCH 142/144] Add files via upload

---
 web/src/services/collabService.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/services/collabService.svelte.ts b/web/src/services/collabService.svelte.ts
index b5533082..968d5693 100644
--- a/web/src/services/collabService.svelte.ts
+++ b/web/src/services/collabService.svelte.ts
@@ -146,7 +146,7 @@ export function createCollabService() {
 		{ added, updated, removed }: { added: number[]; updated: number[]; removed: number[] },
 		origin: any,
 	) {
-		if (origin === "remote") return; // kein Echo
+		if (origin === "remote") return;
 		if (!state.active || !state.reportId || !awareness) return;
 		const changed = added.concat(updated, removed);
 		const update = encodeAwarenessUpdate(awareness, changed);

From bb45a66ad2ecda15a87ed2e7048f8d2c98321117 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Wed, 10 Jun 2026 05:52:35 +0200
Subject: [PATCH 143/144] performance updates + fixed a error

performance updates + fixed a error
---
 server/backend/cameras.lua   |  2 ++
 server/backend/citizens.lua  | 11 +++++++---
 server/backend/dashboard.lua |  6 ++++++
 server/backend/officers.lua  | 42 ++++++++++++++++++------------------
 server/backend/weapons.lua   | 33 +++++++++++++++++++++-------
 5 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/server/backend/cameras.lua b/server/backend/cameras.lua
index 74cc73db..d4616c29 100644
--- a/server/backend/cameras.lua
+++ b/server/backend/cameras.lua
@@ -2,6 +2,7 @@ local resourceName = tostring(GetCurrentResourceName())
 
 -- Get available camera models for camera creation
 ps.registerCallback(resourceName .. ':server:getCameraModels', function(source)
+    if not CheckAuth(source) then return {} end
     -- Import Camera models from main cameras.lua
     local Camera = _G.Camera or {}
     local models = {}
@@ -28,6 +29,7 @@ end)
 
 -- Validate camera model
 ps.registerCallback(resourceName .. ':server:validateCameraModel', function(source, modelKey)
+    if not CheckAuth(source) then return false end
     -- Import Camera models from main cameras.lua
     local Camera = _G.Camera or {}
     local isValid = (Camera.models or {})[modelKey] ~= nil
diff --git a/server/backend/citizens.lua b/server/backend/citizens.lua
index 2f182030..16e238b1 100644
--- a/server/backend/citizens.lua
+++ b/server/backend/citizens.lua
@@ -1075,9 +1075,14 @@ ps.registerCallback(resourceName .. ':server:getMyProfile', function(source)
         if rid and not reportIdSet[rid] then reportIdSet[rid] = true end
     end
 
-    for rid, _ in pairs(reportIdSet) do
-        local rOk, report = pcall(MySQL.single.await, 'SELECT id, title, type FROM mdt_reports WHERE id = ?', { rid })
-        if rOk and report then
+    local reportIds = {}
+    for rid in pairs(reportIdSet) do reportIds[#reportIds + 1] = rid end
+    if #reportIds > 0 then
+        local placeholders = string.rep('?,', #reportIds - 1) .. '?'
+        local lrOk, reports = pcall(MySQL.query.await,
+            'SELECT id, title, type FROM mdt_reports WHERE id IN (' .. placeholders .. ')',
+            reportIds)
+        for _, report in ipairs(lrOk and reports or {}) do
             linkedReports[#linkedReports + 1] = { id = report.id, title = report.title, type = report.type }
         end
     end
diff --git a/server/backend/dashboard.lua b/server/backend/dashboard.lua
index 86225fdc..c9daaccd 100644
--- a/server/backend/dashboard.lua
+++ b/server/backend/dashboard.lua
@@ -15,6 +15,7 @@ end
 ps.registerCallback(resourceName .. ':server:getJobData', function(source)
     local src = source
     assert(src, 'Player ID cannot be nil')
+    if not CheckAuth(src) then return {} end
     local response = {
         rank    = ps.getJobGradeName(src) or 'Officer',
         payRate = '$' .. (ps.getJobGradePay(src) or 300) .. '/hr',
@@ -25,6 +26,7 @@ end)
 ps.registerCallback(resourceName .. ':server:getReportStatistics', function(source)
     local src = source
     assert(src, 'Player ID cannot be nil')
+    if not CheckAuth(src) then return {} end
 
     return Cache.getOrSet('dashboard:reportStats', Config.CacheTTL and Config.CacheTTL.ReportStats or 30, function()
         local response = MySQL.query.await([[
@@ -45,6 +47,7 @@ end)
 ps.registerCallback(resourceName .. ':server:getTimeStatistics', function(source)
     local src = source
     assert(src, 'Player ID cannot be nil')
+    if not CheckAuth(src) then return {} end
     local citizenid = ps.getIdentifier(src)
     if not citizenid then return {} end
 
@@ -128,6 +131,7 @@ end)
 ps.registerCallback(resourceName .. ':server:getRecentReports', function(source, page, limit)
     local src      = source
     assert(src, 'Player ID cannot be nil')
+    if not CheckAuth(src) then return {} end
     local pageNumber = math.max(1, tonumber(page) or 1)
     local pageSize   = math.min(50, math.max(1, tonumber(limit) or 10))
 
@@ -181,6 +185,7 @@ end)
 ps.registerCallback(resourceName .. ':server:getActiveUnits', function(source)
     local src = source
     assert(src, 'Player ID cannot be nil')
+    if not CheckAuth(src) then return { count = 0 } end
     return Cache.getOrSet('dashboard:activeUnits', Config.CacheTTL and Config.CacheTTL.ActiveUnits or 10, function()
         return { count = ps.getJobTypeCount('leo') }
     end)
@@ -239,6 +244,7 @@ end
 ps.registerCallback(resourceName .. ':server:getRecentDispatches', function(source)
     local src = source
     assert(src, 'Player ID cannot be nil')
+    if not CheckAuth(src) then return {} end
     local dispatchResource = Config and Config.Dispatch and Config.Dispatch.Resource or 'ps-dispatch'
     local ok, recentDispatches = pcall(function()
         return exports[dispatchResource] and exports[dispatchResource]:GetDispatchCalls() or {}
diff --git a/server/backend/officers.lua b/server/backend/officers.lua
index 082b02b7..7f247aa7 100644
--- a/server/backend/officers.lua
+++ b/server/backend/officers.lua
@@ -1,7 +1,7 @@
 local resourceName = tostring(GetCurrentResourceName())
 local ok, QBCore = pcall(function() return exports['qb-core']:GetCoreObject() end)
 if not ok then QBCore = nil end
-
+ 
 -- Get player source ID by citizenId
 ps.registerCallback(resourceName .. ':server:GetPlayerSourceId', function(source, targetCitizenId)
     if not targetCitizenId then return nil end
@@ -12,7 +12,7 @@ ps.registerCallback(resourceName .. ':server:GetPlayerSourceId', function(source
     end
     return targetPlayer.source or targetPlayer.PlayerData.source
 end)
-
+ 
 -- Set Callsign
 ps.registerCallback(resourceName .. ':server:setCallsign', function(source, payload)
     local src = source
@@ -20,7 +20,7 @@ ps.registerCallback(resourceName .. ':server:setCallsign', function(source, payl
     payload = payload or {}
     local cid = payload.citizenid or payload.cid
     local newCallsign = payload.callsign or payload.newcallsign
-
+ 
     if not cid or not newCallsign then
         return { success = false, message = 'Missing citizen ID or callsign' }
     end
@@ -29,73 +29,73 @@ ps.registerCallback(resourceName .. ':server:setCallsign', function(source, payl
     if Player then
         Player.Functions.SetMetaData('callsign', newCallsign)
         TriggerClientEvent(resourceName .. ':client:updateCallsign', Player.PlayerData.source, newCallsign)
-
+ 
         MySQL.update.await('UPDATE mdt_profiles SET callsign = ? WHERE citizenid = ?', { newCallsign, cid })
-
+ 
         if ps.auditLog then
             ps.auditLog(src, 'callsign_changed', 'officer', cid, { callsign = newCallsign })
         end
-
+ 
         return { success = true, message = 'Callsign updated to ' .. newCallsign }
     end
     return { success = false, message = 'Player must be online to update callsign' }
 end)
-
+ 
 ps.registerCallback(resourceName .. ':server:getCallsign', function(source, payload)
     if not CheckAuth(source) then return { callsign = '' } end
     local cid = payload.citizenid
     if not cid then return { callsign = '' } end
-
+ 
     if not QBCore then return { success = false, message = 'Core framework not available' } end
     local Player = QBCore.Functions.GetPlayerByCitizenId(cid)
     if Player then
-        return { callsign = Player.PlayerData.metadata.callsign or '' }
+        return { callsign = tostring(Player.PlayerData.metadata.callsign or '') }
     end
     local row = MySQL.single.await('SELECT callsign FROM mdt_profiles WHERE citizenid = ?', { cid })
-    return { callsign = row and row.callsign or '' }
+    return { callsign = tostring(row and row.callsign or '') }
 end)
-
+ 
 -- Set Radio Frequency
 ps.registerCallback(resourceName .. ':server:setRadio', function(source, payload)
     local src = source
     if not CheckAuth(src) then return { success = false, message = 'Unauthorized' } end
-
+ 
     payload = payload or {}
     local cid = payload.citizenid or payload.cid
     local newRadio = payload.radio or payload.newradio
-
+ 
     if not cid or not newRadio then
         return { success = false, message = 'Missing citizen ID or radio frequency' }
     end
-
+ 
     if not QBCore then return { success = false, message = 'Core framework not available' } end
     local targetPlayer = QBCore.Functions.GetPlayerByCitizenId(cid)
     if not targetPlayer then
         return { success = false, message = 'Officer must be online' }
     end
-
+ 
     local targetSource = targetPlayer.PlayerData.source
-
+ 
     local radio = targetPlayer.Functions.GetItemByName('radio')
     if not radio then
         return { success = false, message = targetPlayer.PlayerData.charinfo.firstname .. ' does not have a radio!' }
     end
-
+ 
     TriggerClientEvent(resourceName .. ':client:setRadio', targetSource, newRadio)
     return { success = true, message = 'Radio set to ' .. newRadio }
 end)
-
+ 
 -- Get Unit Location (GPS to officer)
 ps.registerCallback(resourceName .. ':server:getUnitLocation', function(source, cid)
     if not CheckAuth(source) then return {} end
     if not cid then return {} end
-
+ 
     if not QBCore then return {} end
     local Player = QBCore.Functions.GetPlayerByCitizenId(cid)
     if Player then
         local coords = GetEntityCoords(GetPlayerPed(Player.PlayerData.source))
         return { x = coords.x, y = coords.y, z = coords.z }
     end
-
+ 
     return {}
-end)
+end)
\ No newline at end of file
diff --git a/server/backend/weapons.lua b/server/backend/weapons.lua
index 732a4f5c..64d5c76a 100644
--- a/server/backend/weapons.lua
+++ b/server/backend/weapons.lua
@@ -113,19 +113,36 @@ exports('registerWeapon', registerWeapon)
 
 ps.registerCallback('ps-mdt:server:getWeapons', function(source)
     if not CheckAuth(source) then return {} end
-    local weapons = MySQL.query.await('SELECT * FROM mdt_weapons')
+    local weapons = MySQL.query.await('SELECT * FROM mdt_weapons') or {}
     local newData = {}
     local weaponBolo = {}
+
+    -- Batch-resolve owner names in a single query to avoid an N+1 lookup per weapon
+    local nameByOwner = {}
+    do
+        local owners, seen = {}, {}
+        for _, v in pairs(weapons) do
+            if v.owner and v.owner ~= '' and not seen[v.owner] then
+                seen[v.owner] = true
+                owners[#owners + 1] = v.owner
+            end
+        end
+        if #owners > 0 then
+            local placeholders = string.rep('?,', #owners - 1) .. '?'
+            local profiles = MySQL.query.await('SELECT citizenid, fullname FROM mdt_profiles WHERE citizenid IN (' .. placeholders .. ')', owners) or {}
+            for _, p in ipairs(profiles) do
+                if p.fullname and p.fullname ~= '' then
+                    nameByOwner[p.citizenid] = p.fullname
+                end
+            end
+        end
+    end
+
     for k, v in pairs(weapons) do
-        -- Resolve owner name: try mdt_profiles first, then ps_lib lookup
+        -- Resolve owner name: batched mdt_profiles lookup first, then ps_lib fallback
         local ownerName = 'Unknown'
         if v.owner and v.owner ~= '' then
-            local profile = MySQL.single.await('SELECT fullname FROM mdt_profiles WHERE citizenid = ?', { v.owner })
-            if profile and profile.fullname and profile.fullname ~= '' then
-                ownerName = profile.fullname
-            else
-                ownerName = ps.getPlayerNameByIdentifier(v.owner) or 'Unknown'
-            end
+            ownerName = nameByOwner[v.owner] or ps.getPlayerNameByIdentifier(v.owner) or 'Unknown'
         end
 
         -- Normalize weapon model to lowercase for class table lookup

From fe5bd06b286c77d1b2dcf401f44f049e4a07db16 Mon Sep 17 00:00:00 2001
From: LeSiiN <103898231+LeSiiN@users.noreply.github.com>
Date: Wed, 10 Jun 2026 05:53:06 +0200
Subject: [PATCH 144/144] performance updates + fixed a error

---
 web/src/pages/Dashboard.svelte | 9 ++++-----
 web/src/pages/Vehicles.svelte  | 1 -
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/Dashboard.svelte b/web/src/pages/Dashboard.svelte
index 1dc82579..d2b19541 100644
--- a/web/src/pages/Dashboard.svelte
+++ b/web/src/pages/Dashboard.svelte
@@ -80,9 +80,9 @@
 	// ── Callsign ──
 	const EMPTY_CALLSIGN_VALUES = new Set(['', 'NIL', 'NO CALLSIGN', 'NONE', 'NULL']);
 
-	function isValidCallsign(cs: string | null | undefined): boolean {
-		if (!cs) return false;
-		const upper = cs.trim().toUpperCase();
+	function isValidCallsign(cs: unknown): boolean {
+		if (cs == null || cs === '') return false;
+		const upper = String(cs).trim().toUpperCase();
 		if (EMPTY_CALLSIGN_VALUES.has(upper)) return false;
 		if (!upper.startsWith('PD-')) return false;
 		return upper.length > 3;
@@ -101,7 +101,7 @@
 			{ citizenid: playerData?.citizenid },
 			{ callsign: '' }
 		);
-		const cs = result?.callsign?.trim() ?? "";
+		const cs = result?.callsign != null ? String(result.callsign).trim() : "";
 		if (isValidCallsign(cs)) {
 			localCallsign = cs;
 		}
@@ -755,7 +755,6 @@
 	.cs-modal { background: var(--card-dark-bg); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; width: min(320px, 92vw); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
 	.cs-modal-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
 	.cs-modal-title { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
-	.cs-modal-current { font-size: 9px; color: rgba(255, 255, 255, 0.25); flex: 1; }
 	.cs-modal-close { display: flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); padding: 4px; border-radius: 3px; cursor: pointer; transition: all 0.1s; margin-left: auto; }
 	.cs-modal-close:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.1); }
 	.cs-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
diff --git a/web/src/pages/Vehicles.svelte b/web/src/pages/Vehicles.svelte
index da70a650..ce19cc44 100644
--- a/web/src/pages/Vehicles.svelte
+++ b/web/src/pages/Vehicles.svelte
@@ -233,7 +233,6 @@
 
 		try {
 			const response = await fetchNui(NUI_EVENTS.VEHICLE.GET_VEHICLE, { plate });
-			console.log(response.vehicle)
 			if (response?.vehicle) {
 				selectedVehicle = response.vehicle;
 				vehicleForm.points = response.vehicle.points ?? 0;