update widget

app/page.tsx

@@ -1,9 +1,5 @@
 import { QuoteCard } from "@/components/quote-card";
-import { Messages } from "@/components/messages";
-import { Podcast } from "@/components/podcast";
-import { CalendarWidget } from "@/components/calendar-widget";
-import { News } from "@/components/news";
-import { Todo } from "@/components/todo";
+import { Parole } from "@/components/parole";
 
 export const metadata = {
   title: "Enkun - Dashboard",
@@ -12,25 +8,12 @@ export const metadata = {
 export default function DashboardPage() {
   return (
     <div className="container mx-auto p-6 mt-12">
-      {/* Empty welcome section with reduced height */}
-      <div className='max-w-4xl mx-auto flex justify-between items-center mb-4'>
-        <div className='h-4'></div>
-      </div>
-
       <div className='grid grid-cols-12 gap-4'>
         <div className='col-span-3'>
           <QuoteCard />
-          <div className='mt-4'>
-            <News />
-          </div>
         </div>
         <div className='col-span-6'>
-          <Messages />
-        </div>
-        <div className='col-span-3 space-y-4'>
-          <Podcast />
-          <CalendarWidget />
-          <Todo />
+          <Parole />
         </div>
       </div>
     </div>

components/parole.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface Message {
+  _id: string;
+  msg: string;
+  ts: string;
+  u: {
+    _id: string;
+    username: string;
+    name?: string;
+  };
+}
+
+export function Parole() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchMessages = async () => {
+      try {
+        // First, login to get auth token
+        const loginResponse = await fetch('https://parole.slm-lab.net/api/v1/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            user: process.env.NEXT_PUBLIC_ROCKET_CHAT_USER,
+            password: process.env.NEXT_PUBLIC_ROCKET_CHAT_PASSWORD,
+          }),
+        });
+
+        if (!loginResponse.ok) {
+          throw new Error('Failed to authenticate with RocketChat');
+        }
+
+        const { data: authData } = await loginResponse.json();
+
+        // Then fetch messages using the auth token
+        const messagesResponse = await fetch('https://parole.slm-lab.net/api/v1/channels.messages?roomName=general', {
+          headers: {
+            'X-Auth-Token': authData.authToken,
+            'X-User-Id': authData.userId,
+          },
+        });
+
+        if (!messagesResponse.ok) {
+          throw new Error('Failed to fetch messages');
+        }
+
+        const { messages: chatMessages } = await messagesResponse.json();
+        setMessages(chatMessages);
+        setError(null);
+      } catch (err) {
+        console.error('Error fetching messages:', err);
+        setError(err instanceof Error ? err.message : 'Failed to fetch messages');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMessages();
+  }, []);
+
+  return (
+    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
+      <CardHeader>
+        <CardTitle>Parole Messages</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {loading && <p>Loading messages...</p>}
+        {error && <p className="text-red-500">Error: {error}</p>}
+        {!loading && !error && (
+          <div className="space-y-4">
+            {messages.map((message) => (
+              <div key={message._id} className="border-b pb-2">
+                <p className="font-medium">{message.u.name || message.u.username}</p>
+                <p className="text-sm">{message.msg}</p>
+                <p className="text-xs text-gray-500">
+                  {new Date(message.ts).toLocaleString()}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}