@omersx/bemms 0.0.0-stage → 1.0.0

package/src/components/admin/settings-forms/health-panel.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Activity, Database, Server, Cpu, Clock, RefreshCw, ShieldAlert, CheckCircle2, AlertCircle } from 'lucide-react';
+import { getSystemHealth, type SystemHealthData } from '@/lib/actions/system-settings';
+import { toast } from 'sonner';
+
+interface HealthPanelProps {
+  initialData: SystemHealthData;
+}
+
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / (3600 * 24));
+  const hours = Math.floor((seconds % (3600 * 24)) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = Math.floor(seconds % 60);
+
+  const parts = [];
+  if (days > 0) parts.push(`${days}d`);
+  if (hours > 0 || days > 0) parts.push(`${hours}h`);
+  if (minutes > 0 || hours > 0 || days > 0) parts.push(`${minutes}m`);
+  parts.push(`${secs}s`);
+
+  return parts.join(' ');
+}
+
+export function HealthPanel({ initialData }: HealthPanelProps) {
+  const [health, setHealth] = useState<SystemHealthData>(initialData);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    try {
+      const res = await getSystemHealth();
+      if (res.success && res.data) {
+        setHealth(res.data);
+        toast.success('Telemetry updated');
+      } else {
+        toast.error(res.error || 'Failed to refresh health status');
+      }
+    } catch {
+      toast.error('An error occurred while fetching health data');
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  const isHealthy = health.status === 'healthy';
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+          <div>
+            <CardTitle className="flex items-center gap-2 text-xl">
+              <Activity className="h-5 w-5 text-primary" />
+              Operational Telemetry & System Health
+            </CardTitle>
+            <CardDescription>
+              Safe, read-only status of database connections, runtime environment, and background health.
+            </CardDescription>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={refreshing}
+            className="gap-2"
+          >
+            <RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
+            Refresh
+          </Button>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          {/* Status Header Banner */}
+          <div
+            className={`p-4 rounded-lg flex items-center justify-between border ${
+              isHealthy
+                ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-700 dark:text-emerald-400'
+                : 'bg-amber-500/10 border-amber-500/20 text-amber-700 dark:text-amber-400'
+            }`}
+          >
+            <div className="flex items-center gap-3">
+              {isHealthy ? (
+                <CheckCircle2 className="h-6 w-6 text-emerald-600 dark:text-emerald-400 shrink-0" />
+              ) : (
+                <AlertCircle className="h-6 w-6 text-amber-600 dark:text-amber-400 shrink-0" />
+              )}
+              <div>
+                <h4 className="font-semibold text-base">
+                  {isHealthy ? 'All Systems Operational' : 'System Degraded'}
+                </h4>
+                <p className="text-xs opacity-90">
+                  {isHealthy
+                    ? 'PostgreSQL database connected and query latency within acceptable limits.'
+                    : 'System is experiencing elevated latency or service degradation.'}
+                </p>
+              </div>
+            </div>
+            <Badge variant={isHealthy ? 'default' : 'destructive'} className="uppercase">
+              {health.status}
+            </Badge>
+          </div>
+
+          {/* Metrics Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {/* Database Metric */}
+            <div className="p-4 border rounded-lg bg-card space-y-1">
+              <div className="flex items-center justify-between text-muted-foreground">
+                <span className="text-xs font-medium">Database Latency</span>
+                <Database className="h-4 w-4" />
+              </div>
+              <div className="text-2xl font-bold">
+                {health.databasePingMs >= 0 ? `${health.databasePingMs}ms` : 'Error'}
+              </div>
+              <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium flex items-center gap-1">
+                <span className="h-2 w-2 rounded-full bg-emerald-500 inline-block" />
+                PostgreSQL 16 Connected
+              </span>
+            </div>
+
+            {/* Uptime Metric */}
+            <div className="p-4 border rounded-lg bg-card space-y-1">
+              <div className="flex items-center justify-between text-muted-foreground">
+                <span className="text-xs font-medium">Application Uptime</span>
+                <Clock className="h-4 w-4" />
+              </div>
+              <div className="text-2xl font-bold">{formatUptime(health.uptimeSeconds)}</div>
+              <span className="text-xs text-muted-foreground">
+                Environment: <span className="font-medium text-foreground">{health.environment}</span>
+              </span>
+            </div>
+
+            {/* Memory Metric */}
+            <div className="p-4 border rounded-lg bg-card space-y-1">
+              <div className="flex items-center justify-between text-muted-foreground">
+                <span className="text-xs font-medium">Memory (RSS / Heap)</span>
+                <Cpu className="h-4 w-4" />
+              </div>
+              <div className="text-2xl font-bold">{health.memoryUsage.rssMb} MB</div>
+              <span className="text-xs text-muted-foreground">
+                Heap Used: {health.memoryUsage.heapUsedMb} MB / {health.memoryUsage.heapTotalMb} MB
+              </span>
+            </div>
+
+            {/* Runtime Metric */}
+            <div className="p-4 border rounded-lg bg-card space-y-1">
+              <div className="flex items-center justify-between text-muted-foreground">
+                <span className="text-xs font-medium">Platform & Node</span>
+                <Server className="h-4 w-4" />
+              </div>
+              <div className="text-2xl font-bold">{health.runtime.nodeVersion}</div>
+              <span className="text-xs text-muted-foreground">
+                OS: {health.runtime.platform} ({health.runtime.arch})
+              </span>
+            </div>
+          </div>
+
+          {/* Section 14.2 Compliance Notice */}
+          <div className="p-4 border rounded-lg bg-muted/40 flex items-start gap-3">
+            <ShieldAlert className="h-5 w-5 text-muted-foreground shrink-0 mt-0.5" />
+            <div className="text-xs text-muted-foreground space-y-1">
+              <p className="font-medium text-foreground">
+                BEMMS Specification Section 14.2 Compliance Safeguard:
+              </p>
+              <p>
+                PostgreSQL credentials, application encryption keys, signing PIN secrets, and TLS certificates
+                are strictly isolated in protected server configuration (.env / Docker secrets). They are never
+                accessible or returned to application web sessions to prevent credential leakage.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

package/src/components/admin/settings-forms/localization-form.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Globe, Clock, Calendar, Languages, Loader2, Save } from 'lucide-react';
+import { toast } from 'sonner';
+import { updateOrganizationSettings } from '@/lib/actions/system-settings';
+import type { LocalizationSettings } from '@/lib/validators/system-settings';
+
+interface LocalizationFormProps {
+  initialData: LocalizationSettings;
+  organizationId: string;
+}
+
+const COMMON_TIMEZONES = [
+  { value: 'UTC', label: 'UTC (Coordinated Universal Time)' },
+  { value: 'Africa/Cairo', label: 'Africa/Cairo (UTC+2 / UTC+3)' },
+  { value: 'Asia/Riyadh', label: 'Asia/Riyadh (UTC+3)' },
+  { value: 'Asia/Dubai', label: 'Asia/Dubai (UTC+4)' },
+  { value: 'Europe/London', label: 'Europe/London (UTC+0 / UTC+1)' },
+  { value: 'America/New_York', label: 'America/New_York (UTC-5 / UTC-4)' },
+];
+
+export function LocalizationForm({ initialData, organizationId }: LocalizationFormProps) {
+  const [formData, setFormData] = useState<LocalizationSettings>(initialData);
+  const [changeReason, setChangeReason] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+
+    try {
+      const res = await updateOrganizationSettings({
+        organizationId,
+        section: 'localization',
+        settings: formData,
+        changeReason: changeReason.trim() || 'Updated localization and regional settings',
+      });
+
+      if (res.success) {
+        toast.success('Localization settings saved successfully');
+        setChangeReason('');
+      } else {
+        toast.error(res.error || 'Failed to update localization settings');
+      }
+    } catch {
+      toast.error('An unexpected error occurred');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-xl">
+            <Globe className="h-5 w-5 text-primary" />
+            Localization & Regional Preferences
+          </CardTitle>
+          <CardDescription>
+            Configure time display, calendar formats, and operational language for this facility.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Timezone */}
+            <div className="space-y-2">
+              <Label htmlFor="timezone" className="flex items-center gap-2">
+                <Clock className="h-4 w-4 text-muted-foreground" />
+                Default Facility Timezone
+              </Label>
+              <Select
+                value={formData.timezone}
+                onValueChange={(val) => setFormData((prev) => ({ ...prev, timezone: val }))}
+              >
+                <SelectTrigger id="timezone">
+                  <SelectValue placeholder="Select timezone" />
+                </SelectTrigger>
+                <SelectContent>
+                  {COMMON_TIMEZONES.map((tz) => (
+                    <SelectItem key={tz.value} value={tz.value}>
+                      {tz.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                All maintenance schedules, PM occurrences, and audit events will display in this timezone.
+              </p>
+            </div>
+
+            {/* Language */}
+            <div className="space-y-2">
+              <Label htmlFor="language" className="flex items-center gap-2">
+                <Languages className="h-4 w-4 text-muted-foreground" />
+                Default Language
+              </Label>
+              <Select
+                value={formData.language}
+                onValueChange={(val: 'en' | 'ar') => setFormData((prev) => ({ ...prev, language: val }))}
+              >
+                <SelectTrigger id="language">
+                  <SelectValue placeholder="Select language" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="en">English (US / UK)</SelectItem>
+                  <SelectItem value="ar">العربية (Arabic - Future Support)</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                Application interface language preference (Section 14.1).
+              </p>
+            </div>
+
+            {/* Date Format */}
+            <div className="space-y-2">
+              <Label htmlFor="dateFormat" className="flex items-center gap-2">
+                <Calendar className="h-4 w-4 text-muted-foreground" />
+                Date Format
+              </Label>
+              <Select
+                value={formData.dateFormat}
+                onValueChange={(val: 'YYYY-MM-DD' | 'DD/MM/YYYY' | 'MM/DD/YYYY') =>
+                  setFormData((prev) => ({ ...prev, dateFormat: val }))
+                }
+              >
+                <SelectTrigger id="dateFormat">
+                  <SelectValue placeholder="Select date format" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="YYYY-MM-DD">YYYY-MM-DD (ISO 8601 - Recommended)</SelectItem>
+                  <SelectItem value="DD/MM/YYYY">DD/MM/YYYY (UK / EU)</SelectItem>
+                  <SelectItem value="MM/DD/YYYY">MM/DD/YYYY (US)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Time Format */}
+            <div className="space-y-2">
+              <Label htmlFor="timeFormat" className="flex items-center gap-2">
+                <Clock className="h-4 w-4 text-muted-foreground" />
+                Time Display
+              </Label>
+              <Select
+                value={formData.timeFormat}
+                onValueChange={(val: '24h' | '12h') => setFormData((prev) => ({ ...prev, timeFormat: val }))}
+              >
+                <SelectTrigger id="timeFormat">
+                  <SelectValue placeholder="Select time format" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="24h">24-hour (14:30) - Clinical Standard</SelectItem>
+                  <SelectItem value="12h">12-hour (2:30 PM)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Audit Trace Reason */}
+          <div className="space-y-2 pt-2 border-t">
+            <Label htmlFor="changeReason" className="text-sm font-medium">
+              Change Reason (21 CFR Part 11 Audit Trace)
+            </Label>
+            <Input
+              id="changeReason"
+              placeholder="e.g., Hospital shifted default timezone to local regional time"
+              value={changeReason}
+              onChange={(e) => setChangeReason(e.target.value)}
+              className="max-w-xl"
+            />
+            <p className="text-xs text-muted-foreground">
+              Optional documentation justification recorded in the immutable audit log.
+            </p>
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex justify-end border-t pt-4">
+          <Button type="submit" disabled={saving} className="gap-2">
+            {saving ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4" />
+                Save Localization
+              </>
+            )}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+  );
+}
+

package/src/components/admin/settings-forms/retention-form.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Database, HardDrive, CalendarClock, Loader2, Save } from 'lucide-react';
+import { toast } from 'sonner';
+import { updateOrganizationSettings } from '@/lib/actions/system-settings';
+import type { RetentionSettings } from '@/lib/validators/system-settings';
+
+interface RetentionFormProps {
+  initialData: RetentionSettings;
+  organizationId: string;
+}
+
+export function RetentionForm({ initialData, organizationId }: RetentionFormProps) {
+  const [formData, setFormData] = useState<RetentionSettings>(initialData);
+  const [changeReason, setChangeReason] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+
+    try {
+      const res = await updateOrganizationSettings({
+        organizationId,
+        section: 'retention',
+        settings: formData,
+        changeReason: changeReason.trim() || 'Updated data retention and operational thresholds',
+      });
+
+      if (res.success) {
+        toast.success('Data retention settings saved successfully');
+        setChangeReason('');
+      } else {
+        toast.error(res.error || 'Failed to update retention settings');
+      }
+    } catch {
+      toast.error('An unexpected error occurred');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-xl">
+            <Database className="h-5 w-5 text-primary" />
+            Data Retention & Operational Windows
+          </CardTitle>
+          <CardDescription>
+            Configure legal audit trail archiving periods, PM notification lead times, and attachment quotas.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Audit Log Retention */}
+            <div className="space-y-2">
+              <Label htmlFor="auditRetention" className="flex items-center gap-2">
+                <Database className="h-4 w-4 text-muted-foreground" />
+                Audit Trail Retention (Days)
+              </Label>
+              <Input
+                id="auditRetention"
+                type="number"
+                min={30}
+                max={3650}
+                value={formData.auditLogRetentionDays}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, auditLogRetentionDays: parseInt(e.target.value) || 365 }))
+                }
+              />
+              <p className="text-xs text-muted-foreground">
+                Minimum duration immutable audit records are preserved for regulatory inspection (365 days = 1 year).
+              </p>
+            </div>
+
+            {/* PM Alert Window */}
+            <div className="space-y-2">
+              <Label htmlFor="pmAlertWindow" className="flex items-center gap-2">
+                <CalendarClock className="h-4 w-4 text-muted-foreground" />
+                Preventive Maintenance Alert Window (Days)
+              </Label>
+              <Input
+                id="pmAlertWindow"
+                type="number"
+                min={1}
+                max={90}
+                value={formData.pmAlertWindowDays}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, pmAlertWindowDays: parseInt(e.target.value) || 14 }))
+                }
+              />
+              <p className="text-xs text-muted-foreground">
+                Advance notification notice before scheduled PM occurrences become due (standard: 14 days).
+              </p>
+            </div>
+
+            {/* Attachment Quota */}
+            <div className="space-y-2">
+              <Label htmlFor="attachmentQuota" className="flex items-center gap-2">
+                <HardDrive className="h-4 w-4 text-muted-foreground" />
+                Facility Attachment Storage Quota (MB)
+              </Label>
+              <Input
+                id="attachmentQuota"
+                type="number"
+                min={100}
+                max={100000}
+                value={formData.attachmentQuotaMb}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, attachmentQuotaMb: parseInt(e.target.value) || 5000 }))
+                }
+              />
+              <p className="text-xs text-muted-foreground">
+                Total storage allocation for manuals, service sheets, and photo evidence (5000 MB = 5 GB).
+              </p>
+            </div>
+          </div>
+
+          {/* Audit Trace Reason */}
+          <div className="space-y-2 pt-2 border-t">
+            <Label htmlFor="changeReason" className="text-sm font-medium">
+              Change Reason (21 CFR Part 11 Audit Trace)
+            </Label>
+            <Input
+              id="changeReason"
+              placeholder="e.g., Clinical engineering policy update on PM warning lead times"
+              value={changeReason}
+              onChange={(e) => setChangeReason(e.target.value)}
+              className="max-w-xl"
+            />
+            <p className="text-xs text-muted-foreground">
+              Required rationale recorded in the immutable audit log upon modification.
+            </p>
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex justify-end border-t pt-4">
+          <Button type="submit" disabled={saving} className="gap-2">
+            {saving ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4" />
+                Save Retention Settings
+              </>
+            )}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+  );
+}
+