43 lines
2.1 KiB
TypeScript
43 lines
2.1 KiB
TypeScript
|
import { createVendor } from "@/lib/actions";
|
||
|
|
import { getVendors } from "@/lib/repository";
|
||
|
|
|
||
|
|
export default function VendorsPage() {
|
||
|
|
const vendors = getVendors();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid">
|
||
|
|
<section className="two-up">
|
||
|
|
<article className="panel">
|
||
|
|
<h2 className="section-title">Add Vendor</h2>
|
||
|
|
<p className="section-copy">Vendor records support purchasing, receipts, and accounts payable activity.</p>
|
||
|
|
<form action={createVendor} className="form-grid">
|
||
|
|
<div className="form-row"><label htmlFor="vendor-code">Vendor Code</label><input className="input" id="vendor-code" name="code" required /></div>
|
||
|
|
<div className="form-row"><label htmlFor="vendor-name">Name</label><input className="input" id="vendor-name" name="name" required /></div>
|
||
|
|
<div className="form-row"><label htmlFor="vendor-email">Email</label><input className="input" id="vendor-email" name="email" type="email" /></div>
|
||
|
|
<div className="form-row"><label htmlFor="vendor-phone">Phone</label><input className="input" id="vendor-phone" name="phone" /></div>
|
||
|
|
<div className="form-row"><label htmlFor="address">Address</label><textarea className="textarea" id="address" name="address" /></div>
|
||
|
|
<button className="button" type="submit">Save Vendor</button>
|
||
|
|
</form>
|
||
|
|
</article>
|
||
|
|
<article className="panel">
|
||
|
|
<h2 className="section-title">Vendor Directory</h2>
|
||
|
|
<div className="table-wrap">
|
||
|
|
<table className="table">
|
||
|
|
<thead><tr><th>Code</th><th>Name</th><th>Email</th><th>Phone</th></tr></thead>
|
||
|
|
<tbody>
|
||
|
|
{vendors.length === 0 ? (
|
||
|
|
<tr><td colSpan={4} className="muted">No vendors yet.</td></tr>
|
||
|
|
) : (
|
||
|
|
vendors.map((vendor) => (
|
||
|
|
<tr key={vendor.id}><td>{vendor.code}</td><td>{vendor.name}</td><td>{vendor.email || "—"}</td><td>{vendor.phone || "—"}</td></tr>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|