mirror of
https://github.com/rustmailer/bichon.git
synced 2026-08-03 07:48:34 +02:00
update
This commit is contained in:
rustmailer
@@ -22,7 +22,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, BarChart, Bar } from 'recharts';
|
||||
import { Mail, HardDrive, Database, Users, Inbox, Info, Search } from 'lucide-react';
|
||||
import { Mail, HardDrive, Database, Users, Inbox, Info } from 'lucide-react';
|
||||
import { formatBytes, formatNumber } from '@/lib/utils';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { get_dashboard_stats, INITIAL_DASHBOARD_STATS, TimeBucket } from '@/api/system/api';
|
||||
@@ -408,14 +408,22 @@ export default function MailArchiveDashboard() {
|
||||
{stats!.top_senders.map((s) => (
|
||||
<TableRow
|
||||
key={s.key}
|
||||
className="cursor-pointer hover:bg-accent/50 group"
|
||||
className="cursor-pointer hover:bg-accent/50 group relative"
|
||||
onClick={() => handleQuickSearch({ from: s.key })}
|
||||
>
|
||||
<TableCell className="font-medium max-w-[380px] truncate flex items-center gap-2">
|
||||
<Search size={12} className="opacity-0 group-hover:opacity-100 text-primary transition-opacity" />
|
||||
<span title={s.key}>{s.key}</span>
|
||||
<TableCell className="font-medium max-w-[380px] truncate relative px-4 h-9">
|
||||
<div className="absolute left-0 top-2 bottom-2 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-150" />
|
||||
<div className="absolute inset-x-4 bottom-1 h-[1px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left" />
|
||||
<span
|
||||
title={s.key}
|
||||
className="group-hover:text-primary transition-colors duration-200"
|
||||
>
|
||||
{s.key}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(s.count)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(s.count)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
@@ -443,13 +451,21 @@ export default function MailArchiveDashboard() {
|
||||
{stats!.top_largest_emails.map((m, index) => (
|
||||
<TableRow
|
||||
key={index}
|
||||
className="cursor-pointer hover:bg-accent/50 group"
|
||||
className="cursor-pointer hover:bg-accent/50 group relative"
|
||||
onClick={() => handleQuickSearch({ text: m.subject })}
|
||||
>
|
||||
<TableCell className="max-w-[350px] truncate font-medium flex items-center gap-2" title={m.subject}>
|
||||
<Search size={12} className="opacity-0 group-hover:opacity-100 text-primary transition-opacity" />
|
||||
<span>{m.subject || t('dashboard.noSubject')}</span>
|
||||
<TableCell
|
||||
className="max-w-[350px] truncate font-medium relative px-4"
|
||||
title={m.subject}
|
||||
>
|
||||
<div className="absolute left-0 top-2 bottom-2 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-150" />
|
||||
<div className="absolute inset-x-4 bottom-1 h-[1px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left" />
|
||||
|
||||
<span className="group-hover:text-primary transition-colors duration-200">
|
||||
{m.subject || t('dashboard.noSubject')}
|
||||
</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="text-right font-mono text-orange-600">
|
||||
{formatBytes(m.size_bytes)}
|
||||
</TableCell>
|
||||
@@ -482,7 +498,7 @@ export default function MailArchiveDashboard() {
|
||||
return (
|
||||
<TableRow
|
||||
key={acc.key}
|
||||
className="group cursor-pointer hover:bg-accent/50 transition-colors"
|
||||
className="group cursor-pointer hover:bg-accent/50 transition-colors relative"
|
||||
onClick={() => {
|
||||
if (accountId) {
|
||||
handleQuickSearch({ account_ids: [accountId] });
|
||||
@@ -491,11 +507,19 @@ export default function MailArchiveDashboard() {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TableCell className="font-medium max-w-[300px] truncate flex items-center gap-2">
|
||||
<Search size={12} className="opacity-0 group-hover:opacity-100 text-primary transition-opacity" />
|
||||
<span title={acc.key}>{acc.key}</span>
|
||||
<TableCell className="font-medium max-w-[300px] truncate relative px-4 h-9">
|
||||
<div className="absolute left-0 top-2 bottom-2 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-150" />
|
||||
<div className="absolute inset-x-4 bottom-1 h-[1px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left" />
|
||||
<span
|
||||
title={acc.key}
|
||||
className="group-hover:text-primary transition-colors duration-200"
|
||||
>
|
||||
{acc.key}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatNumber(acc.count)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(acc.count)}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
import { dateFnsLocaleMap, formatBytes } from "@/lib/utils"
|
||||
import { format, formatDistanceToNow } from "date-fns"
|
||||
import { MessageSquareText, Paperclip, Search } from "lucide-react"
|
||||
import { MessageSquareText, Paperclip } from "lucide-react"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { EmailEnvelope } from "@/api"
|
||||
@@ -93,27 +93,26 @@ export function MailListTable({
|
||||
const { account_email, account_id } = row.original;
|
||||
|
||||
return (
|
||||
<div className="group relative flex items-center w-full min-w-0 h-full">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter((prev: any) => ({
|
||||
...prev,
|
||||
account_ids: [account_id],
|
||||
mailbox_ids: undefined
|
||||
}));
|
||||
}}
|
||||
className="absolute left-0 z-10 opacity-0 group-hover:opacity-100 p-0.5 bg-background border rounded shadow-sm hover:bg-accent"
|
||||
>
|
||||
<Search size={12} className="text-primary" />
|
||||
</button>
|
||||
<span className="text-[11px] truncate group-hover:pl-5 transition-all duration-200">
|
||||
{account_email}
|
||||
<div
|
||||
className="group relative flex items-center w-full h-full px-2 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter((prev: any) => ({
|
||||
...prev,
|
||||
account_ids: [account_id],
|
||||
mailbox_ids: undefined
|
||||
}))
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-150" />
|
||||
<div className="absolute inset-x-2 bottom-0.5 h-[1px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left" />
|
||||
<span className="truncate flex-1 min-w-0 group-hover:text-primary transition-colors">
|
||||
<LongText className='text-xs'>{account_email}</LongText>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
meta: { className: 'w-[150px] text-xs' },
|
||||
meta: { className: 'w-[150px]' },
|
||||
minSize: 150, maxSize: 150,
|
||||
},
|
||||
{
|
||||
@@ -128,22 +127,22 @@ export function MailListTable({
|
||||
const visibleTags = safeTags.slice(0, 2);
|
||||
|
||||
return (
|
||||
<div className="group relative flex items-center w-full min-w-0 h-full">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter((prev: any) => ({
|
||||
...prev,
|
||||
account_ids: [account_id],
|
||||
mailbox_ids: [mailbox_id]
|
||||
}));
|
||||
}}
|
||||
className="absolute left-0 z-10 opacity-0 group-hover:opacity-100 p-0.5 bg-background border rounded shadow-sm hover:bg-accent transition-all"
|
||||
>
|
||||
<Search size={11} className="text-primary" />
|
||||
</button>
|
||||
<div className="flex flex-col min-w-0 transition-all duration-200 group-hover:pl-5">
|
||||
<span className="text-[11px] truncate font-medium leading-none">
|
||||
<div
|
||||
className="group relative flex items-center w-full min-w-0 h-full px-2 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter((prev: any) => ({
|
||||
...prev,
|
||||
account_ids: [account_id],
|
||||
mailbox_ids: [mailbox_id]
|
||||
}))
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-150" />
|
||||
<div className="absolute inset-x-2 bottom-0.5 h-[1px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left" />
|
||||
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<span className="text-[11px] truncate font-medium leading-none group-hover:text-primary transition-colors">
|
||||
{mailbox_name}
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
@@ -173,20 +172,16 @@ export function MailListTable({
|
||||
const { setFilter } = useSearchMessages();
|
||||
|
||||
return (
|
||||
<div className="group relative flex items-center w-full min-w-0">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter((prev: Record<string, any>) => ({ ...prev, from: fromEmail }));
|
||||
}}
|
||||
className="absolute left-0 z-10 opacity-0 group-hover:opacity-100 p-1 bg-background/90 hover:bg-accent rounded shadow-sm transition-all cursor-pointer"
|
||||
title={`Filter by ${fromEmail}`}
|
||||
>
|
||||
<Search size={12} className="text-primary" />
|
||||
</button>
|
||||
<LongText
|
||||
className='text-xs pl-0 group-hover:pl-6 transition-all duration-200 ease-in-out'
|
||||
>
|
||||
<div
|
||||
className="group relative flex items-center w-full min-w-0 h-full px-2 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter((prev: Record<string, any>) => ({ ...prev, from: fromEmail }))
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-150" />
|
||||
<div className="absolute inset-x-2 bottom-0.5 h-[1px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left" />
|
||||
<LongText className="text-xs flex-1 truncate group-hover:text-primary transition-colors">
|
||||
{fromEmail}
|
||||
</LongText>
|
||||
</div>
|
||||
@@ -204,20 +199,10 @@ export function MailListTable({
|
||||
const { setFilter } = useSearchMessages();
|
||||
|
||||
return (
|
||||
<div className="group relative flex items-center w-full min-w-0">
|
||||
{recipients.length > 0 && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter((prev: Record<string, any>) => ({ ...prev, to: recipients[0] }));
|
||||
}}
|
||||
className="absolute left-0 z-10 opacity-0 group-hover:opacity-100 p-1 bg-background/90 hover:bg-accent rounded shadow-sm transition-all cursor-pointer"
|
||||
title={`${t('search.filter_by')} ${recipients[0]}`}
|
||||
>
|
||||
<Search size={12} className="text-primary" />
|
||||
</button>
|
||||
)}
|
||||
<div className="text-xs transition-all duration-200 ease-in-out group-hover:pl-6 flex flex-wrap gap-x-1 min-w-0 overflow-hidden">
|
||||
<div className="group relative flex items-center w-full min-w-0 h-full px-2 overflow-hidden">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
<div className="text-xs flex flex-wrap gap-x-1 min-w-0 flex-1">
|
||||
{recipients.map((email, index) => (
|
||||
<span key={index} className="flex items-center">
|
||||
<button
|
||||
@@ -227,7 +212,6 @@ export function MailListTable({
|
||||
setFilter((prev: Record<string, any>) => ({ ...prev, to: email }));
|
||||
}}
|
||||
className="hover:text-primary hover:underline transition-colors truncate max-w-[150px]"
|
||||
title={`${t('search.filter_by')} ${email}`}
|
||||
>
|
||||
{email}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user