remove Device section & move Desktop section to start in HomeView

Author: Mahad-10

src/views/HomeView.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { authService } from '../services/authService'
-import type { Organization, Device, Desktop } from '../types'
+import type { Organization, Desktop } from '../types'
 
 const authStore = useAuthStore()
 
@@ -12,13 +12,6 @@ const desktops = ref<Desktop[]>([])
 const isLoadingOrgs = ref(true)
 const isLoadingDesktops = ref(true)
 
-// Mock data for Devices
-const devices = ref<Device[]>([
-  { id: 'd1', name: 'MacBook Pro M3', type: 'Laptop', status: 'Online', icon: '💻' },
-  { id: 'd2', name: 'iPhone 15 Pro', type: 'Mobile', status: 'Offline', icon: '📱' },
-  { id: 'd3', name: 'iPad Air', type: 'Tablet', status: 'Online', icon: '平板' },
-])
-
 // Modal State
 const showModal = ref(false)
 const newOrgName = ref('')
@@ -37,7 +30,7 @@ const fetchOrganizations = async () => {
     organizations.value = result.args.map((org: Organization) => ({
       ...org,
       role: 'Member', // Default role for display
-      icon: '🏢'       // Default icon
+      icon: '🏢', // Default icon
     }))
   } catch (err: unknown) {
     console.error('Failed to fetch organizations', err)
@@ -143,22 +136,19 @@ const handleCreateOrg = async () => {
       </div>
     </div>
 
-    <!-- Organizations Section -->
+    <!-- Desktops Section -->
     <div class="row justify-content-center mb-5">
       <div class="col-lg-10">
         <div class="d-flex justify-content-between align-items-center mb-4">
           <h3 class="mb-0 d-flex align-items-center">
-            <span class="badge bg-primary me-3 p-2">
-              <i class="bi bi-building"></i>
+            <span class="badge bg-secondary me-3 p-2">
+              <i class="bi bi-pc-display"></i>
             </span>
-            Organizations
+            Desktops
           </h3>
-          <button @click="handleOpenModal" class="btn btn-primary btn-sm rounded-pill px-3 shadow-none no-underline-hover">
-            <i class="bi bi-plus-lg me-1"></i> Add New
-          </button>
         </div>
 
-        <div v-if="isLoadingOrgs" class="row g-4">
+        <div v-if="isLoadingDesktops" class="row g-4">
           <div v-for="i in 3" :key="i" class="col-md-4">
             <div class="card h-100 border-0 shadow-sm opacity-50">
               <div class="card-body p-4 text-center">
@@ -171,15 +161,14 @@ const handleCreateOrg = async () => {
         </div>
 
         <div v-else class="row g-4">
-          <div v-for="org in organizations" :key="org.id" class="col-md-4">
-            <router-link :to="'/organizations/' + org.id" class="text-decoration-none">
+          <div v-for="desktop in desktops" :key="desktop.realm" class="col-md-4">
+            <router-link :to="'/desktops/' + desktop.realm" class="text-decoration-none">
               <div class="card h-100 border-0 shadow-sm card-hover">
                 <div class="card-body p-4">
                   <div class="d-flex align-items-center mb-3">
-                    <span class="fs-2 me-3">{{ org.icon }}</span>
+                    <span class="fs-2 me-3">{{ desktop.icon }}</span>
                     <div>
-                      <h5 class="card-title mb-0 text-dark">{{ org.name }}</h5>
-                      <small class="text-muted">{{ org.role }}</small>
+                      <h5 class="card-title mb-0 text-dark">{{ desktop.name }}</h5>
                     </div>
                   </div>
                   <div class="mt-auto d-flex justify-content-between align-items-center">
@@ -192,28 +181,31 @@ const handleCreateOrg = async () => {
           </div>
 
           <!-- Empty State -->
-          <div v-if="organizations.length === 0" class="col-12">
+          <div v-if="desktops.length === 0" class="col-12">
             <div class="card border-dashed p-5 text-center bg-transparent">
-              <p class="text-muted mb-0">No organizations found. Create your first one!</p>
+              <p class="text-muted mb-0">No desktops found</p>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Desktops Section -->
+    <!-- Organizations Section -->
     <div class="row justify-content-center mb-5">
       <div class="col-lg-10">
         <div class="d-flex justify-content-between align-items-center mb-4">
           <h3 class="mb-0 d-flex align-items-center">
-            <span class="badge bg-secondary me-3 p-2">
-              <i class="bi bi-pc-display"></i>
+            <span class="badge bg-primary me-3 p-2">
+              <i class="bi bi-building"></i>
             </span>
-            Desktops
+            Organizations
           </h3>
+          <button @click="handleOpenModal" class="btn btn-primary btn-sm rounded-pill px-3 shadow-none no-underline-hover">
+            <i class="bi bi-plus-lg me-1"></i> Add New
+          </button>
         </div>
 
-        <div v-if="isLoadingDesktops" class="row g-4">
+        <div v-if="isLoadingOrgs" class="row g-4">
           <div v-for="i in 3" :key="i" class="col-md-4">
             <div class="card h-100 border-0 shadow-sm opacity-50">
               <div class="card-body p-4 text-center">
@@ -226,14 +218,15 @@ const handleCreateOrg = async () => {
         </div>
 
         <div v-else class="row g-4">
-          <div v-for="desktop in desktops" :key="desktop.realm" class="col-md-4">
-            <router-link :to="'/desktops/' + desktop.realm" class="text-decoration-none">
+          <div v-for="org in organizations" :key="org.id" class="col-md-4">
+            <router-link :to="'/organizations/' + org.id" class="text-decoration-none">
               <div class="card h-100 border-0 shadow-sm card-hover">
                 <div class="card-body p-4">
                   <div class="d-flex align-items-center mb-3">
-                    <span class="fs-2 me-3">{{ desktop.icon }}</span>
+                    <span class="fs-2 me-3">{{ org.icon }}</span>
                     <div>
-                      <h5 class="card-title mb-0 text-dark">{{ desktop.name }}</h5>
+                      <h5 class="card-title mb-0 text-dark">{{ org.name }}</h5>
+                      <small class="text-muted">{{ org.role }}</small>
                     </div>
                   </div>
                   <div class="mt-auto d-flex justify-content-between align-items-center">
@@ -246,55 +239,9 @@ const handleCreateOrg = async () => {
           </div>
 
           <!-- Empty State -->
-          <div v-if="desktops.length === 0" class="col-12">
-            <div class="card border-dashed p-5 text-center bg-transparent">
-              <p class="text-muted mb-0">No desktops found</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Devices Section -->
-    <div class="row justify-content-center">
-      <div class="col-lg-10">
-        <div class="d-flex justify-content-between align-items-center mb-4">
-          <h3 class="mb-0 d-flex align-items-center">
-            <span class="badge bg-secondary me-3 p-2">
-              <i class="bi bi-laptop"></i>
-            </span>
-            Devices
-          </h3>
-        </div>
-
-        <div class="row g-4">
-          <div v-for="device in devices" :key="device.id" class="col-md-4">
-            <div class="card h-100 border-0 shadow-sm">
-              <div class="card-body p-4">
-                <div class="d-flex align-items-center mb-3">
-                  <span class="fs-2 me-3">{{ device.icon }}</span>
-                  <div>
-                    <h5 class="card-title mb-0">{{ device.name }}</h5>
-                    <small class="text-muted">{{ device.type }}</small>
-                  </div>
-                </div>
-                <div class="d-flex align-items-center">
-                  <span
-                    class="status-indicator me-2"
-                    :class="device.status === 'Online' ? 'bg-success' : 'bg-danger'"
-                  ></span>
-                  <small :class="device.status === 'Online' ? 'text-success' : 'text-danger'">
-                    {{ device.status }}
-                  </small>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Empty State -->
-          <div v-if="devices.length === 0" class="col-12">
+          <div v-if="organizations.length === 0" class="col-12">
             <div class="card border-dashed p-5 text-center bg-transparent">
-              <p class="text-muted mb-0">No devices registered to this account.</p>
+              <p class="text-muted mb-0">No organizations found. Create your first one!</p>
             </div>
           </div>
         </div>
@@ -319,22 +266,24 @@ const handleCreateOrg = async () => {
                 placeholder="Enter organization name"
                 @keyup.enter="handleCreateOrg"
                 autofocus
-              >
+              />
             </div>
             <div v-if="errorMessage" class="text-danger small mt-2 d-flex align-items-center">
               <i class="bi bi-exclamation-circle me-1"></i> {{ errorMessage }}
             </div>
           </div>
           <div class="modal-footer border-0 p-4 pt-0">
-            <button type="button" class="btn btn-link text-muted text-decoration-none fw-semibold me-auto" @click="handleCancel">
+            <button
+              type="button"
+              class="btn btn-link text-muted text-decoration-none fw-semibold me-auto"
+              @click="handleCancel">
               Cancel
             </button>
             <button
               type="button"
               class="btn btn-theme-primary rounded-pill px-5 py-2 fw-bold"
               @click="handleCreateOrg"
-              :disabled="!newOrgName.trim() || isCreating"
-            >
+              :disabled="!newOrgName.trim() || isCreating">
               <span v-if="isCreating" class="spinner-border spinner-border-sm me-2"></span>
               {{ isCreating ? 'Creating...' : 'Create' }}
             </button>