clain mails page restore
This commit is contained in:
parent
12ab91172e
commit
7319f4c6f4
23
app/email/page.tsx
Normal file
23
app/email/page.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
47
app/page.tsx
47
app/page.tsx
@ -1,31 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { QuoteCard } from "@/components/quote-card";
|
||||
import { Calendar } from "@/components/calendar";
|
||||
import { News } from "@/components/news";
|
||||
import { Duties } from "@/components/flow";
|
||||
import { Email } from "@/components/email";
|
||||
import { Parole } from "@/components/parole";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const { data: session } = useSession();
|
||||
const { data: session, status } = useSession();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
if (status !== "loading") {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [session]);
|
||||
}, [status]);
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>;
|
||||
return (
|
||||
<main className="h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
|
||||
<News />
|
||||
<Duties />
|
||||
<Parole />
|
||||
<main className="h-screen overflow-auto">
|
||||
<div className="container mx-auto p-4 mt-12">
|
||||
{/* First row */}
|
||||
<div className="grid grid-cols-12 gap-4 mb-4">
|
||||
<div className="col-span-3">
|
||||
<QuoteCard />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<Calendar />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<News />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<Duties />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second row */}
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-6">
|
||||
<Email />
|
||||
</div>
|
||||
<div className="col-span-6">
|
||||
<Parole />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
192
components/email.tsx
Normal file
192
components/email.tsx
Normal file
@ -0,0 +1,192 @@
|
||||
"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,7 +21,6 @@ import {
|
||||
Lightbulb,
|
||||
Circle,
|
||||
Menu,
|
||||
Activity,
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
@ -181,29 +180,29 @@ export function MainNav() {
|
||||
// Role-specific menu items
|
||||
const roleSpecificItems = [
|
||||
{
|
||||
title: 'HealthView',
|
||||
href: '/healthview',
|
||||
icon: Activity,
|
||||
roles: ['admin', 'user']
|
||||
title: "ShowCase",
|
||||
icon: Lightbulb,
|
||||
href: '/showcase',
|
||||
requiredRoles: ["Expression"],
|
||||
},
|
||||
{
|
||||
title: 'MissionView',
|
||||
href: '/missionview',
|
||||
icon: Target,
|
||||
roles: ['admin', 'user']
|
||||
title: "UsersView",
|
||||
icon: UserCog,
|
||||
href: '/management',
|
||||
requiredRoles: ["Admin", "Entrepreneurship"],
|
||||
},
|
||||
{
|
||||
title: 'Announcement',
|
||||
href: '/announcement',
|
||||
icon: Megaphone,
|
||||
roles: ['admin', 'user']
|
||||
}
|
||||
title: "TheMessage",
|
||||
icon: Mail,
|
||||
href: '/the-message',
|
||||
requiredRoles: ["Mediation", "Expression"],
|
||||
},
|
||||
];
|
||||
|
||||
// Get visible menu items based on user roles
|
||||
const visibleMenuItems = [
|
||||
...baseMenuItems,
|
||||
...roleSpecificItems.filter(item => hasRole(item.roles))
|
||||
...roleSpecificItems.filter(item => hasRole(item.requiredRoles))
|
||||
];
|
||||
|
||||
// Format current date and time
|
||||
|
||||
Loading…
Reference in New Issue
Block a user