Fix Layout

This commit is contained in:
Thanakarn Klangkasame
2025-10-09 17:37:46 +07:00
parent ca399301bc
commit 93bb21ffc1
4 changed files with 24 additions and 24 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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() }] : []),

View File

@@ -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() }] : []),