@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/admin/add-user-type-dialog.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Wrench, Stethoscope, ArrowRight } from 'lucide-react';
+
+export type UserTypeSelection = 'engineer' | 'department';
+
+export interface AddUserTypeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (type: UserTypeSelection) => void;
+}
+
+export function AddUserTypeDialog({
+  open,
+  onOpenChange,
+  onSelect,
+}: AddUserTypeDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader className="text-left space-y-1">
+          <DialogTitle className="text-xl font-bold tracking-tight">
+            Add New User
+          </DialogTitle>
+          <DialogDescription className="text-sm text-muted-foreground">
+            Select the account type you would like to create. Each user type includes tailored permissions and workflow settings.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
+          {/* Biomedical Engineer Option */}
+          <button
+            type="button"
+            onClick={() => onSelect('engineer')}
+            className="group relative flex flex-col justify-between rounded-xl border border-border bg-card p-6 text-left transition-all duration-200 hover:border-blue-500/50 hover:bg-blue-50/40 hover:shadow-md dark:hover:border-blue-500/50 dark:hover:bg-blue-950/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 cursor-pointer"
+          >
+            <div>
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-950/70 dark:text-blue-400 dark:group-hover:bg-blue-600 dark:group-hover:text-white shadow-xs">
+                <Wrench className="h-6 w-6 transition-transform duration-200 group-hover:scale-110" />
+              </div>
+              <h3 className="text-base font-semibold text-foreground transition-colors group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                Biomedical Engineer
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                Add an engineer to the biomedical team roster with duty scheduling, department coverage, and technical specialization.
+              </p>
+            </div>
+
+            <div className="mt-6 flex items-center text-xs font-semibold text-blue-600 dark:text-blue-400 transition-colors">
+              <span>Continue as Engineer</span>
+              <ArrowRight className="ml-1.5 h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" />
+            </div>
+          </button>
+
+          {/* Department Staff Option */}
+          <button
+            type="button"
+            onClick={() => onSelect('department')}
+            className="group relative flex flex-col justify-between rounded-xl border border-border bg-card p-6 text-left transition-all duration-200 hover:border-purple-500/50 hover:bg-purple-50/40 hover:shadow-md dark:hover:border-purple-500/50 dark:hover:bg-purple-950/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 cursor-pointer"
+          >
+            <div>
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-purple-100 text-purple-600 transition-colors group-hover:bg-purple-600 group-hover:text-white dark:bg-purple-950/70 dark:text-purple-400 dark:group-hover:bg-purple-600 dark:group-hover:text-white shadow-xs">
+                <Stethoscope className="h-6 w-6 transition-transform duration-200 group-hover:scale-110" />
+              </div>
+              <h3 className="text-base font-semibold text-foreground transition-colors group-hover:text-purple-600 dark:group-hover:text-purple-400">
+                Department Staff
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                Add clinical or administrative staff to a hospital department for equipment reporting and ticket management.
+              </p>
+            </div>
+
+            <div className="mt-6 flex items-center text-xs font-semibold text-purple-600 dark:text-purple-400 transition-colors">
+              <span>Continue as Staff</span>
+              <ArrowRight className="ml-1.5 h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" />
+            </div>
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/admin/audit-log-export.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Download, Loader2 } from 'lucide-react';
+import { exportAuditLogs, type AuditLogFilters } from '@/lib/actions/audit-logs';
+
+export interface AuditLogExportProps {
+  filters: AuditLogFilters;
+}
+
+function escapeCsvField(val: unknown): string {
+  if (val === null || val === undefined) return '""';
+  const str = String(val).replace(/"/g, '""');
+  return `"${str}"`;
+}
+
+/**
+ * Client component to export audit log records matching the active filters to a CSV file.
+ */
+export function AuditLogExport({ filters }: AuditLogExportProps) {
+  const [isExporting, setIsExporting] = useState(false);
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    try {
+      const res = await exportAuditLogs(filters);
+      if (!res.success || !res.data) {
+        throw new Error(res.error || 'Failed to fetch audit logs for export');
+      }
+
+      const rows = res.data;
+      const headers = [
+        'Timestamp',
+        'Actor Name',
+        'Actor Email',
+        'Action',
+        'Entity Type',
+        'Entity ID',
+        'Reason',
+        'IP Address',
+      ];
+
+      const csvRows = [headers.join(',')];
+
+      for (const log of rows) {
+        const timestamp = log.timestamp
+          ? new Date(log.timestamp).toISOString()
+          : '';
+        const actorName = log.actorUser?.fullName || 'System';
+        const actorEmail = log.actorUser?.email || '';
+        const action = log.actionType || '';
+        const entityType = log.entityType || '';
+        const entityId = log.entityId || '';
+        const reason = log.changeReason || '';
+        const ipAddress = log.ipAddress || '';
+
+        const rowValues = [
+          escapeCsvField(timestamp),
+          escapeCsvField(actorName),
+          escapeCsvField(actorEmail),
+          escapeCsvField(action),
+          escapeCsvField(entityType),
+          escapeCsvField(entityId),
+          escapeCsvField(reason),
+          escapeCsvField(ipAddress),
+        ];
+
+        csvRows.push(rowValues.join(','));
+      }
+
+      const csvContent = csvRows.join('\r\n');
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+
+      const timestampSlug = new Date().toISOString().replace(/[:.]/g, '-');
+      link.setAttribute('href', url);
+      link.setAttribute('download', `audit-logs-${timestampSlug}.csv`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Audit log export error:', error);
+      alert('Failed to export audit logs. Please try again.');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleExport}
+      disabled={isExporting}
+      className="h-9 gap-1.5 font-medium"
+    >
+      {isExporting ? (
+        <>
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span>Exporting...</span>
+        </>
+      ) : (
+        <>
+          <Download className="h-4 w-4" />
+          <span>Export CSV</span>
+        </>
+      )}
+    </Button>
+  );
+}

package/src/components/admin/audit-log-filters.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import { useState, useCallback, useEffect, useTransition } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Search, X, Filter, RotateCcw } from 'lucide-react';
+
+export interface AuditLogFiltersProps {
+  entityTypes: string[];
+  actors: { id: string; fullName: string; email: string }[];
+  actionTypes?: string[];
+}
+
+const DEFAULT_ACTION_TYPES = [
+  'CREATE',
+  'UPDATE',
+  'DEACTIVATE',
+  'ARCHIVE',
+  'TRANSFER',
+  'PURGE',
+  'SIGN',
+  'POLICY_CHANGE',
+  'LOGIN',
+  'LOGOUT',
+  'FAILED_LOGIN',
+];
+
+/**
+ * Filter controls for the Audit Log management dashboard.
+ * Interacts with URL search params to drive server-side filtering.
+ */
+export function AuditLogFilters({
+  entityTypes,
+  actors,
+  actionTypes = DEFAULT_ACTION_TYPES,
+}: AuditLogFiltersProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  const currentSearch = searchParams.get('search') || '';
+  const currentEntityType = searchParams.get('entityType') || 'all';
+  const currentActionType = searchParams.get('actionType') || 'all';
+  const currentActorId = searchParams.get('actorId') || 'all';
+  const currentStartDate = searchParams.get('startDate') || '';
+  const currentEndDate = searchParams.get('endDate') || '';
+
+  const [searchInput, setSearchInput] = useState(currentSearch);
+
+  // Sync internal search state when search param changes externally
+  useEffect(() => {
+    setSearchInput(currentSearch);
+  }, [currentSearch]);
+
+  const updateParam = useCallback(
+    (key: string, value: string | null) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value && value !== 'all') {
+        params.set(key, value);
+      } else {
+        params.delete(key);
+      }
+      // Reset to page 1 whenever filters change
+      params.delete('page');
+
+      startTransition(() => {
+        router.push(`?${params.toString()}`);
+      });
+    },
+    [router, searchParams]
+  );
+
+  // Debounced search input handler (300ms)
+  useEffect(() => {
+    if (searchInput === currentSearch) return;
+
+    const timer = setTimeout(() => {
+      updateParam('search', searchInput.trim() || null);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchInput, currentSearch, updateParam]);
+
+  const handleClearFilters = () => {
+    setSearchInput('');
+    startTransition(() => {
+      router.push(window.location.pathname);
+    });
+  };
+
+  const activeFilterCount = [
+    currentSearch,
+    currentEntityType !== 'all' ? currentEntityType : '',
+    currentActionType !== 'all' ? currentActionType : '',
+    currentActorId !== 'all' ? currentActorId : '',
+    currentStartDate,
+    currentEndDate,
+  ].filter(Boolean).length;
+
+  return (
+    <Card className="border shadow-sm">
+      <CardContent className="p-4 space-y-4">
+        {/* Header / Filter Status */}
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b pb-3">
+          <div className="flex items-center gap-2">
+            <Filter className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Filter Audit Records</span>
+            {activeFilterCount > 0 && (
+              <Badge variant="secondary" className="px-2 py-0.5 text-xs font-semibold">
+                {activeFilterCount} active
+              </Badge>
+            )}
+            {isPending && (
+              <span className="text-xs text-muted-foreground animate-pulse">
+                Updating...
+              </span>
+            )}
+          </div>
+          {activeFilterCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClearFilters}
+              className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
+            >
+              <RotateCcw className="h-3.5 w-3.5 mr-1" />
+              Clear Filters
+            </Button>
+          )}
+        </div>
+
+        {/* Filter Inputs Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+          {/* Text Search */}
+          <div className="relative lg:col-span-2">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground pointer-events-none" />
+            <Input
+              type="text"
+              placeholder="Search entity, reason, IP..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              className="pl-8 pr-8 h-9 text-sm"
+            />
+            {searchInput && (
+              <button
+                type="button"
+                onClick={() => {
+                  setSearchInput('');
+                  updateParam('search', null);
+                }}
+                className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground"
+                aria-label="Clear search"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+
+          {/* Action Type Dropdown */}
+          <div>
+            <Select
+              value={currentActionType}
+              onValueChange={(val) => updateParam('actionType', val)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder="Action Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Actions</SelectItem>
+                {actionTypes.map((action) => (
+                  <SelectItem key={action} value={action}>
+                    {action}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Entity Type Dropdown */}
+          <div>
+            <Select
+              value={currentEntityType}
+              onValueChange={(val) => updateParam('entityType', val)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder="Entity Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Entities</SelectItem>
+                {entityTypes.map((type) => (
+                  <SelectItem key={type} value={type}>
+                    {type}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Actor Dropdown */}
+          <div>
+            <Select
+              value={currentActorId}
+              onValueChange={(val) => updateParam('actorId', val)}
+            >
+              <SelectTrigger className="h-9 text-sm truncate">
+                <SelectValue placeholder="All Users" />
+              </SelectTrigger>
+              <SelectContent className="max-h-60">
+                <SelectItem value="all">All Actors</SelectItem>
+                {actors.map((actor) => (
+                  <SelectItem key={actor.id} value={actor.id}>
+                    {actor.fullName || actor.email}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Date Range Inputs */}
+          <div className="flex items-center gap-1.5 sm:col-span-2 md:col-span-3 lg:col-span-1">
+            <div className="flex-1">
+              <Input
+                type="date"
+                value={currentStartDate}
+                onChange={(e) => updateParam('startDate', e.target.value || null)}
+                className="h-9 text-xs px-2"
+                title="Start Date"
+              />
+            </div>
+            <span className="text-xs text-muted-foreground">to</span>
+            <div className="flex-1">
+              <Input
+                type="date"
+                value={currentEndDate}
+                onChange={(e) => updateParam('endDate', e.target.value || null)}
+                className="h-9 text-xs px-2"
+                title="End Date"
+              />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}