Changeset b63d7b5 for frontend/src/pages/billing/BillingList.js

Timestamp:

05/29/26 22:52:04 (4 months ago)

Author:

MBK <marija.karapandzova@…>

Branches:

master

Children:

20d16ca

Parents:

6c00695

Message:

Add pending requests functionality and filters for billing admins

File:

• frontend/src/pages/billing/BillingList.js (modified) (5 diffs)

frontend/src/pages/billing/BillingList.js

@@ -2 +2 @@
 import { Link, useSearchParams } from 'react-router-dom';
 import { billingService } from '../../services/billingService';
+import { patientService } from '../../services/patientService';
 import Loading from '../../components/Loading';
 import ErrorAlert from '../../components/ErrorAlert';
+import SuccessAlert from '../../components/SuccessAlert';
 
 function BillingList() {
@@ -9 +11 @@
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
   const [searchParams] = useSearchParams();
   const patientId = searchParams.get('patientId');
   const user = JSON.parse(localStorage.getItem('user') || '{}');
 
-  const fetchBillings = async () => {
+  // Filters
+  const [statusFilter, setStatusFilter] = useState('');
+  const [patientFilter, setPatientFilter] = useState('');
+  const [patients, setPatients] = useState([]);
+
+  useEffect(() => {
+    const fetchBillings = async () => {
+      try {
+        setLoading(true);
+        let response;
+        if (patientId) {
+          response = await billingService.getBillingHistoryForPatient(patientId);
+        } else if (user.role === 'PATIENT') {
+          response = await billingService.getBillingHistoryForPatient(user.patientId);
+        } else {
+          response = await billingService.getAllBillings();
+        }
+        setBillings(response.data || []);
+      } catch (err) {
+        setError('Failed to fetch billing records');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchBillings();
+  }, [patientId, user.role, user.patientId]);
+
+  // Load patients for filter dropdown (for billing admin)
+  useEffect(() => {
+    if (user.role === 'BILLING_ADMIN') {
+      const loadPatients = async () => {
+        try {
+          const response = await patientService.getAllPatients();
+          setPatients(response.data || []);
+        } catch (err) {
+          console.error('Failed to load patients:', err);
+        }
+      };
+      loadPatients();
+    }
+  }, [user.role]);
+
+  // Filter billings based on selected filters
+  const filteredBillings = billings.filter(billing => {
+    if (statusFilter && billing.paymentStatus !== statusFilter) {
+      return false;
+    }
+    if (patientFilter && billing.patientName !== patientFilter) {
+      return false;
+    }
+    return true;
+  });
+
+  const pendingBillings = billings.filter(b => b.paymentStatus === 'PENDING');
+
+  const handleUpdateStatus = async (billId, newStatus) => {
     try {
-      setLoading(true);
-      let response;
-      if (patientId) {
-        response = await billingService.getBillingHistoryForPatient(patientId);
-      } else if (user.role === 'PATIENT') {
-        response = await billingService.getBillingHistoryForPatient(user.patientId);
-      } else {
-        response = await billingService.getAllBillings();
+      const updateData = {
+        paymentStatus: newStatus
+      };
+      if (newStatus === 'PAID') {
+        updateData.paymentDate = new Date().toISOString().split('T')[0];
       }
-      setBillings(response.data);
+
+      console.log('Updating billing status:', { billId, updateData });
+      await billingService.updatePaymentStatus(billId, updateData);
+      setSuccess(`Billing status updated to ${newStatus}`);
+
+      // Refresh the list
+      const response = user.role === 'BILLING_ADMIN'
+          ? await billingService.getAllBillings()
+          : await billingService.getBillingHistoryForPatient(patientId || user.patientId);
+      setBillings(response.data || []);
     } catch (err) {
-      setError('Failed to fetch billing records');
-      console.error(err);
-    } finally {
-      setLoading(false);
+      setError(`Failed to update billing status: ${err.response?.data?.error || err.message}`);
+      console.error('Update status error:', err);
     }
   };
-
-  useEffect(() => {
-    fetchBillings();
-  }, [patientId]);
 
   // Prevent unauthorized access to billing
@@ -54 +114 @@
 
         {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+        {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
+
+        {/* Filters for Billing Admin */}
+        {user.role === 'BILLING_ADMIN' && (
+            <div className="bg-white rounded-lg shadow p-6 mb-6">
+              <h2 className="text-lg font-bold mb-4">Filters</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Status</label>
+                  <select
+                      value={statusFilter}
+                      onChange={(e) => setStatusFilter(e.target.value)}
+                      className="w-full px-4 py-2 border rounded-lg"
+                  >
+                    <option value="">All Statuses</option>
+                    <option value="PENDING">Pending</option>
+                    <option value="PAID">Paid</option>
+                    <option value="PROCESSING">Processing</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Patient</label>
+                  <select
+                      value={patientFilter}
+                      onChange={(e) => setPatientFilter(e.target.value)}
+                      className="w-full px-4 py-2 border rounded-lg"
+                  >
+                    <option value="">All Patients</option>
+                    {patients.map(p => (
+                        <option key={p.patientId} value={`${p.firstName} ${p.lastName}`}>
+                          {p.firstName} {p.lastName}
+                        </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+        )}
+
+        {/* Pending Billing Records Section (for Billing Admin) */}
+        {user.role === 'BILLING_ADMIN' && pendingBillings.length > 0 && (
+            <div className="bg-yellow-50 rounded-lg shadow p-6 mb-6 border-l-4 border-yellow-500">
+              <h2 className="text-lg font-bold mb-4">Pending Billing Records ({pendingBillings.length})</h2>
+              <div className="space-y-3">
+                {pendingBillings.map(billing => (
+                    <div key={billing.billId} className="bg-white rounded p-4 flex justify-between items-center">
+                      <div>
+                        <p className="font-semibold">{billing.patientName}</p>
+                        <p className="text-sm text-gray-600">${billing.totalCost}</p>
+                      </div>
+                      <button
+                          onClick={() => handleUpdateStatus(billing.billId, 'PAID')}
+                          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
+                      >
+                        Mark Paid
+                      </button>
+                    </div>
+                ))}
+              </div>
+            </div>
+        )}
 
         <div className="bg-white rounded-lg shadow overflow-hidden">
@@ -67 +188 @@
             </thead>
             <tbody>
-            {billings.map(billing => (
+            {filteredBillings.map(billing => (
                 <tr key={billing.billId} className="border-t hover:bg-gray-50">
                   <td className="px-6 py-3">{billing.patientName}</td>
@@ -90 +211 @@
             </tbody>
           </table>
+
+          {filteredBillings.length === 0 && (
+              <div className="p-6 text-center text-gray-500">
+                {billings.length === 0 ? 'No billing records found' : 'No records match the selected filters'}
+              </div>
+          )}
         </div>
       </div>