Simulationable/amrez-nova-eop-services-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Layout

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/(protected)/crm/customers/page.tsx
View File

@@ -196,7 +196,7 @@ const KYC_META: Record<KycStatus, { label: string; Icon: LucideIcon; tone: Tone
const TIER_META: Record<LoyaltyTier, string> = { const TIER_META: Record<LoyaltyTier, string> = {
none: "NONE", none: "NONE",
silver: "SILVER", silver: "SILVER",
gold: "GOLD", gold: "Gold".toUpperCase(),
platinum: "PLATINUM", platinum: "PLATINUM",
} as const; } as const;
@@ -793,10 +793,11 @@ export default function CustomersPage() {
<div className="mt-1">{children}</div> <div className="mt-1">{children}</div>
</div> </div>
); );
// ✅ ปรับให้เหมือน Orders: ไม่ใช้ h-10 และใช้ py-2.5
const inputBase = 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 = 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 = [ const activeFilters = [
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []), ...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),
@@ -847,7 +848,7 @@ export default function CustomersPage() {
</div> </div>
{/* Filters */} {/* 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"> <div className="grid gap-3 sm:grid-cols-12">
<Field label="ค้นหา" className="sm:col-span-4"> <Field label="ค้นหา" className="sm:col-span-4">
<div className="relative"> <div className="relative">
@@ -945,7 +946,7 @@ export default function CustomersPage() {
{activeFilters.length > 0 && ( {activeFilters.length > 0 && (
<div className="mt-3 flex flex-wrap items-center gap-2"> <div className="mt-3 flex flex-wrap items-center gap-2">
{activeFilters.map((c) => ( {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 className="font-medium">{c.label}:</span>
<span>{c.value}</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}`}> <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> </button>
</span> </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" /> ล้างทั้งหมด <Eraser className="h-4 w-4" /> ล้างทั้งหมด
</button> </button>
</div> </div>

17
src/app/(protected)/inventory/page.tsx
View File

@@ -5,7 +5,7 @@ import type { LucideIcon } from "lucide-react";
import { import {
Package, Boxes, QrCode, Barcode, Building2, Store, Factory, Package, Boxes, QrCode, Barcode, Building2, Store, Factory,
CheckCircle2, ShieldAlert, ShieldX, Ban, AlertTriangle, Hourglass, CheckCircle2, ShieldAlert, ShieldX, Ban, AlertTriangle, Hourglass,
ArrowDownCircle, ArrowUpCircle, Truck, Shuffle, ArrowDownCircle, Truck, Shuffle,
Search, X as XIcon, Eraser, CircleSlash Search, X as XIcon, Eraser, CircleSlash
} from "lucide-react"; } from "lucide-react";
@@ -159,10 +159,10 @@ const renderQuality = (q: QualityStatus) => {
}; };
const AVAIL_META: Record<Availability, { label: string; Icon: LucideIcon; tone: Tone }> = { const AVAIL_META: Record<Availability, { label: string; Icon: LucideIcon; tone: Tone }> = {
in_stock: { label: U("In Stock"), Icon: CheckCircle2, tone: "ok" }, in_stock: { label: U("In Stock"), Icon: CheckCircle2, tone: "ok" },
oos: { label: U("Out of Stock"), Icon: CircleSlash, tone: "bad" }, oos: { label: U("Out of Stock"), Icon: CircleSlash, tone: "bad" },
hold: { label: U("Hold"), Icon: Ban, tone: "warn" }, hold: { label: U("Hold"), Icon: Ban, tone: "warn" },
quarantine: { label: U("Quarantine"), Icon: ShieldAlert, tone: "warn" }, quarantine: { label: U("Quarantine"), Icon: ShieldAlert, tone: "warn" },
}; };
const renderAvailability = (a: Availability) => { const renderAvailability = (a: Availability) => {
const { Icon, label, tone } = AVAIL_META[a]; const { Icon, label, tone } = AVAIL_META[a];
@@ -642,10 +642,11 @@ export default function InventoryPage() {
<div className="mt-1">{children}</div> <div className="mt-1">{children}</div>
</div> </div>
); );
// ✅ ให้เข้ากับหน้าอื่น: ไม่ใช้ h-10 และใช้ py-2.5
const inputBase = 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 = 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 = [ const activeFilters = [
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []), ...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),
@@ -713,7 +714,7 @@ export default function InventoryPage() {
value={q} value={q}
onChange={(e) => setQ(e.target.value)} onChange={(e) => setQ(e.target.value)}
placeholder="รหัส/ชื่อ/SKU/แบรนด์/หมวด/ช่อง/ล็อต/ซีเรียล/แท็ก/โน้ต…" placeholder="รหัส/ชื่อ/SKU/แบรนด์/หมวด/ช่อง/ล็อต/ซีเรียล/แท็ก/โน้ต…"
className={`${"pl-9"} ${inputBase}`} className={`pl-9 ${inputBase}`}
/> />
</div> </div>
</Field> </Field>

5
src/app/(protected)/products/page.tsx
View File

@@ -691,10 +691,11 @@ export default function ProductsPage() {
<div className="mt-1">{children}</div> <div className="mt-1">{children}</div>
</div> </div>
); );
// ✅ โทนเดียวกับหน้าอื่น: ตัด h-10 ออก ใช้ py-2.5 และไม่ใส่ focus ring
const inputBase = 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 = 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 = [ const activeFilters = [
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []), ...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),

13
src/app/(protected)/services/page.tsx
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 renderType = (t: ServiceType) => <IconLabel Icon={TYPE_META[t].Icon} label={TYPE_META[t].label} />;
const renderStatus = (s: ServiceStatus) => { const renderStatus = (s: ServiceStatus) => { const m = STATUS_META[s]; return <IconLabel Icon={m.Icon} label={m.label} pillTone={m.tone} />; };
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 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 renderLoc = (l: LocationType) => <IconLabel Icon={LOC_META[l].Icon} label={LOC_META[l].label} />;
const renderComp = (c: ComplianceLevel) => { const renderComp = (c: ComplianceLevel) => { const m = COMP_META[c]; return <IconLabel Icon={m.Icon} label={m.label} pillTone={m.tone} />; };
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 fmtDate = (iso?: string | null) => (iso ? new Date(iso).toLocaleString("th-TH", { hour12: false }) : "-");
const THB = (n?: number | null) => (typeof n === "number" ? `฿${n.toLocaleString()}` : "-"); 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 className="mt-1">{children}</div>
</div> </div>
); );
// ✅ ให้เข้ากับหน้า Customers: ไม่ใช้ h-10 และใช้ py-2.5
const inputBase = 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 = 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 = [ const activeFilters = [
...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []), ...(q.trim() ? [{ key: "q", label: "ค้นหา", value: q.trim() }] : []),