feat(vertex/devices): migrate device management toasts to InfoBanner …

src/vertex/components/features/devices/add-maintenance-log-modal.tsx

@@ -9,7 +9,8 @@ import { useUserContext } from "@/core/hooks/useUserContext";
 import { MultiSelectCombobox } from "@/components/ui/multi-select";
 import { Switch } from "@/components/ui/switch";
 import ReusableDialog from "@/components/shared/dialog/ReusableDialog";
-import ReusableToast from "@/components/shared/toast/ReusableToast";
+import { useBanner } from "@/context/banner-context";
+import { getApiErrorMessage } from "@/core/utils/getApiErrorMessage";
 
 interface AddMaintenanceLogModalProps {
   open: boolean;
@@ -51,6 +52,7 @@ const AddMaintenanceLogModal: React.FC<AddMaintenanceLogModalProps> = ({ open, o
   const [maintenanceType, setMaintenanceType] = useState<"preventive" | "corrective">("preventive");
 
   const { userDetails } = useUserContext();
+  const { showBanner } = useBanner();
   const addMaintenanceLog = useAddMaintenanceLog();
 
   // Reset form when modal opens/closes
@@ -65,7 +67,7 @@ const AddMaintenanceLogModal: React.FC<AddMaintenanceLogModalProps> = ({ open, o
 
   const handleSubmit = async () => {
     if (!date || selectedTags.length === 0) {
-      ReusableToast({message: "Please fill all fields", type:"ERROR"})
+      showBanner({ severity: 'error', message: 'Please fill all required fields', scoped: true });
       return;
     }
 
@@ -81,8 +83,13 @@ const AddMaintenanceLogModal: React.FC<AddMaintenanceLogModalProps> = ({ open, o
       user_id: userDetails?._id || "",
     };
 
-    await addMaintenanceLog.mutateAsync({ deviceName, logData });
-    onOpenChange(false);
+    try {
+      await addMaintenanceLog.mutateAsync({ deviceName, logData });
+      showBanner({ severity: 'success', message: `Maintenance log has been added for ${deviceName}.`, scoped: false });
+      onOpenChange(false);
+    } catch (error) {
+      showBanner({ severity: 'error', message: `Failed to Add Maintenance Log: ${getApiErrorMessage(error)}`, scoped: true });
+    }
   };
 
   return (

src/vertex/components/features/devices/create-device-modal.tsx

@@ -10,6 +10,7 @@ import ReusableSelectInput from "@/components/shared/select/ReusableSelectInput"
 import { MultiSelectCombobox } from "@/components/ui/multi-select";
 import { DEFAULT_DEVICE_TAGS } from "@/core/constants/devices";
 import { Label } from "@/components/ui/label";
+import { useBanner } from "@/context/banner-context";
 
 interface CreateDeviceModalProps {
   open: boolean;
@@ -30,6 +31,7 @@ const CreateDeviceModal: React.FC<CreateDeviceModalProps> = ({
   });
 
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const { showBanner } = useBanner();
   const activeNetwork = useAppSelector((state) => state.user.activeNetwork);
   const createDevice = useCreateDevice();
 
@@ -56,7 +58,7 @@ const CreateDeviceModal: React.FC<CreateDeviceModalProps> = ({
     const effectiveNetworkName = networkName || activeNetwork?.net_name;
 
     if (!effectiveNetworkName) {
-      setErrors({ general: "No active Sensor Manufacturer found" });
+      showBanner({ severity: 'error', message: 'No active Sensor Manufacturer found', scoped: true });
       return;
     }
 
@@ -136,11 +138,6 @@ const CreateDeviceModal: React.FC<CreateDeviceModalProps> = ({
       }}
     >
       <div className="space-y-4">
-        {errors.general && (
-          <div className="text-sm text-red-600 bg-red-50 p-2 rounded">
-            {errors.general}
-          </div>
-        )}
         <ReusableInputField
           label="Device Name"
           id="long_name"

src/vertex/components/features/devices/deploy-device-component.tsx

@@ -26,7 +26,8 @@ import { useUserContext } from "@/core/hooks/useUserContext";
 import { useDeviceDetails, useDevices, useDeployDevice } from "@/core/hooks/useDevices";
 import { ComboBox } from "@/components/ui/combobox";
 import { Device, type DevicePreviousSite } from "@/app/types/devices";
-import ReusableToast from "@/components/shared/toast/ReusableToast";
+import { useBanner } from "@/context/banner-context";
+import { getApiErrorMessage } from "@/core/utils/getApiErrorMessage";
 import LocationAutocomplete from "@/components/features/location-autocomplete/LocationAutocomplete";
 import { useNetworks } from "@/core/hooks/useNetworks";
 const MiniMap = React.lazy(() => import("../mini-map/mini-map"));
@@ -427,6 +428,7 @@ const DeployDeviceComponent = ({
   onDeploymentError
 }: DeployDeviceComponentProps) => {
   const queryClient = useQueryClient();
+  const { showBanner } = useBanner();
   const { userScope, userDetails } = useUserContext();
   const { devices: allDevices } = useDevices({ enabled: userScope !== 'personal' });
   const [currentStep, setCurrentStep] = React.useState<number>(0);
@@ -608,10 +610,7 @@ const DeployDeviceComponent = ({
 
   const handleNext = (): void => {
     if (currentStep === 0 && !validateDeviceDetails()) {
-      ReusableToast({
-        type: "ERROR",
-        message: "Incomplete Details: Please fill in all required device details.",
-      });
+      showBanner({ severity: 'error', message: 'Incomplete Details: Please fill in all required device details.', scoped: true });
       return;
     }
     setCurrentStep((prev) => Math.min(prev + 1, siteSource === 'new' ? 2 : 1));
@@ -642,18 +641,12 @@ const DeployDeviceComponent = ({
 
   const handleDeploy = (): void => {
     if (!userDetails?._id) {
-      ReusableToast({
-        type: "ERROR",
-        message: "User information not available. Please reload the page.",
-      });
+      showBanner({ severity: 'error', message: 'User information not available. Please reload the page.', scoped: true });
       return;
     }
 
     if (siteSource === 'previous' && !deviceData.site_id) {
-      ReusableToast({
-        type: "ERROR",
-        message: "Select a previous site to continue.",
-      });
+      showBanner({ severity: 'error', message: 'Select a previous site to continue.', scoped: true });
       return;
     }
 
@@ -686,7 +679,8 @@ const DeployDeviceComponent = ({
             queryClient.invalidateQueries({ queryKey: ["device-details", prefilledDevice._id] });
           }
 
-          // On successful deployment, reset form fields
+          showBanner({ severity: 'success', message: `${deviceData.deviceName} has been deployed.`, scoped: false });
+
           setDeviceData({
             deviceName: "",
             deployment_date: undefined,
@@ -709,6 +703,22 @@ const DeployDeviceComponent = ({
           if (onClose) onClose();
         },
         onError: (error) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const errorData = (error as any)?.response?.data;
+          let errorMessage = getApiErrorMessage(error);
+
+          if (errorData?.failed_deployments?.length > 0) {
+            const failedMessages = errorData.failed_deployments
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              .map((deployment: any) => deployment.error?.message)
+              .filter(Boolean);
+
+            if (failedMessages.length > 0) {
+              errorMessage = failedMessages.join(', ');
+            }
+          }
+
+          showBanner({ severity: 'error', message: `Deployment Failed: ${errorMessage}`, scoped: true });
           onDeploymentError?.(error instanceof Error ? error : new Error("Unknown error"));
         },
       }

src/vertex/components/features/devices/device-assignment-modal.tsx

@@ -13,6 +13,8 @@ import { Button } from "@/components/ui/button";
 import { useAppSelector } from "@/core/redux/hooks";
 import { Device } from "@/app/types/devices";
 import { useAssignDeviceToOrganization } from "@/core/hooks/useDevices";
+import { useBanner } from "@/context/banner-context";
+import { getApiErrorMessage } from "@/core/utils/getApiErrorMessage";
 import { Label } from "@/components/ui/label";
 import { ComboBox } from "@/components/ui/combobox";
 import { useRouter } from "next/navigation";
@@ -45,16 +47,22 @@ const DeviceAssignmentModal: React.FC<DeviceAssignmentModalProps> = ({
   const [selectedDevice, setSelectedDevice] = useState("");
 
   const assignDevice = useAssignDeviceToOrganization();
+  const { showBanner } = useBanner();
 
   const handleAssign = async () => {
     if (!selectedOrganization || !selectedDevice || !userDetails?._id) return;
 
-    await assignDevice.mutateAsync({
-      device_name: selectedDevice,
-      organization_id: selectedOrganization,
-      user_id: userDetails._id,
-    });
-    onSuccess();
+    try {
+      const data = await assignDevice.mutateAsync({
+        device_name: selectedDevice,
+        organization_id: selectedOrganization,
+        user_id: userDetails._id,
+      });
+      showBanner({ severity: 'success', message: `${data.device.name} has been assigned to the organization.`, scoped: false });
+      onSuccess();
+    } catch (error) {
+      showBanner({ severity: 'error', message: `Assignment Failed: ${getApiErrorMessage(error)}`, scoped: false });
+    }
   };
 
   const handleClose = () => {

src/vertex/components/features/devices/device-details-modal.tsx

@@ -14,7 +14,8 @@ import ReusableButton from "@/components/shared/button/ReusableButton";
 import ReusableSelectInput from "@/components/shared/select/ReusableSelectInput";
 import ReusableInputField from "@/components/shared/inputfield/ReusableInputField";
 import { AqEdit01 as AqEdit, AqKey01 } from "@airqo/icons-react";
-import ReusableToast from "@/components/shared/toast/ReusableToast";
+import { useBanner } from "@/context/banner-context";
+import { getApiErrorMessage } from "@/core/utils/getApiErrorMessage";
 import logger from "@/lib/logger";
 
 interface DeviceDetailsModalProps {
@@ -60,6 +61,7 @@ const DeviceDetailsModal: React.FC<DeviceDetailsModalProps> = ({ open, device, o
   const updateLocal = useUpdateDeviceLocal();
   const updateGlobal = useUpdateDeviceGlobal();
   const decryptKeys = useDecryptDeviceKeys();
+  const { showBanner } = useBanner();
 
   const form = useForm<DeviceUpdateFormData>({
     resolver: zodResolver(deviceUpdateSchema),
@@ -132,7 +134,7 @@ const DeviceDetailsModal: React.FC<DeviceDetailsModalProps> = ({ open, device, o
 
   const onSubmitLocal = async (data: DeviceUpdateFormData) => {
     if (!device?._id) {
-      ReusableToast({ message: "Cannot update device: missing device ID", type: "WARNING" });
+      showBanner({ severity: 'warning', message: "Cannot update device: missing device ID", scoped: true });
       return;
     }
 
@@ -168,16 +170,20 @@ const DeviceDetailsModal: React.FC<DeviceDetailsModalProps> = ({ open, device, o
       { deviceId: device._id, deviceData: processedData },
       {
         onSuccess: () => {
+          showBanner({ severity: 'success', message: 'Device information has been updated locally.', scoped: true });
           setIsEditMode(false);
           form.reset(data);
         },
+        onError: (error) => {
+          showBanner({ severity: 'error', message: `Update Failed: ${getApiErrorMessage(error)}`, scoped: true });
+        },
       }
     );
   };
 
   const onSubmitGlobal = async (data: DeviceUpdateFormData) => {
     if (!device?._id) {
-      ReusableToast({ message: "Cannot update device: missing device ID", type: "WARNING" });
+      showBanner({ severity: 'warning', message: "Cannot update device: missing device ID", scoped: true });
       return;
     }
 
@@ -213,9 +219,13 @@ const DeviceDetailsModal: React.FC<DeviceDetailsModalProps> = ({ open, device, o
       { deviceId: device._id, deviceData: processedData },
       {
         onSuccess: () => {
+          showBanner({ severity: 'success', message: 'Device information has been updated globally.', scoped: true });
           setIsEditMode(false);
           form.reset(data);
         },
+        onError: (error) => {
+          showBanner({ severity: 'error', message: `Sync Failed: ${getApiErrorMessage(error)}`, scoped: true });
+        },
       }
     );
   };
@@ -224,9 +234,9 @@ const DeviceDetailsModal: React.FC<DeviceDetailsModalProps> = ({ open, device, o
     if (valueToCopy !== undefined && valueToCopy !== null) {
       try {
         await navigator.clipboard?.writeText(String(valueToCopy))
-        ReusableToast({ message: "Decrypted Key Copied", type: "SUCCESS" })
+        showBanner({ severity: 'success', message: "Decrypted Key Copied", scoped: true });
       } catch (err) {
-        ReusableToast({ message: `Failed to copy key: ${String(err)}`, type: "ERROR" })
+        showBanner({ severity: 'error', message: `Failed to copy key: ${String(err)}`, scoped: true });
       }
     }
   }
@@ -236,7 +246,7 @@ const DeviceDetailsModal: React.FC<DeviceDetailsModalProps> = ({ open, device, o
     const deviceNumber = device.device_number;
 
     if (!encryptedKey || !deviceNumber) {
-      ReusableToast({ message: `No ${keyType} or device number available for decryption.`, type: "WARNING" });
+      showBanner({ severity: 'warning', message: `No ${keyType} or device number available for decryption.`, scoped: true });
       return;
     }
 
@@ -251,10 +261,11 @@ const DeviceDetailsModal: React.FC<DeviceDetailsModalProps> = ({ open, device, o
       if (response.success && response.decrypted_keys && response.decrypted_keys.length > 0) {
         handleCopy(response.decrypted_keys[0].decrypted_key);
       } else {
-        ReusableToast({ message: "Decryption failed or no key returned.", type: "ERROR" });
+        showBanner({ severity: 'error', message: "Decryption failed or no key returned.", scoped: true });
       }
-    } catch {
-      logger.info("Decryption failed"); // simple log
+    } catch (error) {
+      showBanner({ severity: 'error', message: `Decryption Failed: ${getApiErrorMessage(error)}`, scoped: true });
+      logger.info("Decryption failed");
     }
   };
 

src/vertex/components/features/devices/import-device-modal.tsx

@@ -13,6 +13,7 @@ import { useGroupCohorts } from "@/core/hooks/useCohorts";
 import { useAppSelector } from "@/core/redux/hooks";
 import { usePathname } from "next/navigation";
 import logger from "@/lib/logger";
+import { useBanner } from "@/context/banner-context";
 import { NetworkRequestDialog } from "../networks/network-request-dialog";
 import { MultiSelectCombobox } from "@/components/ui/multi-select";
 import { DEFAULT_DEVICE_TAGS } from "@/core/constants/devices";
@@ -45,6 +46,7 @@ const ImportDeviceModal: React.FC<ImportDeviceModalProps> = ({
   const [showMore, setShowMore] = useState(false);
   const [isRequestDialogOpen, setIsRequestDialogOpen] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const { showBanner } = useBanner();
   const importDevice = useImportDevice();
   const { networks, isLoading: isLoadingNetworks } = useNetworks();
 
@@ -108,6 +110,7 @@ const ImportDeviceModal: React.FC<ImportDeviceModalProps> = ({
 
     if (!userId) {
       logger.warn("User ID is missing");
+      showBanner({ severity: 'error', message: 'Unable to identify user. Please reload and try again.', scoped: true });
       return;
     }
 
@@ -180,11 +183,6 @@ const ImportDeviceModal: React.FC<ImportDeviceModalProps> = ({
       }}
     >
       <div className="space-y-2">
-        {errors.general && (
-          <div className="text-sm text-red-600 bg-red-50 p-2 rounded">
-            {errors.general}
-          </div>
-        )}
 
         <ReusableInputField
           label="Device Name"

src/vertex/components/features/devices/recall-device-dialog.tsx

@@ -5,6 +5,8 @@ import ReusableDialog from "@/components/shared/dialog/ReusableDialog";
 import ReusableSelectInput from "@/components/shared/select/ReusableSelectInput";
 import { useRecallDevice } from "@/core/hooks/useDevices";
 import { useUserContext } from "@/core/hooks/useUserContext";
+import { useBanner } from "@/context/banner-context";
+import { getApiErrorMessage } from "@/core/utils/getApiErrorMessage";
 
 interface RecallDeviceDialogProps {
   open: boolean;
@@ -27,6 +29,7 @@ export default function RecallDeviceDialog({
   const [recallType, setRecallType] = useState<string>("");
   const recallDevice = useRecallDevice();
   const { userDetails } = useUserContext();
+  const { showBanner } = useBanner();
 
   const handleRecall = async () => {
     if (!recallType || !userDetails?._id) {
@@ -47,12 +50,11 @@ export default function RecallDeviceDialog({
         },
       });
 
-      // Reset form and close dialog
+      showBanner({ severity: 'success', message: `${deviceDisplayName || deviceName} has been recalled.`, scoped: true });
       setRecallType("");
       onOpenChange(false);
     } catch (error) {
-      // Error handling is done in the hook
-      console.error("Recall failed:", error);
+      showBanner({ severity: 'error', message: `Recall Failed: ${getApiErrorMessage(error)}`, scoped: true });
     }
   };