133 lines
4.9 KiB
JavaScript
133 lines
4.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Search } from 'lucide-react';
|
|
|
|
const EVENT_LABELS = {
|
|
signup: 'Sign Up',
|
|
login: 'Login',
|
|
logout: 'Logout',
|
|
create_position: 'Create Position',
|
|
screen_candidate: 'Screen Candidate',
|
|
hire_candidate: 'Hire Candidate',
|
|
assign_employee: 'Assign Employee',
|
|
apply_job: 'Apply to Job',
|
|
start_interview: 'Start Interview',
|
|
};
|
|
|
|
const EVENT_COLORS = {
|
|
signup: 'bg-[#EEF3FE] text-[#1E40AF]',
|
|
login: 'bg-[#ECFDF5] text-[#065F46]',
|
|
logout: 'bg-[#F3F4F6] text-[#374151]',
|
|
create_position: 'bg-[#F5F3FF] text-[#5B21B6]',
|
|
screen_candidate: 'bg-[#FFFBEB] text-[#92400E]',
|
|
hire_candidate: 'bg-[#ECFDF5] text-[#065F46]',
|
|
assign_employee: 'bg-[#F0F9FF] text-[#075985]',
|
|
apply_job: 'bg-[#EEF3FE] text-[#1E40AF]',
|
|
start_interview: 'bg-[#FEF2F2] text-[#991B1B]',
|
|
};
|
|
|
|
function formatTime(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
});
|
|
}
|
|
|
|
export default function ActivityLogTable({ activities }) {
|
|
const [filter, setFilter] = useState('all');
|
|
const [search, setSearch] = useState('');
|
|
|
|
const filtered = activities.filter((a) => {
|
|
if (filter !== 'all' && a.event_type !== filter) return false;
|
|
if (search) {
|
|
const q = search.toLowerCase();
|
|
return (
|
|
(a.user_email || '').toLowerCase().includes(q) ||
|
|
(a.user_name || '').toLowerCase().includes(q)
|
|
);
|
|
}
|
|
return true;
|
|
});
|
|
|
|
const eventTypes = ['all', ...Object.keys(EVENT_LABELS)];
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl border border-[#E5E7EB] overflow-hidden">
|
|
<div className="p-4 border-b border-[#E5E7EB] flex flex-col sm:flex-row gap-3 sm:items-center justify-between">
|
|
<h3 className="text-[14px] font-semibold text-[#111827]">Activity Log</h3>
|
|
<div className="flex gap-2">
|
|
<div className="relative">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#9CA3AF]" />
|
|
<input
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Search user..."
|
|
className="pl-8 pr-3 h-8 text-[12px] rounded-md border border-[#E5E7EB] focus:border-[#2563EB] focus:outline-none w-40"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={filter}
|
|
onChange={(e) => setFilter(e.target.value)}
|
|
className="h-8 text-[12px] rounded-md border border-[#E5E7EB] bg-white px-2 focus:border-[#2563EB] focus:outline-none"
|
|
>
|
|
{eventTypes.map((t) => (
|
|
<option key={t} value={t}>
|
|
{t === 'all' ? 'All Events' : EVENT_LABELS[t]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[40rem] text-[13px]">
|
|
<thead className="bg-[#F9FAFB] text-[#6B7280]">
|
|
<tr>
|
|
<th className="text-left font-medium px-4 py-2.5">Event</th>
|
|
<th className="text-left font-medium px-4 py-2.5">User</th>
|
|
<th className="text-left font-medium px-4 py-2.5">Role</th>
|
|
<th className="text-left font-medium px-4 py-2.5">Details</th>
|
|
<th className="text-left font-medium px-4 py-2.5">Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-[#F3F4F6]">
|
|
{filtered.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="text-center py-8 text-[#9CA3AF]">
|
|
No activity found
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filtered.slice(0, 50).map((a) => (
|
|
<tr key={a.id} className="hover:bg-[#F9FAFB]">
|
|
<td className="px-4 py-2.5">
|
|
<span
|
|
className={`inline-block px-2 py-0.5 rounded-full text-[11px] font-medium ${
|
|
EVENT_COLORS[a.event_type] || 'bg-[#F3F4F6] text-[#374151]'
|
|
}`}
|
|
>
|
|
{EVENT_LABELS[a.event_type] || a.event_type}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-2.5">
|
|
<div className="font-medium text-[#111827]">{a.user_name || '—'}</div>
|
|
<div className="text-[11px] text-[#9CA3AF]">{a.user_email}</div>
|
|
</td>
|
|
<td className="px-4 py-2.5 capitalize text-[#6B7280]">{a.account_type || '—'}</td>
|
|
<td className="px-4 py-2.5 text-[#6B7280] max-w-[200px] truncate">
|
|
{a.details || '—'}
|
|
</td>
|
|
<td className="px-4 py-2.5 text-[#6B7280] whitespace-nowrap">
|
|
{formatTime(a.created_date)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |