widgets email and news

app/page.tsx

@@ -1,29 +1,40 @@
+"use client";
+
 import { QuoteCard } from "@/components/quote-card";
-import { Parole } from "@/components/parole";
-import { Duties } from "@/components/flow";
 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";
 
-export const metadata = {
+export default function Home() {
-  title: "Enkun - Dashboard",
-};
-
-export default function DashboardPage() {
   return (
-    <div className="container mx-auto p-6 mt-12">
+    <main className="container mx-auto p-4 space-y-4">
-      <div className='grid grid-cols-12 gap-4'>
+      {/* First row */}
-        <div className='col-span-3'>
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-3">
           <QuoteCard />
         </div>
-        <div className='col-span-3'>
+        <div className="col-span-3">
           <Calendar />
         </div>
-        <div className='col-span-3'>
+        <div className="col-span-3">
-          <Parole />
+          <News />
         </div>
-        <div className='col-span-3'>
+        <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>
+    </main>
   );
 }

components/email.tsx

@@ -0,0 +1,136 @@
+"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";
+
+interface Email {
+  id: string;
+  subject: string;
+  sender: {
+    name: string;
+    email: string;
+  };
+  date: string;
+  isUnread: boolean;
+}
+
+export function Email() {
+  const [emails, setEmails] = useState<Email[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const { status } = useSession();
+
+  const fetchEmails = async (isRefresh = false) => {
+    if (isRefresh) setRefreshing(true);
+    setLoading(true);
+    
+    // Placeholder data - replace with actual API call
+    const mockEmails = [
+      { 
+        id: '1', 
+        subject: 'Project Update: Q1 Milestones', 
+        sender: { name: 'Project Manager', email: 'pm@example.com' },
+        date: '2024-03-20 09:30',
+        isUnread: true
+      },
+      { 
+        id: '2', 
+        subject: 'Team Meeting Notes', 
+        sender: { name: 'Team Lead', email: 'lead@example.com' },
+        date: '2024-03-19 15:45',
+        isUnread: false
+      },
+      { 
+        id: '3', 
+        subject: 'Important: System Maintenance', 
+        sender: { name: 'IT Support', email: 'it@example.com' },
+        date: '2024-03-19 11:20',
+        isUnread: true
+      },
+    ];
+    
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setEmails(mockEmails);
+      setError(null);
+    } catch (err) {
+      setError('Failed to fetch emails');
+      console.error('Error fetching emails:', err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    if (status === 'authenticated') {
+      fetchEmails();
+    }
+  }, [status]);
+
+  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">Email</CardTitle>
+        </CardHeader>
+        <CardContent className="p-6">
+          <p className="text-center text-gray-500">Loading...</p>
+        </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 border-b border-gray-100">
+        <CardTitle className="text-lg font-semibold text-gray-800">Email</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-4">
+        {error ? (
+          <p className="text-center text-red-500">{error}</p>
+        ) : (
+          <div className="space-y-4 max-h-[300px] overflow-y-auto">
+            {emails.length === 0 ? (
+              <p className="text-center text-gray-500">No emails available</p>
+            ) : (
+              emails.map((email) => (
+                <div
+                  key={email.id}
+                  className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors"
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-xs font-medium text-gray-500">{email.sender.name}</span>
+                    <div className="flex items-center space-x-2">
+                      {email.isUnread && (
+                        <span className="w-2 h-2 bg-blue-600 rounded-full"></span>
+                      )}
+                      <span className="text-xs text-gray-500">{email.date}</span>
+                    </div>
+                  </div>
+                  <h3 className={`text-sm ${email.isUnread ? 'font-semibold' : 'font-medium'} text-gray-800`}>
+                    {email.subject}
+                  </h3>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+} 

components/news.tsx

@@ -1,37 +1,108 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
+import { useSession } from "next-auth/react";
+
+interface NewsItem {
+  id: string;
+  title: string;
+  date: string;
+  category: string;
+}
 
 export function News() {
-  const newsItems = [
+  const [news, setNews] = useState<NewsItem[]>([]);
-    {
+  const [loading, setLoading] = useState(true);
-      title:
+  const [error, setError] = useState<string | null>(null);
-        "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest",
+  const [refreshing, setRefreshing] = useState(false);
-      source: "CNN",
+  const { status } = useSession();
-    },
+
-    {
+  const fetchNews = async (isRefresh = false) => {
-      title:
+    if (isRefresh) setRefreshing(true);
-        "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?",
+    setLoading(true);
-      source: "CBS Sports",
+    
-    },
+    // Placeholder data - replace with actual API call
-    {
+    const mockNews = [
-      title: "China's Baidu reports 15% revenue growth, beating expectations",
+      { id: '1', title: 'New Project Management Features Released', date: '2024-03-20', category: 'Product Update' },
-      source: "CNBC",
+      { id: '2', title: 'Team Meeting Schedule Changes', date: '2024-03-19', category: 'Announcement' },
-    },
+      { id: '3', title: 'Upcoming Training Sessions', date: '2024-03-18', category: 'Training' },
     ];
     
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setNews(mockNews);
+      setError(null);
+    } catch (err) {
+      setError('Failed to fetch news');
+      console.error('Error fetching news:', err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    if (status === 'authenticated') {
+      fetchNews();
+    }
+  }, [status]);
+
+  if (status === 'loading' || loading) {
     return (
-    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
+      <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>
+        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
-        <CardTitle>News</CardTitle>
+          <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
         </CardHeader>
-      <CardContent>
+        <CardContent className="p-6">
-        <div className='space-y-4'>
+          <p className="text-center text-gray-500">Loading...</p>
-          {newsItems.map((item, i) => (
+        </CardContent>
-            <div key={i} className='space-y-1'>
+      </Card>
-              <h3 className='font-medium'>{item.title}</h3>
+    );
-              <p className='text-sm text-gray-500'>{item.source}</p>
+  }
+
+  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">News</CardTitle>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => fetchNews(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-4">
+        {error ? (
+          <p className="text-center text-red-500">{error}</p>
+        ) : (
+          <div className="space-y-4 max-h-[300px] overflow-y-auto">
+            {news.length === 0 ? (
+              <p className="text-center text-gray-500">No news available</p>
+            ) : (
+              news.map((item) => (
+                <div
+                  key={item.id}
+                  className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors"
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-xs font-medium text-gray-500">{item.date}</span>
+                    <span className="text-xs px-2 py-1 rounded-full bg-blue-50 text-blue-700">
+                      {item.category}
+                    </span>
                   </div>
-          ))}
+                  <h3 className="text-sm font-medium text-gray-800">{item.title}</h3>
                 </div>
+              ))
+            )}
+          </div>
+        )}
       </CardContent>
     </Card>
   );