sensor management page

src/components/cards/DetailedSensorCard.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+    <!-- Sensor Header -->
+    <div class="p-4 border-b border-gray-100">
+      <div class="flex items-start justify-between">
+        <div class="flex items-center gap-3">
+          <div class="p-2 rounded-lg" :class="getSensorTypeStyle(sensor.type).bg">
+            <span class="text-lg">{{ getSensorTypeIcon(sensor.type) }}</span>
+          </div>
+          <div>
+            <h3 class="font-medium text-gray-900">{{ sensor.name }}</h3>
+            <p class="text-sm text-gray-500">{{ sensor.id }}</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <div 
+            class="w-2 h-2 rounded-full"
+            :class="getSensorStatusColor(sensor.status)"
+          ></div>
+          <span class="text-xs text-gray-500 capitalize">{{ sensor.status }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Sensor Details -->
+    <div class="p-4 space-y-4">
+      <!-- Room Assignment -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Room Assignment</label>
+        <select 
+          :value="sensor.room" 
+          @change="$emit('updateRoom', sensor.id, ($event.target as HTMLSelectElement).value)"
+          class="w-full px-3 py-2 border border-gray-200 rounded-lg bg-white text-sm"
+        >
+          <option value="">Unassigned</option>
+          <option v-for="room in availableRooms" :key="room" :value="room">
+            {{ room }}
+          </option>
+        </select>
+      </div>
+
+      <!-- Tags -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
+        <div class="flex flex-wrap gap-1 mb-2">
+          <span 
+            v-for="tag in sensor.tags || getDefaultTags(sensor)"
+            :key="tag"
+            class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium"
+          >
+            {{ tag }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Monitoring Capabilities -->
+      <div>
+        <div class="text-sm font-medium text-gray-700 mb-2">Monitoring Capabilities</div>
+        <div class="flex flex-wrap gap-1">
+          <span 
+            v-for="capability in sensor.capabilities.monitoring"
+            :key="capability"
+            class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium"
+          >
+            {{ capability }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Current Values -->
+      <div>
+        <div class="text-sm font-medium text-gray-700 mb-2">Current Values</div>
+        <div class="grid grid-cols-2 gap-2 text-xs">
+          <div v-for="metric in getSensorValues(sensor)" :key="metric.type" 
+               class="bg-gray-50 rounded p-2">
+            <div class="text-gray-600 mb-1">{{ metric.label }}</div>
+            <div class="font-medium text-gray-900">
+              {{ metric.value }} <span class="text-gray-500">{{ metric.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Device Technical Info -->
+      <div>
+        <div class="text-sm font-medium text-gray-700 mb-2">Device Information</div>
+        <div class="grid grid-cols-2 gap-2 text-xs text-gray-600">
+          <div>
+            <span class="font-medium">Model:</span>
+            <div>{{ sensor.metadata.model || 'N/A' }}</div>
+          </div>
+          <div>
+            <span class="font-medium">Firmware:</span>
+            <div>{{ sensor.metadata.firmware || 'N/A' }}</div>
+          </div>
+          <div>
+            <span class="font-medium">Location:</span>
+            <div>{{ sensor.metadata.location }}</div>
+          </div>
+          <div>
+            <span class="font-medium">Last Seen:</span>
+            <div>{{ formatTime(sensor.lastSeen) }}</div>
+          </div>
+          <div v-if="sensor.metadata.battery">
+            <span class="font-medium">Battery:</span>
+            <div class="flex items-center gap-1">
+              <span>{{ sensor.metadata.battery }}%</span>
+              <div class="w-3 h-1 bg-gray-200 rounded-full">
+                <div 
+                  class="h-full rounded-full transition-all"
+                  :class="getBatteryColor(sensor.metadata.battery)"
+                  :style="{ width: sensor.metadata.battery + '%' }"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div v-if="sensor.metadata.signalStrength">
+            <span class="font-medium">Signal:</span>
+            <div class="flex items-center gap-1">
+              <span>{{ sensor.metadata.signalStrength }}%</span>
+              <div class="flex gap-0.5">
+                <div 
+                  v-for="i in 4" 
+                  :key="i"
+                  class="w-1 h-2 bg-gray-200 rounded-sm"
+                  :class="{ 'bg-green-500': (sensor.metadata.signalStrength / 25) >= i }"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div v-if="sensor.capabilities.actions.length > 0">
+        <div class="text-sm font-medium text-gray-700 mb-3">Available Actions</div>
+        <div class="grid grid-cols-2 gap-2">
+          <button
+            v-for="action in sensor.capabilities.actions"
+            :key="action.id"
+            @click="$emit('executeAction', sensor, action)"
+            :disabled="isExecutingAction"
+            class="flex items-center justify-center gap-2 px-3 py-2 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-100 disabled:cursor-not-allowed border border-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors"
+            :class="{ 'opacity-50': isExecutingAction }"
+          >
+            <span>{{ action.icon }}</span>
+            <span class="truncate">{{ action.name }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- No Actions State -->
+      <div v-else>
+        <div class="text-sm font-medium text-gray-700 mb-2">Device Actions</div>
+        <div class="text-xs text-gray-500 text-center py-3 bg-gray-50 rounded border-2 border-dashed border-gray-200">
+          This device is monitor-only and has no available actions
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  sensor: any
+  availableRooms: string[]
+  isExecutingAction?: boolean
+}>()
+
+const emit = defineEmits<{
+  updateRoom: [sensorId: string, newRoom: string]
+  executeAction: [sensor: any, action: any]
+}>()
+
+const getSensorValues = (sensor: any) => {
+  // Mock sensor values based on sensor type and capabilities
+  const values = []
+  
+  if (sensor.capabilities.monitoring.includes('energy')) {
+    values.push({
+      type: 'energy',
+      label: 'Energy Consumption',
+      value: (Math.random() * 5 + 0.5).toFixed(2),
+      unit: 'kWh'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('co2')) {
+    values.push({
+      type: 'co2',
+      label: 'CO2 Level',
+      value: Math.floor(Math.random() * 800 + 350),
+      unit: 'ppm'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('temperature')) {
+    values.push({
+      type: 'temperature',
+      label: 'Temperature',
+      value: (Math.random() * 8 + 18).toFixed(1),
+      unit: '°C'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('humidity')) {
+    values.push({
+      type: 'humidity',
+      label: 'Humidity',
+      value: Math.floor(Math.random() * 40 + 30),
+      unit: '%'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('motion')) {
+    values.push({
+      type: 'motion',
+      label: 'Motion Status',
+      value: Math.random() > 0.7 ? 'Detected' : 'Clear',
+      unit: ''
+    })
+  }
+  
+  // Add device uptime
+  values.push({
+    type: 'uptime',
+    label: 'Uptime',
+    value: Math.floor(Math.random() * 30 + 1),
+    unit: 'days'
+  })
+  
+  return values
+}
+
+const getDefaultTags = (sensor: any) => {
+  const tags = [sensor.type]
+  
+  if (sensor.metadata.battery) {
+    tags.push('wireless')
+  } else {
+    tags.push('wired')
+  }
+  
+  if (sensor.capabilities.actions.length > 0) {
+    tags.push('controllable')
+  } else {
+    tags.push('monitor-only')
+  }
+  
+  return tags
+}
+
+const getSensorTypeIcon = (type: string) => {
+  const icons = {
+    energy: '⚡',
+    co2: '💨',
+    temperature: '🌡️',
+    humidity: '💧',
+    hvac: '❄️',
+    lighting: '💡',
+    security: '🔒'
+  }
+  return icons[type as keyof typeof icons] || '📱'
+}
+
+const getSensorTypeStyle = (type: string) => {
+  const styles = {
+    energy: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
+    co2: { bg: 'bg-green-100', text: 'text-green-700' },
+    temperature: { bg: 'bg-red-100', text: 'text-red-700' },
+    humidity: { bg: 'bg-blue-100', text: 'text-blue-700' },
+    hvac: { bg: 'bg-cyan-100', text: 'text-cyan-700' },
+    lighting: { bg: 'bg-amber-100', text: 'text-amber-700' },
+    security: { bg: 'bg-purple-100', text: 'text-purple-700' }
+  }
+  return styles[type as keyof typeof styles] || { bg: 'bg-gray-100', text: 'text-gray-700' }
+}
+
+const getSensorStatusColor = (status: string) => {
+  switch (status) {
+    case 'online': return 'bg-green-500'
+    case 'offline': return 'bg-gray-400'
+    case 'error': return 'bg-red-500'
+    default: return 'bg-gray-400'
+  }
+}
+
+const getBatteryColor = (battery: number) => {
+  if (battery > 50) return 'bg-green-400'
+  if (battery > 20) return 'bg-yellow-400'
+  return 'bg-red-400'
+}
+
+const formatTime = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSecs = Math.floor(diffMs / 1000)
+  
+  if (diffSecs < 60) {
+    return `${diffSecs}s ago`
+  } else if (diffSecs < 3600) {
+    return `${Math.floor(diffSecs / 60)}m ago`
+  } else if (diffSecs < 86400) {
+    return `${Math.floor(diffSecs / 3600)}h ago`
+  } else {
+    return date.toLocaleDateString()
+  }
+}
+</script>

src/components/cards/GraphMetricCard.vue

@@ -35,7 +35,6 @@ const trendData = computed(() => props.trendData || defaultTrendData)
 
 const trendDir = computed(() => {
   const dir = trendData.value[trendData.value.length - 1] - trendData.value[0]
-  console.log(dir)
   if (dir > 0) return 'up'
   if (dir < 0) return 'down'
   return 'neutral'

src/components/cards/SimpleSensorCard.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-2">
+        <div class="p-1.5 rounded-lg" :class="getSensorTypeStyle(sensor.type).bg">
+          <span class="text-sm">{{ getSensorTypeIcon(sensor.type) }}</span>
+        </div>
+        <div>
+          <h3 class="font-medium text-gray-900 text-sm">{{ sensor.name }}</h3>
+          <p class="text-xs text-gray-500">{{ sensor.room || 'Unassigned' }}</p>
+        </div>
+      </div>
+      
+      <!-- Status Indicator -->
+      <div class="flex items-center gap-1">
+        <div 
+          class="w-2 h-2 rounded-full"
+          :class="getSensorStatusColor(sensor.status)"
+        ></div>
+        <span class="text-xs text-gray-500 capitalize">{{ sensor.status }}</span>
+      </div>
+    </div>
+
+    <!-- Sensor Values -->
+    <div class="mb-3">
+      <div class="grid grid-cols-2 gap-2 text-xs">
+        <div v-for="metric in getSensorValues(sensor)" :key="metric.type" 
+             class="bg-gray-50 rounded p-2">
+          <div class="text-gray-600 mb-1">{{ metric.label }}</div>
+          <div class="font-medium text-gray-900">
+            {{ metric.value }} <span class="text-gray-500">{{ metric.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div v-if="sensor.capabilities.actions.length > 0" class="space-y-2">
+      <div class="text-xs font-medium text-gray-600 mb-2">Quick Actions</div>
+      <div class="flex gap-1 flex-wrap">
+        <button
+          v-for="action in sensor.capabilities.actions.slice(0, 3)"
+          :key="action.id"
+          @click="$emit('executeAction', sensor, action)"
+          :disabled="isExecutingAction"
+          class="flex items-center gap-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 disabled:cursor-not-allowed text-gray-700 rounded text-xs font-medium transition-colors"
+          :class="{ 'opacity-50': isExecutingAction }"
+        >
+          <span class="text-xs">{{ action.icon }}</span>
+          <span class="truncate">{{ action.name }}</span>
+        </button>
+        
+        <!-- Show more actions if there are more than 3 -->
+        <button
+          v-if="sensor.capabilities.actions.length > 3"
+          @click="$emit('showMore', sensor)"
+          class="px-2 py-1 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded text-xs font-medium transition-colors"
+        >
+          +{{ sensor.capabilities.actions.length - 3 }}
+        </button>
+      </div>
+    </div>
+
+    <!-- No Actions State -->
+    <div v-else class="text-xs text-gray-500 text-center py-2 bg-gray-50 rounded">
+      Monitor Only
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  sensor: any
+  isExecutingAction?: boolean
+}>()
+
+const emit = defineEmits<{
+  executeAction: [sensor: any, action: any]
+  showMore: [sensor: any]
+}>()
+
+const getSensorValues = (sensor: any) => {
+  // Mock sensor values based on sensor type and capabilities
+  const values = []
+  
+  if (sensor.capabilities.monitoring.includes('energy')) {
+    values.push({
+      type: 'energy',
+      label: 'Energy',
+      value: (Math.random() * 5 + 0.5).toFixed(2),
+      unit: 'kWh'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('co2')) {
+    values.push({
+      type: 'co2',
+      label: 'CO2',
+      value: Math.floor(Math.random() * 800 + 350),
+      unit: 'ppm'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('temperature')) {
+    values.push({
+      type: 'temperature',
+      label: 'Temperature',
+      value: (Math.random() * 8 + 18).toFixed(1),
+      unit: '°C'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('humidity')) {
+    values.push({
+      type: 'humidity',
+      label: 'Humidity',
+      value: Math.floor(Math.random() * 40 + 30),
+      unit: '%'
+    })
+  }
+  
+  if (sensor.capabilities.monitoring.includes('motion')) {
+    values.push({
+      type: 'motion',
+      label: 'Motion',
+      value: Math.random() > 0.7 ? 'Detected' : 'Clear',
+      unit: ''
+    })
+  }
+  
+  // If no monitoring capabilities, show generic status
+  if (values.length === 0) {
+    values.push({
+      type: 'status',
+      label: 'Status',
+      value: sensor.status === 'online' ? 'Active' : 'Inactive',
+      unit: ''
+    })
+  }
+  
+  return values
+}
+
+const getSensorTypeIcon = (type: string) => {
+  const icons = {
+    energy: '⚡',
+    co2: '💨',
+    temperature: '🌡️',
+    humidity: '💧',
+    hvac: '❄️',
+    lighting: '💡',
+    security: '🔒'
+  }
+  return icons[type as keyof typeof icons] || '📱'
+}
+
+const getSensorTypeStyle = (type: string) => {
+  const styles = {
+    energy: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
+    co2: { bg: 'bg-green-100', text: 'text-green-700' },
+    temperature: { bg: 'bg-red-100', text: 'text-red-700' },
+    humidity: { bg: 'bg-blue-100', text: 'text-blue-700' },
+    hvac: { bg: 'bg-cyan-100', text: 'text-cyan-700' },
+    lighting: { bg: 'bg-amber-100', text: 'text-amber-700' },
+    security: { bg: 'bg-purple-100', text: 'text-purple-700' }
+  }
+  return styles[type as keyof typeof styles] || { bg: 'bg-gray-100', text: 'text-gray-700' }
+}
+
+const getSensorStatusColor = (status: string) => {
+  switch (status) {
+    case 'online': return 'bg-green-500'
+    case 'offline': return 'bg-gray-400'
+    case 'error': return 'bg-red-500'
+    default: return 'bg-gray-400'
+  }
+}
+</script>

src/components/common/BottomNav.vue

@@ -5,14 +5,22 @@
     <!-- Navigation bar -->
     <nav class="absolute bottom-0 left-0 right-0 transform-none md:transform md:translate-y-full md:group-hover:translate-y-0 md:transition-transform md:duration-300 md:ease-in-out bg-white md:bg-transparent border-t md:border-t-0 border-gray-200 md:shadow-none shadow-lg">
       <div class="flex justify-center md:pb-4 pb-2">
-        <ul class="flex space-x-8 md:bg-white md:rounded-lg md:shadow-md px-6 py-3 w-full md:w-auto justify-around md:justify-center">
+        <ul class="flex space-x-4 md:space-x-8 md:bg-white md:rounded-lg md:shadow-md px-6 py-3 w-full md:w-auto justify-around md:justify-center">
           <li>
-            <a class="flex flex-col items-center text-blue-600 font-medium" aria-current="page" href="#">
+            <router-link to="/" class="flex flex-col items-center font-medium" :class="$route.name === 'home' ? 'text-blue-600' : 'text-gray-600 hover:text-blue-600'">
               <svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 24 24">
                 <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
               </svg>
-              <span class="text-xs">Home</span>
-            </a>
+              <span class="text-xs">Dashboard</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link to="/sensors" class="flex flex-col items-center font-medium" :class="$route.name === 'sensors' ? 'text-blue-600' : 'text-gray-600 hover:text-blue-600'">
+              <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+              </svg>
+              <span class="text-xs">Sensors</span>
+            </router-link>
           </li>
           <li>
             <a class="flex flex-col items-center text-gray-600 hover:text-blue-600" href="#">
@@ -22,14 +30,6 @@
               <span class="text-xs">Analytics</span>
             </a>
           </li>
-          <li>
-            <a class="flex flex-col items-center text-gray-600 hover:text-blue-600" href="#">
-              <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
-              </svg>
-              <span class="text-xs">Users</span>
-            </a>
-          </li>
           <li>
             <a class="flex flex-col items-center text-gray-400 cursor-not-allowed" aria-disabled="true">
               <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">

src/components/modals/ActionModal.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="fixed inset-0 z-50 flex items-center justify-center">
+    <!-- Backdrop -->
+    <div class="absolute inset-0 bg-black bg-opacity-50" @click="$emit('close')"></div>
+
+    <!-- Modal -->
+    <div
+      class="relative bg-white rounded-2xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto"
+    >
+      <!-- Header -->
+      <div class="p-6 border-b border-gray-100">
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="text-lg font-medium text-gray-900">{{ action.name }}</h3>
+            <p class="text-sm text-gray-600">{{ sensor.name }} • {{ sensor.room }}</p>
+          </div>
+          <button
+            @click="$emit('close')"
+            class="p-2 hover:bg-gray-100 rounded-full transition-colors"
+          >
+            <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+              <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>
+
+      <!-- Content -->
+      <div class="p-6">
+        <div class="space-y-4">
+          <!-- Range Input (for numeric parameters) -->
+          <div v-if="action.type === 'adjust' && hasNumericRange">
+            <label class="block text-sm font-medium text-gray-700 mb-2">
+              {{ action.name }}
+            </label>
+            <div class="space-y-3">
+              <input
+                v-model.number="numericValue"
+                type="range"
+                :min="action.parameters.min"
+                :max="action.parameters.max"
+                :step="action.parameters.step"
+                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
+              />
+              <div class="flex justify-between text-sm text-gray-600">
+                <span>{{ action.parameters.min }}</span>
+                <span class="font-medium">{{ numericValue }}{{ getUnit() }}</span>
+                <span>{{ action.parameters.max }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Option Selection -->
+          <div v-if="action.type === 'adjust' && action.parameters?.options">
+            <label class="block text-sm font-medium text-gray-700 mb-2">
+              {{ action.name }}
+            </label>
+            <div class="grid grid-cols-2 gap-2">
+              <button
+                v-for="option in action.parameters.options"
+                :key="option"
+                @click="selectedOption = option"
+                class="px-3 py-2 border rounded-lg text-sm font-medium transition-colors"
+                :class="
+                  selectedOption === option
+                    ? 'bg-blue-500 text-white border-blue-500'
+                    : 'bg-white text-gray-700 border-gray-200 hover:bg-gray-50'
+                "
+              >
+                {{ option }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Toggle Action -->
+          <div v-if="action.type === 'toggle'">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-medium text-gray-700">{{ action.name }}</span>
+              <button
+                @click="toggleValue = !toggleValue"
+                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                :class="toggleValue ? 'bg-blue-600' : 'bg-gray-200'"
+              >
+                <span
+                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+                  :class="toggleValue ? 'translate-x-6' : 'translate-x-1'"
+                />
+              </button>
+            </div>
+            <p class="text-sm text-gray-500 mt-1">
+              Current state: {{ toggleValue ? 'ON' : 'OFF' }}
+            </p>
+          </div>
+
+          <!-- Trigger Action -->
+          <div v-if="action.type === 'trigger'">
+            <div class="bg-gray-50 rounded-lg p-4">
+              <div class="flex items-center gap-3">
+                <span class="text-2xl">{{ action.icon }}</span>
+                <div>
+                  <div class="font-medium text-gray-900">{{ action.name }}</div>
+                  <div class="text-sm text-gray-600">Click execute to perform this action</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="px-6 py-4 bg-gray-50 rounded-b-2xl flex gap-3">
+        <button
+          @click="$emit('close')"
+          class="flex-1 px-4 py-2 border border-gray-200 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          @click="executeAction"
+          :disabled="isExecuting"
+          class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors"
+        >
+          {{ isExecuting ? 'Executing...' : 'Execute' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps<{
+  sensor: any
+  action: any
+}>()
+
+const emit = defineEmits<{
+  execute: [sensorId: string, actionId: string, parameters: any]
+  close: []
+}>()
+
+const isExecuting = ref(false)
+const numericValue = ref(0)
+const selectedOption = ref('')
+const toggleValue = ref(false)
+
+// Initialize default values
+watch(
+  () => props.action,
+  (action) => {
+    if (action) {
+      if (action.parameters?.min !== undefined) {
+        numericValue.value = action.parameters.min
+      }
+      if (action.parameters?.options?.length > 0) {
+        selectedOption.value = action.parameters.options[0]
+      }
+      toggleValue.value = false
+    }
+  },
+  { immediate: true },
+)
+
+const hasNumericRange = computed(() => {
+  return (
+    props.action.parameters?.min !== undefined &&
+    props.action.parameters?.max !== undefined &&
+    !props.action.parameters?.options
+  )
+})
+
+const getUnit = () => {
+  if (props.action.id === 'temp_adjust') return '°C'
+  if (props.action.id === 'brightness') return '%'
+  if (props.action.id === 'fan_speed') return ''
+  return ''
+}
+
+const executeAction = async () => {
+  isExecuting.value = true
+
+  let parameters: any = {}
+
+  if (props.action.type === 'adjust') {
+    if (hasNumericRange.value) {
+      parameters.value = numericValue.value
+    } else if (props.action.parameters?.options) {
+      parameters.value = selectedOption.value
+    }
+  } else if (props.action.type === 'toggle') {
+    parameters.enabled = toggleValue.value
+  }
+
+  try {
+    emit('execute', props.sensor.id, props.action.id, parameters)
+  } catch (error) {
+    console.error('Failed to execute action:', error)
+  } finally {
+    isExecuting.value = false
+  }
+}
+</script>
+
+<style scoped>
+/* Custom slider styling */
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+.slider::-moz-range-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+}
+</style>