clain mails page restore

app/email/page.tsx

@@ -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>
+  );
+} 

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">
+    <main className="h-screen overflow-auto">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
+      <div className="container mx-auto p-4 mt-12">
-        <News />
+        {/* First row */}
-        <Duties />
+        <div className="grid grid-cols-12 gap-4 mb-4">
-        <Parole />
+          <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>
   );

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<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>
+  );
+} 

components/main-nav.tsx

@@ -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',
+      title: "ShowCase",
-      href: '/healthview',
+      icon: Lightbulb,
-      icon: Activity,
+      href: '/showcase',
-      roles: ['admin', 'user']
+      requiredRoles: ["Expression"],
     },
     {
-      title: 'MissionView',
+      title: "UsersView",
-      href: '/missionview',
+      icon: UserCog,
-      icon: Target,
+      href: '/management',
-      roles: ['admin', 'user']
+      requiredRoles: ["Admin", "Entrepreneurship"],
     },
     {
-      title: 'Announcement',
+      title: "TheMessage",
-      href: '/announcement',
+      icon: Mail,
-      icon: Megaphone,
+      href: '/the-message',
-      roles: ['admin', 'user']
+      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