clain mails page
This commit is contained in:
parent
6ce1a9c483
commit
8c33cb1a63
@ -1,23 +0,0 @@
|
|||||||
import { getServerSession } from "next-auth/next";
|
|
||||||
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
|
|
||||||
import { redirect } from "next/navigation";
|
|
||||||
import { ResponsiveIframe } from "@/app/components/responsive-iframe";
|
|
||||||
|
|
||||||
export default async function Page() {
|
|
||||||
const session = await getServerSession(authOptions);
|
|
||||||
|
|
||||||
if (!session) {
|
|
||||||
redirect("/signin");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main className="w-full h-screen bg-black">
|
|
||||||
<div className="w-full h-full px-4 pt-12 pb-4">
|
|
||||||
<ResponsiveIframe
|
|
||||||
src={process.env.NEXT_PUBLIC_IFRAME_MAIL_URL || ''}
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,192 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { RefreshCw, Mail } from "lucide-react";
|
|
||||||
import { useSession } from "next-auth/react";
|
|
||||||
import { formatDistance } from 'date-fns/formatDistance';
|
|
||||||
import { fr } from 'date-fns/locale/fr';
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
|
|
||||||
interface Email {
|
|
||||||
id: string;
|
|
||||||
subject: string;
|
|
||||||
from: string;
|
|
||||||
fromName?: string;
|
|
||||||
date: string;
|
|
||||||
read: boolean;
|
|
||||||
starred: boolean;
|
|
||||||
folder: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EmailResponse {
|
|
||||||
emails: Email[];
|
|
||||||
mailUrl: string;
|
|
||||||
error?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Email() {
|
|
||||||
const [emails, setEmails] = useState<Email[]>([]);
|
|
||||||
const [mailUrl, setMailUrl] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [refreshing, setRefreshing] = useState(false);
|
|
||||||
const { data: session, status } = useSession();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const fetchEmails = async (isRefresh = false) => {
|
|
||||||
if (status !== 'authenticated') {
|
|
||||||
setError('Please sign in to view emails');
|
|
||||||
setLoading(false);
|
|
||||||
setRefreshing(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isRefresh) setRefreshing(true);
|
|
||||||
if (!isRefresh) setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/mail');
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json();
|
|
||||||
throw new Error(errorData.error || 'Failed to fetch emails');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
throw new Error(data.error);
|
|
||||||
}
|
|
||||||
|
|
||||||
const validatedEmails = data.emails.map((email: any) => ({
|
|
||||||
id: email.id || Date.now().toString(),
|
|
||||||
subject: email.subject || '(No subject)',
|
|
||||||
from: email.from || '',
|
|
||||||
fromName: email.fromName || email.from?.split('@')[0] || 'Unknown',
|
|
||||||
date: email.date || new Date().toISOString(),
|
|
||||||
read: !!email.read,
|
|
||||||
starred: !!email.starred,
|
|
||||||
folder: email.folder || 'INBOX'
|
|
||||||
}));
|
|
||||||
|
|
||||||
setEmails(validatedEmails);
|
|
||||||
setMailUrl(data.mailUrl || 'https://espace.slm-lab.net/apps/mail/');
|
|
||||||
setError(null);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : 'Error fetching emails');
|
|
||||||
setEmails([]);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
setRefreshing(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initial fetch
|
|
||||||
useEffect(() => {
|
|
||||||
if (status === 'authenticated') {
|
|
||||||
fetchEmails();
|
|
||||||
} else if (status === 'unauthenticated') {
|
|
||||||
setError('Please sign in to view emails');
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [status]);
|
|
||||||
|
|
||||||
// Auto-refresh every 5 minutes
|
|
||||||
useEffect(() => {
|
|
||||||
if (status !== 'authenticated') return;
|
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
fetchEmails(true);
|
|
||||||
}, 5 * 60 * 1000);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [status]);
|
|
||||||
|
|
||||||
const formatDate = (dateString: string) => {
|
|
||||||
try {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return formatDistance(date, new Date(), {
|
|
||||||
addSuffix: true,
|
|
||||||
locale: fr
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
return dateString;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (status === 'loading' || loading) {
|
|
||||||
return (
|
|
||||||
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
|
|
||||||
<CardTitle className="text-lg font-semibold text-gray-800">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Mail className="h-5 w-5 text-gray-600" />
|
|
||||||
<span>Mail</span>
|
|
||||||
</div>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="p-6">
|
|
||||||
<div className="flex items-center justify-center">
|
|
||||||
<RefreshCw className="h-5 w-5 animate-spin text-gray-400" />
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between pb-2 space-x-4 border-b border-gray-100">
|
|
||||||
<CardTitle className="text-lg font-semibold text-gray-800">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Mail className="h-5 w-5 text-gray-600" />
|
|
||||||
<span>Mail</span>
|
|
||||||
</div>
|
|
||||||
</CardTitle>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => fetchEmails(true)}
|
|
||||||
disabled={refreshing}
|
|
||||||
className={`${refreshing ? 'animate-spin' : ''} text-gray-600 hover:text-gray-900`}
|
|
||||||
>
|
|
||||||
<RefreshCw className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="p-3">
|
|
||||||
{error ? (
|
|
||||||
<p className="text-center text-red-500">{error}</p>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-2 max-h-[220px] overflow-y-auto">
|
|
||||||
{emails.length === 0 ? (
|
|
||||||
<p className="text-center text-gray-500">
|
|
||||||
{loading ? 'Loading emails...' : 'No unread emails'}
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
emails.map((email) => (
|
|
||||||
<div
|
|
||||||
key={email.id}
|
|
||||||
className="p-2 hover:bg-gray-50/50 rounded-lg transition-colors cursor-pointer"
|
|
||||||
onClick={() => router.push('/mail')}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-1">
|
|
||||||
<span className="text-sm text-gray-600 truncate max-w-[60%]" title={email.fromName || email.from}>
|
|
||||||
{email.fromName || email.from}
|
|
||||||
</span>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
{!email.read && <span className="w-1.5 h-1.5 bg-blue-600 rounded-full"></span>}
|
|
||||||
<span className="text-xs text-gray-500">{formatDate(email.date)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-800 truncate">{email.subject}</p>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -21,6 +21,7 @@ import {
|
|||||||
Lightbulb,
|
Lightbulb,
|
||||||
Circle,
|
Circle,
|
||||||
Menu,
|
Menu,
|
||||||
|
Activity,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@ -180,29 +181,29 @@ export function MainNav() {
|
|||||||
// Role-specific menu items
|
// Role-specific menu items
|
||||||
const roleSpecificItems = [
|
const roleSpecificItems = [
|
||||||
{
|
{
|
||||||
title: "ShowCase",
|
title: 'HealthView',
|
||||||
icon: Lightbulb,
|
href: '/healthview',
|
||||||
href: '/showcase',
|
icon: Activity,
|
||||||
requiredRoles: ["Expression"],
|
roles: ['admin', 'user']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "UsersView",
|
title: 'MissionView',
|
||||||
icon: UserCog,
|
href: '/missionview',
|
||||||
href: '/management',
|
icon: Target,
|
||||||
requiredRoles: ["Admin", "Entrepreneurship"],
|
roles: ['admin', 'user']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "TheMessage",
|
title: 'Announcement',
|
||||||
icon: Mail,
|
href: '/announcement',
|
||||||
href: '/the-message',
|
icon: Megaphone,
|
||||||
requiredRoles: ["Mediation", "Expression"],
|
roles: ['admin', 'user']
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// Get visible menu items based on user roles
|
// Get visible menu items based on user roles
|
||||||
const visibleMenuItems = [
|
const visibleMenuItems = [
|
||||||
...baseMenuItems,
|
...baseMenuItems,
|
||||||
...roleSpecificItems.filter(item => hasRole(item.requiredRoles))
|
...roleSpecificItems.filter(item => hasRole(item.roles))
|
||||||
];
|
];
|
||||||
|
|
||||||
// Format current date and time
|
// Format current date and time
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user