@omersx/bemms 0.0.0-stage → 1.0.0

package/src/components/shared/confirm-dialog.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ReactNode, useState } from "react";
+
+interface ConfirmDialogProps {
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: "default" | "destructive";
+  onConfirm: () => void | Promise<void>;
+  trigger: ReactNode;
+}
+
+export function ConfirmDialog({
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  onConfirm,
+  trigger,
+}: ConfirmDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleConfirm = async () => {
+    setIsLoading(true);
+    try {
+      await onConfirm();
+      setOpen(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)} disabled={isLoading}>
+            {cancelLabel}
+          </Button>
+          <Button variant={variant} onClick={handleConfirm} disabled={isLoading}>
+            {isLoading ? "Loading..." : confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

package/src/components/shared/data-table.tsx

@@ -0,0 +1,104 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TableSearch } from "./table-search";
+
+export interface ColumnDef<T> {
+  key: string;
+  header: string;
+  render?: (item: T) => React.ReactNode;
+}
+
+interface DataTableProps<T> {
+  columns: ColumnDef<T>[];
+  data: T[];
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  searchKey?: string;
+}
+
+function getSearchText(item: any): string {
+  return Object.entries(item)
+    .map(([_, v]) => {
+      if (v === null || v === undefined) return "";
+      if (typeof v === "object") {
+        if ("name" in v && typeof (v as any).name === "string") return (v as any).name;
+        if ("title" in v && typeof (v as any).title === "string") return (v as any).title;
+        return "";
+      }
+      return String(v);
+    })
+    .join(" ")
+    .toLowerCase();
+}
+
+export function DataTable<T extends Record<string, any>>({
+  columns,
+  data,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  searchKey,
+}: DataTableProps<T>) {
+  const isSearchable = searchable || Boolean(searchKey) || (searchPlaceholder !== "Search..." && Boolean(searchPlaceholder));
+
+  const tableContent = (
+    <div className="rounded-md border bg-card overflow-hidden">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead key={column.key}>{column.header}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          ) : (
+            <>
+              {data.map((item, i) => (
+                <TableRow
+                  key={item.id || i}
+                  data-search-row={getSearchText(item)}
+                >
+                  {columns.map((column) => (
+                    <TableCell key={column.key}>
+                      {column.render ? column.render(item) : item[column.key]}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+              <TableRow data-no-results style={{ display: "none" }}>
+                <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
+                  No matching records found.
+                </TableCell>
+              </TableRow>
+            </>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+
+  if (isSearchable) {
+    return (
+      <TableSearch placeholder={searchPlaceholder} emptyMessage={emptyMessage}>
+        {tableContent}
+      </TableSearch>
+    );
+  }
+
+  return tableContent;
+}
+

package/src/components/shared/page-header.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  children?: ReactNode;
+}
+
+export function PageHeader({ title, description, children }: PageHeaderProps) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        {description && <p className="text-muted-foreground mt-1">{description}</p>}
+      </div>
+      {children && <div className="flex items-center gap-2">{children}</div>}
+    </div>
+  );
+}
+

package/src/components/shared/sign-out-button.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useState } from 'react'
+import { signOut } from 'next-auth/react'
+import { LogOut, Loader2 } from 'lucide-react'
+import { Button, ButtonProps } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface SignOutButtonProps extends ButtonProps {
+  showIcon?: boolean
+  label?: string
+  redirectUrl?: string
+}
+
+export function SignOutButton({
+  showIcon = true,
+  label = 'Log out',
+  redirectUrl = '/login',
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: SignOutButtonProps) {
+  const [loading, setLoading] = useState(false)
+
+  const handleSignOut = async () => {
+    try {
+      setLoading(true)
+      await signOut({ callbackUrl: redirectUrl })
+    } catch {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      disabled={loading}
+      onClick={handleSignOut}
+      className={cn(className)}
+      {...props}
+    >
+      {loading ? (
+        <Loader2 className="w-4 h-4 animate-spin mr-2" />
+      ) : showIcon ? (
+        <LogOut className="w-4 h-4 mr-2" />
+      ) : null}
+      {loading ? 'Logging out...' : label}
+    </Button>
+  )
+}

package/src/components/shared/status-badge.tsx

@@ -0,0 +1,42 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export type Status = "active" | "inactive" | "archived" | "invited" | "suspended" | "deactivated" | string | null | undefined;
+
+interface StatusBadgeProps {
+  status?: Status;
+  className?: string;
+}
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const displayStatus = status || "unknown";
+  const normalizedStatus = displayStatus.toLowerCase();
+
+  let variant: "default" | "secondary" | "destructive" | "outline" = "default";
+
+  switch (normalizedStatus) {
+    case "active":
+      variant = "default";
+      break;
+    case "inactive":
+    case "invited":
+      variant = "secondary";
+      break;
+    case "archived":
+      variant = "outline";
+      break;
+    case "suspended":
+    case "deactivated":
+      variant = "destructive";
+      break;
+    default:
+      variant = "secondary";
+  }
+
+  return (
+    <Badge variant={variant} className={cn("capitalize", className)}>
+      {displayStatus}
+    </Badge>
+  );
+}
+

package/src/components/shared/table-search.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState, useRef, useEffect, ReactNode } from "react";
+import { Input } from "@/components/ui/input";
+import { Search } from "lucide-react";
+
+interface TableSearchProps {
+  children: ReactNode;
+  placeholder?: string;
+  emptyMessage?: string;
+}
+
+export function TableSearch({
+  children,
+  placeholder = "Search...",
+  emptyMessage = "No matching records found.",
+}: TableSearchProps) {
+  const [query, setQuery] = useState("");
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const rows = containerRef.current.querySelectorAll<HTMLTableRowElement>("tbody tr[data-search-row]");
+    const q = query.toLowerCase().trim();
+    let visibleCount = 0;
+
+    rows.forEach((row) => {
+      const text = row.getAttribute("data-search-row") || "";
+      const matches = !q || text.includes(q);
+      row.style.display = matches ? "" : "none";
+      if (matches) visibleCount++;
+    });
+
+    const noResultsRow = containerRef.current.querySelector<HTMLTableRowElement>("tbody tr[data-no-results]");
+    if (noResultsRow) {
+      noResultsRow.style.display = (visibleCount === 0 && rows.length > 0 && q.length > 0) ? "" : "none";
+    }
+  }, [query]);
+
+  return (
+    <div ref={containerRef} className="space-y-4">
+      <div className="relative max-w-sm">
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder={placeholder}
+          className="pl-8 bg-card"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+      {children}
+    </div>
+  );
+}
+

package/src/components/signatures/sign-action-dialog.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Separator } from "@/components/ui/separator"
+import { Shield, Loader2, CheckCircle2, ShieldCheck, XCircle } from "lucide-react"
+
+export interface SignActionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  deviceName: string;
+  assetNumber: string;
+  recordType: string;
+  recordNumber: string;
+  actionLabel: string;
+  workSummary: string;
+  finalResult?: string;
+  proposedDeviceStatus?: string;
+  signaturePurpose: string;
+  attestationText: string;
+  signerName: string;
+  signerRole: string;
+  onSign: (password: string, comments?: string) => Promise<{ success: boolean; error?: string }>;
+  nextStep?: string;
+}
+
+export function SignActionDialog({
+  open,
+  onOpenChange,
+  deviceName,
+  assetNumber,
+  recordType,
+  recordNumber,
+  actionLabel,
+  workSummary,
+  finalResult,
+  proposedDeviceStatus,
+  signaturePurpose,
+  attestationText,
+  signerName,
+  signerRole,
+  onSign,
+  nextStep,
+}: SignActionDialogProps) {
+  const [password, setPassword] = useState("")
+  const [comments, setComments] = useState("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  
+  const serverTime = new Date().toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
+  })
+
+  // Reset state when opened
+  React.useEffect(() => {
+    if (open) {
+      setPassword("")
+      setComments("")
+      setError(null)
+      setSuccess(false)
+      setIsSubmitting(false)
+    }
+  }, [open])
+
+  const handleSign = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!password) return
+
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      const result = await onSign(password, comments)
+      if (result.success) {
+        setSuccess(true)
+      } else {
+        setError(result.error || "Failed to sign record. Please verify your credentials.")
+      }
+    } catch (err) {
+      setError("An unexpected error occurred during signing.")
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleClose = () => {
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={success ? undefined : onOpenChange}>
+      <DialogContent className="max-w-md sm:max-w-lg w-full max-h-[100dvh] overflow-y-auto sm:max-h-[90vh]">
+        {success ? (
+          <div className="flex flex-col items-center justify-center py-8 px-4 space-y-6 text-center animate-in fade-in zoom-in duration-300">
+            <div className="h-16 w-16 rounded-full bg-emerald-100 dark:bg-emerald-950 flex items-center justify-center ring-8 ring-emerald-50 dark:ring-emerald-900/50">
+              <CheckCircle2 className="h-8 w-8 text-emerald-600 dark:text-emerald-500" />
+            </div>
+            
+            <div className="space-y-2">
+              <h2 className="text-xl font-bold tracking-tight text-foreground">
+                {actionLabel} Signed Successfully
+              </h2>
+              <p className="text-sm text-muted-foreground max-w-[280px] mx-auto leading-relaxed">
+                Signed by: <span className="font-medium text-foreground">{signerName}</span>, {signerRole}
+                <br />
+                {serverTime}
+              </p>
+            </div>
+
+            <div className="w-full p-3 rounded-lg bg-muted/50 border border-border/50">
+              <p className="text-sm font-medium text-foreground">
+                Status: <span className="text-primary">{nextStep || 'Complete'}</span>
+              </p>
+            </div>
+
+            <Button onClick={handleClose} className="w-full mt-2" variant="outline">
+              Close
+            </Button>
+          </div>
+        ) : (
+          <>
+            <DialogHeader className="space-y-3 pb-2">
+              <DialogTitle className="flex items-center gap-2 text-xl">
+                <ShieldCheck className="h-5 w-5 text-primary" />
+                {actionLabel}
+              </DialogTitle>
+              <DialogDescription className="sr-only">
+                Review and sign the electronic record
+              </DialogDescription>
+            </DialogHeader>
+            
+            <div className="space-y-4">
+              <div className="space-y-1">
+                <p className="text-sm font-medium">Device: {deviceName} <span className="text-muted-foreground">• Asset: {assetNumber}</span></p>
+                <p className="text-sm text-muted-foreground">Record: {recordType} {recordNumber}</p>
+              </div>
+              
+              <Separator />
+              
+              <div className="space-y-2 text-sm">
+                <div className="grid grid-cols-[100px_1fr] gap-2">
+                  <span className="text-muted-foreground">Action:</span>
+                  <span className="font-medium">{actionLabel}</span>
+                </div>
+                <div className="grid grid-cols-[100px_1fr] gap-2">
+                  <span className="text-muted-foreground">Work Summary:</span>
+                  <span>{workSummary}</span>
+                </div>
+                {finalResult && (
+                  <div className="grid grid-cols-[100px_1fr] gap-2">
+                    <span className="text-muted-foreground">Result:</span>
+                    <span className="font-medium">{finalResult}</span>
+                  </div>
+                )}
+                {proposedDeviceStatus && (
+                  <div className="grid grid-cols-[100px_1fr] gap-2">
+                    <span className="text-muted-foreground">Status:</span>
+                    <span className="font-medium">{proposedDeviceStatus}</span>
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+
+              <blockquote className="border-l-4 border-primary/50 bg-muted/40 px-4 py-3 text-sm italic text-foreground/90 rounded-r-md">
+                &quot;{attestationText}&quot;
+              </blockquote>
+              
+              <div className="space-y-1 bg-primary/5 p-3 rounded-md border border-primary/10">
+                <p className="text-sm">Signing as: <span className="font-semibold">{signerName}</span>, <span className="text-muted-foreground">{signerRole}</span></p>
+                <p className="text-xs text-muted-foreground">Time: {serverTime}</p>
+              </div>
+
+              <Separator />
+              
+              <form onSubmit={handleSign} className="space-y-4 pt-1">
+                <div className="space-y-2">
+                  <Label htmlFor="password">Electronic Signature Password</Label>
+                  <Input 
+                    id="password" 
+                    type="password" 
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Enter your password to sign"
+                    required
+                    disabled={isSubmitting}
+                  />
+                  {error && (
+                    <div className="flex items-center gap-1.5 text-sm text-destructive mt-1">
+                      <XCircle className="h-4 w-4" />
+                      <p>{error}</p>
+                    </div>
+                  )}
+                </div>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="comments">Comments (optional)</Label>
+                  <Textarea 
+                    id="comments" 
+                    value={comments}
+                    onChange={(e) => setComments(e.target.value)}
+                    placeholder="Add any additional comments here..."
+                    className="resize-none h-20"
+                    disabled={isSubmitting}
+                  />
+                </div>
+                
+                <div className="pt-2">
+                  <Button 
+                    type="submit" 
+                    className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium h-11"
+                    disabled={!password || isSubmitting}
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Signing Record...
+                      </>
+                    ) : (
+                      <>
+                        <Shield className="mr-2 h-4 w-4" />
+                        Sign Record
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </form>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+