Add accessible notifications and fix student updates

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks",
+    "utils": "@/lib/utils"
+  },
+  "iconLibrary": "lucide"
+}

components/TelecallerRemarksModal.tsx

@@ -16,9 +16,8 @@ import { AgGridReact } from "ag-grid-react";
 import { useState, useEffect, useCallback } from "react";
 import { smartComparator } from "@/utils/grid-comparators";
 import ConfirmationModal from "./ConfirmationModal";
-import GlobalSnackbar from "./GlobalSnackbar";
+import { useNotification } from "@/components/notifications/NotificationProvider";
 import { dateTimeFormatter, parseDateTimeFromDB } from "@/utils/date-normalizers";
-import type { AlertColor } from "@mui/material/Alert";
 
 type Remark = {
   id?: string | number;
@@ -31,16 +30,14 @@ type Remark = {
 type SessionUser = { email?: string };
 
 const TelecallerRemarksModal = ({ open, onClose, student }) => {
+  const notify = useNotification();
   const [remarks, setRemarks] = useState<Remark[]>([]);
   const [newRemark, setNewRemark] = useState("");
   const [loading, setLoading] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [currentUser, setCurrentUser] = useState<SessionUser | null>(null);
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   const [remarkToDelete, setRemarkToDelete] = useState<Remark | null>(null);
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState("");
-  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>("success");
 
   // Custom cell renderer for actions column
   const ActionsCellRenderer = (props: ICellRendererParams<Remark>) => {
@@ -171,20 +168,14 @@ const TelecallerRemarksModal = ({ open, onClose, student }) => {
         await fetchRemarks(); // Refresh the remarks list
         setRemarkToDelete(null);
         // Show success toast
-        setSnackbarMessage("Remark deleted successfully!");
-        setSnackbarSeverity("success");
-        setSnackbarOpen(true);
+        notify("Remark deleted successfully!", "success");
       } else {
         console.error("Failed to delete remark");
-        setSnackbarMessage("Failed to delete remark. Please try again.");
-        setSnackbarSeverity("error");
-        setSnackbarOpen(true);
+        notify("Failed to delete remark. Please try again.", "error");
       }
     } catch (error) {
       console.error("Error deleting remark:", error);
-      setSnackbarMessage("Failed to delete remark. Please try again.");
-      setSnackbarSeverity("error");
-      setSnackbarOpen(true);
+      notify("Failed to delete remark. Please try again.", "error");
     } finally {
       setLoading(false);
     }
@@ -210,24 +201,18 @@ const TelecallerRemarksModal = ({ open, onClose, student }) => {
 
       if (response.ok) {
         // Show success message
-        setSnackbarMessage("Remark updated successfully!");
-        setSnackbarSeverity("success");
-        setSnackbarOpen(true);
+        notify("Remark updated successfully!", "success");
         // Refresh the grid to get the updated timestamp
         await fetchRemarks();
       } else {
         console.error("Failed to update remark");
-        setSnackbarMessage("Failed to update remark. Please try again.");
-        setSnackbarSeverity("error");
-        setSnackbarOpen(true);
+        notify("Failed to update remark. Please try again.", "error");
         // Revert the change
         params.node.setDataValue(params.colDef.field, params.oldValue);
       }
     } catch (error) {
       console.error("Error updating remark:", error);
-      setSnackbarMessage("Failed to update remark. Please try again.");
-      setSnackbarSeverity("error");
-      setSnackbarOpen(true);
+      notify("Failed to update remark. Please try again.", "error");
       // Revert the change
       params.node.setDataValue(params.colDef.field, params.oldValue);
     }
@@ -270,16 +255,13 @@ const TelecallerRemarksModal = ({ open, onClose, student }) => {
 
         console.error("Failed to fetch remarks:", errorMessage);
 
-        // Show user-friendly error message based on status code
-        if (response.status === 401) {
-          setSnackbarMessage("You are not authorized to view remarks. Please log in again.");
-        } else if (response.status === 400) {
-          setSnackbarMessage("Invalid request. Please refresh the page and try again.");
-        } else {
-          setSnackbarMessage("Failed to fetch remarks. Please try again.");
-        }
-        setSnackbarSeverity("error");
-        setSnackbarOpen(true);
+        const userMessage =
+          response.status === 401
+            ? "You are not authorized to view remarks. Please log in again."
+            : response.status === 400
+              ? "Invalid request. Please refresh the page and try again."
+              : "Failed to fetch remarks. Please try again.";
+        notify(userMessage, "error");
         setRemarks([]); // Set empty array on error
         return;
       }
@@ -296,18 +278,17 @@ const TelecallerRemarksModal = ({ open, onClose, student }) => {
       setRemarks(Array.isArray(data) ? data : []);
     } catch (error) {
       console.error("Error fetching remarks:", error);
-      setSnackbarMessage(
+      notify(
         error.message?.includes("JSON")
           ? "Invalid response from server. Please try again."
-          : "Error loading remarks. Please try again."
+          : "Error loading remarks. Please try again.",
+        "error"
       );
-      setSnackbarSeverity("error");
-      setSnackbarOpen(true);
       setRemarks([]); // Set empty array on error
     } finally {
       setLoading(false);
     }
-  }, [student?.id]);
+  }, [student?.id, notify]);
 
   // Submit new remark
   const handleSubmitRemark = async () => {
@@ -425,14 +406,6 @@ const TelecallerRemarksModal = ({ open, onClose, student }) => {
         message={`Are you sure you want to delete this remark? This action cannot be undone.`}
         confirmColor="error"
       />
-
-      <GlobalSnackbar
-        open={snackbarOpen}
-        message={snackbarMessage}
-        setOpen={setSnackbarOpen}
-        severity={snackbarSeverity}
-        duration={3000}
-      />
     </Dialog>
   );
 };

components/batches/RemarksModal.tsx

@@ -16,8 +16,7 @@ import { AgGridReact } from "ag-grid-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { smartComparator } from "@/utils/grid-comparators";
 import ConfirmationModal from "../ConfirmationModal";
-import GlobalSnackbar from "../GlobalSnackbar";
-import type { AlertColor } from "@mui/material/Alert";
+import { useNotification } from "@/components/notifications/NotificationProvider";
 
 type Remark = {
   id?: string | number;
@@ -28,16 +27,14 @@ type Remark = {
 type SessionUser = { id?: string | number };
 
 const RemarksModal = ({ open, onClose, student, batchId, onDataChange }) => {
+  const notify = useNotification();
   const [remarks, setRemarks] = useState<Remark[]>([]);
   const [newRemark, setNewRemark] = useState("");
   const [loading, setLoading] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [currentUser, setCurrentUser] = useState<SessionUser | null>(null);
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   const [remarkToDelete, setRemarkToDelete] = useState<Remark | null>(null);
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState("");
-  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>("success");
   const [dataChanged, setDataChanged] = useState(false);
 
   // Custom cell renderer for actions column
@@ -141,20 +138,14 @@ const RemarksModal = ({ open, onClose, student, batchId, onDataChange }) => {
         setRemarkToDelete(null);
         setDataChanged(true); // Mark that data has changed
         // Show success toast
-        setSnackbarMessage("Remark deleted successfully!");
-        setSnackbarSeverity("success");
-        setSnackbarOpen(true);
+        notify("Remark deleted successfully!", "success");
       } else {
         console.error("Failed to delete remark");
-        setSnackbarMessage("Failed to delete remark. Please try again.");
-        setSnackbarSeverity("error");
-        setSnackbarOpen(true);
+        notify("Failed to delete remark. Please try again.", "error");
       }
     } catch (error) {
       console.error("Error deleting remark:", error);
-      setSnackbarMessage("Failed to delete remark. Please try again.");
-      setSnackbarSeverity("error");
-      setSnackbarOpen(true);
+      notify("Failed to delete remark. Please try again.", "error");
     } finally {
       setLoading(false);
     }
@@ -181,22 +172,16 @@ const RemarksModal = ({ open, onClose, student, batchId, onDataChange }) => {
       if (response.ok) {
         setDataChanged(true); // Mark that data has changed
         // Show success message
-        setSnackbarMessage("Remark updated successfully!");
-        setSnackbarSeverity("success");
-        setSnackbarOpen(true);
+        notify("Remark updated successfully!", "success");
       } else {
         console.error("Failed to update remark");
-        setSnackbarMessage("Failed to update remark. Please try again.");
-        setSnackbarSeverity("error");
-        setSnackbarOpen(true);
+        notify("Failed to update remark. Please try again.", "error");
         // Revert the change
         params.node.setDataValue(params.colDef.field, params.oldValue);
       }
     } catch (error) {
       console.error("Error updating remark:", error);
-      setSnackbarMessage("Failed to update remark. Please try again.");
-      setSnackbarSeverity("error");
-      setSnackbarOpen(true);
+      notify("Failed to update remark. Please try again.", "error");
       // Revert the change
       params.node.setDataValue(params.colDef.field, params.oldValue);
     } finally {
@@ -216,19 +201,15 @@ const RemarksModal = ({ open, onClose, student, batchId, onDataChange }) => {
         setRemarks(data);
       } else {
         console.error("Failed to fetch remarks");
-        setSnackbarMessage("Failed to fetch remarks.");
-        setSnackbarSeverity("error");
-        setSnackbarOpen(true);
+        notify("Failed to fetch remarks.", "error");
       }
     } catch (error) {
       console.error("Error fetching remarks:", error);
-      setSnackbarMessage("Error loading remarks.");
-      setSnackbarSeverity("error");
-      setSnackbarOpen(true);
+      notify("Error loading remarks.", "error");
     } finally {
       setLoading(false);
     }
-  }, [student?.id, batchId]);
+  }, [student?.id, batchId, notify]);
 
   // Submit new remark
   const handleSubmitRemark = async () => {
@@ -252,20 +233,14 @@ const RemarksModal = ({ open, onClose, student, batchId, onDataChange }) => {
         setNewRemark(""); // Clear the input
         await fetchRemarks(); // Refresh the remarks list
         setDataChanged(true); // Mark that data has changed
-        setSnackbarMessage("Remark added successfully!");
-        setSnackbarSeverity("success");
-        setSnackbarOpen(true);
+        notify("Remark added successfully!", "success");
       } else {
         console.error("Failed to submit remark");
-        setSnackbarMessage("Failed to add remark. Please try again.");
-        setSnackbarSeverity("error");
-        setSnackbarOpen(true);
+        notify("Failed to add remark. Please try again.", "error");
       }
     } catch (error) {
       console.error("Error submitting remark:", error);
-      setSnackbarMessage("Failed to add remark. Please try again.");
-      setSnackbarSeverity("error");
-      setSnackbarOpen(true);
+      notify("Failed to add remark. Please try again.", "error");
     } finally {
       setSubmitting(false);
     }
@@ -364,14 +339,6 @@ const RemarksModal = ({ open, onClose, student, batchId, onDataChange }) => {
         message={`Are you sure you want to delete this remark? This action cannot be undone.`}
         confirmColor="error"
       />
-
-      <GlobalSnackbar
-        open={snackbarOpen}
-        message={snackbarMessage}
-        setOpen={setSnackbarOpen}
-        severity={snackbarSeverity}
-        duration={3000}
-      />
     </Dialog>
   );
 };