@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/tickets/ticket-triage-panel.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { triageTicket, assignTicket } from "@/lib/actions/tickets"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+
+export function TicketTriagePanel({ ticketId, currentPriority, engineers }: { ticketId: string, currentPriority: string, engineers: any[] }) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+
+  const handleTriage = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setError("")
+    const fd = new FormData(e.currentTarget)
+    const data: any = {
+      priorityCode: fd.get("priorityCode") || currentPriority,
+      priorityReason: fd.get("priorityReason") || undefined,
+      selectedMaintenanceType: fd.get("selectedMaintenanceType") || undefined,
+      selectedTechnicalCategory: fd.get("selectedTechnicalCategory") || undefined,
+      assignedEngineerUserId: fd.get("assignedEngineerUserId") || undefined,
+      internalTriageNote: fd.get("internalTriageNote") || undefined,
+    }
+
+    const result = await triageTicket(ticketId, data)
+    if (result?.success) {
+      const assigned = !!data.assignedEngineerUserId
+      toast.success(
+        assigned
+          ? "Triage complete — ticket is now In Progress"
+          : "Triage saved — assign an engineer to start work"
+      )
+      router.refresh()
+    } else {
+      const errMsg = (result as any)?.error || "Failed to triage ticket"
+      setError(errMsg)
+      toast.error(errMsg)
+    }
+    setLoading(false)
+  }
+
+  return (
+    <Card className="border-indigo-200">
+      <CardHeader className="bg-indigo-50/50 pb-4">
+        <CardTitle className="text-lg text-indigo-900">Biomedical Triage</CardTitle>
+      </CardHeader>
+      <CardContent className="pt-4">
+        {error && <div className="bg-destructive/10 text-destructive p-3 rounded-md text-sm mb-4">{error}</div>}
+        <form onSubmit={handleTriage} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="priorityCode">Priority</Label>
+              <select id="priorityCode" name="priorityCode" defaultValue={currentPriority}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+                <option value="p1_critical">P1 Critical</option>
+                <option value="p2_high">P2 High</option>
+                <option value="p3_normal">P3 Normal</option>
+                <option value="p4_low">P4 Low</option>
+              </select>
+            </div>
+            <div>
+              <Label htmlFor="priorityReason">Priority Justification</Label>
+              <Textarea id="priorityReason" name="priorityReason" placeholder="Required if changing priority" rows={1} />
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="selectedMaintenanceType">Maintenance Type</Label>
+              <select id="selectedMaintenanceType" name="selectedMaintenanceType"
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+                <option value="">Select type...</option>
+                <option value="corrective_maintenance">Corrective Maintenance</option>
+                <option value="preventive_maintenance">Preventive Maintenance</option>
+                <option value="troubleshooting">Troubleshooting</option>
+                <option value="inspection">Inspection</option>
+                <option value="calibration">Calibration</option>
+                <option value="software_configuration">Software / Config</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <div>
+              <Label htmlFor="selectedTechnicalCategory">Technical Category</Label>
+              <select id="selectedTechnicalCategory" name="selectedTechnicalCategory"
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+                <option value="">Select category...</option>
+                <option value="electrical_power">Electrical / Power</option>
+                <option value="display_user_interface">Display / UI</option>
+                <option value="alarm_safety">Alarm / Safety</option>
+                <option value="mechanical">Mechanical</option>
+                <option value="software_configuration">Software</option>
+                <option value="no_fault_found">No Fault Found</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+          </div>
+          <div>
+            <Label htmlFor="assignedEngineerUserId">Assign To</Label>
+            <select id="assignedEngineerUserId" name="assignedEngineerUserId"
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+              <option value="">Leave unassigned</option>
+              {engineers.map(e => <option key={e.id} value={e.id}>{e.fullName}</option>)}
+            </select>
+          </div>
+          <div>
+            <Label htmlFor="internalTriageNote">Internal Triage Note</Label>
+            <Textarea id="internalTriageNote" name="internalTriageNote" placeholder="Visible only to biomedical team" rows={2} />
+          </div>
+          <div className="flex justify-end pt-2">
+            <Button type="submit" disabled={loading}>
+              {loading ? "Saving..." : "Complete Triage"}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
+

package/src/components/tickets/tickets-nav.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { TicketCheck, Inbox, Plus } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { useNavCounts } from "@/components/providers/nav-counts-provider"
+
+interface TicketsNavProps {
+  className?: string
+  showCreateButton?: boolean
+}
+
+const TABS = [
+  {
+    href: "/tickets",
+    label: "All Tickets",
+    icon: TicketCheck,
+    exact: true,
+  },
+  {
+    href: "/tickets/triage",
+    label: "Triage Queue",
+    icon: Inbox,
+    exact: false,
+    hasBadge: true,
+  },
+]
+
+export function TicketsNav({
+  className,
+  showCreateButton = true,
+}: TicketsNavProps) {
+  const pathname = usePathname()
+  const { counts } = useNavCounts()
+
+  const isTabActive = (href: string, exact: boolean) => {
+    if (exact) {
+      return pathname === href
+    }
+    return pathname === href || pathname.startsWith(href + "/")
+  }
+
+  const triageCount = counts.triage ?? 0
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-border pb-3 mb-6",
+        className
+      )}
+    >
+      {/* Navigation Tabs */}
+      <nav
+        aria-label="Helpdesk navigation"
+        className="flex items-center gap-1 overflow-x-auto no-scrollbar py-0.5"
+      >
+        {TABS.map((tab) => {
+          const active = isTabActive(tab.href, tab.exact)
+          const Icon = tab.icon
+          const showBadge = tab.hasBadge && triageCount > 0
+
+          return (
+            <Link
+              key={tab.href}
+              href={tab.href}
+              className={cn(
+                "flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 shrink-0 select-none",
+                active
+                  ? "bg-primary text-primary-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
+              )}
+            >
+              <Icon className={cn("w-4 h-4", active ? "text-primary-foreground" : "text-muted-foreground")} />
+              <span>{tab.label}</span>
+              {showBadge && (
+                <span
+                  className={cn(
+                    "ml-1 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold rounded-full leading-none",
+                    active
+                      ? "bg-primary-foreground text-primary"
+                      : "bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30"
+                  )}
+                >
+                  {triageCount > 99 ? "99+" : triageCount}
+                </span>
+              )}
+            </Link>
+          )
+        })}
+      </nav>
+
+      {/* Action button */}
+      {showCreateButton && (
+        <div className="flex items-center gap-2 shrink-0">
+          <Link href="/tickets/create">
+            <Button size="sm" className="gap-1.5 shadow-sm">
+              <Plus className="w-4 h-4" />
+              <span>Report Problem</span>
+            </Button>
+          </Link>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/ui/badge.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        warning: "border-transparent bg-[hsl(var(--warning))] text-[hsl(var(--warning-foreground))] hover:bg-[hsl(var(--warning))]/80",
+        success: "border-transparent bg-[hsl(var(--success))] text-[hsl(var(--success-foreground))] hover:bg-[hsl(var(--success))]/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+

package/src/components/ui/card.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
+

package/src/components/ui/dialog.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
+