TakahashiNg
95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
"use client";
|
||
|
||
import type { ShiftEntity } from "@/lib/types";
|
||
|
||
import type { ShiftCardProps } from "./ShiftCard.types";
|
||
|
||
function formatWage(wage: number): string {
|
||
if (wage >= 1000) {
|
||
return `${(wage / 1000).toFixed(0)}k`;
|
||
}
|
||
return wage.toLocaleString("vi-VN");
|
||
}
|
||
|
||
export default function ShiftCard({
|
||
shift,
|
||
compact = false,
|
||
onClick,
|
||
}: ShiftCardProps) {
|
||
console.log(shift);
|
||
|
||
if (compact) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => onClick?.(shift)}
|
||
className={`w-full cursor-pointer rounded-lg border px-2 py-1.5 text-left text-xs transition-shadow hover:shadow-sm `}
|
||
>
|
||
<p className="font-semibold">
|
||
{shift.startTime} – {shift.endTime}
|
||
</p>
|
||
<p className="mt-0.5 opacity-75">
|
||
{}h · {formatWage(shift.wage)}
|
||
</p>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => onClick?.(shift)}
|
||
className={`w-full cursor-pointer rounded-xl border p-3 text-left transition-shadow hover:shadow-md `}
|
||
>
|
||
<div className="flex items-start justify-between">
|
||
<div>
|
||
<p className="text-sm font-bold">
|
||
{shift.startTime} – {shift.endTime}
|
||
</p>
|
||
<p className="mt-1 text-xs opacity-75">
|
||
{}h · {formatWage(shift.wage)} VND
|
||
</p>
|
||
</div>
|
||
<span
|
||
className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${
|
||
// shift.status === "available"
|
||
// ? "bg-blue-200 text-blue-800"
|
||
// : shift.status === "registered"
|
||
// ? "bg-blue-300 text-blue-900"
|
||
// : shift.status === "approved_leave"
|
||
// ? "bg-purple-200 text-purple-800"
|
||
// : "bg-red-200 text-red-800"
|
||
""
|
||
}`}
|
||
>
|
||
{/* {style.label} */}
|
||
</span>
|
||
</div>
|
||
|
||
{(shift.registeredStaff && shift.registeredStaff.length > 0) && (
|
||
<div className="mt-2 border-t border-current/10 pt-2">
|
||
<p className="text-[10px] font-medium tracking-wide uppercase opacity-60">
|
||
Nhân viên ({shift.registeredStaff.length}/{shift.maxStaff})
|
||
</p>
|
||
<div className="mt-1 flex flex-wrap gap-1">
|
||
{shift.registeredStaff.map((s) => (
|
||
<span
|
||
key={s.id}
|
||
className="rounded-full bg-white/60 px-2 py-0.5 text-[10px] font-medium"
|
||
>
|
||
{s.staffId}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* {shift.status === "available" && shift.registeredStaff.length === 0 && (
|
||
<p className="mt-2 text-[10px] italic opacity-50">
|
||
{shift.maxStaff} vị trí còn trống
|
||
</p>
|
||
)} */}
|
||
</button>
|
||
);
|
||
}
|