widgets email and news
This commit is contained in:
Alma
parent
ba18b37491
commit
667d69b053
41
app/page.tsx
41
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 (
|
||||
<div className="container mx-auto p-6 mt-12">
|
||||
<div className='grid grid-cols-12 gap-4'>
|
||||
<div className='col-span-3'>
|
||||
<main className="container mx-auto p-4 space-y-4">
|
||||
{/* First row */}
|
||||
<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'>
|
||||
<Parole />
|
||||
<div className="col-span-3">
|
||||
<News />
|
||||
</div>
|
||||
<div className='col-span-3'>
|
||||
<div className="col-span-3">
|
||||
<Duties />
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
136
components/email.tsx
Normal file
136
components/email.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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<NewsItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(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 (
|
||||
<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>
|
||||
</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'>
|
||||
<CardHeader>
|
||||
<CardTitle>News</CardTitle>
|
||||
<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>
|
||||
<div className='space-y-4'>
|
||||
{newsItems.map((item, i) => (
|
||||
<div key={i} className='space-y-1'>
|
||||
<h3 className='font-medium'>{item.title}</h3>
|
||||
<p className='text-sm text-gray-500'>{item.source}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user