@pablo2410/shared-ui 0.6.0 → 0.6.2

package/dist/reporting/index.js

@@ -1,201 +1,406 @@
 import {
   cn
 } from "../chunk-JT3XLKKD.js";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "../chunk-LTUYIBMA.js";
 
 // src/reporting/ReportingToolbar.tsx
+import { useState } from "react";
 import {
   ShieldAlert,
   Leaf,
   OctagonX,
-  AlertTriangle,
-  Lightbulb
+  Bug,
+  Lightbulb,
+  ChevronDown,
+  Send,
+  AlertTriangle
 } from "lucide-react";
-import { useState, useCallback } from "react";
+import { toast } from "sonner";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var REPORT_ICONS = {
-  safety: ShieldAlert,
-  environmental: Leaf,
-  "stop-work": OctagonX
-};
-var FEEDBACK_ICONS = {
-  problem: AlertTriangle,
-  suggestion: Lightbulb
-};
-var REPORT_COLORS = {
-  safety: "#ef4444",
-  environmental: "#22c55e",
-  "stop-work": "#f59e0b"
-};
-var FEEDBACK_COLORS = {
-  problem: "#ef4444",
-  suggestion: "#8C34E9"
-};
-var REPORT_LABELS = {
-  safety: "Safety",
-  environmental: "Environmental",
-  "stop-work": "Stop Work"
-};
-var FEEDBACK_LABELS = {
-  problem: "Problem",
-  suggestion: "Suggestion"
-};
-var REPORT_DESCRIPTIONS = {
-  safety: "Report a safety incident, near-miss, or hazard",
-  environmental: "Report an environmental incident or concern",
-  "stop-work": "Raise a stop work authority \u2014 immediate safety concern"
-};
-var FEEDBACK_DESCRIPTIONS = {
-  problem: "Report a problem with the platform",
-  suggestion: "Suggest an improvement or new feature"
-};
-function ToolbarButton({
-  icon: Icon,
-  label,
-  color,
-  compact,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick,
-      className: cn(
-        "flex items-center gap-1.5 rounded-md transition-all duration-200",
-        "outline-none focus-visible:ring-1 focus-visible:ring-[#8C34E9]",
-        "hover:opacity-90 cursor-pointer",
-        compact ? "px-2 py-1" : "px-2.5 py-1.5"
-      ),
-      style: {
-        backgroundColor: `${color}15`,
-        color,
-        border: `1px solid ${color}30`
-      },
-      title: label,
-      children: [
-        /* @__PURE__ */ jsx(Icon, { className: cn("shrink-0", compact ? "h-3.5 w-3.5" : "h-4 w-4") }),
-        !compact && /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium", compact ? "hidden sm:inline" : ""), children: label })
-      ]
-    }
-  );
-}
+var ALL_REPORT_OPTIONS = [
+  {
+    category: "safety",
+    label: "Safety Incident",
+    description: "Report a safety hazard, near miss, or injury",
+    icon: ShieldAlert,
+    color: "#EF4444"
+  },
+  {
+    category: "environmental",
+    label: "Environmental",
+    description: "Report an environmental concern or spill",
+    icon: Leaf,
+    color: "#22C55E"
+  },
+  {
+    category: "stop-work",
+    label: "Stop Work",
+    description: "Raise a stop work authority \u2014 immediate halt",
+    icon: OctagonX,
+    color: "#F59E0B"
+  }
+];
+var ALL_FEEDBACK_OPTIONS = [
+  {
+    category: "problem",
+    label: "Report Problem",
+    description: "Something isn't working",
+    icon: Bug,
+    color: "#EF4444"
+  },
+  {
+    category: "suggestion",
+    label: "Suggestion",
+    description: "Idea for improvement",
+    icon: Lightbulb,
+    color: "#8C34E9"
+  }
+];
+var SEVERITY_OPTIONS = [
+  { value: "critical", label: "Critical", color: "#EF4444" },
+  { value: "high", label: "High", color: "#F59E0B" },
+  { value: "medium", label: "Medium", color: "#3b82f6" },
+  { value: "low", label: "Low", color: "#22C55E" }
+];
 function ReportingToolbar({
-  moduleName,
+  moduleName = "Oplytics",
   showIncidentReporting = true,
   showFeedback = true,
   reportCategories = ["safety", "environmental", "stop-work"],
   feedbackCategories = ["problem", "suggestion"],
   onReportSubmit,
   onFeedbackSubmit,
-  compact = false,
-  className,
-  renderDialog
+  defaultLocation = "",
+  className
 }) {
-  const [activeDialog, setActiveDialog] = useState(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const openDialog = useCallback(
-    (type, category) => {
-      if (renderDialog) {
-        setActiveDialog({ type, category });
-      } else {
-        const description = window.prompt(
-          type === "report" ? `Describe the ${category} incident:` : `Describe your ${category}:`
-        );
-        if (description) {
-          if (type === "report") {
-            onReportSubmit({
-              category,
-              description,
-              moduleName,
-              timestamp: (/* @__PURE__ */ new Date()).toISOString()
-            });
-          } else {
-            onFeedbackSubmit({
-              category,
-              description,
-              moduleName,
-              timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-              pageContext: typeof window !== "undefined" ? window.location.pathname : void 0
-            });
-          }
-        }
-      }
-    },
-    [renderDialog, moduleName, onReportSubmit, onFeedbackSubmit]
+  const reportOptions = ALL_REPORT_OPTIONS.filter(
+    (opt) => reportCategories.includes(opt.category)
+  );
+  const feedbackOptions = ALL_FEEDBACK_OPTIONS.filter(
+    (opt) => feedbackCategories.includes(opt.category)
   );
-  const closeDialog = useCallback(() => {
-    setActiveDialog(null);
-    setIsSubmitting(false);
-  }, []);
-  const handleSubmit = useCallback(
-    async (description, extra) => {
-      if (!activeDialog) return;
-      setIsSubmitting(true);
-      try {
-        if (activeDialog.type === "report") {
-          await onReportSubmit({
-            category: activeDialog.category,
-            description,
-            location: extra?.location,
-            severity: extra?.severity,
-            moduleName,
-            timestamp: (/* @__PURE__ */ new Date()).toISOString()
-          });
-        } else {
-          await onFeedbackSubmit({
-            category: activeDialog.category,
-            description,
-            moduleName,
-            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-            pageContext: typeof window !== "undefined" ? window.location.pathname : void 0
-          });
-        }
-        closeDialog();
-      } catch (err) {
-        console.error("[ReportingToolbar] Submit failed:", err);
-        setIsSubmitting(false);
-      }
-    },
-    [activeDialog, moduleName, onReportSubmit, onFeedbackSubmit, closeDialog]
+  const [reportDialogOpen, setReportDialogOpen] = useState(false);
+  const [selectedReportCategory, setSelectedReportCategory] = useState("safety");
+  const [reportSeverity, setReportSeverity] = useState("medium");
+  const [reportLocation, setReportLocation] = useState(defaultLocation);
+  const [reportDescription, setReportDescription] = useState("");
+  const [reportImmediateAction, setReportImmediateAction] = useState("");
+  const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
+  const [selectedFeedbackCategory, setSelectedFeedbackCategory] = useState("problem");
+  const [feedbackSubject, setFeedbackSubject] = useState("");
+  const [feedbackDescription, setFeedbackDescription] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const openReportDialog = (category) => {
+    setSelectedReportCategory(category);
+    setReportSeverity(category === "stop-work" ? "critical" : "medium");
+    setReportLocation(defaultLocation);
+    setReportDescription("");
+    setReportImmediateAction("");
+    setReportDialogOpen(true);
+  };
+  const openFeedbackDialog = (category) => {
+    setSelectedFeedbackCategory(category);
+    setFeedbackSubject("");
+    setFeedbackDescription("");
+    setFeedbackDialogOpen(true);
+  };
+  const handleReportSubmit = async () => {
+    if (!reportDescription.trim()) {
+      toast.error("Please provide a description");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const report = {
+        category: selectedReportCategory,
+        description: reportDescription,
+        location: reportLocation || void 0,
+        severity: reportSeverity,
+        immediateAction: reportImmediateAction || void 0,
+        moduleName,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      await onReportSubmit(report);
+      toast.success("Report submitted successfully", {
+        description: selectedReportCategory === "stop-work" ? "Stop Work authority raised \u2014 management has been notified" : "Your report has been logged and assigned for review"
+      });
+      setReportDialogOpen(false);
+    } catch (err) {
+      console.error("[ReportingToolbar] report submit failed:", err);
+      toast.error("Failed to submit report. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const handleFeedbackSubmit = async () => {
+    if (!feedbackDescription.trim()) {
+      toast.error("Please provide a description");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const feedback = {
+        category: selectedFeedbackCategory,
+        subject: feedbackSubject || void 0,
+        description: feedbackDescription,
+        moduleName,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        pageContext: typeof window !== "undefined" ? window.location.pathname : void 0
+      };
+      await onFeedbackSubmit(feedback);
+      toast.success(
+        selectedFeedbackCategory === "problem" ? "Problem reported \u2014 Oplytics team will review" : "Suggestion submitted \u2014 thank you for your feedback"
+      );
+      setFeedbackDialogOpen(false);
+    } catch (err) {
+      console.error("[ReportingToolbar] feedback submit failed:", err);
+      toast.error("Failed to submit feedback. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const reportConfig = ALL_REPORT_OPTIONS.find(
+    (r) => r.category === selectedReportCategory
   );
-  const dialogProps = activeDialog ? {
-    isOpen: true,
-    onClose: closeDialog,
-    type: activeDialog.type,
-    category: activeDialog.category,
-    label: activeDialog.type === "report" ? REPORT_LABELS[activeDialog.category] : FEEDBACK_LABELS[activeDialog.category],
-    description: activeDialog.type === "report" ? REPORT_DESCRIPTIONS[activeDialog.category] : FEEDBACK_DESCRIPTIONS[activeDialog.category],
-    color: activeDialog.type === "report" ? REPORT_COLORS[activeDialog.category] : FEEDBACK_COLORS[activeDialog.category],
-    icon: activeDialog.type === "report" ? REPORT_ICONS[activeDialog.category] : FEEDBACK_ICONS[activeDialog.category],
-    onSubmit: handleSubmit,
-    isSubmitting
-  } : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
-      showIncidentReporting && reportCategories.map((cat) => /* @__PURE__ */ jsx(
-        ToolbarButton,
-        {
-          icon: REPORT_ICONS[cat],
-          label: REPORT_LABELS[cat],
-          color: REPORT_COLORS[cat],
-          compact,
-          onClick: () => openDialog("report", cat)
-        },
-        cat
-      )),
-      showIncidentReporting && showFeedback && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-[#1E2738] mx-1" }),
-      showFeedback && feedbackCategories.map((cat) => /* @__PURE__ */ jsx(
-        ToolbarButton,
-        {
-          icon: FEEDBACK_ICONS[cat],
-          label: FEEDBACK_LABELS[cat],
-          color: FEEDBACK_COLORS[cat],
-          compact,
-          onClick: () => openDialog("feedback", cat)
-        },
-        cat
-      ))
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+      showIncidentReporting && reportOptions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-9 gap-1.5 text-xs font-medium text-[#EF4444] hover:bg-[#EF4444]/10 hover:text-[#EF4444] border border-[#EF4444]/20",
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Report" }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-56", children: reportOptions.map((opt) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: () => openReportDialog(opt.category),
+            className: "gap-3 py-2.5",
+            children: [
+              /* @__PURE__ */ jsx(opt.icon, { className: "h-4 w-4", style: { color: opt.color } }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: opt.label }),
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: opt.description })
+              ] })
+            ]
+          },
+          opt.category
+        )) })
+      ] }),
+      showFeedback && feedbackOptions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-9 gap-1.5 text-xs font-medium text-[#8C34E9] hover:bg-[#8C34E9]/10 hover:text-[#8C34E9] border border-[#8C34E9]/20",
+            children: [
+              /* @__PURE__ */ jsx(Lightbulb, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Feedback" }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-52", children: feedbackOptions.map((opt, idx) => /* @__PURE__ */ jsxs("span", { children: [
+          idx > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => openFeedbackDialog(opt.category),
+              className: "gap-3 py-2.5",
+              children: [
+                /* @__PURE__ */ jsx(opt.icon, { className: "h-4 w-4", style: { color: opt.color } }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: opt.label }),
+                  /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: opt.description })
+                ] })
+              ]
+            }
+          )
+        ] }, opt.category)) })
+      ] })
     ] }),
-    renderDialog && dialogProps && renderDialog(dialogProps)
+    /* @__PURE__ */ jsx(Dialog, { open: reportDialogOpen, onOpenChange: setReportDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[500px]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+          reportConfig && /* @__PURE__ */ jsx(reportConfig.icon, { className: "h-5 w-5", style: { color: reportConfig.color } }),
+          reportConfig?.label || "Report",
+          selectedReportCategory === "stop-work" && /* @__PURE__ */ jsx(Badge, { className: "bg-[#F59E0B] text-white text-[9px] border-0", children: "URGENT" })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          reportConfig?.description,
+          ". All reports are logged and tracked."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Severity" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: reportSeverity,
+              onValueChange: (v) => setReportSeverity(v),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: SEVERITY_OPTIONS.map((s) => /* @__PURE__ */ jsx(SelectItem, { value: s.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "h-2 w-2 rounded-full",
+                      style: { backgroundColor: s.color }
+                    }
+                  ),
+                  s.label
+                ] }) }, s.value)) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Location / Area" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: reportLocation,
+              onChange: (e) => setReportLocation(e.target.value),
+              placeholder: "e.g., Production Line 3, Warehouse B",
+              className: "h-9"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Description *" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: reportDescription,
+              onChange: (e) => setReportDescription(e.target.value),
+              placeholder: "Describe what happened or what you observed...",
+              rows: 4
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Immediate Action Taken" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: reportImmediateAction,
+              onChange: (e) => setReportImmediateAction(e.target.value),
+              placeholder: "Describe any immediate action taken to make the area safe...",
+              rows: 2
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setReportDialogOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleReportSubmit,
+            disabled: submitting || !reportDescription.trim(),
+            className: "gap-2",
+            style: {
+              backgroundColor: reportConfig?.color,
+              color: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Send, { className: "h-3.5 w-3.5" }),
+              submitting ? "Submitting..." : "Submit Report"
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: feedbackDialogOpen, onOpenChange: setFeedbackDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[500px]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+          selectedFeedbackCategory === "problem" ? /* @__PURE__ */ jsx(Bug, { className: "h-5 w-5 text-[#EF4444]" }) : /* @__PURE__ */ jsx(Lightbulb, { className: "h-5 w-5 text-[#8C34E9]" }),
+          selectedFeedbackCategory === "problem" ? "Report a Problem" : "Submit a Suggestion"
+        ] }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: selectedFeedbackCategory === "problem" ? "Help us fix issues \u2014 describe what went wrong." : "We'd love to hear your ideas for improving Oplytics." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Subject" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: feedbackSubject,
+              onChange: (e) => setFeedbackSubject(e.target.value),
+              placeholder: selectedFeedbackCategory === "problem" ? "Brief summary of the issue" : "Brief summary of your idea",
+              className: "h-9"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium", children: "Description *" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: feedbackDescription,
+              onChange: (e) => setFeedbackDescription(e.target.value),
+              placeholder: selectedFeedbackCategory === "problem" ? "What were you trying to do? What happened instead?" : "Describe your suggestion and how it would help...",
+              rows: 5
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground", children: [
+          "Module: ",
+          moduleName,
+          " \u2014 Feedback is reviewed by the Oplytics team"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setFeedbackDialogOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleFeedbackSubmit,
+            disabled: submitting || !feedbackDescription.trim(),
+            className: "gap-2",
+            style: {
+              backgroundColor: selectedFeedbackCategory === "problem" ? "#EF4444" : "#8C34E9",
+              color: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Send, { className: "h-3.5 w-3.5" }),
+              submitting ? "Submitting..." : "Submit"
+            ]
+          }
+        )
+      ] })
+    ] }) })
   ] });
 }