Added Comfort Index widget, updated stylings on other widgets, GPT Service with problems.

Removed features and architecture sections from README.

.github/copilot-instructions.md

@@ -3,6 +3,8 @@ The following concise instructions help AI coding agents become productive in th
 Purpose
 - This repo is a microservices-based IoT platform for device management, data ingestion, and telemetry storage. The system uses MQTT with mTLS authentication, Redis streams for message queuing, and PostgreSQL/TimescaleDB for persistent storage.
 
+Never forget to involve human developers for more complex tasks and decisions. You are encouraged to ask more.
+
 Big Picture
 - Architecture: Device → MQTT (mTLS) → mqtt_ingestion → Redis → db_write → PostgreSQL/TimescaleDB
 - Components:

db_migrations/alembic/versions/20251113_2208_0f2632e459d3_add_device_onboarding_tokens_for_secure_.py

@@ -0,0 +1,45 @@
+"""Add device onboarding tokens for secure QR code onboarding
+
+Revision ID: 0f2632e459d3
+Revises: 4e405f1129b1
+Create Date: 2025-11-13 22:08:31.765427+00:00
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = '0f2632e459d3'
+down_revision: Union[str, Sequence[str], None] = '4e405f1129b1'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('device_onboarding_tokens',
+    sa.Column('token', sa.Text(), nullable=False),
+    sa.Column('device_id', sa.Text(), nullable=False),
+    sa.Column('certificate_id', sa.Text(), nullable=False),
+    sa.Column('created_at', sa.DateTime(timezone=True), nullable=False),
+    sa.Column('expires_at', sa.DateTime(timezone=True), nullable=False),
+    sa.Column('used_at', sa.DateTime(timezone=True), nullable=True),
+    sa.ForeignKeyConstraint(['device_id'], ['devices.id'], ondelete='CASCADE'),
+    sa.PrimaryKeyConstraint('token')
+    )
+    op.create_index('idx_onboarding_tokens_device_id', 'device_onboarding_tokens', ['device_id'], unique=False)
+    op.create_index('idx_onboarding_tokens_expires', 'device_onboarding_tokens', ['expires_at'], unique=False)
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index('idx_onboarding_tokens_expires', table_name='device_onboarding_tokens')
+    op.drop_index('idx_onboarding_tokens_device_id', table_name='device_onboarding_tokens')
+    op.drop_table('device_onboarding_tokens')
+    # ### end Alembic commands ###

db_migrations/alembic/versions/20251113_2318_4b84a36e13f5_add_cascade_delete_to_telemetry.py

@@ -0,0 +1,48 @@
+"""add_cascade_delete_to_telemetry
+
+Revision ID: 4b84a36e13f5
+Revises: 0f2632e459d3
+Create Date: 2025-11-13 23:18:36.029045+00:00
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+
+
+# revision identifiers, used by Alembic.
+revision: str = '4b84a36e13f5'
+down_revision: Union[str, Sequence[str], None] = '0f2632e459d3'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    """Upgrade schema: Add ON DELETE CASCADE to telemetry foreign key."""
+    # Drop existing foreign key constraint
+    op.drop_constraint('telemetry_device_id_fkey', 'telemetry', type_='foreignkey')
+    
+    # Re-create foreign key with ON DELETE CASCADE
+    op.create_foreign_key(
+        'telemetry_device_id_fkey',
+        'telemetry',
+        'devices',
+        ['device_id'],
+        ['id'],
+        ondelete='CASCADE'
+    )
+
+
+def downgrade() -> None:
+    """Downgrade schema: Remove CASCADE from telemetry foreign key."""
+    # Drop foreign key with CASCADE
+    op.drop_constraint('telemetry_device_id_fkey', 'telemetry', type_='foreignkey')
+    
+    # Re-create foreign key without CASCADE (original state)
+    op.create_foreign_key(
+        'telemetry_device_id_fkey',
+        'telemetry',
+        'devices',
+        ['device_id'],
+        ['id']
+    )

db_migrations/models.py

@@ -78,7 +78,30 @@ class DeviceCredential(Base):
         return f"<DeviceCredential(id={self.id}, device_id={self.device_id}, type={self.credential_type})>"
 
 
-class Telemetry(Base):
+class DeviceOnboardingToken(Base):
+    """One-time tokens for secure device onboarding via QR code."""
+
+    __tablename__ = "device_onboarding_tokens"
+
+    token = Column(Text, primary_key=True)
+    device_id = Column(
+        Text, ForeignKey("devices.id", ondelete="CASCADE"), nullable=False
+    )
+    certificate_id = Column(Text, nullable=False)
+    created_at = Column(DateTime(timezone=True), nullable=False)
+    expires_at = Column(DateTime(timezone=True), nullable=False)
+    used_at = Column(DateTime(timezone=True))
+
+    __table_args__ = (
+        Index("idx_onboarding_tokens_device_id", "device_id"),
+        Index("idx_onboarding_tokens_expires", "expires_at"),
+    )
+
+    def __repr__(self):
+        return f"<DeviceOnboardingToken(device_id={self.device_id}, used={self.used_at is not None})>"
+
+
+class   Telemetry(Base):
     """
     Time-series telemetry data from devices.
     """

frontend/.env.example

@@ -0,0 +1,8 @@
+# API Configuration
+VITE_API_URL=/api
+# Django proxy URL (used for QR code API endpoint)
+VITE_DEVICE_MANAGER_URL=http://10.10.1.114:3000/api
+
+# MQTT Configuration
+VITE_MQTT_BROKER=10.10.1.114
+VITE_MQTT_PORT=8883

frontend/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>iotDashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7"
+  }
+}

frontend/src/App.css

@@ -0,0 +1,165 @@
+/* Custom styles for the IoT Dashboard */
+
+#root {
+  width: 100%;
+  min-height: 100vh;
+}
+
+/* Custom scrollbar for the drawer */
+.drawer-side::-webkit-scrollbar {
+  width: 8px;
+}
+
+.drawer-side::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.drawer-side::-webkit-scrollbar-thumb {
+  background: hsl(var(--bc) / 0.2);
+  border-radius: 4px;
+}
+
+.drawer-side::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--bc) / 0.3);
+}
+
+/* Smooth transitions for interactive elements */
+.btn,
+.card {
+  transition: all 0.2s ease-in-out;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+/* Badge animations */
+.badge {
+  transition: all 0.2s ease-in-out;
+}
+
+/* Stats animation on load */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stats {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+/* Responsive table scrolling */
+.overflow-x-auto {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--bc) / 0.2) transparent;
+}
+
+.overflow-x-auto::-webkit-scrollbar {
+  height: 8px;
+}
+
+.overflow-x-auto::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.overflow-x-auto::-webkit-scrollbar-thumb {
+  background: hsl(var(--bc) / 0.2);
+  border-radius: 4px;
+}
+
+/* Loading spinner custom styles */
+.loading {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* React Grid Layout Overrides */
+.react-grid-layout {
+  position: relative;
+}
+
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top, width, height;
+}
+
+.react-grid-item img {
+  pointer-events: none;
+  user-select: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid hsl(var(--bc) / 0.4);
+  border-bottom: 2px solid hsl(var(--bc) / 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+
+.react-grid-item.resizing {
+  transition: none;
+  z-index: 100;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 100;
+  will-change: transform;
+}
+
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: hsl(var(--p) / 0.2);
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  border-radius: 0.5rem;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  border-right: 2px solid hsl(var(--p));
+  border-bottom: 2px solid hsl(var(--p));
+}

frontend/src/App.tsx

@@ -0,0 +1,97 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router-dom'
+import { Toaster } from 'react-hot-toast'
+import Dashboard from './pages/Dashboard'
+import DeviceList from './pages/DeviceList'
+import DeviceDetail from './pages/DeviceDetail'
+import AddDevice from './pages/AddDevice'
+import './App.css'
+
+const queryClient = new QueryClient()
+
+function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="drawer lg:drawer-open">
+      <input id="main-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer-content flex flex-col">
+        {/* Navbar */}
+        <div className="navbar bg-base-300 lg:hidden">
+          <div className="flex-none">
+            <label htmlFor="main-drawer" className="btn btn-square btn-ghost">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 stroke-current">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
+              </svg>
+            </label>
+          </div>
+          <div className="flex-1">
+            <span className="text-xl font-bold">IoT Dashboard</span>
+          </div>
+        </div>
+
+        {/* Page content */}
+        <main className="flex-1 bg-base-200">
+          {children}
+        </main>
+      </div>
+
+      {/* Sidebar */}
+      <div className="drawer-side">
+        <label htmlFor="main-drawer" className="drawer-overlay"></label>
+        <aside className="bg-base-100 w-64 min-h-full">
+          <div className="p-4">
+            <Link to="/" className="flex items-center gap-2 text-2xl font-bold">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>IoT Dashboard</span>
+            </Link>
+          </div>
+
+          <ul className="menu p-4 space-y-2">
+            <li>
+              <NavLink
+                to="/"
+                className={({ isActive }) => isActive ? 'active' : ''}
+                end
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+                Dashboard
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to="/devices"
+                className={({ isActive }) => isActive ? 'active' : ''}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
+                Devices
+              </NavLink>
+            </li>
+          </ul>
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Toaster position="top-right" />
+        <Routes>
+          <Route path="/" element={<AppLayout><Dashboard /></AppLayout>} />
+          <Route path="/devices" element={<AppLayout><DeviceList /></AppLayout>} />
+          <Route path="/devices/add" element={<AppLayout><AddDevice /></AppLayout>} />
+          <Route path="/devices/:id" element={<AppLayout><DeviceDetail /></AppLayout>} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+export default App

frontend/src/App.tsx.bak

@@ -0,0 +1,402 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router-dom'
+import { Toaster } from 'react-hot-toast'
+import Dashboard from './pages/Dashboard'
+import DeviceList from './pages/DeviceList'
+import DeviceDetail from './pages/DeviceDetail'
+import AddDevice from './pages/AddDevice'
+import './App.css'
+
+const queryClient = new QueryClient()
+
+function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="drawer lg:drawer-open">
+      <input id="main-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer-content flex flex-col">
+        {/* Navbar */}
+        <div className="navbar bg-base-300 lg:hidden">
+          <div className="flex-none">
+            <label htmlFor="main-drawer" className="btn btn-square btn-ghost">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 stroke-current">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
+              </svg>
+            </label>
+          </div>
+          <div className="flex-1">
+            <span className="text-xl font-bold">IoT Dashboard</span>
+          </div>
+        </div>
+
+        {/* Page content */}
+        <main className="flex-1 bg-base-200">
+          {children}
+        </main>
+      </div>
+
+      {/* Sidebar */}
+      <div className="drawer-side">
+        <label htmlFor="main-drawer" className="drawer-overlay"></label>
+        <aside className="bg-base-100 w-64 min-h-full">
+          <div className="p-4">
+            <Link to="/" className="flex items-center gap-2 text-2xl font-bold">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>IoT Dashboard</span>
+            </Link>
+          </div>
+
+          <ul className="menu p-4 space-y-2">
+            <li>
+              <NavLink
+                to="/"
+                className={({ isActive }) => isActive ? 'active' : ''}
+                end
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+                Dashboard
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to="/devices"
+                className={({ isActive }) => isActive ? 'active' : ''}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
+                Devices
+              </NavLink>
+            </li>
+          </ul>
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+function App() {
+    queryKey: ['dashboard'],
+    queryFn: async () => {
+      const response = await dashboardApi.getOverview()
+      return response.data
+    },
+  })
+
+  const { data: devices, isLoading: devicesLoading } = useQuery({
+    queryKey: ['devices'],
+    queryFn: async () => {
+      const response = await devicesApi.getAll()
+      return response.data
+    },
+  })
+
+  if (overviewLoading || devicesLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <span className="loading loading-spinner loading-lg text-primary"></span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="drawer lg:drawer-open">
+      <input id="drawer" type="checkbox" className="drawer-toggle" />
+      
+      <div className="drawer-content flex flex-col">
+        {/* Navbar */}
+        <div className="navbar bg-base-100 shadow-lg">
+          <div className="flex-none lg:hidden">
+            <label htmlFor="drawer" className="btn btn-square btn-ghost">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
+              </svg>
+            </label>
+          </div>
+          <div className="flex-1">
+            <h1 className="text-2xl font-bold ml-2">IoT Dashboard</h1>
+          </div>
+          <div className="flex-none gap-2">
+            <div className="dropdown dropdown-end">
+              <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
+                <div className="w-10 rounded-full bg-primary text-primary-content flex items-center justify-center">
+                  <span className="text-xl">U</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="p-4 md:p-8">
+          {/* Breadcrumbs */}
+          <div className="text-sm breadcrumbs mb-4">
+            <ul>
+              <li><a>Home</a></li>
+              <li>Dashboard</li>
+            </ul>
+          </div>
+
+          {/* Page Header */}
+          <div className="mb-6">
+            <h2 className="text-3xl font-bold">Dashboard Overview</h2>
+            <p className="text-base-content/70 mt-1">
+              Office Environment Intelligence Platform
+            </p>
+          </div>
+
+          {/* Stats Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-primary">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  </svg>
+                </div>
+                <div className="stat-title">Total Devices</div>
+                <div className="stat-value text-primary">{overview?.total_devices || 0}</div>
+                <div className="stat-desc">Registered in system</div>
+              </div>
+            </div>
+
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-success">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <div className="stat-title">Active Devices</div>
+                <div className="stat-value text-success">{overview?.active_devices || 0}</div>
+                <div className="stat-desc">Currently online</div>
+              </div>
+            </div>
+
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-secondary">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
+                  </svg>
+                </div>
+                <div className="stat-title">MQTT Devices</div>
+                <div className="stat-value text-secondary">{overview?.mqtt_devices || 0}</div>
+                <div className="stat-desc">Using mTLS</div>
+              </div>
+            </div>
+
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-warning">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                </div>
+                <div className="stat-title">Expiring Soon</div>
+                <div className="stat-value text-warning">{overview?.certificates_expiring_soon || 0}</div>
+                <div className="stat-desc">Certificates need renewal</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Devices Section */}
+          <div className="card bg-base-100 shadow-xl">
+            <div className="card-body">
+              <div className="flex justify-between items-center mb-4">
+                <h2 className="card-title text-2xl">Devices</h2>
+                <button className="btn btn-primary btn-sm">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
+                  </svg>
+                  Add Device
+                </button>
+              </div>
+              
+              {devices && devices.length > 0 ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {devices.map((device: Device) => (
+                    <div key={device.id} className="card bg-base-200 shadow-md hover:shadow-xl transition-shadow">
+                      <div className="card-body">
+                        <div className="flex justify-between items-start">
+                          <h3 className="card-title text-lg">{device.name}</h3>
+                          <div className={`badge ${device.is_active ? 'badge-success' : 'badge-ghost'}`}>
+                            {device.is_active ? 'Active' : 'Inactive'}
+                          </div>
+                        </div>
+                        <div className="space-y-2 text-sm">
+                          <div className="flex items-center gap-2">
+                            <span className="font-semibold">ID:</span>
+                            <code className="bg-base-300 px-2 py-1 rounded">{device.id}</code>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className="font-semibold">Protocol:</span>
+                            <div className="badge badge-outline">{device.protocol.toUpperCase()}</div>
+                          </div>
+                          {device.location && (
+                            <div className="flex items-center gap-2">
+                              <span className="font-semibold">Location:</span>
+                              <span>{device.location}</span>
+                            </div>
+                          )}
+                          {device.certificate_status && (
+                            <div className="flex items-center gap-2">
+                              <span className="font-semibold">Certificate:</span>
+                              <div className={`badge ${
+                                device.certificate_status === 'Valid' ? 'badge-success' :
+                                device.certificate_status === 'Expiring Soon' ? 'badge-warning' :
+                                'badge-error'
+                              }`}>
+                                {device.certificate_status}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                        <div className="card-actions justify-end mt-4">
+                          <button className="btn btn-sm btn-ghost">View</button>
+                          <button className="btn btn-sm btn-primary">Manage</button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="alert">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info shrink-0 w-6 h-6">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  </svg>
+                  <span>No devices registered yet. Add your first device to get started!</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Recent Telemetry */}
+          {overview && overview.recent_telemetry.length > 0 && (
+            <div className="card bg-base-100 shadow-xl mt-8">
+              <div className="card-body">
+                <h2 className="card-title text-2xl mb-4">Recent Telemetry</h2>
+                <div className="overflow-x-auto">
+                  <table className="table table-zebra">
+                    <thead>
+                      <tr>
+                        <th>Device</th>
+                        <th>Metric</th>
+                        <th>Value</th>
+                        <th>Time</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {overview.recent_telemetry.map((t: { device_name: string; device_id: string; metric: string; value: number; unit?: string; time: string }, idx: number) => (
+                        <tr key={idx} className="hover">
+                          <td>
+                            <div className="font-bold">{t.device_name}</div>
+                            <div className="text-sm opacity-50">{t.device_id}</div>
+                          </td>
+                          <td>
+                            <div className="badge badge-ghost">{t.metric}</div>
+                          </td>
+                          <td className="font-mono font-semibold">
+                            {t.value} {t.unit || ''}
+                          </td>
+                          <td className="text-sm opacity-70">
+                            {new Date(t.time).toLocaleString()}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Drawer Sidebar */}
+      <div className="drawer-side z-10">
+        <label htmlFor="drawer" className="drawer-overlay"></label>
+        <aside className="bg-base-200 w-64 min-h-screen">
+          <div className="p-4">
+            <h2 className="text-xl font-bold mb-4">IoT Dashboard</h2>
+          </div>
+          <ul className="menu p-4 text-base-content">
+            <li>
+              <a className="active">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+                Dashboard
+              </a>
+            </li>
+            <li>
+              <a>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+                Devices
+              </a>
+            </li>
+            <li>
+              <a>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+                Analytics
+              </a>
+            </li>
+            <li>
+              <a>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                </svg>
+                AI Assistant
+              </a>
+            </li>
+            <li className="menu-title">
+              <span>Management</span>
+            </li>
+            <li>
+              <a>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                Reports
+              </a>
+            </li>
+            <li>
+              <a>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                Settings
+              </a>
+            </li>
+          </ul>
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Toaster position="top-right" />
+        <Routes>
+          <Route path="/" element={<AppLayout><Dashboard /></AppLayout>} />
+          <Route path="/devices" element={<AppLayout><DeviceList /></AppLayout>} />
+          <Route path="/devices/add" element={<AppLayout><AddDevice /></AppLayout>} />
+          <Route path="/devices/:id" element={<AppLayout><DeviceDetail /></AppLayout>} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+export default App

frontend/src/api/index.ts

@@ -0,0 +1,148 @@
+import apiClient from '../lib/api-client';
+import type {
+  Device,
+  DeviceRegistrationRequest,
+  DeviceRegistrationResponse,
+  Telemetry,
+  DashboardOverview,
+} from '../types/api';
+
+// Paginated response type from Django REST Framework
+interface PaginatedResponse<T> {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: T[];
+}
+
+// Device API
+export const devicesApi = {
+  getAll: async () => {
+    const response = await apiClient.get<Device[] | PaginatedResponse<Device>>('/devices/');
+    // Handle both paginated and non-paginated responses
+    if (Array.isArray(response.data)) {
+      // Non-paginated response - wrap it
+      return {
+        ...response,
+        data: {
+          count: response.data.length,
+          next: null,
+          previous: null,
+          results: response.data,
+        },
+      };
+    }
+    // Already paginated
+    return response as typeof response & { data: PaginatedResponse<Device> };
+  },
+  
+  getOne: (id: string) => apiClient.get<Device>(`/devices/${id}/`),
+  
+  create: (data: DeviceRegistrationRequest) =>
+    apiClient.post<DeviceRegistrationResponse>('/devices/', data),
+  
+  delete: (id: string) => apiClient.delete(`/devices/${id}/`),
+  
+  revoke: (id: string) => apiClient.post(`/devices/${id}/revoke/`),
+  
+  renew: (id: string) =>
+    apiClient.post<DeviceRegistrationResponse>(`/devices/${id}/renew/`),
+  
+  getTelemetry: (id: string, params?: {
+    metric?: string;
+    hours?: number;
+    limit?: number;
+  }) => apiClient.get<Telemetry[]>(`/devices/${id}/telemetry/`, { params }),
+  
+  getMetrics: (id: string) =>
+    apiClient.get<{ device_id: string; device_name: string; metrics: string[] }>(
+      `/devices/${id}/metrics/`
+    ),
+  
+  getComfortIndex: (id: string) =>
+    apiClient.get<{
+      device_id: string;
+      device_name: string;
+      overall_score: number;
+      rating: string;
+      components: {
+        temperature: number;
+        humidity: number;
+        air_quality: number;
+        acoustic: number;
+        light: number;
+      };
+      suggestions: string[];
+      raw_readings: Record<string, number>;
+    }>(`/devices/${id}/comfort_index/`),
+};
+
+// Telemetry API
+export const telemetryApi = {
+  query: (params?: {
+    device_id?: string;
+    metric?: string;
+    hours?: number;
+    start_time?: string;
+    end_time?: string;
+    page_size?: number;
+    page?: number;
+  }) => apiClient.get<PaginatedResponse<Telemetry>>('/telemetry/', { params }),
+  
+  getLatest: (params?: { limit?: number }) =>
+    apiClient.get<PaginatedResponse<Telemetry>>('/telemetry/latest/', { params }),
+  
+  getMetrics: () => apiClient.get<{ metrics: string[] }>('/telemetry/metrics/'),
+  
+  analyze: (data: {
+    device_id: string;
+    metric?: string;
+    hours?: number;
+    limit?: number;
+    prompt_type?: 'anomaly_detection' | 'trend_summary' | 'custom';
+    custom_prompt?: string;
+  }) => apiClient.post<{
+    analysis: string;
+    prompt_type: string;
+    data_points_analyzed: number;
+  }>('/telemetry/analyze/', data),
+};
+
+// Dashboard API
+export const dashboardApi = {
+  getOverview: () => apiClient.get<DashboardOverview>('/dashboard/overview/'),
+};
+
+// Weather API
+export const weatherApi = {
+  getCurrent: (params: { city?: string; lat?: number; lon?: number }) =>
+    apiClient.get<{
+      location: string;
+      temperature: number;
+      apparent_temperature: number;
+      humidity: number;
+      weather_description: string;
+      weather_code: number;
+      precipitation: number;
+      rain: number;
+      cloud_cover: number;
+      wind_speed: number;
+      wind_direction: number;
+      time: string;
+      timezone: string;
+    }>('/weather/current/', { params }),
+
+  getAirQuality: (city: string) =>
+    apiClient.get<{
+      city: string;
+      measurements: Record<string, {
+        average: number;
+        min: number;
+        max: number;
+        count: number;
+      }>;
+      status: string;
+      timestamp: string;
+      sensor_count: number;
+    }>('/weather/air_quality/', { params: { city } }),
+};

frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/AddWidgetModal.tsx

@@ -0,0 +1,501 @@
+import { useState, useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { devicesApi } from '../api'
+import type { WidgetType, WidgetConfig } from '../hooks'
+import { createDefaultWidgetTitle } from '../utils/formatters'
+
+interface AddWidgetModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onAdd: (widget: WidgetConfig) => void
+}
+
+export default function AddWidgetModal({ isOpen, onClose, onAdd }: AddWidgetModalProps) {
+  const [step, setStep] = useState(1)
+  const [widgetType, setWidgetType] = useState<WidgetType>('stat')
+  const [title, setTitle] = useState('')
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [selectedMetrics, setSelectedMetrics] = useState<string[]>([])
+  const [timeframeHours, setTimeframeHours] = useState(24)
+  const [widgetWidth, setWidgetWidth] = useState(1)
+  const [widgetHeight, setWidgetHeight] = useState(2) 
+  const [city, setCity] = useState('Skopje') 
+
+  // Fetch devices
+  const { data: devicesData } = useQuery({
+    queryKey: ['devices'],
+    queryFn: async () => {
+      const response = await devicesApi.getAll()
+      return response.data
+    },
+  })
+
+  // Fetch metrics for selected device(s)
+  const { data: deviceMetricsData } = useQuery({
+    queryKey: ['device-metrics', selectedDevices[0]],
+    queryFn: async () => {
+      if (selectedDevices.length === 0) return []
+      const response = await devicesApi.getMetrics(selectedDevices[0])
+      return response.data.metrics
+    },
+    enabled: selectedDevices.length > 0,
+  })
+
+  const devices = devicesData?.results || []
+  const availableMetrics = deviceMetricsData || []
+
+  // Reset form when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setStep(1)
+      setWidgetType('stat')
+      setTitle('')
+      setSelectedDevices([])
+      setSelectedMetrics([])
+      setTimeframeHours(24)
+      setWidgetWidth(1)
+      setWidgetHeight(2)
+    }
+  }, [isOpen])
+
+  // Reset metrics when device changes
+  useEffect(() => {
+    setSelectedMetrics([])
+  }, [selectedDevices])
+
+  const handleSubmit = () => {
+    // Weather and air-quality widgets don't need device/metric validation
+    if (widgetType !== 'weather' && widgetType !== 'air-quality') {
+      if (selectedDevices.length === 0 || selectedMetrics.length === 0) {
+        alert('Please select at least one device and one metric')
+        return
+      }
+    }
+
+    // Create title
+    let defaultTitle = ''
+    if (widgetType === 'weather') {
+      defaultTitle = `Weather - ${city}`
+    } else if (widgetType === 'air-quality') {
+      defaultTitle = `Air Quality - ${city}`
+    } else {
+      const selectedDevice = devices.find(d => d.id === selectedDevices[0])
+      defaultTitle = createDefaultWidgetTitle(widgetType, selectedDevice?.name, selectedMetrics)
+    }
+
+    const newWidget: WidgetConfig = {
+      id: `widget-${Date.now()}`,
+      type: widgetType,
+      title: title || defaultTitle,
+      deviceIds: widgetType === 'weather' || widgetType === 'air-quality' ? [] : selectedDevices,
+      metricIds: widgetType === 'weather' || widgetType === 'air-quality' ? [] : selectedMetrics,
+      timeframe: {
+        hours: timeframeHours,
+      },
+      visualization: {
+        showLegend: true,
+        showGrid: true,
+        height: widgetType === 'line-chart' ? 300 : undefined,
+        city: widgetType === 'weather' || widgetType === 'air-quality' ? city : undefined,
+      },
+      position: {
+        x: 0,
+        y: 0,
+        w: widgetWidth,
+        h: widgetHeight,
+      },
+    }
+
+    onAdd(newWidget)
+    onClose()
+  }
+
+  const toggleDevice = (deviceId: string) => {
+    // Only allow single device selection for better UX
+    setSelectedDevices([deviceId])
+  }
+
+  const toggleMetric = (metric: string) => {
+    // Stat and gauge widgets only allow one metric
+    const singleMetricWidgets = ['stat', 'gauge']
+    const maxMetrics = singleMetricWidgets.includes(widgetType) ? 1 : 5
+
+    setSelectedMetrics((prev) => {
+      if (prev.includes(metric)) {
+        return prev.filter((m) => m !== metric)
+      }
+      
+      // If adding would exceed max, replace last or prevent
+      if (prev.length >= maxMetrics) {
+        if (maxMetrics === 1) {
+          return [metric] // Replace for single-metric widgets
+        }
+        return prev // Don't add more for multi-metric widgets
+      }
+      
+      return [...prev, metric]
+    })
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="modal modal-open">
+      <div className="modal-box max-w-2xl">
+        <h3 className="font-bold text-lg mb-4">Add Widget</h3>
+
+        {/* Progress steps */}
+        <ul className="steps w-full mb-6">
+          <li className={`step ${step >= 1 ? 'step-primary' : ''}`}>Type</li>
+          <li className={`step ${step >= 2 ? 'step-primary' : ''}`}>Data Source</li>
+          <li className={`step ${step >= 3 ? 'step-primary' : ''}`}>Configure</li>
+        </ul>
+
+        {/* Step 1: Widget Type */}
+        {step === 1 && (
+          <div className="space-y-4">
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Select Widget Type</span>
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  className={`btn ${widgetType === 'stat' ? 'btn-primary' : 'btn-outline'} justify-start`}
+                  onClick={() => setWidgetType('stat')}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+                  </svg>
+                  <div className="text-left">
+                    <div className="font-semibold">Stat Card</div>
+                    <div className="text-xs opacity-70">Min/Max/Avg</div>
+                  </div>
+                </button>
+
+                <button
+                  className={`btn ${widgetType === 'line-chart' ? 'btn-primary' : 'btn-outline'} justify-start`}
+                  onClick={() => setWidgetType('line-chart')}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  </svg>
+                  <div className="text-left">
+                    <div className="font-semibold">Line Chart</div>
+                    <div className="text-xs opacity-70">Time series</div>
+                  </div>
+                </button>
+
+                <button
+                  className={`btn ${widgetType === 'gauge' ? 'btn-primary' : 'btn-outline'} justify-start`}
+                  onClick={() => setWidgetType('gauge')}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div className="text-left">
+                    <div className="font-semibold">Gauge</div>
+                    <div className="text-xs opacity-70">Circular meter</div>
+                  </div>
+                </button>
+
+                <button
+                  className={`btn ${widgetType === 'ai-insight' ? 'btn-primary' : 'btn-outline'} justify-start`}
+                  onClick={() => setWidgetType('ai-insight')}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                  </svg>
+                  <div className="text-left">
+                    <div className="font-semibold">AI Insight</div>
+                    <div className="text-xs opacity-70">GPT analysis</div>
+                  </div>
+                </button>
+
+                <button
+                  className={`btn ${widgetType === 'weather' ? 'btn-primary' : 'btn-outline'} justify-start`}
+                  onClick={() => setWidgetType('weather')}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                  </svg>
+                  <div className="text-left">
+                    <div className="font-semibold">Weather</div>
+                    <div className="text-xs opacity-70">Open-Meteo</div>
+                  </div>
+                </button>
+
+                <button
+                  className={`btn ${widgetType === 'air-quality' ? 'btn-primary' : 'btn-outline'} justify-start`}
+                  onClick={() => setWidgetType('air-quality')}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                  </svg>
+                  <div className="text-left">
+                    <div className="font-semibold">Air Quality</div>
+                    <div className="text-xs opacity-70">Pulse.eco</div>
+                  </div>
+                </button>
+
+                <button
+                  className={`btn ${widgetType === 'comfort-index' ? 'btn-primary' : 'btn-outline'} justify-start`}
+                  onClick={() => setWidgetType('comfort-index')}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div className="text-left">
+                    <div className="font-semibold">Comfort Index</div>
+                    <div className="text-xs opacity-70">Multi-factor</div>
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <div className="modal-action">
+              <button className="btn btn-ghost" onClick={onClose}>
+                Cancel
+              </button>
+              <button 
+                className="btn btn-primary" 
+                onClick={() => {
+                  // Skip data source step for weather and air quality widgets
+                  if (widgetType === 'weather' || widgetType === 'air-quality') {
+                    setStep(3)
+                  } else {
+                    setStep(2)
+                  }
+                }}
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Step 2: Data Source */}
+        {step === 2 && widgetType !== 'weather' && widgetType !== 'air-quality' && (
+          <div className="space-y-4">
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Select Device</span>
+                <span className="label-text-alt">{selectedDevices.length} selected</span>
+              </label>
+              <div className="border rounded-lg p-2 max-h-48 overflow-y-auto space-y-1">
+                {devices.length === 0 ? (
+                  <div className="text-center text-base-content/60 py-4">No devices found</div>
+                ) : (
+                  devices.map((device) => (
+                    <label key={device.id} className="flex items-center gap-2 p-2 hover:bg-base-200 rounded cursor-pointer">
+                      <input
+                        type="radio"
+                        name="device"
+                        className="radio radio-sm"
+                        checked={selectedDevices.includes(device.id)}
+                        onChange={() => toggleDevice(device.id)}
+                      />
+                      <div className="flex-1">
+                        <div className="font-medium">{device.name}</div>
+                        <div className="text-xs text-base-content/60">{device.location || 'No location'}</div>
+                      </div>
+                      <div className="badge badge-sm">{device.protocol}</div>
+                    </label>
+                  ))
+                )}
+              </div>
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Select Metric(s)</span>
+                <span className="label-text-alt">{selectedMetrics.length} selected</span>
+              </label>
+              {selectedDevices.length === 0 ? (
+                <div className="border rounded-lg p-4 text-center text-base-content/60">
+                  Please select a device first
+                </div>
+              ) : (
+                <>
+                  {(['stat', 'gauge'].includes(widgetType)) && (
+                    <div className="alert alert-info mb-2">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-5 h-5">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                      </svg>
+                      <span className="text-sm">This widget type supports only one metric</span>
+                    </div>
+                  )}
+                  <div className="border rounded-lg p-2 max-h-48 overflow-y-auto space-y-1">
+                    {availableMetrics.length === 0 ? (
+                      <div className="text-center text-base-content/60 py-4">
+                        No metrics found for this device
+                      </div>
+                    ) : (
+                      availableMetrics.map((metric) => (
+                        <label key={metric} className="flex items-center gap-2 p-2 hover:bg-base-200 rounded cursor-pointer">
+                          <input
+                            type={(['stat', 'gauge'].includes(widgetType)) ? 'radio' : 'checkbox'}
+                            name={(['stat', 'gauge'].includes(widgetType)) ? 'single-metric' : undefined}
+                            className={(['stat', 'gauge'].includes(widgetType)) ? 'radio radio-sm' : 'checkbox checkbox-sm'}
+                            checked={selectedMetrics.includes(metric)}
+                            onChange={() => toggleMetric(metric)}
+                          />
+                          <span className="capitalize">{metric.replace(/_/g, ' ')}</span>
+                        </label>
+                      ))
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+
+            <div className="modal-action">
+              <button className="btn btn-ghost" onClick={() => setStep(1)}>
+                Back
+              </button>
+              <button
+                className="btn btn-primary"
+                onClick={() => setStep(3)}
+                disabled={selectedDevices.length === 0 || selectedMetrics.length === 0}
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Step 3: Configure */}
+        {step === 3 && (
+          <div className="space-y-4">
+            {/* City input for weather and air-quality widgets */}
+            {(widgetType === 'weather' || widgetType === 'air-quality') ? (
+              <>
+                <div className="form-control">
+                  <label className="label">
+                    <span className="label-text font-semibold">City</span>
+                  </label>
+                  <input
+                    type="text"
+                    className="input input-bordered"
+                    placeholder="Enter city name (e.g., Skopje)"
+                    value={city}
+                    onChange={(e) => setCity(e.target.value)}
+                  />
+                  <label className="label">
+                    <span className="label-text-alt">
+                      {widgetType === 'air-quality' 
+                        ? 'Available cities: Skopje, Bitola, Veles, Tetovo, etc.' 
+                        : 'Enter any city name for weather data'}
+                    </span>
+                  </label>
+                </div>
+
+                <div className="form-control">
+                  <label className="label">
+                    <span className="label-text font-semibold">Widget Title (Optional)</span>
+                  </label>
+                  <input
+                    type="text"
+                    className="input input-bordered"
+                    placeholder={widgetType === 'weather' ? `Weather - ${city}` : `Air Quality - ${city}`}
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                  />
+                </div>
+              </>
+            ) : (
+              // Original configuration for sensor-based widgets
+              <>
+                <div className="form-control">
+                  <label className="label">
+                    <span className="label-text font-semibold">Widget Title (Optional)</span>
+                  </label>
+                  <input
+                    type="text"
+                    className="input input-bordered"
+                    placeholder="Auto-generated if empty"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                  />
+                </div>
+
+                <div className="form-control">
+                  <label className="label">
+                    <span className="label-text font-semibold">Time Range</span>
+                  </label>
+                  <select
+                    className="select select-bordered"
+                    value={timeframeHours}
+                    onChange={(e) => setTimeframeHours(Number(e.target.value))}
+                  >
+                    <option value={1}>Last 1 hour</option>
+                    <option value={6}>Last 6 hours</option>
+                    <option value={24}>Last 24 hours</option>
+                    <option value={168}>Last 7 days</option>
+                    <option value={720}>Last 30 days</option>
+                  </select>
+                </div>
+              </>
+            )}
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="form-control">
+                <label className="label">
+                  <span className="label-text font-semibold">Width</span>
+                </label>
+                <select
+                  className="select select-bordered"
+                  value={widgetWidth}
+                  onChange={(e) => setWidgetWidth(Number(e.target.value))}
+                >
+                  <option value={1}>Small (1 column)</option>
+                  <option value={2}>Medium (2 columns)</option>
+                  <option value={3}>Large (3 columns)</option>
+                  <option value={4}>Full Width (4 columns)</option>
+                </select>
+              </div>
+
+              <div className="form-control">
+                <label className="label">
+                  <span className="label-text font-semibold">Height</span>
+                </label>
+                <select
+                  className="select select-bordered"
+                  value={widgetHeight}
+                  onChange={(e) => setWidgetHeight(Number(e.target.value))}
+                >
+                  <option value={1}>Short</option>
+                  <option value={2}>Medium</option>
+                  <option value={3}>Tall</option>
+                  <option value={4}>Extra Tall</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="alert">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info shrink-0 w-6 h-6">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+              <div className="text-sm">
+                <div className="font-semibold">Widget Summary</div>
+                <div>Type: <span className="badge badge-sm">{widgetType}</span></div>
+                <div>Device: {devices.find(d => d.id === selectedDevices[0])?.name}</div>
+                <div>Metrics: {selectedMetrics.join(', ')}</div>
+                <div>Size: {widgetWidth} × {widgetHeight}</div>
+              </div>
+            </div>
+
+            <div className="modal-action">
+              <button className="btn btn-ghost" onClick={() => setStep(2)}>
+                Back
+              </button>
+              <button className="btn btn-primary" onClick={handleSubmit}>
+                Add Widget
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="modal-backdrop" onClick={onClose}></div>
+    </div>
+  )
+}

frontend/src/components/CredentialsViewer.tsx

@@ -0,0 +1,192 @@
+import { useState } from 'react'
+import { QRCodeSVG } from 'qrcode.react'
+import toast from 'react-hot-toast'
+import type { DeviceRegistrationResponse } from '../types/api'
+
+interface CredentialsViewerProps {
+  credentials: DeviceRegistrationResponse
+  deviceId?: string
+}
+
+const downloadFile = (content: string, filename: string) => {
+  const blob = new Blob([content], { type: 'text/plain' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+  toast.success(`${filename} downloaded`)
+}
+
+const copyToClipboard = (content: string, label: string) => {
+  navigator.clipboard.writeText(content)
+  toast.success(`${label} copied to clipboard`)
+}
+
+export default function CredentialsViewer({ credentials, deviceId }: CredentialsViewerProps) {
+  const resolvedDeviceId = credentials.device_id || deviceId || 'device'
+  const expiresAt = credentials.expires_at ? new Date(credentials.expires_at).toLocaleString() : null
+  const [showQR, setShowQR] = useState(false)
+
+  // Read configuration from environment variables
+  const deviceManagerUrl = import.meta.env.VITE_DEVICE_MANAGER_URL || 'http://localhost:8000'
+  const mqttBroker = import.meta.env.VITE_MQTT_BROKER || 'localhost'
+  const mqttPort = import.meta.env.VITE_MQTT_PORT || '8883'
+
+  const qrData = credentials.onboarding_token ? JSON.stringify({
+    type: 'iot_device_onboarding',
+    device_id: resolvedDeviceId,
+    token: credentials.onboarding_token,
+    api_url: deviceManagerUrl,
+    broker: mqttBroker,
+    port: parseInt(mqttPort, 10),
+  }) : null
+
+  return (
+    <div className="space-y-4">
+      {/* Secure QR Code for Mobile Onboarding */}
+      {qrData && (
+        <div className="rounded-lg bg-success/10 border border-success/30 p-4">
+          <div className="flex items-start gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-success shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+            <div className="flex-1">
+              <h3 className="font-semibold mb-1">Secure Mobile Onboarding</h3>
+              <p className="text-sm opacity-80 mb-2">
+                Scan this QR code with your mobile app to securely fetch certificates. Token expires in <strong>15 minutes</strong> and can only be used <strong>once</strong>.
+              </p>
+              <div className="alert alert-warning alert-sm mb-3">
+                <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <span className="text-xs">This QR code will not be shown again. Scan it now!</span>
+              </div>
+              <button
+                className="btn btn-sm btn-success"
+                onClick={() => setShowQR(!showQR)}
+              >
+                {showQR ? 'Hide QR Code' : 'Show QR Code'}
+              </button>
+              {showQR && (
+                <div className="mt-4 flex justify-center p-6 bg-white rounded-lg border-2 border-success">
+                  <QRCodeSVG
+                    value={qrData}
+                    size={280}
+                    level="H"
+                    includeMargin={true}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {(credentials.certificate_id || expiresAt) && (
+        <div className="rounded-lg bg-base-200 p-4 text-sm">
+          <div className="flex flex-col gap-2">
+            {credentials.certificate_id && (
+              <div className="flex items-center justify-between">
+                <span className="font-semibold">Certificate ID</span>
+                <code className="bg-base-100 px-2 py-1 rounded">
+                  {credentials.certificate_id}
+                </code>
+              </div>
+            )}
+            {expiresAt && (
+              <div className="flex items-center justify-between">
+                <span className="font-semibold">Expires At</span>
+                <span>{expiresAt}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {credentials.ca_certificate_pem && (
+        <div>
+          <label className="label">
+            <span className="label-text font-semibold">CA Certificate</span>
+          </label>
+          <textarea
+            className="textarea textarea-bordered w-full font-mono text-xs h-32"
+            value={credentials.ca_certificate_pem}
+            readOnly
+          />
+          <div className="flex gap-2 mt-2">
+            <button
+              className="btn btn-sm btn-outline"
+              onClick={() => copyToClipboard(credentials.ca_certificate_pem!, 'CA certificate')}
+            >
+              Copy
+            </button>
+            <button
+              className="btn btn-sm btn-outline"
+              onClick={() => downloadFile(credentials.ca_certificate_pem!, 'ca.crt')}
+            >
+              Download
+            </button>
+          </div>
+        </div>
+      )}
+
+      {credentials.certificate_pem && (
+        <div>
+          <label className="label">
+            <span className="label-text font-semibold">Device Certificate</span>
+          </label>
+          <textarea
+            className="textarea textarea-bordered w-full font-mono text-xs h-32"
+            value={credentials.certificate_pem}
+            readOnly
+          />
+          <div className="flex gap-2 mt-2">
+            <button
+              className="btn btn-sm btn-outline"
+              onClick={() => copyToClipboard(credentials.certificate_pem!, 'Device certificate')}
+            >
+              Copy
+            </button>
+            <button
+              className="btn btn-sm btn-outline"
+              onClick={() => downloadFile(credentials.certificate_pem!, `${resolvedDeviceId}.crt`)}
+            >
+              Download
+            </button>
+          </div>
+        </div>
+      )}
+
+      {credentials.private_key_pem && (
+        <div>
+          <label className="label">
+            <span className="label-text font-semibold">Private Key</span>
+          </label>
+          <textarea
+            className="textarea textarea-bordered w-full font-mono text-xs h-32"
+            value={credentials.private_key_pem}
+            readOnly
+          />
+          <div className="flex gap-2 mt-2">
+            <button
+              className="btn btn-sm btn-outline"
+              onClick={() => copyToClipboard(credentials.private_key_pem!, 'Private key')}
+            >
+              Copy
+            </button>
+            <button
+              className="btn btn-sm btn-outline"
+              onClick={() => downloadFile(credentials.private_key_pem!, `${resolvedDeviceId}.key`)}
+            >
+              Download
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/DeleteDeviceDialog.tsx

@@ -0,0 +1,76 @@
+import * as AlertDialog from '@radix-ui/react-alert-dialog'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { devicesApi } from '../api'
+import toast from 'react-hot-toast'
+import type { AxiosError } from 'axios'
+import type { Device } from '../types/api'
+
+interface DeleteDeviceDialogProps {
+  device: Device
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onDeleted?: () => void
+}
+
+export default function DeleteDeviceDialog({ device, open, onOpenChange, onDeleted }: DeleteDeviceDialogProps) {
+  const queryClient = useQueryClient()
+
+  const deleteMutation = useMutation({
+    mutationFn: () => devicesApi.delete(device.id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['devices'] })
+      queryClient.invalidateQueries({ queryKey: ['device', device.id] })
+      toast.success(`Device "${device.name}" deleted successfully`)
+      onDeleted?.()
+      onOpenChange(false)
+    },
+    onError: (error) => {
+      const axiosError = error as AxiosError<{ detail?: string }>
+      const message = axiosError.response?.data?.detail || axiosError.message
+      toast.error(`Failed to delete device: ${message}`)
+    },
+  })
+
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <AlertDialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-base-100 p-6 shadow-xl">
+          <AlertDialog.Title className="text-2xl font-bold mb-2">
+            Delete Device
+          </AlertDialog.Title>
+          <AlertDialog.Description className="text-base-content/70 mb-6">
+            Are you sure you want to delete <strong>{device.name}</strong>? This action cannot be undone.
+            All associated telemetry data and certificates will be permanently removed.
+          </AlertDialog.Description>
+          <div className="flex justify-end gap-3">
+            <AlertDialog.Cancel asChild>
+              <button className="btn btn-ghost" disabled={deleteMutation.isPending}>
+                Cancel
+              </button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <button
+                className="btn btn-error"
+                onClick={(e) => {
+                  e.preventDefault()
+                  deleteMutation.mutate()
+                }}
+                disabled={deleteMutation.isPending}
+              >
+                {deleteMutation.isPending ? (
+                  <>
+                    <span className="loading loading-spinner loading-sm"></span>
+                    Deleting...
+                  </>
+                ) : (
+                  'Delete Device'
+                )}
+              </button>
+            </AlertDialog.Action>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  )
+}

frontend/src/components/DeviceCredentialsDialog.tsx

@@ -0,0 +1,40 @@
+import * as Dialog from '@radix-ui/react-dialog'
+import CredentialsViewer from './CredentialsViewer'
+import type { DeviceRegistrationResponse } from '../types/api'
+
+interface DeviceCredentialsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  credentials: DeviceRegistrationResponse | null
+  deviceName?: string
+}
+
+export default function DeviceCredentialsDialog({ open, onOpenChange, credentials, deviceName }: DeviceCredentialsDialogProps) {
+  if (!credentials) {
+    return null
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 max-h-[85vh] w-[90vw] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-base-100 p-6 shadow-xl overflow-y-auto">
+          <Dialog.Title className="text-2xl font-bold mb-4">
+            {deviceName ? `${deviceName} Credentials` : 'Device Credentials'}
+          </Dialog.Title>
+          <Dialog.Description className="text-base-content/70 mb-4">
+            Store these credentials securely. They are only shown once after issuing the certificate.
+          </Dialog.Description>
+
+          <CredentialsViewer credentials={credentials} deviceId={credentials.device_id} />
+
+          <div className="flex justify-end mt-6">
+            <Dialog.Close asChild>
+              <button className="btn btn-primary">Done</button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

frontend/src/components/EditWidgetModal.tsx

@@ -0,0 +1,221 @@
+import { useState, useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { devicesApi } from '../api'
+import type { WidgetConfig } from '../hooks'
+
+interface EditWidgetModalProps {
+  isOpen: boolean
+  widget: WidgetConfig | null
+  onClose: () => void
+  onSave: (widgetId: string, updates: Partial<WidgetConfig>) => void
+}
+
+export default function EditWidgetModal({ isOpen, widget, onClose, onSave }: EditWidgetModalProps) {
+  const [title, setTitle] = useState('')
+  const [selectedMetrics, setSelectedMetrics] = useState<string[]>([])
+  const [timeframeHours, setTimeframeHours] = useState(24)
+  const [widgetWidth, setWidgetWidth] = useState(1)
+  const [widgetHeight, setWidgetHeight] = useState(2)
+
+  // Fetch metrics for the widget's device
+  const { data: deviceMetricsData } = useQuery({
+    queryKey: ['device-metrics', widget?.deviceIds[0]],
+    queryFn: async () => {
+      if (!widget?.deviceIds[0]) return []
+      const response = await devicesApi.getMetrics(widget.deviceIds[0])
+      return response.data.metrics
+    },
+    enabled: !!widget?.deviceIds[0] && isOpen,
+  })
+
+  const availableMetrics = deviceMetricsData || []
+
+  // Load widget data when modal opens
+  useEffect(() => {
+    if (isOpen && widget) {
+      setTitle(widget.title || '')
+      setSelectedMetrics(widget.metricIds || [])
+      setTimeframeHours(widget.timeframe?.hours || 24)
+      setWidgetWidth(widget.position?.w || 1)
+      setWidgetHeight(widget.position?.h || 2)
+    }
+  }, [isOpen, widget])
+
+  const handleSubmit = () => {
+    if (!widget || selectedMetrics.length === 0) {
+      alert('Please select at least one metric')
+      return
+    }
+
+    onSave(widget.id, {
+      title,
+      metricIds: selectedMetrics,
+      timeframe: {
+        hours: timeframeHours,
+      },
+      position: {
+        ...widget.position,
+        x: widget.position?.x || 0,
+        y: widget.position?.y || 0,
+        w: widgetWidth,
+        h: widgetHeight,
+      },
+    })
+    onClose()
+  }
+
+  const toggleMetric = (metric: string) => {
+    // Stat and gauge widgets only allow one metric
+    const singleMetricWidgets = ['stat', 'gauge']
+    const maxMetrics = widget && singleMetricWidgets.includes(widget.type) ? 1 : 5
+
+    setSelectedMetrics((prev) => {
+      if (prev.includes(metric)) {
+        return prev.filter((m) => m !== metric)
+      }
+      
+      // If adding would exceed max, replace last or prevent
+      if (prev.length >= maxMetrics) {
+        if (maxMetrics === 1) {
+          return [metric] // Replace for single-metric widgets
+        }
+        return prev // Don't add more for multi-metric widgets
+      }
+      
+      return [...prev, metric]
+    })
+  }
+
+  if (!isOpen || !widget) return null
+
+  return (
+    <div className="modal modal-open">
+      <div className="modal-box max-w-2xl">
+        <h3 className="font-bold text-lg mb-4">Edit Widget</h3>
+
+        <div className="space-y-4">
+          {/* Widget Type (read-only) */}
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text font-semibold">Widget Type</span>
+            </label>
+            <div className="badge badge-lg badge-primary">{widget.type}</div>
+          </div>
+
+          {/* Title */}
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text font-semibold">Widget Title</span>
+            </label>
+            <input
+              type="text"
+              className="input input-bordered"
+              placeholder="Auto-generated if empty"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+
+          {/* Metrics */}
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text font-semibold">Select Metric(s)</span>
+              <span className="label-text-alt">{selectedMetrics.length} selected</span>
+            </label>
+            {(['stat', 'gauge'].includes(widget.type)) && (
+              <div className="alert alert-info mb-2">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-5 h-5">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                <span className="text-sm">This widget type supports only one metric</span>
+              </div>
+            )}
+            <div className="border rounded-lg p-2 max-h-48 overflow-y-auto space-y-1">
+              {availableMetrics.length === 0 ? (
+                <div className="text-center text-base-content/60 py-4">
+                  Loading metrics...
+                </div>
+              ) : (
+                availableMetrics.map((metric) => (
+                  <label key={metric} className="flex items-center gap-2 p-2 hover:bg-base-200 rounded cursor-pointer">
+                    <input
+                      type={(['stat', 'gauge'].includes(widget.type)) ? 'radio' : 'checkbox'}
+                      name={(['stat', 'gauge'].includes(widget.type)) ? 'single-metric' : undefined}
+                      className={(['stat', 'gauge'].includes(widget.type)) ? 'radio radio-sm' : 'checkbox checkbox-sm'}
+                      checked={selectedMetrics.includes(metric)}
+                      onChange={() => toggleMetric(metric)}
+                    />
+                    <span className="capitalize">{metric.replace(/_/g, ' ')}</span>
+                  </label>
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Time Range */}
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text font-semibold">Time Range</span>
+            </label>
+            <select
+              className="select select-bordered"
+              value={timeframeHours}
+              onChange={(e) => setTimeframeHours(Number(e.target.value))}
+            >
+              <option value={1}>Last 1 hour</option>
+              <option value={6}>Last 6 hours</option>
+              <option value={24}>Last 24 hours</option>
+              <option value={168}>Last 7 days</option>
+              <option value={720}>Last 30 days</option>
+            </select>
+          </div>
+
+          {/* Size */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Width</span>
+              </label>
+              <select
+                className="select select-bordered"
+                value={widgetWidth}
+                onChange={(e) => setWidgetWidth(Number(e.target.value))}
+              >
+                <option value={1}>Small (1 column)</option>
+                <option value={2}>Medium (2 columns)</option>
+                <option value={3}>Large (3 columns)</option>
+                <option value={4}>Full Width (4 columns)</option>
+              </select>
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Height</span>
+              </label>
+              <select
+                className="select select-bordered"
+                value={widgetHeight}
+                onChange={(e) => setWidgetHeight(Number(e.target.value))}
+              >
+                <option value={1}>Short</option>
+                <option value={2}>Medium</option>
+                <option value={3}>Tall</option>
+                <option value={4}>Extra Tall</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="modal-action">
+            <button className="btn btn-ghost" onClick={onClose}>
+              Cancel
+            </button>
+            <button className="btn btn-primary" onClick={handleSubmit}>
+              Save Changes
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop" onClick={onClose}></div>
+    </div>
+  )
+}

frontend/src/components/RenewDialog.tsx

@@ -0,0 +1,101 @@
+import * as Dialog from '@radix-ui/react-dialog'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { devicesApi } from '../api'
+import toast from 'react-hot-toast'
+import { useState } from 'react'
+import CredentialsViewer from './CredentialsViewer'
+import type { AxiosError } from 'axios'
+import type { Device, DeviceRegistrationResponse } from '../types/api'
+
+interface RenewDialogProps {
+  device: Device
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export default function RenewDialog({ device, open, onOpenChange }: RenewDialogProps) {
+  const queryClient = useQueryClient()
+  const [credentials, setCredentials] = useState<DeviceRegistrationResponse | null>(null)
+
+  const renewMutation = useMutation({
+    mutationFn: () => devicesApi.renew(device.id),
+    onSuccess: (response) => {
+      queryClient.invalidateQueries({ queryKey: ['devices'] })
+      queryClient.invalidateQueries({ queryKey: ['device', device.id] })
+      setCredentials(response.data)
+      toast.success(`Certificate for "${device.name}" renewed successfully`)
+    },
+    onError: (error) => {
+      const axiosError = error as AxiosError<{ detail?: string }>
+      const message = axiosError.response?.data?.detail || axiosError.message
+      toast.error(`Failed to renew certificate: ${message}`)
+    },
+  })
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) {
+      setCredentials(null)
+      onOpenChange(false)
+    }
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[600px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-base-100 p-6 shadow-xl overflow-y-auto">
+          <Dialog.Title className="text-2xl font-bold mb-4">
+            {credentials ? 'Certificate Renewed' : 'Renew Certificate'}
+          </Dialog.Title>
+
+          {!credentials ? (
+            <>
+              <Dialog.Description className="text-base-content/70 mb-6">
+                This will generate a new certificate for <strong>{device.name}</strong>.
+                You will need to update the device with the new credentials.
+              </Dialog.Description>
+              <div className="flex justify-end gap-3">
+                <Dialog.Close asChild>
+                  <button className="btn btn-ghost" disabled={renewMutation.isPending}>
+                    Cancel
+                  </button>
+                </Dialog.Close>
+                <button
+                  className="btn btn-warning"
+                  onClick={() => renewMutation.mutate()}
+                  disabled={renewMutation.isPending}
+                >
+                  {renewMutation.isPending ? (
+                    <>
+                      <span className="loading loading-spinner loading-sm"></span>
+                      Renewing...
+                    </>
+                  ) : (
+                    'Renew Certificate'
+                  )}
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="alert alert-warning mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <span>Save these credentials now! They will not be shown again.</span>
+              </div>
+
+              <CredentialsViewer credentials={credentials} deviceId={device.id} />
+
+              <div className="flex justify-end mt-6">
+                <Dialog.Close asChild>
+                  <button className="btn btn-primary">Done</button>
+                </Dialog.Close>
+              </div>
+            </>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

frontend/src/components/RevokeDialog.tsx

@@ -0,0 +1,74 @@
+import * as AlertDialog from '@radix-ui/react-alert-dialog'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { devicesApi } from '../api'
+import toast from 'react-hot-toast'
+import type { AxiosError } from 'axios'
+import type { Device } from '../types/api'
+
+interface RevokeDialogProps {
+  device: Device
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export default function RevokeDialog({ device, open, onOpenChange }: RevokeDialogProps) {
+  const queryClient = useQueryClient()
+
+  const revokeMutation = useMutation({
+    mutationFn: () => devicesApi.revoke(device.id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['devices'] })
+      queryClient.invalidateQueries({ queryKey: ['device', device.id] })
+      toast.success(`Certificate for "${device.name}" revoked successfully`)
+      onOpenChange(false)
+    },
+    onError: (error) => {
+      const axiosError = error as AxiosError<{ detail?: string }>
+      const message = axiosError.response?.data?.detail || axiosError.message
+      toast.error(`Failed to revoke certificate: ${message}`)
+    },
+  })
+
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <AlertDialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-base-100 p-6 shadow-xl">
+          <AlertDialog.Title className="text-2xl font-bold mb-2">
+            Revoke Certificate
+          </AlertDialog.Title>
+          <AlertDialog.Description className="text-base-content/70 mb-6">
+            Are you sure you want to revoke the certificate for <strong>{device.name}</strong>? 
+            The device will no longer be able to connect until you renew its certificate.
+          </AlertDialog.Description>
+          <div className="flex justify-end gap-3">
+            <AlertDialog.Cancel asChild>
+              <button className="btn btn-ghost" disabled={revokeMutation.isPending}>
+                Cancel
+              </button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <button
+                className="btn btn-warning"
+                onClick={(e) => {
+                  e.preventDefault()
+                  revokeMutation.mutate()
+                }}
+                disabled={revokeMutation.isPending}
+              >
+                {revokeMutation.isPending ? (
+                  <>
+                    <span className="loading loading-spinner loading-sm"></span>
+                    Revoking...
+                  </>
+                ) : (
+                  'Revoke Certificate'
+                )}
+              </button>
+            </AlertDialog.Action>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  )
+}

frontend/src/components/dashboard/TelemetryTrendCard.tsx

@@ -0,0 +1,84 @@
+import { ResponsiveContainer, LineChart, Line, Tooltip, XAxis, YAxis, CartesianGrid } from 'recharts'
+
+interface TelemetryTrendCardProps {
+  title: string
+  data: Array<{ time: string; value: number }>
+  unit?: string
+  accentColor?: string
+  subtitle?: string
+}
+
+function formatTimeLabel(timestamp: string) {
+  const date = new Date(timestamp)
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatValue(value: number, unit?: string) {
+  const rounded = Number.isInteger(value) ? value : value.toFixed(1)
+  return unit ? `${rounded} ${unit}` : String(rounded)
+}
+
+export default function TelemetryTrendCard({ title, data, unit, accentColor = '#2563eb', subtitle }: TelemetryTrendCardProps) {
+  const latest = data.at(-1)
+
+  return (
+    <div className="card bg-base-100 shadow-xl">
+      <div className="card-body gap-4">
+        <div className="flex items-start justify-between">
+          <div>
+            <h3 className="text-lg font-semibold">{title}</h3>
+            {subtitle && <p className="text-sm text-base-content/60">{subtitle}</p>}
+          </div>
+          {latest ? (
+            <div className="text-right">
+              <div className="text-3xl font-bold text-primary">
+                {formatValue(latest.value, unit)}
+              </div>
+              <div className="text-xs text-base-content/60">as of {formatTimeLabel(latest.time)}</div>
+            </div>
+          ) : (
+            <div className="text-sm text-base-content/60">No data</div>
+          )}
+        </div>
+
+        <div className="h-48">
+          {data.length > 1 ? (
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={data} margin={{ top: 10, right: 20, left: 0, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--bc) / 0.1)" />
+                <XAxis
+                  dataKey="time"
+                  tickFormatter={formatTimeLabel}
+                  tick={{ fontSize: 12, fill: '#ffffff' }}
+                  stroke="rgba(255, 255, 255, 0.3)"
+                />
+                <YAxis
+                  tickFormatter={(val) => formatValue(val, unit)}
+                  width={48}
+                  tick={{ fontSize: 12, fill: '#ffffff' }}
+                  stroke="rgba(255, 255, 255, 0.3)"
+                />
+                <Tooltip
+                  formatter={(value: number) => formatValue(value, unit)}
+                  labelFormatter={(label) => formatTimeLabel(String(label))}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="value"
+                  stroke={accentColor}
+                  strokeWidth={2}
+                  dot={false}
+                  activeDot={{ r: 4 }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="flex h-full items-center justify-center text-sm text-base-content/60">
+              Not enough telemetry to chart yet
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/AiInsightWidget.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { telemetryApi } from '../../api'
+import type { WidgetConfig } from '../../hooks'
+
+interface AiInsightWidgetProps {
+  config: WidgetConfig
+}
+
+export default function AiInsightWidget({ config }: AiInsightWidgetProps) {
+  const { deviceIds, metricIds, timeframe, title } = config
+  const [promptType, setPromptType] = useState<'trend_summary' | 'anomaly_detection'>('trend_summary')
+  const [showAnalysis, setShowAnalysis] = useState(false)
+
+  const deviceId = deviceIds[0]
+  const metric = metricIds[0]
+
+  const {
+    data: analysis,
+    isLoading,
+    refetch,
+    error,
+  } = useQuery({
+    queryKey: ['ai-insight', deviceId, metric, promptType, timeframe],
+    queryFn: async () => {
+      const response = await telemetryApi.analyze({
+        device_id: deviceId,
+        metric,
+        hours: timeframe.hours || 240,
+        limit: 200,
+        prompt_type: promptType,
+      })
+      return response.data
+    },
+    enabled: false, // Manual trigger
+  })
+
+  const handleAnalyze = () => {
+    setShowAnalysis(true)
+    refetch()
+  }
+
+  return (
+    <div className="card bg-base-100 shadow">
+      <div className="card-body">
+        <div className="flex items-center justify-between">
+          <h3 className="card-title text-base">{title || 'AI Environmental Insights'}</h3>
+          <div className="flex gap-2">
+            <select
+              className="select select-bordered select-sm"
+              value={promptType}
+              onChange={(e) => setPromptType(e.target.value as 'trend_summary' | 'anomaly_detection')}
+            >
+              <option value="trend_summary">Trend Summary</option>
+              <option value="anomaly_detection">Anomaly Detection</option>
+            </select>
+            <button
+              className="btn btn-primary btn-sm"
+              onClick={handleAnalyze}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <span className="loading loading-spinner loading-xs"></span>
+                  Analyzing...
+                </>
+              ) : (
+                <>
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                  </svg>
+                  Analyze
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {isLoading && (
+          <div className="flex items-center justify-center py-12">
+            <div className="text-center space-y-4">
+              <span className="loading loading-spinner loading-lg text-primary"></span>
+              <p className="text-sm text-base-content/60">Analyzing environmental data...</p>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="alert alert-error mt-4">
+            <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <div>
+              <div className="font-bold">Analysis Failed</div>
+              <div className="text-sm">{(error as Error)?.message || 'Could not connect to GPT service'}</div>
+            </div>
+          </div>
+        )}
+
+        {analysis && showAnalysis && !isLoading && (
+          <div className="space-y-4 mt-4">
+            <div className="flex items-center justify-between">
+              <div className="badge badge-primary badge-lg">
+                {promptType === 'trend_summary' ? 'Trend Analysis' : 'Anomaly Detection'}
+              </div>
+              <div className="text-xs text-base-content/50">
+                {analysis.data_points_analyzed} data points analyzed
+              </div>
+            </div>
+            <div className="divider my-2"></div>
+            <div className="prose max-w-none">
+              <div className="whitespace-pre-wrap text-sm leading-relaxed max-h-96 overflow-y-auto">
+                {analysis.analysis}
+              </div>
+            </div>
+            <div className="flex justify-end gap-2 mt-4">
+              <button
+                className="btn btn-ghost btn-sm"
+                onClick={() => setShowAnalysis(false)}
+              >
+                Close
+              </button>
+              <button
+                className="btn btn-outline btn-sm"
+                onClick={() => refetch()}
+              >
+                Refresh Analysis
+              </button>
+            </div>
+          </div>
+        )}
+
+        {!showAnalysis && (
+          <div className="text-center py-8 text-base-content/60">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 mx-auto mb-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+            <p className="text-sm">Click Analyze to get AI-powered environmental insights</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/AirQualityWidget.tsx

@@ -0,0 +1,141 @@
+import { useQuery } from '@tanstack/react-query'
+import type { WidgetConfig } from '../../hooks'
+import { weatherApi } from '../../api'
+import './widget-styles.css'
+
+interface AirQualityWidgetProps {
+  config: WidgetConfig
+}
+
+export default function AirQualityWidget({ config }: AirQualityWidgetProps) {
+  // Get city from config or use default (Pulse.eco city)
+  const city = (config.visualization as Record<string, unknown>)?.city as string || 'skopje'
+
+  const { data: airQuality, isLoading, error } = useQuery({
+    queryKey: ['air-quality', city],
+    queryFn: async () => {
+      const response = await weatherApi.getAirQuality(city)
+      return response.data
+    },
+    refetchInterval: 300000, // Refresh every 5 minutes
+    staleTime: 240000, // Consider fresh for 4 minutes
+  })
+
+  if (isLoading) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body flex items-center justify-center">
+          <span className="loading loading-spinner loading-lg"></span>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body">
+          <h2 className="card-title text-sm truncate">{config.title}</h2>
+          <div className="flex flex-col items-center justify-center flex-1">
+            <p className="text-error text-sm text-center">
+              Failed to load air quality data for {city}
+            </p>
+            <p className="text-xs text-base-content/60 mt-2">
+              Try: skopje, bitola, tetovo
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!airQuality) return null
+
+  // Get AQI color based on status
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'good':
+        return 'success'
+      case 'moderate':
+        return 'warning'
+      case 'unhealthy for sensitive groups':
+      case 'unhealthy':
+        return 'error'
+      case 'very unhealthy':
+      case 'hazardous':
+        return 'error'
+      default:
+        return 'base-content/40'
+    }
+  }
+
+  const statusColor = getStatusColor(airQuality.status)
+  const pm10 = airQuality.measurements.pm10
+  const pm25 = airQuality.measurements.pm25
+
+  return (
+    <div className="widget-card card bg-base-100 h-full">
+      <div className="card-body">
+        <h2 className="card-title text-sm truncate">{config.title}</h2>
+        <div className="flex flex-col items-center justify-center flex-1">
+          {/* Air quality icon */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={`h-12 w-12 text-${statusColor} mb-1`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
+            />
+          </svg>
+
+          {/* PM Values */}
+          <div className="grid grid-cols-2 gap-2 w-full mb-2">
+            {pm10 && (
+              <div className="text-center">
+                <div className="text-xl font-bold">{pm10.average.toFixed(1)}</div>
+                <div className="text-xs text-base-content/60">PM10 μg/m³</div>
+              </div>
+            )}
+            {pm25 && (
+              <div className="text-center">
+                <div className="text-xl font-bold">{pm25.average.toFixed(1)}</div>
+                <div className="text-xs text-base-content/60">PM2.5 μg/m³</div>
+              </div>
+            )}
+          </div>
+
+          {/* AQI Status badge */}
+          <div className={`badge badge-${statusColor} truncate max-w-full`}>
+            {airQuality.status}
+          </div>
+
+          {/* Additional pollutants */}
+          <div className="grid grid-cols-2 gap-2 mt-2 w-full text-xs">
+            {Object.entries(airQuality.measurements).map(([pollutant, data]) => {
+              if (pollutant === 'pm10' || pollutant === 'pm25') return null
+              return (
+                <div key={pollutant} className="flex justify-between">
+                  <span className="opacity-60">{pollutant.toUpperCase()}:</span>
+                  <span className="font-semibold">{data.average.toFixed(1)}</span>
+                </div>
+              )
+            })}
+          </div>
+
+          {/* City and sensor count */}
+          <div className="text-xs text-base-content/40 mt-2 px-2 w-full overflow-hidden">
+            <div className="truncate text-center">
+              {airQuality.city.charAt(0).toUpperCase() + airQuality.city.slice(1)} • {airQuality.sensor_count} sensors
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/ComfortIndexWidget.tsx

@@ -0,0 +1,153 @@
+import { useQuery } from '@tanstack/react-query'
+import { devicesApi } from '../../api'
+import type { WidgetConfig } from '../../hooks'
+import './widget-styles.css'
+
+interface ComfortIndexWidgetProps {
+  config: WidgetConfig
+}
+
+export default function ComfortIndexWidget({ config }: ComfortIndexWidgetProps) {
+  const deviceId = config.deviceIds[0]
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['comfort-index', deviceId],
+    queryFn: async () => {
+      const response = await devicesApi.getComfortIndex(deviceId)
+      return response.data
+    },
+    refetchInterval: 60000, // Refresh every minute
+    enabled: !!deviceId,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body flex items-center justify-center">
+          <span className="loading loading-spinner loading-lg"></span>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body flex items-center justify-center">
+          <div className="alert alert-error">
+            <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>Failed to load comfort index</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const getRatingColor = (rating: string) => {
+    switch (rating) {
+      case 'Excellent': return 'text-success'
+      case 'Good': return 'text-info'
+      case 'Fair': return 'text-warning'
+      case 'Poor': return 'text-error'
+      case 'Very Poor': return 'text-error'
+      default: return 'text-base-content'
+    }
+  }
+
+  const getScoreColor = (score: number) => {
+    if (score >= 90) return 'text-success'
+    if (score >= 75) return 'text-info'
+    if (score >= 60) return 'text-warning'
+    if (score >= 40) return 'text-error'
+    return 'text-error'
+  }
+
+  return (
+    <div className="widget-card card bg-base-100 h-full">
+      <div className="card-body p-3 gap-2">
+        {/* Title */}
+        <h2 className="card-title text-sm mb-1">{config.title}</h2>
+        
+        {/* Overall Score */}
+        <div className="text-center">
+          <div className={`text-4xl font-bold ${getScoreColor(data.overall_score)}`}>
+            {data.overall_score}
+          </div>
+          <div className={`text-lg font-semibold ${getRatingColor(data.rating)} mt-0.5`}>
+            {data.rating}
+          </div>
+          <div className="text-xs text-base-content/60">Comfort Index</div>
+        </div>
+
+      {/* Component Scores */}
+      <div className="grid grid-cols-2 gap-2 text-xs">
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">🌡️</span>
+            <span className="truncate">Temperature</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.temperature)}`}>
+            {data.components.temperature}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">💧</span>
+            <span className="truncate">Humidity</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.humidity)}`}>
+            {data.components.humidity}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">🌬️</span>
+            <span className="truncate">Air Quality</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.air_quality)}`}>
+            {data.components.air_quality}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">🔊</span>
+            <span className="truncate">Acoustic</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.acoustic)}`}>
+            {data.components.acoustic}
+          </span>
+        </div>
+        
+        <div className="flex items-center justify-between p-2 bg-base-200 rounded col-span-2">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm">💡</span>
+            <span className="truncate">Lighting</span>
+          </div>
+          <span className={`font-bold ${getScoreColor(data.components.light)}`}>
+            {data.components.light}
+          </span>
+        </div>
+      </div>
+
+      {/* Suggestions */}
+      {data.suggestions.length > 0 && (
+        <div className="mt-auto">
+          <div className="text-xs font-semibold mb-1">💡 Suggestions</div>
+          <div className="space-y-1 max-h-20 overflow-y-auto">
+            {data.suggestions.map((suggestion, i) => (
+              <div key={i} className="text-xs bg-warning/10 p-1 rounded border-l-2 border-warning">
+                {suggestion}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/GaugeWidget.tsx

@@ -0,0 +1,103 @@
+import { useTelemetrySeries } from '../../hooks'
+import type { WidgetConfig } from '../../hooks'
+
+interface GaugeWidgetProps {
+  config: WidgetConfig
+}
+
+export default function GaugeWidget({ config }: GaugeWidgetProps) {
+  const { deviceIds, metricIds, timeframe, title } = config
+
+  const deviceId = deviceIds[0]
+  const metric = metricIds[0]
+
+  const { data, isLoading, error } = useTelemetrySeries({
+    deviceId,
+    metric,
+    hours: timeframe.hours,
+    startTime: timeframe.startTime,
+    endTime: timeframe.endTime,
+    limit: 1,
+  })
+
+  const latest = data[0]
+  const value = latest?.value || 0
+
+  // Simple gauge ranges (could be configured per metric)
+  const ranges = {
+    low: 33,
+    medium: 66,
+    high: 100,
+  }
+
+  const percentage = Math.min(100, Math.max(0, value))
+  let color = 'text-success'
+  if (percentage > ranges.medium) color = 'text-error'
+  else if (percentage > ranges.low) color = 'text-warning'
+
+  if (isLoading) {
+    return (
+      <div className="card bg-base-200 animate-pulse">
+        <div className="card-body h-48"></div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="card bg-error/10">
+        <div className="card-body">
+          <p className="text-error text-sm">Error: {error.message}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="card bg-base-100 shadow">
+      <div className="card-body items-center text-center">
+        <h3 className="card-title text-base">{title || metric}</h3>
+        <div className="relative w-32 h-32 mt-4">
+          <svg className="w-full h-full transform -rotate-90">
+            <circle
+              cx="64"
+              cy="64"
+              r="56"
+              stroke="currentColor"
+              strokeWidth="8"
+              fill="none"
+              className="text-base-300"
+            />
+            <circle
+              cx="64"
+              cy="64"
+              r="56"
+              stroke="currentColor"
+              strokeWidth="8"
+              fill="none"
+              strokeDasharray={`${2 * Math.PI * 56}`}
+              strokeDashoffset={`${2 * Math.PI * 56 * (1 - percentage / 100)}`}
+              className={color}
+              strokeLinecap="round"
+            />
+          </svg>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div>
+              <div className={`text-3xl font-bold ${color}`}>
+                {value.toFixed(1)}
+              </div>
+              {latest?.unit && (
+                <div className="text-sm text-base-content/60">{latest.unit}</div>
+              )}
+            </div>
+          </div>
+        </div>
+        {latest && (
+          <div className="text-xs text-base-content/50 mt-4">
+            Updated {new Date(latest.time).toLocaleTimeString()}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/LineChartWidget.tsx

@@ -0,0 +1,237 @@
+import { useMemo } from 'react'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { useTelemetrySeries } from '../../hooks'
+import type { WidgetConfig } from '../../hooks'
+import { formatMetricName } from '../../utils/formatters'
+
+interface LineChartWidgetProps {
+  config: WidgetConfig
+}
+
+// Helper component to fetch data for a single metric
+function useMultiMetricData(deviceId: string, metricIds: string[], timeframe: WidgetConfig['timeframe']) {
+  // Fetch data for each metric (React allows hooks in arrays when count is stable)
+  const metric1 = useTelemetrySeries({
+    deviceId,
+    metric: metricIds[0] || '',
+    hours: timeframe.hours,
+    startTime: timeframe.startTime,
+    endTime: timeframe.endTime,
+  })
+  
+  const metric2 = useTelemetrySeries({
+    deviceId,
+    metric: metricIds[1] || '',
+    hours: timeframe.hours,
+    startTime: timeframe.startTime,
+    endTime: timeframe.endTime,
+  })
+  
+  const metric3 = useTelemetrySeries({
+    deviceId,
+    metric: metricIds[2] || '',
+    hours: timeframe.hours,
+    startTime: timeframe.startTime,
+    endTime: timeframe.endTime,
+  })
+  
+  const metric4 = useTelemetrySeries({
+    deviceId,
+    metric: metricIds[3] || '',
+    hours: timeframe.hours,
+    startTime: timeframe.startTime,
+    endTime: timeframe.endTime,
+  })
+  
+  const metric5 = useTelemetrySeries({
+    deviceId,
+    metric: metricIds[4] || '',
+    hours: timeframe.hours,
+    startTime: timeframe.startTime,
+    endTime: timeframe.endTime,
+  })
+
+  const queries = [metric1, metric2, metric3, metric4, metric5].slice(0, metricIds.length)
+  
+  return { queries, metricIds }
+}
+
+export default function LineChartWidget({ config }: LineChartWidgetProps) {
+  const { deviceIds, metricIds, timeframe, visualization } = config
+  const deviceId = deviceIds[0]
+
+  const { queries } = useMultiMetricData(deviceId, metricIds, timeframe)
+
+  const isLoading = queries.some((q) => q.isLoading)
+  const error = queries.find((q) => q.error)?.error
+
+  // Combine data from all metrics into a single chart dataset
+  const chartData = useMemo(() => {
+    if (queries.length === 0 || !queries[0]?.data || queries[0].data.length === 0) return []
+
+    // Create a map of time -> { time, fullDateTime, metric1, metric2, ... }
+    const timeMap = new Map<string, Record<string, number | string>>()
+
+    queries.forEach((query, index) => {
+      const metric = metricIds[index]
+      if (!query.data) return
+      
+      query.data.forEach((point) => {
+        const date = new Date(point.time)
+        
+        // Short time for X-axis display (just time)
+        const timeStr = date.toLocaleString('en-US', {
+          hour: '2-digit',
+          minute: '2-digit',
+        })
+        
+        // Full date/time for tooltip
+        const fullDateTime = date.toLocaleString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        })
+        
+        const key = date.getTime().toString()
+        
+        if (!timeMap.has(key)) {
+          timeMap.set(key, { 
+            time: timeStr, 
+            fullDateTime: fullDateTime,
+            timestamp: date.getTime() 
+          })
+        }
+        
+        const entry = timeMap.get(key)!
+        entry[metric] = point.value
+      })
+    })
+
+    // Sort by timestamp
+    return Array.from(timeMap.values()).sort((a, b) => {
+      return (a.timestamp as number) - (b.timestamp as number)
+    })
+  }, [queries, metricIds])
+
+  const colors = visualization?.colors || [
+    '#3b82f6', // blue
+    '#10b981', // green
+    '#f59e0b', // amber
+    '#ef4444', // red
+    '#8b5cf6', // purple
+    '#ec4899', // pink
+  ]
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="alert alert-error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="stroke-current shrink-0 h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span>Error loading data: {error.message}</span>
+      </div>
+    )
+  }
+
+  if (chartData.length === 0) {
+    return (
+      <div className="alert alert-info">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="stroke-current shrink-0 w-6 h-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          ></path>
+        </svg>
+        <span>No data available for this metric</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="card bg-base-100 h-full overflow-hidden">
+      <div className="card-body p-4">
+        <h3 className="card-title text-sm mb-2">
+          {config.title || metricIds.map(formatMetricName).join(' & ')}
+        </h3>
+        <ResponsiveContainer width="100%" height={visualization?.height || 280}>
+          <LineChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 50 }}>
+            {visualization?.showGrid !== false && (
+              <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+            )}
+            <XAxis
+              dataKey="time"
+              tick={{ fontSize: 11 }}
+              angle={-45}
+              textAnchor="end"
+              height={50}
+            />
+            <YAxis tick={{ fontSize: 12 }} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                border: 'none',
+                borderRadius: '8px',
+                color: 'white',
+              }}
+              labelFormatter={(label, payload) => {
+                // Use fullDateTime from the data point for tooltip
+                return payload && payload[0] ? payload[0].payload.fullDateTime : label
+              }}
+              formatter={(value: number) => [value.toFixed(2)]}
+            />
+            {visualization?.showLegend !== false && <Legend />}
+            {metricIds.map((metric, index) => (
+              <Line
+                key={metric}
+                type="monotone"
+                dataKey={metric}
+                stroke={colors[index % colors.length]}
+                strokeWidth={2}
+                dot={{ r: 2, strokeWidth: 0 }}
+                activeDot={{ r: 4 }}
+                connectNulls={true}
+                name={formatMetricName(metric)}
+              />
+            ))}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/StatWidget.tsx

@@ -0,0 +1,78 @@
+import { useTelemetrySeries } from '../../hooks'
+import type { WidgetConfig } from '../../hooks'
+import { formatMetricName } from '../../utils/formatters'
+
+interface StatWidgetProps {
+  config: WidgetConfig
+}
+
+export default function StatWidgetProps({ config }: StatWidgetProps) {
+  const { deviceIds, metricIds, timeframe, title } = config
+
+  const deviceId = deviceIds[0]
+  const metric = metricIds[0]
+
+  const { data, isLoading, error } = useTelemetrySeries({
+    deviceId,
+    metric,
+    hours: timeframe.hours,
+    startTime: timeframe.startTime,
+    endTime: timeframe.endTime,
+    limit: 100,
+  })
+
+  const latest = data[0]
+  const values = data.map((d) => d.value)
+  const average = values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0
+  const min = values.length > 0 ? Math.min(...values) : 0
+  const max = values.length > 0 ? Math.max(...values) : 0
+
+  if (isLoading) {
+    return (
+      <div className="card bg-base-200 animate-pulse">
+        <div className="card-body h-32"></div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="card bg-error/10">
+        <div className="card-body">
+          <p className="text-error text-sm">Error: {error.message}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="card bg-base-100 shadow">
+      <div className="card-body">
+        <div className="text-sm uppercase tracking-wide text-base-content/60">
+          {title || formatMetricName(metric)}
+        </div>
+        <div className="text-4xl font-bold text-primary">
+          {latest ? latest.value.toFixed(1) : '—'}
+          {latest?.unit && <span className="text-xl ml-2">{latest.unit}</span>}
+        </div>
+        <div className="grid grid-cols-3 gap-2 mt-4 text-sm">
+          <div>
+            <div className="text-base-content/60">Min</div>
+            <div className="font-semibold">{min.toFixed(1)}</div>
+          </div>
+          <div>
+            <div className="text-base-content/60">Avg</div>
+            <div className="font-semibold">{average.toFixed(1)}</div>
+          </div>
+          <div>
+            <div className="text-base-content/60">Max</div>
+            <div className="font-semibold">{max.toFixed(1)}</div>
+          </div>
+        </div>
+        <div className="text-xs text-base-content/50 mt-2">
+          {data.length} readings in last {timeframe.hours || 24}h
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/WeatherWidget.tsx

@@ -0,0 +1,112 @@
+import { useQuery } from '@tanstack/react-query'
+import type { WidgetConfig } from '../../hooks'
+import { weatherApi } from '../../api'
+
+interface WeatherWidgetProps {
+  config: WidgetConfig
+}
+
+export default function WeatherWidget({ config }: WeatherWidgetProps) {
+  // Get city from config or use default
+  const city = (config.visualization as Record<string, unknown>)?.city as string || 'Skopje'
+
+  const { data: weather, isLoading, error } = useQuery({
+    queryKey: ['weather', city],
+    queryFn: async () => {
+      const response = await weatherApi.getCurrent({ city })
+      return response.data
+    },
+    refetchInterval: 300000, // Refresh every 5 minutes
+    staleTime: 240000, // Consider fresh for 4 minutes
+  })
+
+  if (isLoading) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body flex items-center justify-center">
+          <span className="loading loading-spinner loading-lg"></span>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="widget-card card bg-base-100 h-full">
+        <div className="card-body">
+          <h2 className="card-title text-sm truncate">{config.title}</h2>
+          <div className="flex flex-col items-center justify-center flex-1">
+            <p className="text-error">Failed to load weather data</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!weather) return null
+
+  // Weather code to icon mapping
+  const getWeatherIcon = (code: number) => {
+    if (code === 0 || code === 1) return '☀️' // Clear/Mainly clear
+    if (code === 2) return '⛅' // Partly cloudy
+    if (code === 3) return '☁️' // Overcast
+    if (code >= 45 && code <= 48) return '🌫️' // Fog
+    if (code >= 51 && code <= 55) return '🌦️' // Drizzle
+    if (code >= 61 && code <= 65) return '🌧️' // Rain
+    if (code >= 71 && code <= 77) return '🌨️' // Snow
+    if (code >= 80 && code <= 82) return '🌧️' // Rain showers
+    if (code >= 85 && code <= 86) return '🌨️' // Snow showers
+    if (code >= 95) return '⛈️' // Thunderstorm
+    return '🌡️'
+  }
+
+  return (
+    <div className="widget-card card bg-base-100 h-full">
+      <div className="card-body">
+        <h2 className="card-title text-sm truncate">{config.title}</h2>
+        <div className="flex flex-col items-center justify-center flex-1">
+          {/* Weather Icon */}
+          <div className="text-5xl mb-1">{getWeatherIcon(weather.weather_code)}</div>
+
+          {/* Temperature */}
+          <div className="text-3xl font-bold">{weather.temperature.toFixed(1)}°C</div>
+          <div className="text-xs text-base-content/60">
+            Feels like {weather.apparent_temperature.toFixed(1)}°C
+          </div>
+
+          {/* Weather Description */}
+          <div className="badge badge-primary mt-1 truncate max-w-full">
+            {weather.weather_description}
+          </div>
+
+          {/* Additional Info */}
+          <div className="grid grid-cols-2 gap-2 mt-2 w-full text-xs">
+            <div className="flex items-center gap-2">
+              <span className="opacity-60">💧</span>
+              <span>{weather.humidity}%</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="opacity-60">💨</span>
+              <span>{weather.wind_speed.toFixed(1)} km/h</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="opacity-60">☁️</span>
+              <span>{weather.cloud_cover}%</span>
+            </div>
+            {weather.precipitation > 0 && (
+              <div className="flex items-center gap-2">
+                <span className="opacity-60">🌧️</span>
+                <span>{weather.precipitation} mm</span>
+              </div>
+            )}
+          </div>
+
+          {/* Location */}
+          <div className="text-xs text-base-content/40 mt-3 px-2 w-full overflow-hidden">
+            <div className="truncate text-center">{weather.location}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/WidgetContainer.tsx

@@ -0,0 +1,98 @@
+import type { WidgetConfig } from '../../hooks'
+import { widgetRegistry } from './registry'
+
+interface WidgetContainerProps {
+  config: WidgetConfig
+  onRemove?: (id: string) => void
+  onEdit?: (id: string) => void
+}
+
+export default function WidgetContainer({ config, onRemove, onEdit }: WidgetContainerProps) {
+  const WidgetComponent = widgetRegistry[config.type]
+
+  if (!WidgetComponent) {
+    return (
+      <div className="card bg-error/10">
+        <div className="card-body">
+          <p className="text-error">Unknown widget type: {config.type}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative group h-full">
+      {/* Drag handle and actions */}
+      <div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between p-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-b from-base-300/90 to-transparent">
+        <div className="drag-handle cursor-move flex items-center gap-1 px-2 py-1 rounded bg-base-100/80 text-xs">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 8h16M4 16h16"
+            />
+          </svg>
+          Drag
+        </div>
+        <div className="flex gap-1">
+          {onEdit && (
+            <button
+              className="btn btn-xs btn-circle btn-ghost bg-base-100/80"
+              onClick={() => onEdit(config.id)}
+              title="Edit widget"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                />
+              </svg>
+            </button>
+          )}
+          {onRemove && (
+            <button
+              className="btn btn-xs btn-circle btn-ghost bg-base-100/80"
+              onClick={() => onRemove(config.id)}
+              title="Remove widget"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Actual widget */}
+      <div className="h-full">
+        <WidgetComponent config={config} />
+      </div>
+    </div>
+  )
+}

frontend/src/components/widgets/index.ts

@@ -0,0 +1,6 @@
+export { default as WidgetContainer } from './WidgetContainer'
+export { default as LineChartWidget } from './LineChartWidget'
+export { default as StatWidget } from './StatWidget'
+export { default as GaugeWidget } from './GaugeWidget'
+export { default as AiInsightWidget } from './AiInsightWidget'
+export { widgetRegistry } from './registry'

frontend/src/components/widgets/registry.ts

@@ -0,0 +1,25 @@
+import type { ComponentType } from 'react'
+import type { WidgetConfig, WidgetType } from '../../hooks'
+
+import LineChartWidget from './LineChartWidget'
+import StatWidget from './StatWidget'
+import GaugeWidget from './GaugeWidget'
+import AiInsightWidget from './AiInsightWidget'
+import AirQualityWidget from './AirQualityWidget'
+import WeatherWidget from './WeatherWidget'
+import ComfortIndexWidget from './ComfortIndexWidget'
+
+interface WidgetProps {
+  config: WidgetConfig
+}
+
+export const widgetRegistry: Record<WidgetType, ComponentType<WidgetProps>> = {
+  'line-chart': LineChartWidget,
+  'stat': StatWidget,
+  'gauge': GaugeWidget,
+  'ai-insight': AiInsightWidget,
+  'bar-chart': LineChartWidget, 
+  'air-quality': AirQualityWidget,
+  'weather': WeatherWidget,
+  'comfort-index': ComfortIndexWidget,
+}

frontend/src/components/widgets/widget-styles.css

@@ -0,0 +1,25 @@
+/* Widget-specific styling overrides */
+
+/* Reduce card body padding for widgets - default is 2rem (32px), we want less */
+.widget-card .card-body {
+  padding: 1rem; /* 16px instead of 32px */
+}
+
+/* Lighter shadow for widgets */
+.widget-card {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Ensure cards fill their container properly */
+.widget-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.widget-card .card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Allow flex children to shrink */
+}

frontend/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useTelemetrySeries } from './useTelemetrySeries'
+export { useDeviceMetrics, useAllMetrics } from './useDeviceMetrics'
+export { useDashboardConfig } from './useDashboardConfig'
+export type { WidgetConfig, DashboardConfig, WidgetType } from './useDashboardConfig'

frontend/src/hooks/useDashboardConfig.ts

@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react'
+
+export type WidgetType = 'line-chart' | 'gauge' | 'stat' | 'ai-insight' | 'bar-chart' | 'air-quality' | 'weather' | 'comfort-index'
+
+export interface WidgetConfig {
+  id: string
+  type: WidgetType
+  title: string
+  deviceIds: string[]
+  metricIds: string[]
+  timeframe: {
+    hours?: number
+    startTime?: string
+    endTime?: string
+  }
+  visualization?: {
+    colors?: string[]
+    showLegend?: boolean
+    showGrid?: boolean
+    height?: number
+    city?: string 
+  }
+  position?: {
+    x: number
+    y: number
+    w: number
+    h: number
+  }
+}
+
+export interface DashboardConfig {
+  widgets: WidgetConfig[]
+  layout: 'grid' | 'freeform'
+  refreshInterval?: number
+}
+
+const DEFAULT_CONFIG: DashboardConfig = {
+  widgets: [],
+  layout: 'grid',
+  refreshInterval: 30000,
+}
+
+const STORAGE_KEY = 'iot-dashboard-config'
+
+/**
+ * Hook to manage dashboard configuration with localStorage persistence
+ */
+export function useDashboardConfig() {
+  const [config, setConfig] = useState<DashboardConfig>(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      if (stored) {
+        return JSON.parse(stored) as DashboardConfig
+      }
+    } catch (error) {
+      console.error('Failed to load dashboard config:', error)
+    }
+    return DEFAULT_CONFIG
+  })
+
+  // Persist to localStorage whenever config changes
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(config))
+    } catch (error) {
+      console.error('Failed to save dashboard config:', error)
+    }
+  }, [config])
+
+  const addWidget = (widget: WidgetConfig) => {
+    setConfig((prev) => ({
+      ...prev,
+      widgets: [...prev.widgets, widget],
+    }))
+  }
+
+  const updateWidget = (id: string, updates: Partial<WidgetConfig>) => {
+    setConfig((prev) => ({
+      ...prev,
+      widgets: prev.widgets.map((w) => (w.id === id ? { ...w, ...updates } : w)),
+    }))
+  }
+
+  const removeWidget = (id: string) => {
+    setConfig((prev) => ({
+      ...prev,
+      widgets: prev.widgets.filter((w) => w.id !== id),
+    }))
+  }
+
+  const reorderWidgets = (widgets: WidgetConfig[]) => {
+    setConfig((prev) => ({
+      ...prev,
+      widgets,
+    }))
+  }
+
+  const resetConfig = () => {
+    setConfig(DEFAULT_CONFIG)
+  }
+
+  const exportConfig = (): string => {
+    return JSON.stringify(config, null, 2)
+  }
+
+  const importConfig = (configOrJson: DashboardConfig | string) => {
+    try {
+      const imported = typeof configOrJson === 'string' 
+        ? JSON.parse(configOrJson) as DashboardConfig
+        : configOrJson
+      setConfig(imported)
+    } catch (error) {
+      console.error('Failed to import config:', error)
+      throw new Error('Invalid configuration')
+    }
+  }
+
+  return {
+    config,
+    addWidget,
+    updateWidget,
+    removeWidget,
+    reorderWidgets,
+    resetConfig,
+    exportConfig,
+    importConfig,
+  }
+}

frontend/src/hooks/useDeviceMetrics.ts

@@ -0,0 +1,54 @@
+import { useQuery } from '@tanstack/react-query'
+import { devicesApi, telemetryApi } from '../api'
+
+interface DeviceMetricsResult {
+  deviceId: string
+  deviceName: string
+  metrics: string[]
+  isLoading: boolean
+  error: Error | null
+}
+
+/**
+ * Hook to fetch available metrics for a specific device
+ */
+export function useDeviceMetrics(deviceId: string | undefined): DeviceMetricsResult {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['device', deviceId, 'metrics'],
+    queryFn: async () => {
+      if (!deviceId) return null
+      const response = await devicesApi.getMetrics(deviceId)
+      return response.data
+    },
+    enabled: !!deviceId,
+    staleTime: 60000, // Cache for 1 minute
+  })
+
+  return {
+    deviceId: data?.device_id || '',
+    deviceName: data?.device_name || '',
+    metrics: data?.metrics || [],
+    isLoading,
+    error: error as Error | null,
+  }
+}
+
+/**
+ * Hook to fetch all available metrics across all devices
+ */
+export function useAllMetrics() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['telemetry', 'metrics'],
+    queryFn: async () => {
+      const response = await telemetryApi.getMetrics()
+      return response.data.metrics
+    },
+    staleTime: 60000,
+  })
+
+  return {
+    metrics: data || [],
+    isLoading,
+    error: error as Error | null,
+  }
+}

frontend/src/hooks/useTelemetrySeries.ts

@@ -0,0 +1,75 @@
+import { useQuery } from '@tanstack/react-query'
+import { telemetryApi } from '../api'
+import type { Telemetry } from '../types/api'
+
+interface TelemetrySeriesParams {
+  deviceId?: string
+  metric?: string
+  hours?: number
+  startTime?: string
+  endTime?: string
+  limit?: number
+  enabled?: boolean
+}
+
+interface TelemetrySeries {
+  data: Telemetry[]
+  isLoading: boolean
+  isFetching: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+/**
+ * Hook to fetch telemetry data series with flexible filtering
+ */
+export function useTelemetrySeries({
+  deviceId,
+  metric,
+  hours = 24,
+  startTime,
+  endTime,
+  limit = 1000,
+  enabled = true,
+}: TelemetrySeriesParams): TelemetrySeries {
+  const { data, isLoading, isFetching, error, refetch } = useQuery({
+    queryKey: ['telemetry', 'series', { deviceId, metric, hours, startTime, endTime, limit }],
+    queryFn: async () => {
+      const params: {
+        device_id?: string
+        metric?: string
+        hours?: number
+        start_time?: string
+        end_time?: string
+        page_size: number
+      } = {
+        page_size: limit,
+      }
+
+      if (deviceId) params.device_id = deviceId
+      if (metric) params.metric = metric
+      if (startTime) params.start_time = startTime
+      if (endTime) params.end_time = endTime
+      if (!startTime && !endTime && hours) params.hours = hours
+
+      const response = await telemetryApi.query(params)
+      
+      // Handle paginated response
+      if ('results' in response.data) {
+        return response.data.results
+      }
+      
+      return response.data as Telemetry[]
+    },
+    enabled,
+    refetchInterval: 30000, // Refresh every 30 seconds
+  })
+
+  return {
+    data: data || [],
+    isLoading,
+    isFetching,
+    error: error as Error | null,
+    refetch,
+  }
+}

frontend/src/index.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+/* DaisyUI theme configuration */
+@theme {
+  --dui-themes: light, dark, cupcake, corporate;
+}
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Dark mode scrollbar */
+@media (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}
+
+/* Smooth transitions */
+.btn,
+.card {
+  transition: all 0.2s ease-in-out;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stats {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+/* Radix UI Dialog/AlertDialog overlays and content */
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* Dialog/AlertDialog Overlay */
+[data-radix-dialog-overlay],
+[data-radix-alert-dialog-overlay] {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 50;
+}
+
+/* Dialog/AlertDialog Content */
+[data-radix-dialog-content],
+[data-radix-alert-dialog-content] {
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 450px;
+  max-height: 85vh;
+  padding: 1.5rem;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 51;
+}
+
+[data-radix-dialog-content]:focus,
+[data-radix-alert-dialog-content]:focus {
+  outline: none;
+}
+
+/* Dark mode support for dialogs */
+@media (prefers-color-scheme: dark) {
+  [data-radix-dialog-content],
+  [data-radix-alert-dialog-content] {
+    background-color: #1f2937;
+    color: white;
+  }
+}

frontend/src/lib/api-client.ts

@@ -0,0 +1,36 @@
+import axios from 'axios';
+
+// Use Vite proxy in development, or env variable in production
+const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
+
+export const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true, // For session auth
+});
+
+// Add request interceptor for JWT token (if using JWT)
+apiClient.interceptors.request.use((config) => {
+  const token = localStorage.getItem('access_token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// Add response interceptor for error handling
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      // Handle unauthorized - redirect to login
+      localStorage.removeItem('access_token');
+      // window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;

frontend/src/lib/utils.ts

@@ -0,0 +1,29 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDate(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString()
+}
+
+export function formatRelativeTime(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  
+  if (seconds < 60) return `${seconds}s ago`
+  if (minutes < 60) return `${minutes}m ago`
+  if (hours < 24) return `${hours}h ago`
+  if (days < 30) return `${days}d ago`
+  
+  return formatDate(d)
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/AddDevice.tsx

@@ -0,0 +1,160 @@
+import { Link } from 'react-router-dom'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import toast from 'react-hot-toast'
+import type { AxiosError } from 'axios'
+import { devicesApi } from '../api'
+import DeviceCredentialsDialog from '../components/DeviceCredentialsDialog'
+import type { DeviceRegistrationRequest, DeviceRegistrationResponse } from '../types/api'
+
+type DeviceRegistrationForm = DeviceRegistrationRequest
+
+export default function AddDevice() {
+  const queryClient = useQueryClient()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<DeviceRegistrationForm>({
+    defaultValues: {
+      protocol: 'mqtt',
+    },
+  })
+
+  const [credentials, setCredentials] = useState<DeviceRegistrationResponse | null>(null)
+  const [credentialsOpen, setCredentialsOpen] = useState(false)
+
+  const registerMutation = useMutation({
+    mutationFn: (payload: DeviceRegistrationRequest) => devicesApi.create(payload),
+    onSuccess: (response) => {
+      setCredentials(response.data)
+      setCredentialsOpen(true)
+      toast.success('Device registered successfully')
+      queryClient.invalidateQueries({ queryKey: ['devices'] })
+      reset({ name: '', location: '', protocol: 'mqtt' })
+    },
+    onError: (error) => {
+      const axiosError = error as AxiosError<{ detail?: string }>
+      const message = axiosError.response?.data?.detail || axiosError.message
+      toast.error(`Failed to register device: ${message}`)
+    },
+  })
+
+  const onSubmit = (data: DeviceRegistrationForm) => {
+    if (data.protocol !== 'mqtt') {
+      toast.error('Only MQTT devices are supported right now')
+      return
+    }
+
+    registerMutation.mutate({
+      name: data.name.trim(),
+      location: data.location?.trim() || undefined,
+      protocol: 'mqtt',
+    })
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <Link to="/devices" className="btn btn-ghost btn-sm mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+          </svg>
+          Back to Devices
+        </Link>
+        <h1 className="text-3xl font-bold">Add New Device</h1>
+      </div>
+
+      <div className="card bg-base-100 shadow-xl max-w-2xl">
+        <div className="card-body">
+          <h2 className="card-title">Device Registration</h2>
+          <p className="text-sm opacity-70 mb-4">
+            Register a new IoT device. For MQTT devices, a certificate will be automatically generated.
+          </p>
+
+          <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Device Name *</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g., Office Temperature Sensor"
+                className={`input input-bordered w-full ${errors.name ? 'input-error' : ''}`}
+                {...register('name', { required: 'Device name is required' })}
+              />
+              {errors.name && (
+                <label className="label">
+                  <span className="label-text-alt text-error">{errors.name.message}</span>
+                </label>
+              )}
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Location</span>
+              </label>
+              <input
+                type="text"
+                placeholder="e.g., Office Room 101"
+                className="input input-bordered w-full"
+                {...register('location')}
+              />
+            </div>
+
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text font-semibold">Protocol *</span>
+              </label>
+              <select
+                className="select select-bordered w-full"
+                {...register('protocol')}
+              >
+                <option value="mqtt">MQTT (with mTLS)</option>
+                <option value="http" disabled>
+                  HTTP (coming soon)
+                </option>
+                <option value="webhook" disabled>
+                  Webhook (coming soon)
+                </option>
+              </select>
+              <label className="label">
+                <span className="label-text-alt">MQTT devices will receive a certificate for secure communication</span>
+              </label>
+            </div>
+
+            <div className="card-actions justify-end mt-6">
+              <Link to="/devices" className="btn btn-ghost">
+                Cancel
+              </Link>
+              <button type="submit" className="btn btn-primary" disabled={registerMutation.isPending}>
+                {registerMutation.isPending ? (
+                  <>
+                    <span className="loading loading-spinner loading-sm" />
+                    Registering...
+                  </>
+                ) : (
+                  'Register Device'
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <DeviceCredentialsDialog
+        open={credentialsOpen}
+        credentials={credentials}
+        deviceName={credentials?.device_id}
+        onOpenChange={(open) => {
+          setCredentialsOpen(open)
+          if (!open) {
+            setCredentials(null)
+          }
+        }}
+      />
+    </div>
+  )
+}

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,199 @@
+import { useState, useRef, useEffect } from 'react'
+import GridLayout from 'react-grid-layout'
+import 'react-grid-layout/css/styles.css'
+import { useDashboardConfig } from '../hooks'
+import { WidgetContainer } from '../components/widgets'
+import AddWidgetModal from '../components/AddWidgetModal'
+import EditWidgetModal from '../components/EditWidgetModal'
+
+export default function Dashboard() {
+	const { config, addWidget, removeWidget, updateWidget, exportConfig, importConfig } = useDashboardConfig()
+	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [editingWidget, setEditingWidget] = useState<string | null>(null)
+	const [gridWidth, setGridWidth] = useState(1200)
+	const gridContainerRef = useRef<HTMLDivElement>(null)
+
+	// Update grid width on resize
+	useEffect(() => {
+		const updateWidth = () => {
+			if (gridContainerRef.current) {
+				setGridWidth(gridContainerRef.current.offsetWidth)
+			}
+		}
+
+		updateWidth()
+		window.addEventListener('resize', updateWidth)
+		return () => window.removeEventListener('resize', updateWidth)
+	}, [])
+
+	const handleLayoutChange = (newLayout: GridLayout.Layout[]) => {
+		// Update widget positions when layout changes
+		newLayout.forEach((item) => {
+			const widget = config.widgets.find((w) => w.id === item.i)
+			if (widget) {
+				updateWidget(item.i, {
+					position: {
+						x: item.x,
+						y: item.y,
+						w: item.w,
+						h: item.h,
+					},
+				})
+			}
+		})
+	}
+
+	const layout = config.widgets.map((widget) => ({
+		i: widget.id,
+		x: widget.position?.x || 0,
+		y: widget.position?.y || 0,
+		w: widget.position?.w || 1,
+		h: widget.position?.h || 2,
+		minW: 1,
+		minH: 1,
+		maxW: 4,
+	}))
+
+	const handleExport = () => {
+		const json = exportConfig()
+		const blob = new Blob([json], { type: 'application/json' })
+		const url = URL.createObjectURL(blob)
+		const a = document.createElement('a')
+		a.href = url
+		a.download = `dashboard-config-${new Date().toISOString().split('T')[0]}.json`
+		a.click()
+		URL.revokeObjectURL(url)
+	}
+
+	const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0]
+		if (!file) return
+		const reader = new FileReader()
+		reader.onload = (event) => {
+			try {
+				const text = event.target?.result as string
+				const parsed = JSON.parse(text)
+				importConfig(parsed)
+				alert('Dashboard configuration imported successfully!')
+			} catch (error) {
+				alert('Failed to import configuration')
+				console.error(error)
+			}
+		}
+		reader.readAsText(file)
+	}
+
+	return (
+		<div className="p-6 space-y-6">
+			<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+				<div>
+					<h1 className="text-3xl font-bold">Dashboard</h1>
+					<p className="text-base-content/70">
+						Customize your view with modular widgets
+					</p>
+				</div>
+				<div className="flex gap-2">
+					<button
+						className="btn btn-outline btn-sm"
+						onClick={handleExport}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+						</svg>
+						Export
+					</button>
+					<label className="btn btn-outline btn-sm">
+						<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+						</svg>
+						Import
+						<input
+							type="file"
+							accept="application/json"
+							className="hidden"
+							onChange={handleImport}
+						/>
+					</label>
+					<button
+						className="btn btn-primary btn-sm"
+						onClick={() => setIsModalOpen(true)}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+						</svg>
+						Add Widget
+					</button>
+				</div>
+			</div>
+
+			{config.widgets.length === 0 ? (
+				<div className="card bg-base-200 shadow-lg">
+					<div className="card-body items-center text-center py-16">
+						<svg xmlns="http://www.w3.org/2000/svg" className="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+						</svg>
+						<h2 className="text-2xl font-bold mt-4">No Widgets Yet</h2>
+						<p className="text-base-content/60 max-w-md">
+							Get started by adding your first widget. Choose from line charts, stat cards, gauges, or AI insights.
+						</p>
+						<button
+							className="btn btn-primary mt-6"
+							onClick={() => setIsModalOpen(true)}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+							</svg>
+							Add Your First Widget
+						</button>
+					</div>
+				</div>
+			) : (
+				<div className="w-full" ref={gridContainerRef}>
+					<GridLayout
+						className="layout"
+						layout={layout}
+						cols={4}
+						rowHeight={150}
+						width={gridWidth}
+						onLayoutChange={handleLayoutChange}
+						draggableHandle=".drag-handle"
+						compactType="vertical"
+						preventCollision={false}
+						isResizable={true}
+						isDraggable={true}
+						margin={[12, 12]}
+					>
+						{config.widgets.map((widget) => (
+							<div key={widget.id} className="h-full">
+								<WidgetContainer
+									config={widget}
+									onRemove={() => removeWidget(widget.id)}
+									onEdit={() => setEditingWidget(widget.id)}
+								/>
+							</div>
+						))}
+					</GridLayout>
+				</div>
+			)}
+
+			<AddWidgetModal
+				isOpen={isModalOpen}
+				onClose={() => setIsModalOpen(false)}
+				onAdd={(widget) => {
+					addWidget(widget)
+					setIsModalOpen(false)
+				}}
+			/>
+
+			<EditWidgetModal
+				isOpen={editingWidget !== null}
+				widget={config.widgets.find((w) => w.id === editingWidget) || null}
+				onClose={() => setEditingWidget(null)}
+				onSave={(widgetId, updates) => {
+					updateWidget(widgetId, updates)
+					setEditingWidget(null)
+				}}
+			/>
+		</div>
+	)
+}

frontend/src/pages/DeviceDetail.tsx

@@ -0,0 +1,187 @@
+import { useParams, Link, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { devicesApi } from '../api'
+import DeleteDeviceDialog from '../components/DeleteDeviceDialog'
+import RenewDialog from '../components/RenewDialog'
+import RevokeDialog from '../components/RevokeDialog'
+
+export default function DeviceDetail() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [renewOpen, setRenewOpen] = useState(false)
+  const [revokeOpen, setRevokeOpen] = useState(false)
+
+  const { data: device, isLoading } = useQuery({
+    queryKey: ['device', id],
+    queryFn: async () => {
+      const response = await devicesApi.getOne(id!)
+      return response.data
+    },
+    enabled: !!id,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    )
+  }
+
+  if (!device) {
+    return (
+      <div className="p-6">
+        <div className="alert alert-error">
+          <span>Device not found</span>
+        </div>
+        <Link to="/devices" className="btn btn-ghost mt-4">
+          Back to Device List
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <Link to="/devices" className="btn btn-ghost btn-sm mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+          </svg>
+          Back to Devices
+        </Link>
+        <h1 className="text-3xl font-bold">Device Details</h1>
+      </div>
+
+      <div className="card bg-base-100 shadow-xl">
+        <div className="card-body">
+          <h2 className="card-title text-2xl mb-4">{device.name}</h2>
+
+          <div className="overflow-x-auto">
+            <table className="table">
+              <tbody>
+                <tr>
+                  <th className="w-1/3">Device ID:</th>
+                  <td><code className="bg-base-200 px-3 py-1 rounded">{device.id}</code></td>
+                </tr>
+                <tr>
+                  <th>Location:</th>
+                  <td>{device.location || '—'}</td>
+                </tr>
+                <tr>
+                  <th>Protocol:</th>
+                  <td>
+                    <div className="badge badge-info">{device.protocol.toUpperCase()}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Status:</th>
+                  <td>
+                    <div className={`badge ${device.is_active ? 'badge-success' : 'badge-ghost'}`}>
+                      {device.is_active ? 'Active' : 'Inactive'}
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Created:</th>
+                  <td>{new Date(device.created_at).toLocaleString()}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          {/* Certificate Information for MQTT devices */}
+          {device.protocol === 'mqtt' && device.active_certificate && (
+            <div className="mt-6">
+              <h3 className="text-xl font-bold mb-4">Certificate Information</h3>
+              <div className="overflow-x-auto">
+                <table className="table">
+                  <tbody>
+                    <tr>
+                      <th className="w-1/3">Certificate ID:</th>
+                      <td><code className="bg-base-200 px-3 py-1 rounded">{device.active_certificate.id}</code></td>
+                    </tr>
+                    <tr>
+                      <th>Issued At:</th>
+                      <td>{new Date(device.active_certificate.issued_at).toLocaleString()}</td>
+                    </tr>
+                    <tr>
+                      <th>Expires At:</th>
+                      <td>{new Date(device.active_certificate.expires_at).toLocaleString()}</td>
+                    </tr>
+                    <tr>
+                      <th>Days Until Expiry:</th>
+                      <td>
+                        <span className={`font-semibold ${
+                          device.active_certificate.days_until_expiry < 30 ? 'text-warning' :
+                          device.active_certificate.days_until_expiry < 7 ? 'text-error' :
+                          'text-success'
+                        }`}>
+                          {device.active_certificate.days_until_expiry} days
+                        </span>
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>Status:</th>
+                      <td>
+                        {device.active_certificate.revoked_at ? (
+                          <div className="badge badge-error">Revoked</div>
+                        ) : device.active_certificate.is_expired ? (
+                          <div className="badge badge-error">Expired</div>
+                        ) : device.active_certificate.is_expiring_soon ? (
+                          <div className="badge badge-warning">Expiring Soon</div>
+                        ) : (
+                          <div className="badge badge-success">Active</div>
+                        )}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* Action Buttons */}
+          <div className="card-actions justify-end mt-6">
+            {device.protocol === 'mqtt' && (
+              <>
+                <button className="btn btn-outline btn-warning" onClick={() => setRenewOpen(true)}>
+                  Renew Certificate
+                </button>
+                <button className="btn btn-outline btn-error" onClick={() => setRevokeOpen(true)}>
+                  Revoke Certificate
+                </button>
+              </>
+            )}
+            <button className="btn btn-error" onClick={() => setDeleteOpen(true)}>
+              Delete Device
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <DeleteDeviceDialog
+        device={device}
+        open={deleteOpen}
+        onOpenChange={(open) => setDeleteOpen(open)}
+        onDeleted={() => navigate('/devices')}
+      />
+      {device.protocol === 'mqtt' && (
+        <>
+          <RenewDialog
+            device={device}
+            open={renewOpen}
+            onOpenChange={(open) => setRenewOpen(open)}
+          />
+          <RevokeDialog
+            device={device}
+            open={revokeOpen}
+            onOpenChange={(open) => setRevokeOpen(open)}
+          />
+        </>
+      )}
+    </div>
+  )
+}

frontend/src/pages/DeviceList.tsx

@@ -0,0 +1,280 @@
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { dashboardApi, devicesApi } from '../api'
+import type { DashboardOverview, Device } from '../types/api'
+import DeleteDeviceDialog from '../components/DeleteDeviceDialog'
+import RevokeDialog from '../components/RevokeDialog'
+import RenewDialog from '../components/RenewDialog'
+
+export default function DeviceList() {
+  const [deleteDevice, setDeleteDevice] = useState<Device | null>(null)
+  const [revokeDevice, setRevokeDevice] = useState<Device | null>(null)
+  const [renewDevice, setRenewDevice] = useState<Device | null>(null)
+  const { data: devicesData, isLoading: devicesLoading } = useQuery({
+    queryKey: ['devices'],
+    queryFn: async () => {
+      const response = await devicesApi.getAll()
+      return response.data
+    },
+  })
+
+  const { data: overview } = useQuery({
+    queryKey: ['dashboard', 'overview'],
+    queryFn: async (): Promise<DashboardOverview> => {
+      const response = await dashboardApi.getOverview()
+      return response.data
+    },
+    staleTime: 5000,
+  })
+
+  const devices = devicesData?.results || []
+
+  if (devicesLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold">Manage Devices</h1>
+        <Link to="/devices/add" className="btn btn-primary">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          Add Device
+        </Link>
+      </div>
+
+      <section className="mb-8 space-y-4">
+        <h2 className="text-xl font-semibold">System Health</h2>
+        {overview ? (
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-primary">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    className="inline-block w-8 h-8 stroke-current"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                    />
+                  </svg>
+                </div>
+                <div className="stat-title">Total Devices</div>
+                <div className="stat-value text-primary">{overview.total_devices}</div>
+                <div className="stat-desc">Registered in system</div>
+              </div>
+            </div>
+
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-success">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    className="inline-block w-8 h-8 stroke-current"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </div>
+                <div className="stat-title">Active Devices</div>
+                <div className="stat-value text-success">{overview.active_devices}</div>
+                <div className="stat-desc">Currently online</div>
+              </div>
+            </div>
+
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-secondary">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    className="inline-block w-8 h-8 stroke-current"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-15.857 21.213 0"
+                    />
+                  </svg>
+                </div>
+                <div className="stat-title">MQTT Devices</div>
+                <div className="stat-value text-secondary">{overview.mqtt_devices}</div>
+                <div className="stat-desc">Using mTLS</div>
+              </div>
+            </div>
+
+            <div className="stats shadow">
+              <div className="stat">
+                <div className="stat-figure text-warning">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    className="inline-block w-8 h-8 stroke-current"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    />
+                  </svg>
+                </div>
+                <div className="stat-title">Expiring Soon</div>
+                <div className="stat-value text-warning">
+                  {overview.certificates_expiring_soon}
+                </div>
+                <div className="stat-desc">Certificates need renewal</div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            {[1, 2, 3, 4].map((key) => (
+              <div key={key} className="stats shadow animate-pulse">
+                <div className="stat">
+                  <div className="stat-figure w-8 h-8 rounded-full bg-base-200"></div>
+                  <div className="stat-title bg-base-200 h-4 w-24 rounded"></div>
+                  <div className="stat-value bg-base-200 h-6 w-20 rounded mt-2"></div>
+                  <div className="stat-desc bg-base-200 h-4 w-28 rounded mt-2"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      <div className="overflow-x-auto">
+        <table className="table table-zebra w-full">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Location</th>
+              <th>Protocol</th>
+              <th>Certificate Status</th>
+              <th>Certificate Expiry</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {devices && devices.length > 0 ? (
+              devices.map((device: Device) => {
+                const expiresAt = device.active_certificate?.expires_at ?? device.certificate_expires_at
+
+                return (
+                  <tr key={device.id} className="hover">
+                  <td className="font-semibold">{device.name}</td>
+                  <td>{device.location || '—'}</td>
+                  <td>
+                    <div className="badge badge-info">{device.protocol.toUpperCase()}</div>
+                  </td>
+                  <td>
+                    {device.protocol === 'mqtt' ? (
+                      <div className={`badge ${
+                        device.certificate_status === 'Valid' ? 'badge-success' :
+                        device.certificate_status === 'Expiring Soon' ? 'badge-warning' :
+                        'badge-error'
+                      }`}>
+                        {device.certificate_status || 'Unknown'}
+                      </div>
+                    ) : (
+                      <span className="badge badge-ghost">N/A</span>
+                    )}
+                  </td>
+                  <td>{expiresAt ? new Date(expiresAt).toLocaleString() : '—'}</td>
+                  <td>
+                    <div className="flex gap-2">
+                      <Link to={`/devices/${device.id}`} className="btn btn-outline btn-info btn-xs">
+                        View
+                      </Link>
+                      <button 
+                        className="btn btn-error btn-xs"
+                        onClick={() => setDeleteDevice(device)}
+                      >
+                        Delete
+                      </button>
+                      {device.protocol === 'mqtt' && (
+                        <>
+                          <button 
+                            className="btn btn-outline btn-warning btn-xs"
+                            onClick={() => setRenewDevice(device)}
+                          >
+                            Renew
+                          </button>
+                          <button 
+                            className="btn btn-outline btn-error btn-xs"
+                            onClick={() => setRevokeDevice(device)}
+                          >
+                            Revoke
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </td>
+                  </tr>
+                )
+              })
+            ) : (
+              <tr>
+                <td colSpan={6} className="text-center py-8">
+                  <div className="flex flex-col items-center gap-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    <p className="text-lg opacity-60">No devices found.</p>
+                    <Link to="/devices/add" className="btn btn-primary btn-sm">
+                      Add Your First Device
+                    </Link>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Dialogs */}
+      {deleteDevice && (
+        <DeleteDeviceDialog
+          device={deleteDevice}
+          open={!!deleteDevice}
+          onOpenChange={(open) => !open && setDeleteDevice(null)}
+        />
+      )}
+      {revokeDevice && (
+        <RevokeDialog
+          device={revokeDevice}
+          open={!!revokeDevice}
+          onOpenChange={(open) => !open && setRevokeDevice(null)}
+        />
+      )}
+      {renewDevice && (
+        <RenewDialog
+          device={renewDevice}
+          open={!!renewDevice}
+          onOpenChange={(open) => !open && setRenewDevice(null)}
+        />
+      )}
+    </div>
+  )
+}

frontend/src/types/api.ts

@@ -0,0 +1,66 @@
+export interface Device {
+  id: string;
+  name: string;
+  location?: string;
+  protocol: 'mqtt' | 'http' | 'webhook';
+  connection_config?: Record<string, any>;
+  is_active: boolean;
+  created_at: string;
+  certificate_status?: string;
+  certificate_expires_at?: string;
+  active_certificate?: DeviceCertificate;
+}
+
+export interface DeviceCertificate {
+  id: string;
+  device_id: string;
+  issued_at: string;
+  expires_at: string;
+  revoked_at?: string;
+  is_revoked: boolean;
+  is_expired: boolean;
+  is_expiring_soon: boolean;
+  is_valid: boolean;
+  days_until_expiry: number;
+}
+
+export interface Telemetry {
+  time: string;
+  device_id: string;
+  device_name: string;
+  metric: string;
+  value: number;
+  unit?: string;
+}
+
+export interface DeviceRegistrationRequest {
+  name: string;
+  location?: string;
+  protocol?: 'mqtt' | 'http' | 'webhook';
+  connection_config?: Record<string, any>;
+}
+
+export interface DeviceRegistrationResponse {
+  device_id: string;
+  protocol: string;
+  certificate_id?: string;
+  ca_certificate_pem?: string;
+  certificate_pem?: string;
+  private_key_pem?: string;
+  expires_at?: string;
+  onboarding_token?: string;  // One-time token for secure onboarding (valid 15 min)
+}
+
+export interface DashboardOverview {
+  total_devices: number;
+  active_devices: number;
+  mqtt_devices: number;
+  http_devices: number;
+  certificates_expiring_soon: number;
+  recent_telemetry: Telemetry[];
+  devices_with_metrics: {
+    device_id: string;
+    device_name: string;
+    metrics: string[];
+  }[];
+}

frontend/src/utils/formatters.ts

@@ -0,0 +1,64 @@
+/**
+ * Format metric names for display
+ */
+export function formatMetricName(metric: string): string {
+  // Known metric mappings
+  const metricNames: Record<string, string> = {
+    'temperature': 'Temperature',
+    'humidity': 'Humidity',
+    'co2': 'CO₂',
+    'pressure': 'Pressure',
+    'light': 'Light Level',
+    'noise': 'Noise Level',
+    'pm25': 'PM2.5',
+    'voc': 'VOC',
+  }
+
+  // Return mapped name or capitalize the metric
+  return metricNames[metric.toLowerCase()] || 
+         metric.replace(/_/g, ' ')
+               .split(' ')
+               .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+               .join(' ')
+}
+
+/**
+ * Format device name for display
+ */
+export function formatDeviceName(deviceName: string): string {
+  return deviceName
+    .replace(/_/g, ' ')
+    .replace(/-/g, ' ')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+/**
+ * Create a default widget title based on type, device, and metrics
+ */
+export function createDefaultWidgetTitle(
+  type: string,
+  deviceName: string | undefined,
+  metrics: string[]
+): string {
+  const formattedMetrics = metrics.map(formatMetricName).join(' & ')
+  
+  switch (type) {
+    case 'line-chart':
+      if (metrics.length > 1) {
+        return `${formattedMetrics}`
+      }
+      return `${formattedMetrics}`
+    case 'stat':
+      return `${formattedMetrics}`
+    case 'gauge':
+      return `${formattedMetrics}`
+    case 'ai-insight':
+      return deviceName 
+        ? `AI Insights - ${formatDeviceName(deviceName)}`
+        : 'AI Insights'
+    default:
+      return formattedMetrics
+  }
+}

frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+})

gpt.py

@@ -1,44 +0,0 @@
-import json
-import os
-import redis
-from dotenv import load_dotenv
-from openai import OpenAI
-
-load_dotenv()
-client = OpenAI()
-
-REDIS_HOST = os.getenv("REDIS_HOST")
-redis_client = redis.StrictRedis(host=REDIS_HOST, port=6379, db=0)
-
-data = redis_client.get("last5").decode("utf-8")
-
-
-def analysis(environment_data):
-    completion = client.chat.completions.create(
-        model="gpt-4o-mini",
-        messages=[
-            {
-                "role": "system",
-                "content": "You are an assistant that analyzes environmental data for an office working space and provides "
-                "concise numerical insights.",
-            },
-            {
-                "role": "user",
-                "content": f"Analyze the following environmental data. The goal is maintaining optimal working "
-                f"conditions in the office and peak working brain. Focus on any outliers or necessary adjustments. The data is as following: {environment_data}."
-                f"The output should be only the recommendations in numerical form with postitive and negative "
-                f"numbers and also provide small summary in a sentence or two of the current conditions and "
-                f"easily computable in json format. Be consistent with the + and - signs and the summary",
-            },
-        ],
-        response_format={"type": "json_object"},
-    )
-    output = completion.choices[0].message.content
-
-    return output
-
-
-output = analysis(data)
-redis_client.set("gpt", json.dumps(output))
-
-print(output)

iotDashboard/.env.sample

@@ -1,6 +1,7 @@
 PASSWORD='postgres'
 SECRET_KEY='django_key'
 CONNECTION_STRING='postgres://postgres:postgres@localhost:5555/example'
-REDIS_HOST="localhost"
-MQTT_BROKER="localhost"
-OPENAI_API_KEY="example"
+
+WEATHER_API_KEY=your_weather_api_key_here
+DEVICE_MANAGER_URL=http://localhost:8000
+

iotDashboard/api/__init__.py

@@ -0,0 +1 @@
+"""REST API for IoT Dashboard."""

iotDashboard/api/serializers.py

@@ -0,0 +1,77 @@
+"""DRF serializers for IoT Dashboard models."""
+
+from rest_framework import serializers
+from iotDashboard.models import Device, DeviceCertificate, Telemetry
+
+
+class DeviceCertificateSerializer(serializers.ModelSerializer):
+    """Serializer for device certificates."""
+    
+    is_revoked = serializers.ReadOnlyField()
+    is_expired = serializers.ReadOnlyField()
+    is_expiring_soon = serializers.ReadOnlyField()
+    is_valid = serializers.ReadOnlyField()
+    days_until_expiry = serializers.ReadOnlyField()
+    
+    class Meta:
+        model = DeviceCertificate
+        fields = [
+            'id', 'device_id', 'issued_at', 'expires_at', 
+            'revoked_at', 'is_revoked', 'is_expired', 
+            'is_expiring_soon', 'is_valid', 'days_until_expiry'
+        ]
+        # Don't expose private keys in API
+        # certificate_pem and private_key_pem are excluded by default
+
+
+class DeviceSerializer(serializers.ModelSerializer):
+    """Serializer for devices with certificate status."""
+    
+    certificate_status = serializers.ReadOnlyField()
+    active_certificate = DeviceCertificateSerializer(read_only=True)
+    
+    class Meta:
+        model = Device
+        fields = [
+            'id', 'name', 'location', 'protocol', 
+            'connection_config', 'is_active', 'created_at',
+            'certificate_status', 'active_certificate'
+        ]
+        read_only_fields = ['id', 'created_at']
+
+
+class DeviceCreateSerializer(serializers.Serializer):
+    """Serializer for device registration requests."""
+    
+    name = serializers.CharField(max_length=255)
+    location = serializers.CharField(max_length=255, required=False, allow_blank=True)
+    protocol = serializers.ChoiceField(choices=['mqtt', 'http', 'webhook'], default='mqtt')
+    connection_config = serializers.JSONField(required=False, allow_null=True)
+
+
+class TelemetrySerializer(serializers.ModelSerializer):
+    """Serializer for telemetry data."""
+    
+    class Meta:
+        model = Telemetry
+        fields = ['time', 'device_id', 'metric', 'value', 'unit']
+
+
+class DeviceMetricsSerializer(serializers.Serializer):
+    """Serializer for device metrics list."""
+    
+    device_id = serializers.CharField()
+    device_name = serializers.CharField()
+    metrics = serializers.ListField(child=serializers.CharField())
+
+
+class DashboardOverviewSerializer(serializers.Serializer):
+    """Serializer for dashboard overview data."""
+    
+    total_devices = serializers.IntegerField()
+    active_devices = serializers.IntegerField()
+    mqtt_devices = serializers.IntegerField()
+    http_devices = serializers.IntegerField()
+    certificates_expiring_soon = serializers.IntegerField()
+    recent_telemetry = TelemetrySerializer(many=True)
+    devices_with_metrics = DeviceMetricsSerializer(many=True)

iotDashboard/api/urls.py

@@ -0,0 +1,15 @@
+"""URL routing for IoT Dashboard REST API."""
+
+from django.urls import path, include
+from rest_framework.routers import DefaultRouter
+from .views import DeviceViewSet, TelemetryViewSet, DashboardViewSet, WeatherViewSet
+
+router = DefaultRouter()
+router.register(r'devices', DeviceViewSet, basename='device')
+router.register(r'telemetry', TelemetryViewSet, basename='telemetry')
+router.register(r'dashboard', DashboardViewSet, basename='dashboard')
+router.register(r'weather', WeatherViewSet, basename='weather')
+
+urlpatterns = [
+    path('', include(router.urls)),
+]

iotDashboard/api/views.py

@@ -0,0 +1,578 @@
+"""DRF ViewSets for IoT Dashboard API."""
+
+import requests
+from datetime import timedelta
+from django.utils import timezone
+from rest_framework import viewsets, status
+from rest_framework.decorators import action
+from rest_framework.response import Response
+from asgiref.sync import async_to_sync
+
+from iotDashboard.models import Device, DeviceCertificate, Telemetry
+from iotDashboard.device_manager_client import (
+    DeviceManagerClient, 
+    DeviceManagerAPIError
+)
+from iotDashboard import gpt_service_client
+from iotDashboard import weather_client
+from iotDashboard.comfort_index import (
+    ComfortMetrics,
+    ComfortIndexCalculator,
+    calculate_comfort_index_from_telemetry,
+)
+from .serializers import (
+    DeviceSerializer,
+    DeviceCreateSerializer,
+    TelemetrySerializer,
+    DashboardOverviewSerializer,
+)
+
+
+device_manager = DeviceManagerClient()
+
+
+class DeviceViewSet(viewsets.ModelViewSet):
+    """ViewSet for device management."""
+    
+    queryset = Device.objects.all()
+    serializer_class = DeviceSerializer
+    # permission_classes = [IsAuthenticated]  # Uncomment for production
+    
+    def get_serializer_class(self):
+        if self.action == 'create':
+            return DeviceCreateSerializer
+        return DeviceSerializer
+    
+    def create(self, request):
+        """Register a new device via device_manager API."""
+        serializer = DeviceCreateSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+        
+        try:
+            response = device_manager.register_device(
+                name=serializer.validated_data['name'],
+                location=serializer.validated_data.get('location'),
+                protocol=serializer.validated_data.get('protocol', 'mqtt'),
+                connection_config=serializer.validated_data.get('connection_config'),
+            )
+            
+            # Return full registration response with credentials
+            return Response({
+                'device_id': response.device_id,
+                'protocol': response.protocol,
+                'certificate_id': response.certificate_id,
+                'ca_certificate_pem': response.ca_certificate_pem,
+                'certificate_pem': response.certificate_pem,
+                'private_key_pem': response.private_key_pem,
+                'expires_at': response.expires_at.isoformat() if response.expires_at else None,
+                'onboarding_token': response.onboarding_token,  # One-time token for QR code
+            }, status=status.HTTP_201_CREATED)
+        
+        except DeviceManagerAPIError as e:
+            return Response(
+                {'error': e.message, 'details': e.details},
+                status=e.status_code or status.HTTP_500_INTERNAL_SERVER_ERROR
+            )
+    
+    def destroy(self, request, pk=None):
+        """Delete a device."""
+        try:
+            device = self.get_object()
+            device_name = device.name
+            device.delete()
+            return Response(
+                {'message': f"Device '{device_name}' deleted successfully"},
+                status=status.HTTP_204_NO_CONTENT
+            )
+        except Device.DoesNotExist:
+            return Response(
+                {'error': 'Device not found'},
+                status=status.HTTP_404_NOT_FOUND
+            )
+    
+    @action(detail=True, methods=['post'])
+    def revoke(self, request, pk=None):
+        """Revoke a device's certificate."""
+        device = self.get_object()
+        
+        if device.protocol != 'mqtt':
+            return Response(
+                {'error': 'Only MQTT devices have certificates to revoke'},
+                status=status.HTTP_400_BAD_REQUEST
+            )
+        
+        try:
+            result = device_manager.revoke_certificate(device.id)
+            return Response(result)
+        except DeviceManagerAPIError as e:
+            return Response(
+                {'error': e.message, 'details': e.details},
+                status=e.status_code or status.HTTP_500_INTERNAL_SERVER_ERROR
+            )
+    
+    @action(detail=True, methods=['post'])
+    def renew(self, request, pk=None):
+        """Renew a device's certificate."""
+        device = self.get_object()
+        
+        if device.protocol != 'mqtt':
+            return Response(
+                {'error': 'Only MQTT devices have certificates to renew'},
+                status=status.HTTP_400_BAD_REQUEST
+            )
+        
+        try:
+            response = device_manager.renew_certificate(device.id)
+            return Response({
+                'device_id': response.device_id,
+                'protocol': response.protocol,
+                'certificate_id': response.certificate_id,
+                'ca_certificate_pem': response.ca_certificate_pem,
+                'certificate_pem': response.certificate_pem,
+                'private_key_pem': response.private_key_pem,
+                'expires_at': response.expires_at.isoformat() if response.expires_at else None,
+            })
+        except DeviceManagerAPIError as e:
+            return Response(
+                {'error': e.message, 'details': e.details},
+                status=e.status_code or status.HTTP_500_INTERNAL_SERVER_ERROR
+            )
+    
+    @action(detail=True, methods=['get'])
+    def credentials(self, request, pk=None):
+        """
+        Fetch device credentials using one-time onboarding token.
+        Used by mobile apps after scanning QR code.
+        
+        Query params:
+            - token: One-time onboarding token from QR code
+        """
+        device_id = pk
+        token = request.query_params.get('token')
+        
+        if not token:
+            return Response(
+                {'error': 'token parameter is required'},
+                status=status.HTTP_400_BAD_REQUEST
+            )
+        
+        try:
+            response = device_manager.get_device_credentials(device_id, token)
+            
+            # Return credentials
+            return Response({
+                'device_id': response.device_id,
+                'protocol': response.protocol,
+                'certificate_id': response.certificate_id,
+                'ca_certificate_pem': response.ca_certificate_pem,
+                'certificate_pem': response.certificate_pem,
+                'private_key_pem': response.private_key_pem,
+                'expires_at': response.expires_at.isoformat() if response.expires_at else None,
+            })
+        
+        except DeviceManagerAPIError as e:
+            return Response(
+                {'error': e.message, 'details': e.details},
+                status=e.status_code or status.HTTP_500_INTERNAL_SERVER_ERROR
+            )
+    
+    @action(detail=True, methods=['get'])
+    def telemetry(self, request, pk=None):
+        """Get telemetry data for a specific device."""
+        device = self.get_object()
+        
+        # Parse query parameters
+        metric = request.query_params.get('metric')
+        hours = int(request.query_params.get('hours', 24))
+        limit = int(request.query_params.get('limit', 1000))
+        
+        # Build query
+        queryset = Telemetry.objects.filter(
+            device_id=device.id,
+            time__gte=timezone.now() - timedelta(hours=hours)
+        )
+        
+        if metric:
+            queryset = queryset.filter(metric=metric)
+        
+        queryset = queryset.order_by('-time')[:limit]
+        
+        serializer = TelemetrySerializer(queryset, many=True)
+        return Response(serializer.data)
+    
+    @action(detail=True, methods=['get'])
+    def metrics(self, request, pk=None):
+        """Get available metrics for a device."""
+        device = self.get_object()
+        
+        metrics = (
+            Telemetry.objects
+            .filter(device_id=device.id)
+            .values_list('metric', flat=True)
+            .distinct()
+        )
+        
+        return Response({
+            'device_id': device.id,
+            'device_name': device.name,
+            'metrics': list(metrics)
+        })
+    
+    @action(detail=True, methods=['get'])
+    def comfort_index(self, request, pk=None):
+        """
+        Calculate comfort index from latest telemetry data.
+        
+        Returns overall comfort score (0-100) and component breakdowns.
+        """
+        device = self.get_object()
+        
+        # Get latest reading for each metric
+        latest_readings = {}
+        metrics_to_check = ['temperature', 'humidity', 'co2', 'CO2', 'noise', 'sound', 
+                           'pm2.5', 'PM2.5', 'pm10', 'PM10', 'light', 'lux']
+        
+        for metric in metrics_to_check:
+            reading = (
+                Telemetry.objects
+                .filter(device_id=device.id, metric=metric)
+                .order_by('-time')
+                .first()
+            )
+            if reading:
+                latest_readings[metric] = reading.value
+        
+        if not latest_readings:
+            return Response(
+                {'error': 'No telemetry data available for comfort calculation'},
+                status=status.HTTP_404_NOT_FOUND
+            )
+        
+        # Calculate comfort index
+        comfort_metrics = ComfortMetrics(
+            temperature=latest_readings.get('temperature'),
+            humidity=latest_readings.get('humidity'),
+            co2=latest_readings.get('co2') or latest_readings.get('CO2'),
+            noise=latest_readings.get('noise') or latest_readings.get('sound'),
+            pm25=latest_readings.get('pm2.5') or latest_readings.get('PM2.5'),
+            pm10=latest_readings.get('pm10') or latest_readings.get('PM10'),
+            light=latest_readings.get('light') or latest_readings.get('lux'),
+        )
+        
+        comfort_score = ComfortIndexCalculator.calculate(comfort_metrics)
+        
+        return Response({
+            'device_id': device.id,
+            'device_name': device.name,
+            'overall_score': comfort_score.overall_score,
+            'rating': comfort_score.rating,
+            'components': {
+                'temperature': comfort_score.temperature_score,
+                'humidity': comfort_score.humidity_score,
+                'air_quality': comfort_score.air_quality_score,
+                'acoustic': comfort_score.acoustic_score,
+                'light': comfort_score.light_score,
+            },
+            'suggestions': comfort_score.suggestions,
+            'raw_readings': latest_readings,
+        })
+
+
+
+class TelemetryViewSet(viewsets.ReadOnlyModelViewSet):
+    """ViewSet for telemetry data queries."""
+    
+    queryset = Telemetry.objects.all()
+    serializer_class = TelemetrySerializer
+    # permission_classes = [IsAuthenticated]
+    
+    def get_queryset(self):
+        """Filter telemetry by query parameters."""
+        queryset = Telemetry.objects.all()
+        
+        # Filter by device
+        device_id = self.request.query_params.get('device_id')
+        if device_id:
+            queryset = queryset.filter(device_id=device_id)
+        
+        # Filter by metric
+        metric = self.request.query_params.get('metric')
+        if metric:
+            queryset = queryset.filter(metric=metric)
+        
+        # Filter by time range
+        hours = self.request.query_params.get('hours')
+        if hours:
+            queryset = queryset.filter(
+                time__gte=timezone.now() - timedelta(hours=int(hours))
+            )
+        
+        start_time = self.request.query_params.get('start_time')
+        if start_time:
+            queryset = queryset.filter(time__gte=start_time)
+        
+        end_time = self.request.query_params.get('end_time')
+        if end_time:
+            queryset = queryset.filter(time__lte=end_time)
+        
+        return queryset.order_by('-time')
+    
+    @action(detail=False, methods=['get'])
+    def latest(self, request):
+        """Get latest telemetry readings for all devices."""
+        from django.db.models import Max
+        
+        # Get latest timestamp for each device-metric combination
+        latest_readings = (
+            Telemetry.objects
+            .values('device_id', 'metric')
+            .annotate(latest_time=Max('time'))
+        )
+        
+        # Fetch the actual records
+        telemetry = []
+        for reading in latest_readings:
+            record = Telemetry.objects.get(
+                device_id=reading['device_id'],
+                metric=reading['metric'],
+                time=reading['latest_time']
+            )
+            telemetry.append(record)
+        
+        serializer = self.get_serializer(telemetry, many=True)
+        return Response(serializer.data)
+    
+    @action(detail=False, methods=['get'])
+    def metrics(self, request):
+        """Get list of all available metrics."""
+        metrics = (
+            Telemetry.objects
+            .values_list('metric', flat=True)
+            .distinct()
+        )
+        return Response({'metrics': list(metrics)})
+    
+    @action(detail=False, methods=['post'])
+    def analyze(self, request):
+        """Analyze telemetry data using GPT service."""
+        # Parse request parameters
+        device_id = request.data.get('device_id')
+        metric = request.data.get('metric')
+        hours = int(request.data.get('hours', 24))
+        limit = int(request.data.get('limit', 100))
+        prompt_type = request.data.get('prompt_type', 'trend_summary')
+        custom_prompt = request.data.get('custom_prompt')
+        
+        # Validate device_id
+        if not device_id:
+            return Response(
+                {'error': 'device_id is required'},
+                status=status.HTTP_400_BAD_REQUEST
+            )
+        
+        try:
+            device = Device.objects.get(id=device_id)
+        except Device.DoesNotExist:
+            return Response(
+                {'error': f'Device {device_id} not found'},
+                status=status.HTTP_404_NOT_FOUND
+            )
+        
+        # Query telemetry data
+        queryset = Telemetry.objects.filter(
+            device_id=device_id,
+            time__gte=timezone.now() - timedelta(hours=hours)
+        )
+        
+        if metric:
+            queryset = queryset.filter(metric=metric)
+        
+        telemetry = queryset.order_by('-time')[:limit]
+        
+        if not telemetry:
+            return Response(
+                {'error': 'No telemetry data found for specified parameters'},
+                status=status.HTTP_404_NOT_FOUND
+            )
+        
+        # Format data for GPT service
+        telemetry_data = [
+            {
+                'device_id': str(t.device_id),
+                'metric': t.metric,
+                'value': float(t.value),
+                'timestamp': t.time.isoformat()
+            }
+            for t in telemetry
+        ]
+        
+        # Device context
+        device_info = {
+            'name': device.name,
+            'location': device.location,
+            'protocol': device.protocol,
+        }
+        
+        # Call GPT service
+        try:
+            result = async_to_sync(gpt_service_client.analyze_telemetry)(
+                telemetry_data=telemetry_data,
+                device_info=device_info,
+                prompt_type=prompt_type,
+                custom_prompt=custom_prompt
+            )
+            return Response({
+                'analysis': result.analysis,
+                'prompt_type': result.prompt_type,
+                'data_points_analyzed': result.data_points_analyzed
+            })
+        
+        except gpt_service_client.GPTServiceError as e:
+            return Response(
+                {
+                    'error': e.message,
+                    'details': e.details,
+                    'gpt_service_available': False
+                },
+                status=e.status_code or status.HTTP_503_SERVICE_UNAVAILABLE
+            )
+
+
+class DashboardViewSet(viewsets.ViewSet):
+    """ViewSet for dashboard overview data."""
+    
+    # permission_classes = [IsAuthenticated]
+    
+    @action(detail=False, methods=['get'])
+    def overview(self, request):
+        """Get dashboard overview statistics."""
+        # Device statistics
+        total_devices = Device.objects.count()
+        active_devices = Device.objects.filter(is_active=True).count()
+        mqtt_devices = Device.objects.filter(protocol='mqtt').count()
+        http_devices = Device.objects.filter(protocol__in=['http', 'webhook']).count()
+        
+        # Certificate statistics
+        expiring_soon = DeviceCertificate.objects.filter(
+            revoked_at__isnull=True,
+            expires_at__lte=timezone.now() + timedelta(days=30),
+            expires_at__gt=timezone.now()
+        ).count()
+        
+        # Recent telemetry (last 10 readings)
+        recent_telemetry = Telemetry.objects.order_by('-time')[:10]
+        
+        # Devices with their metrics
+        devices = Device.objects.all()
+        devices_with_metrics = []
+        for device in devices:
+            metrics = (
+                Telemetry.objects
+                .filter(device_id=device.id)
+                .values_list('metric', flat=True)
+                .distinct()
+            )
+            devices_with_metrics.append({
+                'device_id': device.id,
+                'device_name': device.name,
+                'metrics': list(metrics)
+            })
+        
+        data = {
+            'total_devices': total_devices,
+            'active_devices': active_devices,
+            'mqtt_devices': mqtt_devices,
+            'http_devices': http_devices,
+            'certificates_expiring_soon': expiring_soon,
+            'recent_telemetry': TelemetrySerializer(recent_telemetry, many=True).data,
+            'devices_with_metrics': devices_with_metrics,
+        }
+        
+        serializer = DashboardOverviewSerializer(data)
+        return Response(serializer.data)
+
+
+class WeatherViewSet(viewsets.ViewSet):
+    """ViewSet for weather and air quality data."""
+    
+    @action(detail=False, methods=['get'])
+    def current(self, request):
+        """
+        Get current weather data by city name or coordinates.
+        
+        Query params:
+            - city: City name (e.g., "Skopje")
+            OR
+            - lat: Latitude
+            - lon: Longitude
+        """
+        city = request.query_params.get('city')
+        lat = request.query_params.get('lat')
+        lon = request.query_params.get('lon')
+        
+        try:
+            if city:
+                # Fetch by city name
+                weather_data = weather_client.get_weather_by_city(city)
+            elif lat and lon:
+                # Fetch by coordinates
+                latitude = float(lat)
+                longitude = float(lon)
+                raw_weather = weather_client.fetch_current_weather(latitude, longitude)
+                weather_data = weather_client.parse_weather_data(raw_weather)
+            else:
+                return Response(
+                    {'error': 'Either city or (lat, lon) parameters are required'},
+                    status=status.HTTP_400_BAD_REQUEST
+                )
+            
+            return Response(weather_data)
+        
+        except ValueError as e:
+            return Response(
+                {'error': str(e)},
+                status=status.HTTP_404_NOT_FOUND
+            )
+        except requests.RequestException as e:
+            return Response(
+                {'error': 'Failed to fetch weather data', 'details': str(e)},
+                status=status.HTTP_503_SERVICE_UNAVAILABLE
+            )
+    
+    @action(detail=False, methods=['get'])
+    def air_quality(self, request):
+        """
+        Get current air quality data for a city (Pulse.eco API).
+        
+        Query params:
+            - city: City name (e.g., "skopje", "bitola", "tetovo")
+        """
+        city = request.query_params.get('city')
+        
+        if not city:
+            return Response(
+                {'error': 'city parameter is required'},
+                status=status.HTTP_400_BAD_REQUEST
+            )
+        
+        try:
+            raw_data = weather_client.get_air_quality(city)
+            parsed_data = weather_client.parse_air_quality_data(raw_data, city)
+            return Response(parsed_data)
+        
+        except requests.HTTPError as e:
+            if e.response.status_code == 404:
+                return Response(
+                    {'error': f'City "{city}" not found or not supported by Pulse.eco'},
+                    status=status.HTTP_404_NOT_FOUND
+                )
+            return Response(
+                {'error': 'Failed to fetch air quality data', 'details': str(e)},
+                status=status.HTTP_503_SERVICE_UNAVAILABLE
+            )
+        except requests.RequestException as e:
+            return Response(
+                {'error': 'Failed to fetch air quality data', 'details': str(e)},
+                status=status.HTTP_503_SERVICE_UNAVAILABLE
+            )
+

iotDashboard/comfort_index.py

@@ -0,0 +1,300 @@
+"""
+Comfort Index Calculation Module
+
+Combines temperature, humidity, CO₂, noise, and air quality into a weighted comfort score.
+Score range: 0-100 (100 = optimal comfort)
+"""
+
+from typing import Dict, List, Optional, Tuple
+from dataclasses import dataclass
+from datetime import datetime
+
+
+@dataclass
+class ComfortMetrics:
+    """Raw environmental metrics for comfort calculation."""
+    temperature: Optional[float] = None
+    humidity: Optional[float] = None
+    co2: Optional[float] = None
+    noise: Optional[float] = None
+    pm25: Optional[float] = None
+    pm10: Optional[float] = None
+    light: Optional[float] = None
+    timestamp: Optional[datetime] = None
+
+
+@dataclass
+class ComfortScore:
+    """Comfort index results with component scores."""
+    overall_score: float  # 0-100
+    temperature_score: float
+    humidity_score: float
+    air_quality_score: float
+    acoustic_score: float
+    light_score: float
+    rating: str  # "Excellent", "Good", "Fair", "Poor", "Very Poor"
+    suggestions: List[str]
+
+class ComfortIndexCalculator:
+    """Calculate multi-factor comfort index from environmental sensors."""
+    
+    # Optimal ranges (comfort score = 100 at these values)
+    OPTIMAL_TEMP_RANGE = (20.0, 24.0)      # °C
+    OPTIMAL_HUMIDITY_RANGE = (40.0, 60.0)  # %
+    OPTIMAL_CO2_MAX = 800                   # ppm (< 1000 is good)
+    OPTIMAL_NOISE_MAX = 40                  # dB (office environment)
+    OPTIMAL_PM25_MAX = 12                   # μg/m³ (WHO guideline)
+    OPTIMAL_PM10_MAX = 20                   # μg/m³
+    OPTIMAL_LIGHT_RANGE = (300, 500)       # Lux (office work)
+    
+    # Weights for overall score (must sum to 1.0)
+    WEIGHTS = {
+        'temperature': 0.25,
+        'humidity': 0.15,
+        'air_quality': 0.30,
+        'acoustic': 0.15,
+        'light': 0.15,
+    }
+    
+    @staticmethod
+    def calculate_temperature_score(temp: float) -> Tuple[float, List[str]]:
+        """Score temperature comfort (0-100)."""
+        suggestions = []
+        optimal_min, optimal_max = ComfortIndexCalculator.OPTIMAL_TEMP_RANGE
+        
+        if optimal_min <= temp <= optimal_max:
+            score = 100.0
+        elif temp < optimal_min:
+            deviation = optimal_min - temp
+            score = max(0, 100 - (deviation * 10))  # -10 points per degree below
+            if deviation > 2:
+                suggestions.append(f"Temperature too cold ({temp:.1f}°C). Increase heating to {optimal_min}-{optimal_max}°C")
+        else:
+            deviation = temp - optimal_max
+            score = max(0, 100 - (deviation * 10))  # -10 points per degree above
+            if deviation > 2:
+                suggestions.append(f"Temperature too warm ({temp:.1f}°C). Increase cooling to {optimal_min}-{optimal_max}°C")
+        
+        return score, suggestions
+    
+    @staticmethod
+    def calculate_humidity_score(humidity: float) -> Tuple[float, List[str]]:
+        """Score humidity comfort (0-100)."""
+        suggestions = []
+        optimal_min, optimal_max = ComfortIndexCalculator.OPTIMAL_HUMIDITY_RANGE
+        
+        if optimal_min <= humidity <= optimal_max:
+            score = 100.0
+        elif humidity < optimal_min:
+            # Too dry
+            deviation = optimal_min - humidity
+            score = max(0, 100 - (deviation * 2))  # -2 points per % below
+            if deviation > 10:
+                suggestions.append(f"Air too dry ({humidity:.1f}%). Use humidifier to reach {optimal_min}-{optimal_max}%")
+        else:
+            # Too humid
+            deviation = humidity - optimal_max
+            score = max(0, 100 - (deviation * 2))  # -2 points per % above
+            if deviation > 10:
+                suggestions.append(f"Air too humid ({humidity:.1f}%). Use dehumidifier to reach {optimal_min}-{optimal_max}%")
+        
+        return score, suggestions
+    
+    @staticmethod
+    def calculate_air_quality_score(co2: Optional[float], pm25: Optional[float], pm10: Optional[float]) -> Tuple[float, List[str]]:
+        """Score air quality based on CO₂ and particulate matter (0-100)."""
+        suggestions = []
+        scores = []
+        
+        # CO₂ score
+        if co2 is not None:
+            if co2 <= ComfortIndexCalculator.OPTIMAL_CO2_MAX:
+                co2_score = 100.0
+            elif co2 <= 1000:
+                # Acceptable range (800-1000 ppm)
+                co2_score = 100 - ((co2 - 800) / 2)  # -0.5 points per ppm
+            else:
+                # Poor air quality
+                co2_score = max(0, 50 - ((co2 - 1000) / 20))  # Drops to 0 at 2000 ppm
+                if co2 > 1500:
+                    suggestions.append(f"CO₂ level very high ({co2:.0f} ppm). Increase ventilation immediately")
+                else:
+                    suggestions.append(f"CO₂ level elevated ({co2:.0f} ppm). Improve ventilation")
+            scores.append(co2_score)
+        
+        # PM2.5 score
+        if pm25 is not None:
+            if pm25 <= ComfortIndexCalculator.OPTIMAL_PM25_MAX:
+                pm25_score = 100.0
+            elif pm25 <= 35.4:
+                pm25_score = 100 - ((pm25 - 12) / 0.234)
+            else:
+                pm25_score = 0
+                suggestions.append(f"PM2.5 unhealthy ({pm25:.1f} μg/m³). Use air purifier and avoid outdoor air")
+            scores.append(pm25_score)
+        
+        # PM10 score
+        if pm10 is not None:
+            if pm10 <= ComfortIndexCalculator.OPTIMAL_PM10_MAX:
+                pm10_score = 100.0
+            elif pm10 <= 50:  # Acceptable
+                pm10_score = 100 - ((pm10 - 20) / 0.3)
+            else:
+                pm10_score = max(0, 50 - (pm10 - 50))
+                if pm10 > 100:
+                    suggestions.append(f"PM10 very high ({pm10:.1f} μg/m³). Close windows and use filtration")
+            scores.append(pm10_score)
+        
+        score = sum(scores) / len(scores) if scores else 50.0
+        return score, suggestions
+    
+    @staticmethod
+    def calculate_acoustic_score(noise: float) -> Tuple[float, List[str]]:
+        """Score acoustic comfort based on noise level (0-100)."""
+        suggestions = []
+        
+        if noise <= ComfortIndexCalculator.OPTIMAL_NOISE_MAX:
+            score = 100.0
+        elif noise <= 55:
+            score = 100 - ((noise - 40) * 3)
+        elif noise <= 70:  # Noisy
+            score = max(0, 55 - ((noise - 55) * 2))
+            suggestions.append(f"Noise level high ({noise:.1f} dB). Consider noise-canceling or quieter environment")
+        else:  # Very noisy
+            score = 0
+            suggestions.append(f"Noise level very high ({noise:.1f} dB). Immediate action needed for hearing protection")
+        
+        return score, suggestions
+    
+    @staticmethod
+    def calculate_light_score(light: float) -> Tuple[float, List[str]]:
+        """Score lighting comfort (0-100)."""
+        suggestions = []
+        optimal_min, optimal_max = ComfortIndexCalculator.OPTIMAL_LIGHT_RANGE
+        
+        if optimal_min <= light <= optimal_max:
+            score = 100.0
+        elif light < optimal_min:
+            # Too dark
+            if light < 100:
+                score = 0
+                suggestions.append(f"Lighting very dim ({light:.0f} lux). Increase to {optimal_min}-{optimal_max} lux")
+            else:
+                score = (light / optimal_min) * 100
+                suggestions.append(f"Lighting insufficient ({light:.0f} lux). Increase to {optimal_min}-{optimal_max} lux")
+        else:
+            # Too bright
+            if light > 1000:
+                score = max(0, 100 - ((light - 1000) / 10))
+                suggestions.append(f"Lighting very bright ({light:.0f} lux). May cause glare. Reduce to {optimal_min}-{optimal_max} lux")
+            else:
+                score = 100 - ((light - optimal_max) / 5)
+        
+        return score, suggestions
+    
+    @staticmethod
+    def get_rating(score: float) -> str:
+        """Convert numeric score to rating."""
+        if score >= 90:
+            return "Excellent"
+        elif score >= 75:
+            return "Good"
+        elif score >= 60:
+            return "Fair"
+        elif score >= 40:
+            return "Poor"
+        else:
+            return "Very Poor"
+    
+    @classmethod
+    def calculate(cls, metrics: ComfortMetrics) -> ComfortScore:
+        """
+        Calculate overall comfort index from environmental metrics.
+        
+        Args:
+            metrics: ComfortMetrics with sensor readings
+            
+        Returns:
+            ComfortScore with overall score and component breakdowns
+        """
+        all_suggestions = []
+        component_scores = {}
+        
+        # Temperature
+        if metrics.temperature is not None:
+            temp_score, temp_suggestions = cls.calculate_temperature_score(metrics.temperature)
+            component_scores['temperature'] = temp_score
+            all_suggestions.extend(temp_suggestions)
+        else:
+            component_scores['temperature'] = 50.0  # 
+        
+        # Humidity
+        if metrics.humidity is not None:
+            humidity_score, humidity_suggestions = cls.calculate_humidity_score(metrics.humidity)
+            component_scores['humidity'] = humidity_score
+            all_suggestions.extend(humidity_suggestions)
+        else:
+            component_scores['humidity'] = 50.0
+        
+        # Air Quality (CO₂ + PM)
+        air_score, air_suggestions = cls.calculate_air_quality_score(
+            metrics.co2, metrics.pm25, metrics.pm10
+        )
+        component_scores['air_quality'] = air_score
+        all_suggestions.extend(air_suggestions)
+        
+        # Acoustic
+        if metrics.noise is not None:
+            acoustic_score, acoustic_suggestions = cls.calculate_acoustic_score(metrics.noise)
+            component_scores['acoustic'] = acoustic_score
+            all_suggestions.extend(acoustic_suggestions)
+        else:
+            component_scores['acoustic'] = 50.0
+        
+        # Light
+        if metrics.light is not None:
+            light_score, light_suggestions = cls.calculate_light_score(metrics.light)
+            component_scores['light'] = light_score
+            all_suggestions.extend(light_suggestions)
+        else:
+            component_scores['light'] = 50.0
+        
+        # Calculate weighted overall score
+        overall = sum(
+            component_scores[key] * cls.WEIGHTS[key]
+            for key in cls.WEIGHTS.keys()
+        )
+        
+        return ComfortScore(
+            overall_score=round(overall, 1),
+            temperature_score=round(component_scores['temperature'], 1),
+            humidity_score=round(component_scores['humidity'], 1),
+            air_quality_score=round(component_scores['air_quality'], 1),
+            acoustic_score=round(component_scores['acoustic'], 1),
+            light_score=round(component_scores['light'], 1),
+            rating=cls.get_rating(overall),
+            suggestions=all_suggestions,
+        )
+
+
+def calculate_comfort_index_from_telemetry(telemetry_data: Dict[str, float]) -> ComfortScore:
+    """
+    Convenience function to calculate comfort index from telemetry dictionary.
+    
+    Args:
+        telemetry_data: Dict with metric names as keys, e.g. {"temperature": 22.5, "humidity": 45}
+        
+    Returns:
+        ComfortScore
+    """
+    metrics = ComfortMetrics(
+        temperature=telemetry_data.get('temperature'),
+        humidity=telemetry_data.get('humidity'),
+        co2=telemetry_data.get('co2') or telemetry_data.get('CO2'),
+        noise=telemetry_data.get('noise') or telemetry_data.get('sound'),
+        pm25=telemetry_data.get('pm2.5') or telemetry_data.get('PM2.5'),
+        pm10=telemetry_data.get('pm10') or telemetry_data.get('PM10'),
+        light=telemetry_data.get('light') or telemetry_data.get('lux'),
+    )
+    
+    return ComfortIndexCalculator.calculate(metrics)

iotDashboard/device_manager_client.py

@@ -16,6 +16,7 @@ class DeviceRegistrationResponse:
     certificate_pem: Optional[str] = None
     private_key_pem: Optional[str] = None
     expires_at: Optional[datetime] = None
+    onboarding_token: Optional[str] = None  # One-time token for secure onboarding
     credential_id: Optional[str] = None
     api_key: Optional[str] = None
     webhook_secret: Optional[str] = None
@@ -92,6 +93,7 @@ class DeviceManagerClient:
             certificate_pem=data.get("certificate_pem"),
             private_key_pem=data.get("private_key_pem"),
             expires_at=datetime.fromisoformat(data["expires_at"].replace("Z", "+00:00")) if data.get("expires_at") else None,
+            onboarding_token=data.get("onboarding_token"),
             credential_id=data.get("credential_id"),
             api_key=data.get("api_key"),
             webhook_secret=data.get("webhook_secret"),
@@ -157,6 +159,26 @@ class DeviceManagerClient:
         response = self._request("GET", "/crl")
         return response.text
 
+    def get_device_credentials(self, device_id: str, token: str) -> DeviceRegistrationResponse:
+        """Fetch device credentials using one-time onboarding token."""
+        response = self._request("GET", f"/devices/{device_id}/credentials", params={"token": token})
+        data = response.json()
+        
+        # DeviceCertificateResponse from FastAPI doesn't include protocol
+        # We'll use "mqtt" as default since credentials endpoint is only for MQTT devices
+        return DeviceRegistrationResponse(
+            device_id=data["device_id"],
+            protocol="mqtt",  # Credentials endpoint is only for MQTT devices
+            certificate_id=data.get("certificate_id"),
+            ca_certificate_pem=data.get("ca_certificate_pem"),
+            certificate_pem=data.get("certificate_pem"),
+            private_key_pem=data.get("private_key_pem"),
+            expires_at=datetime.fromisoformat(data["expires_at"].replace("Z", "+00:00")) if data.get("expires_at") else None,
+            credential_id=None,
+            api_key=None,
+            webhook_secret=None,
+        )
+
     def health_check(self) -> bool:
         try:
             response = self.session.get(f"{self.base_url}/docs", timeout=2)

iotDashboard/gpt_service_client.py

@@ -0,0 +1,267 @@
+"""
+Client for GPT Service microservice.
+
+Handles communication between Django and the GPT analysis service.
+"""
+
+import httpx
+import logging
+from typing import List, Dict, Any, Optional, Literal
+from django.conf import settings
+
+logger = logging.getLogger(__name__)
+
+
+class GPTServiceError(Exception):
+    """Exception raised when GPT service request fails."""
+    
+    def __init__(self, message: str, status_code: Optional[int] = None, details: Optional[Dict] = None):
+        self.message = message
+        self.status_code = status_code
+        self.details = details or {}
+        super().__init__(self.message)
+
+
+class GPTServiceClient:
+    """Client for interacting with the GPT analysis microservice."""
+
+    def __init__(self, base_url: Optional[str] = None, timeout: float = 30.0):
+        """
+        Initialize GPT service client.
+        
+        Args:
+            base_url: Base URL of GPT service (default: from settings or http://localhost:8001)
+            timeout: Request timeout in seconds
+        """
+        self.base_url = base_url or getattr(settings, 'GPT_SERVICE_URL', 'http://localhost:8001')
+        self.timeout = timeout
+        self.client = httpx.AsyncClient(base_url=self.base_url, timeout=timeout)
+        logger.info(f"Initialized GPTServiceClient with base_url={self.base_url}")
+
+    async def health_check(self) -> Dict[str, Any]:
+        """
+        Check if GPT service is healthy.
+        
+        Returns:
+            Dict with status information
+            
+        Raises:
+            httpx.HTTPError: If service is unreachable
+        """
+        try:
+            response = await self.client.get("/health")
+            response.raise_for_status()
+            return response.json()
+        except Exception as e:
+            logger.error(f"GPT service health check failed: {e}")
+            raise
+
+    async def analyze_telemetry(
+        self,
+        telemetry_data: List[Dict[str, Any]],
+        device_info: Optional[Dict[str, Any]] = None,
+        prompt_type: Literal["anomaly_detection", "trend_summary", "custom"] = "trend_summary",
+        custom_prompt: Optional[str] = None
+    ) -> Dict[str, Any]:
+        """
+        Analyze telemetry data using GPT service.
+        
+        Args:
+            telemetry_data: List of telemetry data points with keys:
+                - device_id: str
+                - metric: str
+                - value: float
+                - timestamp: str (ISO format)
+            device_info: Optional device metadata (name, location, etc.)
+            prompt_type: Type of analysis to perform
+            custom_prompt: Custom prompt for 'custom' type
+            
+        Returns:
+            Dict containing:
+                - analysis: str (AI-generated analysis)
+                - prompt_type: str
+                - data_points_analyzed: int
+                
+        Raises:
+            ValueError: If telemetry_data is empty
+            httpx.HTTPError: If service request fails
+        """
+        if not telemetry_data:
+            raise ValueError("telemetry_data cannot be empty")
+
+        payload = {
+            "telemetry_data": telemetry_data,
+            "device_info": device_info or {},
+            "prompt_type": prompt_type,
+        }
+
+        if custom_prompt:
+            payload["custom_prompt"] = custom_prompt
+
+        try:
+            logger.info(
+                f"Requesting {prompt_type} analysis for {len(telemetry_data)} data points"
+            )
+            response = await self.client.post("/analyze", json=payload)
+            response.raise_for_status()
+            result = response.json()
+            logger.info(
+                f"Analysis completed: {result.get('data_points_analyzed')} points analyzed"
+            )
+            return result
+        except httpx.HTTPStatusError as e:
+            error_detail = e.response.text
+            logger.error(
+                f"GPT service returned error {e.response.status_code}: {error_detail}"
+            )
+            raise GPTServiceError(
+                message=f"GPT service error: {error_detail}",
+                status_code=e.response.status_code,
+                details={"response": error_detail}
+            )
+        except httpx.RequestError as e:
+            logger.error(f"Failed to connect to GPT service: {e}")
+            raise GPTServiceError(
+                message=f"GPT service unavailable: {str(e)}",
+                status_code=503,
+                details={"error": str(e)}
+            )
+        except Exception as e:
+            logger.error(f"Failed to analyze telemetry: {e}")
+            raise GPTServiceError(
+                message=f"Analysis failed: {str(e)}",
+                details={"error": str(e)}
+            )
+
+    async def detect_anomalies(
+        self,
+        telemetry_data: List[Dict[str, Any]],
+        device_info: Optional[Dict[str, Any]] = None
+    ) -> Dict[str, Any]:
+        """
+        Detect anomalies in telemetry data.
+        
+        Convenience method for anomaly_detection analysis.
+        
+        Returns:
+            Dict with analysis containing:
+                - status: normal|warning|critical
+                - summary: Brief overview
+                - anomalies: List of detected anomalies
+                - impacts: List of potential impacts
+                - actions: List of recommended actions
+        """
+        result = await self.analyze_telemetry(
+            telemetry_data=telemetry_data,
+            device_info=device_info,
+            prompt_type="anomaly_detection"
+        )
+        return result
+
+    async def summarize_trends(
+        self,
+        telemetry_data: List[Dict[str, Any]],
+        device_info: Optional[Dict[str, Any]] = None
+    ) -> Dict[str, Any]:
+        """
+        Summarize trends in telemetry data.
+        
+        Convenience method for trend_summary analysis.
+        
+        Returns:
+            Dict with analysis containing:
+                - status: excellent|good|fair|poor
+                - summary: Brief overview
+                - trends: List of metric trends
+                - comfort_score: Overall comfort rating
+                - patterns: Identified patterns
+                - recommendations: Suggested actions
+        """
+        result = await self.analyze_telemetry(
+            telemetry_data=telemetry_data,
+            device_info=device_info,
+            prompt_type="trend_summary"
+        )
+        return result
+
+    async def close(self):
+        """Close the HTTP client connection."""
+        await self.client.aclose()
+
+    async def __aenter__(self):
+        """Async context manager entry."""
+        return self
+
+    async def __aexit__(self, exc_type, exc_val, exc_tb):
+        """Async context manager exit."""
+        await self.close()
+
+
+def format_telemetry_for_gpt(queryset, device_id: Optional[str] = None) -> List[Dict[str, Any]]:
+    """
+    Format Django Telemetry queryset for GPT service.
+    
+    Args:
+        queryset: Django queryset of Telemetry objects
+        device_id: Optional device_id to include in each point
+        
+    Returns:
+        List of dicts formatted for GPT service
+    """
+    data = []
+    for point in queryset:
+        data.append({
+            "device_id": device_id or point.device_id,
+            "metric": point.metric,
+            "value": float(point.value),
+            "timestamp": point.time.isoformat(),
+        })
+    return data
+
+
+_client_instance = None
+
+
+def get_gpt_client() -> GPTServiceClient:
+    """
+    Get or create singleton GPT service client instance.
+    
+    Returns:
+        GPTServiceClient instance
+    """
+    global _client_instance
+    if _client_instance is None:
+        _client_instance = GPTServiceClient()
+    return _client_instance
+
+
+async def analyze_telemetry(
+    telemetry_data: List[Dict[str, Any]],
+    device_info: Optional[Dict[str, Any]] = None,
+    prompt_type: Literal["anomaly_detection", "trend_summary", "custom"] = "trend_summary",
+    custom_prompt: Optional[str] = None
+) -> Dict[str, Any]:
+    """
+    Module-level function to analyze telemetry data.
+    
+    Uses singleton client instance. Convenience wrapper for Django views.
+    
+    Args:
+        telemetry_data: List of telemetry data points
+        device_info: Optional device metadata
+        prompt_type: Type of analysis to perform
+        custom_prompt: Custom prompt for 'custom' type
+        
+    Returns:
+        Dict containing analysis results
+        
+    Raises:
+        GPTServiceError: If analysis fails
+    """
+    client = get_gpt_client()
+    return await client.analyze_telemetry(
+        telemetry_data=telemetry_data,
+        device_info=device_info,
+        prompt_type=prompt_type,
+        custom_prompt=custom_prompt
+    )

iotDashboard/models.py

@@ -152,12 +152,15 @@ class DeviceCredential(models.Model):
 
 
 class Telemetry(models.Model):
-    """Time-series telemetry data from devices."""
+    """Time-series telemetry data from devices (TimescaleDB hypertable).
+    
+    Note: This table has a composite primary key (time, device_id, metric).
+    Since Django doesn't support composite PKs well, we mark time as the PK
+    but queries should filter by (time, device_id, metric) together.
+    """
 
-    time = models.DateTimeField()
-    device = models.ForeignKey(
-        Device, on_delete=models.CASCADE, related_name="telemetry", db_column="device_id"
-    )
+    time = models.DateTimeField(primary_key=True)
+    device_id = models.CharField(max_length=255, db_column="device_id")
     metric = models.CharField(max_length=255)
     value = models.FloatField()
     unit = models.CharField(max_length=50, null=True, blank=True)
@@ -165,10 +168,9 @@ class Telemetry(models.Model):
     class Meta:
         managed = False
         db_table = "telemetry"
-        unique_together = [["time", "device", "metric"]]
-        indexes = [
-            models.Index(fields=["device", "time"]),
-        ]
+        # Note: The actual database has composite PK (time, device_id, metric)
+        # Django limitation: can only mark one field as PK
+        unique_together = [["time", "device_id", "metric"]]
 
     def __str__(self):
         return f"{self.device.name} - {self.metric}: {self.value} at {self.time}"

iotDashboard/settings.py

@@ -33,11 +33,12 @@ POSTGRES_USER = os.getenv("POSTGRES_USER")
 POSTGRES_DB = os.getenv("POSTGRES_DB")
 POSTGRES_PASSWORD = os.getenv("POSTGRES_PASSWORD")
 
+GPT_SERVICE_URL = os.getenv("GPT_SERVICE_URL", "http://localhost:8001")
+
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
-
+ALLOWED_HOSTS = ['*']
 
 # Application definition
 
@@ -48,6 +49,7 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "rest_framework",
     "iotDashboard",
 ]
 
@@ -139,3 +141,13 @@ STATIC_URL = "static/"
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
+# Django REST Framework
+# https://www.django-rest-framework.org/api-guide/settings/
+REST_FRAMEWORK = {
+    'DEFAULT_RENDERER_CLASSES': [
+        'rest_framework.renderers.JSONRenderer',
+    ],
+    'DEFAULT_PARSER_CLASSES': [
+        'rest_framework.parsers.JSONParser',
+    ],
+}

iotDashboard/urls.py

@@ -16,12 +16,15 @@ Including another URLconf
 """
 
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
 from iotDashboard import views
 
 urlpatterns = [
     path("admin/", admin.site.urls),
     
+    # REST API
+    path("api/", include("iotDashboard.api.urls")),
+    
     # Main dashboard
     path("", views.chart, name="index"),
     path("chart/", views.chart, name="chart"),

iotDashboard/views.py

@@ -261,3 +261,7 @@ def devices_api(request):
     """JSON API endpoint for devices."""
     devices = list(Device.objects.all().values("id", "name", "protocol", "location"))
     return JsonResponse(devices, safe=False)
+
+def analyze_data(request):
+    """Calling the GPT Service to analyze the data."""
+    

iotDashboard/weather_client.py

@@ -0,0 +1,226 @@
+"""
+Weather and Air Quality API clients.
+
+Weather data: Open-Meteo (https://open-meteo.com)
+Air Quality data: Pulse.eco (https://pulse.eco)
+"""
+import requests
+from typing import Optional
+
+
+def fetch_current_weather(latitude: float, longitude: float) -> dict:
+    """
+    Fetch current weather data using Open-Meteo API (no API key required).
+    
+    Args:
+        latitude: Latitude coordinate
+        longitude: Longitude coordinate
+    
+    Returns:
+        dict: Current weather data
+    """
+    base_url = "https://api.open-meteo.com/v1/forecast"
+    params = {
+        "latitude": latitude,
+        "longitude": longitude,
+        "current": "temperature_2m,relative_humidity_2m,apparent_temperature,precipitation,rain,weather_code,cloud_cover,wind_speed_10m,wind_direction_10m",
+        "timezone": "auto",
+    }
+    response = requests.get(base_url, params=params, timeout=10)
+    response.raise_for_status()
+    return response.json()
+
+
+def parse_weather_data(weather_data: dict, location_name: Optional[str] = None) -> dict:
+    """
+    Parse relevant weather information from Open-Meteo API response.
+    
+    Args:
+        weather_data: Raw API response from Open-Meteo
+        location_name: Optional human-readable location name
+    
+    Returns:
+        dict: Parsed weather data with standardized fields
+    """
+    current = weather_data.get("current", {})
+    
+    # Weather code to description mapping (WMO Weather interpretation codes)
+    weather_codes = {
+        0: "Clear sky",
+        1: "Mainly clear",
+        2: "Partly cloudy",
+        3: "Overcast",
+        45: "Foggy",
+        48: "Depositing rime fog",
+        51: "Light drizzle",
+        53: "Moderate drizzle",
+        55: "Dense drizzle",
+        61: "Slight rain",
+        63: "Moderate rain",
+        65: "Heavy rain",
+        71: "Slight snow",
+        73: "Moderate snow",
+        75: "Heavy snow",
+        77: "Snow grains",
+        80: "Slight rain showers",
+        81: "Moderate rain showers",
+        82: "Violent rain showers",
+        85: "Slight snow showers",
+        86: "Heavy snow showers",
+        95: "Thunderstorm",
+        96: "Thunderstorm with slight hail",
+        99: "Thunderstorm with heavy hail",
+    }
+    
+    weather_code = current.get("weather_code", 0)
+    
+    parsed_data = {
+        "location": location_name or f"({weather_data.get('latitude')}, {weather_data.get('longitude')})",
+        "temperature": current.get("temperature_2m"),
+        "apparent_temperature": current.get("apparent_temperature"),
+        "humidity": current.get("relative_humidity_2m"),
+        "weather_description": weather_codes.get(weather_code, "Unknown"),
+        "weather_code": weather_code,
+        "precipitation": current.get("precipitation"),
+        "rain": current.get("rain"),
+        "cloud_cover": current.get("cloud_cover"),
+        "wind_speed": current.get("wind_speed_10m"),
+        "wind_direction": current.get("wind_direction_10m"),
+        "time": current.get("time"),
+        "timezone": weather_data.get("timezone"),
+    }
+    return parsed_data
+
+
+def get_air_quality(city: str) -> dict:
+    """
+    Fetch current air quality data from Pulse.eco API.
+    
+    Pulse.eco provides air quality data for cities in North Macedonia and other regions.
+    No API key required for public data.
+    
+    Args:
+        city: City name (e.g., 'skopje', 'bitola', 'tetovo')
+    
+    Returns:
+        dict: Current air quality measurements
+        
+    Raises:
+        requests.HTTPError: If city not found or API error
+    """
+    base_url = f"https://{city.lower()}.pulse.eco/rest/current"
+    
+    response = requests.get(base_url, timeout=10)
+    response.raise_for_status()
+    return response.json()
+
+
+def parse_air_quality_data(air_quality_data: list, city: str) -> dict:
+    """
+    Parse air quality data from Pulse.eco API response.
+    
+    Args:
+        air_quality_data: List of sensor measurements from Pulse.eco
+        city: City name
+    
+    Returns:
+        dict: Aggregated air quality data with averages per pollutant
+    """
+    if not air_quality_data:
+        return {
+            "city": city,
+            "measurements": {},
+            "status": "No data available"
+        }
+    
+    # Aggregate measurements by type
+    pollutants = {}
+    for measurement in air_quality_data:
+        pollutant_type = measurement.get("type")
+        value = measurement.get("value")
+        
+        if pollutant_type and value is not None:
+            # Convert value to float (API might return string)
+            try:
+                value_float = float(value)
+                if pollutant_type not in pollutants:
+                    pollutants[pollutant_type] = []
+                pollutants[pollutant_type].append(value_float)
+            except (ValueError, TypeError):
+                # Skip invalid values
+                continue
+    
+    # Calculate averages
+    averages = {}
+    for pollutant, values in pollutants.items():
+        averages[pollutant] = {
+            "average": sum(values) / len(values),
+            "min": min(values),
+            "max": max(values),
+            "count": len(values),
+        }
+    
+    # Determine overall AQI status based on PM10 (most common metric)
+    pm10_avg = averages.get("pm10", {}).get("average")
+    if pm10_avg is not None:
+        if pm10_avg <= 20:
+            status = "Good"
+        elif pm10_avg <= 40:
+            status = "Moderate"
+        elif pm10_avg <= 50:
+            status = "Unhealthy for Sensitive Groups"
+        elif pm10_avg <= 100:
+            status = "Unhealthy"
+        elif pm10_avg <= 150:
+            status = "Very Unhealthy"
+        else:
+            status = "Hazardous"
+    else:
+        status = "Unknown"
+    
+    return {
+        "city": city,
+        "measurements": averages,
+        "status": status,
+        "timestamp": air_quality_data[0].get("stamp") if air_quality_data else None,
+        "sensor_count": len(air_quality_data),
+    }
+
+
+def get_weather_by_city(city: str) -> dict:
+    """
+    Fetch weather data by city name (geocodes city first).
+    
+    Uses Open-Meteo geocoding API to convert city name to coordinates,
+    then fetches weather data.
+    
+    Args:
+        city: City name (e.g., "Skopje", "Berlin")
+    
+    Returns:
+        dict: Parsed weather data
+    """
+    # Geocode city name to coordinates
+    geocode_url = "https://geocoding-api.open-meteo.com/v1/search"
+    geocode_params = {
+        "name": city,
+        "count": 1,
+        "language": "en",
+        "format": "json",
+    }
+    
+    geocode_response = requests.get(geocode_url, params=geocode_params, timeout=10)
+    geocode_response.raise_for_status()
+    geocode_data = geocode_response.json()
+    
+    if not geocode_data.get("results"):
+        raise ValueError(f"City '{city}' not found")
+    
+    location = geocode_data["results"][0]
+    latitude = location["latitude"]
+    longitude = location["longitude"]
+    location_name = location.get("name", city)
+    
+    # Fetch weather data
+    weather_data = fetch_current_weather(latitude, longitude)
+    return parse_weather_data(weather_data, location_name)

pyproject.toml

@@ -7,6 +7,10 @@ requires-python = ">=3.13"
 dependencies = [
     "alembic>=1.17.0",
     "django>=5.2.7",
+    "django-cors-headers>=4.9.0",
+    "django-rest>=0.8.7",
+    "djangorestframework>=3.16.1",
+    "djangorestframework-simplejwt>=5.5.1",
     "openai>=2.6.1",
     "paho-mqtt>=2.1.0",
     "psycopg2-binary>=2.9.11",

scripts/README.md

@@ -0,0 +1,248 @@
+# MQTT Data Generator
+
+A Python script that simulates realistic environmental sensor data and publishes it to your MQTT broker for testing the IoT Dashboard.
+
+## Features
+
+✅ **8 Environmental Metrics**: Temperature, Humidity, CO2, Pressure, Light, Noise, PM2.5, VOC  
+✅ **Realistic Patterns**: Daily cycles (office hours, night time)  
+✅ **Random Walk**: Natural sensor drift and variations  
+✅ **Anomaly Injection**: 5% chance of anomalies for testing alerts  
+✅ **Self-Correcting**: Values drift back toward optimal ranges (simulates HVAC)  
+✅ **TLS/mTLS Support**: Secure connections with certificates  
+
+## Installation
+
+```bash
+# Install dependencies
+pip install paho-mqtt
+
+# Or using uv
+uv pip install paho-mqtt
+```
+
+## Quick Start
+
+### 1. Basic Usage (Localhost, No TLS)
+
+```bash
+python scripts/mqtt_data_generator.py --device-id office-sensor-01 --interval 5
+```
+
+### 2. With Specific Metrics
+
+```bash
+python scripts/mqtt_data_generator.py \
+  --device-id lab-sensor \
+  --metrics temperature humidity co2 \
+  --interval 10
+```
+
+### 3. With TLS (Port 8883)
+
+```bash
+python scripts/mqtt_data_generator.py \
+  --device-id secure-sensor \
+  --broker localhost \
+  --port 8883 \
+  --tls \
+  --ca-cert infrastructure/mosquitto/certs/ca.crt \
+  --client-cert path/to/device.crt \
+  --client-key path/to/device.key \
+  --interval 5
+```
+
+### 4. Limited Duration (Testing)
+
+```bash
+# Run for 5 minutes
+python scripts/mqtt_data_generator.py \
+  --device-id test-sensor \
+  --duration 300 \
+  --interval 2
+```
+
+## Command Line Arguments
+
+| Argument | Required | Default | Description |
+|----------|----------|---------|-------------|
+| `--broker` | No | localhost | MQTT broker hostname |
+| `--port` | No | 1883 | MQTT broker port (8883 for TLS) |
+| `--device-id` | **Yes** | - | Device ID for MQTT topics |
+| `--metrics` | No | all | Specific metrics to publish |
+| `--interval` | No | 5 | Publish interval in seconds |
+| `--duration` | No | 0 | Run duration in seconds (0 = infinite) |
+| `--tls` | No | False | Enable TLS/SSL encryption |
+| `--ca-cert` | No | - | Path to CA certificate |
+| `--client-cert` | No | - | Path to client certificate (mTLS) |
+| `--client-key` | No | - | Path to client private key (mTLS) |
+
+## Available Metrics
+
+All metrics follow the standards in `services/gpt_service/METRICS_REFERENCE.md`:
+
+- **temperature** - Indoor temperature (15-28°C)
+- **humidity** - Relative humidity (20-70%)
+- **co2** - Carbon dioxide concentration (400-1500 ppm)
+- **pressure** - Atmospheric pressure (1000-1030 hPa)
+- **light** - Illuminance (200-1000 lux)
+- **noise** - Sound level (30-70 dB)
+- **pm25** - Fine particulate matter (0-50 µg/m³)
+- **voc** - Volatile organic compounds (0-500 ppb)
+
+## MQTT Topic Format
+
+Published to standard format: `devices/{device_id}/{metric}`
+
+Examples:
+- `devices/office-sensor-01/temperature`
+- `devices/office-sensor-01/humidity`
+- `devices/lab-sensor/co2`
+
+## Data Patterns
+
+### Daily Cycles
+- **Business hours (9-17)**: Higher CO2, temperature, noise
+- **Night time (22-6)**: Lower light, CO2, noise
+- **All day**: Natural variations within ranges
+
+### Realistic Behavior
+- **Random walk**: Small incremental changes
+- **Self-correcting**: HVAC-like drift toward optimal ranges
+- **Anomalies**: 5% chance of spikes/drops for alert testing
+
+### Example Values
+
+```
+[14:23:45] Iteration 1
+  📊 temperature: 21.34 °C -> devices/office-sensor-01/temperature
+  📊 humidity: 45.67 % -> devices/office-sensor-01/humidity
+  📊 co2: 678.0 ppm -> devices/office-sensor-01/co2
+  📊 pressure: 1015.23 hPa -> devices/office-sensor-01/pressure
+  📊 light: 456.0 lux -> devices/office-sensor-01/light
+  📊 noise: 42.5 dB -> devices/office-sensor-01/noise
+  📊 pm25: 8.3 µg/m³ -> devices/office-sensor-01/pm25
+  📊 voc: 120.0 ppb -> devices/office-sensor-01/voc
+```
+
+## Multi-Device Simulation
+
+Run multiple instances with different device IDs:
+
+```bash
+# Terminal 1 - Office sensor
+python scripts/mqtt_data_generator.py --device-id office-01 &
+
+# Terminal 2 - Lab sensor
+python scripts/mqtt_data_generator.py --device-id lab-01 &
+
+# Terminal 3 - Warehouse sensor
+python scripts/mqtt_data_generator.py --device-id warehouse-01 &
+```
+
+## Testing Scenarios
+
+### Normal Operations
+```bash
+python scripts/mqtt_data_generator.py \
+  --device-id normal-sensor \
+  --interval 5
+```
+
+### High-Frequency Monitoring
+```bash
+python scripts/mqtt_data_generator.py \
+  --device-id fast-sensor \
+  --interval 1
+```
+
+### Limited Metrics (CO2 monitoring)
+```bash
+python scripts/mqtt_data_generator.py \
+  --device-id co2-monitor \
+  --metrics co2 temperature humidity \
+  --interval 10
+```
+
+## Integration with IoT Dashboard
+
+1. **Register device** (if using device_manager):
+```bash
+curl -X POST http://localhost:8000/devices/register \
+  -H "Content-Type: application/json" \
+  -d '{"name":"Office Sensor","location":"Building A - Floor 2"}'
+```
+
+2. **Start data generator** with the device ID:
+```bash
+python scripts/mqtt_data_generator.py --device-id <device_id>
+```
+
+3. **View in dashboard**: Data will appear in the frontend automatically
+
+4. **Test AI analysis**: Use the AI Insights widget to analyze patterns
+
+## Troubleshooting
+
+### Connection Refused
+- Check MQTT broker is running: `docker compose -f infrastructure/compose.yml ps`
+- Verify port: 1883 (plain) or 8883 (TLS)
+
+### TLS Certificate Errors
+- Ensure CA certificate path is correct
+- For mTLS, verify client cert/key match device registration
+- Check certificate hasn't expired
+
+### No Data in Dashboard
+- Verify mqtt_ingestion service is running
+- Check Redis stream: `redis-cli XLEN mqtt:ingestion`
+- Verify db_write service is running
+- Check device_id matches registered device
+
+### High CPU Usage
+- Increase `--interval` value
+- Reduce number of metrics
+- Run fewer instances
+
+## Performance
+
+- **CPU**: ~1-2% per instance at 5s interval
+- **Memory**: ~20MB per instance
+- **Network**: ~100 bytes per metric per publish
+- **Recommended**: Max 10 instances on a single machine
+
+## Example Output
+
+```
+============================================================
+🌡️  MQTT Environmental Sensor Data Generator
+============================================================
+Device ID: office-sensor-01
+Metrics: temperature, humidity, co2, pressure, light, noise, pm25, voc
+Interval: 5s
+Duration: Infinite
+============================================================
+✓ Connected to MQTT broker at localhost:1883
+
+[14:23:45] Iteration 1
+  📊 temperature: 21.34 °C -> devices/office-sensor-01/temperature
+  📊 humidity: 45.67 % -> devices/office-sensor-01/humidity
+  📊 co2: 678.0 ppm -> devices/office-sensor-01/co2
+  📊 pressure: 1015.23 hPa -> devices/office-sensor-01/pressure
+  📊 light: 456.0 lux -> devices/office-sensor-01/light
+  📊 noise: 42.5 dB -> devices/office-sensor-01/noise
+  📊 pm25: 8.3 µg/m³ -> devices/office-sensor-01/pm25
+  📊 voc: 120.0 ppb -> devices/office-sensor-01/voc
+
+[14:23:50] Iteration 2
+  ...
+```
+
+## Stopping the Generator
+
+- **Ctrl+C**: Graceful shutdown
+- **Automatic**: If `--duration` specified
+
+## License
+
+Part of the IoT Dashboard project.

services/db_write/README.md

@@ -2,405 +2,6 @@
 
 A robust, production-ready service that reads sensor data from Redis streams and writes it to PostgreSQL/TimescaleDB. Part of the IoT Dashboard project.
 
-## Features
-
-- ✅ **Reliable consumption** from Redis streams using consumer groups
-- ✅ **Batch processing** for high throughput
-- ✅ **At-least-once delivery** with message acknowledgments
-- ✅ **Dead letter queue** for failed messages
-- ✅ **Connection pooling** for database efficiency
-- ✅ **Graceful shutdown** handling
-- ✅ **Flexible schema** that adapts to changes
-- ✅ **Structured logging** with JSON output
-- ✅ **Health checks** for monitoring
-- ✅ **TimescaleDB support** for time-series optimization
-
-## Architecture
-
-```
-Redis Streams → Consumer Group → Transform → Database → Acknowledge
-                                     ↓
-                              Failed messages
-                                     ↓
-                            Dead Letter Queue
-```
-
-### Components
-
-- **`main.py`**: Service orchestration and processing loop
-- **`redis_reader.py`**: Redis stream consumer with fault tolerance
-- **`db_writer.py`**: Database operations with connection pooling
-- **`schema.py`**: Data transformation and validation
-- **`config.py`**: Configuration management
-
-## Quick Start
-
-### Prerequisites
-
-- Python 3.13+
-- [uv](https://github.com/astral-sh/uv) package manager
-- Redis server with streams
-- PostgreSQL or TimescaleDB
-
-### Installation
-
-1. **Navigate to the service directory**:
-   ```bash
-   cd services/db_write
-   ```
-
-2. **Copy and configure environment variables**:
-   ```bash
-   cp .env.example .env
-   # Edit .env with your DATABASE_URL and other settings
-   ```
-
-3. **Install dependencies**:
-   ```bash
-   uv sync
-   ```
-
-4. **Setup database schema** (IMPORTANT - do this before running):
-   ```bash
-   # Review the schema in models.py first
-   cat models.py
-   
-   # Create initial migration
-   chmod +x migrate.sh
-   ./migrate.sh create "initial schema"
-   
-   # Review the generated migration
-   ls -lt alembic/versions/
-   
-   # Apply migrations
-   ./migrate.sh upgrade
-   ```
-
-5. **Run the service**:
-   ```bash
-   uv run main.py
-   ```
-
-   Or use the standalone script:
-   ```bash
-   chmod +x run-standalone.sh
-   ./run-standalone.sh
-   ```
-
-### ⚠️ Important: Schema Management
-
-This service uses **Alembic** for database migrations. The service will NOT create tables automatically.
-
-- Schema is defined in `models.py`
-- Migrations are managed with `./migrate.sh` or `alembic` commands
-- See `SCHEMA_MANAGEMENT.md` for detailed guide
-
-## Schema Management
-
-This service uses **SQLAlchemy** for models and **Alembic** for migrations.
-
-### Key Files
-
-- **`models.py`**: Define your database schema here (SQLAlchemy models)
-- **`alembic/`**: Migration scripts directory
-- **`migrate.sh`**: Helper script for common migration tasks
-- **`SCHEMA_MANAGEMENT.md`**: Comprehensive migration guide
-
-### Quick Migration Commands
-
-```bash
-# Create a new migration after editing models.py
-./migrate.sh create "add new column"
-
-# Apply pending migrations
-./migrate.sh upgrade
-
-# Check migration status
-./migrate.sh check
-
-# View migration history
-./migrate.sh history
-
-# Rollback last migration
-./migrate.sh downgrade 1
-```
-
-**See `SCHEMA_MANAGEMENT.md` for detailed documentation.**
-
-## Configuration
-
-All configuration is done via environment variables. See `.env.example` for all available options.
-
-### Required Settings
-
-```bash
-# Redis connection
-REDIS_HOST=localhost
-REDIS_PORT=6379
-
-# Database connection
-DATABASE_URL=postgresql://user:password@localhost:5432/iot_dashboard
-```
-
-### Optional Settings
-
-```bash
-# Consumer configuration
-CONSUMER_GROUP_NAME=db_writer      # Consumer group name
-CONSUMER_NAME=worker-01            # Unique consumer name
-BATCH_SIZE=100                     # Messages per batch
-BATCH_TIMEOUT_SEC=5                # Read timeout
-PROCESSING_INTERVAL_SEC=1          # Delay between batches
-
-# Stream configuration
-STREAM_PATTERN=mqtt_stream:*       # Stream name pattern
-DEAD_LETTER_STREAM=mqtt_stream:failed
-
-# Database
-TABLE_NAME=sensor_readings         # Target table name
-ENABLE_TIMESCALE=false             # Use TimescaleDB features
-
-# Logging
-LOG_LEVEL=INFO                     # DEBUG, INFO, WARNING, ERROR
-LOG_FORMAT=json                    # json or console
-```
-
-## Data Flow
-
-### Input (Redis Streams)
-
-The service reads from Redis streams with the format:
-```
-mqtt_stream:{device_id}:{sensor_type}
-```
-
-Each message contains:
-```
-{
-  "value": "23.5",
-  "timestamp": "2023-10-18T14:30:00Z",
-  "metadata": "{...}" (optional)
-}
-```
-
-### Output (Database)
-
-Data is written to the `sensor_readings` table:
-
-```sql
-CREATE TABLE sensor_readings (
-    id BIGSERIAL PRIMARY KEY,
-    timestamp TIMESTAMPTZ NOT NULL,
-    device_id VARCHAR(100) NOT NULL,
-    sensor_type VARCHAR(100) NOT NULL,
-    value DOUBLE PRECISION NOT NULL,
-    metadata JSONB,
-    created_at TIMESTAMPTZ DEFAULT NOW()
-);
-```
-
-**Note**: The table is automatically created if it doesn't exist.
-
-## Running with Docker
-
-### Build the image
-
-```bash
-docker build -t db-writer:latest .
-```
-
-### Run the container
-
-```bash
-docker run -d \
-  --name db-writer \
-  -e REDIS_HOST=redis \
-  -e DATABASE_URL=postgresql://user:pass@postgres:5432/iot \
-  db-writer:latest
-```
-
-## Consumer Groups
-
-The service uses Redis consumer groups for reliable, distributed processing:
-
-- **Multiple instances**: Run multiple workers for load balancing
-- **Fault tolerance**: Messages are not lost if a consumer crashes
-- **Acknowledgments**: Messages are only removed after successful processing
-- **Pending messages**: Unacknowledged messages can be reclaimed
-
-### Running Multiple Workers
-
-```bash
-# Terminal 1
-CONSUMER_NAME=worker-01 uv run main.py
-
-# Terminal 2
-CONSUMER_NAME=worker-02 uv run main.py
-```
-
-All workers in the same consumer group will share the load.
-
-## Error Handling
-
-### Dead Letter Queue
-
-Failed messages are sent to the dead letter stream (`mqtt_stream:failed`) with error information:
-
-```
-{
-  "original_stream": "mqtt_stream:esp32:temperature",
-  "original_id": "1634567890123-0",
-  "device_id": "esp32",
-  "sensor_type": "temperature",
-  "value": "23.5",
-  "error": "Database connection failed",
-  "failed_at": "1634567890.123"
-}
-```
-
-### Retry Strategy
-
-- **Transient errors**: Automatic retry with backoff
-- **Data errors**: Immediate send to DLQ
-- **Connection errors**: Reconnection attempts
-
-## Monitoring
-
-### Health Checks
-
-Check service health programmatically:
-
-```python
-from main import DatabaseWriterService
-
-service = DatabaseWriterService()
-health = service.health_check()
-print(health)
-# {
-#   'running': True,
-#   'redis': True,
-#   'database': True,
-#   'stats': {...}
-# }
-```
-
-### Logs
-
-The service outputs structured logs:
-
-```json
-{
-  "event": "Processed batch",
-  "rows_written": 100,
-  "messages_acknowledged": 100,
-  "timestamp": "2023-10-18T14:30:00Z",
-  "level": "info"
-}
-```
-
-### Statistics
-
-Runtime statistics are tracked:
-- `messages_read`: Total messages consumed
-- `messages_written`: Total rows inserted
-- `messages_failed`: Failed messages sent to DLQ
-- `batches_processed`: Number of successful batches
-- `errors`: Total errors encountered
-
-## Development
-
-### Project Structure
-
-```
-db_write/
-├── config.py          # Configuration management
-├── db_writer.py       # Database operations
-├── redis_reader.py    # Redis stream consumer
-├── schema.py          # Data models and transformation
-├── main.py            # Service entry point
-├── pyproject.toml     # Dependencies
-├── .env.example       # Configuration template
-└── README.md          # This file
-```
-
-### Adding Dependencies
-
-```bash
-uv add package-name
-```
-
-### Running Tests
-
-```bash
-uv run pytest
-```
-
-## Troubleshooting
-
-### Service won't start
-
-1. **Check configuration**: Verify all required environment variables are set
-2. **Test connections**: Ensure Redis and PostgreSQL are accessible
-3. **Check logs**: Look for specific error messages
-
-### No messages being processed
-
-1. **Check streams exist**: `redis-cli KEYS "mqtt_stream:*"`
-2. **Verify consumer group**: The service creates it automatically, but check Redis logs
-3. **Check stream pattern**: Ensure `STREAM_PATTERN` matches your stream names
-
-### Messages going to dead letter queue
-
-1. **Check DLQ**: `redis-cli XRANGE mqtt_stream:failed - + COUNT 10`
-2. **Review error messages**: Each DLQ entry contains the error reason
-3. **Validate data format**: Ensure messages match expected schema
-
-### High memory usage
-
-1. **Reduce batch size**: Lower `BATCH_SIZE` in configuration
-2. **Check connection pool**: May need to adjust pool size
-3. **Monitor pending messages**: Use `XPENDING` to check backlog
-
-## Performance Tuning
-
-### Throughput Optimization
-
-- **Increase batch size**: Process more messages per batch
-- **Multiple workers**: Run multiple consumer instances
-- **Connection pooling**: Adjust pool size based on load
-- **Processing interval**: Reduce delay between batches
-
-### Latency Optimization
-
-- **Decrease batch size**: Process smaller batches more frequently
-- **Reduce timeout**: Lower `BATCH_TIMEOUT_SEC`
-- **Single worker**: Avoid consumer group coordination overhead
-
-## Production Deployment
-
-### Recommended Settings
-
-```bash
-BATCH_SIZE=500
-PROCESSING_INTERVAL_SEC=0.1
-LOG_LEVEL=INFO
-LOG_FORMAT=json
-ENABLE_TIMESCALE=true
-```
-
-### Monitoring
-
-- Monitor consumer lag using Redis `XPENDING`
-- Track database insert latency
-- Alert on error rate > 5%
-- Monitor DLQ depth
-
-### Scaling
-
-1. **Horizontal**: Add more consumer instances with unique `CONSUMER_NAME`
-2. **Vertical**: Increase resources for database writes
-3. **Database**: Use TimescaleDB for better time-series performance
-
 ## License
 
 Part of the IoT Dashboard project.

services/device_manager/.env.sample

@@ -0,0 +1,24 @@
+# Device Manager Environment Configuration
+
+# Database connection
+DATABASE_URL=postgresql://iot_user:your_password@localhost:5432/iot_dashboard
+
+# Certificate paths
+CA_CERT_PATH=certs/ca.crt
+CA_KEY_PATH=certs/ca.key
+CRL_PATH=certs/ca.crl
+
+# Certificate settings
+CERT_VALIDITY_DAYS=365
+CERT_KEY_SIZE=4096
+
+
+SERVER_IP=10.10.1.114
+
+# Device ID settings
+DEVICE_ID_LENGTH=8
+
+# Service settings
+DEVICE_MANAGER_HOST=0.0.0.0
+DEVICE_MANAGER_PORT=8000
+LOG_LEVEL=INFO

services/device_manager/app/app.py

@@ -1,12 +1,15 @@
 import datetime
 import logging
+import secrets
 
-from fastapi import FastAPI, HTTPException
+from cryptography import x509
+from fastapi import FastAPI, HTTPException, Query
 
 from app.cert_manager import CertificateManager
 from app.database import get_db_context
-from app.db_models import Device, DeviceCertificate
+from app.db_models import Device, DeviceCertificate, DeviceOnboardingToken
 from app.models import (
+    DeviceCertificateResponse,
     DeviceRegistrationRequest,
     DeviceRegistrationResponse,
     DeviceResponse,
@@ -61,6 +64,19 @@ async def register_device(
                 )
                 db.add(device_cert)
 
+                onboarding_token = secrets.token_urlsafe(32)
+                token_expires = datetime.datetime.now(datetime.UTC) + datetime.timedelta(minutes=15)
+
+                db_token = DeviceOnboardingToken(
+                    token=onboarding_token,
+                    device_id=cert_response.device_id,
+                    certificate_id=cert_response.certificate_id,
+                    created_at=datetime.datetime.now(datetime.UTC),
+                    expires_at=token_expires,
+                )
+                db.add(db_token)
+                db.commit()
+
             return DeviceRegistrationResponse(
                 device_id=cert_response.device_id,
                 protocol=request.protocol,
@@ -69,6 +85,7 @@ async def register_device(
                 certificate_pem=cert_response.certificate_pem,
                 private_key_pem=cert_response.private_key_pem,
                 expires_at=cert_response.expires_at,
+                onboarding_token=onboarding_token,
             )
 
         else:
@@ -99,6 +116,63 @@ async def get_ca_certificate() -> str:
         raise HTTPException(status_code=500, detail="Failed to retrieve CA certificate.") from e
 
 
+@app.get("/devices/{device_id}/credentials")
+async def get_device_credentials(device_id: str, token: str = Query(...)) -> DeviceCertificateResponse:
+    """
+    Securely fetch device credentials using one-time token from QR code.
+    Token is valid for 15 minutes and can only be used once.
+    """
+    try:
+        with get_db_context() as db:
+            db_token = db.query(DeviceOnboardingToken).filter(
+                DeviceOnboardingToken.token == token,
+                DeviceOnboardingToken.device_id == device_id
+            ).first()
+
+            if not db_token:
+                raise HTTPException(status_code=404, detail="Invalid or expired onboarding token")
+
+            if db_token.used_at is not None:
+                raise HTTPException(status_code=403, detail="Token has already been used")
+
+            # Check if token expired
+            if datetime.datetime.now(datetime.UTC) > db_token.expires_at:
+                raise HTTPException(status_code=403, detail="Token has expired")
+
+            device_cert = db.query(DeviceCertificate).filter(
+                DeviceCertificate.id == db_token.certificate_id,
+                DeviceCertificate.device_id == device_id,
+                DeviceCertificate.revoked_at.is_(None)
+            ).first()
+
+            if not device_cert:
+                raise HTTPException(status_code=404, detail="Certificate not found or revoked")
+
+            db_token.used_at = datetime.datetime.now(datetime.UTC)
+            db.commit()
+
+            ca_cert_pem = cert_manager.get_ca_certificate_pem()
+
+            logger.info(f"Device {device_id} fetched credentials using onboarding token")
+
+            return DeviceCertificateResponse(
+                certificate_id=device_cert.id,
+                device_id=device_cert.device_id,
+                ca_certificate_pem=ca_cert_pem,
+                certificate_pem=device_cert.certificate_pem,
+                private_key_pem=device_cert.private_key_pem,
+                expires_at=device_cert.expires_at,
+            )
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Failed to fetch credentials for device {device_id}: {str(e)}", exc_info=True)
+        raise HTTPException(
+            status_code=500, detail="Failed to fetch device credentials"
+        ) from e
+
+
 @app.get("/devices/{device_id}")
 async def get_device(device_id: str) -> DeviceResponse:
     """
@@ -208,6 +282,34 @@ async def get_crl():
         logger.error(f"Failed to retrieve CRL: {str(e)}", exc_info=True)
         raise HTTPException(status_code=500, detail="Failed to retrieve CRL.") from e
 
+@app.post("/devices/{device_id}/delete")
+async def delete_device(device_id: str):
+    """
+    Delete a device and its associated certificates from the database.
+    """
+    try:
+        with get_db_context() as db:
+            device = db.query(Device).filter(Device.id == device_id).first()
+            if not device:
+                raise HTTPException(status_code=404, detail="Device not found")
+
+            # Delete associated certificates
+            db.query(DeviceCertificate).filter(DeviceCertificate.device_id == device_id).delete()
+
+            # Delete the device
+            db.delete(device)
+            db.commit()
+
+            logger.info(f"Successfully deleted device {device_id} and its certificates")
+
+            return {"message": f"Device {device_id} and its certificates have been deleted."}
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Failed to delete device {device_id}: {str(e)}", exc_info=True)
+        raise HTTPException(status_code=500, detail="Failed to delete device.") from e
+
 
 @app.post("/devices/{device_id}/renew")
 async def renew_certificate(device_id: str):
@@ -254,8 +356,6 @@ async def renew_certificate(device_id: str):
             )
 
             # Extract certificate ID (serial number) from the new certificate
-            from cryptography import x509
-
             new_cert = x509.load_pem_x509_certificate(new_cert_pem)
             new_cert_id = format(new_cert.serial_number, "x")
 

services/device_manager/app/db_models.py

@@ -74,3 +74,26 @@ class DeviceCredential(Base):
 
     def __repr__(self):
         return f"<DeviceCredential(id={self.id}, device_id={self.device_id}, type={self.credential_type})>"
+
+
+class DeviceOnboardingToken(Base):
+    """One-time tokens for secure device onboarding via QR code."""
+
+    __tablename__ = "device_onboarding_tokens"
+
+    token = Column(Text, primary_key=True)
+    device_id = Column(
+        Text, ForeignKey("devices.id", ondelete="CASCADE"), nullable=False
+    )
+    certificate_id = Column(Text, nullable=False)
+    created_at = Column(DateTime(timezone=True), nullable=False)
+    expires_at = Column(DateTime(timezone=True), nullable=False)
+    used_at = Column(DateTime(timezone=True))
+
+    __table_args__ = (
+        Index("idx_onboarding_tokens_device_id", "device_id"),
+        Index("idx_onboarding_tokens_expires", "expires_at"),
+    )
+
+    def __repr__(self):
+        return f"<DeviceOnboardingToken(device_id={self.device_id}, used={self.used_at is not None})>"

services/device_manager/app/models.py

@@ -19,6 +19,7 @@ class DeviceRegistrationResponse(BaseModel):
     certificate_pem: str | None = None
     private_key_pem: str | None = None
     expires_at: datetime.datetime | None = None
+    onboarding_token: str | None = None
     credential_id: str | None = None
     api_key: str | None = None
     webhook_secret: str | None = None

services/gpt_service/.env.sample

@@ -1,6 +1,6 @@
 API_KEY=your_api_key_here
 PROVIDER_NAME=openai
-MODEL_NAME=gpt-4.1
+MODEL_NAME=gpt-4o-mini
 HOST_URL= http://localhost:8000
 LOG_LEVEL=INFO
 

services/gpt_service/METRICS_REFERENCE.md

@@ -0,0 +1,136 @@
+# Environmental Monitoring Standards Reference
+
+This document provides the industry-standard optimal ranges used by the GPT service for environmental analysis.
+
+## Supported Metrics
+
+### Temperature (°C)
+- **Optimal Range**: 18-24°C
+- **Comfort Zone**: 20-22°C
+- **Critical Low**: <15°C
+- **Critical High**: >28°C
+- **Standards**: ASHRAE 55, ISO 7730
+- **Key Concerns**:
+  - Worker comfort and productivity
+  - Equipment operating conditions
+  - Energy efficiency
+  - HVAC system performance
+
+### Humidity (%)
+- **Optimal Range**: 30-60%
+- **Comfort Zone**: 40-50%
+- **Critical Low**: <20%
+- **Critical High**: >70%
+- **Standards**: ASHRAE 55, WHO guidelines
+- **Key Concerns**:
+  - Mold and mildew growth (>60%)
+  - Static electricity and equipment damage (<30%)
+  - Respiratory health and comfort
+  - Material degradation
+
+### CO2 (ppm)
+- **Optimal Range**: 400-1000ppm
+- **Comfort Zone**: 400-800ppm
+- **Critical Low**: <350ppm (unusual indoors)
+- **Critical High**: >1500ppm
+- **Standards**: ASHRAE 62.1, WHO Air Quality Guidelines
+- **Key Concerns**:
+  - Air quality and ventilation effectiveness
+  - Cognitive performance (>1000ppm affects decision-making)
+  - Occupant health and alertness
+  - HVAC system efficiency
+- **Impact**: Studies show 15% decline in cognitive function at 1400ppm
+
+### Atmospheric Pressure (hPa)
+- **Optimal Range**: 1013-1023hPa
+- **Comfort Zone**: 1013-1020hPa
+- **Critical Low**: <980hPa
+- **Critical High**: >1050hPa
+- **Key Concerns**:
+  - Weather changes and ventilation
+  - Building pressurization
+  - Equipment calibration
+  - Occupant comfort
+
+### Light / Illuminance (lux)
+- **Optimal Range**: 300-500 lux
+- **Comfort Zone**: 400-500 lux
+- **Critical Low**: <200 lux
+- **Critical High**: >1000 lux
+- **Standards**: EN 12464-1, IESNA recommendations
+- **Key Concerns**:
+  - Visual comfort and eye strain
+  - Productivity and task performance
+  - Energy consumption
+  - Circadian rhythm regulation
+- **Note**: Higher levels (750-1000 lux) for detailed work
+
+### Noise (dB)
+- **Optimal Range**: 30-50dB
+- **Comfort Zone**: 35-45dB
+- **Critical Low**: <20dB (unusual indoors)
+- **Critical High**: >70dB
+- **Standards**: WHO Noise Guidelines, OSHA
+- **Key Concerns**:
+  - Acoustic comfort and concentration
+  - Speech intelligibility
+  - Stress and productivity impact
+  - Hearing protection requirements (>85dB)
+- **Impact**: 40-45dB ideal for office work, <35dB for focused tasks
+
+### PM2.5 - Fine Particulate Matter (µg/m³)
+- **Optimal Range**: 0-12 µg/m³
+- **Comfort Zone**: 0-10 µg/m³
+- **Critical Low**: 0 µg/m³ (best)
+- **Critical High**: >35 µg/m³
+- **Standards**: EPA Air Quality Index, WHO guidelines
+- **Key Concerns**:
+  - Air quality and health risk
+  - Respiratory system impact
+  - Filter maintenance requirements
+  - Outdoor air quality correlation
+- **Impact**: >35 µg/m³ = Unhealthy for sensitive groups
+
+### VOC - Volatile Organic Compounds (ppb)
+- **Optimal Range**: 0-220ppb
+- **Comfort Zone**: 0-150ppb
+- **Critical Low**: 0ppb (best)
+- **Critical High**: >500ppb
+- **Standards**: Various indoor air quality standards
+- **Key Concerns**:
+  - Indoor air quality
+  - Off-gassing from materials
+  - Ventilation effectiveness
+  - Occupant health symptoms (headaches, irritation)
+
+## Analysis Approach
+
+The GPT service uses these standards to:
+
+1. **Assess Current Conditions**: Compare measurements against optimal ranges
+2. **Identify Issues**: Flag deviations with severity levels
+3. **Provide Context**: Explain health/productivity impacts
+4. **Recommend Actions**: Suggest specific interventions (HVAC, ventilation, etc.)
+5. **Predict Trends**: Forecast potential issues based on patterns
+
+## Multi-Metric Correlation
+
+When analyzing multiple metrics together, the service looks for:
+- **HVAC Performance**: Temperature + Humidity + CO2 trends
+- **Ventilation Effectiveness**: CO2 + PM2.5 + VOC levels
+- **Occupancy Impact**: CO2 rise + Temperature increase + Humidity changes
+- **Seasonal Patterns**: Pressure + Temperature + Humidity correlations
+
+## References
+
+- ASHRAE Standard 55: Thermal Environmental Conditions for Human Occupancy
+- ASHRAE Standard 62.1: Ventilation for Acceptable Indoor Air Quality
+- WHO Air Quality Guidelines
+- ISO 7730: Ergonomics of the thermal environment
+- EN 12464-1: Light and lighting of work places
+- EPA Air Quality Index
+- OSHA Occupational Noise Exposure Standards
+
+## Usage in Prompts
+
+The service automatically includes relevant standards in analysis prompts based on detected metrics. No manual configuration needed - just send your telemetry data!

services/gpt_service/README.md

@@ -0,0 +1,240 @@
+# GPT Service
+
+FastAPI microservice for AI-powered environmental telemetry analysis using OpenAI GPT models.
+
+## Purpose
+
+Provides intelligent analysis of IoT environmental sensor data to ensure optimal working conditions. The service specializes in monitoring indoor environmental quality metrics (temperature, humidity, CO2, etc.) with context-aware insights based on industry standards (ASHRAE, WHO, OSHA).
+
+**Goal**: Smart IoT dashboard that maintains healthy, comfortable, and productive work environments through AI-driven insights.
+
+## Architecture
+
+- **Input**: Telemetry data + device context from Django
+- **Processing**: OpenAI GPT API with specialized prompts
+- **Output**: Actionable insights and analysis
+- **State**: Stateless - no database, pure text processing
+
+## Setup
+
+1. **Install dependencies**:
+```bash
+uv sync
+```
+
+2. **Configure environment**:
+```bash
+cp .env.sample .env
+# Edit .env with your OpenAI API key
+```
+
+3. **Run the service**:
+```bash
+uv run uvicorn main:app --reload --port 8001
+```
+
+## API Endpoints
+
+### POST /analyze
+
+Analyze telemetry data with AI.
+
+**Request**:
+```json
+{
+  "telemetry_data": [
+    {
+      "device_id": "abc123",
+      "metric": "temperature",
+      "value": 23.5,
+      "timestamp": "2024-01-15T10:30:00Z"
+    }
+  ],
+  "device_info": {
+    "name": "Sensor-01",
+    "location": "Lab A"
+  },
+  "prompt_type": "trend_summary",
+  "custom_prompt": null
+}
+```
+
+**Prompt Types**:
+- `trend_summary`: Environmental quality trends with comfort assessment
+- `anomaly_detection`: Identify deviations from optimal ranges with severity
+- `custom`: Use custom_prompt field
+
+**Supported Metrics** (with industry-standard optimal ranges):
+- `temperature`: Indoor temperature (18-24°C optimal)
+- `humidity`: Relative humidity (30-60% optimal)
+- `co2`: Carbon dioxide concentration (400-1000ppm optimal)
+- `pressure`: Atmospheric pressure (1013-1023hPa optimal)
+- `light`: Illuminance level (300-500 lux optimal)
+- `noise`: Sound level (30-50dB optimal)
+- `pm25`: Fine particulate matter (0-12 µg/m³ optimal)
+- `voc`: Volatile organic compounds (0-220ppb optimal)
+
+Each metric includes:
+- Optimal and comfort ranges
+- Critical thresholds
+- Health/productivity impact assessment
+- Specific concerns (e.g., mold growth for humidity, cognitive impact for CO2)
+
+**Response**:
+```json
+{
+  "analysis": "The temperature data shows...",
+  "prompt_type": "trend_summary",
+  "data_points_analyzed": 100
+}
+```
+
+### GET /health
+
+Health check endpoint.
+
+**Response**:
+```json
+{
+  "status": "healthy",
+  "service": "gpt_service"
+}
+```
+
+## Environment Variables
+
+- `API_KEY`: OpenAI API key (required)
+- `PROVIDER_NAME`: AI provider (default: "openai")
+- `MODEL_NAME`: OpenAI model (default: "gpt-4o-mini")
+- `HOST_URL`: Service URL (default: "http://localhost:8001")
+- `LOG_LEVEL`: Logging level (default: "INFO")
+
+## Integration with Django
+
+Django backend should:
+1. Query telemetry from PostgreSQL/TimescaleDB
+2. Format data as array of `{device_id, metric, value, timestamp}`
+3. Add device context in `device_info`
+4. POST to `/analyze` endpoint
+5. Return analysis to frontend
+
+Example Django integration:
+```python
+import httpx
+
+async def get_telemetry_insights(device_id: str, metric: str = None):
+    # Query telemetry
+    telemetry = Telemetry.objects.filter(device_id=device_id)
+    if metric:
+        telemetry = telemetry.filter(metric=metric)
+    
+    # Format data
+    data = [
+        {
+            "device_id": t.device_id,
+            "metric": t.metric,
+            "value": t.value,
+            "timestamp": t.timestamp.isoformat()
+        }
+        for t in telemetry[:100]  # Limit to last 100 points
+    ]
+    
+    # Get device info
+    device = Device.objects.get(device_id=device_id)
+    device_info = {
+        "name": device.name,
+        "location": device.location
+    }
+    
+    # Call GPT service
+    async with httpx.AsyncClient() as client:
+        response = await client.post(
+            "http://localhost:8001/analyze",
+            json={
+                "telemetry_data": data,
+                "device_info": device_info,
+                "prompt_type": "trend_summary"
+            }
+        )
+        return response.json()
+```
+
+## Testing
+
+```bash
+# Health check
+curl http://localhost:8001/health
+
+# Test analysis
+curl -X POST http://localhost:8001/analyze \
+  -H "Content-Type: application/json" \
+  -d '{
+    "telemetry_data": [
+      {"device_id": "test", "metric": "temperature", "value": 23.5, "timestamp": "2024-01-15T10:30:00Z"}
+    ],
+    "prompt_type": "trend_summary"
+  }'
+```
+
+## Development
+
+- **Stateless design** - No database required
+- **Metric-aware** - Specialized prompts for 8 environmental metrics
+- **Standards-based** - Uses ASHRAE, WHO, OSHA guidelines
+- **Context-rich** - Includes optimal ranges, thresholds, and impact assessments
+- **Async/await** - Non-blocking OpenAI API calls
+- **Error handling** - Proper HTTP exceptions with logging
+- **Type safety** - Pydantic models and type hints throughout
+
+## Analysis Features
+
+### Metric-Specific Intelligence
+
+The service automatically detects which metrics are in your telemetry data and provides specialized analysis:
+
+**Temperature Analysis**:
+- Optimal range: 18-24°C (comfort zone: 20-22°C)
+- Assesses impact on worker productivity and equipment
+- Identifies HVAC performance issues
+- Recommends energy efficiency improvements
+
+**Humidity Analysis**:
+- Optimal range: 30-60% (comfort zone: 40-50%)
+- Warns about mold risk (>60%) and static electricity (<30%)
+- Evaluates respiratory health impact
+- Suggests ventilation adjustments
+
+**CO2 Analysis**:
+- Optimal range: 400-1000ppm (comfort zone: 400-800ppm)
+- Links high CO2 to cognitive performance decline
+- Assesses ventilation effectiveness
+- Recommends occupancy adjustments
+
+**And more** for pressure, light, noise, PM2.5, and VOC metrics.
+
+### Analysis Types
+
+1. **Trend Summary** (`prompt_type: "trend_summary"`):
+   - Overall environmental quality rating
+   - Time spent in optimal vs suboptimal ranges
+   - Daily patterns and correlations
+   - Predictive insights and optimization opportunities
+
+2. **Anomaly Detection** (`prompt_type: "anomaly_detection"`):
+   - Identifies deviations from optimal ranges
+   - Severity assessment (low/medium/high/critical)
+   - Root cause analysis (HVAC, occupancy, external factors)
+   - Prioritized action items
+
+3. **Custom Analysis** (`prompt_type: "custom"`):
+   - Use your own prompt
+   - Still includes metric context and standards
+   - Flexible for specific use cases
+
+## Notes
+
+- Service is stateless by design
+- Django provides all data context
+- No direct database access
+- Focuses on text transformation only
+- Aligns with microservices architecture pattern

services/gpt_service/gpt_service.py

@@ -1,4 +1,5 @@
 from openai import OpenAI
+from typing import List, Dict, Any
 
 from config import API_KEY, MODEL_NAME, PROVIDER_NAME, HOST_URL, LOG_LEVEL
 import logging
@@ -20,4 +21,354 @@ class GPTService:
             self.logger.error(f"Unsupported provider: {self.provider_name}")
             raise ValueError(f"Unsupported provider: {self.provider_name}")
 
-        
+    def _get_metric_specific_context(self, metric: str) -> Dict[str, Any]:
+        """Get metric-specific optimal ranges and context for environmental monitoring."""
+        
+        metric_contexts = {
+            "temperature": {
+                "unit": "°C",
+                "optimal_range": (18, 24),
+                "comfort_range": (20, 22),
+                "critical_low": 15,
+                "critical_high": 28,
+                "context": "indoor environment temperature",
+                "concerns": [
+                    "Worker comfort and productivity",
+                    "Equipment operating conditions",
+                    "Energy efficiency",
+                    "HVAC system performance"
+                ]
+            },
+            "humidity": {
+                "unit": "%",
+                "optimal_range": (30, 60),
+                "comfort_range": (40, 50),
+                "critical_low": 20,
+                "critical_high": 70,
+                "context": "relative humidity",
+                "concerns": [
+                    "Mold and mildew growth (>60%)",
+                    "Static electricity and equipment damage (<30%)",
+                    "Respiratory health and comfort",
+                    "Material degradation"
+                ]
+            },
+            "co2": {
+                "unit": "ppm",
+                "optimal_range": (400, 1000),
+                "comfort_range": (400, 800),
+                "critical_low": 350,
+                "critical_high": 1500,
+                "context": "carbon dioxide concentration",
+                "concerns": [
+                    "Air quality and ventilation effectiveness",
+                    "Cognitive performance (>1000ppm affects decision-making)",
+                    "Occupant health and alertness",
+                    "HVAC system efficiency"
+                ]
+            },
+            "pressure": {
+                "unit": "hPa",
+                "optimal_range": (1013, 1023),
+                "comfort_range": (1013, 1020),
+                "critical_low": 980,
+                "critical_high": 1050,
+                "context": "atmospheric pressure",
+                "concerns": [
+                    "Weather changes and ventilation",
+                    "Building pressurization",
+                    "Equipment calibration",
+                    "Occupant comfort"
+                ]
+            },
+            "light": {
+                "unit": "lux",
+                "optimal_range": (300, 500),
+                "comfort_range": (400, 500),
+                "critical_low": 200,
+                "critical_high": 1000,
+                "context": "illuminance level",
+                "concerns": [
+                    "Visual comfort and eye strain",
+                    "Productivity and task performance",
+                    "Energy consumption",
+                    "Circadian rhythm regulation"
+                ]
+            },
+            "noise": {
+                "unit": "dB",
+                "optimal_range": (30, 50),
+                "comfort_range": (35, 45),
+                "critical_low": 20,
+                "critical_high": 70,
+                "context": "noise level",
+                "concerns": [
+                    "Acoustic comfort and concentration",
+                    "Speech intelligibility",
+                    "Stress and productivity impact",
+                    "Hearing protection requirements (>85dB)"
+                ]
+            },
+            "pm25": {
+                "unit": "µg/m³",
+                "optimal_range": (0, 12),
+                "comfort_range": (0, 10),
+                "critical_low": 0,
+                "critical_high": 35,
+                "context": "fine particulate matter (PM2.5)",
+                "concerns": [
+                    "Air quality and health risk",
+                    "Respiratory system impact",
+                    "Filter maintenance requirements",
+                    "Outdoor air quality correlation"
+                ]
+            },
+            "voc": {
+                "unit": "ppb",
+                "optimal_range": (0, 220),
+                "comfort_range": (0, 150),
+                "critical_low": 0,
+                "critical_high": 500,
+                "context": "volatile organic compounds",
+                "concerns": [
+                    "Indoor air quality",
+                    "Off-gassing from materials",
+                    "Ventilation effectiveness",
+                    "Occupant health symptoms"
+                ]
+            }
+        }
+        
+        # Default for unknown metrics
+        default = {
+            "unit": "",
+            "optimal_range": None,
+            "comfort_range": None,
+            "critical_low": None,
+            "critical_high": None,
+            "context": f"{metric} measurement",
+            "concerns": ["Monitor for unexpected changes", "Verify sensor accuracy"]
+        }
+        
+        return metric_contexts.get(metric.lower(), default)
+
+    def _build_prompt(
+        self,
+        telemetry_data: List[Dict[str, Any]],
+        device_info: Dict[str, Any],
+        prompt_type: str,
+        custom_prompt: str | None = None
+    ) -> str:
+        """Build analysis prompt based on type with metric-specific context."""
+        
+        # Format telemetry data for prompt
+        data_summary = self._format_telemetry_summary(telemetry_data)
+        device_context = self._format_device_info(device_info)
+        
+        # Get metrics present in data
+        metrics_in_data = set(point.get("metric", "").lower() for point in telemetry_data)
+        
+        # Build metric-specific context
+        metric_context_lines = []
+        for metric in metrics_in_data:
+            if metric:
+                ctx = self._get_metric_specific_context(metric)
+                metric_context_lines.append(f"\n**{metric.upper()}** ({ctx['context']}):")
+                if ctx['optimal_range']:
+                    metric_context_lines.append(f"  - Optimal Range: {ctx['optimal_range'][0]}-{ctx['optimal_range'][1]} {ctx['unit']}")
+                if ctx['comfort_range']:
+                    metric_context_lines.append(f"  - Comfort Zone: {ctx['comfort_range'][0]}-{ctx['comfort_range'][1]} {ctx['unit']}")
+                if ctx['critical_high']:
+                    metric_context_lines.append(f"  - Critical Thresholds: <{ctx['critical_low']} or >{ctx['critical_high']} {ctx['unit']}")
+                metric_context_lines.append("  - Key Concerns:")
+                for concern in ctx['concerns']:
+                    metric_context_lines.append(f"    • {concern}")
+        
+        metric_context = "\n".join(metric_context_lines) if metric_context_lines else ""
+        
+        prompts = {
+            "anomaly_detection": f"""You are an IoT environmental monitoring specialist. Analyze the telemetry data to detect anomalies and issues.
+
+{device_context}
+
+Environmental Standards:
+{metric_context}
+
+Recent Measurements:
+{data_summary}
+
+Respond in this EXACT JSON format (no markdown, just valid JSON):
+{{
+  "status": "normal|warning|critical",
+  "summary": "Brief 1-2 sentence overview",
+  "anomalies": [
+    {{
+      "metric": "metric name",
+      "severity": "low|medium|high|critical",
+      "description": "What's wrong",
+      "value": "current value",
+      "expected": "expected range"
+    }}
+  ],
+  "impacts": ["Impact 1", "Impact 2"],
+  "actions": ["Action 1", "Action 2"],
+  "root_causes": ["Cause 1", "Cause 2"]
+}}
+
+Keep summary under 50 words, each item under 20 words.""",
+            
+            "trend_summary": f"""You are an IoT environmental monitoring specialist. Analyze the measurement trends and patterns.
+
+{device_context}
+
+Environmental Standards:
+{metric_context}
+
+Measurement History:
+{data_summary}
+
+Respond in this EXACT JSON format (no markdown, just valid JSON):
+{{
+  "status": "excellent|good|fair|poor",
+  "summary": "Brief 1-2 sentence overview of conditions",
+  "trends": [
+    {{
+      "metric": "metric name",
+      "direction": "improving|stable|degrading",
+      "description": "What's happening"
+    }}
+  ],
+  "comfort_score": {{
+    "rating": 85,
+    "description": "Brief assessment"
+  }},
+  "patterns": ["Pattern 1", "Pattern 2"],
+  "recommendations": ["Recommendation 1", "Recommendation 2"],
+  "forecast": "Brief prediction based on trends"
+}}
+
+Keep all text concise: summary under 50 words, each item under 20 words.""",
+            
+            "custom": custom_prompt or "Analyze the provided telemetry data."
+        }
+        
+        base_prompt = prompts.get(prompt_type, prompts["trend_summary"])
+        
+        if prompt_type == "custom" and custom_prompt:
+            base_prompt = f"{custom_prompt}\n\n{device_context}\n\n{metric_context}\n\nTelemetry Data:\n{data_summary}"
+        
+        return base_prompt
+
+    def _format_telemetry_summary(self, telemetry_data: List[Dict[str, Any]]) -> str:
+        """Format telemetry data into readable summary with full data points."""
+        if not telemetry_data:
+            return "No data available"
+        
+        # Group by metric
+        metrics = {}
+        for point in telemetry_data:
+            metric = point.get("metric", "unknown")
+            if metric not in metrics:
+                metrics[metric] = []
+            metrics[metric].append({
+                "value": point.get("value"),
+                "timestamp": point.get("timestamp"),
+                "device_id": point.get("device_id")
+            })
+        
+        # Build summary with full data
+        lines = []
+        for metric, points in metrics.items():
+            values = [p["value"] for p in points if p["value"] is not None]
+            if values:
+                lines.append(f"\n{metric}:")
+                lines.append(f"  Summary Statistics:")
+                lines.append(f"    - Data points: {len(values)}")
+                lines.append(f"    - Min: {min(values):.2f}")
+                lines.append(f"    - Max: {max(values):.2f}")
+                lines.append(f"    - Average: {sum(values)/len(values):.2f}")
+                lines.append(f"    - Latest: {points[-1]['value']:.2f} at {points[-1]['timestamp']}")
+                
+                # Include all individual readings for AI analysis
+                lines.append(f"  Full Time Series Data:")
+                for point in points:
+                    lines.append(f"    - {point['timestamp']}: {point['value']:.2f}")
+        
+        return "\n".join(lines)
+
+    def _format_device_info(self, device_info: Dict[str, Any]) -> str:
+        """Format device information for prompt."""
+        if not device_info:
+            return "Device Context: Not provided"
+        
+        lines = ["Device Context:"]
+        for key, value in device_info.items():
+            lines.append(f"  - {key}: {value}")
+        
+        return "\n".join(lines)
+
+    async def analyze(
+        self,
+        telemetry_data: List[Dict[str, Any]],
+        device_info: Dict[str, Any] = None,
+        prompt_type: str = "trend_summary",
+        custom_prompt: str | None = None
+    ) -> str:
+        """
+        Analyze telemetry data using OpenAI GPT model.
+        
+        Args:
+            telemetry_data: List of telemetry data points with device_id, metric, value, timestamp
+            device_info: Optional device metadata for context
+            prompt_type: Type of analysis (anomaly_detection, trend_summary, custom)
+            custom_prompt: Custom prompt for 'custom' type
+        
+        Returns:
+            Analysis result as string
+        """
+        try:
+            device_info = device_info or {}
+            
+            # Build prompt
+            prompt = self._build_prompt(telemetry_data, device_info, prompt_type, custom_prompt)
+            
+            system_prompt = "You are an expert IoT environmental monitoring specialist with deep knowledge of indoor environmental quality standards (ASHRAE, WHO, OSHA guidelines). Your goal is to help maintain optimal working conditions for occupant health, comfort, and productivity. Provide clear, actionable insights with specific metric values and recommendations. Focus on environmental factors that impact human performance and wellbeing."
+            
+            # Log the complete prompt for debugging/review
+            self.logger.info("="*80)
+            self.logger.info(f"PROMPT LOGGING - Analysis Type: {prompt_type}")
+            self.logger.info("="*80)
+            self.logger.info("\n[SYSTEM PROMPT]")
+            self.logger.info(system_prompt)
+            self.logger.info("\n" + "-"*80)
+            self.logger.info("[USER PROMPT]")
+            self.logger.info(prompt)
+            self.logger.info("="*80)
+            
+            self.logger.info(f"Sending analysis request to {self.model_name}")
+            
+            # Call OpenAI API
+            response = self.client.chat.completions.create(
+                model=self.model_name,
+                messages=[
+                    {
+                        "role": "system",
+                        "content": system_prompt
+                    },
+                    {
+                        "role": "user",
+                        "content": prompt
+                    }
+                ],
+                temperature=0.7,
+                max_tokens=1500
+            )
+            
+            analysis = response.choices[0].message.content
+            self.logger.info(f"Analysis completed successfully. Tokens used: {response.usage.total_tokens}")
+            
+            return analysis
+            
+        except Exception as e:
+            self.logger.error(f"Analysis failed: {str(e)}")
+            raise

services/gpt_service/main.py

@@ -1,10 +1,93 @@
+from fastapi import FastAPI, HTTPException
+from pydantic import BaseModel, Field
+from typing import List, Dict, Any, Literal
+from contextlib import asynccontextmanager
 from gpt_service import GPTService
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+gpt_service = None
 
 
-def main():
-    GPTService()
-    print("Hello from gpt-service!")
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Lifespan event handler for startup and shutdown."""
+    global gpt_service
+    # Startup
+    logger.info("Initializing GPT Service...")
+    gpt_service = GPTService()
+    logger.info("GPT Service initialized successfully")
+    yield
+    # Shutdown (cleanup if needed)
+    logger.info("Shutting down GPT Service...")
 
 
-if __name__ == "__main__":
-    main()
+app = FastAPI(lifespan=lifespan)
+
+
+class TelemetryDataPoint(BaseModel):
+    device_id: str
+    metric: str
+    value: float
+    timestamp: str
+
+class AnalyzeRequest(BaseModel):
+    telemetry_data: List[TelemetryDataPoint] = Field(..., description="Array of telemetry data points")
+    device_info: Dict[str, Any] = Field(default_factory=dict, description="Device metadata")
+    prompt_type: Literal["anomaly_detection", "trend_summary", "custom"] = Field(
+        default="trend_summary",
+        description="Type of analysis to perform"
+    )
+    custom_prompt: str | None = Field(None, description="Custom prompt for 'custom' type")
+
+class AnalyzeResponse(BaseModel):
+    analysis: str
+    prompt_type: str
+    data_points_analyzed: int
+
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "service": "gpt_service"}
+
+
+@app.post("/analyze", response_model=AnalyzeResponse)
+async def analyze_telemetry(request: AnalyzeRequest):
+    """
+    Analyze telemetry data using GPT model.
+    Receives formatted telemetry data from Django and returns AI insights.
+    """
+    try:
+        if not gpt_service:
+            raise HTTPException(status_code=503, detail="GPT service not initialized")
+        
+        if not request.telemetry_data:
+            raise HTTPException(status_code=400, detail="No telemetry data provided")
+        
+        logger.info(f"Analyzing {len(request.telemetry_data)} telemetry points with prompt_type={request.prompt_type}")
+        
+        # Convert Pydantic models to dicts for GPTService
+        telemetry_dicts = [point.model_dump() for point in request.telemetry_data]
+        
+        # Call GPT service analysis
+        analysis_result = await gpt_service.analyze(
+            telemetry_data=telemetry_dicts,
+            device_info=request.device_info,
+            prompt_type=request.prompt_type,
+            custom_prompt=request.custom_prompt
+        )
+        
+        return AnalyzeResponse(
+            analysis=analysis_result,
+            prompt_type=request.prompt_type,
+            data_points_analyzed=len(request.telemetry_data)
+        )
+        
+    except ValueError as e:
+        logger.error(f"Validation error: {str(e)}")
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        logger.error(f"Analysis failed: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Analysis failed: {str(e)}")

services/gpt_service/pyproject.toml

@@ -5,6 +5,8 @@ description = "Add your description here"
 readme = "README.md"
 requires-python = ">=3.13"
 dependencies = [
+    "fastapi>=0.121.0",
     "openai>=2.6.1",
+    "pydantic>=2.12.3",
     "python-dotenv>=1.2.1",
 ]

uv.lock

@@ -24,6 +24,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/44/1f/38e29b06bfed7818ebba1f84904afdc8153ef7b6c7e0d8f3bc6643f5989c/alembic-1.17.0-py3-none-any.whl", hash = "sha256:80523bc437d41b35c5db7e525ad9d908f79de65c27d6a5a5eab6df348a352d99", size = 247449, upload-time = "2025-10-11T18:40:16.288Z" },
 ]
 
+[[package]]
+name = "annotated-doc"
+version = "0.0.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/d7/a6/dc46877b911e40c00d395771ea710d5e77b6de7bacd5fdcd78d70cc5a48f/annotated_doc-0.0.3.tar.gz", hash = "sha256:e18370014c70187422c33e945053ff4c286f453a984eba84d0dbfa0c935adeda", size = 5535, upload-time = "2025-10-24T14:57:10.718Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/02/b7/cf592cb5de5cb3bade3357f8d2cf42bf103bbe39f459824b4939fd212911/annotated_doc-0.0.3-py3-none-any.whl", hash = "sha256:348ec6664a76f1fd3be81f43dffbee4c7e8ce931ba71ec67cc7f4ade7fbbb580", size = 5488, upload-time = "2025-10-24T14:57:09.462Z" },
+]
+
 [[package]]
 name = "annotated-types"
 version = "0.7.0"
@@ -157,18 +166,86 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/8f/ef/81f3372b5dd35d8d354321155d1a38894b2b766f576d0abffac4d8ae78d9/django-5.2.7-py3-none-any.whl", hash = "sha256:59a13a6515f787dec9d97a0438cd2efac78c8aca1c80025244b0fe507fe0754b", size = 8307145, upload-time = "2025-10-01T14:22:49.476Z" },
 ]
 
+[[package]]
+name = "django-cors-headers"
+version = "4.9.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "asgiref" },
+    { name = "django" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/21/39/55822b15b7ec87410f34cd16ce04065ff390e50f9e29f31d6d116fc80456/django_cors_headers-4.9.0.tar.gz", hash = "sha256:fe5d7cb59fdc2c8c646ce84b727ac2bca8912a247e6e68e1fb507372178e59e8", size = 21458, upload-time = "2025-09-18T10:40:52.326Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/30/d8/19ed1e47badf477d17fb177c1c19b5a21da0fd2d9f093f23be3fb86c5fab/django_cors_headers-4.9.0-py3-none-any.whl", hash = "sha256:15c7f20727f90044dcee2216a9fd7303741a864865f0c3657e28b7056f61b449", size = 12809, upload-time = "2025-09-18T10:40:50.843Z" },
+]
+
+[[package]]
+name = "django-rest"
+version = "0.8.7"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "django" },
+    { name = "six" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/d6/b4/1cdc1632448e252e37335427ec2a8dce470ef0c8dae066c3e3809484b2ac/django-rest-0.8.7.tar.gz", hash = "sha256:24a0eca6aa53864affcab5a880173f701e5387ad4e5885e12c81184432d6e15b", size = 58364, upload-time = "2021-04-20T22:15:40.004Z" }
+
+[[package]]
+name = "djangorestframework"
+version = "3.16.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "django" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/8a/95/5376fe618646fde6899b3cdc85fd959716bb67542e273a76a80d9f326f27/djangorestframework-3.16.1.tar.gz", hash = "sha256:166809528b1aced0a17dc66c24492af18049f2c9420dbd0be29422029cfc3ff7", size = 1089735, upload-time = "2025-08-06T17:50:53.251Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/b0/ce/bf8b9d3f415be4ac5588545b5fcdbbb841977db1c1d923f7568eeabe1689/djangorestframework-3.16.1-py3-none-any.whl", hash = "sha256:33a59f47fb9c85ede792cbf88bde71893bcda0667bc573f784649521f1102cec", size = 1080442, upload-time = "2025-08-06T17:50:50.667Z" },
+]
+
+[[package]]
+name = "djangorestframework-simplejwt"
+version = "5.5.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "django" },
+    { name = "djangorestframework" },
+    { name = "pyjwt" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/a8/27/2874a325c11112066139769f7794afae238a07ce6adf96259f08fd37a9d7/djangorestframework_simplejwt-5.5.1.tar.gz", hash = "sha256:e72c5572f51d7803021288e2057afcbd03f17fe11d484096f40a460abc76e87f", size = 101265, upload-time = "2025-07-21T16:52:25.026Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/60/94/fdfb7b2f0b16cd3ed4d4171c55c1c07a2d1e3b106c5978c8ad0c15b4a48b/djangorestframework_simplejwt-5.5.1-py3-none-any.whl", hash = "sha256:2c30f3707053d384e9f315d11c2daccfcb548d4faa453111ca19a542b732e469", size = 107674, upload-time = "2025-07-21T16:52:07.493Z" },
+]
+
+[[package]]
+name = "fastapi"
+version = "0.121.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "annotated-doc" },
+    { name = "pydantic" },
+    { name = "starlette" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/8c/e3/77a2df0946703973b9905fd0cde6172c15e0781984320123b4f5079e7113/fastapi-0.121.0.tar.gz", hash = "sha256:06663356a0b1ee93e875bbf05a31fb22314f5bed455afaaad2b2dad7f26e98fa", size = 342412, upload-time = "2025-11-03T10:25:54.818Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/dd/2c/42277afc1ba1a18f8358561eee40785d27becab8f80a1f945c0a3051c6eb/fastapi-0.121.0-py3-none-any.whl", hash = "sha256:8bdf1b15a55f4e4b0d6201033da9109ea15632cb76cf156e7b8b4019f2172106", size = 109183, upload-time = "2025-11-03T10:25:53.27Z" },
+]
+
 [[package]]
 name = "gpt-service"
 version = "0.1.0"
 source = { virtual = "services/gpt_service" }
 dependencies = [
+    { name = "fastapi" },
     { name = "openai" },
+    { name = "pydantic" },
     { name = "python-dotenv" },
 ]
 
 [package.metadata]
 requires-dist = [
+    { name = "fastapi", specifier = ">=0.121.0" },
     { name = "openai", specifier = ">=2.6.1" },
+    { name = "pydantic", specifier = ">=2.12.3" },
     { name = "python-dotenv", specifier = ">=1.2.1" },
 ]
 
@@ -186,6 +263,8 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/ee/43/3cecdc0349359e1a527cbf2e3e28e5f8f06d3343aaf82ca13437a9aa290f/greenlet-3.2.4-cp313-cp313-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:23768528f2911bcd7e475210822ffb5254ed10d71f4028387e5a99b4c6699671", size = 610497, upload-time = "2025-08-07T13:18:31.636Z" },
     { url = "https://files.pythonhosted.org/packages/b8/19/06b6cf5d604e2c382a6f31cafafd6f33d5dea706f4db7bdab184bad2b21d/greenlet-3.2.4-cp313-cp313-musllinux_1_1_aarch64.whl", hash = "sha256:00fadb3fedccc447f517ee0d3fd8fe49eae949e1cd0f6a611818f4f6fb7dc83b", size = 1121662, upload-time = "2025-08-07T13:42:41.117Z" },
     { url = "https://files.pythonhosted.org/packages/a2/15/0d5e4e1a66fab130d98168fe984c509249c833c1a3c16806b90f253ce7b9/greenlet-3.2.4-cp313-cp313-musllinux_1_1_x86_64.whl", hash = "sha256:d25c5091190f2dc0eaa3f950252122edbbadbb682aa7b1ef2f8af0f8c0afefae", size = 1149210, upload-time = "2025-08-07T13:18:24.072Z" },
+    { url = "https://files.pythonhosted.org/packages/1c/53/f9c440463b3057485b8594d7a638bed53ba531165ef0ca0e6c364b5cc807/greenlet-3.2.4-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:6e343822feb58ac4d0a1211bd9399de2b3a04963ddeec21530fc426cc121f19b", size = 1564759, upload-time = "2025-11-04T12:42:19.395Z" },
+    { url = "https://files.pythonhosted.org/packages/47/e4/3bb4240abdd0a8d23f4f88adec746a3099f0d86bfedb623f063b2e3b4df0/greenlet-3.2.4-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:ca7f6f1f2649b89ce02f6f229d7c19f680a6238af656f61e0115b24857917929", size = 1634288, upload-time = "2025-11-04T12:42:21.174Z" },
     { url = "https://files.pythonhosted.org/packages/0b/55/2321e43595e6801e105fcfdee02b34c0f996eb71e6ddffca6b10b7e1d771/greenlet-3.2.4-cp313-cp313-win_amd64.whl", hash = "sha256:554b03b6e73aaabec3745364d6239e9e012d64c68ccd0b8430c64ccc14939a8b", size = 299685, upload-time = "2025-08-07T13:24:38.824Z" },
     { url = "https://files.pythonhosted.org/packages/22/5c/85273fd7cc388285632b0498dbbab97596e04b154933dfe0f3e68156c68c/greenlet-3.2.4-cp314-cp314-macosx_11_0_universal2.whl", hash = "sha256:49a30d5fda2507ae77be16479bdb62a660fa51b1eb4928b524975b3bde77b3c0", size = 273586, upload-time = "2025-08-07T13:16:08.004Z" },
     { url = "https://files.pythonhosted.org/packages/d1/75/10aeeaa3da9332c2e761e4c50d4c3556c21113ee3f0afa2cf5769946f7a3/greenlet-3.2.4-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:299fd615cd8fc86267b47597123e3f43ad79c9d8a22bebdce535e53550763e2f", size = 686346, upload-time = "2025-08-07T13:42:59.944Z" },
@@ -193,6 +272,8 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/dc/8b/29aae55436521f1d6f8ff4e12fb676f3400de7fcf27fccd1d4d17fd8fecd/greenlet-3.2.4-cp314-cp314-manylinux2014_s390x.manylinux_2_17_s390x.whl", hash = "sha256:b4a1870c51720687af7fa3e7cda6d08d801dae660f75a76f3845b642b4da6ee1", size = 694659, upload-time = "2025-08-07T13:53:17.759Z" },
     { url = "https://files.pythonhosted.org/packages/92/2e/ea25914b1ebfde93b6fc4ff46d6864564fba59024e928bdc7de475affc25/greenlet-3.2.4-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:061dc4cf2c34852b052a8620d40f36324554bc192be474b9e9770e8c042fd735", size = 695355, upload-time = "2025-08-07T13:18:34.517Z" },
     { url = "https://files.pythonhosted.org/packages/72/60/fc56c62046ec17f6b0d3060564562c64c862948c9d4bc8aa807cf5bd74f4/greenlet-3.2.4-cp314-cp314-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:44358b9bf66c8576a9f57a590d5f5d6e72fa4228b763d0e43fee6d3b06d3a337", size = 657512, upload-time = "2025-08-07T13:18:33.969Z" },
+    { url = "https://files.pythonhosted.org/packages/23/6e/74407aed965a4ab6ddd93a7ded3180b730d281c77b765788419484cdfeef/greenlet-3.2.4-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:2917bdf657f5859fbf3386b12d68ede4cf1f04c90c3a6bc1f013dd68a22e2269", size = 1612508, upload-time = "2025-11-04T12:42:23.427Z" },
+    { url = "https://files.pythonhosted.org/packages/0d/da/343cd760ab2f92bac1845ca07ee3faea9fe52bee65f7bcb19f16ad7de08b/greenlet-3.2.4-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:015d48959d4add5d6c9f6c5210ee3803a830dce46356e3bc326d6776bde54681", size = 1680760, upload-time = "2025-11-04T12:42:25.341Z" },
     { url = "https://files.pythonhosted.org/packages/e3/a5/6ddab2b4c112be95601c13428db1d8b6608a8b6039816f2ba09c346c08fc/greenlet-3.2.4-cp314-cp314-win_amd64.whl", hash = "sha256:e37ab26028f12dbb0ff65f29a8d3d44a765c61e729647bf2ddfbbed621726f01", size = 303425, upload-time = "2025-08-07T13:32:27.59Z" },
 ]
 
@@ -249,6 +330,10 @@ source = { virtual = "." }
 dependencies = [
     { name = "alembic" },
     { name = "django" },
+    { name = "django-cors-headers" },
+    { name = "django-rest" },
+    { name = "djangorestframework" },
+    { name = "djangorestframework-simplejwt" },
     { name = "openai" },
     { name = "paho-mqtt" },
     { name = "psycopg2-binary" },
@@ -266,6 +351,10 @@ dev = [
 requires-dist = [
     { name = "alembic", specifier = ">=1.17.0" },
     { name = "django", specifier = ">=5.2.7" },
+    { name = "django-cors-headers", specifier = ">=4.9.0" },
+    { name = "django-rest", specifier = ">=0.8.7" },
+    { name = "djangorestframework", specifier = ">=3.16.1" },
+    { name = "djangorestframework-simplejwt", specifier = ">=5.5.1" },
     { name = "openai", specifier = ">=2.6.1" },
     { name = "paho-mqtt", specifier = ">=2.1.0" },
     { name = "psycopg2-binary", specifier = ">=2.9.11" },
@@ -514,6 +603,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/8a/ac/9fc61b4f9d079482a290afe8d206b8f490e9fd32d4fc03ed4fc698214e01/pydantic_core-2.41.4-cp314-cp314t-win_arm64.whl", hash = "sha256:d34f950ae05a83e0ede899c595f312ca976023ea1db100cd5aa188f7005e3ab0", size = 1973897, upload-time = "2025-10-14T10:22:13.444Z" },
 ]
 
+[[package]]
+name = "pyjwt"
+version = "2.10.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/e7/46/bd74733ff231675599650d3e47f361794b22ef3e3770998dda30d3b63726/pyjwt-2.10.1.tar.gz", hash = "sha256:3cc5772eb20009233caf06e9d8a0577824723b44e6648ee0a2aedb6cf9381953", size = 87785, upload-time = "2024-11-28T03:43:29.933Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/61/ad/689f02752eeec26aed679477e80e632ef1b682313be70793d798c1d5fc8f/PyJWT-2.10.1-py3-none-any.whl", hash = "sha256:dcdd193e30abefd5debf142f9adfcdd2b58004e644f25406ffaebd50bd98dacb", size = 22997, upload-time = "2024-11-28T03:43:27.893Z" },
+]
+
 [[package]]
 name = "python-dotenv"
 version = "1.2.1"
@@ -573,6 +671,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/2e/5d/aa883766f8ef9ffbe6aa24f7192fb71632f31a30e77eb39aa2b0dc4290ac/ruff-0.14.2-py3-none-win_arm64.whl", hash = "sha256:ea9d635e83ba21569fbacda7e78afbfeb94911c9434aff06192d9bc23fd5495a", size = 12554956, upload-time = "2025-10-23T19:36:58.714Z" },
 ]
 
+[[package]]
+name = "six"
+version = "1.17.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/94/e7/b2c673351809dca68a0e064b6af791aa332cf192da575fd474ed7d6f16a2/six-1.17.0.tar.gz", hash = "sha256:ff70335d468e7eb6ec65b95b99d3a2836546063f63acc5171de367e834932a81", size = 34031, upload-time = "2024-12-04T17:35:28.174Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/b7/ce/149a00dd41f10bc29e5921b496af8b574d8413afcd5e30dfa0ed46c2cc5e/six-1.17.0-py2.py3-none-any.whl", hash = "sha256:4721f391ed90541fddacab5acf947aa0d3dc7d27b2e1e8eda2be8970586c3274", size = 11050, upload-time = "2024-12-04T17:35:26.475Z" },
+]
+
 [[package]]
 name = "sniffio"
 version = "1.3.1"
@@ -612,6 +719,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/a9/5c/bfd6bd0bf979426d405cc6e71eceb8701b148b16c21d2dc3c261efc61c7b/sqlparse-0.5.3-py3-none-any.whl", hash = "sha256:cf2196ed3418f3ba5de6af7e82c694a9fbdbfecccdfc72e281548517081f16ca", size = 44415, upload-time = "2024-12-10T12:05:27.824Z" },
 ]
 
+[[package]]
+name = "starlette"
+version = "0.49.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "anyio" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/de/1a/608df0b10b53b0beb96a37854ee05864d182ddd4b1156a22f1ad3860425a/starlette-0.49.3.tar.gz", hash = "sha256:1c14546f299b5901a1ea0e34410575bc33bbd741377a10484a54445588d00284", size = 2655031, upload-time = "2025-11-01T15:12:26.13Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/a3/e0/021c772d6a662f43b63044ab481dc6ac7592447605b5b35a957785363122/starlette-0.49.3-py3-none-any.whl", hash = "sha256:b579b99715fdc2980cf88c8ec96d3bf1ce16f5a8051a7c2b84ef9b1cdecaea2f", size = 74340, upload-time = "2025-11-01T15:12:24.387Z" },
+]
+
 [[package]]
 name = "tqdm"
 version = "4.67.1"