feat: add toast notifications for API responses

package.json

@@ -20,6 +20,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.72.1",
+    "react-hot-toast": "^2.6.0",
     "react-router-dom": "^7.14.1",
     "zod": "^4.3.6",
     "zustand": "^5.0.12"

src/App.tsx

@@ -1,17 +1,19 @@
-import { useIsFetching, useIsMutating } from '@tanstack/react-query'
+// import { useIsFetching, useIsMutating } from '@tanstack/react-query'
 import { RouterProvider } from 'react-router-dom'
 import { useEffect } from 'react'
-import { Loader } from './shared/components/Loader'
+// import { Loader } from './shared/components/Loader'
 import { router } from './router'
 import { useAuthStore } from './store/authStore'
 import { getMe, refreshToken } from './features/auth/api/auth.api'
+import { Toaster } from 'react-hot-toast'
 
 const App = () => {
-    const isFetching = useIsFetching()
-    const isMutating = useIsMutating()
+
+    // const isFetching = useIsFetching()
+    // const isMutating = useIsMutating()
     const { setAuth, setAccessToken, accessToken } = useAuthStore()
 
-    const isLoading = isFetching > 0 || isMutating > 0
+    // const isLoading = isFetching > 0 || isMutating > 0
 
     useEffect(() => {
         const initAuth = async () => {
@@ -69,7 +71,8 @@ const App = () => {
 
     return (
         <>
-            {isLoading && <Loader />}
+            <Toaster position="top-right" />
+            {/* {isLoading && <Loader />} */}
             <RouterProvider router={router} />
         </>
     )

src/features/cases/api/case-api.ts

@@ -22,13 +22,12 @@ const withTotalPages = (
 
 // ── Get All Cases (paginated) ─────────────────────────────────────
 export const getCases = async (
-    organizationId: string,
     page: number = 1,
     pageSize: number = 10
 ): Promise<ApiResponse<PaginatedResponse<CaseDto>>> => {
     const response = await AxiosInstance.get<ApiResponse<PaginatedResponse<CaseDto>>>(
         '/Case/getAll',
-        { params: { organizationId, page, pageSize } }
+        { params: { page, pageSize } }
     );
     return withTotalPages(response.data);
 };

src/features/cases/components/CaseDetailsModal.tsx

@@ -1,8 +1,8 @@
 import '../styles/case-details-modal.css';
-import type { GetCaseDto } from '../types/case.types';
+import type { CaseDto } from '../types/case.types';
 
 interface Props {
-    caseItem: GetCaseDto;
+    caseItem: CaseDto;
     onEdit: () => void;
     onClose: () => void;
 }
@@ -86,10 +86,10 @@ export default function CaseDetailsModal({ caseItem, onEdit, onClose }: Props) {
                         <div className="cdm__section-title">Petitioners</div>
                         {caseItem.petitioners?.length > 0 ? (
                             <div className="cdm__tags">
-                                {caseItem.petitioners.map((name) => (
-                                    <span key={name} className="cdm__tag">
+                                {caseItem.petitioners.map(p => (
+                                    <span key={p.name} className="cdm__tag">
                                         <i className="bi bi-person" />
-                                        {name}
+                                        {p.name}
                                     </span>
                                 ))}
                             </div>

src/features/cases/components/case-list/CaseList.tsx

@@ -1,5 +1,4 @@
 import { useState, useCallback } from 'react';
-
 import CasePageHeader from './CasePageHeader';
 import CaseStatsBar from './CaseStatsBar';
 import CaseFilterTabs from './CaseFilterTabs';
@@ -8,7 +7,6 @@ import CaseTable from './CaseTable';
 import CaseDrawer from '../case-drawer/CaseDrawer';
 import CreateCaseModal from '../create-case/CreateCaseModal';
 import CaseDetailsModal from '../CaseDetailsModal';
-
 import { useGetAllCases, useSearchCases, useDeleteCase } from '../../hooks/useCases';
 import { useCaseModal } from '../../hooks/useCaseModal';
 import type { CaseDto, SearchParams } from '../../types/case.types';  // ✅ CaseDto only, no GetCaseDto

src/features/cases/hooks/useCases.ts

@@ -4,25 +4,22 @@ import { createCase, deleteCase, getCases, searchCases } from '../api/case-api';
 import { usePetitioners } from '../../petitioners/hooks/usePetitioners';
 import { useGetDepartments } from '../../departments/hooks/useDepartments';
 import { useGetCourts } from '../../courts/hooks/useCourts';
-import { useAuthStore } from '../../../store/authStore';
+import { toastService } from '../../../lib/toast.service'
+
 
 // ── Query Key Factory ─────────────────────────────────────────────
 export const caseKeys = {
     all: () => ['cases'] as const,
-    list: (orgId: string, page: number, size: number) => ['cases', 'list', orgId, page, size] as const,
+    list: (page: number, size: number) => ['cases', 'list', page, size] as const,
     search: (params: SearchParams) => ['cases', 'search', params] as const,
 };
 
 // ── Cases ─────────────────────────────────────────────────────────
 
 export const useGetAllCases = (page: number = 1, pageSize: number = 10) => {
-    const { user } = useAuthStore();
-    const orgId = user?.organizationId ?? '';
-
     return useQuery({
-        queryKey: caseKeys.list(orgId, page, pageSize),
-        queryFn: () => getCases(orgId, page, pageSize),
-        enabled: !!orgId,
+        queryKey: caseKeys.list(page, pageSize),
+        queryFn: () => getCases(page, pageSize),
     });
 };
 
@@ -37,14 +34,19 @@ export const useSearchCases = (params: SearchParams) => {
 
 export const useCreateCase = () => {
     const qc = useQueryClient();
-    const { user } = useAuthStore();
+    // const { user } = useAuthStore();
 
     return useMutation({
         mutationFn: (data: CreateCaseDto) => createCase({
             ...data,
-            organizationId: user?.organizationId ?? data.organizationId,
         }),
-        onSuccess: () => qc.invalidateQueries({ queryKey: caseKeys.all() }),
+        onSuccess: (response) => {
+            toastService.success(response.message);
+            qc.invalidateQueries({ queryKey: caseKeys.all() });
+        },
+        onError: (error: unknown) => {
+            toastService.error(error);
+        }
     });
 };
 

src/features/documents/hooks/useDocuments.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { documentsApi } from '../api/documents'
 import type { UploadDocumentDto } from '../types'
+import { toastService } from '../../../lib/toast.service'
 
 const DOCUMENT_KEYS = {
     byCase: (caseId: string) => ['documents', 'case', caseId],
@@ -29,28 +30,30 @@ export function useUploadDocument(caseId: string) {
     return useMutation({
         mutationFn: (dto: UploadDocumentDto) => documentsApi.upload(dto),
         onSuccess: (response) => {
-            alert(response?.message);
-
+            toastService.success(response.message);
             queryClient.invalidateQueries({
                 queryKey: DOCUMENT_KEYS.byCase(caseId),
             });
         },
-
-        onError: (error: any) => {
-            alert(error.message);
-        },
-    });
+        onError: (error: unknown) => {
+            toastService.error(error);
+        }
+    })
 }
 
 export function useDeleteDocument(caseId: string) {
     const queryClient = useQueryClient()
 
     return useMutation({
         mutationFn: (id: string) => documentsApi.delete(id),
-        onSuccess: () => {
+        onSuccess: (response) => {
+            toastService.success(response.message);
             queryClient.invalidateQueries({
                 queryKey: DOCUMENT_KEYS.byCase(caseId),
             })
         },
+        onError: (error: unknown) => {
+            toastService.error(error);
+        }
     })
 }

src/features/followup/hooks/useFollowups.ts

@@ -1,8 +1,7 @@
-// hooks/useFollowups.ts
-
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { followupApi } from '../api/followupApi'
 import type { CreateFollowUpDto, UpdateFollowUpDto, FollowUpPageParams } from '../types/followup.types'
+import { toastService } from '../../../lib/toast.service'
 
 export const followupKeys = {
     all: ['followups'] as const,
@@ -30,9 +29,13 @@ export const useCreateFollowUp = () => {
     const qc = useQueryClient()
     return useMutation({
         mutationFn: (data: CreateFollowUpDto) => followupApi.create(data),
-        onSuccess: () => {
+        onSuccess: (response) => {
+            toastService.success(response.message);
             qc.invalidateQueries({ queryKey: followupKeys.all })
         },
+        onError: (error: unknown) => {
+            toastService.error(error);
+        }
     })
 }
 
@@ -50,8 +53,12 @@ export const useDeleteFollowUp = () => {
     const qc = useQueryClient()
     return useMutation({
         mutationFn: (id: string) => followupApi.delete(id),
-        onSuccess: () => {
+        onSuccess: (response) => {
+            toastService.success(response.message);
             qc.invalidateQueries({ queryKey: followupKeys.all })
         },
-    })
+        onError: (error: unknown) => {
+            toastService.error(error);
+        }
+    });
 }

src/lib/toast.service.ts

@@ -0,0 +1,29 @@
+import toast from 'react-hot-toast';
+import axios from 'axios';
+
+const success = (message: string) =>
+    toast.success(message, {
+        style: {
+            background: '#22c55e',
+            color: '#fff',
+            fontWeight: '500',
+        },
+        iconTheme: { primary: '#fff', secondary: '#22c55e' },
+    });
+
+const error = (error: unknown) => {
+    const msg = axios.isAxiosError(error)
+        ? error.response?.data?.message ?? 'Something went wrong'
+        : 'Something went wrong';
+
+    toast.error(msg, {
+        style: {
+            background: '#ef4444',
+            color: '#fff',
+            fontWeight: '500',
+        },
+        iconTheme: { primary: '#fff', secondary: '#ef4444' },
+    });
+};
+
+export const toastService = { success, error };