KavyaCsh/AI_Pharmacy_Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update frontend components and page layouts

Browse Source
This commit is contained in:
KavyaCsh
2026-09-15 11:25:56 +05:30
parent d46f78bbd0
commit 85a3275268
8 changed files with 530 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Pharmacy.tsx
+30 -19
View File
@@ -4,6 +4,7 @@ import { createColumnHelper } from '@tanstack/react-table';
import { Table } from '../components/Table';
import Pagination from '../components/Pagination';
import { CustomSelect } from '../components/CustomSelect';
import { StockDropdown } from '../components/StockDropdown';
import { getDrugs, authenticate, addMedicine, createOrderDraft, updateOrderItems, precheckOrder, dispenseOrder, downloadInvoice, fetchSyncedPatients } from '../services/api';
interface PharmacyItem {
@@ -290,8 +291,8 @@ const Pharmacy = () => {
{/* Metrics Row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 shrink-0" style={{ marginBottom: '32px' }}>
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-md transition-shadow flex items-center gap-5">
<div className="p-4 rounded-2xl bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200/50 flex items-center justify-center shrink-0 shadow-sm">
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-md transition-shadow flex items-center gap-5" style={{ padding: "24px" }}>
<div className="p-4 rounded-2xl bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200/50 flex items-center justify-center shrink-0 shadow-sm" style={{ padding: "16px" }}>
<Package className="text-blue-600" size={28} />
</div>
<div className="flex flex-col">
@@ -304,7 +305,7 @@ const Pharmacy = () => {
{lowStockCount > 0 && (
<div className="absolute top-0 right-0 w-2 h-full bg-red-500"></div>
)}
<div className="p-4 rounded-2xl bg-gradient-to-br from-red-50 to-red-100 border border-red-200/50 flex items-center justify-center shrink-0 shadow-sm">
<div className="p-4 rounded-2xl bg-gradient-to-br from-red-50 to-red-100 border border-red-200/50 flex items-center justify-center shrink-0 shadow-sm" style={{ padding: "16px" }}>
<AlertCircle className="text-red-600" size={28} />
</div>
<div className="flex flex-col">
@@ -313,8 +314,8 @@ const Pharmacy = () => {
</div>
</div>
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-md transition-shadow flex items-center gap-5">
<div className="p-4 rounded-2xl bg-gradient-to-br from-indigo-50 to-indigo-100 border border-indigo-200/50 flex items-center justify-center shrink-0 shadow-sm">
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-md transition-shadow flex items-center gap-5" style={{ padding: "24px" }}>
<div className="p-4 rounded-2xl bg-gradient-to-br from-indigo-50 to-indigo-100 border border-indigo-200/50 flex items-center justify-center shrink-0 shadow-sm" style={{ padding: "16px" }}>
<Layers className="text-indigo-600" size={28} />
</div>
<div className="flex flex-col">
@@ -521,22 +522,32 @@ const Pharmacy = () => {
<div style={{ marginBottom: '16px' }}>
<label className="block text-xs font-bold uppercase tracking-wider text-slate-500" style={{ marginBottom: '8px' }}>Select Medicines (from inventory)</label>
<CustomSelect
value=""
onChange={(e) => {
const item = inventory.find(i => i.id === e.target.value);
if (item && !selectedItems.find(i => i.product_id === item.id)) {
setSelectedItems([...selectedItems, { product_id: item.id, name: item.medicine, qty: 1, price: item.rawPrice }]);
<StockDropdown
mode="product"
placeholder="Search or select a medicine to add..."
options={inventory.map(i => ({
id: i.id,
product_id: i.id,
brand_name: i.medicine,
generic_name: i.subtitle,
qty_on_hand: i.stock,
mrp: i.rawPrice,
manufacturer: i.manufacture
}))}
onChange={(val, item) => {
if (item && val && !selectedItems.find(i => i.product_id === val)) {
setSelectedItems([
...selectedItems,
{
product_id: item.product_id || item.id || val,
name: item.brand_name || '',
qty: 1,
price: Number(item.mrp || 0)
}
]);
}
}}
>
<option value="" disabled>Select a medicine to add...</option>
{inventory.filter(i => i.stock > 0).map(item => (
<option key={item.id} value={item.id}>
{item.medicine} (Stock: {item.stock})
</option>
))}
</CustomSelect>
/>
</div>
{selectedItems.length > 0 && (