-
Doctor: {a.doctorName}
-
Specialty: {a.specialty}
-
Type: {a.appointmentType}
-
Date: {a.bookingDate}
-
Time: {a.bookingTime}
-
Status: {a.appointmentStatus}
-
Payment: {a.paymentStatus}
-
Location / Link: {a.locationOrLink}
-
- {a.appointmentStatus === "PENDING" &&
- a.paymentStatus === "SUCCESS" && (
- <>
-
- setInput({ ...input, [a.id]: e.target.value })
- }
- />
-
-
- )}
+
+
+
Admin Confirm Appointments
+
+ Review all system bookings across all doctors and manually set locations or meeting links.
+
+
+
+ {loading ? (
+
Loading system appointments...
+ ) : (
+
- ))}
+ )}
);
}
diff --git a/src/components/PatientPortal/bookings/AppointmentsTable.jsx b/src/components/PatientPortal/bookings/AppointmentsTable.jsx
new file mode 100644
index 0000000..28c4c2a
--- /dev/null
+++ b/src/components/PatientPortal/bookings/AppointmentsTable.jsx
@@ -0,0 +1,251 @@
+import React, { useState } from "react";
+import {
+ Calendar,
+ Clock,
+ Video,
+ User,
+ Save,
+ CheckCircle,
+ ExternalLink,
+ Loader2,
+ UserCircle
+} from "lucide-react";
+import { confirmAppointmentDoctor, confirmAppointment } from "../../../api/api.js";
+
+export default function AppointmentsTable({ appointments, isAdminView, isDoctorView, refreshData }) {
+ const [links, setLinks] = useState({});
+ const [loadingIds, setLoadingIds] = useState(new Set());
+
+ const handleLinkChange = (id, value) => {
+ setLinks((prev) => ({ ...prev, [id]: value }));
+ };
+
+ const handleConfirm = async (apt) => {
+ try {
+ // If it's already confirmed, they might just be updating the link
+ const linkValue = links[apt.appointmentId] || apt.locationOrLink;
+ if (!linkValue) return alert("Please enter a link or location");
+
+ // Set loading state for this specific row
+ setLoadingIds(prev => new Set(prev).add(apt.appointmentId));
+
+ const params =
+ apt.appointmentType === "Physical"
+ ? { physicalLocation: linkValue }
+ : { zoomLink: linkValue };
+
+ if (isAdminView) {
+ // use admin API
+ await confirmAppointment(apt.appointmentId, params);
+ } else {
+ // use doctor API
+ await confirmAppointmentDoctor(apt.appointmentId, params);
+ }
+
+ refreshData();
+ } catch (err) {
+ console.error("Confirm error:", err);
+ alert("Failed to confirm appointment");
+ } finally {
+ // Remove loading state
+ setLoadingIds(prev => {
+ const next = new Set(prev);
+ next.delete(apt.appointmentId);
+ return next;
+ });
+ }
+ };
+
+ if (!appointments || appointments.length === 0) {
+ return (
+
+
+
+
+
No appointments found
+
When bookings are made, they will appear here.
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ | # |
+ Patient Details |
+ {isAdminView && Doctor | }
+ Date |
+ Time |
+ Type |
+ Status |
+ Link / Location |
+ Action |
+
+
+
+ {appointments.map((apt, index) => {
+ const dateObj = new Date(apt.bookingDate);
+ const formattedDate = !Number.isNaN(dateObj.getTime())
+ ? dateObj.toLocaleDateString("en-CA") // YYYY-MM-DD
+ : apt.bookingDate;
+
+ const timeText = apt.bookingTime ? apt.bookingTime.slice(0, 5) : "—";
+ const isOnline = String(apt.appointmentType || "").toLowerCase() === "online";
+ const isPending = apt.appointmentStatus === "PENDING";
+
+ const currentLinkValue = links[apt.appointmentId] !== undefined
+ ? links[apt.appointmentId]
+ : (apt.locationOrLink || "");
+
+ const isLoading = loadingIds.has(apt.appointmentId);
+
+ return (
+
+ {/* Index */}
+ | {index + 1} |
+
+ {/* Patient Info */}
+
+
+
+
+
+
+
+ {apt.patientName || "Unknown Patient"}
+
+
+ {apt.reason || "No reason"}
+
+
+ |
+
+ {/* Doctor Info (Admin View Only) */}
+ {isAdminView && (
+
+ {apt.doctorName || "—"}
+ {apt.specialty}
+ |
+ )}
+
+ {/* Date */}
+
+
+
+ {formattedDate}
+
+ |
+
+ {/* Time */}
+
+
+
+ {timeText}
+
+ |
+
+ {/* Type */}
+
+
+ {isOnline ? : }
+ {apt.appointmentType}
+
+ |
+
+ {/* Status */}
+
+
+ {isPending ? : }
+ {apt.appointmentStatus}
+
+ |
+
+ {/* Link / Location Input */}
+
+ {apt.paymentStatus !== "SUCCESS" && isPending ? (
+ Waiting for Payment
+ ) : (
+
+ {!isPending && apt.locationOrLink && (
+
+ )}
+
+ handleLinkChange(apt.appointmentId, e.target.value)}
+ className="flex-1 min-w-[180px] bg-gray-50 border border-gray-200 text-gray-700 text-xs rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
+ />
+
+
+ |
+
+ {/* Actions */}
+
+ {(isPending || apt.locationOrLink !== currentLinkValue) ? (
+
+ ) : (
+
+
+ Confirmed
+
+ )}
+ |
+
+ );
+ })}
+
+
+
+
+ );
+}
diff --git a/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx b/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx
index 67aa9fd..306f52e 100644
--- a/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx
+++ b/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx
@@ -1,4 +1,15 @@
import { useState } from "react";
+import {
+ Stethoscope,
+ Video,
+ User,
+ Calendar,
+ Clock,
+ Info,
+ CreditCard,
+ Trash2,
+ ExternalLink
+} from "lucide-react";
export default function AppointmentCard({ appointment, onRemove }) {
const [error, setError] = useState("");
@@ -6,68 +17,122 @@ export default function AppointmentCard({ appointment, onRemove }) {
const handleZoomClick = () => {
if (
appointment.locationOrLink &&
- appointment.locationOrLink.startsWith("https://")
+ appointment.locationOrLink.startsWith("http")
) {
- // Open the link in a new tab
window.open(appointment.locationOrLink, "_blank");
- setError(""); // Clear any previous error
+ setError("");
+ } else if (appointment.locationOrLink) {
+ window.open(`https://${appointment.locationOrLink}`, "_blank");
+ setError("");
} else {
- setError("Zoom link is invalid or not available.Please contact us ");
+ setError("Zoom link is invalid or not available.");
}
};
+ const isOnline = String(appointment.appointmentType || "").toLowerCase() === "online";
+
return (
-
-
{appointment.doctorName}
-
- Specialty: {appointment.specialty}
-
-
- Type: {appointment.appointmentType}
-
-
- Consultation Fee: Rs.{appointment.consultationFee}
-
-
- Date: {appointment.bookingDate}
-
-
- Time: {appointment.bookingTime}
-
-
- Reason: {appointment.reason}
-
-
- Payment Status: {appointment.paymentStatus}
-
-
- Appointment Status: {appointment.appointmentStatus}
-
+
+ {/* Header: Doctor Info & Type Badge */}
+
+
+
+
+
+
+
+ {appointment.doctorName || "Unknown Doctor"}
+
+
{appointment.specialty || "General"}
+
+
+
+ {/* Online / Physical Badge */}
+
+ {isOnline ? : }
+ {appointment.appointmentType || "Online"}
+
+
+
+ {/* Details Section */}
+
+ {/* Date & Time Row */}
+
+
+
+
{appointment.bookingDate || "—"}
+
+
+
+
{appointment.bookingTime ? appointment.bookingTime.slice(0, 5) : "—"}
+
+
+
+ {/* Reason Row */}
+
+
+
REASON:
+
{appointment.reason || "N/A"}
+
+
+ {/* Fee Row */}
+
+
+
FEE:
+
Rs. {appointment.consultationFee || "0"}
+
+
+
+ {/* Status Badges Row */}
+
+
+ APPT: {appointment.appointmentStatus || "PENDING"}
+
+
+
+ PAY: {appointment.paymentStatus || "PENDING"}
+
+
- {/* Zoom Link / Location */}
- {appointment.locationOrLink ? (
-
- ) : (
-
- Location / Link: N/A
-
- )}
+ {/* Footer: Actions */}
+
+ {onRemove ? (
+
+ ) : (
+
/* Spacer */
+ )}
- {error &&
{error}
}
+ {appointment.locationOrLink ? (
+
+ ) : (
+
+
+ Link Pending
+
+ )}
+
- {onRemove && (
-
- )}
+ {error &&
{error}
}
);
}
diff --git a/src/components/PatientPortal/bookings/PaymentSuccess.jsx b/src/components/PatientPortal/bookings/PaymentSuccess.jsx
index 43dbf00..a538165 100644
--- a/src/components/PatientPortal/bookings/PaymentSuccess.jsx
+++ b/src/components/PatientPortal/bookings/PaymentSuccess.jsx
@@ -1,16 +1,29 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { verifyPaymentSuccess } from "../../../api/api.js";
export default function PaymentSuccess() {
const nav = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [status, setStatus] = useState("Verifying payment...");
useEffect(() => {
- // The backend already marked it as SUCCESS before redirecting here.
- const timer = setTimeout(() => {
- nav("/patient-portal");
- }, 2000);
- return () => clearTimeout(timer);
- }, [nav]);
+ const verify = async () => {
+ const orderId = searchParams.get("order_id");
+ if (orderId) {
+ await verifyPaymentSuccess(orderId);
+ setStatus("Payment Successful! Redirecting...");
+ } else {
+ setStatus("Payment Successful! Redirecting...");
+ }
+
+ setTimeout(() => {
+ nav("/patient-portal");
+ }, 2000);
+ };
+
+ verify();
+ }, [nav, searchParams]);
return (