+ {/* Header */}
+
+
+ +
+
+
CURE PHARMACY
+
123 Main Shahrah, Karachi, Sindh, Pakistan
+
Ph: 021-35141000 | DRAP Lic: DRAP-KHI-2022
+
+
+ {/* Invoice Meta */}
+
+
Invoice #: {header.invoice_number}
+
Date: {header.order_date ? format(new Date(header.order_date), 'dd-MMM-yyyy') : 'β'}
+
Time: {header.order_date ? format(new Date(header.order_date), 'HH:mm') : 'β'}
+
Cashier: {header.cashier_name}
+
Customer: {header.customer_name} | Ph: {header.customer_phone}
+ {header.prescription_number && header.prescription_number !== 'RX-000' && (
+
Prescription #: {header.prescription_number}
+ )}
+
+
+ {/* Items Table */}
+
+
+
+ | # |
+ Medicine |
+ Qty |
+ Price |
+ Sub |
+
+
+
+ {items.map((item, i) => (
+
+ | {i + 1} |
+
+ {item.medicine_name}
+ {item.strength ? {item.strength} : null}
+ |
+ {item.quantity} |
+ {fmt(item.unit_price)} |
+ {fmt(item.line_subtotal)} |
+
+ ))}
+
+
+
+ {/* Totals */}
+
+
+ Subtotal:PKR {fmt(header.subtotal)}
+
+ {parseFloat(header.discount_amount) > 0 && (
+
+ Discount ({header.discount_percent}%):
+ -PKR {fmt(header.discount_amount)}
+
+ )}
+ {parseFloat(header.tax_amount) > 0 && (
+
+ Tax ({header.tax_percent}%):PKR {fmt(header.tax_amount)}
+
+ )}
+
+ GRAND TOTAL:PKR {fmt(header.total_amount)}
+
+
+ Payment: {header.payment_method || 'N/A'}
+
+ {header.payment_status?.toUpperCase() || 'PENDING'}
+
+
+ {header.amount_paid && parseFloat(header.amount_paid) > parseFloat(header.total_amount) && (
+
+ Cash Given:PKR {fmt(header.amount_paid)}
+
+ )}
+ {header.amount_paid && parseFloat(header.amount_paid) > parseFloat(header.total_amount) && (
+
+ Change:PKR {(parseFloat(header.amount_paid) - parseFloat(header.total_amount)).toFixed(2)}
+
+ )}
+
+
+ {/* Footer */}
+
+
Thank you! Get well soon. πΏ
+
Return policy: 3 days with original receipt
+
For queries: 021-35141000
+
+
+
+ Showing {Math.min((page - 1) * limit + 1, total)}β{Math.min(page * limit, total)} of {total}
+
+
+
+ {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+ let p = i + 1;
+ if (totalPages > 5) {
+ if (page <= 3) p = i + 1;
+ else if (page >= totalPages - 2) p = totalPages - 4 + i;
+ else p = page - 2 + i;
+ }
+ return (
+
+ );
+ })}
+
+
+
{c.name}
{c.email || 'β'}
+ {/* Low stock banner */}
+ {stats?.low_stock_count > 0 && (
+
+
+
+ {stats.low_stock_count} medicine{stats.low_stock_count > 1 ? 's' : ''} are below reorder level.
+
+
+ View
+
+
+ )}
+
+ {/* Stat Cards */}
+
+
+
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+ {[
+ { to: '/orders/new', label: 'New Sale', icon: ShoppingCart, color: 'bg-teal-700' },
+ { to: '/medicines', label: 'Add Medicine', icon: Pill, color: 'bg-blue-600' },
+ { to: '/customers', label: 'Add Customer', icon: Users, color: 'bg-purple-600' },
+ { to: '/reports', label: 'View Reports', icon: TrendingUp, color: 'bg-green-600' },
+ ].map(({ to, label, icon: Icon, color }) => (
+
+
+ {label}
+
+ ))}
+
+
+ {/* Recent Orders */}
+
+
+
Recent Orders
+
+ View all
+
+
+
+
+
+
+ | Invoice |
+ Customer |
+ Date |
+ Items |
+ Total |
+ Status |
+ |
+
+
+
+ {orders.length === 0 ? (
+ | No orders yet |
+ ) : orders.map(order => (
+
+ | {order.invoice_number} |
+ {order.customer_name} |
+ {order.order_date ? format(new Date(order.order_date), 'dd MMM, HH:mm') : 'β'} |
+ {order.item_count} |
+ PKR {parseFloat(order.total_amount).toLocaleString()} |
+ |
+
+
+ View
+
+ |
+
+ ))}
+
+
+
+
+
{d.name}
{d.specialization || 'β'}
+
+
{ setSearch(v); setPage(1); }} placeholder="Search employeesβ¦" />
+
+
+
+
+
+
+
+
+ | Name |
+ Role |
+ Username |
+ Phone |
+ Salary |
+ Hire Date |
+ |
+
+
+
+ {loading ? (
+ |
+
+ |
+ ) : employees.map(e => (
+
+ {e.name} {e.email || 'β'} |
+ {e.role} |
+ {e.username} |
+ {e.phone} |
+ PKR {parseFloat(e.salary || 0).toLocaleString()} |
+ {e.hire_date ? new Date(e.hire_date).toLocaleDateString('en-PK') : 'β'} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
+
setModalOpen(false)} title={editing ? 'Edit Employee' : 'Add Employee'} size="lg">
+
+
+
+
setDeleteId(null)} onConfirm={handleDelete} title="Deactivate Employee" message="Employee will be deactivated and cannot log in." confirmLabel="Deactivate" />
+
+ {/* Toolbar */}
+
+
{ setSearch(v); setPage(1); }} placeholder="Search medicinesβ¦" />
+
+
+
+ {/* Table */}
+
+
+
+
+
+ | Name |
+ Category |
+ Form |
+ Strength |
+ Price (PKR) |
+ Stock |
+ Expiry |
+ Rx |
+ Status |
+ |
+
+
+
+ {loading ? (
+ |
+
+ |
+ ) : medicines.length === 0 ? (
+ |
+ No medicines found
+ |
+ ) : medicines.map(m => (
+
+ |
+ {m.name}
+ {m.generic_name && {m.generic_name} }
+ |
+ {m.category_name || 'β'} |
+ {m.dosage_form} |
+ {m.strength || 'β'} |
+ {parseFloat(m.unit_price).toFixed(2)} |
+
+ {m.stock_qty ?? 'β'}
+ {m.stock_qty !== null && }
+ |
+
+ {m.expiry_date ? new Date(m.expiry_date).toLocaleDateString('en-PK', { year:'2-digit', month:'short' }) : 'β'}
+ |
+
+ {m.requires_prescription ? Yes : No}
+ |
+
+ {m.is_active ? Active : Inactive}
+ |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
+ {/* Add/Edit Modal */}
+
setModalOpen(false)} title={editing ? 'Edit Medicine' : 'Add Medicine'} size="lg">
+
+
+
+ {/* Confirm Delete */}
+
setDeleteId(null)}
+ onConfirm={handleDelete}
+ title="Deactivate Medicine"
+ message="This medicine will be hidden from the inventory. Stock records are preserved."
+ confirmLabel="Deactivate"
+ />
+
+
+ { setSearch(v); setPage(1); }} placeholder="Search by medicine nameβ¦" />
+
+
+
+
+
+
+
+ | Medicine |
+ Qty |
+ Reorder Level |
+ Status |
+ Batch |
+ Expiry |
+ Supplier |
+ Last Restocked |
+ |
+
+
+
+ {loading ? (
+ |
+
+ |
+ ) : stocks.map(s => (
+
+ |
+ {s.medicine_name}
+ {s.dosage_form} {s.strength}
+ |
+ {s.quantity} |
+ {s.reorder_level} |
+ |
+ {s.batch_number || 'β'} |
+
+ {s.expiry_date ? (
+
+ {format(new Date(s.expiry_date), 'MMM yyyy')}
+
+ ) : 'β'}
+ |
+ {s.supplier_name || 'β'} |
+
+ {s.last_restocked ? format(new Date(s.last_restocked), 'dd MMM yyyy') : 'β'}
+ |
+
+
+ |
+
+ ))}
+
+
+
+
+
+
+
setModalOpen(false)} title={`Restock: ${selected?.medicine_name}`} size="md">
+
+
+
+
+ {/* Logo */}
+
+
+
Cure Pharmacy
+
Medical Store Management System
+
+
+ {/* Card */}
+
+
Sign in to your account
+
+
+
+
+ Default: admin / admin123
+
+
+
+
+ Moavia Amir Β· 2k24_BSAI_72 Β· DB Lab
+
+
+
+
+
+ { setSearch(v); setPage(1); }} placeholder="Search paymentsβ¦" />
+
+
+
+ Shown Total:
+ PKR {totalRevenue.toLocaleString()}
+
+
+
+
+
+
+
+
+ | Invoice |
+ Customer |
+ Amount Paid |
+ Method |
+ Status |
+ Transaction Ref |
+ Paid At |
+ |
+
+
+
+ {loading ? (
+ |
+
+ |
+ ) : payments.length === 0 ? (
+ | No payments found |
+ ) : payments.map(p => (
+
+ | {p.invoice_number} |
+ {p.customer_name} |
+ PKR {parseFloat(p.amount_paid).toLocaleString()} |
+ |
+
+
+ {p.payment_status}
+
+ |
+ {p.transaction_ref || 'β'} |
+
+ {p.paid_at ? format(new Date(p.paid_at), 'dd MMM yyyy, HH:mm') : 'β'}
+ |
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
+
+
{ setSearch(v); setPage(1); }} placeholder="Search by customer or doctorβ¦" />
+
+
+
+
+
+
+
+
+ | Rx # |
+ Customer |
+ Doctor |
+ Date |
+ Valid Until |
+ Status |
+ |
+
+
+
+ {loading ? (
+ |
+
+ |
+ ) : prescriptions.length === 0 ? (
+ | No prescriptions |
+ ) : prescriptions.map(p => (
+
+ | RX-{String(p.prescription_id).padStart(3,'0')} |
+ {p.customer_name} {p.customer_phone} |
+ {p.doctor_name} {p.specialization} |
+ {p.prescription_date?.slice(0,10)} |
+ {p.valid_until?.slice(0,10) || 'β'} |
+
+ {p.is_used
+ ? Used
+ : p.valid_until && new Date(p.valid_until) < new Date()
+ ? Expired
+ : Valid}
+ |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
+
setModalOpen(false)} title={editing ? 'Edit Prescription' : 'New Prescription'} size="md">
+
+
+
+
setDeleteId(null)} onConfirm={async () => { try { await prescriptionsAPI.remove(deleteId); toast.success('Deleted'); fetchData(); } catch { toast.error('Failed'); } }} title="Delete Prescription" message="Are you sure you want to delete this prescription?" confirmLabel="Delete" />
+
+
+
{data.length} medicine(s) below reorder level
+
+
+
+
+
+ | Medicine | Category |
+ Current Stock | Reorder Level |
+ Units Short | Supplier | Expiry |
+
+
+ {data.length === 0 ? | All stock levels are healthy β |
+ : data.map(r => (
+
+ {r.medicine_name} {r.dosage_form} {r.strength} |
+ {r.category_name} |
+ {r.current_stock} |
+ {r.reorder_level} |
+ -{r.units_below_reorder} |
+ {r.supplier_name || 'β'} |
+ {r.expiry_date ? format(new Date(r.expiry_date), 'MMM yyyy') : 'β'} |
+
+ ))}
+
+
+
+
+
+
{data.length} medicine(s) expiring in the next 30 days
+
+
+
+
+
+ | Medicine | Category |
+ Stock | Batch |
+ Expiry Date | Days Left | Supplier |
+
+
+ {data.length === 0 ? | No medicines expiring soon β |
+ : data.map(r => (
+
+ {r.medicine_name} {r.dosage_form} {r.strength} |
+ {r.category_name} |
+ {r.current_stock} |
+ {r.batch_number || 'β'} |
+ {r.expiry_date ? format(new Date(r.expiry_date), 'dd MMM yyyy') : 'β'} |
+
+
+ {r.days_until_expiry} days
+
+ |
+ {r.supplier_name || 'β'} |
+
+ ))}
+
+
+
+
+
+
+ {/* Summary cards */}
+
+ {[
+ { label: 'Total Revenue', value: `PKR ${totalRev.toLocaleString()}`, color: 'text-teal-700 dark:text-teal-300' },
+ { label: 'Total Orders', value: totalOrd },
+ { label: 'Avg Order', value: totalOrd > 0 ? `PKR ${(totalRev/totalOrd).toFixed(0)}` : 'β' },
+ ].map(s => (
+
+
{s.label}
+
{s.value}
+
+ ))}
+
+
+ {/* Bar Chart */}
+ {data.length > 0 && (
+
+
Daily Revenue (PKR)
+
+
+
+ format(new Date(v), 'dd MMM')} />
+ `${(v/1000).toFixed(0)}k`} />
+ [`PKR ${parseFloat(v).toLocaleString()}`, 'Revenue']} labelFormatter={l => format(new Date(l), 'dd MMM yyyy')} />
+
+
+
+
+ )}
+
+ {/* Table */}
+
+
+
+ | Date | Orders |
+ Revenue | Avg Order | Customers |
+
+
+ {data.length === 0 ? | No sales data |
+ : data.map(r => (
+
+ | {format(new Date(r.sale_date), 'dd MMM yyyy')} |
+ {r.total_orders} |
+ PKR {parseFloat(r.total_revenue).toLocaleString()} |
+ PKR {parseFloat(r.avg_order_value).toFixed(2)} |
+ {r.unique_customers} |
+
+ ))}
+
+
+
+
+
+
Top {data.length} best-selling medicines
+
+
+
+
+
+ | # | Medicine |
+ Category | Units Sold |
+ Orders | Revenue | Price |
+
+
+ {data.length === 0 ? | No sales data yet |
+ : data.map((r, i) => (
+
+ | #{i+1} |
+ {r.medicine_name} {r.dosage_form} {r.strength} |
+ {r.category_name} |
+ {r.total_sold} |
+ {r.order_count} |
+ PKR {parseFloat(r.total_revenue).toLocaleString()} |
+ PKR {parseFloat(r.unit_price).toFixed(2)} |
+
+ ))}
+
+
+
+
+ {/* Tab Bar */}
+
+ {TABS.map(({ key, label, icon: Icon }) => (
+
+ ))}
+
+
+ {/* Tab Content */}
+ {activeTab === 'low-stock' &&
}
+ {activeTab === 'expiring' &&
}
+ {activeTab === 'sales' &&
}
+ {activeTab === 'top-meds' &&
}
+
+ {/* LEFT β Medicine Search + Cart */}
+
+ {/* Search */}
+
+
+
+
searchMedicines(e.target.value)}
+ placeholder="Search and add medicinesβ¦"
+ className="input pl-9 text-base"
+ />
+ {searchOpen && medResults.length > 0 && (
+
+ {medResults.map(m => (
+
+ ))}
+
+ )}
+
+
+
+ {/* Cart Items */}
+
+ {cart.items.length === 0 ? (
+
+ ) : (
+
+
+
+ | Medicine |
+ Qty |
+ Price |
+ Subtotal |
+ |
+
+
+
+ {cart.items.map(item => (
+
+ |
+ {item.name}
+ {item.requires_prescription && Rx Required}
+ |
+
+
+
+ {item.quantity}
+
+ |
+ {item.unit_price.toFixed(2)} |
+ {(item.unit_price * item.quantity).toFixed(2)} |
+
+
+ |
+
+ ))}
+
+
+ )}
+
+
+
+ {/* RIGHT β Customer + Payment Panel */}
+
+ {/* Customer */}
+
+
+ Customer
+
+
+ {!walkIn && (
+
+ setCustPhone(e.target.value)}
+ placeholder="03XX-XXXXXXX" className="input flex-1 text-sm"
+ onKeyDown={e => e.key === 'Enter' && lookupCustomer()}
+ />
+
+
+ )}
+ {customer && (
+
+
{customer.name}
+
{customer.phone}
+
+ )}
+
+
+ {/* Prescription */}
+ {rxRequired && (
+
+
+ Prescription Required
+
+ {!customer ? (
+
Please select a customer first.
+ ) : (
+
+ )}
+
+ )}
+
+ {/* Discount & Tax */}
+
+
+ {/* Totals */}
+
+
+ SubtotalPKR {subtotal.toFixed(2)}
+
+ {cart.discount > 0 && (
+
+ Discount ({cart.discount}%)-PKR {discountAmt.toFixed(2)}
+
+ )}
+ {cart.tax > 0 && (
+
+ Tax ({cart.tax}%)PKR {taxAmt.toFixed(2)}
+
+ )}
+
+ TotalPKR {total.toFixed(2)}
+
+
+
+ {/* Payment */}
+
+
Payment
+
+ {['Cash','Card','Online','Insurance'].map(m => (
+
+ ))}
+
+
+
+
setAmountPaid(e.target.value)}
+ className="input text-sm font-bold"
+ />
+ {amountPaid && parseFloat(amountPaid) >= total && (
+
+ Change: PKR {(parseFloat(amountPaid) - total).toFixed(2)}
+
+ )}
+
+
+
+ {/* Place Order Button */}
+
+
+
Order not found
;
+
+ return (
+
+
+
+
Back to Orders
+
+
+
+
+
+
+
+ {/* Order summary cards */}
+
+ {[
+ { label: 'Invoice', value: bill.header.invoice_number, mono: true },
+ { label: 'Customer', value: bill.header.customer_name },
+ { label: 'Cashier', value: bill.header.cashier_name },
+ { label: 'Total', value: `PKR ${parseFloat(bill.header.total_amount).toLocaleString()}`, bold: true, color: 'text-teal-700 dark:text-teal-300' },
+ { label: 'Payment', value: bill.header.payment_method || 'N/A' },
+ { label: 'Items', value: bill.items?.length || 0 },
+ ].map(({ label, value, mono, bold, color }) => (
+
+ ))}
+
+
+ {/* Bill Preview */}
+
+
+
+
+ { setSearch(v); setPage(1); }} placeholder="Search ordersβ¦" />
+
+
+
New Sale
+
+
+
+
+
+
+
+ | Invoice |
+ Customer |
+ Date & Time |
+ Items |
+ Total |
+ Status |
+ Cashier |
+ |
+
+
+
+ {loading ? (
+ |
+
+ |
+ ) : orders.length === 0 ? (
+ | No orders found |
+ ) : orders.map(o => (
+
+ | {o.invoice_number} |
+
+ {o.customer_name}
+ {o.customer_phone && {o.customer_phone} }
+ |
+
+ {o.order_date ? format(new Date(o.order_date), 'dd MMM yyyy, HH:mm') : 'β'}
+ |
+ {o.item_count} |
+ PKR {parseFloat(o.total_amount).toLocaleString()} |
+ |
+ {o.employee_name} |
+
+
+
+
+ |
+
+ ))}
+
+
+
+
+
+
{s.name}
{s.contact_person || 'β'}