2717 lines
158 KiB
JavaScript
2717 lines
158 KiB
JavaScript
|
|
const { useState, useEffect, useRef } = React;
|
|
|
|
const API_BASE = '/api/v1/medical-store/';
|
|
|
|
// Detect store slug from URL (e.g. /MedicalStore/storeA or /app/medical-store/storeB)
|
|
function getInitialStoreSlug() {
|
|
if (window.INITIAL_STORE_SLUG) {
|
|
return window.INITIAL_STORE_SLUG;
|
|
}
|
|
const path = window.location.pathname;
|
|
const match = path.match(/(?:MedicalStore|app\/medical-store)\/([a-zA-Z0-9_\-]+)/i);
|
|
return match ? match[1] : null;
|
|
}
|
|
|
|
// =========================================================================
|
|
// ROOT ERROR BOUNDARY
|
|
// =========================================================================
|
|
class ErrorBoundary extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { hasError: false, error: null };
|
|
}
|
|
static getDerivedStateFromError(error) {
|
|
return { hasError: true, error };
|
|
}
|
|
componentDidCatch(error, errorInfo) {
|
|
console.error("Medical Store UI Error:", error, errorInfo);
|
|
}
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-slate-900 text-white p-4 text-center" style={{ background: '#0f172a' }}>
|
|
<div className="bg-danger text-white rounded-circle p-3 mb-3 d-flex align-items-center justify-content-center" style={{ width: 64, height: 64 }}>
|
|
<i className="bi bi-exclamation-octagon fs-2"></i>
|
|
</div>
|
|
<h4 className="fw-bold">Counter Desk Interruption</h4>
|
|
<p className="text-secondary mb-3" style={{ maxWidth: 500 }}>
|
|
{this.state.error?.message || 'An unexpected error occurred while rendering the counter desk.'}
|
|
</p>
|
|
<button className="btn btn-outline-light btn-sm" onClick={() => window.location.reload()}>
|
|
<i className="bi bi-arrow-clockwise me-1"></i> Reload Counter Desk
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
function App() {
|
|
const [stores, setStores] = useState([]);
|
|
const [activeStoreId, setActiveStoreId] = useState(null);
|
|
const [activeTab, setActiveTab] = useState('pos'); // pos, inventory, purchase, transfer, ledgers, settings
|
|
const [notification, setNotification] = useState(null);
|
|
const [isLoadingStores, setIsLoadingStores] = useState(true);
|
|
|
|
// Machine Authorization State
|
|
const [isDeviceAuthorized, setIsDeviceAuthorized] = useState(false);
|
|
const [deviceToken, setDeviceToken] = useState('');
|
|
const [machineName, setMachineName] = useState('Counter PC ' + (navigator.platform || 'Desktop'));
|
|
const [secKeyInput, setSecKeyInput] = useState('');
|
|
const [verifyMethod, setVerifyMethod] = useState('key'); // 'key' or 'otp'
|
|
const [isVerifying, setIsVerifying] = useState(false);
|
|
|
|
const storeSlugFromUrl = getInitialStoreSlug();
|
|
|
|
// Active Store Object
|
|
const activeStore = stores.find(s => s.store_id == activeStoreId) || stores[0] || null;
|
|
|
|
useEffect(() => {
|
|
fetchStores();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (activeStore) {
|
|
checkMachineAuthorization(activeStore.store_id);
|
|
}
|
|
}, [activeStoreId, stores]);
|
|
|
|
const fetchStores = async () => {
|
|
setIsLoadingStores(true);
|
|
try {
|
|
const url = storeSlugFromUrl ? `${API_BASE}stores?slug=${encodeURIComponent(storeSlugFromUrl)}` : `${API_BASE}stores`;
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
if (data.status && data.stores && data.stores.length > 0) {
|
|
setStores(data.stores);
|
|
// If slug matched specific store, select it (case-insensitive)
|
|
if (storeSlugFromUrl) {
|
|
const matched = data.stores.find(s =>
|
|
(s.store_slug && s.store_slug.toLowerCase() === storeSlugFromUrl.toLowerCase()) ||
|
|
(s.store_code && s.store_code.toLowerCase() === storeSlugFromUrl.toLowerCase())
|
|
);
|
|
if (matched) {
|
|
setActiveStoreId(matched.store_id);
|
|
return;
|
|
}
|
|
}
|
|
if (!activeStoreId) {
|
|
setActiveStoreId(data.stores[0].store_id);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load stores:', e);
|
|
} finally {
|
|
setIsLoadingStores(false);
|
|
}
|
|
};
|
|
|
|
const checkMachineAuthorization = async (storeId) => {
|
|
const savedToken = localStorage.getItem('mst_device_token_' + storeId);
|
|
if (!savedToken) {
|
|
setIsDeviceAuthorized(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(API_BASE + 'device/check', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ store_id: storeId, device_token: savedToken })
|
|
});
|
|
const data = await res.json();
|
|
if (data.status && data.authorized) {
|
|
setIsDeviceAuthorized(true);
|
|
setDeviceToken(savedToken);
|
|
if (data.machine_name) setMachineName(data.machine_name);
|
|
} else {
|
|
localStorage.removeItem('mst_device_token_' + storeId);
|
|
setIsDeviceAuthorized(false);
|
|
}
|
|
} catch (e) {
|
|
console.error('Device authorization check error:', e);
|
|
}
|
|
};
|
|
|
|
const submitDeviceVerification = async (e) => {
|
|
e.preventDefault();
|
|
if (!activeStore || !secKeyInput) return;
|
|
|
|
setIsVerifying(true);
|
|
try {
|
|
const payload = {
|
|
store_id: activeStore.store_id,
|
|
store_slug: activeStore.store_slug,
|
|
machine_name: machineName,
|
|
security_key: verifyMethod === 'key' ? secKeyInput : '',
|
|
otp: verifyMethod === 'otp' ? secKeyInput : ''
|
|
};
|
|
|
|
const res = await fetch(API_BASE + 'device/verify', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const data = await res.json();
|
|
if (data.status && data.device_token) {
|
|
localStorage.setItem('mst_device_token_' + activeStore.store_id, data.device_token);
|
|
setDeviceToken(data.device_token);
|
|
setIsDeviceAuthorized(true);
|
|
notify(data.message, 'success');
|
|
} else {
|
|
alert(data.message || 'Verification failed. Please check with HMS Admin.');
|
|
}
|
|
} catch (e) {
|
|
alert('Verification request failed: ' + e.message);
|
|
} finally {
|
|
setIsVerifying(false);
|
|
}
|
|
};
|
|
|
|
const notify = (msg, type = 'success') => {
|
|
setNotification({ msg, type });
|
|
setTimeout(() => setNotification(null), 4000);
|
|
};
|
|
|
|
if (isLoadingStores && !activeStore) {
|
|
return (
|
|
<div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-slate-900 text-white" style={{ background: '#0f172a' }}>
|
|
<div className="spinner-border text-info mb-3" style={{ width: '3rem', height: '3rem' }} role="status">
|
|
<span className="visually-hidden">Loading Store Counter...</span>
|
|
</div>
|
|
<h5 className="fw-bold tracking-wide">HMS Multi-Building Medical Store</h5>
|
|
<p className="text-secondary small">Synchronizing pharmacy counters, terminal licenses & ABDM...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!activeStore) {
|
|
return (
|
|
<div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-slate-900 text-white p-4 text-center" style={{ background: '#0f172a' }}>
|
|
<div className="bg-danger text-white rounded-circle p-3 mb-3 d-flex align-items-center justify-content-center" style={{ width: 64, height: 64 }}>
|
|
<i className="bi bi-exclamation-triangle fs-2"></i>
|
|
</div>
|
|
<h4 className="fw-bold">Medical Store Not Found</h4>
|
|
<p className="text-secondary mb-3" style={{ maxWidth: 480 }}>
|
|
Could not locate any active pharmacy store counter for <code>/{storeSlugFromUrl || 'default'}</code>.
|
|
Please verify store configuration in HMS Admin.
|
|
</p>
|
|
<div className="d-flex gap-2">
|
|
<a href="/MedicalStore/storeA" className="btn btn-outline-light btn-sm">
|
|
<i className="bi bi-shop me-1"></i> Try Main Store (storeA)
|
|
</a>
|
|
<a href="/app/admin/medical-stores" className="btn btn-primary-custom btn-sm">
|
|
<i className="bi bi-gear me-1"></i> Open HMS Store Settings
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Machine Lock Screen Modal if PC is not verified */}
|
|
{!isDeviceAuthorized && activeStore && (
|
|
<div className="machine-lock-backdrop">
|
|
<div className="card shadow-lg border-0" style={{ maxWidth: 460, width: '100%', borderRadius: 16 }}>
|
|
<div className="card-header bg-dark text-white p-3 text-center border-0" style={{ borderTopLeftRadius: 16, borderTopRightRadius: 16 }}>
|
|
<i className="bi bi-shield-lock-fill text-warning fs-1 d-block mb-1"></i>
|
|
<h5 className="fw-bold mb-0">Terminal Machine Verification</h5>
|
|
<small className="text-slate-300" style={{ color: '#94a3b8' }}>Counter Authorization Required</small>
|
|
</div>
|
|
<div className="card-body p-4">
|
|
<div className="text-center mb-3">
|
|
<h6 className="fw-bold text-dark">{activeStore.store_name}</h6>
|
|
<small className="text-muted d-block">
|
|
<i className="bi bi-geo-alt me-1"></i>{activeStore.building_name || 'Main Hospital'} • {activeStore.floor_no || 'Ground Floor'}
|
|
</small>
|
|
<span className="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1 mt-1">
|
|
Link: MedicalStore/{activeStore.store_slug}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="small text-muted text-center mb-3">
|
|
This computer terminal is accessing the counter for the first time. Please enter the <strong>Security Key</strong> or <strong>6-digit OTP</strong> provided by HMS Admin.
|
|
</p>
|
|
|
|
<form onSubmit={submitDeviceVerification}>
|
|
<div className="mb-3">
|
|
<label className="form-label small fw-bold text-dark mb-1">Computer / Machine Name</label>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
value={machineName}
|
|
onChange={(e) => setMachineName(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<div className="btn-group btn-group-sm w-100 mb-2">
|
|
<button
|
|
type="button"
|
|
className={`btn ${verifyMethod === 'key' ? 'btn-primary' : 'btn-outline-secondary'}`}
|
|
onClick={() => setVerifyMethod('key')}
|
|
>
|
|
<i className="bi bi-key-fill me-1"></i> Admin Security Key
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn ${verifyMethod === 'otp' ? 'btn-primary' : 'btn-outline-secondary'}`}
|
|
onClick={() => setVerifyMethod('otp')}
|
|
>
|
|
<i className="bi bi-123 me-1"></i> 6-Digit Counter OTP
|
|
</button>
|
|
</div>
|
|
|
|
<input
|
|
type={verifyMethod === 'otp' ? 'number' : 'text'}
|
|
className="form-control text-center fw-bold fs-5 letter-spacing-1"
|
|
placeholder={verifyMethod === 'key' ? 'e.g. HMS-XXXXXX-XXX' : 'Enter 6-digit OTP'}
|
|
value={secKeyInput}
|
|
onChange={(e) => setSecKeyInput(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="btn btn-success-custom w-100 py-2.5 mt-3 fw-bold"
|
|
disabled={isVerifying}
|
|
>
|
|
{isVerifying ? (
|
|
<span><i className="bi bi-hourglass-split me-1"></i> Verifying Terminal...</span>
|
|
) : (
|
|
<span><i className="bi bi-shield-check me-1"></i> Verify Machine & Unlock Counter</span>
|
|
)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Top Store Header */}
|
|
<header className="navbar-store">
|
|
<div className="container-fluid d-flex flex-wrap align-items-center justify-content-between gap-2">
|
|
<div className="d-flex align-items-center gap-3">
|
|
<div className="bg-primary text-white p-2 rounded-3 d-flex align-items-center justify-content-center" style={{ width: 40, height: 40 }}>
|
|
<i className="bi bi-capsule fs-5"></i>
|
|
</div>
|
|
<div>
|
|
<div className="d-flex align-items-center gap-2">
|
|
<h6 className="mb-0 fw-bold text-white fs-5">{activeStore ? activeStore.store_name : 'Medical Store Counter'}</h6>
|
|
{activeStore && (
|
|
<span className="badge bg-info-subtle text-info border border-info px-2 py-0.5 rounded-pill" style={{ fontSize: '0.65rem' }}>
|
|
/{activeStore.store_slug || activeStore.store_code}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<small className="text-slate-400" style={{ color: '#94a3b8' }}>
|
|
<i className="bi bi-geo-alt me-1"></i>
|
|
{activeStore ? `${activeStore.building_name || 'Main Building'} • ${activeStore.floor_no || 'Ground Floor'}` : 'Counter'}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Store Statutory License Badges */}
|
|
{activeStore && (
|
|
<div className="d-none d-md-flex align-items-center gap-2">
|
|
{activeStore.abdm_hfr_id && (
|
|
<span className="badge bg-success-subtle text-success border border-success px-2 py-1" title="ABDM Health Facility Registry">
|
|
<i className="bi bi-shield-fill-check me-1"></i> HFR: {activeStore.abdm_hfr_id}
|
|
</span>
|
|
)}
|
|
<span className="badge-license" title="Retail Allopathic Drug License">
|
|
DL 20B: {activeStore.drug_license_no_20b || 'N/A'}
|
|
</span>
|
|
<span className="badge-license" title="Schedule C/C1 Drug License">
|
|
DL 21B: {activeStore.drug_license_no_21b || 'N/A'}
|
|
</span>
|
|
<span className="badge-gst" title="GSTIN">
|
|
GSTIN: {activeStore.gstin || 'N/A'}
|
|
</span>
|
|
{isDeviceAuthorized && (
|
|
<span className="badge bg-success text-white rounded-pill px-2.5 py-1" style={{ fontSize: '0.7rem' }}>
|
|
<i className="bi bi-shield-check me-1"></i> Terminal Verified
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Store Selector & Exit */}
|
|
<div className="d-flex align-items-center gap-2">
|
|
<select
|
|
className="form-select form-select-sm bg-dark text-white border-secondary"
|
|
style={{ minWidth: 200 }}
|
|
value={activeStoreId || ''}
|
|
onChange={(e) => setActiveStoreId(Number(e.target.value))}
|
|
>
|
|
{stores.map(s => (
|
|
<option key={s.store_id} value={s.store_id}>
|
|
{s.store_name} ({s.store_slug})
|
|
</option>
|
|
))}
|
|
</select>
|
|
<a href="/app" className="btn btn-sm btn-outline-light" title="Return to App Hub">
|
|
<i className="bi bi-grid-fill"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Notification Alert Banner */}
|
|
{notification && (
|
|
<div className={`alert alert-${notification.type === 'error' ? 'danger' : 'success'} alert-dismissible fade show m-2 p-2 px-3`} role="alert">
|
|
<i className={`bi bi-${notification.type === 'error' ? 'exclamation-triangle' : 'check-circle'}-fill me-2`}></i>
|
|
{notification.msg}
|
|
<button type="button" className="btn-close p-2" onClick={() => setNotification(null)}></button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Navigation Tabs */}
|
|
<nav className="nav-tabs-custom d-flex flex-wrap">
|
|
<button className={`nav-link ${activeTab === 'pos' ? 'active' : ''}`} onClick={() => setActiveTab('pos')}>
|
|
<i className="bi bi-cart3 me-1"></i> POS Counter Desk
|
|
</button>
|
|
<button className={`nav-link ${activeTab === 'inventory' ? 'active' : ''}`} onClick={() => setActiveTab('inventory')}>
|
|
<i className="bi bi-boxes me-1"></i> Live Stock & Batches
|
|
</button>
|
|
<button className={`nav-link ${activeTab === 'purchase' ? 'active' : ''}`} onClick={() => setActiveTab('purchase')}>
|
|
<i className="bi bi-box-arrow-in-down me-1"></i> Purchases & Marg Import
|
|
</button>
|
|
<button className={`nav-link ${activeTab === 'transfer' ? 'active' : ''}`} onClick={() => setActiveTab('transfer')}>
|
|
<i className="bi bi-arrow-left-right me-1"></i> Inter-Store Indents
|
|
</button>
|
|
<button className={`nav-link ${activeTab === 'ledgers' ? 'active' : ''}`} onClick={() => setActiveTab('ledgers')}>
|
|
<i className="bi bi-journal-text me-1"></i> Ledgers, Daybook & GST
|
|
</button>
|
|
<button className={`nav-link ${activeTab === 'settings' ? 'active' : ''}`} onClick={() => setActiveTab('settings')}>
|
|
<i className="bi bi-gear me-1"></i> Store & License Setup
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Main View Container */}
|
|
<main className="container-fluid py-3">
|
|
{activeTab === 'pos' && <PosCounter store={activeStore} notify={notify} />}
|
|
{activeTab === 'inventory' && <InventoryView store={activeStore} notify={notify} />}
|
|
{activeTab === 'purchase' && <PurchaseView store={activeStore} notify={notify} />}
|
|
{activeTab === 'transfer' && <TransferView store={activeStore} stores={stores} notify={notify} />}
|
|
{activeTab === 'ledgers' && <LedgersView store={activeStore} notify={notify} />}
|
|
{activeTab === 'settings' && <SettingsView store={activeStore} onStoreSaved={fetchStores} notify={notify} />}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// =========================================================================
|
|
// 1. POS BILLING & DISPENSING COUNTER (MULTI-PRINT: A4, A5, 80mm THERMAL)
|
|
// =========================================================================
|
|
function PosCounter({ store, notify }) {
|
|
if (!store) {
|
|
return (
|
|
<div className="text-center py-5 text-muted">
|
|
<div className="spinner-border spinner-border-sm text-primary me-2"></div>
|
|
Loading counter desk...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const [patientQuery, setPatientQuery] = useState('');
|
|
const [patientResults, setPatientResults] = useState([]);
|
|
const [selectedPatient, setSelectedPatient] = useState(null);
|
|
const [patientType, setPatientType] = useState('Walk-in'); // Walk-in, OPD, IPD
|
|
|
|
const [walkinAbhaId, setWalkinAbhaId] = useState('');
|
|
const [walkinAbhaAddress, setWalkinAbhaAddress] = useState('');
|
|
const [showFhirModal, setShowFhirModal] = useState(false);
|
|
const [fhirBundleData, setFhirBundleData] = useState(null);
|
|
const [isLoadingFhir, setIsLoadingFhir] = useState(false);
|
|
const [copiedFhir, setCopiedFhir] = useState(false);
|
|
|
|
const [doctorName, setDoctorName] = useState('');
|
|
const [doctorRegNo, setDoctorRegNo] = useState('');
|
|
|
|
const [itemQuery, setItemQuery] = useState('');
|
|
const [itemResults, setItemResults] = useState([]);
|
|
const [isSearchingItems, setIsSearchingItems] = useState(false);
|
|
|
|
const [cart, setCart] = useState([]);
|
|
const [wholeDiscountType, setWholeDiscountType] = useState('pct'); // 'pct' or 'val'
|
|
const [wholeDiscountVal, setWholeDiscountVal] = useState(0);
|
|
const [paymentMode, setPaymentMode] = useState('Cash'); // Cash, UPI, Card, Mixed, IPD_Credit
|
|
const [paymentRef, setPaymentRef] = useState('');
|
|
|
|
const [lastInvoice, setLastInvoice] = useState(null);
|
|
const [printFormat, setPrintFormat] = useState('thermal'); // 'thermal', 'a5', 'a4'
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
|
|
// Search patient
|
|
const searchPatients = async (val) => {
|
|
setPatientQuery(val);
|
|
if (val.length < 2) {
|
|
setPatientResults([]);
|
|
return;
|
|
}
|
|
try {
|
|
const res = await fetch(API_BASE + `patient/search?q=${encodeURIComponent(val)}`);
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
setPatientResults(data.patients || []);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const selectPatient = (pt) => {
|
|
setSelectedPatient(pt);
|
|
setPatientResults([]);
|
|
setPatientQuery(pt.full_name + ' (' + pt.uhid + ')');
|
|
setWalkinAbhaId(pt.abha_id || '');
|
|
setWalkinAbhaAddress(pt.abha_address || '');
|
|
|
|
if (pt.has_active_ipd && pt.active_ipd) {
|
|
setPatientType('IPD');
|
|
setDoctorName(pt.active_ipd.doctor_name || '');
|
|
setPrintFormat('a4'); // Default IPD bills to A4
|
|
} else if (pt.has_active_opd && pt.active_opd) {
|
|
setPatientType('OPD');
|
|
setDoctorName(pt.active_opd.doctor_name || '');
|
|
setPrintFormat('a5'); // Default OPD bills to A5
|
|
} else {
|
|
setPatientType('Walk-in');
|
|
setPrintFormat('thermal'); // Default walkin to Thermal
|
|
}
|
|
};
|
|
|
|
const resetPatient = () => {
|
|
setSelectedPatient(null);
|
|
setPatientQuery('');
|
|
setPatientType('Walk-in');
|
|
setDoctorName('');
|
|
setDoctorRegNo('');
|
|
setWalkinAbhaId('');
|
|
setWalkinAbhaAddress('');
|
|
setPrintFormat('thermal');
|
|
};
|
|
|
|
const viewAbdmBundle = async (saleId) => {
|
|
setIsLoadingFhir(true);
|
|
setShowFhirModal(true);
|
|
setCopiedFhir(false);
|
|
try {
|
|
const res = await fetch(API_BASE + `abdm/bundle/${saleId}`);
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
setFhirBundleData(data);
|
|
} else {
|
|
notify(data.message || 'Unable to retrieve ABDM FHIR bundle', 'error');
|
|
setShowFhirModal(false);
|
|
}
|
|
} catch (e) {
|
|
notify('FHIR Fetch error: ' + e.message, 'error');
|
|
setShowFhirModal(false);
|
|
} finally {
|
|
setIsLoadingFhir(false);
|
|
}
|
|
};
|
|
|
|
const copyFhirToClipboard = () => {
|
|
if (!fhirBundleData?.bundle) return;
|
|
navigator.clipboard.writeText(JSON.stringify(fhirBundleData.bundle, null, 2));
|
|
setCopiedFhir(true);
|
|
setTimeout(() => setCopiedFhir(false), 2500);
|
|
};
|
|
|
|
// 1-Click Load Doctor Rx
|
|
const loadDoctorPrescription = async () => {
|
|
if (!selectedPatient) return;
|
|
const encType = selectedPatient.has_active_ipd ? 'ipd' : (selectedPatient.has_active_opd ? 'opd' : null);
|
|
const encId = selectedPatient.has_active_ipd ? selectedPatient.active_ipd.ipd_id : (selectedPatient.has_active_opd ? selectedPatient.active_opd.opd_id : null);
|
|
|
|
if (!encType || !encId) {
|
|
notify('No active OPD or IPD prescription found for this patient.', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(API_BASE + `patient/prescription/${encType}/${encId}`);
|
|
const data = await res.json();
|
|
if (data.status && data.medicines && data.medicines.length > 0) {
|
|
let addedCount = 0;
|
|
for (const med of data.medicines) {
|
|
const sRes = await fetch(API_BASE + `items/search?store_id=${store.store_id}&q=${encodeURIComponent(med.medicine_name)}`);
|
|
const sData = await sRes.json();
|
|
if (sData.status && sData.items && sData.items.length > 0) {
|
|
const matchedItem = sData.items[0];
|
|
if (matchedItem.fefo_batch) {
|
|
addItemToCart(matchedItem, matchedItem.fefo_batch, med.prescribed_qty || 10);
|
|
addedCount++;
|
|
}
|
|
}
|
|
}
|
|
notify(`Imported ${addedCount} prescribed medicines into cart!`, 'success');
|
|
} else {
|
|
notify('No electronic medicines found for this visit.', 'error');
|
|
}
|
|
} catch (e) {
|
|
notify('Failed to load prescription: ' + e.message, 'error');
|
|
}
|
|
};
|
|
|
|
// Search Items in Store
|
|
const searchItems = async (val) => {
|
|
setItemQuery(val);
|
|
if (val.length < 2) {
|
|
setItemResults([]);
|
|
return;
|
|
}
|
|
setIsSearchingItems(true);
|
|
try {
|
|
const res = await fetch(API_BASE + `items/search?store_id=${store.store_id}&q=${encodeURIComponent(val)}`);
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
setItemResults(data.items || []);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setIsSearchingItems(false);
|
|
}
|
|
};
|
|
|
|
const addItemToCart = (item, batch, qty = 1) => {
|
|
if (!batch) {
|
|
notify('No active batch available for ' + item.item_name, 'error');
|
|
return;
|
|
}
|
|
if (batch.is_expired) {
|
|
notify(`STATUTORY BLOCK: Batch ${batch.batch_no} is expired! Cannot be sold.`, 'error');
|
|
return;
|
|
}
|
|
|
|
const existingIdx = cart.findIndex(c => c.item_id === item.item_id && c.batch_id === batch.batch_id);
|
|
if (existingIdx >= 0) {
|
|
const updated = [...cart];
|
|
updated[existingIdx].qty += qty;
|
|
setCart(updated);
|
|
} else {
|
|
setCart([...cart, {
|
|
item_id: item.item_id,
|
|
item_name: item.item_name,
|
|
generic_name: item.generic_name,
|
|
unit_pack: item.unit_pack,
|
|
drug_schedule: item.drug_schedule,
|
|
hsn_code: item.hsn_code || '3004',
|
|
gst_rate: batch.gst_rate || 12.0,
|
|
batch_id: batch.batch_id,
|
|
batch_no: batch.batch_no,
|
|
expiry_display: batch.expiry_display,
|
|
expiry_date: batch.expiry_date,
|
|
current_qty: batch.current_qty,
|
|
unit_mrp: batch.mrp,
|
|
discount_type: 'pct',
|
|
discount_val: 0,
|
|
qty: qty
|
|
}]);
|
|
}
|
|
setItemResults([]);
|
|
setItemQuery('');
|
|
|
|
// Auto-suggest format based on item count
|
|
if (cart.length + 1 > 5 && printFormat === 'thermal') {
|
|
setPrintFormat('a5');
|
|
}
|
|
};
|
|
|
|
const getItemDiscount = (it) => {
|
|
const lineGross = (Number(it.qty) || 0) * (Number(it.unit_mrp) || 0);
|
|
const val = Number(it.discount_val) || 0;
|
|
if (val <= 0) return 0;
|
|
if (it.discount_type === 'val') {
|
|
return Math.min(lineGross, val);
|
|
} else {
|
|
const pct = Math.min(100, Math.max(0, val));
|
|
return (lineGross * pct) / 100;
|
|
}
|
|
};
|
|
|
|
const toggleItemDiscType = (idx) => {
|
|
const updated = [...cart];
|
|
const it = updated[idx];
|
|
const lineGross = (Number(it.qty) || 0) * (Number(it.unit_mrp) || 0);
|
|
const currentDisc = getItemDiscount(it);
|
|
if (it.discount_type === 'val') {
|
|
it.discount_type = 'pct';
|
|
it.discount_val = lineGross > 0 ? Number(((currentDisc / lineGross) * 100).toFixed(1)) : 0;
|
|
} else {
|
|
it.discount_type = 'val';
|
|
it.discount_val = Math.round(currentDisc);
|
|
}
|
|
setCart(updated);
|
|
};
|
|
|
|
const updateCartItem = (idx, field, val) => {
|
|
const updated = [...cart];
|
|
if (field === 'discount_type') {
|
|
updated[idx][field] = val;
|
|
} else {
|
|
updated[idx][field] = Number(val);
|
|
}
|
|
setCart(updated);
|
|
};
|
|
|
|
const removeCartItem = (idx) => {
|
|
setCart(cart.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
// Calculate totals with whole bill discount
|
|
const grossTotal = cart.reduce((acc, it) => acc + ((Number(it.qty) || 0) * (Number(it.unit_mrp) || 0)), 0);
|
|
const itemDiscountTotal = cart.reduce((acc, it) => acc + getItemDiscount(it), 0);
|
|
const balanceAfterItemDisc = Math.max(0, grossTotal - itemDiscountTotal);
|
|
|
|
let wholeDiscountAmt = 0;
|
|
const numWholeDisc = Number(wholeDiscountVal) || 0;
|
|
if (numWholeDisc > 0) {
|
|
if (wholeDiscountType === 'val') {
|
|
wholeDiscountAmt = Math.min(balanceAfterItemDisc, numWholeDisc);
|
|
} else {
|
|
const pct = Math.min(100, Math.max(0, numWholeDisc));
|
|
wholeDiscountAmt = (balanceAfterItemDisc * pct) / 100;
|
|
}
|
|
}
|
|
|
|
const discountTotal = itemDiscountTotal + wholeDiscountAmt;
|
|
const netBeforeRound = Math.max(0, grossTotal - discountTotal);
|
|
const netPayable = Math.round(netBeforeRound);
|
|
const roundOff = (netPayable - netBeforeRound).toFixed(2);
|
|
|
|
// Save and print sale
|
|
const processSale = async () => {
|
|
if (cart.length === 0) {
|
|
notify('Cart is empty!', 'error');
|
|
return;
|
|
}
|
|
|
|
if (paymentMode === 'IPD_Credit' && (!selectedPatient || !selectedPatient.has_active_ipd)) {
|
|
notify('IPD Credit mode is only allowed for admitted IPD patients.', 'error');
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
const payload = {
|
|
store_id: store.store_id,
|
|
patient_type: patientType,
|
|
uhid: selectedPatient ? selectedPatient.uhid : null,
|
|
patient_id: selectedPatient ? selectedPatient.patient_id : null,
|
|
opd_id: selectedPatient && selectedPatient.active_opd ? selectedPatient.active_opd.opd_id : null,
|
|
ipd_id: selectedPatient && selectedPatient.active_ipd ? selectedPatient.active_ipd.ipd_id : null,
|
|
patient_name: selectedPatient ? selectedPatient.full_name : (patientQuery || 'Walk-in Customer'),
|
|
patient_mobile: selectedPatient ? selectedPatient.mobile : '',
|
|
patient_address: selectedPatient ? selectedPatient.address : '',
|
|
abha_id: selectedPatient?.abha_id || walkinAbhaId || null,
|
|
abha_address: selectedPatient?.abha_address || walkinAbhaAddress || null,
|
|
age: selectedPatient ? selectedPatient.age : '',
|
|
gender: selectedPatient ? selectedPatient.gender : '',
|
|
doctor_name: doctorName || (selectedPatient?.active_opd?.doctor_name || selectedPatient?.active_ipd?.doctor_name || 'Dr. Consultant'),
|
|
doctor_reg_no: doctorRegNo,
|
|
payment_mode: paymentMode,
|
|
payment_reference: paymentRef,
|
|
whole_discount_type: wholeDiscountType,
|
|
whole_discount_val: Number(wholeDiscountVal) || 0,
|
|
items: cart.map(it => {
|
|
const lineGross = (Number(it.qty) || 0) * (Number(it.unit_mrp) || 0);
|
|
const lineDisc = getItemDiscount(it);
|
|
const discPct = lineGross > 0 ? Number(((lineDisc / lineGross) * 100).toFixed(2)) : 0;
|
|
return {
|
|
item_id: it.item_id,
|
|
batch_id: it.batch_id,
|
|
qty: Number(it.qty) || 1,
|
|
discount_type: it.discount_type || 'pct',
|
|
discount_val: Number(it.discount_val) || 0,
|
|
discount_pct: discPct,
|
|
discount_amount: lineDisc
|
|
};
|
|
})
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(API_BASE + 'sales/save', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
notify(`Invoice ${data.invoice_no} generated successfully! Amount: ₹${data.net_amount}`, 'success');
|
|
fetchInvoiceDetails(data.sale_id);
|
|
setCart([]);
|
|
setWholeDiscountVal(0);
|
|
resetPatient();
|
|
} else {
|
|
notify(data.message || 'Failed to complete sale.', 'error');
|
|
}
|
|
} catch (e) {
|
|
notify('Sale error: ' + e.message, 'error');
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const fetchInvoiceDetails = async (saleId) => {
|
|
try {
|
|
const res = await fetch(API_BASE + `sales/invoice/${saleId}`);
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
setLastInvoice(data);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="row g-3">
|
|
{/* Left Column: Patient Selector & Cart Grid */}
|
|
<div className="col-lg-8">
|
|
{/* Patient Information Panel */}
|
|
<div className="counter-card position-relative">
|
|
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
|
|
<div className="d-flex align-items-center gap-2">
|
|
<span className="fw-bold text-dark fs-6"><i className="bi bi-person-fill text-primary me-1"></i> Patient & Prescription</span>
|
|
<span className={`badge ${patientType === 'IPD' ? 'bg-danger' : (patientType === 'OPD' ? 'bg-primary' : 'bg-secondary')}`}>
|
|
{patientType}
|
|
</span>
|
|
</div>
|
|
{selectedPatient && (
|
|
<div className="d-flex gap-2">
|
|
{(selectedPatient.has_active_opd || selectedPatient.has_active_ipd) && (
|
|
<button className="btn btn-sm btn-outline-success py-1 px-2.5" onClick={loadDoctorPrescription}>
|
|
<i className="bi bi-file-earmark-medical me-1"></i> 1-Click Load Doctor Rx
|
|
</button>
|
|
)}
|
|
<button className="btn btn-sm btn-outline-secondary py-1 px-2" onClick={resetPatient}>
|
|
<i className="bi bi-x-circle me-1"></i> Clear
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="row g-2">
|
|
<div className="col-md-7 position-relative">
|
|
<div className="input-group input-group-sm">
|
|
<span className="input-group-text bg-light"><i className="bi bi-search"></i></span>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Search by UHID, Mobile, Name, OPD No, IPD No..."
|
|
value={patientQuery}
|
|
onChange={(e) => searchPatients(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Patient Search Results Dropdown */}
|
|
{patientResults.length > 0 && (
|
|
<div className="search-results-dropdown">
|
|
{patientResults.map(p => (
|
|
<div key={p.patient_id} className="search-item-row d-flex justify-content-between align-items-center" onClick={() => selectPatient(p)}>
|
|
<div>
|
|
<div className="fw-bold text-dark">
|
|
{p.full_name} <small className="text-primary">({p.uhid})</small>
|
|
{(p.abha_id || p.abha_address) && (
|
|
<span className="badge bg-success-subtle text-success border border-success ms-2" style={{ fontSize: '0.65rem' }}>
|
|
<i className="bi bi-shield-fill-check me-1"></i>ABHA: {p.abha_id || p.abha_address}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<small className="text-muted"><i className="bi bi-telephone me-1"></i>{p.mobile || 'No Mobile'} • {p.gender} • {p.age}</small>
|
|
</div>
|
|
<div className="text-end">
|
|
{p.has_active_ipd && <span className="badge bg-danger d-block mb-1">IPD Admitted: {p.active_ipd.bed_info?.bed_no || 'Bed'}</span>}
|
|
{p.has_active_opd && <span className="badge bg-info d-block">OPD Visit Today</span>}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-md-5">
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="Consultant Doctor Name"
|
|
value={doctorName}
|
|
onChange={(e) => setDoctorName(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ABDM ABHA ID & Address Quick-Link Row */}
|
|
<div className="row g-2 mt-1">
|
|
<div className="col-md-6">
|
|
<div className="input-group input-group-sm">
|
|
<span className="input-group-text bg-light text-success fw-bold" style={{ fontSize: '0.72rem' }}>
|
|
<i className="bi bi-shield-check me-1"></i> ABHA No
|
|
</span>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="14-Digit ABHA (e.g. 12-3456-7890-1234)"
|
|
value={walkinAbhaId}
|
|
onChange={(e) => setWalkinAbhaId(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="input-group input-group-sm">
|
|
<span className="input-group-text bg-light text-success fw-bold" style={{ fontSize: '0.72rem' }}>
|
|
<i className="bi bi-at me-1"></i> ABHA Address
|
|
</span>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="username@abdm"
|
|
value={walkinAbhaAddress}
|
|
onChange={(e) => setWalkinAbhaAddress(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Patient Context Tags */}
|
|
{selectedPatient && (
|
|
<div className="mt-2 p-2 bg-light rounded-2 d-flex flex-wrap gap-3 align-items-center" style={{ fontSize: '0.8rem' }}>
|
|
<span><strong>Name:</strong> {selectedPatient.full_name}</span>
|
|
<span><strong>UHID:</strong> <code className="text-primary">{selectedPatient.uhid}</code></span>
|
|
<span><strong>Gender/Age:</strong> {selectedPatient.gender}, {selectedPatient.age}</span>
|
|
{(selectedPatient.abha_id || selectedPatient.abha_address) && (
|
|
<span className="badge bg-success text-white py-1 px-2" style={{ fontSize: '0.75rem' }}>
|
|
<i className="bi bi-shield-fill-check me-1"></i> ABDM Linked: {selectedPatient.abha_id || ''} {selectedPatient.abha_address ? `(${selectedPatient.abha_address})` : ''}
|
|
</span>
|
|
)}
|
|
{selectedPatient.has_active_ipd && (
|
|
<span className="text-danger fw-bold">
|
|
<i className="bi bi-hospital me-1"></i>
|
|
{selectedPatient.active_ipd.bed_info?.ward_name || 'Ward'} / {selectedPatient.active_ipd.bed_info?.bed_no || 'Bed'} (Dr. {selectedPatient.active_ipd.doctor_name})
|
|
</span>
|
|
)}
|
|
{selectedPatient.has_active_opd && !selectedPatient.has_active_ipd && (
|
|
<span className="text-primary fw-bold">
|
|
<i className="bi bi-stethoscope me-1"></i>
|
|
OPD Dr. {selectedPatient.active_opd.doctor_name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Medicine Search & Barcode Scanner Line */}
|
|
<div className="counter-card position-relative">
|
|
<div className="d-flex align-items-center gap-2 mb-2">
|
|
<i className="bi bi-upc-scan text-primary fs-5"></i>
|
|
<span className="fw-bold fs-6">Medicine Lookup & Barcode Dispenser</span>
|
|
</div>
|
|
|
|
<div className="input-group">
|
|
<span className="input-group-text bg-light"><i className="bi bi-capsule"></i></span>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Type Medicine Name, Generic Molecule, or Scan Box Barcode..."
|
|
value={itemQuery}
|
|
onChange={(e) => searchItems(e.target.value)}
|
|
/>
|
|
{isSearchingItems && <span className="input-group-text bg-light"><i className="bi bi-hourglass-split"></i></span>}
|
|
</div>
|
|
|
|
{/* Item & FEFO Batch Dropdown */}
|
|
{itemResults.length > 0 && (
|
|
<div className="search-results-dropdown">
|
|
{itemResults.map(it => (
|
|
<div key={it.item_id} className="search-item-row">
|
|
<div className="d-flex justify-content-between align-items-center mb-1">
|
|
<div>
|
|
<span className="fw-bold text-dark fs-6">{it.item_name}</span>
|
|
<span className="badge bg-secondary ms-2" style={{ fontSize: '0.65rem' }}>{it.unit_pack}</span>
|
|
{it.drug_schedule && it.drug_schedule !== 'OTC' && (
|
|
<span className="badge bg-warning-subtle text-warning border border-warning ms-1" style={{ fontSize: '0.65rem' }}>
|
|
{it.drug_schedule}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<span className="text-muted me-2" style={{ fontSize: '0.75rem' }}>Total Stock: {it.total_stock}</span>
|
|
</div>
|
|
</div>
|
|
<small className="text-muted d-block mb-1"><i className="bi bi-diagram-3 me-1"></i>{it.generic_name} • HSN: {it.hsn_code}</small>
|
|
|
|
{/* Batches Table */}
|
|
{it.batches && it.batches.length > 0 ? (
|
|
<div className="d-flex flex-wrap gap-2 mt-1">
|
|
{it.batches.map(b => (
|
|
<button
|
|
key={b.batch_id}
|
|
className={`btn btn-sm ${b.is_expired ? 'btn-outline-danger disabled' : 'btn-outline-dark'} d-flex align-items-center gap-1 py-0.5 px-2`}
|
|
style={{ fontSize: '0.75rem' }}
|
|
onClick={() => addItemToCart(it, b, 1)}
|
|
disabled={b.is_expired}
|
|
>
|
|
<strong>{b.batch_no}</strong>
|
|
<span>(Exp: {b.expiry_display})</span>
|
|
<span className="text-success fw-bold">₹{b.mrp}</span>
|
|
<span className="badge bg-primary text-white">{b.current_qty} left</span>
|
|
{it.fefo_batch && it.fefo_batch.batch_id === b.batch_id && (
|
|
<span className="badge-fefo ms-1">FEFO</span>
|
|
)}
|
|
{b.is_near_expiry && (
|
|
<span className="badge-near-expiry ms-1">Near Exp</span>
|
|
)}
|
|
{b.is_expired && (
|
|
<span className="badge-expired ms-1">EXPIRED</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span className="text-danger fw-bold" style={{ fontSize: '0.75rem' }}>Out of Stock in this Counter</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Billing Cart Table */}
|
|
<div className="counter-card p-0 overflow-hidden">
|
|
<div className="p-3 pb-2 d-flex justify-content-between align-items-center border-bottom">
|
|
<h6 className="mb-0 fw-bold"><i className="bi bi-cart-check-fill text-success me-1"></i> Dispensing Cart ({cart.length} items)</h6>
|
|
{cart.length > 0 && (
|
|
<button className="btn btn-sm btn-link text-danger text-decoration-none p-0" onClick={() => setCart([])}>
|
|
Clear Cart
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="table-responsive" style={{ maxHeight: 380 }}>
|
|
<table className="table table-pos mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Medicine Name</th>
|
|
<th>Batch / Exp</th>
|
|
<th style={{ width: 85 }}>Qty</th>
|
|
<th>MRP (₹)</th>
|
|
<th style={{ width: 125 }}>Disc (% / ₹)</th>
|
|
<th>GST%</th>
|
|
<th className="text-end">Total (₹)</th>
|
|
<th style={{ width: 40 }}></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{cart.length === 0 ? (
|
|
<tr>
|
|
<td colSpan="9" className="text-center py-4 text-muted">
|
|
<i className="bi bi-basket3 fs-3 d-block mb-1"></i>
|
|
Scan barcode or search medicine to add items to bill.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
cart.map((it, idx) => {
|
|
const lineGross = (Number(it.qty) || 0) * (Number(it.unit_mrp) || 0);
|
|
const lineDisc = getItemDiscount(it);
|
|
const lineNet = Math.max(0, lineGross - lineDisc).toFixed(2);
|
|
return (
|
|
<tr key={idx}>
|
|
<td>{idx + 1}</td>
|
|
<td>
|
|
<div className="fw-bold">{it.item_name}</div>
|
|
<small className="text-muted">{it.generic_name} • HSN: {it.hsn_code}</small>
|
|
</td>
|
|
<td>
|
|
<span className="badge bg-light text-dark border">{it.batch_no}</span>
|
|
<div className="text-muted" style={{ fontSize: '0.7rem' }}>Exp: {it.expiry_display}</div>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
className="form-control form-control-sm text-center fw-bold"
|
|
min="1"
|
|
max={it.current_qty}
|
|
value={it.qty}
|
|
onChange={(e) => updateCartItem(idx, 'qty', e.target.value)}
|
|
/>
|
|
</td>
|
|
<td className="fw-semibold">₹{it.unit_mrp}</td>
|
|
<td>
|
|
<div className="input-group input-group-sm" style={{ width: 115 }}>
|
|
<input
|
|
type="number"
|
|
className="form-control form-control-sm text-center px-1 fw-semibold"
|
|
min="0"
|
|
max={it.discount_type === 'pct' ? 100 : lineGross}
|
|
step={it.discount_type === 'pct' ? '0.5' : '1'}
|
|
value={it.discount_val ?? ''}
|
|
placeholder="0"
|
|
onChange={(e) => updateCartItem(idx, 'discount_val', e.target.value)}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className={`btn btn-sm ${it.discount_type === 'pct' ? 'btn-primary' : 'btn-warning text-dark'} px-2 py-0 fw-bold`}
|
|
title={`Click to switch between % and ₹ (Currently: ${it.discount_type === 'pct' ? 'Percentage' : 'Value in Rupees'})`}
|
|
onClick={() => toggleItemDiscType(idx)}
|
|
>
|
|
{it.discount_type === 'pct' ? '%' : '₹'}
|
|
</button>
|
|
</div>
|
|
{lineDisc > 0 && (
|
|
<div className="text-muted text-center mt-0.5" style={{ fontSize: '0.68rem' }}>
|
|
{it.discount_type === 'pct'
|
|
? `-₹${lineDisc.toFixed(2)}`
|
|
: `${(lineGross > 0 ? ((lineDisc / lineGross) * 100).toFixed(1) : 0)}% off`}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td>{it.gst_rate}%</td>
|
|
<td className="text-end fw-bold text-dark">₹{lineNet}</td>
|
|
<td>
|
|
<button className="btn btn-sm btn-outline-danger py-0 px-1" onClick={() => removeCartItem(idx)}>
|
|
<i className="bi bi-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Checkout, Totals & Multi-Format Printing */}
|
|
<div className="col-lg-4">
|
|
<div className="pos-summary-card">
|
|
<h5 className="fw-bold text-white mb-3 d-flex justify-content-between align-items-center">
|
|
<span>Checkout Desk</span>
|
|
<span className="fs-6 text-primary">{store?.store_code || ''}</span>
|
|
</h5>
|
|
|
|
{/* Whole Bill Discount Controller */}
|
|
<div className="p-2.5 rounded-3 mb-3" style={{ background: 'rgba(255, 255, 255, 0.08)', border: '1px solid rgba(255, 255, 255, 0.15)' }}>
|
|
<div className="d-flex justify-content-between align-items-center mb-1.5">
|
|
<label className="text-white small fw-bold mb-0 d-flex align-items-center gap-1">
|
|
<i className="bi bi-tag-fill text-warning"></i> Whole Bill Discount
|
|
</label>
|
|
<div className="btn-group btn-group-sm">
|
|
<button
|
|
type="button"
|
|
className={`btn btn-xs py-0.5 px-2 ${wholeDiscountType === 'pct' ? 'btn-warning text-dark fw-bold' : 'btn-outline-light text-white'}`}
|
|
style={{ fontSize: '0.72rem' }}
|
|
onClick={() => setWholeDiscountType('pct')}
|
|
>
|
|
% Percent
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn btn-xs py-0.5 px-2 ${wholeDiscountType === 'val' ? 'btn-warning text-dark fw-bold' : 'btn-outline-light text-white'}`}
|
|
style={{ fontSize: '0.72rem' }}
|
|
onClick={() => setWholeDiscountType('val')}
|
|
>
|
|
₹ Fixed Value
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="input-group input-group-sm mb-2">
|
|
<span className="input-group-text bg-dark border-secondary text-warning fw-bold">
|
|
{wholeDiscountType === 'pct' ? '%' : '₹'}
|
|
</span>
|
|
<input
|
|
type="number"
|
|
className="form-control form-control-sm bg-dark text-white border-secondary fw-bold"
|
|
min="0"
|
|
max={wholeDiscountType === 'pct' ? 100 : balanceAfterItemDisc}
|
|
step={wholeDiscountType === 'pct' ? '0.5' : '1'}
|
|
placeholder={wholeDiscountType === 'pct' ? 'Enter % (e.g. 10 for 10%)' : 'Enter ₹ (e.g. 50 for ₹50 off)'}
|
|
value={wholeDiscountVal || ''}
|
|
onChange={(e) => setWholeDiscountVal(e.target.value)}
|
|
/>
|
|
{Number(wholeDiscountVal) > 0 && (
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-outline-danger"
|
|
title="Reset Whole Bill Discount"
|
|
onClick={() => setWholeDiscountVal(0)}
|
|
>
|
|
<i className="bi bi-x-lg"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick Preset Buttons */}
|
|
<div className="d-flex flex-wrap gap-1 align-items-center">
|
|
<small className="text-slate-400 me-1" style={{ fontSize: '0.7rem', color: '#94a3b8' }}>Presets:</small>
|
|
{wholeDiscountType === 'pct' ? (
|
|
[5, 10, 15, 20].map(p => (
|
|
<button
|
|
key={p}
|
|
type="button"
|
|
className={`badge border ${Number(wholeDiscountVal) === p ? 'bg-warning text-dark border-warning' : 'bg-transparent text-white border-secondary'}`}
|
|
style={{ cursor: 'pointer', padding: '4px 8px', fontSize: '0.7rem' }}
|
|
onClick={() => setWholeDiscountVal(p)}
|
|
>
|
|
{p}%
|
|
</button>
|
|
))
|
|
) : (
|
|
[20, 50, 100, 200].map(v => (
|
|
<button
|
|
key={v}
|
|
type="button"
|
|
className={`badge border ${Number(wholeDiscountVal) === v ? 'bg-warning text-dark border-warning' : 'bg-transparent text-white border-secondary'}`}
|
|
style={{ cursor: 'pointer', padding: '4px 8px', fontSize: '0.7rem' }}
|
|
onClick={() => setWholeDiscountVal(v)}
|
|
>
|
|
₹{v}
|
|
</button>
|
|
))
|
|
)}
|
|
{Number(wholeDiscountVal) > 0 && (
|
|
<button
|
|
type="button"
|
|
className="badge bg-danger-subtle text-danger border border-danger ms-auto"
|
|
style={{ cursor: 'pointer', padding: '4px 6px', fontSize: '0.7rem' }}
|
|
onClick={() => setWholeDiscountVal(0)}
|
|
>
|
|
Clear
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Breakdown */}
|
|
<div className="d-flex justify-content-between mb-1.5 text-slate-300" style={{ color: '#cbd5e1' }}>
|
|
<span>Gross Items Total:</span>
|
|
<span className="fw-bold">₹{grossTotal.toFixed(2)}</span>
|
|
</div>
|
|
|
|
{itemDiscountTotal > 0 && (
|
|
<div className="d-flex justify-content-between mb-1 text-slate-300" style={{ fontSize: '0.84rem', color: '#94a3b8' }}>
|
|
<span>Item-Level Discounts:</span>
|
|
<span className="text-danger">-₹{itemDiscountTotal.toFixed(2)}</span>
|
|
</div>
|
|
)}
|
|
|
|
{wholeDiscountAmt > 0 && (
|
|
<div className="d-flex justify-content-between mb-1 text-slate-300" style={{ fontSize: '0.84rem', color: '#94a3b8' }}>
|
|
<span>Whole Bill Discount ({wholeDiscountType === 'pct' ? `${wholeDiscountVal}%` : `₹${wholeDiscountVal}`}):</span>
|
|
<span className="text-danger">-₹{wholeDiscountAmt.toFixed(2)}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="d-flex justify-content-between mb-2 text-slate-300" style={{ color: '#cbd5e1' }}>
|
|
<span>Total Discounts:</span>
|
|
<span className="text-danger fw-bold">-₹{discountTotal.toFixed(2)}</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-2 text-slate-300" style={{ color: '#cbd5e1' }}>
|
|
<span>Round Off:</span>
|
|
<span>₹{roundOff}</span>
|
|
</div>
|
|
<hr style={{ borderColor: 'rgba(255,255,255,0.15)' }} />
|
|
|
|
<div className="d-flex justify-content-between align-items-center mb-4">
|
|
<span className="fs-5 fw-bold text-white">Net Payable:</span>
|
|
<span className="fs-3 fw-bolder text-warning">₹{netPayable.toLocaleString('en-IN')}</span>
|
|
</div>
|
|
|
|
{/* Payment Mode Selection */}
|
|
<label className="form-label text-white fw-bold mb-2">Payment Method</label>
|
|
<div className="row g-2 mb-3">
|
|
<div className="col-6">
|
|
<button
|
|
className={`btn btn-sm w-100 ${paymentMode === 'Cash' ? 'btn-primary-custom' : 'btn-outline-light'}`}
|
|
onClick={() => setPaymentMode('Cash')}
|
|
>
|
|
<i className="bi bi-cash-stack me-1"></i> Cash
|
|
</button>
|
|
</div>
|
|
<div className="col-6">
|
|
<button
|
|
className={`btn btn-sm w-100 ${paymentMode === 'UPI' ? 'btn-primary-custom' : 'btn-outline-light'}`}
|
|
onClick={() => setPaymentMode('UPI')}
|
|
>
|
|
<i className="bi bi-qr-code-scan me-1"></i> UPI / QR
|
|
</button>
|
|
</div>
|
|
<div className="col-6">
|
|
<button
|
|
className={`btn btn-sm w-100 ${paymentMode === 'Card' ? 'btn-primary-custom' : 'btn-outline-light'}`}
|
|
onClick={() => setPaymentMode('Card')}
|
|
>
|
|
<i className="bi bi-credit-card me-1"></i> Debit/Credit
|
|
</button>
|
|
</div>
|
|
<div className="col-6">
|
|
<button
|
|
className={`btn btn-sm w-100 ${paymentMode === 'IPD_Credit' ? 'btn-danger' : 'btn-outline-light'}`}
|
|
onClick={() => setPaymentMode('IPD_Credit')}
|
|
title="Charge to IPD Patient Bill"
|
|
>
|
|
<i className="bi bi-hospital me-1"></i> IPD Bill Post
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{paymentMode === 'IPD_Credit' && (
|
|
<div className="alert alert-warning py-2 mb-3" style={{ fontSize: '0.78rem' }}>
|
|
<i className="bi bi-info-circle me-1"></i>
|
|
Medicines will be charged directly to the patient's IPD Hospital Account and settled at discharge.
|
|
</div>
|
|
)}
|
|
|
|
{paymentMode === 'UPI' && store?.upi_id && (
|
|
<div className="bg-dark p-2 rounded-2 text-center mb-3">
|
|
<small className="text-muted d-block">Store UPI VPA: <span className="text-warning fw-bold">{store?.upi_id}</span></small>
|
|
</div>
|
|
)}
|
|
|
|
{/* Print Format Selector */}
|
|
<div className="mb-3">
|
|
<label className="form-label text-white small fw-bold mb-1">Invoice Print Format</label>
|
|
<div className="btn-group btn-group-sm w-100">
|
|
<button
|
|
type="button"
|
|
className={`btn ${printFormat === 'thermal' ? 'btn-warning text-dark fw-bold' : 'btn-outline-light'}`}
|
|
onClick={() => setPrintFormat('thermal')}
|
|
>
|
|
Thermal 80mm (1-5 Items)
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn ${printFormat === 'a5' ? 'btn-warning text-dark fw-bold' : 'btn-outline-light'}`}
|
|
onClick={() => setPrintFormat('a5')}
|
|
>
|
|
A5 Invoice (OPD)
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn ${printFormat === 'a4' ? 'btn-warning text-dark fw-bold' : 'btn-outline-light'}`}
|
|
onClick={() => setPrintFormat('a4')}
|
|
>
|
|
A4 Tax Bill (IPD)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className="btn btn-success-custom w-100 py-2.5 fs-6"
|
|
onClick={processSale}
|
|
disabled={isProcessing || cart.length === 0}
|
|
>
|
|
{isProcessing ? (
|
|
<span><i className="bi bi-hourglass-split me-2"></i> Generating Bill...</span>
|
|
) : (
|
|
<span><i className="bi bi-printer me-2"></i> Complete Sale & Print ({printFormat.toUpperCase()})</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Print Preview Component for Thermal 80mm, A5, and A4 */}
|
|
{lastInvoice && (
|
|
<div className="counter-card mt-3">
|
|
<div className="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
|
|
<div className="d-flex flex-wrap align-items-center gap-2">
|
|
<span className="fw-bold text-success"><i className="bi bi-check-circle me-1"></i> Bill: {lastInvoice.sale.invoice_no}</span>
|
|
{lastInvoice.sale.abdm_care_context_ref && (
|
|
<span className="badge bg-success-subtle text-success border border-success" title="Ayushman Bharat Digital Mission Care Context Reference">
|
|
<i className="bi bi-shield-fill-check me-1"></i> {lastInvoice.sale.abdm_care_context_ref}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="d-flex gap-1">
|
|
<button
|
|
className="btn btn-sm btn-outline-success py-0 px-2"
|
|
onClick={() => viewAbdmBundle(lastInvoice.sale.sale_id)}
|
|
title="View official ABDM FHIR R4 MedicationDispense JSON Document Bundle"
|
|
>
|
|
<i className="bi bi-filetype-json me-1"></i> FHIR R4 Bundle
|
|
</button>
|
|
<button className={`btn btn-sm ${printFormat === 'thermal' ? 'btn-dark' : 'btn-outline-secondary'} py-0 px-2`} onClick={() => setPrintFormat('thermal')}>80mm</button>
|
|
<button className={`btn btn-sm ${printFormat === 'a5' ? 'btn-dark' : 'btn-outline-secondary'} py-0 px-2`} onClick={() => setPrintFormat('a5')}>A5</button>
|
|
<button className={`btn btn-sm ${printFormat === 'a4' ? 'btn-dark' : 'btn-outline-secondary'} py-0 px-2`} onClick={() => setPrintFormat('a4')}>A4</button>
|
|
<button className="btn btn-sm btn-primary py-0 px-2" onClick={() => window.print()} title="Print Bill">
|
|
<i className="bi bi-printer"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="printable-container">
|
|
{/* Format 1: 80mm Thermal Slip (Single or 1-5 Items) */}
|
|
{printFormat === 'thermal' && (
|
|
<div className="print-thermal-80mm">
|
|
<div className="text-center fw-bold fs-6">{lastInvoice.sale.store_name}</div>
|
|
<div className="text-center">{lastInvoice.sale.building_name}, {lastInvoice.sale.floor_no}</div>
|
|
{lastInvoice.sale.abdm_hfr_id && (
|
|
<div className="text-center" style={{ fontSize: '9px' }}>HFR ID: {lastInvoice.sale.abdm_hfr_id}</div>
|
|
)}
|
|
<div className="text-center">DL 20B: {lastInvoice.sale.drug_license_no_20b}</div>
|
|
<div className="text-center">DL 21B: {lastInvoice.sale.drug_license_no_21b}</div>
|
|
<div className="text-center">GSTIN: {lastInvoice.sale.gstin}</div>
|
|
<hr style={{ margin: '4px 0' }} />
|
|
<div>Bill No: <strong>{lastInvoice.sale.invoice_no}</strong></div>
|
|
<div>Date: {lastInvoice.sale.sale_date}</div>
|
|
<div>Patient: {lastInvoice.sale.patient_name} {lastInvoice.sale.uhid ? `(${lastInvoice.sale.uhid})` : ''}</div>
|
|
{(lastInvoice.sale.abha_id || lastInvoice.sale.abha_address) && (
|
|
<div style={{ fontSize: '9px' }}>ABHA: {lastInvoice.sale.abha_id || ''} {lastInvoice.sale.abha_address ? `(${lastInvoice.sale.abha_address})` : ''}</div>
|
|
)}
|
|
{lastInvoice.sale.abdm_care_context_ref && (
|
|
<div style={{ fontSize: '8px' }}>Care Context: {lastInvoice.sale.abdm_care_context_ref}</div>
|
|
)}
|
|
<div>Doctor: {lastInvoice.sale.doctor_name}</div>
|
|
<hr style={{ margin: '4px 0' }} />
|
|
<table style={{ width: '100%', fontSize: '10px' }}>
|
|
<thead>
|
|
<tr>
|
|
<th style={{ textAlign: 'left' }}>Item</th>
|
|
<th style={{ textAlign: 'center' }}>Batch</th>
|
|
<th style={{ textAlign: 'center' }}>Qty</th>
|
|
<th style={{ textAlign: 'right' }}>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{lastInvoice.items.map((it, i) => (
|
|
<tr key={i}>
|
|
<td>{it.item_name}</td>
|
|
<td style={{ textAlign: 'center' }}>{it.batch_no}</td>
|
|
<td style={{ textAlign: 'center' }}>{it.qty}</td>
|
|
<td style={{ textAlign: 'right' }}>₹{it.total_amount}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<hr style={{ margin: '4px 0' }} />
|
|
<div className="d-flex justify-content-between" style={{ fontSize: '10px' }}>
|
|
<span>Gross Total:</span>
|
|
<span>₹{lastInvoice.sale.gross_amount}</span>
|
|
</div>
|
|
{Number(lastInvoice.sale.discount_amount) > 0 && (
|
|
<div className="d-flex justify-content-between text-danger" style={{ fontSize: '10px' }}>
|
|
<span>Total Discount:</span>
|
|
<span>-₹{lastInvoice.sale.discount_amount}</span>
|
|
</div>
|
|
)}
|
|
<div className="d-flex justify-content-between fw-bold" style={{ fontSize: '12px' }}>
|
|
<span>NET AMOUNT:</span>
|
|
<span>₹{lastInvoice.sale.net_amount}</span>
|
|
</div>
|
|
<div style={{ fontSize: '9px', marginTop: 4 }}>Mode: {lastInvoice.sale.payment_mode}</div>
|
|
<div style={{ fontSize: '9px', marginTop: 4, textAlign: 'center' }}>
|
|
R.Ph: {lastInvoice.sale.registered_pharmacist_name || 'Pharmacist'} {lastInvoice.sale.pharmacist_hpr_id ? `(HPR: ${lastInvoice.sale.pharmacist_hpr_id})` : ''}
|
|
</div>
|
|
<div style={{ fontSize: '8px', textAlign: 'center', marginTop: 4 }}>
|
|
{lastInvoice.sale.terms_conditions || 'Thank you! Get well soon.'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Format 2: A5 Half-Page Invoice (Normal OPD/Walk-in) */}
|
|
{printFormat === 'a5' && (
|
|
<div className="print-a5-invoice">
|
|
<div className="d-flex justify-content-between align-items-start border-bottom pb-2 mb-2">
|
|
<div>
|
|
<h6 className="fw-bold mb-0 text-primary">{lastInvoice.sale.store_name}</h6>
|
|
<div style={{ fontSize: '10px' }}>{lastInvoice.sale.building_name}, {lastInvoice.sale.floor_no}, {lastInvoice.sale.store_address}</div>
|
|
<div style={{ fontSize: '10px' }}>
|
|
<strong>DL 20B:</strong> {lastInvoice.sale.drug_license_no_20b} | <strong>DL 21B:</strong> {lastInvoice.sale.drug_license_no_21b}
|
|
{lastInvoice.sale.abdm_hfr_id && <span> | <strong>HFR ID:</strong> {lastInvoice.sale.abdm_hfr_id}</span>}
|
|
</div>
|
|
<div style={{ fontSize: '10px' }}><strong>GSTIN:</strong> {lastInvoice.sale.gstin} | <strong>Phone:</strong> {lastInvoice.sale.contact_phone}</div>
|
|
</div>
|
|
<div className="text-end">
|
|
<span className="badge bg-dark text-white mb-1">RETAIL TAX INVOICE</span>
|
|
<div className="fw-bold" style={{ fontSize: '12px' }}>{lastInvoice.sale.invoice_no}</div>
|
|
<div className="text-muted" style={{ fontSize: '10px' }}>{lastInvoice.sale.sale_date}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row g-1 mb-2 p-1.5 bg-light rounded" style={{ fontSize: '10px' }}>
|
|
<div className="col-6"><strong>Patient:</strong> {lastInvoice.sale.patient_name} {lastInvoice.sale.uhid ? `(${lastInvoice.sale.uhid})` : ''}</div>
|
|
<div className="col-6"><strong>Prescribed By:</strong> {lastInvoice.sale.doctor_name}</div>
|
|
<div className="col-6"><strong>Age/Gender:</strong> {lastInvoice.sale.age || 'N/A'} / {lastInvoice.sale.gender || 'N/A'}</div>
|
|
<div className="col-6"><strong>Payment Mode:</strong> {lastInvoice.sale.payment_mode}</div>
|
|
{(lastInvoice.sale.abha_id || lastInvoice.sale.abha_address) && (
|
|
<div className="col-12 text-success">
|
|
<strong>ABHA:</strong> {lastInvoice.sale.abha_id || 'N/A'} ({lastInvoice.sale.abha_address || 'N/A'})
|
|
{lastInvoice.sale.abdm_care_context_ref && <span> | <strong>Care Context:</strong> {lastInvoice.sale.abdm_care_context_ref}</span>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<table className="table table-bordered table-sm mb-2" style={{ fontSize: '10px' }}>
|
|
<thead className="table-light">
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Medicine Name</th>
|
|
<th>HSN</th>
|
|
<th>Batch</th>
|
|
<th>Exp</th>
|
|
<th>Qty</th>
|
|
<th>MRP (₹)</th>
|
|
<th className="text-end">Amount (₹)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{lastInvoice.items.map((it, i) => (
|
|
<tr key={i}>
|
|
<td>{i + 1}</td>
|
|
<td className="fw-bold">
|
|
{it.item_name}
|
|
{it.snomed_ct_code && <div className="text-muted" style={{ fontSize: '8px' }}>SNOMED: {it.snomed_ct_code}</div>}
|
|
</td>
|
|
<td>{it.hsn_code}</td>
|
|
<td>{it.batch_no}</td>
|
|
<td>{it.expiry_date.substring(0,7)}</td>
|
|
<td>{it.qty}</td>
|
|
<td>₹{it.unit_mrp}</td>
|
|
<td className="text-end fw-bold">₹{it.total_amount}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div className="d-flex justify-content-between align-items-center border-top pt-2">
|
|
<div style={{ fontSize: '9px' }}>
|
|
R.Ph: {lastInvoice.sale.registered_pharmacist_name || 'Pharmacist'} ({lastInvoice.sale.pharmacist_reg_no})
|
|
{lastInvoice.sale.pharmacist_hpr_id && <span> | HPR ID: {lastInvoice.sale.pharmacist_hpr_id}</span>}
|
|
</div>
|
|
<div className="text-end">
|
|
<div style={{ fontSize: '10px' }} className="text-muted">
|
|
Gross: ₹{lastInvoice.sale.gross_amount}
|
|
{Number(lastInvoice.sale.discount_amount) > 0 && (
|
|
<span className="text-danger ms-2">Disc: -₹{lastInvoice.sale.discount_amount}</span>
|
|
)}
|
|
</div>
|
|
<span className="fs-6 fw-bold text-primary">TOTAL: ₹{lastInvoice.sale.net_amount}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Format 3: A4 Comprehensive Hospital Tax Invoice (IPD & Large Bills) */}
|
|
{printFormat === 'a4' && (
|
|
<div className="print-a4-invoice">
|
|
<div className="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3">
|
|
<div>
|
|
<h4 className="fw-bold text-primary mb-1">{lastInvoice.sale.store_name}</h4>
|
|
<div className="text-muted">{lastInvoice.sale.building_name}, {lastInvoice.sale.floor_no}, {lastInvoice.sale.store_address}</div>
|
|
<div><strong>Drug License 20-B:</strong> {lastInvoice.sale.drug_license_no_20b} | <strong>21-B:</strong> {lastInvoice.sale.drug_license_no_21b} | <strong>FSSAI:</strong> {lastInvoice.sale.fssai_no || 'N/A'}</div>
|
|
<div>
|
|
<strong>GSTIN:</strong> {lastInvoice.sale.gstin} | <strong>State:</strong> {lastInvoice.sale.state_name} (Code: {lastInvoice.sale.state_code})
|
|
{lastInvoice.sale.abdm_hfr_id && <span> | <strong>ABDM HFR Facility ID:</strong> {lastInvoice.sale.abdm_hfr_id}</span>}
|
|
</div>
|
|
</div>
|
|
<div className="text-end">
|
|
<span className="badge bg-primary fs-6 px-3 py-1.5 mb-1">HOSPITAL GST TAX INVOICE</span>
|
|
<h5 className="fw-bold mb-0 text-dark">{lastInvoice.sale.invoice_no}</h5>
|
|
<div className="text-muted small">Date & Time: {lastInvoice.sale.sale_date}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Patient & Hospital Admission Info */}
|
|
<div className="row g-2 mb-3 p-2 bg-light rounded border">
|
|
<div className="col-4"><strong>Patient Name:</strong> {lastInvoice.sale.patient_name}</div>
|
|
<div className="col-4"><strong>UHID No:</strong> <code className="text-primary fw-bold">{lastInvoice.sale.uhid || 'Walk-in'}</code></div>
|
|
<div className="col-4"><strong>Phone:</strong> {lastInvoice.sale.patient_mobile || 'N/A'}</div>
|
|
<div className="col-4"><strong>Age / Gender:</strong> {lastInvoice.sale.age || 'N/A'} / {lastInvoice.sale.gender || 'N/A'}</div>
|
|
<div className="col-4"><strong>Consultant Doctor:</strong> {lastInvoice.sale.doctor_name}</div>
|
|
<div className="col-4"><strong>Doctor Reg No:</strong> {lastInvoice.sale.doctor_reg_no || 'N/A'}</div>
|
|
{(lastInvoice.sale.abha_id || lastInvoice.sale.abha_address) && (
|
|
<div className="col-12 bg-success-subtle p-1.5 rounded text-success fw-bold border border-success mt-1">
|
|
<i className="bi bi-shield-fill-check me-1"></i> ABDM Linked: ABHA Number: {lastInvoice.sale.abha_id || 'N/A'} | ABHA Address: {lastInvoice.sale.abha_address || 'N/A'} | Care Context: {lastInvoice.sale.abdm_care_context_ref || 'N/A'}
|
|
</div>
|
|
)}
|
|
{lastInvoice.sale.ipd_id && (
|
|
<div className="col-12 text-danger fw-bold border-top pt-1 mt-1">
|
|
<i className="bi bi-hospital me-1"></i> IPD Admission #{lastInvoice.sale.ipd_id} • Ward: {lastInvoice.sale.ward_name || 'General'} • Bed: {lastInvoice.sale.bed_no || 'Bed'} (Charged to IPD Running Bill)
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Items Table */}
|
|
<table className="table table-bordered mb-3">
|
|
<thead className="table-light">
|
|
<tr>
|
|
<th style={{ width: 40 }}>#</th>
|
|
<th>Medicine & Formulation</th>
|
|
<th>HSN</th>
|
|
<th>Batch No</th>
|
|
<th>Exp Date</th>
|
|
<th style={{ width: 60 }}>Qty</th>
|
|
<th>MRP (₹)</th>
|
|
<th>Taxable (₹)</th>
|
|
<th>CGST (₹)</th>
|
|
<th>SGST (₹)</th>
|
|
<th className="text-end">Total (₹)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{lastInvoice.items.map((it, i) => (
|
|
<tr key={i}>
|
|
<td>{i + 1}</td>
|
|
<td className="fw-bold">
|
|
{it.item_name}
|
|
{it.snomed_ct_code && (
|
|
<div className="text-muted fw-normal" style={{ fontSize: '9px' }}>
|
|
SNOMED-CT: <code>{it.snomed_ct_code}</code> ({it.snomed_display || ''})
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td>{it.hsn_code}</td>
|
|
<td>{it.batch_no}</td>
|
|
<td>{it.expiry_date}</td>
|
|
<td>{it.qty}</td>
|
|
<td>₹{it.unit_mrp}</td>
|
|
<td>₹{it.taxable_value}</td>
|
|
<td>₹{it.cgst_amount}</td>
|
|
<td>₹{it.sgst_amount}</td>
|
|
<td className="text-end fw-bold">₹{it.total_amount}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* HSN Summary Table */}
|
|
{lastInvoice.hsn_summary && lastInvoice.hsn_summary.length > 0 && (
|
|
<div className="mb-3">
|
|
<label className="form-label small fw-bold text-muted mb-1">GST Tax Breakdown</label>
|
|
<table className="table table-sm table-bordered text-center" style={{ fontSize: '10px' }}>
|
|
<thead className="table-light">
|
|
<tr>
|
|
<th>HSN Code</th>
|
|
<th>GST Rate</th>
|
|
<th>Taxable Value (₹)</th>
|
|
<th>CGST (₹)</th>
|
|
<th>SGST (₹)</th>
|
|
<th>Total Tax (₹)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{lastInvoice.hsn_summary.map((h, idx) => (
|
|
<tr key={idx}>
|
|
<td>{h.hsn_code}</td>
|
|
<td>{h.gst_rate}%</td>
|
|
<td>₹{h.taxable_value.toFixed(2)}</td>
|
|
<td>₹{h.cgst_amount.toFixed(2)}</td>
|
|
<td>₹{h.sgst_amount.toFixed(2)}</td>
|
|
<td className="fw-bold">₹{h.total_tax.toFixed(2)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Summary Totals & Signatures */}
|
|
<div className="row g-3 border-top pt-3">
|
|
<div className="col-7">
|
|
<small className="text-muted d-block">
|
|
<strong>Registered Pharmacist:</strong> {lastInvoice.sale.registered_pharmacist_name || 'Pharmacist'} (Reg No: {lastInvoice.sale.pharmacist_reg_no || 'N/A'})
|
|
{lastInvoice.sale.pharmacist_hpr_id && <span> | <strong>HPR ID:</strong> {lastInvoice.sale.pharmacist_hpr_id}</span>}
|
|
</small>
|
|
<small className="text-muted d-block mt-1">
|
|
{lastInvoice.sale.terms_conditions || '1. Goods once sold are returnable only as per Drug Rules.\n2. Store medicines below 25°C.'}
|
|
</small>
|
|
</div>
|
|
<div className="col-5">
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span>Gross Items Total:</span>
|
|
<span>₹{lastInvoice.sale.gross_amount}</span>
|
|
</div>
|
|
{Number(lastInvoice.sale.discount_amount) > 0 && (
|
|
<div className="d-flex justify-content-between mb-1 text-danger">
|
|
<span>Total Discounts Allowed:</span>
|
|
<span>-₹{lastInvoice.sale.discount_amount}</span>
|
|
</div>
|
|
)}
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span>Taxable Amount:</span>
|
|
<span>₹{lastInvoice.sale.taxable_amount}</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span>CGST Amount:</span>
|
|
<span>₹{lastInvoice.sale.cgst_amount}</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span>SGST Amount:</span>
|
|
<span>₹{lastInvoice.sale.sgst_amount}</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span>Round Off:</span>
|
|
<span>₹{lastInvoice.sale.round_off}</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between fs-5 fw-bolder border-top pt-2 text-primary">
|
|
<span>GRAND TOTAL:</span>
|
|
<span>₹{lastInvoice.sale.net_amount}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ABDM FHIR R4 Bundle Modal */}
|
|
{showFhirModal && (
|
|
<div className="modal fade show d-block" style={{ backgroundColor: 'rgba(15, 23, 42, 0.75)' }} tabIndex="-1">
|
|
<div className="modal-dialog modal-lg modal-dialog-scrollable">
|
|
<div className="modal-content border-0 shadow-lg">
|
|
<div className="modal-header bg-dark text-white py-2 px-3">
|
|
<div className="d-flex align-items-center gap-2">
|
|
<i className="bi bi-shield-fill-check text-success fs-5"></i>
|
|
<div>
|
|
<h6 className="modal-title mb-0 fw-bold">ABDM NRCES FHIR R4 MedicationDispense Document</h6>
|
|
<small className="text-secondary" style={{ fontSize: '0.75rem' }}>
|
|
Profile: MedicationDispenseDocument | LOINC: 60590-7
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<button type="button" className="btn-close btn-close-white" onClick={() => setShowFhirModal(false)}></button>
|
|
</div>
|
|
<div className="modal-body p-3 bg-light">
|
|
{isLoadingFhir ? (
|
|
<div className="text-center py-5">
|
|
<div className="spinner-border text-primary mb-2" role="status"></div>
|
|
<div className="text-muted">Retrieving & Validating ABDM FHIR R4 Bundle...</div>
|
|
</div>
|
|
) : fhirBundleData ? (
|
|
<div>
|
|
<div className="row g-2 mb-3">
|
|
<div className="col-md-4">
|
|
<div className="bg-white p-2 rounded border">
|
|
<small className="text-muted d-block">Care Context Reference</small>
|
|
<code className="text-primary fw-bold">{fhirBundleData.care_context_ref}</code>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-4">
|
|
<div className="bg-white p-2 rounded border">
|
|
<small className="text-muted d-block">ABHA Number / Address</small>
|
|
<strong className="text-success">{fhirBundleData.abha_id || fhirBundleData.abha_address || 'Not ABHA Linked'}</strong>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-4">
|
|
<div className="bg-white p-2 rounded border">
|
|
<small className="text-muted d-block">Gateway Sync Status</small>
|
|
<span className={`badge ${fhirBundleData.sync_status === 'SYNCED' ? 'bg-success' : 'bg-warning text-dark'}`}>
|
|
{fhirBundleData.sync_status || 'QUEUED_FOR_BRIDGE'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-between align-items-center mb-1">
|
|
<span className="small fw-bold text-dark">NRCES FHIR R4 Document Bundle (JSON):</span>
|
|
<button className="btn btn-sm btn-outline-secondary py-0 px-2" onClick={copyFhirToClipboard}>
|
|
<i className={`bi ${copiedFhir ? 'bi-check-lg text-success' : 'bi-clipboard'} me-1`}></i>
|
|
{copiedFhir ? 'Copied!' : 'Copy JSON'}
|
|
</button>
|
|
</div>
|
|
<pre className="bg-dark text-light p-3 rounded-2" style={{ maxHeight: 360, fontSize: '0.75rem', overflow: 'auto' }}>
|
|
{JSON.stringify(fhirBundleData.bundle, null, 2)}
|
|
</pre>
|
|
</div>
|
|
) : (
|
|
<div className="alert alert-warning mb-0">No FHIR bundle data found.</div>
|
|
)}
|
|
</div>
|
|
<div className="modal-footer py-1 px-3 bg-white">
|
|
<small className="text-muted me-auto" style={{ fontSize: '0.75rem' }}>
|
|
Includes SNOMED-CT clinical codes, HFR Facility ID, and Practitioner HPR ID.
|
|
</small>
|
|
<button type="button" className="btn btn-sm btn-secondary" onClick={() => setShowFhirModal(false)}>Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// =========================================================================
|
|
// 2. LIVE INVENTORY & BATCH MATRIX VIEW
|
|
// =========================================================================
|
|
function InventoryView({ store, notify }) {
|
|
if (!store) return null;
|
|
const [stock, setStock] = useState([]);
|
|
const [summary, setSummary] = useState({});
|
|
const [filter, setFilter] = useState('all');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (store?.store_id) {
|
|
loadStock();
|
|
}
|
|
}, [store?.store_id, filter]);
|
|
|
|
const loadStock = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch(API_BASE + `stock/list?store_id=${store.store_id}&filter=${filter}`);
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
setStock(data.stock || []);
|
|
setSummary(data.summary || {});
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const filteredStock = stock.filter(s =>
|
|
s.item_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(s.generic_name && s.generic_name.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
s.batch_no.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
{/* KPI Summary Cards */}
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-primary">
|
|
<small className="text-muted fw-bold text-uppercase">Total Batches in Store</small>
|
|
<h4 className="fw-bolder text-dark mt-1 mb-0">{summary.total_rows || 0}</h4>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-success">
|
|
<small className="text-muted fw-bold text-uppercase">Stock Cost Valuation (PTR)</small>
|
|
<h4 className="fw-bolder text-success mt-1 mb-0">₹{(summary.total_cost_valuation || 0).toLocaleString('en-IN')}</h4>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-warning">
|
|
<small className="text-muted fw-bold text-uppercase">Stock Retail Valuation (MRP)</small>
|
|
<h4 className="fw-bolder text-dark mt-1 mb-0">₹{(summary.total_mrp_valuation || 0).toLocaleString('en-IN')}</h4>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-info">
|
|
<small className="text-muted fw-bold text-uppercase">Counter / URL</small>
|
|
<h6 className="fw-bolder text-primary mt-1 mb-0 text-truncate">MedicalStore/{store.store_slug}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter Tabs & Search Bar */}
|
|
<div className="counter-card p-3 mb-3">
|
|
<div className="d-flex flex-wrap justify-content-between align-items-center gap-2">
|
|
<div className="btn-group btn-group-sm">
|
|
<button className={`btn ${filter === 'all' ? 'btn-primary' : 'btn-outline-secondary'}`} onClick={() => setFilter('all')}>
|
|
All Stock
|
|
</button>
|
|
<button className={`btn ${filter === 'low' ? 'btn-primary' : 'btn-outline-secondary'}`} onClick={() => setFilter('low')}>
|
|
<i className="bi bi-arrow-down-circle me-1"></i> Low Stock
|
|
</button>
|
|
<button className={`btn ${filter === 'near_expiry' ? 'btn-warning' : 'btn-outline-secondary'}`} onClick={() => setFilter('near_expiry')}>
|
|
<i className="bi bi-clock-history me-1"></i> Near Expiry (<90 Days)
|
|
</button>
|
|
<button className={`btn ${filter === 'expired' ? 'btn-danger' : 'btn-outline-secondary'}`} onClick={() => setFilter('expired')}>
|
|
<i className="bi bi-shield-x me-1"></i> Expired Stock
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ maxWidth: 300 }} className="w-100">
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="Search item, molecule, batch..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stock Table */}
|
|
<div className="counter-card p-0 overflow-hidden">
|
|
<div className="table-responsive">
|
|
<table className="table table-pos table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Item & Generic Molecule</th>
|
|
<th>Category</th>
|
|
<th>Batch No</th>
|
|
<th>Expiry</th>
|
|
<th>Current Qty</th>
|
|
<th>PTR (₹)</th>
|
|
<th>MRP (₹)</th>
|
|
<th>Cost Value (₹)</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr>
|
|
<td colSpan="10" className="text-center py-4 text-muted">
|
|
<i className="bi bi-hourglass-split fs-4 d-block mb-1"></i> Loading inventory...
|
|
</td>
|
|
</tr>
|
|
) : filteredStock.length === 0 ? (
|
|
<tr>
|
|
<td colSpan="10" className="text-center py-4 text-muted">No stock records found.</td>
|
|
</tr>
|
|
) : (
|
|
filteredStock.map((s, idx) => (
|
|
<tr key={s.stock_id}>
|
|
<td>{idx + 1}</td>
|
|
<td>
|
|
<div className="fw-bold">{s.item_name}</div>
|
|
<small className="text-muted">{s.generic_name} • HSN: {s.hsn_code}</small>
|
|
</td>
|
|
<td><span className="badge bg-secondary-subtle text-secondary">{s.category}</span></td>
|
|
<td><span className="badge bg-light text-dark border fw-bold">{s.batch_no}</span></td>
|
|
<td>{s.expiry_display}</td>
|
|
<td>
|
|
<span className={`fw-bold fs-6 ${s.current_qty <= s.min_reorder_level ? 'text-danger' : 'text-success'}`}>
|
|
{s.current_qty}
|
|
</span>
|
|
</td>
|
|
<td>₹{s.ptr}</td>
|
|
<td className="fw-semibold">₹{s.mrp}</td>
|
|
<td className="fw-bold">₹{s.cost_valuation}</td>
|
|
<td>
|
|
{s.is_expired ? (
|
|
<span className="badge-expired">EXPIRED</span>
|
|
) : s.is_near_expiry ? (
|
|
<span className="badge-near-expiry">Near Expiry</span>
|
|
) : (
|
|
<span className="badge-fefo">Good Stock</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// =========================================================================
|
|
// 3. INWARD PURCHASES, SUPPLIERS & MARG ERP IMPORT
|
|
// =========================================================================
|
|
function PurchaseView({ store, notify }) {
|
|
if (!store) return null;
|
|
const [subTab, setSubTab] = useState('inward'); // inward, marg, suppliers
|
|
const [suppliers, setSuppliers] = useState([]);
|
|
const [selectedSupplierId, setSelectedSupplierId] = useState('');
|
|
const [invoiceNo, setInvoiceNo] = useState('');
|
|
const [invoiceDate, setInvoiceDate] = useState(new Date().toISOString().split('T')[0]);
|
|
|
|
const [rows, setRows] = useState([
|
|
{ item_name: '', generic_name: '', batch_no: '', expiry_date: '', qty_packs: 1, free_qty_packs: 0, units_per_pack: 10, mrp: 0, ptr: 0, discount_pct: 0, gst_rate: 12 }
|
|
]);
|
|
|
|
useEffect(() => {
|
|
fetchSuppliers();
|
|
}, []);
|
|
|
|
const fetchSuppliers = async () => {
|
|
try {
|
|
const res = await fetch(API_BASE + 'suppliers');
|
|
const data = await res.json();
|
|
if (data.status) setSuppliers(data.suppliers || []);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const addRow = () => {
|
|
setRows([...rows, { item_name: '', generic_name: '', batch_no: '', expiry_date: '', qty_packs: 1, free_qty_packs: 0, units_per_pack: 10, mrp: 0, ptr: 0, discount_pct: 0, gst_rate: 12 }]);
|
|
};
|
|
|
|
const updateRow = (idx, field, val) => {
|
|
const updated = [...rows];
|
|
updated[idx][field] = val;
|
|
setRows(updated);
|
|
};
|
|
|
|
const removeRow = (idx) => {
|
|
setRows(rows.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
const savePurchaseBill = async () => {
|
|
if (!selectedSupplierId || !invoiceNo) {
|
|
notify('Please select supplier and enter invoice number.', 'error');
|
|
return;
|
|
}
|
|
|
|
const validItems = rows.filter(r => r.item_name && r.batch_no && r.expiry_date && Number(r.qty_packs) > 0);
|
|
if (validItems.length === 0) {
|
|
notify('Please fill at least one valid item line.', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const itemsPayload = [];
|
|
for (const r of validItems) {
|
|
const searchRes = await fetch(API_BASE + `items/search?store_id=${store.store_id}&q=${encodeURIComponent(r.item_name)}`);
|
|
const sData = await searchRes.json();
|
|
let itemId = 1;
|
|
if (sData.status && sData.items && sData.items.length > 0) {
|
|
itemId = sData.items[0].item_id;
|
|
}
|
|
itemsPayload.push({
|
|
item_id: itemId,
|
|
batch_no: r.batch_no,
|
|
expiry_date: r.expiry_date,
|
|
qty_packs: Number(r.qty_packs),
|
|
free_qty_packs: Number(r.free_qty_packs || 0),
|
|
units_per_pack: Number(r.units_per_pack || 10),
|
|
mrp: Number(r.mrp),
|
|
ptr: Number(r.ptr),
|
|
discount_pct: Number(r.discount_pct || 0),
|
|
gst_rate: Number(r.gst_rate || 12)
|
|
});
|
|
}
|
|
|
|
const res = await fetch(API_BASE + 'purchase/save', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
store_id: store.store_id,
|
|
supplier_id: Number(selectedSupplierId),
|
|
supplier_invoice_no: invoiceNo,
|
|
invoice_date: invoiceDate,
|
|
items: itemsPayload
|
|
})
|
|
});
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
notify('Purchase inward recorded! Supplier Ledger & Stock updated.', 'success');
|
|
setInvoiceNo('');
|
|
setRows([{ item_name: '', generic_name: '', batch_no: '', expiry_date: '', qty_packs: 1, free_qty_packs: 0, units_per_pack: 10, mrp: 0, ptr: 0, discount_pct: 0, gst_rate: 12 }]);
|
|
} else {
|
|
notify(data.message || 'Failed to save purchase bill.', 'error');
|
|
}
|
|
} catch (e) {
|
|
notify('Purchase bill error: ' + e.message, 'error');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="d-flex gap-2 mb-3">
|
|
<button className={`btn btn-sm ${subTab === 'inward' ? 'btn-primary' : 'btn-outline-secondary'}`} onClick={() => setSubTab('inward')}>
|
|
<i className="bi bi-box-arrow-in-down me-1"></i> Inward Purchase Bill
|
|
</button>
|
|
<button className={`btn btn-sm ${subTab === 'marg' ? 'btn-success' : 'btn-outline-secondary'}`} onClick={() => setSubTab('marg')}>
|
|
<i className="bi bi-file-earmark-spreadsheet me-1"></i> Marg ERP / Excel Import
|
|
</button>
|
|
<button className={`btn btn-sm ${subTab === 'suppliers' ? 'btn-primary' : 'btn-outline-secondary'}`} onClick={() => setSubTab('suppliers')}>
|
|
<i className="bi bi-truck me-1"></i> Supplier Directory
|
|
</button>
|
|
</div>
|
|
|
|
{subTab === 'inward' && (
|
|
<div className="counter-card">
|
|
<h5 className="fw-bold mb-3"><i className="bi bi-receipt text-primary me-1"></i> Distributor Purchase Inward (Stock Entry)</h5>
|
|
<div className="row g-2 mb-3">
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Supplier / Distributor</label>
|
|
<select className="form-select form-select-sm" value={selectedSupplierId} onChange={(e) => setSelectedSupplierId(e.target.value)}>
|
|
<option value="">-- Select Supplier --</option>
|
|
{suppliers.map(s => (
|
|
<option key={s.supplier_id} value={s.supplier_id}>
|
|
{s.supplier_name} (GST: {s.gstin || 'N/A'})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Supplier Bill / Invoice No.</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. APX-9941" value={invoiceNo} onChange={(e) => setInvoiceNo(e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Invoice Date</label>
|
|
<input type="date" className="form-control form-control-sm" value={invoiceDate} onChange={(e) => setInvoiceDate(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="table-responsive">
|
|
<table className="table table-pos table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Medicine Name</th>
|
|
<th>Batch No</th>
|
|
<th>Expiry</th>
|
|
<th style={{ width: 70 }}>Packs</th>
|
|
<th style={{ width: 65 }}>Free</th>
|
|
<th style={{ width: 80 }}>Units/Pack</th>
|
|
<th style={{ width: 85 }}>PTR (₹)</th>
|
|
<th style={{ width: 85 }}>MRP (₹)</th>
|
|
<th style={{ width: 65 }}>GST%</th>
|
|
<th style={{ width: 40 }}></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r, i) => (
|
|
<tr key={i}>
|
|
<td>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. Augmentin 625" value={r.item_name} onChange={(e) => updateRow(i, 'item_name', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="text" className="form-control form-control-sm" placeholder="Batch" value={r.batch_no} onChange={(e) => updateRow(i, 'batch_no', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="date" className="form-control form-control-sm" value={r.expiry_date} onChange={(e) => updateRow(i, 'expiry_date', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" className="form-control form-control-sm" min="1" value={r.qty_packs} onChange={(e) => updateRow(i, 'qty_packs', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" className="form-control form-control-sm" min="0" value={r.free_qty_packs} onChange={(e) => updateRow(i, 'free_qty_packs', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" className="form-control form-control-sm" min="1" value={r.units_per_pack} onChange={(e) => updateRow(i, 'units_per_pack', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" className="form-control form-control-sm" placeholder="PTR" value={r.ptr} onChange={(e) => updateRow(i, 'ptr', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" className="form-control form-control-sm" placeholder="MRP" value={r.mrp} onChange={(e) => updateRow(i, 'mrp', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<select className="form-select form-select-sm" value={r.gst_rate} onChange={(e) => updateRow(i, 'gst_rate', e.target.value)}>
|
|
<option value="0">0%</option>
|
|
<option value="5">5%</option>
|
|
<option value="12">12%</option>
|
|
<option value="18">18%</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button className="btn btn-sm btn-outline-danger py-0 px-1" onClick={() => removeRow(i)}>
|
|
<i className="bi bi-x"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-between mt-2">
|
|
<button className="btn btn-sm btn-outline-primary" onClick={addRow}>
|
|
<i className="bi bi-plus-circle me-1"></i> Add Another Item
|
|
</button>
|
|
<button className="btn btn-success-custom" onClick={savePurchaseBill}>
|
|
<i className="bi bi-check-circle me-1"></i> Record Inward Bill & Update Inventory
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{subTab === 'marg' && (
|
|
<div className="counter-card">
|
|
<h5 className="fw-bold text-success mb-2"><i className="bi bi-file-earmark-spreadsheet me-1"></i> Marg ERP / Excel Inventory Importer</h5>
|
|
<p className="text-muted small mb-3">
|
|
Upload your stock export from <strong>Marg Pharmacy Software</strong> or Microsoft Excel to seamlessly import medicines, batch numbers, MRP, PTR, HSN codes, and opening stock into <strong>{store.store_name}</strong>.
|
|
</p>
|
|
|
|
<div className="p-4 bg-light rounded-3 border text-center mb-3">
|
|
<i className="bi bi-cloud-arrow-up fs-1 text-success d-block mb-2"></i>
|
|
<h6 className="fw-bold">Upload Marg CSV / Excel File</h6>
|
|
<p className="small text-muted mb-3">Ensure file is exported in CSV format from Marg ERP.</p>
|
|
<input type="file" id="marg_file_input" accept=".csv, .txt" className="form-control form-control-sm w-50 mx-auto mb-3" />
|
|
<button
|
|
className="btn btn-success-custom"
|
|
onClick={async () => {
|
|
const fileInput = document.getElementById('marg_file_input');
|
|
if (!fileInput.files || fileInput.files.length === 0) {
|
|
alert('Please select a CSV file first.');
|
|
return;
|
|
}
|
|
const formData = new FormData();
|
|
formData.append('store_id', store.store_id);
|
|
formData.append('import_file', fileInput.files[0]);
|
|
|
|
try {
|
|
const res = await fetch(API_BASE + 'stock/import-marg', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const data = await res.json();
|
|
if (data.ok) {
|
|
alert(data.message);
|
|
fileInput.value = '';
|
|
} else {
|
|
alert(data.error || 'Import failed.');
|
|
}
|
|
} catch (e) {
|
|
alert('Import error: ' + e.message);
|
|
}
|
|
}}
|
|
>
|
|
<i className="bi bi-upload me-1"></i> Import Inventory into {store.store_name}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{subTab === 'suppliers' && (
|
|
<div className="counter-card">
|
|
<h5 className="fw-bold mb-3"><i className="bi bi-truck text-primary me-1"></i> Approved Drug Distributors & Suppliers</h5>
|
|
<div className="table-responsive">
|
|
<table className="table table-pos mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Supplier Name</th>
|
|
<th>DL Form 20B / 21B</th>
|
|
<th>GSTIN</th>
|
|
<th>Phone / Contact</th>
|
|
<th>Credit Terms</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{suppliers.map((s, i) => (
|
|
<tr key={s.supplier_id}>
|
|
<td>{i + 1}</td>
|
|
<td className="fw-bold">{s.supplier_name}</td>
|
|
<td>{s.dl_no_20b || 'N/A'} / {s.dl_no_21b || 'N/A'}</td>
|
|
<td><code>{s.gstin}</code></td>
|
|
<td>{s.phone} ({s.contact_person})</td>
|
|
<td>{s.credit_days} Days</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// =========================================================================
|
|
// 4. INTER-STORE INDENTS & TRANSFERS
|
|
// =========================================================================
|
|
function TransferView({ store, stores, notify }) {
|
|
if (!store) return null;
|
|
const [toStoreId, setToStoreId] = useState('');
|
|
const [remarks, setRemarks] = useState('');
|
|
const [transferItems, setTransferItems] = useState([
|
|
{ item_name: '', qty: 10 }
|
|
]);
|
|
|
|
const addTransferRow = () => {
|
|
setTransferItems([...transferItems, { item_name: '', qty: 10 }]);
|
|
};
|
|
|
|
const submitIndent = async () => {
|
|
if (!toStoreId) {
|
|
notify('Please select destination store counter.', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(API_BASE + 'transfer/request', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
from_store_id: store.store_id,
|
|
to_store_id: Number(toStoreId),
|
|
remarks: remarks,
|
|
items: transferItems.map(it => ({ item_id: 1, qty: Number(it.qty) }))
|
|
})
|
|
});
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
notify(`Store Indent ${data.transfer_no} submitted to Central Pharmacy!`, 'success');
|
|
setRemarks('');
|
|
} else {
|
|
notify(data.message || 'Failed to submit indent.', 'error');
|
|
}
|
|
} catch (e) {
|
|
notify('Indent error: ' + e.message, 'error');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="counter-card">
|
|
<h5 className="fw-bold mb-3"><i className="bi bi-arrow-left-right text-primary me-1"></i> Multi-Building Store Requisition (Indent)</h5>
|
|
<p className="text-muted small">
|
|
Building counters can requisition medicines from the Main Hospital Central Store. Once dispatched and physically verified, stock transfers automatically.
|
|
</p>
|
|
|
|
<div className="row g-2 mb-3">
|
|
<div className="col-md-6">
|
|
<label className="form-label small fw-bold">Source Store (From)</label>
|
|
<input type="text" className="form-control form-control-sm" value={store.store_name} disabled />
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label small fw-bold">Target Counter / Building (To)</label>
|
|
<select className="form-select form-select-sm" value={toStoreId} onChange={(e) => setToStoreId(e.target.value)}>
|
|
<option value="">-- Select Destination Store --</option>
|
|
{stores.filter(s => s.store_id !== store.store_id).map(s => (
|
|
<option key={s.store_id} value={s.store_id}>
|
|
{s.store_name} ({s.store_slug})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label className="form-label small fw-bold">Requested Medicines</label>
|
|
{transferItems.map((ti, i) => (
|
|
<div key={i} className="row g-2 mb-2">
|
|
<div className="col-8">
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="Medicine Name"
|
|
value={ti.item_name}
|
|
onChange={(e) => {
|
|
const updated = [...transferItems];
|
|
updated[i].item_name = e.target.value;
|
|
setTransferItems(updated);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="col-4">
|
|
<input
|
|
type="number"
|
|
className="form-control form-control-sm"
|
|
placeholder="Quantity Required"
|
|
min="1"
|
|
value={ti.qty}
|
|
onChange={(e) => {
|
|
const updated = [...transferItems];
|
|
updated[i].qty = e.target.value;
|
|
setTransferItems(updated);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<button className="btn btn-sm btn-outline-primary mt-1" onClick={addTransferRow}>
|
|
<i className="bi bi-plus-circle me-1"></i> Add Another Medicine
|
|
</button>
|
|
</div>
|
|
|
|
<button className="btn btn-primary-custom" onClick={submitIndent}>
|
|
<i className="bi bi-send me-1"></i> Submit Store Indent Requisition
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// =========================================================================
|
|
// 5. ACCOUNTING, LEDGERS, DAYBOOK & GST REPORTS
|
|
// =========================================================================
|
|
function LedgersView({ store, notify }) {
|
|
if (!store) return null;
|
|
const [accTab, setAccTab] = useState('daybook');
|
|
const [daybookData, setDaybookData] = useState(null);
|
|
const [gstData, setGstData] = useState(null);
|
|
const [h1Records, setH1Records] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (!store?.store_id) return;
|
|
if (accTab === 'daybook') loadDaybook();
|
|
if (accTab === 'gst') loadGst();
|
|
if (accTab === 'schedule_h1') loadScheduleH1();
|
|
}, [accTab, store?.store_id]);
|
|
|
|
const loadDaybook = async () => {
|
|
try {
|
|
const res = await fetch(API_BASE + `accounting/daybook?store_id=${store.store_id}`);
|
|
const data = await res.json();
|
|
if (data.status) setDaybookData(data);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const loadGst = async () => {
|
|
try {
|
|
const res = await fetch(API_BASE + `accounting/gst-report?store_id=${store.store_id}`);
|
|
const data = await res.json();
|
|
if (data.status) setGstData(data);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const loadScheduleH1 = async () => {
|
|
try {
|
|
const res = await fetch(API_BASE + `compliance/schedule-h1-register?store_id=${store.store_id}`);
|
|
const data = await res.json();
|
|
if (data.status) setH1Records(data.records || []);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="d-flex flex-wrap gap-2 mb-3">
|
|
<button className={`btn btn-sm ${accTab === 'daybook' ? 'btn-primary' : 'btn-outline-secondary'}`} onClick={() => setAccTab('daybook')}>
|
|
<i className="bi bi-journal-check me-1"></i> Daily Cash Book / Day Book
|
|
</button>
|
|
<button className={`btn btn-sm ${accTab === 'gst' ? 'btn-primary' : 'btn-outline-secondary'}`} onClick={() => setAccTab('gst')}>
|
|
<i className="bi bi-file-earmark-spreadsheet me-1"></i> GST Returns (GSTR-1 & 2)
|
|
</button>
|
|
<button className={`btn btn-sm ${accTab === 'schedule_h1' ? 'btn-primary' : 'btn-outline-secondary'}`} onClick={() => setAccTab('schedule_h1')}>
|
|
<i className="bi bi-shield-check me-1"></i> Statutory Schedule H1 Register
|
|
</button>
|
|
</div>
|
|
|
|
{accTab === 'daybook' && daybookData && (
|
|
<div>
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-success">
|
|
<small className="text-muted fw-bold">TOTAL TODAY SALES</small>
|
|
<h4 className="fw-bolder text-dark mt-1">₹{daybookData.summary.total_sales.toLocaleString('en-IN')}</h4>
|
|
<small className="text-muted">{daybookData.summary.total_invoices} Bills</small>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-primary">
|
|
<small className="text-muted fw-bold">CASH IN DRAWER</small>
|
|
<h4 className="fw-bolder text-primary mt-1">₹{daybookData.summary.cash_in_drawer.toLocaleString('en-IN')}</h4>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-warning">
|
|
<small className="text-muted fw-bold">UPI / QR COLLECTIONS</small>
|
|
<h4 className="fw-bolder text-warning mt-1">₹{daybookData.summary.upi_collection.toLocaleString('en-IN')}</h4>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3 col-sm-6">
|
|
<div className="counter-card p-3 border-start border-4 border-danger">
|
|
<small className="text-muted fw-bold">IPD CREDIT BILLED</small>
|
|
<h4 className="fw-bolder text-danger mt-1">₹{daybookData.summary.ipd_credit.toLocaleString('en-IN')}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="counter-card p-0 overflow-hidden">
|
|
<div className="p-3 border-bottom">
|
|
<h6 className="mb-0 fw-bold">Today's Transactions Journal</h6>
|
|
</div>
|
|
<div className="table-responsive">
|
|
<table className="table table-pos mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Invoice No</th>
|
|
<th>Time</th>
|
|
<th>Patient (UHID)</th>
|
|
<th>Doctor</th>
|
|
<th>Mode</th>
|
|
<th>CGST (₹)</th>
|
|
<th>SGST (₹)</th>
|
|
<th className="text-end">Net Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{daybookData.transactions.map((t) => (
|
|
<tr key={t.sale_id}>
|
|
<td className="fw-bold">{t.invoice_no}</td>
|
|
<td>{t.sale_date.split(' ')[1]}</td>
|
|
<td>{t.patient_name} {t.uhid ? `(${t.uhid})` : ''}</td>
|
|
<td>{t.doctor_name}</td>
|
|
<td><span className="badge bg-secondary">{t.payment_mode}</span></td>
|
|
<td>₹{t.cgst_amount}</td>
|
|
<td>₹{t.sgst_amount}</td>
|
|
<td className="text-end fw-bold text-success">₹{t.net_amount}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{accTab === 'gst' && gstData && (
|
|
<div className="counter-card mb-3">
|
|
<h6 className="fw-bold mb-3"><i className="bi bi-file-earmark-spreadsheet text-primary me-1"></i> GSTR-1 Outward Sales Summary (HSN-wise)</h6>
|
|
<div className="table-responsive">
|
|
<table className="table table-pos mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>HSN Code</th>
|
|
<th>GST Slab</th>
|
|
<th>Taxable Value (₹)</th>
|
|
<th>CGST (₹)</th>
|
|
<th>SGST (₹)</th>
|
|
<th>IGST (₹)</th>
|
|
<th className="text-end">Total Invoice Value (₹)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{gstData.gstr1_sales.map((g, i) => (
|
|
<tr key={i}>
|
|
<td><code>{g.hsn_code}</code></td>
|
|
<td><span className="badge bg-primary">{g.gst_rate}%</span></td>
|
|
<td>₹{Number(g.taxable_val).toFixed(2)}</td>
|
|
<td>₹{Number(g.cgst_val).toFixed(2)}</td>
|
|
<td>₹{Number(g.sgst_val).toFixed(2)}</td>
|
|
<td>₹{Number(g.igst_val).toFixed(2)}</td>
|
|
<td className="text-end fw-bold">₹{Number(g.total_val).toFixed(2)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{accTab === 'schedule_h1' && (
|
|
<div className="counter-card">
|
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h6 className="fw-bold mb-0"><i className="bi bi-shield-check text-success me-1"></i> Statutory Schedule H1 Drug Register</h6>
|
|
<small className="text-muted">Mandatory under Indian Drugs & Cosmetics Rules (4th Amendment 2013). Retain records for 3 years.</small>
|
|
</div>
|
|
<button className="btn btn-sm btn-outline-dark" onClick={() => window.print()}>
|
|
<i className="bi bi-printer me-1"></i> Export / Print Register
|
|
</button>
|
|
</div>
|
|
|
|
<div className="table-responsive">
|
|
<table className="table table-pos table-bordered mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Bill No</th>
|
|
<th>Patient Name & Address</th>
|
|
<th>Prescribing Doctor & Reg No</th>
|
|
<th>Medicine Name</th>
|
|
<th>Batch No</th>
|
|
<th>Qty Supplied</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{h1Records.length === 0 ? (
|
|
<tr>
|
|
<td colSpan="7" className="text-center py-4 text-muted">No Schedule H1 medicines dispensed in this period.</td>
|
|
</tr>
|
|
) : (
|
|
h1Records.map((h, i) => (
|
|
<tr key={i}>
|
|
<td>{h.sale_date.split(' ')[0]}</td>
|
|
<td className="fw-bold">{h.invoice_no}</td>
|
|
<td>{h.patient_name} {h.patient_address ? `(${h.patient_address})` : ''}</td>
|
|
<td>{h.doctor_name} {h.doctor_reg_no ? `(Reg: ${h.doctor_reg_no})` : ''}</td>
|
|
<td className="fw-bold text-danger">{h.item_name}</td>
|
|
<td><code>{h.batch_no}</code></td>
|
|
<td className="fw-bold">{h.qty}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// =========================================================================
|
|
// 6. STORE & STATUTORY LICENSING SETUP
|
|
// =========================================================================
|
|
function SettingsView({ store, onStoreSaved, notify }) {
|
|
const [formData, setFormData] = useState({
|
|
store_id: store ? store.store_id : 0,
|
|
store_code: store ? store.store_code : '',
|
|
store_slug: store ? store.store_slug : '',
|
|
store_name: store ? store.store_name : '',
|
|
building_name: store ? store.building_name : '',
|
|
floor_no: store ? store.floor_no : '',
|
|
room_no: store ? store.room_no : '',
|
|
drug_license_no_20b: store ? store.drug_license_no_20b : '',
|
|
drug_license_no_21b: store ? store.drug_license_no_21b : '',
|
|
drug_license_no_20f_x: store ? store.drug_license_no_20f_x : '',
|
|
gstin: store ? store.gstin : '',
|
|
pan_no: store ? store.pan_no : '',
|
|
fssai_no: store ? store.fssai_no : '',
|
|
state_code: store ? store.state_code : '07',
|
|
state_name: store ? store.state_name : 'Delhi',
|
|
registered_pharmacist_name: store ? store.registered_pharmacist_name : '',
|
|
pharmacist_reg_no: store ? store.pharmacist_reg_no : '',
|
|
pharmacist_hpr_id: store ? (store.pharmacist_hpr_id || '') : '',
|
|
abdm_hfr_id: store ? (store.abdm_hfr_id || '') : '',
|
|
abdm_hip_id: store ? (store.abdm_hip_id || '') : '',
|
|
invoice_prefix: store ? store.invoice_prefix : 'INV/',
|
|
next_invoice_no: store ? store.next_invoice_no : 1001,
|
|
upi_id: store ? store.upi_id : '',
|
|
terms_conditions: store ? store.terms_conditions : ''
|
|
});
|
|
|
|
const handleChange = (field, val) => {
|
|
setFormData({ ...formData, [field]: val });
|
|
};
|
|
|
|
const handleSave = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const res = await fetch(API_BASE + 'stores/save', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData)
|
|
});
|
|
const data = await res.json();
|
|
if (data.status) {
|
|
notify('Store & statutory licensing updated successfully!', 'success');
|
|
onStoreSaved();
|
|
} else {
|
|
notify(data.message || 'Failed to update store.', 'error');
|
|
}
|
|
} catch (e) {
|
|
notify('Save error: ' + e.message, 'error');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="counter-card">
|
|
<h5 className="fw-bold mb-3"><i className="bi bi-building-gear text-primary me-1"></i> Hospital Pharmacy Store & Indian Licensing Configuration</h5>
|
|
<form onSubmit={handleSave}>
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-3">
|
|
<label className="form-label small fw-bold">Store Code</label>
|
|
<input type="text" className="form-control form-control-sm" required value={formData.store_code} onChange={(e) => handleChange('store_code', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-3">
|
|
<label className="form-label small fw-bold">URL Slug (Direct Link)</label>
|
|
<input type="text" className="form-control form-control-sm" required value={formData.store_slug} onChange={(e) => handleChange('store_slug', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label small fw-bold">Store / Pharmacy Name</label>
|
|
<input type="text" className="form-control form-control-sm" required value={formData.store_name} onChange={(e) => handleChange('store_name', e.target.value)} />
|
|
</div>
|
|
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Building Name</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. OPD Block B" value={formData.building_name} onChange={(e) => handleChange('building_name', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Floor</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. 1st Floor" value={formData.floor_no} onChange={(e) => handleChange('floor_no', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Room / Counter No</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. Counter 2" value={formData.room_no} onChange={(e) => handleChange('room_no', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
|
|
<h6 className="fw-bold text-primary mt-4 mb-2"><i className="bi bi-shield-check me-1"></i> Indian Drug & Tax Statutory Licenses</h6>
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Drug License Form 20-B (Allopathic)</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="DL-20B-DEL-XXXXX" value={formData.drug_license_no_20b} onChange={(e) => handleChange('drug_license_no_20b', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Drug License Form 21-B (Schedule C/C1)</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="DL-21B-DEL-XXXXX" value={formData.drug_license_no_21b} onChange={(e) => handleChange('drug_license_no_21b', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Drug License Form 20-F (Schedule X)</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="DL-20F-DEL-XXXXX" value={formData.drug_license_no_20f_x} onChange={(e) => handleChange('drug_license_no_20f_x', e.target.value)} />
|
|
</div>
|
|
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">GSTIN (15-Digit)</label>
|
|
<input type="text" className="form-control form-control-sm text-uppercase" placeholder="07AAAAA0000A1Z5" value={formData.gstin} onChange={(e) => handleChange('gstin', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">PAN Number</label>
|
|
<input type="text" className="form-control form-control-sm text-uppercase" placeholder="AAAAA0000A" value={formData.pan_no} onChange={(e) => handleChange('pan_no', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">FSSAI License No</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="100XXXXXXXXXX" value={formData.fssai_no} onChange={(e) => handleChange('fssai_no', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
|
|
<h6 className="fw-bold text-primary mt-4 mb-2"><i className="bi bi-person-badge me-1"></i> Pharmacist & POS Bill Configuration</h6>
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-6">
|
|
<label className="form-label small fw-bold">Registered Pharmacist Name</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="Pharmacist Name" value={formData.registered_pharmacist_name} onChange={(e) => handleChange('registered_pharmacist_name', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label className="form-label small fw-bold">State Pharmacy Council Reg No</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. DPC-Reg-45892" value={formData.pharmacist_reg_no} onChange={(e) => handleChange('pharmacist_reg_no', e.target.value)} />
|
|
</div>
|
|
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Bill Series Prefix</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. OPD1/26-27/" value={formData.invoice_prefix} onChange={(e) => handleChange('invoice_prefix', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Next Sequence Number</label>
|
|
<input type="number" className="form-control form-control-sm" value={formData.next_invoice_no} onChange={(e) => handleChange('next_invoice_no', e.target.value)} />
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Store UPI ID (For Dynamic QR)</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="hospital@upi" value={formData.upi_id} onChange={(e) => handleChange('upi_id', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
|
|
<h6 className="fw-bold text-primary mt-4 mb-2"><i className="bi bi-shield-fill-check me-1"></i> Ayushman Bharat Digital Mission (ABDM) Registry Configuration</h6>
|
|
<div className="row g-3 mb-3">
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">ABDM Health Facility Registry (HFR ID)</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. IN0710001234" value={formData.abdm_hfr_id} onChange={(e) => handleChange('abdm_hfr_id', e.target.value)} />
|
|
<small className="text-muted" style={{ fontSize: '0.7rem' }}>Facility ID registered in National Health Authority HFR</small>
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Health Information Provider (HIP ID)</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. IN0710001234-HIP" value={formData.abdm_hip_id} onChange={(e) => handleChange('abdm_hip_id', e.target.value)} />
|
|
<small className="text-muted" style={{ fontSize: '0.7rem' }}>Identifier configured in ABDM Gateway Bridge</small>
|
|
</div>
|
|
<div className="col-md-4">
|
|
<label className="form-label small fw-bold">Pharmacist HPR ID (Healthcare Professional)</label>
|
|
<input type="text" className="form-control form-control-sm" placeholder="e.g. 91-8822-4411-9901" value={formData.pharmacist_hpr_id} onChange={(e) => handleChange('pharmacist_hpr_id', e.target.value)} />
|
|
<small className="text-muted" style={{ fontSize: '0.7rem' }}>National Pharmacist ID from HPR Portal</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label className="form-label small fw-bold">Terms & Conditions (Printed on Invoice Footer)</label>
|
|
<textarea className="form-control form-control-sm" rows="2" value={formData.terms_conditions} onChange={(e) => handleChange('terms_conditions', e.target.value)}></textarea>
|
|
</div>
|
|
|
|
<button type="submit" className="btn btn-primary-custom">
|
|
<i className="bi bi-save me-1"></i> Save Store & Licensing Details
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(
|
|
<ErrorBoundary>
|
|
<App />
|
|
</ErrorBoundary>
|
|
);
|