-
-
-
+
+
+ {/* First row */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Second row */}
+
);
diff --git a/components/email.tsx b/components/email.tsx
new file mode 100644
index 00000000..b91ca50b
--- /dev/null
+++ b/components/email.tsx
@@ -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
([]);
+ const [mailUrl, setMailUrl] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(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 (
+
+
+
+
+
+ Mail
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Mail
+
+
+
+
+
+ {error ? (
+ {error}
+ ) : (
+
+ {emails.length === 0 ? (
+
+ {loading ? 'Loading emails...' : 'No unread emails'}
+
+ ) : (
+ emails.map((email) => (
+
router.push('/mail')}
+ >
+
+
+ {email.fromName || email.from}
+
+
+ {!email.read && }
+ {formatDate(email.date)}
+
+
+
{email.subject}
+
+ ))
+ )}
+