From 2ca62293a9c211a8f7f0c47ac8541efc7e312597 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Fri, 18 Jul 2025 21:42:39 +0800
Subject: [PATCH] Created clients view for admin

---
 src/dashboard.py                              |  4 ++
 src/modules/DashboardClients.py               |  6 +-
 .../clientComponents/clientGroup.vue          | 69 +++++++++++++++++++
 .../searchClientsGroup.vue                    |  1 -
 src/static/app/src/components/navbar.vue      |  7 ++
 src/static/app/src/router/router.js           |  8 +++
 .../stores/DashboardClientAssignmentStore.js  | 16 ++++-
 src/static/app/src/views/clients.vue          | 40 +++++++++++
 8 files changed, 146 insertions(+), 5 deletions(-)
 create mode 100644 src/static/app/src/components/clientComponents/clientGroup.vue
 create mode 100644 src/static/app/src/views/clients.vue

diff --git a/src/dashboard.py b/src/dashboard.py
index e668ac57..ea2f31aa 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -1209,6 +1209,10 @@ Client Controller
 def API_Clients_AllClients():
     return ResponseObject(data=DashboardClients.GetAllClients())
 
+@app.get(f'{APP_PREFIX}/api/clients/allClientsRaw')
+def API_Clients_AllClientsRaw():
+    return ResponseObject(data=DashboardClients.GetAllClientsRaw())
+
 @app.post(f'{APP_PREFIX}/api/clients/assignClient')
 def API_Clients_AssignClient():
     data = request.get_json()
diff --git a/src/modules/DashboardClients.py b/src/modules/DashboardClients.py
index d38b6ad3..86830cec 100644
--- a/src/modules/DashboardClients.py
+++ b/src/modules/DashboardClients.py
@@ -105,7 +105,11 @@ class DashboardClients:
             
     def GetAllClients(self):
         self.__getClients()
-        return self.Clients  
+        return self.Clients
+    
+    def GetAllClientsRaw(self):
+        self.__getClients()
+        return self.ClientsRaw
     
     def GetClient(self, ClientID) -> dict[str, str] | None:
         self.__getClients()
diff --git a/src/static/app/src/components/clientComponents/clientGroup.vue b/src/static/app/src/components/clientComponents/clientGroup.vue
new file mode 100644
index 00000000..5555e489
--- /dev/null
+++ b/src/static/app/src/components/clientComponents/clientGroup.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import LocaleText from "@/components/text/localeText.vue";
+
+const props = defineProps(['groupName', 'clients', 'searchString'])
+
+const getClients = computed(() => {
+	const s = props.searchString.toLowerCase()
+	if (!props.searchString){
+		return props.clients
+	}
+	return props.clients.filter(
+		x =>
+			(x.ClientID && x.ClientID.toLowerCase().includes(s)) || 
+			(x.Email && x.Email.toLowerCase().includes(s) || 
+				(x.Name && x.Name.toLowerCase().includes(s)))
+	)
+})
+</script>
+
+<template>
+	<div class="card rounded-3">
+		<div class="card-header d-flex align-items-center">
+			{{ groupName }}
+			<span class="badge text-bg-primary ms-auto">
+				<LocaleText :t="getClients.length + ' Clients'"></LocaleText>
+			</span>
+		</div>
+		<div class="card-body">
+			<small class="text-muted" v-if="getClients.length === 0">
+				<LocaleText :t="'No clients contains ' + searchString"></LocaleText>
+			</small>
+			<div class="row g-2" v-else>
+				<div class="col-sm-4" v-for="clients in getClients">
+					<div class="p-3 bg-body-tertiary border rounded-3 shadow" role="button">
+						<div>
+							<small class="text-muted">
+								<LocaleText t="Client ID"></LocaleText>
+							</small>
+							<p class="mb-0">
+								<samp style="font-size: 0.875rem">{{ clients.ClientID }}</samp>
+							</p>
+						</div>
+						<div>
+							<small class="text-muted">
+								<LocaleText t="Email"></LocaleText>
+							</small>
+							<p class="mb-0">
+								{{ clients.Email }}
+							</p>
+						</div>
+						<div>
+							<small class="text-muted">
+								<LocaleText t="Name"></LocaleText>
+							</small>
+							<p class="mb-0" :class="{'text-muted': !clients.Name}">
+								{{ clients.Name ? clients.Name : 'N/A' }}
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/static/app/src/components/configurationComponents/peerAssignModalComponents/searchClientsGroup.vue b/src/static/app/src/components/configurationComponents/peerAssignModalComponents/searchClientsGroup.vue
index df108ad5..263c015e 100644
--- a/src/static/app/src/components/configurationComponents/peerAssignModalComponents/searchClientsGroup.vue
+++ b/src/static/app/src/components/configurationComponents/peerAssignModalComponents/searchClientsGroup.vue
@@ -29,7 +29,6 @@ const filterGroup = computed(() => {
 		</h6>
 		<div v-if="filterGroup.length > 0" class="d-flex flex-column gap-2">
 			<div class="bg-body-secondary rounded-3 text-start p-2 d-flex"
-			     
 			     v-for="client in filterGroup">
 				<div class="d-flex flex-column">
 					<small class="mb-0">
diff --git a/src/static/app/src/components/navbar.vue b/src/static/app/src/components/navbar.vue
index e5321b42..54b014bb 100644
--- a/src/static/app/src/components/navbar.vue
+++ b/src/static/app/src/components/navbar.vue
@@ -79,6 +79,13 @@ export default {
 							<LocaleText t="Settings"></LocaleText>	
 						</RouterLink>
 					</li>
+					<li class="nav-item">
+						<RouterLink class="nav-link rounded-3" to="/clients"
+						            exact-active-class="active">
+							<i class="bi bi-people me-2"></i>
+							<LocaleText t="Clients"></LocaleText>
+						</RouterLink>
+					</li>
 					<li class="nav-item">
 						<a class="nav-link rounded-3" role="button" @click="openAgentModal = true">
 							<i class="bi bi-question-circle me-2"></i>
diff --git a/src/static/app/src/router/router.js b/src/static/app/src/router/router.js
index b493ec07..196a565c 100644
--- a/src/static/app/src/router/router.js
+++ b/src/static/app/src/router/router.js
@@ -80,6 +80,14 @@ const router = createRouter({
 						title: "System Status"
 					}
 				},
+				{
+					name: "Clients",
+					path: '/clients',
+					component: () => import("@/views/clients.vue"),
+					meta: {
+						title: "Clients"
+					}
+				},
 				{
 					name: "Configuration",
 					path: '/configuration/:id',
diff --git a/src/static/app/src/stores/DashboardClientAssignmentStore.js b/src/static/app/src/stores/DashboardClientAssignmentStore.js
index 7d70527e..a90b204f 100644
--- a/src/static/app/src/stores/DashboardClientAssignmentStore.js
+++ b/src/static/app/src/stores/DashboardClientAssignmentStore.js
@@ -1,11 +1,12 @@
 import {defineStore} from "pinia";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 
 export const DashboardClientAssignmentStore = 
 	defineStore('DashboardClientAssignmentStore', () => {
 		const assignments = ref([])
 		const clients = ref({})
+		const clientsRaw = ref([])
 		const unassigning = ref(false)
 		const assigning = ref("")
 		
@@ -15,6 +16,13 @@ export const DashboardClientAssignmentStore =
 			})
 		}
 		
+		const getClientsRaw = async () => {
+			await fetchGet('/api/clients/allClientsRaw', {},(res) => {
+				clientsRaw.value = res.data;
+				console.log(clientsRaw.value)
+			})
+		}
+		
 		const getClientById = (ClientID) => {
 			return Object.values(clients.value).flat().find(x => x.ClientID === ClientID)
 		}
@@ -59,12 +67,14 @@ export const DashboardClientAssignmentStore =
 		return {
 			assignments, 
 			getAssignedClients, 
-			getClients, 
+			getClients,
+			getClientsRaw,
 			clients, 
 			unassignClient, 
 			assignClient, 
 			getClientById,
 			unassigning,
-			assigning
+			assigning,
+			clientsRaw
 		}
 })
\ No newline at end of file
diff --git a/src/static/app/src/views/clients.vue b/src/static/app/src/views/clients.vue
new file mode 100644
index 00000000..5b47450c
--- /dev/null
+++ b/src/static/app/src/views/clients.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
+import LocaleText from "@/components/text/localeText.vue";
+import {ref} from "vue";
+const assignmentStore = DashboardClientAssignmentStore()
+import {GetLocale} from "@/utilities/locale.js";
+import ClientGroup from "@/components/clientComponents/clientGroup.vue";
+import * as sea from "node:sea";
+
+await assignmentStore.getClients();
+
+const searchString = ref("")
+</script>
+
+<template>
+	<div class="w-100 h-100 pb-2 text-body">
+		<div class="rounded-3 bg-body-tertiary d-flex text-body p-3 align-items-center shadow sticky-top mb-3">
+			<label for="searchClient"><i class="bi bi-search me-2"></i></label>
+			<input
+				v-model="searchString"
+					id="searchClient"
+					class="form-control rounded-3 form-control-sm" 
+			       :placeholder="GetLocale('Search Clients...')"
+			       type="email" style="width: auto;">
+			<button class="btn btn-body ms-auto bg-body-secondary rounded-3 btn-sm">
+				<i class="bi bi-gear-fill me-2"></i>
+				<LocaleText t="Settings"></LocaleText>
+			</button>
+		</div>
+		<div class="d-flex gap-3 flex-column">
+			<ClientGroup v-for="(clients, groupName) in assignmentStore.clients" 
+			             :searchString="searchString"
+			             :clients="clients" :groupName="groupName"></ClientGroup>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file