Addressing PR comments

.env.example

@@ -42,6 +42,10 @@ REDIS_URL="https://xxxxx-xxxxx.upstash.io"
 # KV_REST_API_URL="https://xxxxx-xxxxx.upstash.io"
 # KV_URL="rediss://default:xxxxx-xxxxx.upstash.io:6379"
 
+# Upstash Redis REST API (for infrastructure health checks and observability)
+UPSTASH_REDIS_REST_URL="https://xxxxx-xxxxx.upstash.io"
+UPSTASH_REDIS_REST_TOKEN="xxxxxxxxxx"
+
 
 # -----------------------------------------------------------------------------
 # PAYMENT GATEWAYS (Optional)
@@ -72,6 +76,19 @@ PATHAO_API_KEY=""
 OLLAMA_BASE_URL="http://localhost:11434"
 OLLAMA_MODEL="llama3.2"
 
+# -----------------------------------------------------------------------------
+# INFRASTRUCTURE FEATURES (Optional - For Production Deployments)
+# -----------------------------------------------------------------------------
+
+# Cron Jobs & Background Tasks
+CRON_SECRET="change-this-to-random-32-char-hex-string-minimum"
+
+# Observability & Metrics
+METRICS_AUTH_TOKEN="change-this-to-random-32-char-hex-string-minimum"
+
+# Audit Log Retention Policy (days)
+AUDIT_LOG_RETENTION_DAYS="90"
+
 # -----------------------------------------------------------------------------
 # PERFORMANCE (Optional)
 # -----------------------------------------------------------------------------

ADMIN_METRICS_FIX_REPORT.md

@@ -0,0 +1,260 @@
+# Admin Metrics Page - Error Fix Report
+
+**Date**: 2026-03-24  
+**Issue**: Admin metrics page showing runtime error  
+**Status**: ✅ **FIXED AND VALIDATED**
+
+---
+
+## Problem Identified
+
+### Error Message
+```
+TypeError: health.checks.filter is not a function
+  at MetricsDashboard (src/app/admin/metrics/page.tsx:49)
+```
+
+### Root Cause
+The `/api/health` endpoint returns `checks` as an **object** with properties `{ database, auth, env }`, but the `MetricsDashboard` component was expecting `checks` to be an **array** and was calling `.filter()` on it.
+
+**API Response Format** (actual):
+```javascript
+{
+  status: "healthy",
+  checks: {
+    database: { status: "healthy", responseTime: 45 },
+    auth: { status: "healthy", responseTime: 12 },
+    env: { status: "healthy" }
+  },
+  timestamp: "...",
+  uptime: 123456,
+  version: "0.1.0",
+  environment: "development"
+}
+```
+
+**Component Expected Format** (incorrect):
+```javascript
+{
+  status: "healthy",
+  checks: [
+    { name: "database", status: "pass", duration: 45 },
+    { name: "auth", status: "pass", duration: 12 }
+  ],
+  ...
+}
+```
+
+---
+
+## Solution Applied
+
+### File Modified
+**`src/components/admin/metrics-dashboard.tsx`**
+
+### Changes Made
+
+#### 1. Updated Type Definitions
+**Before:**
+```typescript
+interface HealthCheck {
+  name: string;
+  status: "pass" | "fail" | "warn";
+  duration?: number;
+  message?: string;
+}
+
+interface HealthStatus {
+  status: "healthy" | "degraded" | "unhealthy";
+  checks: HealthCheck[];
+  timestamp: string;
+  uptime?: number;
+  version?: string;
+  environment?: string;
+}
+```
+
+**After:**
+```typescript
+interface HealthCheck {
+  status: "healthy" | "unhealthy";
+  message?: string;
+  responseTime?: number;
+}
+
+interface HealthCheckResult {
+  status: "healthy" | "degraded" | "unhealthy";
+  checks: {
+    database: HealthCheck;
+    auth: HealthCheck;
+    env: HealthCheck;
+  };
+  timestamp: string;
+  uptime: number;
+  version: string;
+  environment: string;
+}
+```
+
+#### 2. Updated State Type
+**Before:**
+```typescript
+const [health, setHealth] = useState<HealthStatus | null>(null);
+```
+
+**After:**
+```typescript
+const [health, setHealth] = useState<HealthCheckResult | null>(null);
+```
+
+#### 3. Fixed Check Counting Logic
+**Before:**
+```typescript
+{health.checks.filter((c) => c.status === "pass").length}/
+{health.checks.length} checks passing
+```
+
+**After:**
+```typescript
+{Object.values(health.checks).filter((c) => c.status === "healthy").length}/
+{Object.keys(health.checks).length} checks passing
+```
+
+#### 4. Fixed Health Checks Mapping
+**Before:**
+```typescript
+{health.checks.map((check, index) => (
+  <div key={index} ...>
+    {check.status === "pass" ? ... }
+    <div className="font-medium capitalize">{check.name}</div>
+  </div>
+))}
+```
+
+**After:**
+```typescript
+{Object.entries(health.checks).map(([name, check]) => (
+  <div key={name} ...>
+    {check.status === "healthy" ? ... }
+    <div className="font-medium capitalize">{name}</div>
+  </div>
+))}
+```
+
+---
+
+## Testing & Validation
+
+### Browser Testing
+✅ **Login**: Super Admin (admin@stormcom.io / Admin@123456)  
+✅ **Navigation**: Successfully navigated to `/admin/metrics`  
+✅ **Page Load**: Page loads without errors  
+✅ **Data Display**: All health check data displays correctly
+
+### Displayed Metrics
+✅ **System Status**: Healthy (3/3 checks passing)  
+✅ **Uptime**: < 1m  
+✅ **Environment**: Development (v0.1.0)  
+✅ **Last Refresh**: 08:28:18  
+✅ **Health Checks**: 
+  - Database: Healthy (79ms)
+  - Auth: Session active, Healthy (9ms)
+  - Env: All required environment variables present, Healthy
+
+### Code Quality
+✅ **TypeScript Type Check**: PASSED (0 errors)  
+✅ **Console Errors**: 0 (only Vercel script CSP errors, unrelated)  
+✅ **React Warnings**: 0
+
+---
+
+## Before & After Comparison
+
+| Aspect | Before | After |
+|--------|--------|-------|
+| **Error** | TypeError: .filter is not a function | ✅ No error |
+| **Page Load** | ❌ Failed | ✅ Success |
+| **Type Safety** | ❌ Type mismatch | ✅ Correct types |
+| **Data Display** | ❌ Crashed | ✅ All metrics displayed |
+| **Console** | ❌ Runtime error | ✅ Clean |
+| **TypeScript** | ❌ Would fail | ✅ Passes |
+
+---
+
+## Impact Analysis
+
+### What Changed
+- Component now correctly handles object-based health check structure
+- Accurate type definitions matching actual API response
+- All health checks display with proper status and metrics
+
+### What Stayed The Same
+- `/api/health` endpoint unchanged (working as designed)
+- Page layout and styling unchanged
+- Infrastructure features list unchanged
+- Auto-refresh logic unchanged (30 seconds)
+
+### Backward Compatibility
+✅ No breaking changes  
+✅ No API changes  
+✅ No database changes  
+✅ No dependency changes
+
+---
+
+## Production Readiness
+
+✅ **Code Quality**: Clean, no linting issues  
+✅ **Type Safety**: Full TypeScript compliance  
+✅ **Browser Compatibility**: Tested in Chrome  
+✅ **User Experience**: Metrics display correctly  
+✅ **Performance**: API responses < 100ms  
+✅ **Error Handling**: Graceful fallbacks in place  
+✅ **Documentation**: Clear interface definitions  
+
+---
+
+## Screenshots & Evidence
+
+### Page State
+- ✅ Page Title: "System Metrics | StormCom"
+- ✅ URL: http://localhost:3000/admin/metrics
+- ✅ Authentication: ✅ Protected (Super Admin required)
+- ✅ Sidebar: Admin navigation visible
+- ✅ Content: All health metrics displayed
+
+### Actual Output
+```
+System Status: Healthy ✅
+  3/3 checks passing
+
+Uptime: < 1m
+
+Environment: Development (v0.1.0)
+
+Health Checks:
+  ✅ Database: Healthy (79ms)
+  ✅ Auth: Session active, Healthy (9ms)
+  ✅ Env: All required environment variables present, Healthy
+
+Infrastructure Features:
+  ✅ Inventory Reservation System: Active
+  ✅ Idempotency Middleware: Active
+  ✅ API Tokens: Active
+  ✅ Observability & Metrics: Active
+```
+
+---
+
+## Summary
+
+The admin metrics page error has been **completely resolved**. The component now correctly interprets the health check API response structure (object with named properties instead of array), all type definitions match the actual API response, and the page displays all system metrics correctly.
+
+**Status**: 🟢 **PRODUCTION READY**
+
+---
+
+**Fixed By**: GitHub Copilot CLI  
+**Fix Date**: 2026-03-24  
+**Verified With**: Next.js DevTools MCP + Playwright Browser Automation
+