Index: frontend/src/pages/billing/BillingDetail.js
===================================================================
--- frontend/src/pages/billing/BillingDetail.js	(revision f05de0502f3c7c6a4149420915249e784c827f57)
+++ frontend/src/pages/billing/BillingDetail.js	(revision f05de0502f3c7c6a4149420915249e784c827f57)
@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { billingService } from '../../services/billingService';
+import Loading from '../../components/Loading';
+import ErrorAlert from '../../components/ErrorAlert';
+import SuccessAlert from '../../components/SuccessAlert';
+
+function BillingDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const user = JSON.parse(localStorage.getItem('user') || '{}');
+  const isPatient = user.role === 'PATIENT';
+
+  const [billing, setBilling] = useState(null);
+  const [billingDetail, setBillingDetail] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const [updating, setUpdating] = useState(false);
+  const [paymentStatus, setPaymentStatus] = useState('');
+  const [downloading, setDownloading] = useState(false);
+
+  useEffect(() => {
+    fetchBilling();
+  }, [id]);
+
+  const fetchBilling = async () => {
+    try {
+      setLoading(true);
+      const response = await billingService.getBillingById(id);
+      setBilling(response.data);
+      setPaymentStatus(response.data.paymentStatus);
+
+      // Fetch detailed billing information
+      try {
+        const detailResponse = await billingService.getBillingDetail(id);
+        setBillingDetail(detailResponse.data);
+      } catch (err) {
+        console.error('Could not fetch billing details:', err);
+      }
+    } catch (err) {
+      setError('Failed to fetch billing record');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpdatePaymentStatus = async () => {
+    try {
+      setUpdating(true);
+      const response = await billingService.updatePaymentStatus(id, {
+        paymentStatus,
+        paymentDate: new Date().toISOString().split('T')[0],
+      });
+      setBilling(response.data);
+      setSuccess('Payment status updated successfully!');
+    } catch (err) {
+      setError('Failed to update payment status');
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const handleDownloadInvoice = async () => {
+    try {
+      setDownloading(true);
+      await billingService.downloadInvoicePDF(id);
+      setSuccess('Invoice downloaded successfully!');
+    } catch (err) {
+      setError('Failed to download invoice');
+      console.error(err);
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  if (loading) return <Loading />;
+
+  if (!billing) {
+    return (
+      <div>
+        <ErrorAlert message="Billing record not found" onClose={() => navigate('/billing')} />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold" style={{ color: '#7c3aed' }}>Billing Record #{billing.billId}</h1>
+        <div className="space-x-2">
+          <button
+            onClick={handleDownloadInvoice}
+            disabled={downloading}
+            className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 disabled:opacity-50"
+          >
+            {downloading ? 'Downloading...' : 'Download Invoice (PDF)'}
+          </button>
+          <button onClick={() => navigate('/billing')} className="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400">
+            Back
+          </button>
+        </div>
+      </div>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+      {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
+
+      <div className={`grid gap-6 mb-6 ${isPatient ? 'grid-cols-1 lg:grid-cols-2' : 'grid-cols-1 lg:grid-cols-3'}`}>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-xl font-bold mb-4">Billing Information</h2>
+          <div className="space-y-3">
+            <InfoRow label="Patient" value={billing.patientName} />
+            <InfoRow label="Total Cost" value={`$${billing.totalCost}`} />
+            <InfoRow label="Current Status" value={billing.paymentStatus} />
+            <InfoRow label="Payment Date" value={billing.paymentDate || 'Not paid'} />
+          </div>
+        </div>
+
+        {!isPatient && (
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-xl font-bold mb-4">Update Payment Status</h2>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-semibold mb-2">Payment Status</label>
+                <select
+                  value={paymentStatus}
+                  onChange={(e) => setPaymentStatus(e.target.value)}
+                  className="w-full px-4 py-2 border rounded-lg"
+                >
+                  <option value="PENDING">Pending</option>
+                  <option value="PAID">Paid</option>
+                  <option value="CANCELLED">Cancelled</option>
+                </select>
+              </div>
+              <button
+                onClick={handleUpdatePaymentStatus}
+                disabled={updating || paymentStatus === billing.paymentStatus}
+                className="w-full bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 disabled:opacity-50"
+              >
+                {updating ? 'Updating...' : 'Update Status'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-xl font-bold mb-4">Patient Details</h2>
+          <div className="space-y-3">
+            {billingDetail && (
+              <>
+                <InfoRow label="EMBG" value={billingDetail.patientEmbg} />
+                <InfoRow label="Phone" value={billingDetail.patientPhone} />
+                <InfoRow label="Bill Date" value={billingDetail.billDate} />
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-xl font-bold mb-4">Itemized Services</h2>
+
+        {billingDetail && (billingDetail.procedures.length > 0 || billingDetail.labTests.length > 0) ? (
+          <div className="space-y-4">
+            {billingDetail.procedures.length > 0 && (
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Procedures</h3>
+                <table className="w-full">
+                  <thead className="bg-gray-100">
+                    <tr>
+                      <th className="px-4 py-2 text-left">Description</th>
+                      <th className="px-4 py-2 text-right">Cost</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {billingDetail.procedures.map((proc, idx) => (
+                      <tr key={idx} className="border-t">
+                        <td className="px-4 py-2">{proc.description}</td>
+                        <td className="px-4 py-2 text-right">${proc.cost}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {billingDetail.labTests.length > 0 && (
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Lab Tests</h3>
+                <table className="w-full">
+                  <thead className="bg-gray-100">
+                    <tr>
+                      <th className="px-4 py-2 text-left">Description</th>
+                      <th className="px-4 py-2 text-right">Cost</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {billingDetail.labTests.map((test, idx) => (
+                      <tr key={idx} className="border-t">
+                        <td className="px-4 py-2">{test.description}</td>
+                        <td className="px-4 py-2 text-right">${test.cost}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            <div className="border-t-2 pt-4 mt-4 flex justify-end">
+              <div className="text-right">
+                <p className="text-gray-600">Total Amount:</p>
+                <p className="text-2xl font-bold text-purple-600">${billing.totalCost}</p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <p className="text-gray-500">No services itemized for this billing record.</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function InfoRow({ label, value }) {
+  return (
+    <div className="flex justify-between">
+      <span className="text-gray-800">{label}:</span>
+      <span className="text-gray-800">{value || 'N/A'}</span>
+    </div>
+  );
+}
+
+export default BillingDetail;