172 lines
6.8 KiB
HTML
172 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Patient Portal | Curio</title>
|
|
<link rel="stylesheet" href="globals.css">
|
|
<link rel="stylesheet" href="index.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<script src="globals.js"></script>
|
|
<script src="tenantLoader.js"></script>
|
|
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
|
|
<style>
|
|
.patient-layout {
|
|
display: grid;
|
|
grid-template-columns: 300px 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.patient-layout { grid-template-columns: 1fr; }
|
|
.sidebar { display: none; }
|
|
}
|
|
.main-content {
|
|
padding: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.bill-card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: 1rem;
|
|
background: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="dashboard-body patient-layout">
|
|
<aside class="sidebar">
|
|
<div class="logo">
|
|
<span class="logo-icon">C</span>
|
|
<span class="logo-text">Curio</span>
|
|
</div>
|
|
<nav class="side-nav">
|
|
<a href="#" class="active"><span>🏠</span> Overview</a>
|
|
<a href="#"><span>📅</span> Appointments</a>
|
|
<a href="#"><span>📄</span> Medical Records</a>
|
|
</nav>
|
|
<div class="user-profile">
|
|
<div class="avatar" id="avatarInitials">PA</div>
|
|
<div class="info">
|
|
<strong id="patientName">Patient Name</strong>
|
|
<span>Patient</span>
|
|
<a href="login.html" class="logout-btn" onclick="localStorage.clear()"><span>🚪</span> Logout</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header style="margin-bottom: 2rem;">
|
|
<h1>Welcome back, <span id="welcomeName">Patient</span></h1>
|
|
<p class="text-muted">Manage your appointments, records, and payments.</p>
|
|
</header>
|
|
|
|
<section class="settings-grid">
|
|
<div class="section-card">
|
|
<h2>Pending Payments</h2>
|
|
<div id="pendingBills">
|
|
<div class="bill-card">
|
|
<div>
|
|
<strong>Consultation Fee</strong>
|
|
<div class="text-muted" style="font-size:0.875rem;">Dr. Sharma - Cardiology</div>
|
|
</div>
|
|
<div style="text-align:right;">
|
|
<div style="font-weight:700; color:var(--primary); font-size:1.1rem;">₹500</div>
|
|
<button class="btn-primary" style="padding:0.4rem 1rem; margin-top:0.5rem;" onclick="initiatePayment(500, 'Consultation Fee')">Pay Now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h2>Upcoming Appointments</h2>
|
|
<div class="bill-card">
|
|
<div>
|
|
<strong>Dr. Sharma</strong>
|
|
<div class="text-muted" style="font-size:0.875rem;">Tomorrow, 10:30 AM</div>
|
|
</div>
|
|
<span class="badge badge-success">Confirmed</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const payload = requireLogin(['PATIENT']);
|
|
if (!payload) return;
|
|
|
|
const name = localStorage.getItem('userName') || 'Patient';
|
|
document.getElementById('patientName').innerText = name;
|
|
document.getElementById('welcomeName').innerText = name;
|
|
document.getElementById('avatarInitials').innerText = name.substring(0, 2).toUpperCase();
|
|
});
|
|
|
|
async function initiatePayment(amount, description) {
|
|
try {
|
|
// 1. Create order on backend
|
|
const res = await fetch('/api/payments/create-order', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${localStorage.getItem('curio_token')}`
|
|
},
|
|
body: JSON.stringify({ amount, notes: { description } })
|
|
});
|
|
|
|
const orderData = await res.json();
|
|
if (!res.ok) throw new Error(orderData.error);
|
|
|
|
// 2. Initialize Razorpay Checkout
|
|
const options = {
|
|
key: 'rzp_test_dummy_key_id', // Replace with Razorpay Key ID
|
|
amount: orderData.amount,
|
|
currency: orderData.currency,
|
|
name: 'Curio HMS',
|
|
description: description,
|
|
order_id: orderData.orderId,
|
|
handler: async function (response) {
|
|
// 3. Verify Payment
|
|
const verifyRes = await fetch('/api/payments/verify', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${localStorage.getItem('curio_token')}`
|
|
},
|
|
body: JSON.stringify(response)
|
|
});
|
|
const verifyData = await verifyRes.json();
|
|
if (verifyData.success) {
|
|
alert('Payment successful!');
|
|
location.reload();
|
|
} else {
|
|
alert('Payment verification failed.');
|
|
}
|
|
},
|
|
prefill: {
|
|
name: localStorage.getItem('userName'),
|
|
email: localStorage.getItem('userEmail'),
|
|
},
|
|
theme: {
|
|
color: '#0F172A' // Curio primary color
|
|
}
|
|
};
|
|
|
|
const rzp = new Razorpay(options);
|
|
rzp.open();
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Error initiating payment. Please try again.');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|