diff --git a/app/page.tsx b/app/page.tsx index 67885324..f8273bb4 100644 --- a/app/page.tsx +++ b/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 = { - title: "Enkun - Dashboard", -}; - -export default function DashboardPage() { +export default function Home() { return ( -
-
-
+
+ {/* First row */} +
+
-
+
-
- +
+
-
+
-
+ + {/* Second row */} +
+
+ +
+
+ +
+
+
); } diff --git a/components/email.tsx b/components/email.tsx new file mode 100644 index 00000000..291b3e6c --- /dev/null +++ b/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([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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 ( + + + Email + + +

Loading...

+ + + ); + } + + return ( + + + Email + + + + {error ? ( +

{error}

+ ) : ( +
+ {emails.length === 0 ? ( +

No emails available

+ ) : ( + emails.map((email) => ( +
+
+ {email.sender.name} +
+ {email.isUnread && ( + + )} + {email.date} +
+
+

+ {email.subject} +

+
+ )) + )} +
+ )} + + + ); +} \ No newline at end of file diff --git a/components/news.tsx b/components/news.tsx index 83cebb2d..103a4134 100644 --- a/components/news.tsx +++ b/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 = [ - { - title: - "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest", - source: "CNN", - }, - { - title: - "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?", - source: "CBS Sports", - }, - { - title: "China's Baidu reports 15% revenue growth, beating expectations", - source: "CNBC", - }, - ]; + const [news, setNews] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [refreshing, setRefreshing] = useState(false); + const { status } = useSession(); + + const fetchNews = async (isRefresh = false) => { + if (isRefresh) setRefreshing(true); + setLoading(true); + + // Placeholder data - replace with actual API call + const mockNews = [ + { id: '1', title: 'New Project Management Features Released', date: '2024-03-20', category: 'Product Update' }, + { 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 ( + + + News + + +

Loading...

+ + + ); + } return ( - - - News + + + News + - -
- {newsItems.map((item, i) => ( -
-

{item.title}

-

{item.source}

-
- ))} -
+ + {error ? ( +

{error}

+ ) : ( +
+ {news.length === 0 ? ( +

No news available

+ ) : ( + news.map((item) => ( +
+
+ {item.date} + + {item.category} + +
+

{item.title}

+
+ )) + )} +
+ )} );