@optifye/dashboard-core 6.10.46 → 6.10.47

package/dist/index.js

@@ -51454,13 +51454,31 @@ var InviteUserDialog = ({
   const [selectedRole, setSelectedRole] = React26.useState("supervisor");
   const [selectedLines, setSelectedLines] = React26.useState([]);
   const [selectedFactories, setSelectedFactories] = React26.useState([]);
+  const [lineSearch, setLineSearch] = React26.useState("");
+  const [factorySearch, setFactorySearch] = React26.useState("");
   const [isSubmitting, setIsSubmitting] = React26.useState(false);
   const [error, setError] = React26.useState(null);
-  const [isLinesDropdownOpen, setIsLinesDropdownOpen] = React26.useState(false);
-  const [isFactoriesDropdownOpen, setIsFactoriesDropdownOpen] = React26.useState(false);
   const canInviteIT = user?.role_level === "owner" || user?.role_level === "optifye";
   const canInvitePlantHead = user?.role_level === "owner" || user?.role_level === "it" || user?.role_level === "optifye";
   const canInviteSupervisor = ["owner", "it", "plant_head", "optifye"].includes(user?.role_level || "");
+  const filteredLines = React26.useMemo(() => {
+    const search = lineSearch.trim().toLowerCase();
+    if (!search) return availableLines;
+    return availableLines.filter((line) => line.name.toLowerCase().includes(search));
+  }, [availableLines, lineSearch]);
+  const filteredFactories = React26.useMemo(() => {
+    const search = factorySearch.trim().toLowerCase();
+    if (!search) return availableFactories;
+    return availableFactories.filter((factory) => factory.name.toLowerCase().includes(search));
+  }, [availableFactories, factorySearch]);
+  const selectedLineItems = React26.useMemo(
+    () => availableLines.filter((line) => selectedLines.includes(line.id)),
+    [availableLines, selectedLines]
+  );
+  const selectedFactoryItems = React26.useMemo(
+    () => availableFactories.filter((factory) => selectedFactories.includes(factory.id)),
+    [availableFactories, selectedFactories]
+  );
   React26.useEffect(() => {
     if (!isOpen) {
       setEmail("");
@@ -51469,9 +51487,9 @@ var InviteUserDialog = ({
       setSelectedRole("supervisor");
       setSelectedLines([]);
       setSelectedFactories([]);
+      setLineSearch("");
+      setFactorySearch("");
       setError(null);
-      setIsLinesDropdownOpen(false);
-      setIsFactoriesDropdownOpen(false);
     }
   }, [isOpen]);
   const validateEmail = (email2) => {
@@ -51540,7 +51558,6 @@ var InviteUserDialog = ({
       try {
         const dashboardUrl = typeof window !== "undefined" ? window.location.origin : "";
         if (dashboardUrl) {
-          console.log("Sending welcome email to:", email.trim());
           const { data: emailData, error: emailError } = await supabase.functions.invoke("hyper-service", {
             body: {
               action: "send-welcome-email",
@@ -51553,13 +51570,8 @@ var InviteUserDialog = ({
             console.error("Failed to send welcome email:", emailError);
             sonner.toast.warning("User added successfully, but welcome email could not be sent");
           } else if (emailData?.success) {
-            console.log("Welcome email sent successfully:", emailData);
             sonner.toast.success("User added and welcome email sent!");
-          } else {
-            console.log("Welcome email response:", emailData);
           }
-        } else {
-          console.warn("Dashboard URL not available, skipping welcome email");
         }
       } catch (emailErr) {
         console.error("Error sending welcome email:", emailErr);
@@ -51585,7 +51597,7 @@ var InviteUserDialog = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "bg-white rounded-xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto transform transition-all animate-in fade-in duration-200",
+          className: "bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto transform transition-all animate-in fade-in duration-200",
           onClick: (e) => e.stopPropagation(),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200", children: [
@@ -51613,7 +51625,7 @@ var InviteUserDialog = ({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "firstName", className: "block text-sm font-medium text-gray-700 mb-2", children: [
                       "First Name ",
@@ -51772,124 +51784,192 @@ var InviteUserDialog = ({
                     )
                   ] })
                 ] }),
-                selectedRole === "plant_head" && availableFactories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "w-4 h-4 inline mr-1" }),
-                    "Assign to Factories"
+                selectedRole === "plant_head" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-gray-800 flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "w-4 h-4 text-blue-600" }),
+                        "Factory Access"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Choose the factories this plant head will manage." })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-full px-2 py-1", children: [
+                      selectedFactories.length,
+                      " selected"
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mb-2", children: "Select one or multiple factories this plant head will manage" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                  availableFactories.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-gray-300 bg-white px-3 py-4 text-sm text-gray-500", children: "No factories available for assignment." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setSelectedFactories(availableFactories.map((factory) => factory.id)),
+                          className: "px-2.5 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 transition-colors",
+                          disabled: isSubmitting,
+                          children: "Select all"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setSelectedFactories([]),
+                          className: "px-2.5 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors",
+                          disabled: isSubmitting || selectedFactories.length === 0,
+                          children: "Clear"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "text",
+                          value: factorySearch,
+                          onChange: (e) => setFactorySearch(e.target.value),
+                          placeholder: "Search factories",
+                          className: "w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                          disabled: isSubmitting
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto rounded-lg border border-gray-200 bg-white divide-y divide-gray-100", children: filteredFactories.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-6 text-sm text-gray-500 text-center", children: "No factories match your search." }) : filteredFactories.map((factory) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "label",
                       {
-                        type: "button",
-                        onClick: () => setIsFactoriesDropdownOpen(!isFactoriesDropdownOpen),
-                        disabled: isSubmitting,
-                        className: "w-full min-h-[42px] px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white text-left",
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                          selectedFactories.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Select factories..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 flex-1", children: selectedFactories.map((factoryId) => {
-                            const factory = availableFactories.find((f) => f.id === factoryId);
-                            return factory ? /* @__PURE__ */ jsxRuntime.jsxs(
-                              "span",
+                        className: "flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "input",
                               {
-                                className: "inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-md font-medium",
-                                children: [
-                                  factory.name,
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        toggleFactorySelection(factory.id);
-                                      },
-                                      className: "ml-0.5 hover:bg-blue-200 rounded-sm transition-colors",
-                                      disabled: isSubmitting,
-                                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
-                                    }
-                                  )
-                                ]
-                              },
-                              factory.id
-                            ) : null;
-                          }) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("w-4 h-4 text-gray-400 transition-transform flex-shrink-0", isFactoriesDropdownOpen && "rotate-180") })
-                        ] })
-                      }
-                    ),
-                    isFactoriesDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto", children: availableFactories.map((factory) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
+                                type: "checkbox",
+                                checked: selectedFactories.includes(factory.id),
+                                onChange: () => toggleFactorySelection(factory.id),
+                                className: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500",
+                                disabled: isSubmitting
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800 truncate", children: factory.name })
+                          ] }),
+                          selectedFactories.includes(factory.id) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-blue-600 flex-shrink-0" })
+                        ]
+                      },
+                      factory.id
+                    )) }),
+                    selectedFactoryItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: selectedFactoryItems.map((factory) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
                       {
-                        onClick: () => toggleFactorySelection(factory.id),
-                        className: cn(
-                          "px-4 py-2.5 cursor-pointer flex items-center justify-between hover:bg-gray-50 transition-colors",
-                          selectedFactories.includes(factory.id) && "bg-blue-50"
-                        ),
+                        className: "inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-md font-medium",
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: factory.name }),
-                          selectedFactories.includes(factory.id) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-blue-600" })
+                          factory.name,
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => toggleFactorySelection(factory.id),
+                              className: "hover:bg-blue-200 rounded-sm transition-colors",
+                              disabled: isSubmitting,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+                            }
+                          )
                         ]
                       },
                       factory.id
                     )) })
                   ] })
                 ] }),
-                selectedRole === "supervisor" && availableLines.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "w-4 h-4 inline mr-1" }),
-                    "Assign to Lines"
+                selectedRole === "supervisor" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-gray-800 flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "w-4 h-4 text-blue-600" }),
+                        "Line Access"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Choose the lines this supervisor will monitor." })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium bg-white border border-gray-200 text-gray-600 rounded-full px-2 py-1", children: [
+                      selectedLines.length,
+                      " selected"
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mb-2", children: "Select one or multiple lines this supervisor will monitor" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                  availableLines.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-gray-300 bg-white px-3 py-4 text-sm text-gray-500", children: "No lines available for assignment." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setSelectedLines(availableLines.map((line) => line.id)),
+                          className: "px-2.5 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 transition-colors",
+                          disabled: isSubmitting,
+                          children: "Select all"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setSelectedLines([]),
+                          className: "px-2.5 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors",
+                          disabled: isSubmitting || selectedLines.length === 0,
+                          children: "Clear"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "text",
+                          value: lineSearch,
+                          onChange: (e) => setLineSearch(e.target.value),
+                          placeholder: "Search lines",
+                          className: "w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                          disabled: isSubmitting
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto rounded-lg border border-gray-200 bg-white divide-y divide-gray-100", children: filteredLines.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-6 text-sm text-gray-500 text-center", children: "No lines match your search." }) : filteredLines.map((line) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "label",
                       {
-                        type: "button",
-                        onClick: () => setIsLinesDropdownOpen(!isLinesDropdownOpen),
-                        disabled: isSubmitting,
-                        className: "w-full min-h-[42px] px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white text-left",
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                          selectedLines.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Select lines..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 flex-1", children: selectedLines.map((lineId) => {
-                            const line = availableLines.find((l) => l.id === lineId);
-                            return line ? /* @__PURE__ */ jsxRuntime.jsxs(
-                              "span",
+                        className: "flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "input",
                               {
-                                className: "inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-md font-medium",
-                                children: [
-                                  line.name,
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        toggleLineSelection(line.id);
-                                      },
-                                      className: "ml-0.5 hover:bg-blue-200 rounded-sm transition-colors",
-                                      disabled: isSubmitting,
-                                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
-                                    }
-                                  )
-                                ]
-                              },
-                              line.id
-                            ) : null;
-                          }) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("w-4 h-4 text-gray-400 transition-transform flex-shrink-0", isLinesDropdownOpen && "rotate-180") })
-                        ] })
-                      }
-                    ),
-                    isLinesDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto", children: availableLines.map((line) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
+                                type: "checkbox",
+                                checked: selectedLines.includes(line.id),
+                                onChange: () => toggleLineSelection(line.id),
+                                className: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500",
+                                disabled: isSubmitting
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800 truncate", children: line.name })
+                          ] }),
+                          selectedLines.includes(line.id) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-blue-600 flex-shrink-0" })
+                        ]
+                      },
+                      line.id
+                    )) }),
+                    selectedLineItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: selectedLineItems.map((line) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
                       {
-                        onClick: () => toggleLineSelection(line.id),
-                        className: cn(
-                          "px-4 py-2.5 cursor-pointer flex items-center justify-between hover:bg-gray-50 transition-colors",
-                          selectedLines.includes(line.id) && "bg-blue-50"
-                        ),
+                        className: "inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-md font-medium",
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: line.name }),
-                          selectedLines.includes(line.id) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-blue-600" })
+                          line.name,
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => toggleLineSelection(line.id),
+                              className: "hover:bg-blue-200 rounded-sm transition-colors",
+                              disabled: isSubmitting,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+                            }
+                          )
                         ]
                       },
                       line.id
@@ -52424,10 +52504,22 @@ var LineAssignmentDropdown = ({
   canEdit,
   onUpdate
 }) => {
+  const VIEWPORT_MARGIN = 8;
+  const DROPDOWN_GAP = 6;
+  const MIN_DROPDOWN_WIDTH = 300;
+  const MAX_DROPDOWN_WIDTH = 420;
+  const PREFERRED_DROPDOWN_HEIGHT = 420;
+  const MIN_DROPDOWN_HEIGHT = 180;
   const [isOpen, setIsOpen] = React26.useState(false);
   const [selectedIds, setSelectedIds] = React26.useState(currentLineIds);
   const [isSaving, setIsSaving] = React26.useState(false);
-  const [position, setPosition] = React26.useState({ top: 0, left: 0, width: 0 });
+  const [position, setPosition] = React26.useState({
+    top: 0,
+    left: 0,
+    width: MIN_DROPDOWN_WIDTH,
+    maxHeight: PREFERRED_DROPDOWN_HEIGHT,
+    openAbove: false
+  });
   const buttonRef = React26.useRef(null);
   const dropdownRef = React26.useRef(null);
   React26.useEffect(() => {
@@ -52437,10 +52529,31 @@ var LineAssignmentDropdown = ({
     const updatePosition = () => {
       if (isOpen && buttonRef.current) {
         const rect = buttonRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const width = Math.min(
+          Math.max(rect.width, MIN_DROPDOWN_WIDTH),
+          Math.min(MAX_DROPDOWN_WIDTH, viewportWidth - VIEWPORT_MARGIN * 2)
+        );
+        const left = Math.min(
+          Math.max(VIEWPORT_MARGIN, rect.left),
+          viewportWidth - width - VIEWPORT_MARGIN
+        );
+        const spaceBelow = viewportHeight - rect.bottom - VIEWPORT_MARGIN - DROPDOWN_GAP;
+        const spaceAbove = rect.top - VIEWPORT_MARGIN - DROPDOWN_GAP;
+        const openAbove = spaceBelow < 260 && spaceAbove > spaceBelow;
+        const availableSpace = openAbove ? spaceAbove : spaceBelow;
+        const maxHeight = Math.max(
+          MIN_DROPDOWN_HEIGHT,
+          Math.min(PREFERRED_DROPDOWN_HEIGHT, availableSpace > 0 ? availableSpace : viewportHeight - VIEWPORT_MARGIN * 2)
+        );
+        const top = openAbove ? rect.top - DROPDOWN_GAP : Math.min(rect.bottom + DROPDOWN_GAP, viewportHeight - VIEWPORT_MARGIN - maxHeight);
         setPosition({
-          top: rect.bottom,
-          left: rect.left,
-          width: rect.width
+          top,
+          left,
+          width,
+          maxHeight,
+          openAbove
         });
       }
     };
@@ -52518,7 +52631,7 @@ var LineAssignmentDropdown = ({
       assignedLines.length - 2
     ] });
   };
-  const hasChanges = JSON.stringify(selectedIds.sort()) !== JSON.stringify(currentLineIds.sort());
+  const hasChanges = JSON.stringify([...selectedIds].sort()) !== JSON.stringify([...currentLineIds].sort());
   if (!canEdit) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: getDisplayText() });
   }
@@ -52548,13 +52661,13 @@ var LineAssignmentDropdown = ({
           "div",
           {
             ref: dropdownRef,
-            className: "fixed z-[9999] bg-white rounded-lg shadow-2xl border border-gray-200",
+            className: "fixed z-[9999] bg-white rounded-lg shadow-2xl border border-gray-200 flex flex-col overflow-hidden",
             style: {
-              top: `${position.top + 4}px`,
+              top: `${position.top}px`,
               left: `${position.left}px`,
-              minWidth: `${Math.max(position.width, 300)}px`,
-              maxWidth: "400px",
-              maxHeight: "calc(100vh - 100px)"
+              width: `${position.width}px`,
+              maxHeight: `${position.maxHeight}px`,
+              transform: position.openAbove ? "translateY(-100%)" : void 0
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -52571,7 +52684,7 @@ var LineAssignmentDropdown = ({
                   }
                 )
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-80 overflow-y-auto", children: availableLines.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No lines available" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: availableLines.map((line) => /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: availableLines.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No lines available" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: availableLines.map((line) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
                   className: "flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer transition-colors",
@@ -52631,10 +52744,22 @@ var FactoryAssignmentDropdown = ({
   canEdit,
   onUpdate
 }) => {
+  const VIEWPORT_MARGIN = 8;
+  const DROPDOWN_GAP = 6;
+  const MIN_DROPDOWN_WIDTH = 300;
+  const MAX_DROPDOWN_WIDTH = 420;
+  const PREFERRED_DROPDOWN_HEIGHT = 420;
+  const MIN_DROPDOWN_HEIGHT = 180;
   const [isOpen, setIsOpen] = React26.useState(false);
   const [selectedIds, setSelectedIds] = React26.useState(currentFactoryIds);
   const [isSaving, setIsSaving] = React26.useState(false);
-  const [position, setPosition] = React26.useState({ top: 0, left: 0, width: 0 });
+  const [position, setPosition] = React26.useState({
+    top: 0,
+    left: 0,
+    width: MIN_DROPDOWN_WIDTH,
+    maxHeight: PREFERRED_DROPDOWN_HEIGHT,
+    openAbove: false
+  });
   const buttonRef = React26.useRef(null);
   const dropdownRef = React26.useRef(null);
   React26.useEffect(() => {
@@ -52644,10 +52769,31 @@ var FactoryAssignmentDropdown = ({
     const updatePosition = () => {
       if (isOpen && buttonRef.current) {
         const rect = buttonRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const width = Math.min(
+          Math.max(rect.width, MIN_DROPDOWN_WIDTH),
+          Math.min(MAX_DROPDOWN_WIDTH, viewportWidth - VIEWPORT_MARGIN * 2)
+        );
+        const left = Math.min(
+          Math.max(VIEWPORT_MARGIN, rect.left),
+          viewportWidth - width - VIEWPORT_MARGIN
+        );
+        const spaceBelow = viewportHeight - rect.bottom - VIEWPORT_MARGIN - DROPDOWN_GAP;
+        const spaceAbove = rect.top - VIEWPORT_MARGIN - DROPDOWN_GAP;
+        const openAbove = spaceBelow < 260 && spaceAbove > spaceBelow;
+        const availableSpace = openAbove ? spaceAbove : spaceBelow;
+        const maxHeight = Math.max(
+          MIN_DROPDOWN_HEIGHT,
+          Math.min(PREFERRED_DROPDOWN_HEIGHT, availableSpace > 0 ? availableSpace : viewportHeight - VIEWPORT_MARGIN * 2)
+        );
+        const top = openAbove ? rect.top - DROPDOWN_GAP : Math.min(rect.bottom + DROPDOWN_GAP, viewportHeight - VIEWPORT_MARGIN - maxHeight);
         setPosition({
-          top: rect.bottom,
-          left: rect.left,
-          width: rect.width
+          top,
+          left,
+          width,
+          maxHeight,
+          openAbove
         });
       }
     };
@@ -52725,7 +52871,7 @@ var FactoryAssignmentDropdown = ({
       assignedFactories.length - 2
     ] });
   };
-  const hasChanges = JSON.stringify(selectedIds.sort()) !== JSON.stringify(currentFactoryIds.sort());
+  const hasChanges = JSON.stringify([...selectedIds].sort()) !== JSON.stringify([...currentFactoryIds].sort());
   if (!canEdit) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: getDisplayText() });
   }
@@ -52755,13 +52901,13 @@ var FactoryAssignmentDropdown = ({
           "div",
           {
             ref: dropdownRef,
-            className: "fixed z-[9999] bg-white rounded-lg shadow-2xl border border-gray-200",
+            className: "fixed z-[9999] bg-white rounded-lg shadow-2xl border border-gray-200 flex flex-col overflow-hidden",
             style: {
-              top: `${position.top + 4}px`,
+              top: `${position.top}px`,
               left: `${position.left}px`,
-              minWidth: `${Math.max(position.width, 300)}px`,
-              maxWidth: "400px",
-              maxHeight: "calc(100vh - 100px)"
+              width: `${position.width}px`,
+              maxHeight: `${position.maxHeight}px`,
+              transform: position.openAbove ? "translateY(-100%)" : void 0
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -52778,7 +52924,7 @@ var FactoryAssignmentDropdown = ({
                   }
                 )
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-80 overflow-y-auto", children: availableFactories.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No factories available" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: availableFactories.map((factory) => /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: availableFactories.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No factories available" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: availableFactories.map((factory) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "label",
                 {
                   className: "flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer transition-colors",
@@ -60911,6 +61057,20 @@ var ProfileView = () => {
   ] });
 };
 var ProfileView_default = ProfileView;
+
+// src/lib/constants/actions.ts
+var ACTION_NAMES = {
+  /** Assembly operations */
+  ASSEMBLY: "Assembly",
+  /** Packaging operations */
+  PACKAGING: "Packaging",
+  /** Inspection operations */
+  INSPECTION: "Inspection",
+  /** Testing operations */
+  TESTING: "Testing",
+  /** Quality control operations */
+  QUALITY_CONTROL: "Quality Control"
+};
 var calculateShiftHours = (startTime, endTime, breaks = []) => {
   if (!startTime || !endTime) return 8;
   const [startHour, startMinute] = startTime.split(":").map(Number);
@@ -60924,6 +61084,43 @@ var calculateShiftHours = (startTime, endTime, breaks = []) => {
   const hoursDiff = (endMinutes - startMinutes - totalBreakMinutes) / 60;
   return Number(hoursDiff.toFixed(1));
 };
+var calculateBreakDuration2 = (startTime, endTime) => {
+  const [startHour, startMinute] = startTime.split(":").map(Number);
+  const [endHour, endMinute] = endTime.split(":").map(Number);
+  let startMinutes = startHour * 60 + startMinute;
+  let endMinutes = endHour * 60 + endMinute;
+  if (endMinutes < startMinutes) {
+    endMinutes += 24 * 60;
+  }
+  return endMinutes - startMinutes;
+};
+var parseBreaksFromDB = (dbBreaks) => {
+  if (!dbBreaks) return [];
+  if (Array.isArray(dbBreaks)) {
+    return dbBreaks.map((breakItem) => ({
+      startTime: breakItem.start || breakItem.startTime || "00:00",
+      endTime: breakItem.end || breakItem.endTime || "00:00",
+      duration: calculateBreakDuration2(
+        breakItem.start || breakItem.startTime || "00:00",
+        breakItem.end || breakItem.endTime || "00:00"
+      ),
+      remarks: breakItem.remarks || breakItem.name || ""
+    }));
+  } else if (dbBreaks.breaks && Array.isArray(dbBreaks.breaks)) {
+    return dbBreaks.breaks.map((breakItem) => ({
+      startTime: breakItem.start || breakItem.startTime || "00:00",
+      endTime: breakItem.end || breakItem.endTime || "00:00",
+      duration: calculateBreakDuration2(
+        breakItem.start || breakItem.startTime || "00:00",
+        breakItem.end || breakItem.endTime || "00:00"
+      ),
+      remarks: breakItem.remarks || breakItem.name || ""
+    }));
+  } else {
+    console.warn("Unexpected breaks format:", dbBreaks);
+    return [];
+  }
+};
 var getStoredLineState = (lineId) => {
   try {
     return JSON.parse(localStorage.getItem(`line_${lineId}_open`) || "false");
@@ -60940,6 +61137,7 @@ var formatBreaks = (breaks) => {
     }))
   };
 };
+var SHIFT_HOURS_EPSILON = 1e-3;
 var BreakRow = React26.memo(({
   break: breakItem,
   onUpdate,
@@ -61235,16 +61433,22 @@ var ShiftsView = ({
   );
   const [loading, setLoading] = React26.useState(true);
   const [error, setError] = React26.useState(null);
+  const [saveStatusMessages, setSaveStatusMessages] = React26.useState(
+    () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: null }), {})
+  );
   const showToast = React26.useCallback((type, message) => {
     if (onToast) {
-      onToast(type, message);
-    } else {
-      if (type === "success") {
-        sonner.toast.success(message);
-      } else {
-        sonner.toast.error(message);
+      try {
+        onToast(type, message);
+      } catch (error2) {
+        console.warn("[ShiftsView] onToast callback failed, falling back to sonner toast:", error2);
       }
     }
+    if (type === "success") {
+      sonner.toast.success(message);
+    } else {
+      sonner.toast.error(message);
+    }
   }, [onToast]);
   React26.useEffect(() => {
     const fetchShiftConfigs = async () => {
@@ -61395,15 +61599,196 @@ var ShiftsView = ({
       return config;
     }));
   }, []);
+  const getOperationalDateForLine = React26.useCallback((lineConfig) => {
+    const sortedShifts = [...lineConfig.shifts || []].sort((a, b) => a.shiftId - b.shiftId);
+    const dayBoundaryStart = sortedShifts[0]?.startTime || "06:00";
+    return getOperationalDate(lineConfig.timezone || "UTC", /* @__PURE__ */ new Date(), dayBoundaryStart);
+  }, []);
+  const recalculateTargetsForShiftHourChanges = React26.useCallback(
+    async ({
+      lineId,
+      lineConfig,
+      previousShiftHours,
+      updatedBy
+    }) => {
+      const primaryOperationalDate = getOperationalDate(lineConfig.timezone || "UTC");
+      const alternateOperationalDate = getOperationalDateForLine(lineConfig);
+      const candidateOperationalDates = primaryOperationalDate === alternateOperationalDate ? [primaryOperationalDate] : [primaryOperationalDate, alternateOperationalDate];
+      let recalculatedCount = 0;
+      const { data: lineRow, error: lineRowError } = await supabase.from("lines").select("factory_id").eq("id", lineId).maybeSingle();
+      if (lineRowError) {
+        throw new Error(`Failed to resolve line factory for target recalculation: ${lineRowError.message}`);
+      }
+      const lineFactoryId = lineRow?.factory_id || null;
+      for (const shift of lineConfig.shifts || []) {
+        const oldShiftHours = previousShiftHours[shift.shiftId];
+        const newShiftHours = calculateShiftHours(shift.startTime, shift.endTime, shift.breaks || []);
+        if (oldShiftHours === void 0) continue;
+        if (!Number.isFinite(newShiftHours) || newShiftHours <= 0) {
+          console.warn(
+            `[ShiftsView] Skipping target recalculation for line ${lineId}, shift ${shift.shiftId} due to invalid new shift hours: ${newShiftHours}`
+          );
+          continue;
+        }
+        if (Math.abs(newShiftHours - oldShiftHours) <= SHIFT_HOURS_EPSILON) continue;
+        let thresholdDateForShift = candidateOperationalDates[0];
+        let currentThresholds = [];
+        for (const candidateDate of candidateOperationalDates) {
+          const { data: thresholdRows, error: thresholdsFetchError } = await supabase.from("action_thresholds").select("line_id, shift_id, action_id, workspace_id, date, pph_threshold, ideal_cycle_time, total_day_output, action_name, sku_id").eq("line_id", lineId).eq("date", candidateDate).eq("shift_id", shift.shiftId);
+          if (thresholdsFetchError) {
+            throw new Error(
+              `Failed to fetch action thresholds for line ${lineId}, shift ${shift.shiftId}: ${thresholdsFetchError.message}`
+            );
+          }
+          if ((thresholdRows || []).length > 0) {
+            thresholdDateForShift = candidateDate;
+            currentThresholds = thresholdRows || [];
+            break;
+          }
+        }
+        if (currentThresholds.length === 0) {
+          continue;
+        }
+        const actionIds = Array.from(
+          new Set(currentThresholds.map((threshold) => threshold.action_id).filter(Boolean))
+        );
+        const actionNameById = /* @__PURE__ */ new Map();
+        if (actionIds.length > 0) {
+          const { data: actionRows, error: actionsError } = await supabase.from("actions").select("id, action_name").in("id", actionIds);
+          if (actionsError) {
+            console.warn(
+              `[ShiftsView] Failed to resolve action names for line ${lineId}, shift ${shift.shiftId}: ${actionsError.message}`
+            );
+          } else {
+            (actionRows || []).forEach((actionRow) => {
+              if (actionRow.id && actionRow.action_name) {
+                actionNameById.set(actionRow.id, actionRow.action_name);
+              }
+            });
+          }
+        }
+        const expandedHours = newShiftHours > oldShiftHours;
+        const recalculatedThresholds = currentThresholds.map((threshold) => {
+          const existingPPH = Number(threshold.pph_threshold) || 0;
+          const existingDayOutput = Number(threshold.total_day_output) || 0;
+          const baselineDayOutput = existingDayOutput > 0 ? existingDayOutput : Math.round(existingPPH * Math.max(oldShiftHours, 0));
+          let nextPPH = existingPPH;
+          let nextDayOutput = existingDayOutput;
+          if (expandedHours) {
+            const pphToKeep = existingPPH > 0 ? existingPPH : oldShiftHours > 0 ? Math.round(baselineDayOutput / oldShiftHours) : 0;
+            nextPPH = pphToKeep;
+            nextDayOutput = Math.round(pphToKeep * newShiftHours);
+          } else {
+            const dayOutputToKeep = baselineDayOutput;
+            nextDayOutput = dayOutputToKeep;
+            nextPPH = newShiftHours > 0 ? Math.round(dayOutputToKeep / newShiftHours) : 0;
+          }
+          const resolvedActionName = (typeof threshold.action_name === "string" && threshold.action_name.trim().length > 0 ? threshold.action_name : actionNameById.get(threshold.action_id)) || ACTION_NAMES.ASSEMBLY;
+          return {
+            line_id: threshold.line_id || lineId,
+            shift_id: shift.shiftId,
+            action_id: threshold.action_id,
+            workspace_id: threshold.workspace_id,
+            date: threshold.date || thresholdDateForShift,
+            pph_threshold: Math.max(0, Math.round(Number.isFinite(nextPPH) ? nextPPH : 0)),
+            ideal_cycle_time: Number(threshold.ideal_cycle_time) || 0,
+            total_day_output: Math.max(0, Math.round(Number.isFinite(nextDayOutput) ? nextDayOutput : 0)),
+            action_name: resolvedActionName,
+            updated_by: updatedBy,
+            ...threshold.sku_id ? { sku_id: threshold.sku_id } : {}
+          };
+        });
+        const { error: thresholdsUpsertError } = await supabase.from("action_thresholds").upsert(recalculatedThresholds);
+        if (thresholdsUpsertError) {
+          throw new Error(
+            `Failed to update action thresholds for line ${lineId}, shift ${shift.shiftId}: ${thresholdsUpsertError.message}`
+          );
+        }
+        const packagingActionIds = new Set(
+          Array.from(actionNameById.entries()).filter(([, actionName]) => actionName.toLowerCase() === ACTION_NAMES.PACKAGING.toLowerCase()).map(([actionId]) => actionId)
+        );
+        const packagingThresholds = recalculatedThresholds.filter((threshold) => {
+          if (packagingActionIds.has(threshold.action_id)) return true;
+          return typeof threshold.action_name === "string" && threshold.action_name.toLowerCase() === ACTION_NAMES.PACKAGING.toLowerCase();
+        });
+        const thresholdDayOutput = packagingThresholds.reduce(
+          (sum, threshold) => sum + (Number(threshold.total_day_output) || 0),
+          0
+        );
+        const thresholdPPH = packagingThresholds.reduce(
+          (sum, threshold) => sum + (Number(threshold.pph_threshold) || 0),
+          0
+        );
+        const { data: existingLineThreshold, error: existingLineThresholdError } = await supabase.from("line_thresholds").select("factory_id, product_code, sku_id").eq("line_id", lineId).eq("date", thresholdDateForShift).eq("shift_id", shift.shiftId).maybeSingle();
+        if (existingLineThresholdError) {
+          console.warn(
+            `[ShiftsView] Failed to read existing line threshold for line ${lineId}, shift ${shift.shiftId}: ${existingLineThresholdError.message}`
+          );
+        }
+        const factoryId = existingLineThreshold?.factory_id || lineFactoryId;
+        if (factoryId) {
+          const lineThresholdPayload = {
+            factory_id: factoryId,
+            line_id: lineId,
+            date: thresholdDateForShift,
+            shift_id: shift.shiftId,
+            product_code: existingLineThreshold?.product_code || "",
+            threshold_day_output: thresholdDayOutput,
+            threshold_pph: thresholdPPH
+          };
+          if (existingLineThreshold?.sku_id) {
+            lineThresholdPayload.sku_id = existingLineThreshold.sku_id;
+          }
+          const { error: lineThresholdUpsertError } = await supabase.from("line_thresholds").upsert(lineThresholdPayload, { onConflict: "factory_id,line_id,date,shift_id" });
+          if (lineThresholdUpsertError) {
+            throw new Error(
+              `Failed to update line thresholds for line ${lineId}, shift ${shift.shiftId}: ${lineThresholdUpsertError.message}`
+            );
+          }
+        } else {
+          console.warn(
+            `[ShiftsView] Missing factory_id while updating line thresholds for line ${lineId}, shift ${shift.shiftId}`
+          );
+        }
+        recalculatedCount += recalculatedThresholds.length;
+      }
+      return recalculatedCount;
+    },
+    [getOperationalDateForLine, supabase]
+  );
   const handleSaveShifts = React26.useCallback(async (lineId) => {
+    const userId = "6bf6f271-1e55-4a95-9b89-1c3820b58739";
     setLineConfigs((prev) => prev.map(
       (config) => config.id === lineId ? { ...config, isSaving: true, saveSuccess: false } : config
     ));
+    setSaveStatusMessages((prev) => ({ ...prev, [lineId]: null }));
     try {
       const lineConfig = lineConfigs.find((config) => config.id === lineId);
       if (!lineConfig) {
         throw new Error("Line configuration not found");
       }
+      const { data: existingRows, error: existingRowsError } = await supabase.from("line_operating_hours").select("shift_id, start_time, end_time, breaks").eq("line_id", lineId);
+      if (existingRowsError) {
+        throw new Error(`Failed to read existing shift timings: ${existingRowsError.message}`);
+      }
+      const previousShiftHours = (existingRows || []).reduce(
+        (acc, row) => {
+          acc[row.shift_id] = calculateShiftHours(
+            row.start_time,
+            row.end_time,
+            parseBreaksFromDB(row.breaks)
+          );
+          return acc;
+        },
+        {}
+      );
+      const changedShiftCount = (lineConfig.shifts || []).reduce((count, shift) => {
+        const oldShiftHours = previousShiftHours[shift.shiftId];
+        if (oldShiftHours === void 0) return count;
+        const newShiftHours = calculateShiftHours(shift.startTime, shift.endTime, shift.breaks || []);
+        if (!Number.isFinite(newShiftHours)) return count;
+        return Math.abs(newShiftHours - oldShiftHours) > SHIFT_HOURS_EPSILON ? count + 1 : count;
+      }, 0);
       const allSavedRows = [];
       for (const shift of lineConfig.shifts || []) {
         const shiftData = {
@@ -61425,23 +61810,65 @@ var ShiftsView = ({
       if (allSavedRows.length > 0) {
         shiftConfigStore.setFromOperatingHoursRows(lineId, allSavedRows, shiftConfigStore.get(lineId));
       }
+      let recalculatedTargetsCount = 0;
+      try {
+        recalculatedTargetsCount = await recalculateTargetsForShiftHourChanges({
+          lineId,
+          lineConfig,
+          previousShiftHours,
+          updatedBy: userId
+        });
+      } catch (recalcError) {
+        console.error("[ShiftsView] Shift timings were saved but target recalculation failed:", recalcError);
+        showToast("error", "Shift timings saved, but target recalculation failed. Please review targets.");
+        setSaveStatusMessages((prev) => ({
+          ...prev,
+          [lineId]: {
+            message: "Shift timings saved, but target recalculation failed. Please review targets.",
+            tone: "error"
+          }
+        }));
+      }
       setLineConfigs((prev) => prev.map(
         (config) => config.id === lineId ? { ...config, isSaving: false, saveSuccess: true } : config
       ));
-      showToast("success", "Shift configurations saved successfully");
+      let successMessage = "Shift configurations saved successfully.";
+      if (changedShiftCount > 0 && recalculatedTargetsCount > 0) {
+        successMessage = `Shift configurations saved. Targets updated successfully for ${recalculatedTargetsCount} workspace${recalculatedTargetsCount === 1 ? "" : "s"}.`;
+      } else if (changedShiftCount > 0) {
+        successMessage = "Shift configurations saved. Target recalculation completed successfully.";
+      }
+      showToast("success", successMessage);
+      setSaveStatusMessages((prev) => ({
+        ...prev,
+        [lineId]: {
+          message: successMessage,
+          tone: "success"
+        }
+      }));
       setTimeout(() => {
         setLineConfigs((prev) => prev.map(
           (config) => config.id === lineId ? { ...config, saveSuccess: false } : config
         ));
       }, 3e3);
+      setTimeout(() => {
+        setSaveStatusMessages((prev) => ({ ...prev, [lineId]: null }));
+      }, 7e3);
     } catch (error2) {
       console.error("Error saving shift configurations:", error2);
       showToast("error", "Failed to save shift configurations");
+      setSaveStatusMessages((prev) => ({
+        ...prev,
+        [lineId]: {
+          message: "Failed to save shift configurations",
+          tone: "error"
+        }
+      }));
       setLineConfigs((prev) => prev.map(
         (config) => config.id === lineId ? { ...config, isSaving: false, saveSuccess: false } : config
       ));
     }
-  }, [lineConfigs, supabase, showToast]);
+  }, [lineConfigs, recalculateTargetsForShiftHourChanges, supabase, showToast]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
@@ -61496,7 +61923,14 @@ var ShiftsView = ({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               config.isSaving && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-blue-600", children: "Saving..." }),
-              config.saveSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-green-600", children: "Saved!" })
+              config.saveSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-green-600", children: "Saved!" }),
+              saveStatusMessages[config.id]?.message && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `text-xs sm:text-sm font-medium ${saveStatusMessages[config.id]?.tone === "error" ? "text-red-600" : saveStatusMessages[config.id]?.tone === "info" ? "text-blue-600" : "text-green-600"}`,
+                  children: saveStatusMessages[config.id]?.message
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -61553,20 +61987,6 @@ var ShiftsView = ({
 var AuthenticatedShiftsView = withAuth(React26__namespace.default.memo(ShiftsView));
 var ShiftsView_default = ShiftsView;
 
-// src/lib/constants/actions.ts
-var ACTION_NAMES = {
-  /** Assembly operations */
-  ASSEMBLY: "Assembly",
-  /** Packaging operations */
-  PACKAGING: "Packaging",
-  /** Inspection operations */
-  INSPECTION: "Inspection",
-  /** Testing operations */
-  TESTING: "Testing",
-  /** Quality control operations */
-  QUALITY_CONTROL: "Quality Control"
-};
-
 // src/views/TargetsView.utils.ts
 var calculatePPH = (cycleTime, breaks = [], shiftHours = 0) => {
   if (cycleTime === "" || cycleTime === 0) return "";
@@ -65983,7 +66403,7 @@ var TeamManagementView = ({
     optifye: 0
   });
   const [isAddUserDialogOpen, setIsAddUserDialogOpen] = React26.useState(false);
-  const canAddUsers = user?.role_level === "owner" || user?.role_level === "it" || user?.role_level === "optifye";
+  const canAddUsers = user?.role_level === "owner" || user?.role_level === "it" || user?.role_level === "plant_head" || user?.role_level === "optifye";
   const canViewUsageStats = user?.role_level === "owner" || user?.role_level === "it" || user?.role_level === "optifye";
   const companyIdForUsage = entityConfig?.companyId || user?.properties?.company_id;
   const usageDateRange = React26.useMemo(() => {