Created clients view for admin

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()

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()

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>

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">

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>

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',

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
 		}
 })

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>