75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { checkingApi } from "@/api/checking-api";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { TabsContent } from "@/components/ui/tabs";
|
|
import { cn, formatTime } from "@/lib/utils";
|
|
import useAppStore from "@/stores/use-app-store";
|
|
import { ClipboardList } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export function LogList({ className }: { className?: string }) {
|
|
const [logs, setLogs] = useState<ILog[]>([]);
|
|
const { refreshLog, setRefreshLog } = useAppStore();
|
|
|
|
const loadLogs = async () => {
|
|
try {
|
|
const { data } = await checkingApi.logs();
|
|
setLogs(data);
|
|
setRefreshLog(false);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadLogs();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!refreshLog) return;
|
|
loadLogs();
|
|
}, [refreshLog]);
|
|
|
|
return (
|
|
<div className={cn("flex flex-col gap-2 p-3 overflow-y-auto h-full", className)}>
|
|
{logs.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-full text-gray-400">
|
|
<ClipboardList className="size-10 mb-2" />
|
|
<p className="text-sm">Chưa có dữ liệu điểm danh</p>
|
|
</div>
|
|
) : (
|
|
logs.map((log, index) => (
|
|
<div
|
|
key={index}
|
|
className={cn(
|
|
"p-3 rounded-lg border transition-all duration-200",
|
|
index === 0
|
|
? "bg-blue-50 border-blue-200"
|
|
: "bg-gray-50 border-gray-200"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="font-medium text-gray-900 text-sm">{log.name}</span>
|
|
<Badge
|
|
className="capitalize"
|
|
variant={log.status === "check out" ? "destructive" : "secondary"}
|
|
>
|
|
{log.status}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-xs text-gray-600">{formatTime(log.time)}</p>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function TabLogs({ value }: { value: string }) {
|
|
return (
|
|
<TabsContent value={value} className="flex-1 min-h-0 overflow-hidden">
|
|
<LogList />
|
|
</TabsContent>
|
|
);
|
|
}
|