86dca3e9c2
1. Admin Store Link - Add to WP admin bar (Menu.php) with proper option check 2. Activity Log - Fix Loading text to show correct state after data loads 3. Avatar Upload - Use correct option key woonoow_allow_custom_avatar 4. Downloadable Files - Connect to WooCommerce native: - Add downloads array to format_product_full - Add downloads/download_limit/download_expiry handling in update_product - Add downloads handling in create_product
246 lines
12 KiB
TypeScript
246 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Link } from 'react-router-dom';
|
|
import { api } from '@/lib/api';
|
|
import { __ } from '@/lib/i18n';
|
|
import { SettingsLayout } from '../components/SettingsLayout';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
ArrowLeft,
|
|
Mail,
|
|
Bell,
|
|
MessageCircle,
|
|
Send,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Clock,
|
|
RefreshCw,
|
|
Filter,
|
|
Search
|
|
} from 'lucide-react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
|
|
interface NotificationLogEntry {
|
|
id: number;
|
|
channel: 'email' | 'push' | 'whatsapp' | 'telegram';
|
|
event: string;
|
|
recipient: string;
|
|
subject?: string;
|
|
status: 'sent' | 'failed' | 'pending' | 'queued';
|
|
created_at: string;
|
|
sent_at?: string;
|
|
error_message?: string;
|
|
}
|
|
|
|
interface NotificationLogsResponse {
|
|
logs: NotificationLogEntry[];
|
|
total: number;
|
|
page: number;
|
|
per_page: number;
|
|
}
|
|
|
|
const channelIcons: Record<string, React.ReactNode> = {
|
|
email: <Mail className="h-4 w-4" />,
|
|
push: <Bell className="h-4 w-4" />,
|
|
whatsapp: <MessageCircle className="h-4 w-4" />,
|
|
telegram: <Send className="h-4 w-4" />,
|
|
};
|
|
|
|
const statusConfig: Record<string, { icon: React.ReactNode; color: string; label: string }> = {
|
|
sent: { icon: <CheckCircle2 className="h-4 w-4" />, color: 'text-green-600 bg-green-50', label: 'Sent' },
|
|
failed: { icon: <XCircle className="h-4 w-4" />, color: 'text-red-600 bg-red-50', label: 'Failed' },
|
|
pending: { icon: <Clock className="h-4 w-4" />, color: 'text-yellow-600 bg-yellow-50', label: 'Pending' },
|
|
queued: { icon: <RefreshCw className="h-4 w-4" />, color: 'text-blue-600 bg-blue-50', label: 'Queued' },
|
|
};
|
|
|
|
export default function ActivityLog() {
|
|
const [search, setSearch] = React.useState('');
|
|
const [channelFilter, setChannelFilter] = React.useState('all');
|
|
const [statusFilter, setStatusFilter] = React.useState('all');
|
|
const [page, setPage] = React.useState(1);
|
|
|
|
const { data, isLoading, error, refetch } = useQuery<NotificationLogsResponse>({
|
|
queryKey: ['notification-logs', page, channelFilter, statusFilter, search],
|
|
queryFn: async () => {
|
|
const params = new URLSearchParams();
|
|
params.set('page', page.toString());
|
|
params.set('per_page', '20');
|
|
if (channelFilter !== 'all') params.set('channel', channelFilter);
|
|
if (statusFilter !== 'all') params.set('status', statusFilter);
|
|
if (search) params.set('search', search);
|
|
return api.get(`/notifications/logs?${params.toString()}`);
|
|
},
|
|
});
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleString();
|
|
};
|
|
|
|
return (
|
|
<SettingsLayout
|
|
title={__('Activity Log')}
|
|
description={__('View notification history and delivery status')}
|
|
action={
|
|
<Link to="/settings/notifications">
|
|
<Button variant="outline">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
{__('Back')}
|
|
</Button>
|
|
</Link>
|
|
}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Filters */}
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<div className="flex-1">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={__('Search by recipient or subject...')}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="!pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Select value={channelFilter} onValueChange={setChannelFilter}>
|
|
<SelectTrigger className="w-[150px]">
|
|
<SelectValue placeholder={__('Channel')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{__('All Channels')}</SelectItem>
|
|
<SelectItem value="email">{__('Email')}</SelectItem>
|
|
<SelectItem value="push">{__('Push')}</SelectItem>
|
|
<SelectItem value="whatsapp">{__('WhatsApp')}</SelectItem>
|
|
<SelectItem value="telegram">{__('Telegram')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="w-[150px]">
|
|
<SelectValue placeholder={__('Status')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{__('All Status')}</SelectItem>
|
|
<SelectItem value="sent">{__('Sent')}</SelectItem>
|
|
<SelectItem value="failed">{__('Failed')}</SelectItem>
|
|
<SelectItem value="pending">{__('Pending')}</SelectItem>
|
|
<SelectItem value="queued">{__('Queued')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline" size="icon" onClick={() => refetch()}>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Activity Log Table */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{__('Recent Activity')}</CardTitle>
|
|
<CardDescription>
|
|
{isLoading
|
|
? __('Loading...')
|
|
: data?.total
|
|
? `${data.total} ${__('notifications found')}`
|
|
: __('No notifications recorded yet')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
<RefreshCw className="h-8 w-8 mx-auto mb-2 animate-spin" />
|
|
<p>{__('Loading activity log...')}</p>
|
|
</div>
|
|
) : error ? (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
<XCircle className="h-8 w-8 mx-auto mb-2 text-red-500" />
|
|
<p>{__('Failed to load activity log')}</p>
|
|
<Button variant="outline" className="mt-4" onClick={() => refetch()}>
|
|
{__('Try Again')}
|
|
</Button>
|
|
</div>
|
|
) : !data?.logs?.length ? (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
<Bell className="h-12 w-12 mx-auto mb-2 opacity-30" />
|
|
<p className="text-lg font-medium">{__('No notifications yet')}</p>
|
|
<p className="text-sm">{__('Notification activities will appear here once sent.')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{data.logs.map((log) => (
|
|
<div
|
|
key={log.id}
|
|
className="flex items-start gap-4 p-4 border rounded-lg hover:bg-muted/50 transition-colors"
|
|
>
|
|
{/* Channel Icon */}
|
|
<div className="p-2 bg-muted rounded-lg">
|
|
{channelIcons[log.channel] || <Bell className="h-4 w-4" />}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="font-medium truncate">{log.event}</span>
|
|
<span
|
|
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ${statusConfig[log.status]?.color || 'text-gray-600 bg-gray-50'}`}
|
|
>
|
|
{statusConfig[log.status]?.icon}
|
|
{statusConfig[log.status]?.label || log.status}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground truncate">
|
|
{__('To')}: {log.recipient}
|
|
{log.subject && ` — ${log.subject}`}
|
|
</p>
|
|
{log.error_message && (
|
|
<p className="text-sm text-red-600 mt-1">
|
|
{__('Error')}: {log.error_message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Timestamp */}
|
|
<div className="text-xs text-muted-foreground whitespace-nowrap">
|
|
{formatDate(log.sent_at || log.created_at)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Pagination */}
|
|
{data.total > 20 && (
|
|
<div className="flex items-center justify-between pt-4 border-t">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page <= 1}
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|
>
|
|
{__('Previous')}
|
|
</Button>
|
|
<span className="text-sm text-muted-foreground">
|
|
{__('Page')} {page} {__('of')} {Math.ceil(data.total / 20)}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page >= Math.ceil(data.total / 20)}
|
|
onClick={() => setPage(p => p + 1)}
|
|
>
|
|
{__('Next')}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</SettingsLayout>
|
|
);
|
|
}
|