Fix Layout
This commit is contained in:
@@ -196,7 +196,7 @@ const KYC_META: Record<KycStatus, { label: string; Icon: LucideIcon; tone: Tone
|
||||
const TIER_META: Record<LoyaltyTier, string> = {
|
||||
none: "NONE",
|
||||
silver: "SILVER",
|
||||
gold: "GOLD",
|
||||
gold: "Gold".toUpperCase(),
|
||||
platinum: "PLATINUM",
|
||||
} as const;
|
||||
|
||||
@@ -793,10 +793,11 @@ export default function CustomersPage() {
|
||||
<div className="mt-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
// ✅ ปรับให้เหมือน Orders: ไม่ใช้ h-10 และใช้ py-2.5
|
||||
const inputBase =
|
||||
"h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300";
|
||||
const selectBase =
|
||||
"appearance-none h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"appearance-none w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none focus:border-neutral-300";
|
||||
|
||||
const activeFilters = [
|
||||
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),
|
||||
@@ -847,7 +848,7 @@ export default function CustomersPage() {
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<section className="rounded-3xl border border-neutral-200/70 bg-white/80 p-4 sm:p-5 shadow-[0_10px_30px_-12px_rgba(0,0,0,0.08)]">
|
||||
<section className="rounded-3xl border border-neutral-200/70 bg-white/80 p-5 shadow-[0_10px_30px_-12px_rgba(0,0,0,0.08)]">
|
||||
<div className="grid gap-3 sm:grid-cols-12">
|
||||
<Field label="ค้นหา" className="sm:col-span-4">
|
||||
<div className="relative">
|
||||
@@ -945,7 +946,7 @@ export default function CustomersPage() {
|
||||
{activeFilters.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
{activeFilters.map((c) => (
|
||||
<span key={c.key} className="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-neutral-50 px-2.5 py-1 text-[11.5px] text-neutral-700">
|
||||
<span key={c.key} className="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-neutral-50 px-2.5 py-1 text-[11px] text-neutral-700">
|
||||
<span className="font-medium">{c.label}:</span>
|
||||
<span>{c.value}</span>
|
||||
<button onClick={() => clearChip(c.key)} className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-neutral-200/70" aria-label={`ล้าง ${c.label}`}>
|
||||
@@ -953,7 +954,7 @@ export default function CustomersPage() {
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<button onClick={clearAll} className="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-white px-2.5 py-1 text-[11.5px] text-neutral-700 hover:bg-neutral-50">
|
||||
<button onClick={clearAll} className="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-white px-2.5 py-1 text-[11px] text-neutral-700 hover:bg-neutral-50">
|
||||
<Eraser className="h-4 w-4" /> ล้างทั้งหมด
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import type { LucideIcon } from "lucide-react";
|
||||
import {
|
||||
Package, Boxes, QrCode, Barcode, Building2, Store, Factory,
|
||||
CheckCircle2, ShieldAlert, ShieldX, Ban, AlertTriangle, Hourglass,
|
||||
ArrowDownCircle, ArrowUpCircle, Truck, Shuffle,
|
||||
ArrowDownCircle, Truck, Shuffle,
|
||||
Search, X as XIcon, Eraser, CircleSlash
|
||||
} from "lucide-react";
|
||||
|
||||
@@ -159,10 +159,10 @@ const renderQuality = (q: QualityStatus) => {
|
||||
};
|
||||
|
||||
const AVAIL_META: Record<Availability, { label: string; Icon: LucideIcon; tone: Tone }> = {
|
||||
in_stock: { label: U("In Stock"), Icon: CheckCircle2, tone: "ok" },
|
||||
oos: { label: U("Out of Stock"), Icon: CircleSlash, tone: "bad" },
|
||||
hold: { label: U("Hold"), Icon: Ban, tone: "warn" },
|
||||
quarantine: { label: U("Quarantine"), Icon: ShieldAlert, tone: "warn" },
|
||||
in_stock: { label: U("In Stock"), Icon: CheckCircle2, tone: "ok" },
|
||||
oos: { label: U("Out of Stock"), Icon: CircleSlash, tone: "bad" },
|
||||
hold: { label: U("Hold"), Icon: Ban, tone: "warn" },
|
||||
quarantine: { label: U("Quarantine"), Icon: ShieldAlert, tone: "warn" },
|
||||
};
|
||||
const renderAvailability = (a: Availability) => {
|
||||
const { Icon, label, tone } = AVAIL_META[a];
|
||||
@@ -642,10 +642,11 @@ export default function InventoryPage() {
|
||||
<div className="mt-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
// ✅ ให้เข้ากับหน้าอื่น: ไม่ใช้ h-10 และใช้ py-2.5
|
||||
const inputBase =
|
||||
"h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300";
|
||||
const selectBase =
|
||||
"appearance-none h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"appearance-none w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none focus:border-neutral-300";
|
||||
|
||||
const activeFilters = [
|
||||
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),
|
||||
@@ -713,7 +714,7 @@ export default function InventoryPage() {
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
placeholder="รหัส/ชื่อ/SKU/แบรนด์/หมวด/ช่อง/ล็อต/ซีเรียล/แท็ก/โน้ต…"
|
||||
className={`${"pl-9"} ${inputBase}`}
|
||||
className={`pl-9 ${inputBase}`}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
@@ -691,10 +691,11 @@ export default function ProductsPage() {
|
||||
<div className="mt-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
// ✅ โทนเดียวกับหน้าอื่น: ตัด h-10 ออก ใช้ py-2.5 และไม่ใส่ focus ring
|
||||
const inputBase =
|
||||
"h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300";
|
||||
const selectBase =
|
||||
"appearance-none h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"appearance-none w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none focus:border-neutral-300";
|
||||
|
||||
const activeFilters = [
|
||||
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),
|
||||
|
||||
@@ -155,14 +155,10 @@ const COMP_META: Record<ComplianceLevel, { label: string; Icon: LucideIcon; tone
|
||||
};
|
||||
|
||||
const renderType = (t: ServiceType) => <IconLabel Icon={TYPE_META[t].Icon} label={TYPE_META[t].label} />;
|
||||
const renderStatus = (s: ServiceStatus) => {
|
||||
const m = STATUS_META[s]; return <IconLabel Icon={m.Icon} label={m.label} pillTone={m.tone} />;
|
||||
};
|
||||
const renderStatus = (s: ServiceStatus) => { const m = STATUS_META[s]; return <IconLabel Icon={m.Icon} label={m.label} pillTone={m.tone} />; };
|
||||
const renderBilling = (b: BillingType) => <IconLabel Icon={BILLING_META[b].Icon} label={BILLING_META[b].label} />;
|
||||
const renderLoc = (l: LocationType) => <IconLabel Icon={LOC_META[l].Icon} label={LOC_META[l].label} />;
|
||||
const renderComp = (c: ComplianceLevel) => {
|
||||
const m = COMP_META[c]; return <IconLabel Icon={m.Icon} label={m.label} pillTone={m.tone} />;
|
||||
};
|
||||
const renderComp = (c: ComplianceLevel) => { const m = COMP_META[c]; return <IconLabel Icon={m.Icon} label={m.label} pillTone={m.tone} />; };
|
||||
|
||||
const fmtDate = (iso?: string | null) => (iso ? new Date(iso).toLocaleString("th-TH", { hour12: false }) : "-");
|
||||
const THB = (n?: number | null) => (typeof n === "number" ? `฿${n.toLocaleString()}` : "-");
|
||||
@@ -624,10 +620,11 @@ export default function ServicesPage() {
|
||||
<div className="mt-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
// ✅ ให้เข้ากับหน้า Customers: ไม่ใช้ h-10 และใช้ py-2.5
|
||||
const inputBase =
|
||||
"h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none placeholder:text-neutral-400 focus:border-neutral-300";
|
||||
const selectBase =
|
||||
"appearance-none h-10 w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 text-sm shadow-sm outline-none focus:border-neutral-300 focus:ring-2 focus:ring-neutral-900/10";
|
||||
"appearance-none w-full rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2.5 text-sm shadow-sm outline-none focus:border-neutral-300";
|
||||
|
||||
const activeFilters = [
|
||||
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),
|
||||
|
||||
Reference in New Issue
Block a user