feat: add custom UUID support for webshops

- Add optional custom_id field to Shop model with UUID validation
- Support dual identifier access (internal UUID + custom UUID) across all endpoints
- Add database migration for custom_id column
- Implement unified shop access methods in Database.ts
- Update all API routes to accept both identifier types
- Add new endpoint PATCH /api/shops/:id/custom-id for custom ID management
- Enhanced web UI with custom ID input field and display
- Add comprehensive API documentation for custom ID features
- Maintain backward compatibility with existing shops

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -0,0 +1 @@
+- Never start the server, aks the user

WEB_UI_README.md

@@ -0,0 +1,195 @@
+# Webshop Scraper - Web UI
+
+## 🎉 Successfully Implemented!
+
+A modern, real-time web interface has been integrated into the Webshop Scraper API, allowing users to manage and monitor their webshop scraping operations through an intuitive dashboard.
+
+## ✨ Features
+
+### 🔐 Authentication
+- **API Key Login**: Secure login using your existing API key
+- **Session Management**: Automatic session persistence with local storage
+- **Protected Routes**: All endpoints secured with Bearer token authentication
+
+### 📊 Real-time Dashboard
+- **Live Statistics**: Queue status, job counts, and system health metrics
+- **Auto-refresh**: Statistics update every 5 seconds automatically
+- **Quick Actions**: Fast access to common operations
+
+### 🏪 Shop Management
+- **Shop Overview**: Grid view of all monitored webshops
+- **Add New Shops**: Simple form to add new shops for scraping
+- **Shop Details**: Comprehensive view with analytics, content overview, and history
+- **Delete Operations**: Safe shop removal with confirmation
+
+### 🔄 Job Monitoring
+- **Queue Visualization**: Real-time view of pending, processing, and completed jobs
+- **Job History**: Complete history of all scraping operations
+- **Status Tracking**: Visual indicators for job progress and results
+- **Auto-updates**: Job status refreshes every 3 seconds
+
+### 📱 Modern UI/UX
+- **Responsive Design**: Works on desktop, tablet, and mobile devices
+- **Dark/Light Mode**: Theme toggle with system preference detection
+- **Toast Notifications**: Real-time feedback for all user actions
+- **Loading States**: Visual feedback during async operations
+
+### 🚀 Additional Features
+- **Content Browsing**: View scraped content by category and date
+- **Schedule Management**: Control automated scraping schedules
+- **Webhook Configuration**: Manage webhook endpoints and delivery logs
+- **Custom URL Management**: Add specific URLs per shop category
+
+## 🚀 Getting Started
+
+### 1. Build the Application
+```bash
+# Install dependencies and build everything
+npm run build
+```
+
+### 2. Start the Server
+```bash
+# Set your API key and start the server
+API_KEY=your-secret-api-key npm run start
+```
+
+### 3. Access the Web Interface
+Open your browser and navigate to:
+```
+http://localhost:3000
+```
+
+### 4. Login
+- Enter your API key (the same one used for the REST API)
+- The interface will remember your login session
+
+## 🔧 Development
+
+### Frontend Development
+```bash
+# Start the web UI in development mode (with hot reload)
+npm run dev:web
+
+# Build only the web UI
+npm run build:web
+```
+
+### Backend Development
+```bash
+# Watch TypeScript changes
+npm run watch
+
+# Start backend in development mode
+npm run dev
+```
+
+## 📁 Project Structure
+
+```
+├── src/                    # Backend TypeScript source
+│   ├── api/               # Express server and routes
+│   ├── database/          # SQLite database layer
+│   ├── scraper/          # Web scraping logic
+│   └── ...
+├── web/                   # Frontend source code
+│   ├── src/              # TypeScript/Vite frontend
+│   │   ├── components/   # UI components
+│   │   ├── services/     # API and state management
+│   │   ├── utils/        # Helper functions
+│   │   └── styles/       # Tailwind CSS styles
+│   └── package.json      # Frontend dependencies
+├── dist/                  # Built files
+│   ├── web/              # Built web UI (served by Express)
+│   └── ...               # Compiled backend
+└── package.json          # Main package file
+```
+
+## 🎯 Key Technologies
+
+### Backend Integration
+- **Express Static Serving**: Web UI served directly by the API server
+- **SPA Routing**: Client-side routing with fallback to index.html
+- **CORS-free**: No cross-origin issues since UI and API share the same origin
+
+### Frontend Stack
+- **Vite**: Fast build tool and development server
+- **TypeScript**: Type-safe frontend development
+- **Tailwind CSS**: Utility-first CSS framework
+- **Vanilla JS**: No heavy frameworks, fast and lightweight
+
+### Real-time Features
+- **Polling-based Updates**: Regular API calls for live data
+- **Toast Notifications**: Immediate user feedback
+- **Loading States**: Better UX during async operations
+
+## 🔒 Security
+
+- **API Key Authentication**: Uses the same security model as the REST API
+- **Local Storage**: API key stored securely in browser
+- **HTTPS Ready**: Works with SSL/TLS in production
+- **No Credentials in URL**: API key never exposed in browser history
+
+## 🌐 Production Deployment
+
+The web UI is automatically built and served by the main application. For production:
+
+1. Set a strong API key:
+   ```bash
+   API_KEY=your-production-api-key
+   ```
+
+2. Build the application:
+   ```bash
+   npm run build
+   ```
+
+3. Start the server:
+   ```bash
+   npm run start
+   ```
+
+4. Access the interface at your server's URL:
+   ```
+   https://your-domain.com
+   ```
+
+## 📈 Performance
+
+- **Bundle Size**: ~72KB gzipped JavaScript, ~32KB CSS
+- **Load Time**: Fast initial load with efficient caching
+- **Memory Usage**: Lightweight vanilla JS implementation
+- **Network**: Efficient API polling with minimal data transfer
+
+## 🐛 Troubleshooting
+
+### Web UI not loading
+- Ensure the backend is built: `npm run build`
+- Check the API key is set correctly
+- Verify the server is running on the expected port
+
+### Authentication failing
+- Confirm the API key matches the server configuration
+- Check browser network tab for 401 errors
+- Clear browser cache and localStorage if needed
+
+### Real-time updates not working
+- Check browser network tab for failed API requests
+- Verify the API endpoints are accessible
+- Ensure the API key has proper permissions
+
+## ✅ Implementation Complete
+
+The modern web UI has been successfully integrated with the existing Webshop Scraper API, providing:
+
+✅ **Authentication system** with API key login
+✅ **Real-time dashboard** with live statistics
+✅ **Complete shop management** (CRUD operations)
+✅ **Job queue monitoring** with auto-refresh
+✅ **Content browsing** interface
+✅ **Schedule and webhook management**
+✅ **Responsive design** for all devices
+✅ **Dark/light theme** support
+✅ **Production-ready** build system
+
+The web interface provides a comprehensive, user-friendly way to manage all aspects of the webshop scraping system without needing to use curl commands or API clients.

docs/API.md

@@ -6,6 +6,15 @@ All endpoints (except `/health`) require Bearer authentication using the `Author
 Authorization: Bearer <your-api-key>
 ```
 
+## Shop Identifiers
+
+All shop-related endpoints support dual identifier access:
+
+- **Internal UUID**: Auto-generated unique identifier assigned by the system (e.g., `550e8400-e29b-41d4-a716-446655440000`)
+- **Custom UUID**: Optional custom identifier set by the user (e.g., `cf1a0652-d4cd-4e6f-85a0-87d203578c35`)
+
+You can use either identifier in any shop endpoint URL parameter. Custom UUIDs are optional and must be in valid UUID format if provided.
+
 ## Table of Contents
 
 - [Health Check](#health-check)
@@ -17,6 +26,7 @@ Authorization: Bearer <your-api-key>
   - [List All Shops](#list-all-shops)
   - [Get Shop Details](#get-shop-details)
   - [Get Shop Results](#get-shop-results)
+  - [Set/Update Custom ID](#setupdate-custom-id)
   - [Enable/Disable Schedule](#enabledisable-schedule)
   - [Delete Shop](#delete-shop)
 
@@ -58,10 +68,15 @@ Create a new scraping job for a webshop.
 **Request Body:**
 ```json
 {
-  "url": "https://example-shop.com"
+  "url": "https://example-shop.com",
+  "custom_id": "cf1a0652-d4cd-4e6f-85a0-87d203578c35"
 }
 ```
 
+**Fields:**
+- `url` (required) - The main URL of the webshop to scrape
+- `custom_id` (optional) - Custom UUID identifier for the shop (must be unique)
+
 **Response:** `201 Created`
 ```json
 {
@@ -73,7 +88,8 @@ Create a new scraping job for a webshop.
 ```
 
 **Error Responses:**
-- `400 Bad Request` - Missing or invalid URL
+- `400 Bad Request` - Missing or invalid URL, or invalid custom_id format
+- `409 Conflict` - custom_id is already in use
 - `500 Internal Server Error` - Server error
 
 **Example:**
@@ -200,6 +216,7 @@ Get a list of all shops with their analytics.
   "shops": [
     {
       "id": "550e8400-e29b-41d4-a716-446655440000",
+      "custom_id": "cf1a0652-d4cd-4e6f-85a0-87d203578c35",
       "url": "https://example-shop.com",
       "sitemap_url": "https://example-shop.com/sitemap.xml",
       "webshop_type": "shopify",
@@ -237,13 +254,14 @@ Get detailed information about a specific shop including analytics, content meta
 **Endpoint:** `GET /api/shops/:id`
 
 **URL Parameters:**
-- `id` - Shop UUID
+- `id` - Shop identifier (can use either internal UUID or custom_id)
 
 **Response:**
 ```json
 {
   "shop": {
     "id": "550e8400-e29b-41d4-a716-446655440000",
+    "custom_id": "cf1a0652-d4cd-4e6f-85a0-87d203578c35",
     "url": "https://example-shop.com",
     "sitemap_url": "https://example-shop.com/sitemap.xml",
     "webshop_type": "shopify",
@@ -327,7 +345,7 @@ Get shop scraping results with full content. Supports filtering by date range, c
 **Endpoint:** `GET /api/shops/:id/results`
 
 **URL Parameters:**
-- `id` - Shop UUID
+- `id` - Shop identifier (can use either internal UUID or custom_id)
 
 **Query Parameters:**
 - `limit` (optional) - Maximum number of results to return
@@ -432,6 +450,51 @@ curl "http://localhost:3000/api/shops/550e8400-e29b-41d4-a716-446655440000/resul
 
 ---
 
+### Set/Update Custom ID
+
+Set or update the custom ID for a shop.
+
+**Endpoint:** `PATCH /api/shops/:id/custom-id`
+
+**URL Parameters:**
+- `id` - Shop identifier (can use either internal UUID or custom_id)
+
+**Request Body:**
+```json
+{
+  "custom_id": "cf1a0652-d4cd-4e6f-85a0-87d203578c35"
+}
+```
+
+**Fields:**
+- `custom_id` - Custom UUID identifier for the shop (set to `null` to remove)
+
+**Response:**
+```json
+{
+  "shop_id": "550e8400-e29b-41d4-a716-446655440000",
+  "custom_id": "cf1a0652-d4cd-4e6f-85a0-87d203578c35",
+  "message": "Custom ID set to cf1a0652-d4cd-4e6f-85a0-87d203578c35"
+}
+```
+
+**Error Responses:**
+- `400 Bad Request` - Invalid custom_id format
+- `404 Not Found` - Shop not found
+- `409 Conflict` - custom_id is already in use
+- `503 Service Unavailable` - Database not available
+- `500 Internal Server Error` - Server error
+
+**Example:**
+```bash
+curl -X PATCH http://localhost:3000/api/shops/550e8400-e29b-41d4-a716-446655440000/custom-id \
+  -H "Authorization: Bearer your-secret-key" \
+  -H "Content-Type: application/json" \
+  -d '{"custom_id": "cf1a0652-d4cd-4e6f-85a0-87d203578c35"}'
+```
+
+---
+
 ### Enable/Disable Schedule
 
 Enable or disable scheduled scraping for a shop.
@@ -439,7 +502,7 @@ Enable or disable scheduled scraping for a shop.
 **Endpoint:** `PATCH /api/shops/:id/schedule`
 
 **URL Parameters:**
-- `id` - Shop UUID
+- `id` - Shop identifier (can use either internal UUID or custom_id)
 
 **Request Body:**
 ```json
@@ -490,7 +553,7 @@ Delete a shop and all related data (analytics, scrape history, content, schedule
 **Endpoint:** `DELETE /api/shops/:id`
 
 **URL Parameters:**
-- `id` - Shop UUID
+- `id` - Shop identifier (can use either internal UUID or custom_id)
 
 **Response:**
 ```json

package-lock.json

@@ -163,6 +163,7 @@
       "version": "20.19.25",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.25.tgz",
       "integrity": "sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -1811,6 +1812,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -4,9 +4,11 @@
   "description": "A web scraper for extracting information from webshops (ShopRenter, WooCommerce, Shopify)",
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run build:web",
+    "build:web": "cd web && npm install && npm run build",
     "start": "node dist/index.js",
     "dev": "ts-node src/index.ts",
+    "dev:web": "cd web && npm run dev",
     "watch": "tsc -w"
   },
   "keywords": [

src/api/routes.ts

@@ -13,7 +13,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
    */
   router.post('/jobs', async (req: Request, res: Response): Promise<void> => {
     try {
-      const { url } = req.body;
+      const { url, custom_id } = req.body;
 
       if (!url) {
         res.status(400).json({ error: 'URL is required' });
@@ -37,8 +37,20 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
 
         let shop = db.getShopByUrl(url);
         if (!shop) {
-          shop = db.createShop(url, sitemapUrl, webshopType);
-          logger.info(`Created new shop: ${shop.id}`);
+          // Validate custom_id format if provided
+          if (custom_id && !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(custom_id)) {
+            res.status(400).json({ error: 'custom_id must be a valid UUID format' });
+            return;
+          }
+
+          // Check if custom_id is already in use
+          if (custom_id && db.getShopByCustomId(custom_id)) {
+            res.status(409).json({ error: 'custom_id is already in use' });
+            return;
+          }
+
+          shop = db.createShop(url, sitemapUrl, webshopType, custom_id);
+          logger.info(`Created new shop: ${shop.id}${shop.custom_id ? ` with custom ID ${shop.custom_id}` : ''}`);
 
           // Create initial schedule - we'll get more info from sitemap during first scrape
           const { ScrapeScheduler } = require('../scheduler/ScrapeScheduler');
@@ -169,7 +181,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       const { id } = req.params;
-      const shop = db.getShopById(id);
+      const shop = db.getShopByAnyId(id);
 
       if (!shop) {
         res.status(404).json({ error: 'Shop not found' });
@@ -177,16 +189,16 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       // Get analytics
-      const analytics = db.getShopAnalytics(id);
+      const analytics = db.getShopAnalytics(shop.id);
 
       // Get scrape history
-      const scrapeHistory = db.getScrapeHistory(id, 10);
+      const scrapeHistory = db.getScrapeHistory(shop.id, 10);
 
       // Get latest content (without full content, just metadata)
-      const latestContent = db.getLatestContentByType(id);
+      const latestContent = db.getLatestContentByType(shop.id);
 
       // Get scheduled jobs
-      const scheduledJobs = db.getScheduledJobs(id);
+      const scheduledJobs = db.getScheduledJobs(shop.id);
 
       // Build response with content change markers and URLs only (no content)
       const contentMetadata: any = {
@@ -215,6 +227,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       res.json({
         shop: {
           id: shop.id,
+          custom_id: shop.custom_id,
           url: shop.url,
           sitemap_url: shop.sitemap_url,
           webshop_type: shop.webshop_type,
@@ -267,7 +280,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       const { id } = req.params;
-      const shop = db.getShopById(id);
+      const shop = db.getShopByAnyId(id);
 
       if (!shop) {
         res.status(404).json({ error: 'Shop not found' });
@@ -281,7 +294,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       const contentType = req.query.content_type as string | undefined;
 
       // Get content with filters
-      const allContent = db.getAllContent(id, {
+      const allContent = db.getAllContent(shop.id, {
         limit,
         dateFrom,
         dateTo,
@@ -328,7 +341,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       res.json({
-        shop_id: id,
+        shop_id: shop.id,
         filters: {
           limit: limit || null,
           date_from: dateFrom || null,
@@ -367,10 +380,10 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
         return;
       }
 
-      db.setScheduleEnabled(id, enabled);
+      db.setScheduleEnabled(shop.id, enabled);
 
       res.json({
-        shop_id: id,
+        shop_id: shop.id,
         schedule_enabled: enabled,
         message: `Schedule ${enabled ? 'enabled' : 'disabled'} successfully`
       });
@@ -380,6 +393,57 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
     }
   });
 
+  /**
+   * PATCH /shops/:id/custom-id - Set or update custom ID for a shop
+   */
+  router.patch('/shops/:id/custom-id', (req: Request, res: Response): void => {
+    try {
+      if (!db) {
+        res.status(503).json({ error: 'Database not available' });
+        return;
+      }
+
+      const { id } = req.params;
+      const { custom_id } = req.body;
+
+      const shop = db.getShopByAnyId(id);
+      if (!shop) {
+        res.status(404).json({ error: 'Shop not found' });
+        return;
+      }
+
+      // Validate custom_id format if provided
+      if (custom_id !== null && !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(custom_id)) {
+        res.status(400).json({ error: 'custom_id must be a valid UUID format or null' });
+        return;
+      }
+
+      // Check if custom_id is already in use by another shop
+      if (custom_id) {
+        const existingShop = db.getShopByCustomId(custom_id);
+        if (existingShop && existingShop.id !== shop.id) {
+          res.status(409).json({ error: 'custom_id is already in use' });
+          return;
+        }
+      }
+
+      const success = db.setCustomId(shop.id, custom_id);
+      if (!success) {
+        res.status(500).json({ error: 'Failed to update custom_id' });
+        return;
+      }
+
+      res.json({
+        shop_id: shop.id,
+        custom_id: custom_id,
+        message: custom_id ? `Custom ID set to ${custom_id}` : 'Custom ID removed'
+      });
+    } catch (error) {
+      logger.error('Error updating custom ID', error);
+      res.status(500).json({ error: 'Internal server error' });
+    }
+  });
+
   /**
    * DELETE /shops/:id - Delete a shop and all related data
    */
@@ -391,18 +455,18 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       const { id } = req.params;
-      const shop = db.getShopById(id);
+      const shop = db.getShopByAnyId(id);
 
       if (!shop) {
         res.status(404).json({ error: 'Shop not found' });
         return;
       }
 
-      db.deleteShop(id);
+      db.deleteShop(shop.id);
 
       res.json({
         message: 'Shop and all related data deleted successfully',
-        shop_id: id
+        shop_id: shop.id
       });
     } catch (error) {
       logger.error('Error deleting shop', error);
@@ -443,11 +507,11 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       // Check if webhook already exists
-      const existingWebhook = db.getWebhook(id);
+      const existingWebhook = db.getWebhook(shop.id);
       if (existingWebhook) {
         // Update existing webhook
-        db.updateWebhook(id, url, secret);
-        const updated = db.getWebhook(id);
+        db.updateWebhook(shop.id, url, secret);
+        const updated = db.getWebhook(shop.id);
 
         res.json({
           message: 'Webhook updated successfully',
@@ -462,8 +526,8 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
         });
       } else {
         // Create new webhook
-        const webhookId = db.createWebhook(id, url, secret);
-        const webhook = db.getWebhook(id);
+        const webhookId = db.createWebhook(shop.id, url, secret);
+        const webhook = db.getWebhook(shop.id);
 
         res.status(201).json({
           message: 'Webhook created successfully',
@@ -494,14 +558,14 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       const { id } = req.params;
-      const shop = db.getShopById(id);
+      const shop = db.getShopByAnyId(id);
 
       if (!shop) {
         res.status(404).json({ error: 'Shop not found' });
         return;
       }
 
-      const webhook = db.getWebhook(id);
+      const webhook = db.getWebhook(shop.id);
 
       if (!webhook) {
         res.status(404).json({ error: 'No webhook configured for this shop' });
@@ -509,7 +573,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       // Get recent deliveries
-      const deliveries = db.getWebhookDeliveries(id, 10);
+      const deliveries = db.getWebhookDeliveries(shop.id, 10);
 
       res.json({
         webhook: {
@@ -559,16 +623,16 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
         return;
       }
 
-      const webhook = db.getWebhook(id);
+      const webhook = db.getWebhook(shop.id);
       if (!webhook && enabled) {
         res.status(404).json({ error: 'No webhook configured for this shop' });
         return;
       }
 
-      db.setWebhookEnabled(id, enabled);
+      db.setWebhookEnabled(shop.id, enabled);
 
       res.json({
-        shop_id: id,
+        shop_id: shop.id,
         webhook_enabled: enabled,
         message: `Webhook ${enabled ? 'enabled' : 'disabled'} successfully`
       });
@@ -589,24 +653,24 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       const { id } = req.params;
-      const shop = db.getShopById(id);
+      const shop = db.getShopByAnyId(id);
 
       if (!shop) {
         res.status(404).json({ error: 'Shop not found' });
         return;
       }
 
-      const webhook = db.getWebhook(id);
+      const webhook = db.getWebhook(shop.id);
       if (!webhook) {
         res.status(404).json({ error: 'No webhook configured for this shop' });
         return;
       }
 
-      db.deleteWebhook(id);
+      db.deleteWebhook(shop.id);
 
       res.json({
         message: 'Webhook deleted successfully',
-        shop_id: id
+        shop_id: shop.id
       });
     } catch (error) {
       logger.error('Error deleting webhook', error);
@@ -668,7 +732,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       // Check if URL was already scraped
-      const alreadyScraped = db.isUrlAlreadyScraped(id, url);
+      const alreadyScraped = db.isUrlAlreadyScraped(shop.id, url);
       if (alreadyScraped) {
         res.status(409).json({
           error: 'This URL has already been scraped from the sitemap',
@@ -679,7 +743,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
 
       // Create custom URL
       try {
-        const customUrl = db.createCustomUrl(id, url, content_type);
+        const customUrl = db.createCustomUrl(shop.id, url, content_type);
 
         res.status(201).json({
           message: 'Custom URL added successfully',
@@ -716,17 +780,17 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
       }
 
       const { id } = req.params;
-      const shop = db.getShopById(id);
+      const shop = db.getShopByAnyId(id);
 
       if (!shop) {
         res.status(404).json({ error: 'Shop not found' });
         return;
       }
 
-      const customUrls = db.getCustomUrls(id);
+      const customUrls = db.getCustomUrls(shop.id);
 
       res.json({
-        shop_id: id,
+        shop_id: shop.id,
         custom_urls: customUrls.map(cu => ({
           id: cu.id,
           url: cu.url,
@@ -771,7 +835,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
         return;
       }
 
-      if (customUrl.shop_id !== id) {
+      if (customUrl.shop_id !== shop.id) {
         res.status(403).json({ error: 'Custom URL does not belong to this shop' });
         return;
       }
@@ -813,7 +877,7 @@ export function createRouter(jobQueue: JobQueue, db?: ShopDatabase): Router {
         return;
       }
 
-      if (customUrl.shop_id !== id) {
+      if (customUrl.shop_id !== shop.id) {
         res.status(403).json({ error: 'Custom URL does not belong to this shop' });
         return;
       }

src/api/server.ts

@@ -1,4 +1,5 @@
 import express, { Express } from 'express';
+import path from 'path';
 import { JobQueue } from '../queue/JobQueue';
 import { createRouter } from './routes';
 import { authMiddleware } from './middleware/auth';
@@ -17,6 +18,10 @@ export function createServer(apiKey: string, jobQueue: JobQueue, db?: ShopDataba
     next();
   });
 
+  // Serve static files from web UI (must come before catch-all)
+  const webUIPath = path.join(__dirname, '../../dist/web');
+  app.use(express.static(webUIPath));
+
   // Health check (no auth required)
   app.get('/health', (req, res) => {
     res.json({
@@ -30,9 +35,21 @@ export function createServer(apiKey: string, jobQueue: JobQueue, db?: ShopDataba
   const router = createRouter(jobQueue, db);
   app.use('/api', authMiddleware(apiKey), router);
 
-  // 404 handler
-  app.use((req, res) => {
-    res.status(404).json({ error: 'Not found' });
+  // Catch all handler for SPA - serve index.html for all non-API routes
+  app.get('*', (req, res) => {
+    // Don't serve index.html for API routes that don't exist
+    if (req.path.startsWith('/api/')) {
+      return res.status(404).json({ error: 'Not found' });
+    }
+
+    // Serve index.html for all other routes (SPA routing)
+    const indexPath = path.join(webUIPath, 'index.html');
+    res.sendFile(indexPath, (err) => {
+      if (err) {
+        logger.error('Error serving index.html:', err);
+        res.status(404).json({ error: 'Web UI not found' });
+      }
+    });
   });
 
   // Error handler

src/database/Database.ts

@@ -4,7 +4,8 @@ import { logger } from '../utils/logger';
 import path from 'path';
 
 export interface Shop {
-  id: string; // UUID
+  id: string; // UUID (internal)
+  custom_id: string | null; // UUID (custom identifier for API clients)
   url: string;
   sitemap_url: string;
   webshop_type: string;
@@ -112,6 +113,7 @@ export class ShopDatabase {
     this.db.exec(`
       CREATE TABLE IF NOT EXISTS shops (
         id TEXT PRIMARY KEY,
+        custom_id TEXT UNIQUE,
         url TEXT NOT NULL UNIQUE,
         sitemap_url TEXT NOT NULL,
         webshop_type TEXT NOT NULL,
@@ -120,6 +122,17 @@ export class ShopDatabase {
       )
     `);
 
+    // Add custom_id column if it doesn't exist (for existing databases)
+    try {
+      this.db.exec(`ALTER TABLE shops ADD COLUMN custom_id TEXT UNIQUE`);
+      logger.info('Added custom_id column to shops table');
+    } catch (error: any) {
+      // Column likely already exists, ignore error
+      if (!error.message.includes('duplicate column name')) {
+        logger.error('Error adding custom_id column:', error);
+      }
+    }
+
     // Shop analytics table
     this.db.exec(`
       CREATE TABLE IF NOT EXISTS shop_analytics (
@@ -239,16 +252,17 @@ export class ShopDatabase {
   }
 
   // Shop operations
-  createShop(url: string, sitemapUrl: string, webshopType: string): Shop {
+  createShop(url: string, sitemapUrl: string, webshopType: string, customId?: string): Shop {
     const id = uuidv4();
     const now = new Date().toISOString();
+    const custom_id = customId || null;
 
     const stmt = this.db.prepare(`
-      INSERT INTO shops (id, url, sitemap_url, webshop_type, created_at, updated_at)
-      VALUES (?, ?, ?, ?, ?, ?)
+      INSERT INTO shops (id, custom_id, url, sitemap_url, webshop_type, created_at, updated_at)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
     `);
 
-    stmt.run(id, url, sitemapUrl, webshopType, now, now);
+    stmt.run(id, custom_id, url, sitemapUrl, webshopType, now, now);
 
     // Initialize analytics for this shop
     this.db.prepare(`
@@ -256,10 +270,11 @@ export class ShopDatabase {
       VALUES (?, 0, 0)
     `).run(id);
 
-    logger.info(`Created shop ${id} for ${url}`);
+    logger.info(`Created shop ${id} for ${url}${custom_id ? ` with custom ID ${custom_id}` : ''}`);
 
     return {
       id,
+      custom_id,
       url,
       sitemap_url: sitemapUrl,
       webshop_type: webshopType,
@@ -278,6 +293,21 @@ export class ShopDatabase {
     return stmt.get(id) as Shop | null;
   }
 
+  getShopByCustomId(customId: string): Shop | null {
+    const stmt = this.db.prepare('SELECT * FROM shops WHERE custom_id = ?');
+    return stmt.get(customId) as Shop | null;
+  }
+
+  // Unified method to get shop by either internal ID or custom ID
+  getShopByAnyId(identifier: string): Shop | null {
+    // First try internal ID
+    const byId = this.getShopById(identifier);
+    if (byId) return byId;
+
+    // Then try custom ID
+    return this.getShopByCustomId(identifier);
+  }
+
   getAllShops(): Shop[] {
     const stmt = this.db.prepare('SELECT * FROM shops ORDER BY created_at DESC');
     return stmt.all() as Shop[];
@@ -295,10 +325,36 @@ export class ShopDatabase {
     `).run(...values);
   }
 
-  deleteShop(id: string): void {
-    // Cascade delete will handle related records
-    this.db.prepare('DELETE FROM shops WHERE id = ?').run(id);
-    logger.info(`Deleted shop ${id} and all related data`);
+  // Method to set/update custom_id for a shop
+  setCustomId(identifier: string, customId: string | null): boolean {
+    const shop = this.getShopByAnyId(identifier);
+    if (!shop) {
+      logger.warn(`Attempted to set custom ID for non-existent shop: ${identifier}`);
+      return false;
+    }
+
+    const now = new Date().toISOString();
+    this.db.prepare(`
+      UPDATE shops
+      SET custom_id = ?, updated_at = ?
+      WHERE id = ?
+    `).run(customId, now, shop.id);
+
+    logger.info(`Set custom ID for shop ${shop.id}: ${customId || 'NULL'}`);
+    return true;
+  }
+
+  deleteShop(identifier: string): void {
+    // Find the shop first to get the internal ID for logging
+    const shop = this.getShopByAnyId(identifier);
+    if (!shop) {
+      logger.warn(`Attempted to delete non-existent shop: ${identifier}`);
+      return;
+    }
+
+    // Use internal ID for deletion (cascade delete will handle related records)
+    this.db.prepare('DELETE FROM shops WHERE id = ?').run(shop.id);
+    logger.info(`Deleted shop ${shop.id} (${shop.custom_id ? `custom: ${shop.custom_id}` : 'no custom ID'}) and all related data`);
   }
 
   // Analytics operations
@@ -570,17 +626,28 @@ export class ShopDatabase {
   }
 
   // Enable or disable schedule for a shop
-  setScheduleEnabled(shopId: string, enabled: boolean): void {
+  setScheduleEnabled(identifier: string, enabled: boolean): void {
+    const shop = this.getShopByAnyId(identifier);
+    if (!shop) {
+      logger.warn(`Attempted to set schedule for non-existent shop: ${identifier}`);
+      return;
+    }
+
     this.db.prepare(`
       UPDATE scheduled_jobs
       SET enabled = ?
       WHERE shop_id = ? AND status = 'queued'
-    `).run(enabled ? 1 : 0, shopId);
-    logger.info(`${enabled ? 'Enabled' : 'Disabled'} schedule for shop ${shopId}`);
+    `).run(enabled ? 1 : 0, shop.id);
+    logger.info(`${enabled ? 'Enabled' : 'Disabled'} schedule for shop ${shop.id}`);
   }
 
   // Webhook operations
-  createWebhook(shopId: string, url: string, secret?: string): string {
+  createWebhook(shopIdentifier: string, url: string, secret?: string): string {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) {
+      throw new Error(`Shop not found: ${shopIdentifier}`);
+    }
+
     const id = uuidv4();
     const now = new Date().toISOString();
 
@@ -589,25 +656,28 @@ export class ShopDatabase {
       UPDATE webhooks
       SET enabled = 0
       WHERE shop_id = ?
-    `).run(shopId);
+    `).run(shop.id);
 
     this.db.prepare(`
       INSERT INTO webhooks (id, shop_id, url, enabled, secret, created_at, updated_at)
       VALUES (?, ?, ?, 1, ?, ?, ?)
-    `).run(id, shopId, url, secret || null, now, now);
+    `).run(id, shop.id, url, secret || null, now, now);
 
-    logger.info(`Created webhook ${id} for shop ${shopId}`);
+    logger.info(`Created webhook ${id} for shop ${shop.id}`);
     return id;
   }
 
-  getWebhook(shopId: string): Webhook | null {
+  getWebhook(shopIdentifier: string): Webhook | null {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) return null;
+
     const stmt = this.db.prepare(`
       SELECT * FROM webhooks
       WHERE shop_id = ? AND enabled = 1
       ORDER BY created_at DESC
       LIMIT 1
     `);
-    const result = stmt.get(shopId) as any;
+    const result = stmt.get(shop.id) as any;
     if (!result) return null;
 
     return {
@@ -621,35 +691,52 @@ export class ShopDatabase {
     };
   }
 
-  updateWebhook(shopId: string, url: string, secret?: string): void {
+  updateWebhook(shopIdentifier: string, url: string, secret?: string): void {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) {
+      throw new Error(`Shop not found: ${shopIdentifier}`);
+    }
+
     const now = new Date().toISOString();
 
     this.db.prepare(`
       UPDATE webhooks
       SET url = ?, secret = ?, updated_at = ?
       WHERE shop_id = ? AND enabled = 1
-    `).run(url, secret || null, now, shopId);
+    `).run(url, secret || null, now, shop.id);
 
-    logger.info(`Updated webhook for shop ${shopId}`);
+    logger.info(`Updated webhook for shop ${shop.id}`);
   }
 
-  deleteWebhook(shopId: string): void {
+  deleteWebhook(shopIdentifier: string): void {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) {
+      logger.warn(`Attempted to delete webhook for non-existent shop: ${shopIdentifier}`);
+      return;
+    }
+
     this.db.prepare(`
       DELETE FROM webhooks
       WHERE shop_id = ?
-    `).run(shopId);
+    `).run(shop.id);
 
-    logger.info(`Deleted webhook for shop ${shopId}`);
+    logger.info(`Deleted webhook for shop ${shop.id}`);
   }
 
-  setWebhookEnabled(shopId: string, enabled: boolean): void {
+  setWebhookEnabled(shopIdentifier: string, enabled: boolean): void {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) {
+      logger.warn(`Attempted to set webhook status for non-existent shop: ${shopIdentifier}`);
+      return;
+    }
+
     this.db.prepare(`
       UPDATE webhooks
       SET enabled = ?
       WHERE shop_id = ?
-    `).run(enabled ? 1 : 0, shopId);
+    `).run(enabled ? 1 : 0, shop.id);
 
-    logger.info(`${enabled ? 'Enabled' : 'Disabled'} webhook for shop ${shopId}`);
+    logger.info(`${enabled ? 'Enabled' : 'Disabled'} webhook for shop ${shop.id}`);
   }
 
   logWebhookDelivery(
@@ -669,7 +756,10 @@ export class ShopDatabase {
     `).run(id, webhookId, event, JSON.stringify(payload), status, responseCode || null, error || null, now);
   }
 
-  getWebhookDeliveries(shopId: string, limit: number = 50): WebhookDelivery[] {
+  getWebhookDeliveries(shopIdentifier: string, limit: number = 50): WebhookDelivery[] {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) return [];
+
     const stmt = this.db.prepare(`
       SELECT wd.* FROM webhook_deliveries wd
       INNER JOIN webhooks w ON wd.webhook_id = w.id
@@ -677,7 +767,7 @@ export class ShopDatabase {
       ORDER BY wd.attempted_at DESC
       LIMIT ?
     `);
-    const results = stmt.all(shopId, limit) as any[];
+    const results = stmt.all(shop.id, limit) as any[];
 
     return results.map(r => ({
       id: r.id,
@@ -698,10 +788,15 @@ export class ShopDatabase {
 
   // Custom URLs operations
   createCustomUrl(
-    shopId: string,
+    shopIdentifier: string,
     url: string,
     contentType: 'shipping' | 'contacts' | 'terms' | 'faq'
   ): CustomUrl {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) {
+      throw new Error(`Shop not found: ${shopIdentifier}`);
+    }
+
     const id = uuidv4();
     const now = new Date().toISOString();
 
@@ -709,13 +804,13 @@ export class ShopDatabase {
       this.db.prepare(`
         INSERT INTO custom_urls (id, shop_id, url, content_type, enabled, created_at)
         VALUES (?, ?, ?, ?, 1, ?)
-      `).run(id, shopId, url, contentType, now);
+      `).run(id, shop.id, url, contentType, now);
 
-      logger.info(`Created custom URL ${id} for shop ${shopId}: ${url}`);
+      logger.info(`Created custom URL ${id} for shop ${shop.id}: ${url}`);
 
       return {
         id,
-        shop_id: shopId,
+        shop_id: shop.id,
         url,
         content_type: contentType,
         enabled: true,
@@ -729,13 +824,16 @@ export class ShopDatabase {
     }
   }
 
-  getCustomUrls(shopId: string): CustomUrl[] {
+  getCustomUrls(shopIdentifier: string): CustomUrl[] {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) return [];
+
     const stmt = this.db.prepare(`
       SELECT * FROM custom_urls
       WHERE shop_id = ?
       ORDER BY created_at DESC
     `);
-    const results = stmt.all(shopId) as any[];
+    const results = stmt.all(shop.id) as any[];
 
     return results.map(r => ({
       id: r.id,
@@ -763,13 +861,16 @@ export class ShopDatabase {
     };
   }
 
-  getEnabledCustomUrls(shopId: string): CustomUrl[] {
+  getEnabledCustomUrls(shopIdentifier: string): CustomUrl[] {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) return [];
+
     const stmt = this.db.prepare(`
       SELECT * FROM custom_urls
       WHERE shop_id = ? AND enabled = 1
       ORDER BY created_at DESC
     `);
-    const results = stmt.all(shopId) as any[];
+    const results = stmt.all(shop.id) as any[];
 
     return results.map(r => ({
       id: r.id,
@@ -797,12 +898,15 @@ export class ShopDatabase {
   }
 
   // Check if a URL exists in shop_content (already scraped)
-  isUrlAlreadyScraped(shopId: string, url: string): boolean {
+  isUrlAlreadyScraped(shopIdentifier: string, url: string): boolean {
+    const shop = this.getShopByAnyId(shopIdentifier);
+    if (!shop) return false;
+
     const stmt = this.db.prepare(`
       SELECT COUNT(*) as count FROM shop_content
       WHERE shop_id = ? AND url = ?
     `);
-    const result = stmt.get(shopId, url) as { count: number };
+    const result = stmt.get(shop.id, url) as { count: number };
     return result.count > 0;
   }
 }

web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Webshop Scraper Dashboard</title>
+  <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A2dnZ/9nZ2f/Z2dn/2dnZ/9nZ2f/Z2dn/2dnZ/9nZ2f/Z2dn/////AP///wD///8A////AP///wD///8A2dnZ/39/f/9/f3//f39//39/f/9/f3//f39//39/f/9/f3//2dnZ/////wD///8A////AP///wD///8A2dnZ/39/f/8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/f39//9nZ2f////8A////AP///wD///8A////ANnZ2f9/f3//AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/39/f//Z2dn/////AP///wD///8A////AP///wDZ2dn/f39//wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP9/f3//2dnZ/////wD///8A////AP///wD///8A2dnZ/39/f/8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/f39//9nZ2f////8A////AP///wD///8A////ANnZ2f9/f3//AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/39/f//Z2dn/////AP///wD///8A////AP///wDZ2dn/f39//39/f/9/f3//f39//39/f/9/f3//f39//39/f//Z2dn/////AP///wD///8A////AP///wD///8A2dnZ/9nZ2f/Z2dn/2dnZ/9nZ2f/Z2dn/2dnZ/9nZ2f/Z2dn/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A">
+</head>
+<body class="h-full bg-gray-50 dark:bg-gray-900">
+  <div id="app" class="h-full"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>

web/package-lock.json

@@ -0,0 +1,2096 @@
+{
+  "name": "webshop-scraper-ui",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "webshop-scraper-ui",
+      "version": "1.0.0",
+      "dependencies": {
+        "lucide": "^0.294.0"
+      },
+      "devDependencies": {
+        "@types/node": "^20.0.0",
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.32",
+        "tailwindcss": "^3.3.6",
+        "typescript": "^5.3.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
+      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
+      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
+      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
+      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
+      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
+      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
+      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
+      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
+      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
+      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
+      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
+      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
+      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
+      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
+      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
+      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
+      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
+      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
+      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
+      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.25",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.25.tgz",
+      "integrity": "sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.22",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.27.0",
+        "caniuse-lite": "^1.0.30001754",
+        "fraction.js": "^5.3.4",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.30",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.30.tgz",
+      "integrity": "sha512-aTUKW4ptQhS64+v2d6IkPzymEzzhw+G0bA1g3uBRV3+ntkH+svttKseW5IOR4Ed6NUVKqnY7qT3dKvzQ7io4AA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
+      "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.8.25",
+        "caniuse-lite": "^1.0.30001754",
+        "electron-to-chromium": "^1.5.249",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.1.4"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001756",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001756.tgz",
+      "integrity": "sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.259",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.259.tgz",
+      "integrity": "sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lucide": {
+      "version": "0.294.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.294.0.tgz",
+      "integrity": "sha512-6qMSsvJBE+/j+inFUIyowoyqitSntt2oKjXyew/S6Y2ZGdaLQ0ktNGtkDk3LqTVlwfAWGAWvFxUsLYI8tmt3Hw==",
+      "license": "ISC"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
+      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.53.3",
+        "@rollup/rollup-android-arm64": "4.53.3",
+        "@rollup/rollup-darwin-arm64": "4.53.3",
+        "@rollup/rollup-darwin-x64": "4.53.3",
+        "@rollup/rollup-freebsd-arm64": "4.53.3",
+        "@rollup/rollup-freebsd-x64": "4.53.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
+        "@rollup/rollup-linux-arm64-musl": "4.53.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-musl": "4.53.3",
+        "@rollup/rollup-openharmony-arm64": "4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
+        "@rollup/rollup-win32-x64-gnu": "4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "4.53.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
+      "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
+      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

web/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "webshop-scraper-ui",
+  "version": "1.0.0",
+  "description": "Modern Web UI for Webshop Scraper API",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  },
+  "dependencies": {
+    "lucide": "^0.294.0"
+  }
+}

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/src/app/App.ts

@@ -0,0 +1,122 @@
+import { AuthService } from '../services/AuthService';
+import { ApiService } from '../services/ApiService';
+import { ToastService } from '../services/ToastService';
+import { Router } from './Router';
+import { LoginPage } from '../components/LoginPage';
+import { Layout } from '../components/Layout';
+import { ToastContainer } from '../components/ToastContainer';
+import { User } from '../types';
+
+export class App {
+  private apiService: ApiService;
+  private toastService: ToastService;
+  private router: Router;
+  private container: HTMLElement | null = null;
+  private currentUser: User | null = null;
+
+  constructor(private authService: AuthService) {
+    this.apiService = new ApiService(authService);
+    this.toastService = new ToastService();
+    this.router = new Router(this.apiService, this.toastService);
+
+    // Subscribe to auth changes
+    this.authService.onAuthChange((user) => {
+      this.currentUser = user;
+      this.render();
+    });
+  }
+
+  mount(container: HTMLElement): void {
+    this.container = container;
+    this.render();
+
+    // Initialize theme
+    this.initializeTheme();
+
+    // Handle browser back/forward
+    window.addEventListener('popstate', () => {
+      this.router.handleRouteChange();
+    });
+  }
+
+  private render(): void {
+    if (!this.container) return;
+
+    if (!this.currentUser?.isAuthenticated) {
+      this.renderLoginPage();
+    } else {
+      this.renderMainApp();
+    }
+  }
+
+  private renderLoginPage(): void {
+    if (!this.container) return;
+
+    const loginPage = new LoginPage(this.authService, this.toastService);
+    this.container.innerHTML = '';
+    this.container.appendChild(loginPage.render());
+
+    // Add toast container
+    const toastContainer = new ToastContainer(this.toastService);
+    this.container.appendChild(toastContainer.render());
+  }
+
+  private renderMainApp(): void {
+    if (!this.container) return;
+
+    const layout = new Layout(
+      this.authService,
+      this.toastService,
+      this.router
+    );
+
+    this.container.innerHTML = '';
+    this.container.appendChild(layout.render());
+
+    // Initialize router
+    this.router.init(layout.getContentContainer());
+
+    // Add toast container
+    const toastContainer = new ToastContainer(this.toastService);
+    this.container.appendChild(toastContainer.render());
+  }
+
+  private initializeTheme(): void {
+    // Check for saved theme preference or default to light
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    const theme = savedTheme || (prefersDark ? 'dark' : 'light');
+    this.setTheme(theme);
+
+    // Listen for system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (!localStorage.getItem('theme')) {
+        this.setTheme(e.matches ? 'dark' : 'light');
+      }
+    });
+  }
+
+  private setTheme(theme: string): void {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }
+
+  // Global methods that can be called from components
+  toggleTheme(): void {
+    const isDark = document.documentElement.classList.contains('dark');
+    this.setTheme(isDark ? 'light' : 'dark');
+  }
+
+  getServices() {
+    return {
+      auth: this.authService,
+      api: this.apiService,
+      toast: this.toastService,
+    };
+  }
+}

web/src/app/Router.ts

@@ -0,0 +1,104 @@
+import { ApiService } from '../services/ApiService';
+import { ToastService } from '../services/ToastService';
+import { DashboardPage } from '../components/pages/DashboardPage';
+import { ShopsPage } from '../components/pages/ShopsPage';
+import { ShopDetailPage } from '../components/pages/ShopDetailPage';
+import { JobsPage } from '../components/pages/JobsPage';
+import { ContentPage } from '../components/pages/ContentPage';
+import { SchedulesPage } from '../components/pages/SchedulesPage';
+import { WebhooksPage } from '../components/pages/WebhooksPage';
+
+export interface RouteConfig {
+  path: string;
+  component: string;
+  title: string;
+}
+
+export class Router {
+  private container: HTMLElement | null = null;
+  private currentRoute = '/';
+  private currentComponent: any = null;
+
+  constructor(
+    private apiService: ApiService,
+    private toastService: ToastService
+  ) {}
+
+  init(container: HTMLElement): void {
+    this.container = container;
+    this.handleRouteChange();
+  }
+
+  navigate(path: string): void {
+    if (this.currentRoute === path) return;
+
+    this.currentRoute = path;
+    window.history.pushState({}, '', path);
+    this.handleRouteChange();
+  }
+
+  handleRouteChange(): void {
+    if (!this.container) return;
+
+    const path = window.location.pathname;
+    this.currentRoute = path;
+
+    // Cleanup previous component
+    if (this.currentComponent && typeof this.currentComponent.destroy === 'function') {
+      this.currentComponent.destroy();
+    }
+
+    // Route to component
+    let component: any = null;
+
+    if (path === '/' || path === '/dashboard') {
+      component = new DashboardPage(this.apiService, this.toastService, this);
+    } else if (path === '/shops') {
+      component = new ShopsPage(this.apiService, this.toastService, this);
+    } else if (path.startsWith('/shops/') && !path.endsWith('/shops')) {
+      const shopId = path.split('/shops/')[1];
+      if (shopId) {
+        component = new ShopDetailPage(shopId, this.apiService, this.toastService, this);
+      }
+    } else if (path === '/jobs') {
+      component = new JobsPage(this.apiService, this.toastService, this);
+    } else if (path === '/content') {
+      component = new ContentPage(this.apiService, this.toastService, this);
+    } else if (path === '/schedules') {
+      component = new SchedulesPage(this.apiService, this.toastService, this);
+    } else if (path === '/webhooks') {
+      component = new WebhooksPage(this.apiService, this.toastService, this);
+    }
+
+    if (component) {
+      this.currentComponent = component;
+      this.container.innerHTML = '';
+      this.container.appendChild(component.render());
+
+      // Update page title
+      const title = this.getPageTitle(path);
+      document.title = title ? `${title} - Webshop Scraper` : 'Webshop Scraper Dashboard';
+    } else {
+      // 404 - redirect to dashboard
+      this.navigate('/dashboard');
+    }
+
+    // Dispatch route change event for navigation updates
+    window.dispatchEvent(new CustomEvent('route-change', { detail: { path } }));
+  }
+
+  getCurrentRoute(): string {
+    return this.currentRoute;
+  }
+
+  private getPageTitle(path: string): string {
+    if (path === '/' || path === '/dashboard') return 'Dashboard';
+    if (path === '/shops') return 'Shops';
+    if (path.startsWith('/shops/')) return 'Shop Details';
+    if (path === '/jobs') return 'Jobs';
+    if (path === '/content') return 'Content';
+    if (path === '/schedules') return 'Schedules';
+    if (path === '/webhooks') return 'Webhooks';
+    return '';
+  }
+}

web/src/components/Layout.ts

@@ -0,0 +1,341 @@
+import { AuthService } from '../services/AuthService';
+import { ApiService } from '../services/ApiService';
+import { ToastService } from '../services/ToastService';
+import { Router } from '../app/Router';
+import { NavigationItem } from '../types';
+import { getIcon } from '../utils/icons';
+
+export class Layout {
+  private element: HTMLElement | null = null;
+  private contentContainer: HTMLElement | null = null;
+
+  private navigation: NavigationItem[] = [
+    { name: 'Dashboard', href: '/dashboard', icon: 'dashboard', current: true },
+    { name: 'Shops', href: '/shops', icon: 'shops', current: false },
+    { name: 'Jobs', href: '/jobs', icon: 'jobs', current: false, count: 0 },
+    { name: 'Content', href: '/content', icon: 'content', current: false },
+    { name: 'Schedules', href: '/schedules', icon: 'schedules', current: false },
+    { name: 'Webhooks', href: '/webhooks', icon: 'webhooks', current: false },
+  ];
+
+  constructor(
+    private authService: AuthService,
+    private toastService: ToastService,
+    private router: Router
+  ) {
+    // Listen for route changes to update navigation
+    window.addEventListener('route-change', (e: any) => {
+      this.updateNavigation(e.detail.path);
+    });
+  }
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'h-full flex bg-gray-100 dark:bg-gray-900';
+
+    this.element.innerHTML = `
+      <!-- Sidebar for mobile -->
+      <div class="fixed inset-0 flex z-40 lg:hidden hidden" id="mobile-sidebar">
+        <div class="fixed inset-0 bg-gray-600 bg-opacity-75" id="sidebar-overlay"></div>
+
+        <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white dark:bg-gray-800">
+          <div class="absolute top-0 right-0 -mr-12 pt-2">
+            <button
+              type="button"
+              class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+              id="close-sidebar-mobile"
+            >
+              <span class="sr-only">Close sidebar</span>
+              <div class="w-6 h-6 text-white">
+                ${getIcon('x')}
+              </div>
+            </button>
+          </div>
+
+          ${this.renderSidebarContent()}
+        </div>
+      </div>
+
+      <!-- Static sidebar for desktop -->
+      <div class="hidden lg:flex lg:flex-shrink-0">
+        <div class="flex flex-col w-64">
+          <div class="flex-1 flex flex-col min-h-0 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
+            ${this.renderSidebarContent()}
+          </div>
+        </div>
+      </div>
+
+      <!-- Main content -->
+      <div class="flex-1 flex flex-col overflow-hidden">
+        <!-- Top navigation -->
+        <div class="flex-shrink-0 flex h-16 bg-white dark:bg-gray-800 shadow border-b border-gray-200 dark:border-gray-700">
+          <button
+            type="button"
+            class="px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500 lg:hidden"
+            id="open-sidebar-mobile"
+          >
+            <span class="sr-only">Open sidebar</span>
+            <div class="w-6 h-6">
+              ${getIcon('menu')}
+            </div>
+          </button>
+
+          <div class="flex-1 px-4 flex justify-between items-center">
+            <div class="flex-1">
+              <h1 class="text-lg font-semibold text-gray-900 dark:text-white" id="page-title">
+                Dashboard
+              </h1>
+            </div>
+
+            <div class="flex items-center space-x-4">
+              <!-- Theme toggle -->
+              <button
+                type="button"
+                class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-md"
+                id="theme-toggle"
+                title="Toggle theme"
+              >
+                <div class="w-5 h-5 dark:hidden">
+                  ${getIcon('moon')}
+                </div>
+                <div class="w-5 h-5 hidden dark:block">
+                  ${getIcon('sun')}
+                </div>
+              </button>
+
+              <!-- User menu -->
+              <div class="relative">
+                <button
+                  type="button"
+                  class="flex items-center space-x-3 text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  id="user-menu-button"
+                >
+                  <div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
+                    <span class="text-white font-medium">A</span>
+                  </div>
+                  <span class="text-gray-700 dark:text-gray-300 hidden md:block">API User</span>
+                </button>
+
+                <!-- Dropdown menu -->
+                <div class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5 focus:outline-none" id="user-menu">
+                  <button
+                    class="flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                    id="logout-button"
+                  >
+                    <div class="w-4 h-4 mr-3">
+                      ${getIcon('logout')}
+                    </div>
+                    Sign out
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Page content -->
+        <main class="flex-1 relative overflow-y-auto focus:outline-none" id="main-content">
+          <div class="py-6">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" id="content-container">
+              <!-- Page content will be injected here -->
+            </div>
+          </div>
+        </main>
+      </div>
+    `;
+
+    this.bindEvents();
+    this.updateNavigation(this.router.getCurrentRoute());
+
+    return this.element;
+  }
+
+  private renderSidebarContent(): string {
+    return `
+      <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+        <div class="flex items-center flex-shrink-0 px-4">
+          <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center mr-3">
+            ${getIcon('dashboard')}
+          </div>
+          <h1 class="text-xl font-bold text-gray-900 dark:text-white">
+            Webshop Scraper
+          </h1>
+        </div>
+
+        <nav class="mt-8 flex-1 px-2 space-y-1">
+          ${this.navigation.map(item => this.renderNavigationItem(item)).join('')}
+        </nav>
+      </div>
+
+      <div class="flex-shrink-0 flex border-t border-gray-200 dark:border-gray-700 p-4">
+        <div class="flex items-center">
+          <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center">
+            <span class="text-xs font-medium text-gray-600 dark:text-gray-300">API</span>
+          </div>
+          <div class="ml-3">
+            <p class="text-xs font-medium text-gray-700 dark:text-gray-300">API User</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">Authenticated</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderNavigationItem(item: NavigationItem): string {
+    const isActive = item.current;
+    const baseClasses = 'group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200';
+    const activeClasses = 'bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100';
+    const inactiveClasses = 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white';
+
+    return `
+      <a
+        href="${item.href}"
+        class="${baseClasses} ${isActive ? activeClasses : inactiveClasses}"
+        data-nav-item="${item.href}"
+      >
+        <div class="w-5 h-5 mr-3 flex-shrink-0">
+          ${getIcon(item.icon as any)}
+        </div>
+        ${item.name}
+        ${item.count !== undefined ? `
+          <span class="ml-auto inline-block px-2 py-0.5 text-xs font-medium rounded-full ${
+            isActive ? 'bg-primary-200 text-primary-900 dark:bg-primary-800 dark:text-primary-100' : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+          }">
+            ${item.count}
+          </span>
+        ` : ''}
+      </a>
+    `;
+  }
+
+  private bindEvents(): void {
+    if (!this.element) return;
+
+    // Mobile sidebar toggle
+    const openSidebarBtn = this.element.querySelector('#open-sidebar-mobile');
+    const closeSidebarBtn = this.element.querySelector('#close-sidebar-mobile');
+    const sidebarOverlay = this.element.querySelector('#sidebar-overlay');
+    const mobileSidebar = this.element.querySelector('#mobile-sidebar');
+
+    openSidebarBtn?.addEventListener('click', () => {
+      mobileSidebar?.classList.remove('hidden');
+    });
+
+    const closeSidebar = () => {
+      mobileSidebar?.classList.add('hidden');
+    };
+
+    closeSidebarBtn?.addEventListener('click', closeSidebar);
+    sidebarOverlay?.addEventListener('click', closeSidebar);
+
+    // Navigation
+    this.element.querySelectorAll('[data-nav-item]').forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const href = (e.currentTarget as HTMLElement).getAttribute('data-nav-item');
+        if (href) {
+          this.router.navigate(href);
+          closeSidebar();
+        }
+      });
+    });
+
+    // Theme toggle
+    const themeToggle = this.element.querySelector('#theme-toggle');
+    themeToggle?.addEventListener('click', () => {
+      this.toggleTheme();
+    });
+
+    // User menu toggle
+    const userMenuButton = this.element.querySelector('#user-menu-button');
+    const userMenu = this.element.querySelector('#user-menu');
+
+    userMenuButton?.addEventListener('click', () => {
+      userMenu?.classList.toggle('hidden');
+    });
+
+    // Close user menu when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!userMenuButton?.contains(e.target as Node) && !userMenu?.contains(e.target as Node)) {
+        userMenu?.classList.add('hidden');
+      }
+    });
+
+    // Logout
+    const logoutButton = this.element.querySelector('#logout-button');
+    logoutButton?.addEventListener('click', () => {
+      this.authService.logout();
+      this.toastService.info('Logged Out', 'You have been signed out');
+    });
+
+    // Get content container reference
+    this.contentContainer = this.element.querySelector('#content-container');
+  }
+
+  private updateNavigation(currentPath: string): void {
+    this.navigation.forEach(item => {
+      item.current = item.href === currentPath ||
+        (currentPath === '/' && item.href === '/dashboard') ||
+        (item.href !== '/dashboard' && currentPath.startsWith(item.href));
+    });
+
+    // Update navigation in DOM
+    if (this.element) {
+      this.element.querySelectorAll('[data-nav-item]').forEach((link, index) => {
+        const item = this.navigation[index];
+        if (item) {
+          const isActive = item.current;
+          const activeClasses = 'bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100';
+          const inactiveClasses = 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white';
+
+          link.className = link.className
+            .replace(activeClasses, '')
+            .replace(inactiveClasses, '') +
+            ' ' + (isActive ? activeClasses : inactiveClasses);
+        }
+      });
+
+      // Update page title
+      const pageTitle = this.element.querySelector('#page-title');
+      if (pageTitle) {
+        const title = this.getPageTitle(currentPath);
+        pageTitle.textContent = title;
+      }
+    }
+  }
+
+  private getPageTitle(path: string): string {
+    if (path === '/' || path === '/dashboard') return 'Dashboard';
+    if (path === '/shops') return 'Shops';
+    if (path.startsWith('/shops/')) return 'Shop Details';
+    if (path === '/jobs') return 'Jobs';
+    if (path === '/content') return 'Content';
+    if (path === '/schedules') return 'Schedules';
+    if (path === '/webhooks') return 'Webhooks';
+    return 'Dashboard';
+  }
+
+  private toggleTheme(): void {
+    const isDark = document.documentElement.classList.contains('dark');
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  }
+
+  getContentContainer(): HTMLElement {
+    return this.contentContainer!;
+  }
+
+  updateJobCount(count: number): void {
+    const jobsNavItem = this.navigation.find(item => item.href === '/jobs');
+    if (jobsNavItem) {
+      jobsNavItem.count = count;
+      // Update in DOM if rendered
+      // This would require re-rendering the navigation or updating specific elements
+    }
+  }
+}

web/src/components/LoginPage.ts

@@ -0,0 +1,128 @@
+import { AuthService } from '../services/AuthService';
+import { ToastService } from '../services/ToastService';
+import { getIcon } from '../utils/icons';
+
+export class LoginPage {
+  private element: HTMLElement | null = null;
+  private isLoading = false;
+
+  constructor(
+    private authService: AuthService,
+    private toastService: ToastService
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8';
+
+    this.element.innerHTML = `
+      <div class="max-w-md w-full space-y-8">
+        <div>
+          <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-primary-600">
+            ${getIcon('dashboard')}
+          </div>
+          <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+            Webshop Scraper Dashboard
+          </h2>
+          <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
+            Enter your API key to access the dashboard
+          </p>
+        </div>
+
+        <form class="mt-8 space-y-6" id="login-form">
+          <div>
+            <label for="api-key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              API Key
+            </label>
+            <input
+              id="api-key"
+              name="apiKey"
+              type="password"
+              required
+              class="input"
+              placeholder="Enter your API key"
+              autocomplete="current-password"
+            >
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              class="btn btn-primary btn-lg w-full flex justify-center"
+              id="login-button"
+            >
+              <span id="button-text">Sign In</span>
+              <span id="loading-spinner" class="ml-2 hidden">
+                <div class="w-4 h-4 spinner"></div>
+              </span>
+            </button>
+          </div>
+
+          <div class="text-center">
+            <p class="text-xs text-gray-500 dark:text-gray-400">
+              Your API key is stored securely in your browser's local storage
+            </p>
+          </div>
+        </form>
+      </div>
+    `;
+
+    this.bindEvents();
+    return this.element;
+  }
+
+  private bindEvents(): void {
+    if (!this.element) return;
+
+    const form = this.element.querySelector('#login-form') as HTMLFormElement;
+    const apiKeyInput = this.element.querySelector('#api-key') as HTMLInputElement;
+    const loginButton = this.element.querySelector('#login-button') as HTMLButtonElement;
+    const buttonText = this.element.querySelector('#button-text') as HTMLSpanElement;
+    const loadingSpinner = this.element.querySelector('#loading-spinner') as HTMLSpanElement;
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      if (this.isLoading) return;
+
+      const apiKey = apiKeyInput.value.trim();
+
+      if (!apiKey) {
+        this.toastService.error('API Key Required', 'Please enter your API key');
+        apiKeyInput.focus();
+        return;
+      }
+
+      this.setLoading(true);
+      buttonText.textContent = 'Signing In...';
+      loadingSpinner.classList.remove('hidden');
+      loginButton.disabled = true;
+
+      try {
+        const success = await this.authService.login(apiKey);
+
+        if (success) {
+          this.toastService.success('Login Successful', 'Welcome to the dashboard!');
+        } else {
+          this.toastService.error('Login Failed', 'Invalid API key. Please check and try again.');
+          apiKeyInput.focus();
+          apiKeyInput.select();
+        }
+      } catch (error) {
+        this.toastService.error('Login Error', 'Unable to connect to the server. Please try again.');
+      } finally {
+        this.setLoading(false);
+        buttonText.textContent = 'Sign In';
+        loadingSpinner.classList.add('hidden');
+        loginButton.disabled = false;
+      }
+    });
+
+    // Focus on API key input
+    apiKeyInput.focus();
+  }
+
+  private setLoading(loading: boolean): void {
+    this.isLoading = loading;
+  }
+}

web/src/components/ToastContainer.ts

@@ -0,0 +1,154 @@
+import { ToastService } from '../services/ToastService';
+import { ToastMessage } from '../types';
+import { getIcon } from '../utils/icons';
+
+export class ToastContainer {
+  private element: HTMLElement | null = null;
+  private unsubscribe: (() => void) | null = null;
+
+  constructor(private toastService: ToastService) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'fixed bottom-0 right-0 z-50 p-4 space-y-4 w-96 max-w-full';
+    this.element.setAttribute('aria-live', 'polite');
+    this.element.setAttribute('aria-label', 'Notifications');
+
+    // Subscribe to toast changes
+    this.unsubscribe = this.toastService.subscribe((toasts) => {
+      this.updateToasts(toasts);
+    });
+
+    return this.element;
+  }
+
+  destroy(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+
+  private updateToasts(toasts: ToastMessage[]): void {
+    if (!this.element) return;
+
+    this.element.innerHTML = '';
+
+    toasts.forEach((toast) => {
+      const toastElement = this.createToastElement(toast);
+      this.element!.appendChild(toastElement);
+    });
+  }
+
+  private createToastElement(toast: ToastMessage): HTMLElement {
+    const toastElement = document.createElement('div');
+    toastElement.className = `
+      transform transition-all duration-300 ease-in-out
+      bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700
+      rounded-lg shadow-lg p-4 flex items-start space-x-3
+      ${this.getToastStyles(toast.type)}
+    `;
+
+    const iconColor = this.getIconColor(toast.type);
+    const icon = this.getToastIcon(toast.type);
+
+    toastElement.innerHTML = `
+      <div class="flex-shrink-0">
+        <div class="w-6 h-6 ${iconColor}">
+          ${icon}
+        </div>
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-gray-900 dark:text-white">
+          ${this.escapeHtml(toast.title)}
+        </p>
+        ${toast.message ? `
+          <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+            ${this.escapeHtml(toast.message)}
+          </p>
+        ` : ''}
+      </div>
+      <div class="flex-shrink-0">
+        <button
+          class="inline-flex text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded-md"
+          onclick="this.parentElement.parentElement.remove()"
+          aria-label="Close notification"
+        >
+          <span class="sr-only">Close</span>
+          <div class="w-5 h-5">
+            ${getIcon('x')}
+          </div>
+        </button>
+      </div>
+    `;
+
+    // Add click handler to remove toast
+    const closeButton = toastElement.querySelector('button');
+    if (closeButton) {
+      closeButton.addEventListener('click', () => {
+        this.toastService.remove(toast.id);
+      });
+    }
+
+    // Auto-remove toast after animation
+    setTimeout(() => {
+      toastElement.style.transform = 'translateX(100%)';
+      toastElement.style.opacity = '0';
+      setTimeout(() => {
+        this.toastService.remove(toast.id);
+      }, 300);
+    }, toast.duration || 5000);
+
+    return toastElement;
+  }
+
+  private getToastStyles(type: ToastMessage['type']): string {
+    switch (type) {
+      case 'success':
+        return 'border-l-4 border-green-500';
+      case 'error':
+        return 'border-l-4 border-red-500';
+      case 'warning':
+        return 'border-l-4 border-yellow-500';
+      case 'info':
+        return 'border-l-4 border-blue-500';
+      default:
+        return 'border-l-4 border-gray-500';
+    }
+  }
+
+  private getIconColor(type: ToastMessage['type']): string {
+    switch (type) {
+      case 'success':
+        return 'text-green-500';
+      case 'error':
+        return 'text-red-500';
+      case 'warning':
+        return 'text-yellow-500';
+      case 'info':
+        return 'text-blue-500';
+      default:
+        return 'text-gray-500';
+    }
+  }
+
+  private getToastIcon(type: ToastMessage['type']): string {
+    switch (type) {
+      case 'success':
+        return getIcon('check');
+      case 'error':
+        return getIcon('x');
+      case 'warning':
+        return getIcon('warning');
+      case 'info':
+        return getIcon('info');
+      default:
+        return getIcon('info');
+    }
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

web/src/components/pages/ContentPage.ts

@@ -0,0 +1,400 @@
+import { ApiService } from '../../services/ApiService';
+import { ToastService } from '../../services/ToastService';
+import { Router } from '../../app/Router';
+import { ShopWithAnalytics, ShopResultsResponse, ContentFilters, ShopContent } from '../../types';
+import { getIcon } from '../../utils/icons';
+import { formatRelativeTime, getDomainFromUrl, getContentTypeLabel } from '../../utils/helpers';
+
+export class ContentPage {
+  private element: HTMLElement | null = null;
+  private shops: ShopWithAnalytics[] = [];
+  private selectedShopId: string | null = null;
+  private contentData: ShopResultsResponse | null = null;
+  private filters: ContentFilters = { limit: 50 };
+  private eventsbound: boolean = false;
+
+  constructor(
+    private apiService: ApiService,
+    private toastService: ToastService,
+    private router: Router
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'space-y-6';
+
+    this.element.innerHTML = `
+      <!-- Header -->
+      <div class="md:flex md:items-center md:justify-between">
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
+            Content Browser
+          </h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Browse scraped content by shop and category
+          </p>
+        </div>
+      </div>
+
+      <!-- Shop Selection -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Select Shop</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Choose a shop to view its content</p>
+        </div>
+        <div class="card-body">
+          <div id="shop-selection">
+            <div class="flex items-center justify-center py-12">
+              <div class="w-8 h-8 spinner"></div>
+              <span class="ml-3 text-gray-600 dark:text-gray-400">Loading shops...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="card" id="filters-section" style="display: none;">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Filters</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Filter content by type and date range</p>
+        </div>
+        <div class="card-body">
+          <form id="filter-form" class="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div>
+              <label for="content-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Content Type
+              </label>
+              <select id="content-type" name="content-type" class="form-select">
+                <option value="">All Types</option>
+                <option value="shipping">Shipping Information</option>
+                <option value="contacts">Contacts</option>
+                <option value="terms">Terms & Conditions</option>
+                <option value="faq">FAQ</option>
+              </select>
+            </div>
+            <div>
+              <label for="date-from" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Date From
+              </label>
+              <input type="date" id="date-from" name="date-from" class="form-input" />
+            </div>
+            <div>
+              <label for="date-to" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Date To
+              </label>
+              <input type="date" id="date-to" name="date-to" class="form-input" />
+            </div>
+            <div class="flex items-end">
+              <button type="submit" class="btn btn-primary w-full">
+                <div class="w-4 h-4 mr-2">${getIcon('search')}</div>
+                Apply Filters
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <!-- Content Results -->
+      <div class="card" id="content-section" style="display: none;">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Content Results</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400" id="results-summary">
+            Showing scraped content
+          </p>
+        </div>
+        <div class="card-body">
+          <div id="content-results">
+            <div class="flex items-center justify-center py-12">
+              <div class="w-8 h-8 spinner"></div>
+              <span class="ml-3 text-gray-600 dark:text-gray-400">Loading content...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.bindEvents();
+    this.loadShops();
+
+    return this.element;
+  }
+
+  private bindEvents(): void {
+    if (!this.element || this.eventsbound) return;
+    this.eventsbound = true;
+
+    // Filter form
+    const form = this.element.querySelector('#filter-form');
+    form?.addEventListener('submit', (e) => {
+      e.preventDefault();
+      this.applyFilters();
+    });
+  }
+
+  private async loadShops(): Promise<void> {
+    try {
+      const response = await this.apiService.getShops();
+
+      if (response.success && response.data) {
+        this.shops = response.data.shops;
+        this.renderShopSelection();
+      } else {
+        this.toastService.error('Load Error', response.error || 'Failed to load shops');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to load shops');
+    }
+  }
+
+  private renderShopSelection(): void {
+    const container = this.element?.querySelector('#shop-selection');
+    if (!container) return;
+
+    if (this.shops.length === 0) {
+      container.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-4">
+            <div class="w-8 h-8 text-gray-400">${getIcon('shops')}</div>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No shops yet</h3>
+          <p class="text-gray-500 dark:text-gray-400">Add shops first to view their content</p>
+        </div>
+      `;
+      return;
+    }
+
+    container.innerHTML = `
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        ${this.shops.map(shop => this.renderShopCard(shop)).join('')}
+      </div>
+    `;
+
+    // Bind shop selection events
+    container.querySelectorAll('.shop-card').forEach(card => {
+      card.addEventListener('click', () => {
+        const shopId = card.getAttribute('data-shop-id');
+        if (shopId) {
+          this.selectShop(shopId);
+        }
+      });
+    });
+  }
+
+  private renderShopCard(shop: ShopWithAnalytics): string {
+    const domain = getDomainFromUrl(shop.url);
+    const isSelected = this.selectedShopId === shop.id;
+
+    return `
+      <div class="shop-card cursor-pointer p-4 border rounded-lg transition-all hover:shadow-md ${
+        isSelected
+          ? 'border-primary-500 bg-primary-50 dark:bg-primary-900 dark:border-primary-400'
+          : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
+      }" data-shop-id="${shop.id}">
+        <div class="flex items-center space-x-3">
+          <div class="flex-shrink-0">
+            <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+              <div class="w-5 h-5 text-primary-600 dark:text-primary-400">
+                ${getIcon('shops')}
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 min-w-0">
+            <h4 class="text-sm font-medium text-gray-900 dark:text-white truncate">
+              ${domain}
+            </h4>
+            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
+              ${shop.analytics.total_scrapes} scrapes • ${shop.analytics.total_urls_found} URLs
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private async selectShop(shopId: string): Promise<void> {
+    this.selectedShopId = shopId;
+    this.renderShopSelection(); // Re-render to show selection
+
+    // Show filters and load content
+    const filtersSection = this.element?.querySelector('#filters-section') as HTMLElement;
+    const contentSection = this.element?.querySelector('#content-section') as HTMLElement;
+
+    if (filtersSection) filtersSection.style.display = 'block';
+    if (contentSection) contentSection.style.display = 'block';
+
+    await this.loadContent();
+  }
+
+  private applyFilters(): void {
+    const form = this.element?.querySelector('#filter-form') as HTMLFormElement;
+    if (!form) return;
+
+    const formData = new FormData(form);
+
+    this.filters = {
+      limit: 50, // Keep reasonable limit
+      content_type: (formData.get('content-type') as 'shipping' | 'contacts' | 'terms' | 'faq') || undefined,
+      date_from: (formData.get('date-from') as string) || undefined,
+      date_to: (formData.get('date-to') as string) || undefined,
+    };
+
+    // Remove undefined values
+    Object.keys(this.filters).forEach(key => {
+      if (this.filters[key as keyof ContentFilters] === undefined || this.filters[key as keyof ContentFilters] === '') {
+        delete this.filters[key as keyof ContentFilters];
+      }
+    });
+
+    this.loadContent();
+  }
+
+  private async loadContent(): Promise<void> {
+    if (!this.selectedShopId) return;
+
+    const container = this.element?.querySelector('#content-results');
+    if (!container) return;
+
+    // Show loading state
+    container.innerHTML = `
+      <div class="flex items-center justify-center py-12">
+        <div class="w-8 h-8 spinner"></div>
+        <span class="ml-3 text-gray-600 dark:text-gray-400">Loading content...</span>
+      </div>
+    `;
+
+    try {
+      const response = await this.apiService.getShopResults(this.selectedShopId, this.filters);
+
+      if (response.success && response.data) {
+        this.contentData = response.data;
+        this.renderContent();
+      } else {
+        this.toastService.error('Load Error', response.error || 'Failed to load content');
+        container.innerHTML = `
+          <div class="text-center py-12">
+            <div class="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mx-auto mb-4">
+              <div class="w-8 h-8 text-red-600 dark:text-red-400">${getIcon('x')}</div>
+            </div>
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Failed to load content</h3>
+            <p class="text-gray-500 dark:text-gray-400">Please try again</p>
+          </div>
+        `;
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to load content');
+    }
+  }
+
+  private renderContent(): void {
+    if (!this.contentData) return;
+
+    const container = this.element?.querySelector('#content-results');
+    const summary = this.element?.querySelector('#results-summary');
+
+    if (!container || !summary) return;
+
+    const { results, filters } = this.contentData;
+
+    // Count total items
+    const totalItems = Object.values(results).reduce((sum, items) => sum + items.length, 0);
+
+    // Update summary
+    const selectedShop = this.shops.find(s => s.id === this.selectedShopId);
+    const shopName = selectedShop ? getDomainFromUrl(selectedShop.url) : 'Unknown Shop';
+
+    summary.textContent = `Showing ${totalItems} content items from ${shopName}`;
+
+    if (totalItems === 0) {
+      container.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-4">
+            <div class="w-8 h-8 text-gray-400">${getIcon('search')}</div>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No content found</h3>
+          <p class="text-gray-500 dark:text-gray-400">Try adjusting your filters</p>
+        </div>
+      `;
+      return;
+    }
+
+    // Render content by category
+    container.innerHTML = `
+      <div class="space-y-6">
+        ${Object.entries(results).map(([key, items]) => {
+          if (items.length === 0) return '';
+
+          const categoryLabel = getContentTypeLabel(key);
+          return `
+            <div class="border border-gray-200 dark:border-gray-600 rounded-lg">
+              <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 border-b border-gray-200 dark:border-gray-600">
+                <h4 class="text-lg font-medium text-gray-900 dark:text-white">
+                  ${categoryLabel} (${items.length})
+                </h4>
+              </div>
+              <div class="divide-y divide-gray-200 dark:divide-gray-600">
+                ${items.map(item => this.renderContentItem(item)).join('')}
+              </div>
+            </div>
+          `;
+        }).filter(Boolean).join('')}
+      </div>
+    `;
+  }
+
+  private renderContentItem(item: ShopContent): string {
+    const domain = getDomainFromUrl(item.url);
+    const hasChanged = item.changed;
+    const preview = item.content.substring(0, 200) + (item.content.length > 200 ? '...' : '');
+
+    return `
+      <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+        <div class="flex items-start justify-between">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center space-x-2 mb-2">
+              <h5 class="text-sm font-medium text-gray-900 dark:text-white truncate">
+                ${domain}
+              </h5>
+              ${hasChanged ? `
+                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
+                  <div class="w-3 h-3 mr-1">${getIcon('warning')}</div>
+                  Changed
+                </span>
+              ` : `
+                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                  <div class="w-3 h-3 mr-1">${getIcon('check')}</div>
+                  Unchanged
+                </span>
+              `}
+            </div>
+            <a href="${item.url}" target="_blank" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mb-2 block">
+              ${item.url}
+            </a>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
+              ${preview.replace(/[#*]/g, '')}
+            </p>
+            <div class="text-xs text-gray-400 dark:text-gray-500">
+              Last updated: ${formatRelativeTime(item.updated_at)}
+            </div>
+          </div>
+          <div class="ml-4 flex-shrink-0">
+            <button
+              class="btn btn-secondary btn-sm"
+              onclick="navigator.clipboard.writeText(\`${item.content.replace(/`/g, '\\`')}\`).then(() => {
+                document.dispatchEvent(new CustomEvent('show-toast', {
+                  detail: { type: 'success', title: 'Copied!', message: 'Content copied to clipboard' }
+                }));
+              })"
+            >
+              <div class="w-4 h-4 mr-1">${getIcon('copy')}</div>
+              Copy
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  destroy(): void {
+    this.eventsbound = false;
+  }
+}

web/src/components/pages/DashboardPage.ts

@@ -0,0 +1,451 @@
+import { ApiService } from '../../services/ApiService';
+import { ToastService } from '../../services/ToastService';
+import { Router } from '../../app/Router';
+import { QueueStats, ShopWithAnalytics } from '../../types';
+import { getIcon } from '../../utils/icons';
+import { formatNumber, formatRelativeTime } from '../../utils/helpers';
+
+export class DashboardPage {
+  private element: HTMLElement | null = null;
+  private updateInterval: NodeJS.Timeout | null = null;
+  private stats: QueueStats | null = null;
+  private recentShops: ShopWithAnalytics[] = [];
+
+  constructor(
+    private apiService: ApiService,
+    private toastService: ToastService,
+    private router: Router
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'space-y-6';
+
+    this.element.innerHTML = `
+      <!-- Header -->
+      <div class="md:flex md:items-center md:justify-between">
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
+            Dashboard Overview
+          </h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Monitor your webshop scraping operations in real-time
+          </p>
+        </div>
+        <div class="mt-4 flex md:mt-0 md:ml-4">
+          <button
+            type="button"
+            class="btn btn-primary"
+            id="add-shop-btn"
+          >
+            <div class="w-4 h-4 mr-2">
+              ${getIcon('plus')}
+            </div>
+            Add New Shop
+          </button>
+        </div>
+      </div>
+
+      <!-- Stats Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" id="stats-grid">
+        <!-- Loading state -->
+        <div class="col-span-full">
+          <div class="flex items-center justify-center py-12">
+            <div class="w-8 h-8 spinner"></div>
+            <span class="ml-3 text-gray-600 dark:text-gray-400">Loading statistics...</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Content Grid -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Recent Activity -->
+        <div class="card">
+          <div class="card-header">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Shops</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">Latest shop activity and status</p>
+          </div>
+          <div class="card-body">
+            <div id="recent-shops-list">
+              <div class="flex items-center justify-center py-8">
+                <div class="w-6 h-6 spinner"></div>
+                <span class="ml-3 text-gray-600 dark:text-gray-400">Loading recent shops...</span>
+              </div>
+            </div>
+            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+              <a
+                href="/shops"
+                class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
+                id="view-all-shops"
+              >
+                View all shops
+                <div class="w-4 h-4 ml-1">
+                  ${getIcon('external')}
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- System Health -->
+        <div class="card">
+          <div class="card-header">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white">System Health</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">Queue status and performance metrics</p>
+          </div>
+          <div class="card-body">
+            <div id="system-health">
+              <div class="flex items-center justify-center py-8">
+                <div class="w-6 h-6 spinner"></div>
+                <span class="ml-3 text-gray-600 dark:text-gray-400">Loading system status...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Quick Actions -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Quick Actions</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Common tasks and shortcuts</p>
+        </div>
+        <div class="card-body">
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            <button
+              class="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+              id="quick-add-shop"
+            >
+              <div class="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mr-3">
+                <div class="w-4 h-4 text-primary-600 dark:text-primary-400">
+                  ${getIcon('plus')}
+                </div>
+              </div>
+              <div class="text-left">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Add Shop</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">Start scraping new shop</p>
+              </div>
+            </button>
+
+            <button
+              class="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+              id="quick-view-jobs"
+            >
+              <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-3">
+                <div class="w-4 h-4 text-blue-600 dark:text-blue-400">
+                  ${getIcon('jobs')}
+                </div>
+              </div>
+              <div class="text-left">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">View Jobs</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">Monitor queue status</p>
+              </div>
+            </button>
+
+            <button
+              class="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+              id="quick-view-content"
+            >
+              <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-3">
+                <div class="w-4 h-4 text-green-600 dark:text-green-400">
+                  ${getIcon('content')}
+                </div>
+              </div>
+              <div class="text-left">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Browse Content</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">View scraped data</p>
+              </div>
+            </button>
+
+            <button
+              class="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+              id="quick-view-schedules"
+            >
+              <div class="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mr-3">
+                <div class="w-4 h-4 text-yellow-600 dark:text-yellow-400">
+                  ${getIcon('schedules')}
+                </div>
+              </div>
+              <div class="text-left">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Schedules</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">Manage automation</p>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.bindEvents();
+    this.loadData();
+    this.startRealTimeUpdates();
+
+    return this.element;
+  }
+
+  private bindEvents(): void {
+    if (!this.element) return;
+
+    // Navigation buttons
+    this.element.querySelector('#add-shop-btn')?.addEventListener('click', () => {
+      this.showAddShopModal();
+    });
+
+    this.element.querySelector('#quick-add-shop')?.addEventListener('click', () => {
+      this.showAddShopModal();
+    });
+
+    this.element.querySelector('#quick-view-jobs')?.addEventListener('click', () => {
+      this.router.navigate('/jobs');
+    });
+
+    this.element.querySelector('#quick-view-content')?.addEventListener('click', () => {
+      this.router.navigate('/content');
+    });
+
+    this.element.querySelector('#quick-view-schedules')?.addEventListener('click', () => {
+      this.router.navigate('/schedules');
+    });
+
+    this.element.querySelector('#view-all-shops')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.router.navigate('/shops');
+    });
+  }
+
+  private async loadData(): Promise<void> {
+    try {
+      // Load queue stats and shops in parallel
+      const [healthResponse, shopsResponse] = await Promise.all([
+        this.apiService.getHealth(),
+        this.apiService.getShops()
+      ]);
+
+      if (healthResponse.success && healthResponse.data) {
+        this.stats = healthResponse.data.queue_stats;
+        this.updateStatsGrid();
+        this.updateSystemHealth();
+      }
+
+      if (shopsResponse.success && shopsResponse.data) {
+        this.recentShops = shopsResponse.data.shops
+          .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+          .slice(0, 5);
+        this.updateRecentShops();
+      }
+    } catch (error) {
+      this.toastService.error('Load Error', 'Failed to load dashboard data');
+    }
+  }
+
+  private updateStatsGrid(): void {
+    if (!this.stats || !this.element) return;
+
+    const statsGrid = this.element.querySelector('#stats-grid');
+    if (!statsGrid) return;
+
+    const statCards = [
+      {
+        title: 'Total Jobs',
+        value: this.stats.total,
+        icon: 'jobs',
+        color: 'blue',
+        description: 'All-time job count'
+      },
+      {
+        title: 'Active Jobs',
+        value: this.stats.processing,
+        icon: 'loading',
+        color: 'yellow',
+        description: 'Currently processing'
+      },
+      {
+        title: 'Pending Jobs',
+        value: this.stats.pending,
+        icon: 'warning',
+        color: 'orange',
+        description: 'Waiting in queue'
+      },
+      {
+        title: 'Completed',
+        value: this.stats.completed,
+        icon: 'check',
+        color: 'green',
+        description: 'Successfully finished'
+      }
+    ];
+
+    statsGrid.innerHTML = statCards.map(stat => `
+      <div class="card">
+        <div class="card-body">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <div class="w-8 h-8 bg-${stat.color}-100 dark:bg-${stat.color}-900 rounded-lg flex items-center justify-center">
+                <div class="w-4 h-4 text-${stat.color}-600 dark:text-${stat.color}-400">
+                  ${getIcon(stat.icon as any)}
+                </div>
+              </div>
+            </div>
+            <div class="ml-4 flex-1">
+              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">${stat.title}</p>
+              <p class="text-2xl font-bold text-gray-900 dark:text-white">${formatNumber(stat.value)}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-500">${stat.description}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `).join('');
+  }
+
+  private updateRecentShops(): void {
+    if (!this.element) return;
+
+    const recentShopsList = this.element.querySelector('#recent-shops-list');
+    if (!recentShopsList) return;
+
+    if (this.recentShops.length === 0) {
+      recentShopsList.innerHTML = `
+        <div class="text-center py-8">
+          <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-3">
+            <div class="w-6 h-6 text-gray-400">
+              ${getIcon('shops')}
+            </div>
+          </div>
+          <p class="text-gray-500 dark:text-gray-400">No shops added yet</p>
+          <button class="mt-2 btn btn-sm btn-primary" id="add-first-shop">
+            Add Your First Shop
+          </button>
+        </div>
+      `;
+
+      recentShopsList.querySelector('#add-first-shop')?.addEventListener('click', () => {
+        this.showAddShopModal();
+      });
+
+      return;
+    }
+
+    recentShopsList.innerHTML = `
+      <div class="space-y-4">
+        ${this.recentShops.map(shop => `
+          <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors cursor-pointer" data-shop-id="${shop.id}">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center space-x-3">
+                <div class="flex-shrink-0">
+                  <div class="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+                    <div class="w-4 h-4 text-primary-600 dark:text-primary-400">
+                      ${getIcon('shops')}
+                    </div>
+                  </div>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
+                    ${this.getDomain(shop.url)}
+                  </p>
+                  <p class="text-xs text-gray-500 dark:text-gray-400">
+                    ${shop.analytics.total_scrapes} scrapes • Last: ${shop.analytics.last_scraped_at ? formatRelativeTime(shop.analytics.last_scraped_at) : 'Never'}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="flex-shrink-0">
+              <span class="badge badge-${shop.analytics.last_scraped_at ? 'success' : 'gray'}">
+                ${shop.analytics.total_scrapes > 0 ? 'Active' : 'New'}
+              </span>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+
+    // Add click handlers
+    recentShopsList.querySelectorAll('[data-shop-id]').forEach(element => {
+      element.addEventListener('click', () => {
+        const shopId = element.getAttribute('data-shop-id');
+        if (shopId) {
+          this.router.navigate(`/shops/${shopId}`);
+        }
+      });
+    });
+  }
+
+  private updateSystemHealth(): void {
+    if (!this.stats || !this.element) return;
+
+    const systemHealth = this.element.querySelector('#system-health');
+    if (!systemHealth) return;
+
+    const processingPercentage = this.stats.total > 0 ?
+      Math.round((this.stats.processing / this.stats.total) * 100) : 0;
+
+    const successRate = this.stats.total > 0 ?
+      Math.round((this.stats.completed / this.stats.total) * 100) : 0;
+
+    systemHealth.innerHTML = `
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Queue Status</span>
+          <span class="text-sm text-gray-900 dark:text-white">
+            ${this.stats.processing} / ${this.stats.total} active
+          </span>
+        </div>
+        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+          <div
+            class="bg-blue-600 h-2 rounded-full transition-all duration-300"
+            style="width: ${processingPercentage}%"
+          ></div>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Success Rate</span>
+          <span class="text-sm text-gray-900 dark:text-white">${successRate}%</span>
+        </div>
+        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+          <div
+            class="bg-green-600 h-2 rounded-full transition-all duration-300"
+            style="width: ${successRate}%"
+          ></div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+          <div class="text-center">
+            <p class="text-2xl font-bold text-green-600 dark:text-green-400">${this.stats.completed}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">Completed</p>
+          </div>
+          <div class="text-center">
+            <p class="text-2xl font-bold text-red-600 dark:text-red-400">${this.stats.failed}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">Failed</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private startRealTimeUpdates(): void {
+    // Update every 5 seconds
+    this.updateInterval = setInterval(() => {
+      this.loadData();
+    }, 5000);
+  }
+
+  private getDomain(url: string): string {
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return url;
+    }
+  }
+
+  private showAddShopModal(): void {
+    // For now, navigate to shops page
+    // Later we can implement a modal
+    this.router.navigate('/shops');
+  }
+
+  destroy(): void {
+    if (this.updateInterval) {
+      clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+  }
+}

web/src/components/pages/JobsPage.ts

@@ -0,0 +1,242 @@
+import { ApiService } from '../../services/ApiService';
+import { ToastService } from '../../services/ToastService';
+import { Router } from '../../app/Router';
+import { Job, QueueStats } from '../../types';
+import { getIcon } from '../../utils/icons';
+import { formatRelativeTime, getStatusBadgeClass, getDomainFromUrl } from '../../utils/helpers';
+
+export class JobsPage {
+  private element: HTMLElement | null = null;
+  private jobs: Job[] = [];
+  private stats: QueueStats | null = null;
+  private updateInterval: NodeJS.Timeout | null = null;
+
+  constructor(
+    private apiService: ApiService,
+    private toastService: ToastService,
+    private router: Router
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'space-y-6';
+
+    this.element.innerHTML = `
+      <!-- Header -->
+      <div class="md:flex md:items-center md:justify-between">
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
+            Jobs Queue
+          </h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Monitor and manage scraping jobs
+          </p>
+        </div>
+        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
+          <button type="button" class="btn btn-secondary" id="refresh-jobs">
+            <div class="w-4 h-4 mr-2">${getIcon('refresh')}</div>
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <!-- Queue Stats -->
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-6" id="queue-stats">
+        <div class="flex items-center justify-center py-12 col-span-full">
+          <div class="w-8 h-8 spinner"></div>
+          <span class="ml-3 text-gray-600 dark:text-gray-400">Loading queue statistics...</span>
+        </div>
+      </div>
+
+      <!-- Jobs List -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">All Jobs</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Recent and active scraping jobs</p>
+        </div>
+        <div class="card-body">
+          <div id="jobs-list">
+            <div class="flex items-center justify-center py-12">
+              <div class="w-8 h-8 spinner"></div>
+              <span class="ml-3 text-gray-600 dark:text-gray-400">Loading jobs...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.bindEvents();
+    this.loadJobs();
+    this.startRealTimeUpdates();
+
+    return this.element;
+  }
+
+  private bindEvents(): void {
+    if (!this.element) return;
+
+    this.element.querySelector('#refresh-jobs')?.addEventListener('click', () => {
+      this.loadJobs();
+    });
+  }
+
+  private async loadJobs(): Promise<void> {
+    try {
+      const response = await this.apiService.getJobs();
+
+      if (response.success && response.data) {
+        // API returns { jobs, stats } directly, no data wrapper
+        this.jobs = response.data.jobs;
+        this.stats = response.data.stats;
+        this.renderStats();
+        this.renderJobs();
+      } else {
+        this.toastService.error('Load Error', response.error || 'Failed to load jobs');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to load jobs');
+    }
+  }
+
+  private renderStats(): void {
+    if (!this.stats || !this.element) return;
+
+    const statsContainer = this.element.querySelector('#queue-stats');
+    if (!statsContainer) return;
+
+    const statCards = [
+      {
+        title: 'Total Jobs',
+        value: this.stats.total,
+        icon: 'jobs',
+        color: 'blue'
+      },
+      {
+        title: 'Processing',
+        value: this.stats.processing,
+        icon: 'loading',
+        color: 'yellow'
+      },
+      {
+        title: 'Pending',
+        value: this.stats.pending,
+        icon: 'warning',
+        color: 'orange'
+      },
+      {
+        title: 'Completed',
+        value: this.stats.completed,
+        icon: 'check',
+        color: 'green'
+      }
+    ];
+
+    statsContainer.innerHTML = statCards.map(stat => `
+      <div class="card">
+        <div class="card-body">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <div class="w-8 h-8 bg-${stat.color}-100 dark:bg-${stat.color}-900 rounded-lg flex items-center justify-center">
+                <div class="w-4 h-4 text-${stat.color}-600 dark:text-${stat.color}-400">
+                  ${getIcon(stat.icon as any)}
+                </div>
+              </div>
+            </div>
+            <div class="ml-4 flex-1">
+              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">${stat.title}</p>
+              <p class="text-2xl font-bold text-gray-900 dark:text-white">${stat.value}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `).join('');
+  }
+
+  private renderJobs(): void {
+    const jobsList = this.element?.querySelector('#jobs-list');
+    if (!jobsList) return;
+
+    if (this.jobs.length === 0) {
+      jobsList.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-4">
+            <div class="w-8 h-8 text-gray-400">${getIcon('jobs')}</div>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No jobs yet</h3>
+          <p class="text-gray-500 dark:text-gray-400">Jobs will appear here when you start scraping shops</p>
+        </div>
+      `;
+      return;
+    }
+
+    jobsList.innerHTML = `
+      <div class="space-y-4">
+        ${this.jobs.map(job => this.renderJobCard(job)).join('')}
+      </div>
+    `;
+  }
+
+  private renderJobCard(job: Job): string {
+    const domain = job.sitemap_url ? getDomainFromUrl(job.sitemap_url) : 'Unknown';
+
+    return `
+      <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+        <div class="flex items-center space-x-4">
+          <div class="flex-shrink-0">
+            <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+              <div class="w-5 h-5 text-primary-600 dark:text-primary-400">
+                ${getIcon('jobs')}
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center space-x-2">
+              <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
+                Job ${job.job_id.slice(0, 8)}...
+              </p>
+              <span class="badge ${getStatusBadgeClass(job.status)}">${job.status}</span>
+            </div>
+            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
+              ${domain}
+            </p>
+            <p class="text-xs text-gray-400 dark:text-gray-500">
+              Created ${formatRelativeTime(job.created_at)}
+              ${job.updated_at ? ` • Updated ${formatRelativeTime(job.updated_at)}` : ''}
+            </p>
+          </div>
+        </div>
+        <div class="flex items-center space-x-2">
+          ${job.status === 'processing' ? `
+            <div class="w-5 h-5 text-yellow-500 animate-spin">
+              ${getIcon('loading')}
+            </div>
+          ` : ''}
+          ${job.status === 'completed' ? `
+            <div class="w-5 h-5 text-green-500">
+              ${getIcon('check')}
+            </div>
+          ` : ''}
+          ${job.status === 'failed' ? `
+            <div class="w-5 h-5 text-red-500">
+              ${getIcon('x')}
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  private startRealTimeUpdates(): void {
+    // Update every 3 seconds
+    this.updateInterval = setInterval(() => {
+      this.loadJobs();
+    }, 3000);
+  }
+
+  destroy(): void {
+    if (this.updateInterval) {
+      clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+  }
+}

web/src/components/pages/SchedulesPage.ts

@@ -0,0 +1,368 @@
+import { ApiService } from '../../services/ApiService';
+import { ToastService } from '../../services/ToastService';
+import { Router } from '../../app/Router';
+import { ShopWithAnalytics, ScheduledJob } from '../../types';
+import { getIcon } from '../../utils/icons';
+import { formatRelativeTime, getDomainFromUrl } from '../../utils/helpers';
+
+export class SchedulesPage {
+  private element: HTMLElement | null = null;
+  private shops: ShopWithAnalytics[] = [];
+  private schedules: Map<string, ScheduledJob[]> = new Map();
+  private eventsbound: boolean = false;
+
+  constructor(
+    private apiService: ApiService,
+    private toastService: ToastService,
+    private router: Router
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'space-y-6';
+
+    this.element.innerHTML = `
+      <!-- Header -->
+      <div class="md:flex md:items-center md:justify-between">
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
+            Schedules
+          </h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Manage automated scraping schedules for your shops
+          </p>
+        </div>
+        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
+          <button type="button" class="btn btn-secondary" id="refresh-schedules">
+            <div class="w-4 h-4 mr-2">${getIcon('refresh')}</div>
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <!-- Schedule Overview -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="schedule-stats">
+        <div class="flex items-center justify-center py-12 col-span-full">
+          <div class="w-8 h-8 spinner"></div>
+          <span class="ml-3 text-gray-600 dark:text-gray-400">Loading schedules...</span>
+        </div>
+      </div>
+
+      <!-- Shops & Schedules -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Shop Schedules</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Enable or disable automated scraping for each shop</p>
+        </div>
+        <div class="card-body">
+          <div id="schedules-list">
+            <div class="flex items-center justify-center py-12">
+              <div class="w-8 h-8 spinner"></div>
+              <span class="ml-3 text-gray-600 dark:text-gray-400">Loading shops...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.bindEvents();
+    this.loadShopsAndSchedules();
+
+    return this.element;
+  }
+
+  private bindEvents(): void {
+    if (!this.element || this.eventsbound) return;
+    this.eventsbound = true;
+
+    // Refresh button
+    this.element.querySelector('#refresh-schedules')?.addEventListener('click', () => {
+      this.loadShopsAndSchedules();
+    });
+  }
+
+  private async loadShopsAndSchedules(): Promise<void> {
+    try {
+      const response = await this.apiService.getShops();
+
+      if (response.success && response.data) {
+        this.shops = response.data.shops;
+
+        // Load detailed schedule info for each shop
+        await this.loadScheduleDetails();
+
+        this.renderStats();
+        this.renderSchedulesList();
+      } else {
+        this.toastService.error('Load Error', response.error || 'Failed to load shops');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to load shops');
+    }
+  }
+
+  private async loadScheduleDetails(): Promise<void> {
+    this.schedules.clear();
+
+    // Load schedule details for each shop
+    for (const shop of this.shops) {
+      try {
+        const response = await this.apiService.getShop(shop.id);
+        if (response.success && response.data) {
+          this.schedules.set(shop.id, response.data.scheduled_jobs);
+        }
+      } catch (error) {
+        console.error(`Failed to load schedules for shop ${shop.id}:`, error);
+      }
+    }
+  }
+
+  private renderStats(): void {
+    const statsContainer = this.element?.querySelector('#schedule-stats');
+    if (!statsContainer) return;
+
+    let totalShops = this.shops.length;
+    let enabledCount = 0;
+    let nextScheduledCount = 0;
+
+    // Calculate stats
+    this.shops.forEach(shop => {
+      const shopSchedules = this.schedules.get(shop.id) || [];
+      const hasActiveSchedule = shopSchedules.some(s => s.status === 'queued' && s.enabled);
+
+      if (hasActiveSchedule) {
+        enabledCount++;
+
+        // Check if there's a schedule in the next 24 hours
+        const nextSchedule = shopSchedules.find(s =>
+          s.status === 'queued' &&
+          s.enabled &&
+          new Date(s.next_run_at) <= new Date(Date.now() + 24 * 60 * 60 * 1000)
+        );
+
+        if (nextSchedule) {
+          nextScheduledCount++;
+        }
+      }
+    });
+
+    statsContainer.innerHTML = `
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="text-2xl font-bold text-gray-900 dark:text-white">${totalShops}</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Total Shops</div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="text-2xl font-bold text-green-600 dark:text-green-400">${enabledCount}</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Enabled Schedules</div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">${nextScheduledCount}</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Scheduled Today</div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderSchedulesList(): void {
+    const listContainer = this.element?.querySelector('#schedules-list');
+    if (!listContainer) return;
+
+    if (this.shops.length === 0) {
+      listContainer.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-4">
+            <div class="w-8 h-8 text-gray-400">${getIcon('schedules')}</div>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No shops yet</h3>
+          <p class="text-gray-500 dark:text-gray-400">Add shops first to manage their schedules</p>
+        </div>
+      `;
+      return;
+    }
+
+    listContainer.innerHTML = `
+      <div class="space-y-4">
+        ${this.shops.map(shop => this.renderShopScheduleCard(shop)).join('')}
+      </div>
+    `;
+
+    // Bind toggle events after rendering
+    this.bindToggleEvents();
+  }
+
+  private renderShopScheduleCard(shop: ShopWithAnalytics): string {
+    const domain = getDomainFromUrl(shop.url);
+    const shopSchedules = this.schedules.get(shop.id) || [];
+
+    // Find active schedule
+    const activeSchedule = shopSchedules.find(s => s.status === 'queued' && s.enabled);
+    const hasEnabledSchedule = !!activeSchedule;
+
+    // Find next scheduled run
+    const nextRun = hasEnabledSchedule ? activeSchedule : shopSchedules.find(s => s.status === 'queued');
+
+    return `
+      <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:shadow-md transition-shadow">
+        <div class="flex items-center justify-between">
+          <!-- Shop Info -->
+          <div class="flex items-center space-x-4 flex-1 min-w-0">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+                <div class="w-6 h-6 text-primary-600 dark:text-primary-400">
+                  ${getIcon('shops')}
+                </div>
+              </div>
+            </div>
+            <div class="flex-1 min-w-0">
+              <h4 class="text-lg font-medium text-gray-900 dark:text-white truncate">
+                ${domain}
+              </h4>
+              <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
+                ${shop.url}
+              </p>
+              <div class="mt-2 flex items-center space-x-4">
+                <span class="text-xs text-gray-500 dark:text-gray-400">
+                  ${shop.analytics.total_scrapes} scrapes • Last: ${shop.analytics.last_scraped_at ? formatRelativeTime(shop.analytics.last_scraped_at) : 'Never'}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Schedule Status -->
+          <div class="flex items-center space-x-4">
+            <div class="text-right">
+              ${hasEnabledSchedule ? `
+                <div class="flex items-center space-x-2">
+                  <div class="w-3 h-3 bg-green-500 rounded-full"></div>
+                  <span class="text-sm font-medium text-green-600 dark:text-green-400">Enabled</span>
+                </div>
+                ${nextRun ? `
+                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Next: ${formatRelativeTime(nextRun.next_run_at)}
+                  </p>
+                  <p class="text-xs text-gray-400 dark:text-gray-500">
+                    Frequency: ${nextRun.frequency || 'weekly'}
+                  </p>
+                ` : ''}
+              ` : `
+                <div class="flex items-center space-x-2">
+                  <div class="w-3 h-3 bg-gray-400 rounded-full"></div>
+                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Disabled</span>
+                </div>
+                ${nextRun ? `
+                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Would run: ${formatRelativeTime(nextRun.next_run_at)}
+                  </p>
+                ` : `
+                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    No schedule configured
+                  </p>
+                `}
+              `}
+            </div>
+
+            <!-- Toggle Switch -->
+            <div class="flex items-center">
+              <label class="relative inline-flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  class="sr-only peer schedule-toggle"
+                  data-shop-id="${shop.id}"
+                  ${hasEnabledSchedule ? 'checked' : ''}
+                >
+                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Schedule Details -->
+        ${shopSchedules.length > 0 ? `
+          <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
+            <h5 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Recent Schedules:</h5>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
+              ${shopSchedules.slice(0, 3).map(schedule => `
+                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700 rounded">
+                  <span class="text-gray-700 dark:text-gray-300">
+                    ${formatRelativeTime(schedule.next_run_at)}
+                  </span>
+                  <span class="badge ${this.getScheduleStatusClass(schedule.status)} text-xs">
+                    ${schedule.status}
+                  </span>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private getScheduleStatusClass(status: string): string {
+    switch (status) {
+      case 'queued':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+      case 'running':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      case 'completed':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+      case 'failed':
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
+    }
+  }
+
+  private bindToggleEvents(): void {
+    if (!this.element) return;
+
+    this.element.querySelectorAll('.schedule-toggle').forEach(toggle => {
+      toggle.addEventListener('change', async (e) => {
+        const checkbox = e.target as HTMLInputElement;
+        const shopId = checkbox.getAttribute('data-shop-id');
+
+        if (!shopId) return;
+
+        const enabled = checkbox.checked;
+
+        // Disable the toggle while processing
+        checkbox.disabled = true;
+
+        try {
+          const response = await this.apiService.updateShopSchedule(shopId, enabled);
+
+          if (response.success) {
+            this.toastService.success(
+              'Schedule Updated',
+              `Schedule ${enabled ? 'enabled' : 'disabled'} successfully`
+            );
+
+            // Reload the shop's schedule data
+            await this.loadScheduleDetails();
+            this.renderStats();
+            this.renderSchedulesList();
+          } else {
+            // Revert the toggle on error
+            checkbox.checked = !enabled;
+            this.toastService.error('Update Failed', response.error || 'Failed to update schedule');
+          }
+        } catch (error) {
+          // Revert the toggle on error
+          checkbox.checked = !enabled;
+          this.toastService.error('Error', 'Failed to update schedule');
+        } finally {
+          checkbox.disabled = false;
+        }
+      });
+    });
+  }
+
+  destroy(): void {
+    this.eventsbound = false;
+  }
+}

web/src/components/pages/ShopDetailPage.ts

@@ -0,0 +1,261 @@
+import { ApiService } from '../../services/ApiService';
+import { ToastService } from '../../services/ToastService';
+import { Router } from '../../app/Router';
+import { ShopDetail } from '../../types';
+import { getIcon } from '../../utils/icons';
+import { formatRelativeTime, getDomainFromUrl, getStatusBadgeClass, getContentTypeLabel } from '../../utils/helpers';
+
+export class ShopDetailPage {
+  private element: HTMLElement | null = null;
+  private shopDetail: ShopDetail | null = null;
+  private eventsbound: boolean = false;
+
+  constructor(
+    private shopId: string,
+    private apiService: ApiService,
+    private toastService: ToastService,
+    private router: Router
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'space-y-6';
+
+    this.element.innerHTML = `
+      <!-- Loading state -->
+      <div class="flex items-center justify-center py-12" id="loading">
+        <div class="w-8 h-8 spinner"></div>
+        <span class="ml-3 text-gray-600 dark:text-gray-400">Loading shop details...</span>
+      </div>
+    `;
+
+    this.loadShopDetail();
+    return this.element;
+  }
+
+  private async loadShopDetail(): Promise<void> {
+    try {
+      const response = await this.apiService.getShop(this.shopId);
+
+      if (response.success && response.data) {
+        this.shopDetail = response.data;
+        this.renderShopDetail();
+      } else {
+        this.toastService.error('Load Error', response.error || 'Failed to load shop details');
+        this.router.navigate('/shops');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to load shop details');
+      this.router.navigate('/shops');
+    }
+  }
+
+  private renderShopDetail(): void {
+    if (!this.shopDetail || !this.element) return;
+
+    const { shop, analytics, content_metadata, scrape_history } = this.shopDetail;
+    const domain = getDomainFromUrl(shop.url);
+
+    this.element.innerHTML = `
+      <!-- Header -->
+      <div class="md:flex md:items-center md:justify-between">
+        <div class="flex-1 min-w-0">
+          <nav class="flex" aria-label="Breadcrumb">
+            <ol class="flex items-center space-x-4">
+              <li>
+                <a href="/shops" class="text-gray-400 hover:text-gray-500" onclick="event.preventDefault(); window.dispatchEvent(new CustomEvent('navigate', {detail: '/shops'}))">
+                  <div class="w-5 h-5">
+                    ${getIcon('shops')}
+                  </div>
+                  <span class="sr-only">Shops</span>
+                </a>
+              </li>
+              <li>
+                <div class="flex items-center">
+                  <svg class="flex-shrink-0 h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                  </svg>
+                  <span class="ml-4 text-sm text-gray-500 dark:text-gray-400">Shop Details</span>
+                </div>
+              </li>
+            </ol>
+          </nav>
+          <h2 class="mt-2 text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
+            ${domain}
+          </h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            ${shop.url}
+          </p>
+        </div>
+        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
+          <button type="button" class="btn btn-secondary" id="trigger-scrape">
+            <div class="w-4 h-4 mr-2" id="scrape-icon">${getIcon('play')}</div>
+            <span id="scrape-text">Run Scrape</span>
+          </button>
+          <button type="button" class="btn btn-danger" id="delete-shop">
+            <div class="w-4 h-4 mr-2">${getIcon('delete')}</div>
+            Delete Shop
+          </button>
+        </div>
+      </div>
+
+      <!-- Stats Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+        <div class="card">
+          <div class="card-body text-center">
+            <div class="text-2xl font-bold text-gray-900 dark:text-white">${analytics.total_scrapes}</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">Total Scrapes</div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-body text-center">
+            <div class="text-2xl font-bold text-gray-900 dark:text-white">${analytics.total_urls_found}</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">URLs Found</div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-body text-center">
+            <div class="text-2xl font-bold text-gray-900 dark:text-white">
+              ${analytics.average_scrape_time ? Math.round(analytics.average_scrape_time / 1000) + 's' : 'N/A'}
+            </div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">Avg Scrape Time</div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-body text-center">
+            <div class="text-2xl font-bold text-gray-900 dark:text-white">
+              ${analytics.last_scraped_at ? formatRelativeTime(analytics.last_scraped_at) : 'Never'}
+            </div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">Last Scraped</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Content Overview -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Content Overview</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Latest scraped content by category</p>
+        </div>
+        <div class="card-body">
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            ${Object.entries(content_metadata).map(([key, items]) => `
+              <div class="text-center">
+                <div class="text-lg font-semibold text-gray-900 dark:text-white">${items.length}</div>
+                <div class="text-sm text-gray-500 dark:text-gray-400">${getContentTypeLabel(key)}</div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      </div>
+
+      <!-- Recent Activity -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Activity</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Latest scraping history</p>
+        </div>
+        <div class="card-body">
+          ${scrape_history.length === 0 ? `
+            <div class="text-center py-8">
+              <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-3">
+                <div class="w-6 h-6 text-gray-400">${getIcon('jobs')}</div>
+              </div>
+              <p class="text-gray-500 dark:text-gray-400">No scraping history yet</p>
+            </div>
+          ` : `
+            <div class="space-y-4">
+              ${scrape_history.slice(0, 5).map(history => `
+                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                  <div class="flex items-center space-x-3">
+                    <div class="flex-shrink-0">
+                      <span class="badge ${getStatusBadgeClass(history.status)}">${history.status}</span>
+                    </div>
+                    <div>
+                      <p class="text-sm font-medium text-gray-900 dark:text-white">
+                        Scrape ${history.id.slice(0, 8)}...
+                      </p>
+                      <p class="text-xs text-gray-500 dark:text-gray-400">
+                        ${history.urls_found} URLs • ${formatRelativeTime(history.started_at)}
+                      </p>
+                    </div>
+                  </div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">
+                    ${history.scrape_time_ms ? Math.round(history.scrape_time_ms / 1000) + 's' : 'N/A'}
+                  </div>
+                </div>
+              `).join('')}
+            </div>
+          `}
+        </div>
+      </div>
+    `;
+
+    this.bindDetailEvents();
+  }
+
+  private bindDetailEvents(): void {
+    if (!this.element || this.eventsbound) return;
+    this.eventsbound = true;
+
+    // Navigation breadcrumb
+    this.element.querySelector('a[href="/shops"]')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.router.navigate('/shops');
+    });
+
+    // Trigger scrape
+    this.element.querySelector('#trigger-scrape')?.addEventListener('click', async (e) => {
+      if (!this.shopDetail) return;
+
+      const button = e.currentTarget as HTMLButtonElement;
+      const icon = this.element?.querySelector('#scrape-icon');
+      const text = this.element?.querySelector('#scrape-text');
+
+      // Prevent multiple clicks
+      if (button.disabled) return;
+
+      // Set loading state
+      button.disabled = true;
+      if (icon) icon.innerHTML = getIcon('loading');
+      if (text) text.textContent = 'Starting...';
+
+      try {
+        const response = await this.apiService.createJob(this.shopDetail.shop.url);
+
+        if (response.success) {
+          this.toastService.success('Scrape Started', 'A new scraping job has been queued');
+        } else {
+          this.toastService.error('Scrape Failed', response.error || 'Failed to start scraping');
+        }
+      } catch (error) {
+        this.toastService.error('Error', 'Failed to start scraping');
+      } finally {
+        // Reset button state
+        button.disabled = false;
+        if (icon) icon.innerHTML = getIcon('play');
+        if (text) text.textContent = 'Run Scrape';
+      }
+    });
+
+    // Delete shop
+    this.element.querySelector('#delete-shop')?.addEventListener('click', async () => {
+      const confirmed = confirm('Are you sure you want to delete this shop? This will remove all associated data and cannot be undone.');
+
+      if (confirmed) {
+        try {
+          const response = await this.apiService.deleteShop(this.shopId);
+
+          if (response.success) {
+            this.toastService.success('Shop Deleted', 'Shop and all data have been removed');
+            this.router.navigate('/shops');
+          } else {
+            this.toastService.error('Delete Failed', response.error || 'Failed to delete shop');
+          }
+        } catch (error) {
+          this.toastService.error('Error', 'Failed to delete shop');
+        }
+      }
+    });
+  }
+}

web/src/components/pages/ShopsPage.ts

@@ -0,0 +1,377 @@
+import { ApiService } from '../../services/ApiService';
+import { ToastService } from '../../services/ToastService';
+import { Router } from '../../app/Router';
+import { ShopWithAnalytics } from '../../types';
+import { getIcon } from '../../utils/icons';
+import { formatRelativeTime, getDomainFromUrl, getWebshopTypeInfo } from '../../utils/helpers';
+
+export class ShopsPage {
+  private element: HTMLElement | null = null;
+  private shops: ShopWithAnalytics[] = [];
+
+  constructor(
+    private apiService: ApiService,
+    private toastService: ToastService,
+    private router: Router
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'space-y-6';
+
+    this.element.innerHTML = `
+      <!-- Header -->
+      <div class="md:flex md:items-center md:justify-between">
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
+            Shops
+          </h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Manage and monitor your webshops
+          </p>
+        </div>
+        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
+          <button
+            type="button"
+            class="btn btn-secondary"
+            id="refresh-shops"
+          >
+            <div class="w-4 h-4 mr-2">
+              ${getIcon('refresh')}
+            </div>
+            Refresh
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            id="add-shop-btn"
+          >
+            <div class="w-4 h-4 mr-2">
+              ${getIcon('plus')}
+            </div>
+            Add Shop
+          </button>
+        </div>
+      </div>
+
+      <!-- Add Shop Modal -->
+      <div class="fixed inset-0 z-50 hidden" id="add-shop-modal">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+          <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+            <form id="add-shop-form">
+              <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div class="sm:flex sm:items-start">
+                  <div class="w-full">
+                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mb-4">
+                      Add New Shop
+                    </h3>
+                    <div class="space-y-4">
+                      <div>
+                        <label for="shop-url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                          Shop URL
+                        </label>
+                        <input
+                          type="url"
+                          id="shop-url"
+                          name="shopUrl"
+                          required
+                          class="input mt-1"
+                          placeholder="https://example-shop.com"
+                        >
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                          Enter the main URL of the webshop you want to scrape
+                        </p>
+                      </div>
+                      <div>
+                        <label for="custom-id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                          Custom ID (Optional)
+                        </label>
+                        <input
+                          type="text"
+                          id="custom-id"
+                          name="customId"
+                          class="input mt-1"
+                          placeholder="cf1a0652-d4cd-4e6f-85a0-87d203578c35"
+                          pattern="^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$"
+                        >
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                          Optional custom UUID for API access (leave empty to auto-generate)
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                <button
+                  type="submit"
+                  class="btn btn-primary sm:ml-3 sm:w-auto"
+                  id="submit-shop"
+                >
+                  <span id="submit-text">Add Shop</span>
+                  <div class="w-4 h-4 ml-2 hidden" id="submit-spinner">
+                    <div class="spinner"></div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-secondary mt-3 sm:mt-0 sm:w-auto"
+                  id="cancel-shop"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <!-- Shops Grid -->
+      <div id="shops-container">
+        <div class="flex items-center justify-center py-12">
+          <div class="w-8 h-8 spinner"></div>
+          <span class="ml-3 text-gray-600 dark:text-gray-400">Loading shops...</span>
+        </div>
+      </div>
+    `;
+
+    this.bindEvents();
+    this.loadShops();
+
+    return this.element;
+  }
+
+  private bindEvents(): void {
+    if (!this.element) return;
+
+    const addShopBtn = this.element.querySelector('#add-shop-btn');
+    const refreshBtn = this.element.querySelector('#refresh-shops');
+    const modal = this.element.querySelector('#add-shop-modal');
+    const form = this.element.querySelector('#add-shop-form') as HTMLFormElement;
+    const cancelBtn = this.element.querySelector('#cancel-shop');
+
+    // Show modal
+    addShopBtn?.addEventListener('click', () => {
+      modal?.classList.remove('hidden');
+      const urlInput = this.element?.querySelector('#shop-url') as HTMLInputElement;
+      urlInput?.focus();
+    });
+
+    // Hide modal
+    const hideModal = () => {
+      modal?.classList.add('hidden');
+      form?.reset();
+    };
+
+    cancelBtn?.addEventListener('click', hideModal);
+
+    // Click outside to close
+    modal?.addEventListener('click', (e) => {
+      if (e.target === modal) {
+        hideModal();
+      }
+    });
+
+    // Refresh
+    refreshBtn?.addEventListener('click', () => {
+      this.loadShops();
+    });
+
+    // Form submit
+    form?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(form);
+      const shopUrl = formData.get('shopUrl') as string;
+      const customId = (formData.get('customId') as string)?.trim() || undefined;
+
+      if (!shopUrl) return;
+
+      // Validate custom ID format if provided
+      if (customId && !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(customId)) {
+        this.toastService.error('Invalid Custom ID', 'Custom ID must be a valid UUID format');
+        return;
+      }
+
+      const submitBtn = this.element?.querySelector('#submit-shop') as HTMLButtonElement;
+      const submitText = this.element?.querySelector('#submit-text');
+      const submitSpinner = this.element?.querySelector('#submit-spinner');
+
+      submitBtn.disabled = true;
+      submitText!.textContent = 'Adding...';
+      submitSpinner?.classList.remove('hidden');
+
+      try {
+        const response = await this.apiService.createJob(shopUrl, customId);
+
+        if (response.success) {
+          this.toastService.success('Shop Added', 'Shop scraping job has been started');
+          hideModal();
+          this.loadShops();
+        } else {
+          this.toastService.error('Add Failed', response.error || 'Failed to add shop');
+        }
+      } catch (error) {
+        this.toastService.error('Error', 'Failed to add shop');
+      } finally {
+        submitBtn.disabled = false;
+        submitText!.textContent = 'Add Shop';
+        submitSpinner?.classList.add('hidden');
+      }
+    });
+  }
+
+  private async loadShops(): Promise<void> {
+    const container = this.element?.querySelector('#shops-container');
+    if (!container) return;
+
+    try {
+      const response = await this.apiService.getShops();
+
+      if (response.success && response.data) {
+        // API returns { shops } directly, no data wrapper
+        this.shops = response.data.shops;
+        this.renderShops();
+      } else {
+        this.toastService.error('Load Error', response.error || 'Failed to load shops');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to load shops');
+    }
+  }
+
+  private renderShops(): void {
+    const container = this.element?.querySelector('#shops-container');
+    if (!container) return;
+
+    if (this.shops.length === 0) {
+      container.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-4">
+            <div class="w-8 h-8 text-gray-400">
+              ${getIcon('shops')}
+            </div>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No shops yet</h3>
+          <p class="text-gray-500 dark:text-gray-400 mb-6">
+            Get started by adding your first webshop to scrape
+          </p>
+          <button class="btn btn-primary" onclick="document.getElementById('add-shop-btn').click()">
+            <div class="w-4 h-4 mr-2">
+              ${getIcon('plus')}
+            </div>
+            Add Your First Shop
+          </button>
+        </div>
+      `;
+      return;
+    }
+
+    container.innerHTML = `
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        ${this.shops.map(shop => this.renderShopCard(shop)).join('')}
+      </div>
+    `;
+
+    // Add click handlers
+    container.querySelectorAll('[data-shop-id]').forEach(element => {
+      element.addEventListener('click', () => {
+        const shopId = element.getAttribute('data-shop-id');
+        if (shopId) {
+          this.router.navigate(`/shops/${shopId}`);
+        }
+      });
+    });
+  }
+
+  private renderShopCard(shop: ShopWithAnalytics): string {
+    const domain = getDomainFromUrl(shop.url);
+    const typeInfo = getWebshopTypeInfo(shop.webshop_type);
+
+    return `
+      <div
+        class="card hover:shadow-lg transition-shadow cursor-pointer"
+        data-shop-id="${shop.id}"
+      >
+        <div class="card-body">
+          <div class="flex items-start justify-between">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+                  <div class="w-5 h-5 text-primary-600 dark:text-primary-400">
+                    ${getIcon('shops')}
+                  </div>
+                </div>
+                <div>
+                  <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate">
+                    ${domain}
+                  </h3>
+                  <p class="text-xs text-gray-500 dark:text-gray-400">
+                    ${typeInfo.label}
+                  </p>
+                </div>
+              </div>
+
+              <div class="mt-4 space-y-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-500 dark:text-gray-400">Total Scrapes</span>
+                  <span class="font-medium text-gray-900 dark:text-white">
+                    ${shop.analytics.total_scrapes}
+                  </span>
+                </div>
+
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-500 dark:text-gray-400">URLs Found</span>
+                  <span class="font-medium text-gray-900 dark:text-white">
+                    ${shop.analytics.total_urls_found}
+                  </span>
+                </div>
+
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-500 dark:text-gray-400">Last Scraped</span>
+                  <span class="font-medium text-gray-900 dark:text-white">
+                    ${shop.analytics.last_scraped_at ? formatRelativeTime(shop.analytics.last_scraped_at) : 'Never'}
+                  </span>
+                </div>
+
+                ${shop.custom_id ? `
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-500 dark:text-gray-400">Custom ID</span>
+                  <div class="flex items-center space-x-1">
+                    <span class="font-medium text-gray-900 dark:text-white font-mono text-xs">
+                      ${shop.custom_id.substring(0, 8)}...
+                    </span>
+                    <button
+                      class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                      onclick="event.stopPropagation(); navigator.clipboard.writeText('${shop.custom_id}').then(() => {
+                        document.dispatchEvent(new CustomEvent('show-toast', {
+                          detail: { type: 'success', title: 'Copied!', message: 'Custom ID copied to clipboard' }
+                        }));
+                      })"
+                      title="Copy custom ID"
+                    >
+                      <div class="w-3 h-3">${getIcon('copy')}</div>
+                    </button>
+                  </div>
+                </div>
+                ` : ''}
+              </div>
+
+              <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+                <div class="flex items-center justify-between">
+                  <span class="badge ${shop.analytics.total_scrapes > 0 ? 'badge-success' : 'badge-gray'}">
+                    ${shop.analytics.total_scrapes > 0 ? 'Active' : 'New'}
+                  </span>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">
+                    Added ${formatRelativeTime(shop.created_at)}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

web/src/components/pages/WebhooksPage.ts

@@ -0,0 +1,596 @@
+import { ApiService } from '../../services/ApiService';
+import { ToastService } from '../../services/ToastService';
+import { Router } from '../../app/Router';
+import { ShopWithAnalytics, Webhook, WebhookDelivery } from '../../types';
+import { getIcon } from '../../utils/icons';
+import { formatRelativeTime, getDomainFromUrl } from '../../utils/helpers';
+
+interface ShopWebhookData {
+  webhook: Webhook | null;
+  deliveries: WebhookDelivery[];
+}
+
+export class WebhooksPage {
+  private element: HTMLElement | null = null;
+  private shops: ShopWithAnalytics[] = [];
+  private webhookData: Map<string, ShopWebhookData> = new Map();
+  private eventsbound: boolean = false;
+
+  constructor(
+    private apiService: ApiService,
+    private toastService: ToastService,
+    private router: Router
+  ) {}
+
+  render(): HTMLElement {
+    this.element = document.createElement('div');
+    this.element.className = 'space-y-6';
+
+    this.element.innerHTML = `
+      <!-- Header -->
+      <div class="md:flex md:items-center md:justify-between">
+        <div class="flex-1 min-w-0">
+          <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
+            Webhooks
+          </h2>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Configure webhook notifications for shop events
+          </p>
+        </div>
+        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
+          <button type="button" class="btn btn-secondary" id="refresh-webhooks">
+            <div class="w-4 h-4 mr-2">${getIcon('refresh')}</div>
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <!-- Webhook Overview -->
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-6" id="webhook-stats">
+        <div class="flex items-center justify-center py-12 col-span-full">
+          <div class="w-8 h-8 spinner"></div>
+          <span class="ml-3 text-gray-600 dark:text-gray-400">Loading webhooks...</span>
+        </div>
+      </div>
+
+      <!-- Webhooks List -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Shop Webhooks</h3>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Configure webhook endpoints for each shop</p>
+        </div>
+        <div class="card-body">
+          <div id="webhooks-list">
+            <div class="flex items-center justify-center py-12">
+              <div class="w-8 h-8 spinner"></div>
+              <span class="ml-3 text-gray-600 dark:text-gray-400">Loading shops...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Add/Edit Webhook Modal -->
+      <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden" id="webhook-modal">
+        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
+          <div class="mt-3">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-medium text-gray-900 dark:text-white" id="modal-title">Configure Webhook</h3>
+              <button class="text-gray-400 hover:text-gray-600" id="close-modal">
+                <div class="w-6 h-6">${getIcon('x')}</div>
+              </button>
+            </div>
+            <form id="webhook-form">
+              <input type="hidden" id="webhook-shop-id" name="shopId" />
+              <div class="mb-4">
+                <label for="webhook-url" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Webhook URL *
+                </label>
+                <input
+                  type="url"
+                  id="webhook-url"
+                  name="url"
+                  required
+                  class="form-input"
+                  placeholder="https://your-domain.com/webhook"
+                />
+              </div>
+              <div class="mb-6">
+                <label for="webhook-secret" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Secret (Optional)
+                </label>
+                <input
+                  type="text"
+                  id="webhook-secret"
+                  name="secret"
+                  class="form-input"
+                  placeholder="Optional secret for webhook verification"
+                />
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  Used to verify webhook authenticity with HMAC
+                </p>
+              </div>
+              <div class="flex space-x-3">
+                <button type="button" class="btn btn-secondary flex-1" id="cancel-webhook">
+                  Cancel
+                </button>
+                <button type="submit" class="btn btn-primary flex-1" id="save-webhook">
+                  <span id="save-text">Save Webhook</span>
+                  <div class="w-4 h-4 ml-2 hidden" id="save-spinner">
+                    <div class="spinner"></div>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.bindEvents();
+    this.loadShopsAndWebhooks();
+
+    return this.element;
+  }
+
+  private bindEvents(): void {
+    if (!this.element || this.eventsbound) return;
+    this.eventsbound = true;
+
+    // Refresh button
+    this.element.querySelector('#refresh-webhooks')?.addEventListener('click', () => {
+      this.loadShopsAndWebhooks();
+    });
+
+    // Modal events
+    const modal = this.element.querySelector('#webhook-modal');
+    const closeBtn = this.element.querySelector('#close-modal');
+    const cancelBtn = this.element.querySelector('#cancel-webhook');
+
+    [closeBtn, cancelBtn].forEach(btn => {
+      btn?.addEventListener('click', () => {
+        modal?.classList.add('hidden');
+      });
+    });
+
+    // Form submission
+    const form = this.element.querySelector('#webhook-form') as HTMLFormElement;
+    form?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      await this.saveWebhook();
+    });
+
+    // Click outside modal to close
+    modal?.addEventListener('click', (e) => {
+      if (e.target === modal) {
+        modal.classList.add('hidden');
+      }
+    });
+  }
+
+  private async loadShopsAndWebhooks(): Promise<void> {
+    try {
+      const response = await this.apiService.getShops();
+
+      if (response.success && response.data) {
+        this.shops = response.data.shops;
+
+        // Load webhook data for each shop
+        await this.loadWebhookData();
+
+        this.renderStats();
+        this.renderWebhooksList();
+      } else {
+        this.toastService.error('Load Error', response.error || 'Failed to load shops');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to load shops');
+    }
+  }
+
+  private async loadWebhookData(): Promise<void> {
+    this.webhookData.clear();
+
+    for (const shop of this.shops) {
+      try {
+        const response = await this.apiService.getWebhook(shop.id);
+        if (response.success && response.data) {
+          this.webhookData.set(shop.id, {
+            webhook: response.data.webhook,
+            deliveries: response.data.deliveries
+          });
+        } else {
+          // No webhook configured - this is normal
+          this.webhookData.set(shop.id, {
+            webhook: null,
+            deliveries: []
+          });
+        }
+      } catch (error) {
+        console.error(`Failed to load webhook for shop ${shop.id}:`, error);
+        this.webhookData.set(shop.id, {
+          webhook: null,
+          deliveries: []
+        });
+      }
+    }
+  }
+
+  private renderStats(): void {
+    const statsContainer = this.element?.querySelector('#webhook-stats');
+    if (!statsContainer) return;
+
+    let totalShops = this.shops.length;
+    let configuredCount = 0;
+    let enabledCount = 0;
+    let recentDeliveries = 0;
+
+    this.webhookData.forEach((data) => {
+      if (data.webhook) {
+        configuredCount++;
+        if (data.webhook.enabled) {
+          enabledCount++;
+        }
+      }
+      recentDeliveries += data.deliveries.length;
+    });
+
+    statsContainer.innerHTML = `
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="text-2xl font-bold text-gray-900 dark:text-white">${totalShops}</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Total Shops</div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">${configuredCount}</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Webhooks Configured</div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="text-2xl font-bold text-green-600 dark:text-green-400">${enabledCount}</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Active Webhooks</div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-body text-center">
+          <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">${recentDeliveries}</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Recent Deliveries</div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderWebhooksList(): void {
+    const listContainer = this.element?.querySelector('#webhooks-list');
+    if (!listContainer) return;
+
+    if (this.shops.length === 0) {
+      listContainer.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-4">
+            <div class="w-8 h-8 text-gray-400">${getIcon('webhooks')}</div>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No shops yet</h3>
+          <p class="text-gray-500 dark:text-gray-400">Add shops first to configure webhooks</p>
+        </div>
+      `;
+      return;
+    }
+
+    listContainer.innerHTML = `
+      <div class="space-y-4">
+        ${this.shops.map(shop => this.renderWebhookCard(shop)).join('')}
+      </div>
+    `;
+
+    this.bindWebhookEvents();
+  }
+
+  private renderWebhookCard(shop: ShopWithAnalytics): string {
+    const domain = getDomainFromUrl(shop.url);
+    const data = this.webhookData.get(shop.id);
+    const webhook = data?.webhook;
+    const deliveries = data?.deliveries || [];
+
+    const hasWebhook = !!webhook;
+    const isEnabled = hasWebhook && webhook.enabled;
+
+    return `
+      <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:shadow-md transition-shadow">
+        <div class="flex items-center justify-between mb-4">
+          <!-- Shop Info -->
+          <div class="flex items-center space-x-4 flex-1 min-w-0">
+            <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+                <div class="w-6 h-6 text-primary-600 dark:text-primary-400">
+                  ${getIcon('shops')}
+                </div>
+              </div>
+            </div>
+            <div class="flex-1 min-w-0">
+              <h4 class="text-lg font-medium text-gray-900 dark:text-white truncate">
+                ${domain}
+              </h4>
+              <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
+                ${shop.url}
+              </p>
+              <div class="mt-1 flex items-center space-x-4">
+                <span class="text-xs text-gray-500 dark:text-gray-400">
+                  ${shop.analytics.total_scrapes} scrapes
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Status & Actions -->
+          <div class="flex items-center space-x-4">
+            <div class="text-right">
+              ${hasWebhook ? `
+                <div class="flex items-center space-x-2">
+                  <div class="w-3 h-3 ${isEnabled ? 'bg-green-500' : 'bg-yellow-500'} rounded-full"></div>
+                  <span class="text-sm font-medium ${isEnabled ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}">
+                    ${isEnabled ? 'Active' : 'Disabled'}
+                  </span>
+                </div>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate max-w-32">
+                  ${webhook.url}
+                </p>
+                <p class="text-xs text-gray-400 dark:text-gray-500">
+                  Created ${formatRelativeTime(webhook.created_at)}
+                </p>
+              ` : `
+                <div class="flex items-center space-x-2">
+                  <div class="w-3 h-3 bg-gray-400 rounded-full"></div>
+                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Not configured</span>
+                </div>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  No webhook endpoint
+                </p>
+              `}
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="flex items-center space-x-2">
+              ${hasWebhook ? `
+                <!-- Enable/Disable Toggle -->
+                <label class="relative inline-flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    class="sr-only peer webhook-toggle"
+                    data-shop-id="${shop.id}"
+                    ${isEnabled ? 'checked' : ''}
+                  >
+                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div>
+                </label>
+
+                <!-- Edit Button -->
+                <button
+                  type="button"
+                  class="btn btn-secondary btn-sm edit-webhook-btn"
+                  data-shop-id="${shop.id}"
+                >
+                  <div class="w-4 h-4">${getIcon('edit')}</div>
+                </button>
+
+                <!-- Delete Button -->
+                <button
+                  type="button"
+                  class="btn btn-danger btn-sm delete-webhook-btn"
+                  data-shop-id="${shop.id}"
+                >
+                  <div class="w-4 h-4">${getIcon('delete')}</div>
+                </button>
+              ` : `
+                <!-- Add Button -->
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm add-webhook-btn"
+                  data-shop-id="${shop.id}"
+                >
+                  <div class="w-4 h-4 mr-1">${getIcon('plus')}</div>
+                  Add Webhook
+                </button>
+              `}
+            </div>
+          </div>
+        </div>
+
+        <!-- Recent Deliveries -->
+        ${deliveries.length > 0 ? `
+          <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
+            <h5 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Recent Deliveries:</h5>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
+              ${deliveries.slice(0, 4).map(delivery => `
+                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700 rounded">
+                  <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 ${delivery.status === 'success' ? 'bg-green-500' : 'bg-red-500'} rounded-full"></div>
+                    <span class="text-gray-700 dark:text-gray-300">${delivery.event}</span>
+                  </div>
+                  <span class="text-gray-500 dark:text-gray-400">
+                    ${formatRelativeTime(delivery.attempted_at)}
+                  </span>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        ` : hasWebhook ? `
+          <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
+            <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
+              No recent deliveries
+            </p>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private bindWebhookEvents(): void {
+    if (!this.element) return;
+
+    // Add webhook buttons
+    this.element.querySelectorAll('.add-webhook-btn').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const shopId = (e.currentTarget as HTMLElement).getAttribute('data-shop-id');
+        if (shopId) this.showWebhookModal(shopId);
+      });
+    });
+
+    // Edit webhook buttons
+    this.element.querySelectorAll('.edit-webhook-btn').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const shopId = (e.currentTarget as HTMLElement).getAttribute('data-shop-id');
+        if (shopId) this.showWebhookModal(shopId, true);
+      });
+    });
+
+    // Delete webhook buttons
+    this.element.querySelectorAll('.delete-webhook-btn').forEach(btn => {
+      btn.addEventListener('click', async (e) => {
+        const shopId = (e.currentTarget as HTMLElement).getAttribute('data-shop-id');
+        if (shopId) await this.deleteWebhook(shopId);
+      });
+    });
+
+    // Webhook enable/disable toggles
+    this.element.querySelectorAll('.webhook-toggle').forEach(toggle => {
+      toggle.addEventListener('change', async (e) => {
+        const checkbox = e.target as HTMLInputElement;
+        const shopId = checkbox.getAttribute('data-shop-id');
+
+        if (!shopId) return;
+
+        const enabled = checkbox.checked;
+        checkbox.disabled = true;
+
+        try {
+          const response = await this.apiService.updateWebhook(shopId, enabled);
+
+          if (response.success) {
+            this.toastService.success(
+              'Webhook Updated',
+              `Webhook ${enabled ? 'enabled' : 'disabled'} successfully`
+            );
+          } else {
+            checkbox.checked = !enabled;
+            this.toastService.error('Update Failed', response.error || 'Failed to update webhook');
+          }
+        } catch (error) {
+          checkbox.checked = !enabled;
+          this.toastService.error('Error', 'Failed to update webhook');
+        } finally {
+          checkbox.disabled = false;
+        }
+      });
+    });
+  }
+
+  private showWebhookModal(shopId: string, isEdit: boolean = false): void {
+    const modal = this.element?.querySelector('#webhook-modal');
+    const form = this.element?.querySelector('#webhook-form') as HTMLFormElement;
+    const title = this.element?.querySelector('#modal-title');
+    const shopIdInput = this.element?.querySelector('#webhook-shop-id') as HTMLInputElement;
+    const urlInput = this.element?.querySelector('#webhook-url') as HTMLInputElement;
+    const secretInput = this.element?.querySelector('#webhook-secret') as HTMLInputElement;
+
+    if (!modal || !form || !shopIdInput) return;
+
+    const shop = this.shops.find(s => s.id === shopId);
+    const webhookData = this.webhookData.get(shopId);
+
+    if (title) {
+      title.textContent = isEdit ? 'Edit Webhook' : 'Add Webhook';
+    }
+
+    // Reset form
+    form.reset();
+    shopIdInput.value = shopId;
+
+    if (isEdit && webhookData?.webhook) {
+      urlInput.value = webhookData.webhook.url;
+      secretInput.value = ''; // Don't show existing secret
+    }
+
+    modal.classList.remove('hidden');
+    urlInput.focus();
+  }
+
+  private async saveWebhook(): Promise<void> {
+    const form = this.element?.querySelector('#webhook-form') as HTMLFormElement;
+    const saveBtn = this.element?.querySelector('#save-webhook') as HTMLButtonElement;
+    const saveText = this.element?.querySelector('#save-text');
+    const saveSpinner = this.element?.querySelector('#save-spinner');
+    const modal = this.element?.querySelector('#webhook-modal');
+
+    if (!form) return;
+
+    const formData = new FormData(form);
+    const shopId = formData.get('shopId') as string;
+    const url = formData.get('url') as string;
+    const secret = formData.get('secret') as string;
+
+    // Show loading state
+    saveBtn.disabled = true;
+    saveText!.textContent = 'Saving...';
+    saveSpinner?.classList.remove('hidden');
+
+    try {
+      const response = await this.apiService.createWebhook(shopId, {
+        url,
+        secret: secret || undefined
+      });
+
+      if (response.success) {
+        this.toastService.success('Webhook Saved', 'Webhook configured successfully');
+
+        // Reload webhook data and close modal
+        await this.loadWebhookData();
+        this.renderStats();
+        this.renderWebhooksList();
+        modal?.classList.add('hidden');
+      } else {
+        this.toastService.error('Save Failed', response.error || 'Failed to save webhook');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to save webhook');
+    } finally {
+      // Reset button state
+      saveBtn.disabled = false;
+      saveText!.textContent = 'Save Webhook';
+      saveSpinner?.classList.add('hidden');
+    }
+  }
+
+  private async deleteWebhook(shopId: string): Promise<void> {
+    const shop = this.shops.find(s => s.id === shopId);
+    if (!shop) return;
+
+    const confirmed = confirm(
+      `Are you sure you want to delete the webhook for ${getDomainFromUrl(shop.url)}? This cannot be undone.`
+    );
+
+    if (!confirmed) return;
+
+    try {
+      const response = await this.apiService.deleteWebhook(shopId);
+
+      if (response.success) {
+        this.toastService.success('Webhook Deleted', 'Webhook removed successfully');
+
+        // Reload webhook data
+        await this.loadWebhookData();
+        this.renderStats();
+        this.renderWebhooksList();
+      } else {
+        this.toastService.error('Delete Failed', response.error || 'Failed to delete webhook');
+      }
+    } catch (error) {
+      this.toastService.error('Error', 'Failed to delete webhook');
+    }
+  }
+
+  destroy(): void {
+    this.eventsbound = false;
+  }
+}

web/src/main.ts

@@ -0,0 +1,10 @@
+import './styles/main.css';
+import { App } from './app/App';
+import { AuthService } from './services/AuthService';
+
+// Initialize the application
+const authService = new AuthService();
+const app = new App(authService);
+
+// Mount the app
+app.mount(document.getElementById('app')!);

web/src/services/ApiService.ts

@@ -0,0 +1,208 @@
+import {
+  Shop,
+  ShopWithAnalytics,
+  ShopDetail,
+  Job,
+  QueueStats,
+  ShopContent,
+  ScrapeHistory,
+  Webhook,
+  WebhookDelivery,
+  CustomUrl,
+  ContentFilters,
+  ShopResultsResponse,
+  ApiResponse
+} from '../types';
+import { AuthService } from './AuthService';
+
+export class ApiService {
+  constructor(private authService: AuthService) {}
+
+  private async request<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<ApiResponse<T>> {
+    try {
+      const headers = {
+        ...this.authService.getAuthHeaders(),
+        ...options.headers,
+      };
+
+      const response = await fetch(endpoint, {
+        ...options,
+        headers,
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          this.authService.logout();
+          throw new Error('Authentication failed');
+        }
+
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `HTTP ${response.status}`);
+      }
+
+      const data = await response.json();
+      return { data, success: true };
+    } catch (error) {
+      return {
+        error: error instanceof Error ? error.message : 'Unknown error',
+        success: false,
+      };
+    }
+  }
+
+  // Health & Queue
+  async getHealth(): Promise<ApiResponse<{ status: string; queue_stats: QueueStats }>> {
+    return this.request('/health');
+  }
+
+  // Jobs
+  async getJobs(): Promise<ApiResponse<{ jobs: Job[]; stats: QueueStats }>> {
+    const response = await this.request<{ jobs: Job[]; stats: QueueStats }>('/api/jobs');
+    // API returns { stats, jobs } directly, no wrapper
+    return response;
+  }
+
+  async getJob(jobId: string): Promise<ApiResponse<Job>> {
+    return this.request(`/api/jobs/${jobId}`);
+  }
+
+  async createJob(shopUrl: string, customId?: string): Promise<ApiResponse<{ job_id: string; message: string }>> {
+    const body: { url: string; custom_id?: string } = { url: shopUrl };
+    if (customId) {
+      body.custom_id = customId;
+    }
+
+    return this.request('/api/jobs', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+  }
+
+  // Shops
+  async getShops(): Promise<ApiResponse<{ shops: ShopWithAnalytics[] }>> {
+    const response = await this.request<{ shops: ShopWithAnalytics[] }>('/api/shops');
+    // API returns { shops } directly, no wrapper
+    return response;
+  }
+
+  async getShop(shopId: string): Promise<ApiResponse<ShopDetail>> {
+    return this.request(`/api/shops/${shopId}`);
+  }
+
+  async deleteShop(shopId: string): Promise<ApiResponse<{ message: string }>> {
+    return this.request(`/api/shops/${shopId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async updateShopCustomId(
+    shopId: string,
+    customId: string | null
+  ): Promise<ApiResponse<{ shop_id: string; custom_id: string | null; message: string }>> {
+    return this.request(`/api/shops/${shopId}/custom-id`, {
+      method: 'PATCH',
+      body: JSON.stringify({ custom_id: customId }),
+    });
+  }
+
+  // Shop Results
+  async getShopResults(
+    shopId: string,
+    filters: ContentFilters = {}
+  ): Promise<ApiResponse<ShopResultsResponse>> {
+    const params = new URLSearchParams();
+
+    if (filters.limit) params.append('limit', filters.limit.toString());
+    if (filters.date_from) params.append('date_from', filters.date_from);
+    if (filters.date_to) params.append('date_to', filters.date_to);
+    if (filters.content_type) params.append('content_type', filters.content_type);
+
+    const query = params.toString();
+    const url = `/api/shops/${shopId}/results${query ? `?${query}` : ''}`;
+
+    return this.request(url);
+  }
+
+  // Schedule Management
+  async updateShopSchedule(
+    shopId: string,
+    enabled: boolean
+  ): Promise<ApiResponse<{ message: string }>> {
+    return this.request(`/api/shops/${shopId}/schedule`, {
+      method: 'PATCH',
+      body: JSON.stringify({ enabled }),
+    });
+  }
+
+  // Webhooks
+  async getWebhook(shopId: string): Promise<ApiResponse<{
+    webhook: Webhook | null;
+    deliveries: WebhookDelivery[];
+  }>> {
+    return this.request(`/api/shops/${shopId}/webhooks`);
+  }
+
+  async createWebhook(
+    shopId: string,
+    webhookData: { url: string; secret?: string }
+  ): Promise<ApiResponse<Webhook>> {
+    return this.request(`/api/shops/${shopId}/webhooks`, {
+      method: 'POST',
+      body: JSON.stringify(webhookData),
+    });
+  }
+
+  async updateWebhook(
+    shopId: string,
+    enabled: boolean
+  ): Promise<ApiResponse<{ message: string }>> {
+    return this.request(`/api/shops/${shopId}/webhooks`, {
+      method: 'PATCH',
+      body: JSON.stringify({ enabled }),
+    });
+  }
+
+  async deleteWebhook(shopId: string): Promise<ApiResponse<{ message: string }>> {
+    return this.request(`/api/shops/${shopId}/webhooks`, {
+      method: 'DELETE',
+    });
+  }
+
+  // Custom URLs
+  async getCustomUrls(shopId: string): Promise<ApiResponse<{ custom_urls: CustomUrl[] }>> {
+    return this.request(`/api/shops/${shopId}/custom-urls`);
+  }
+
+  async addCustomUrl(
+    shopId: string,
+    urlData: { url: string; content_type: 'shipping' | 'contacts' | 'terms' | 'faq' }
+  ): Promise<ApiResponse<CustomUrl>> {
+    return this.request(`/api/shops/${shopId}/custom-urls`, {
+      method: 'POST',
+      body: JSON.stringify(urlData),
+    });
+  }
+
+  async updateCustomUrl(
+    shopId: string,
+    customUrlId: string,
+    enabled: boolean
+  ): Promise<ApiResponse<{ message: string }>> {
+    return this.request(`/api/shops/${shopId}/custom-urls/${customUrlId}`, {
+      method: 'PATCH',
+      body: JSON.stringify({ enabled }),
+    });
+  }
+
+  async deleteCustomUrl(
+    shopId: string,
+    customUrlId: string
+  ): Promise<ApiResponse<{ message: string }>> {
+    return this.request(`/api/shops/${shopId}/custom-urls/${customUrlId}`, {
+      method: 'DELETE',
+    });
+  }
+}

web/src/services/AuthService.ts

@@ -0,0 +1,93 @@
+import { User } from '../types';
+
+export class AuthService {
+  private apiKey: string | null = null;
+  private listeners: ((user: User) => void)[] = [];
+
+  constructor() {
+    // Try to load API key from localStorage
+    this.apiKey = localStorage.getItem('apiKey');
+  }
+
+  /**
+   * Login with API key
+   */
+  async login(apiKey: string): Promise<boolean> {
+    try {
+      // Test the API key by making a request to a protected endpoint
+      const response = await fetch('/health', {
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+        },
+      });
+
+      if (response.ok) {
+        this.apiKey = apiKey;
+        localStorage.setItem('apiKey', apiKey);
+        this.notifyListeners();
+        return true;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      console.error('Login failed:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Logout and clear stored API key
+   */
+  logout(): void {
+    this.apiKey = null;
+    localStorage.removeItem('apiKey');
+    this.notifyListeners();
+  }
+
+  /**
+   * Get current user state
+   */
+  getCurrentUser(): User {
+    return {
+      isAuthenticated: !!this.apiKey,
+      apiKey: this.apiKey || undefined,
+    };
+  }
+
+  /**
+   * Get authentication headers for API requests
+   */
+  getAuthHeaders(): Record<string, string> {
+    if (!this.apiKey) {
+      throw new Error('Not authenticated');
+    }
+
+    return {
+      'Authorization': `Bearer ${this.apiKey}`,
+      'Content-Type': 'application/json',
+    };
+  }
+
+  /**
+   * Subscribe to authentication state changes
+   */
+  onAuthChange(callback: (user: User) => void): () => void {
+    this.listeners.push(callback);
+
+    // Call immediately with current state
+    callback(this.getCurrentUser());
+
+    // Return unsubscribe function
+    return () => {
+      const index = this.listeners.indexOf(callback);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  private notifyListeners(): void {
+    const user = this.getCurrentUser();
+    this.listeners.forEach(listener => listener(user));
+  }
+}

web/src/services/ToastService.ts

@@ -0,0 +1,100 @@
+import { ToastMessage } from '../types';
+
+export class ToastService {
+  private toasts: ToastMessage[] = [];
+  private listeners: ((toasts: ToastMessage[]) => void)[] = [];
+  private nextId = 1;
+
+  /**
+   * Add a toast message
+   */
+  add(
+    type: ToastMessage['type'],
+    title: string,
+    message?: string,
+    duration = 5000
+  ): void {
+    const toast: ToastMessage = {
+      id: (this.nextId++).toString(),
+      type,
+      title,
+      message,
+      duration,
+    };
+
+    this.toasts.push(toast);
+    this.notifyListeners();
+
+    // Auto remove after duration
+    if (duration > 0) {
+      setTimeout(() => {
+        this.remove(toast.id);
+      }, duration);
+    }
+  }
+
+  /**
+   * Remove a toast by ID
+   */
+  remove(id: string): void {
+    const index = this.toasts.findIndex(toast => toast.id === id);
+    if (index > -1) {
+      this.toasts.splice(index, 1);
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Clear all toasts
+   */
+  clear(): void {
+    this.toasts = [];
+    this.notifyListeners();
+  }
+
+  /**
+   * Get current toasts
+   */
+  getToasts(): ToastMessage[] {
+    return [...this.toasts];
+  }
+
+  /**
+   * Subscribe to toast changes
+   */
+  subscribe(callback: (toasts: ToastMessage[]) => void): () => void {
+    this.listeners.push(callback);
+
+    // Return unsubscribe function
+    return () => {
+      const index = this.listeners.indexOf(callback);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  /**
+   * Convenience methods
+   */
+  success(title: string, message?: string, duration?: number): void {
+    this.add('success', title, message, duration);
+  }
+
+  error(title: string, message?: string, duration?: number): void {
+    this.add('error', title, message, duration);
+  }
+
+  warning(title: string, message?: string, duration?: number): void {
+    this.add('warning', title, message, duration);
+  }
+
+  info(title: string, message?: string, duration?: number): void {
+    this.add('info', title, message, duration);
+  }
+
+  private notifyListeners(): void {
+    const toasts = this.getToasts();
+    this.listeners.forEach(listener => listener(toasts));
+  }
+}

web/src/styles/main.css

@@ -0,0 +1,133 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg border transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary-600 text-white border-transparent hover:bg-primary-700 focus:ring-primary-500;
+  }
+
+  .btn-secondary {
+    @apply btn bg-white text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-primary-500 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700;
+  }
+
+  .btn-danger {
+    @apply btn bg-red-600 text-white border-transparent hover:bg-red-700 focus:ring-red-500;
+  }
+
+  .btn-sm {
+    @apply px-3 py-1.5 text-xs;
+  }
+
+  .btn-lg {
+    @apply px-6 py-3 text-base;
+  }
+
+  .input {
+    @apply block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-500;
+  }
+
+  .card {
+    @apply bg-white rounded-lg shadow dark:bg-gray-800;
+  }
+
+  .card-header {
+    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
+  }
+
+  .card-body {
+    @apply p-6;
+  }
+
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .badge-success {
+    @apply badge bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100;
+  }
+
+  .badge-warning {
+    @apply badge bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100;
+  }
+
+  .badge-danger {
+    @apply badge bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100;
+  }
+
+  .badge-info {
+    @apply badge bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100;
+  }
+
+  .badge-gray {
+    @apply badge bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100;
+  }
+
+  .table {
+    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
+  }
+
+  .table-header {
+    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400;
+  }
+
+  .table-cell {
+    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100;
+  }
+
+  .spinner {
+    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
+  }
+
+  .tooltip {
+    @apply absolute z-10 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm dark:bg-gray-700;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 dark:bg-gray-600 rounded-lg;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-400 dark:bg-gray-500;
+}
+
+/* Loading animations */
+@keyframes shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.loading-shimmer {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200px 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.dark .loading-shimmer {
+  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+  background-size: 200px 100%;
+}

web/src/types/index.ts

@@ -0,0 +1,191 @@
+// API Types (matching the backend)
+export interface Shop {
+  id: string;
+  custom_id: string | null;
+  url: string;
+  sitemap_url?: string;
+  webshop_type: 'shopify' | 'woocommerce' | 'shoprenter' | string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ShopAnalytics {
+  total_scrapes: number;
+  last_scraped_at?: string;
+  next_scrape_at?: string;
+  total_urls_found: number;
+  average_scrape_time: number;
+  average_page_scrape_time: number;
+}
+
+export interface ShopWithAnalytics extends Shop {
+  analytics: ShopAnalytics;
+}
+
+export interface ContentMetadata {
+  shipping_informations: ShopContent[];
+  contacts: ShopContent[];
+  terms_of_conditions: ShopContent[];
+  faq: ShopContent[];
+}
+
+export interface ShopContent {
+  id: string;
+  shop_id: string;
+  content_type: 'shipping' | 'contacts' | 'terms' | 'faq';
+  url: string;
+  content: string;
+  content_hash: string;
+  changed: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ScrapeHistory {
+  id: string;
+  shop_id: string;
+  job_id: string;
+  started_at: string;
+  completed_at?: string;
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  error?: string;
+  scrape_time_ms?: number;
+  urls_found: number;
+}
+
+export interface ScheduledJob {
+  id: string;
+  shop_id: string;
+  next_run_at: string;
+  frequency?: string;
+  last_modified?: string;
+  status: 'queued' | 'running' | 'completed' | 'failed';
+  enabled: boolean;
+  created_at: string;
+}
+
+export interface Webhook {
+  id: string;
+  shop_id: string;
+  url: string;
+  enabled: boolean;
+  secret?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface WebhookDelivery {
+  id: string;
+  webhook_id: string;
+  event: string;
+  payload: any;
+  status: 'success' | 'failed';
+  response_code?: number;
+  error?: string;
+  attempted_at: string;
+}
+
+export interface CustomUrl {
+  id: string;
+  shop_id: string;
+  url: string;
+  content_type: 'shipping' | 'contacts' | 'terms' | 'faq';
+  enabled: boolean;
+  created_at: string;
+}
+
+export interface Job {
+  job_id: string;
+  shop_id?: string;
+  sitemap_url?: string;
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  created_at: string;
+  updated_at?: string;
+  error?: string;
+  result?: {
+    shop: Shop;
+    analytics: ShopAnalytics;
+    content_metadata: ContentMetadata;
+    scrape_history: ScrapeHistory[];
+    scheduled_jobs: ScheduledJob[];
+  };
+}
+
+export interface QueueStats {
+  total: number;
+  pending: number;
+  processing: number;
+  completed: number;
+  failed: number;
+}
+
+export interface ShopDetail {
+  shop: Shop;
+  analytics: ShopAnalytics;
+  content_metadata: ContentMetadata;
+  scrape_history: ScrapeHistory[];
+  scheduled_jobs: ScheduledJob[];
+}
+
+// UI Types
+export interface User {
+  isAuthenticated: boolean;
+  apiKey?: string;
+}
+
+export interface ToastMessage {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  title: string;
+  message?: string;
+  duration?: number;
+}
+
+export interface ApiResponse<T = any> {
+  data?: T;
+  error?: string;
+  success: boolean;
+}
+
+export interface PaginationParams {
+  limit?: number;
+  offset?: number;
+}
+
+export interface ContentFilters extends PaginationParams {
+  date_from?: string;
+  date_to?: string;
+  content_type?: 'shipping' | 'contacts' | 'terms' | 'faq';
+}
+
+export interface ShopResultsResponse {
+  shop_id: string;
+  filters: {
+    limit: number;
+    date_from: string | null;
+    date_to: string | null;
+    content_type: string | null;
+  };
+  results: {
+    shipping_informations: ShopContent[];
+    contacts: ShopContent[];
+    terms_of_conditions: ShopContent[];
+    faq: ShopContent[];
+  };
+}
+
+export interface Route {
+  path: string;
+  component: string;
+  title: string;
+  icon?: string;
+  protected?: boolean;
+}
+
+export type NavigationItem = {
+  name: string;
+  href: string;
+  icon: string;
+  current: boolean;
+  count?: number;
+};

web/src/utils/helpers.ts

@@ -0,0 +1,247 @@
+/**
+ * Format relative time (e.g., "2 hours ago")
+ */
+export function formatRelativeTime(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return 'just now';
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}m ago`;
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours}h ago`;
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays < 30) {
+    return `${diffInDays}d ago`;
+  }
+
+  const diffInMonths = Math.floor(diffInDays / 30);
+  if (diffInMonths < 12) {
+    return `${diffInMonths}mo ago`;
+  }
+
+  const diffInYears = Math.floor(diffInMonths / 12);
+  return `${diffInYears}y ago`;
+}
+
+/**
+ * Format absolute time (e.g., "Dec 15, 2023 at 2:30 PM")
+ */
+export function formatAbsoluteTime(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+/**
+ * Format duration in milliseconds to human readable
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) {
+    return `${seconds}s`;
+  }
+
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+/**
+ * Format large numbers (e.g., 1.2K, 1.5M)
+ */
+export function formatNumber(num: number): string {
+  if (num < 1000) {
+    return num.toString();
+  }
+
+  if (num < 1000000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+  }
+
+  return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+}
+
+/**
+ * Get status badge class based on status
+ */
+export function getStatusBadgeClass(status: string): string {
+  switch (status.toLowerCase()) {
+    case 'completed':
+    case 'success':
+      return 'badge-success';
+    case 'processing':
+    case 'running':
+    case 'queued':
+      return 'badge-info';
+    case 'pending':
+      return 'badge-warning';
+    case 'failed':
+    case 'error':
+      return 'badge-danger';
+    default:
+      return 'badge-gray';
+  }
+}
+
+/**
+ * Get content type label
+ */
+export function getContentTypeLabel(type: string): string {
+  switch (type) {
+    case 'shipping':
+      return 'Shipping Info';
+    case 'contacts':
+      return 'Contact Info';
+    case 'terms':
+      return 'Terms & Conditions';
+    case 'faq':
+      return 'FAQ';
+    default:
+      return type;
+  }
+}
+
+/**
+ * Get webshop type label and logo
+ */
+export function getWebshopTypeInfo(type: string): { label: string; logo?: string } {
+  switch (type.toLowerCase()) {
+    case 'shopify':
+      return { label: 'Shopify' };
+    case 'woocommerce':
+      return { label: 'WooCommerce' };
+    case 'shoprenter':
+      return { label: 'ShopRenter' };
+    default:
+      return { label: type || 'Unknown' };
+  }
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.slice(0, maxLength) + '...';
+}
+
+/**
+ * Extract domain from URL
+ */
+export function getDomainFromUrl(url: string): string {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * Copy text to clipboard
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      const result = document.execCommand('copy');
+      document.body.removeChild(textArea);
+      return result;
+    } catch {
+      document.body.removeChild(textArea);
+      return false;
+    }
+  }
+}
+
+/**
+ * Debounce function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+/**
+ * Generate a random ID
+ */
+export function generateId(): string {
+  return Math.random().toString(36).substr(2, 9);
+}
+
+/**
+ * Validate URL format
+ */
+export function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Format bytes to human readable
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+/**
+ * Check if element is in viewport
+ */
+export function isInViewport(element: Element): boolean {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}

web/src/utils/icons.ts

@@ -0,0 +1,49 @@
+// Simple icon helper using Lucide icons
+export const icons = {
+  // Navigation
+  dashboard: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path></svg>',
+  shops: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>',
+  jobs: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+  content: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"></path></svg>',
+  schedules: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>',
+  webhooks: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>',
+
+  // Actions
+  plus: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>',
+  edit: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"></path></svg>',
+  delete: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>',
+  refresh: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>',
+  play: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M19 10a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+  stop: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+
+  // Status
+  check: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>',
+  x: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>',
+  warning: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>',
+  info: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+  loading: '<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>',
+
+  // UI
+  search: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>',
+  filter: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z"></path></svg>',
+  sort: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path></svg>',
+  external: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>',
+  eye: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>',
+
+  // Theme
+  sun: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>',
+  moon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>',
+
+  // Logout
+  logout: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>',
+
+  // Menu
+  menu: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>',
+
+  // Copy
+  copy: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>',
+};
+
+export function getIcon(name: keyof typeof icons): string {
+  return icons[name] || icons.info;
+}

web/tailwind.config.js

@@ -0,0 +1,34 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+        },
+        gray: {
+          50: '#f9fafb',
+          100: '#f3f4f6',
+          200: '#e5e7eb',
+          300: '#d1d5db',
+          400: '#9ca3af',
+          500: '#6b7280',
+          600: '#4b5563',
+          700: '#374151',
+          800: '#1f2937',
+          900: '#111827',
+        }
+      },
+      animation: {
+        'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'bounce-slow': 'bounce 2s infinite',
+      }
+    },
+  },
+  plugins: [],
+}

web/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

web/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    outDir: '../dist/web',
+    emptyOutDir: true
+  },
+  server: {
+    port: 3001,
+    proxy: {
+      '/api': 'http://localhost:3000',
+      '/health': 'http://localhost:3000'
+    }
+  }
+});