Prajyot

app/(root)/TableComponent.tsx

@@ -1,54 +1,44 @@
 "use client";
 import { useRouter } from "next/navigation";
 import React from "react";
-const data = [
-  {
-    id: 1,
-    platform: "LinkedIn",
-    title: "Pranav, Radhika Gupta has a new post for you",
-    description: "To every woman who sometimes wonders, can I do it, here is a thought...",
-    date: "Mar 17",
-  },
-  {
-    id: 2,
-    platform: "LinkedIn",
-    title: "Pranav, Nikhil Kamath has a new post for you",
-    description: "Digressing from the post, but it's about time we need an Indian answer to...",
-    date: "Mar 14",
-  },
-  {
-    id: 3,
-    platform: "LinkedIn",
-    title: "Pranav, Nikhil Kamath has a new post for you",
-    description: "Digressing from the post, but it's about time we need an Indian answer to...",
-    date: "Mar 12",
-  },
-];
-
 
+const data: Array<{id: number; platform: string; title: string; description: string; date: string;}> = [];
 
 const TableComponent = () => {
   const router = useRouter();
 
   return (
     <table className="w-full">
       <tbody>
-        {data.map((item, index) => (
-          <tr
-            key={index}
-            className="border-b cursor-pointer hover:bg-gray-100"
-            onClick={() => router.push(`/notification/${item.id}`)}
-          >
-            <td className="px-4 py-2">
-              <input type="checkbox" onClick={(e) => e.stopPropagation()} />
-            </td>
-            <td className="px-4 py-2">{item.platform}</td>
-            <td className="px-4 py-2">
-              <span className="font-semibold">{item.title}</span> - {item.description}
+        {data.length === 0 ? (
+          <tr>
+            <td className="px-4 py-8 text-center text-sm text-theme-secondary">
+              No items to display.
             </td>
-            <td className="px-4 py-2 text-gray-500">{item.date}</td>
           </tr>
-        ))}
+        ) : (
+          data.map((item) => (
+            <tr
+              key={item.id}
+              className="border-b border-theme-primary cursor-pointer hover:bg-theme-tertiary/30 transition-colors"
+              onClick={() => router.push(`/notification/${item.id}`)}
+            >
+              <td className="px-4 py-3">
+                <input
+                  type="checkbox"
+                  onClick={(e) => e.stopPropagation()}
+                  className="accent-brand-500"
+                />
+              </td>
+              <td className="px-4 py-3 text-xs font-medium text-brand-500 dark:text-brand-400">{item.platform}</td>
+              <td className="px-4 py-3">
+                <span className="text-sm font-medium text-theme-primary">{item.title}</span>
+                <span className="text-sm text-theme-tertiary"> — {item.description}</span>
+              </td>
+              <td className="px-4 py-3 text-xs text-theme-tertiary whitespace-nowrap">{item.date}</td>
+            </tr>
+          ))
+        )}
       </tbody>
     </table>
   );

app/(root)/TabsComponent2.tsx

@@ -1,80 +1,95 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
 
 interface TabPanelProps {
-    children?: React.ReactNode;
-    index: number;
-    value: number;
+  children?: React.ReactNode;
+  index: number;
+  value: number;
 }
 
 interface TabsProps {
-    tabTitles: string[];
-    tabContents: React.ReactNode[];
+  tabTitles: string[];
+  tabContents: React.ReactNode[];
 }
 
 function CustomTabPanel(props: TabPanelProps) {
-    const { children, value, index, ...other } = props;
-
-    return (
-        <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`simple-tabpanel-${index}`}
-            aria-labelledby={`simple-tab-${index}`}
-            {...other}
-        >
-            {value === index && <Box sx={{ p: 2 }}>{children}</Box>}
-        </div>
-    );
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`tabpanel-${index}`}
+      aria-labelledby={`tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 2 }}>{children}</Box>}
+    </div>
+  );
 }
 
 function a11yProps(index: number) {
-    return {
-        id: `simple-tab-${index}`,
-        'aria-controls': `simple-tabpanel-${index}`,
-    };
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`,
+  };
 }
 
 export default function TabsComponent2({ tabTitles, tabContents }: TabsProps) {
-    const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState(0);
 
-    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-        setValue(newValue);
-    };
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
 
-    return (
-        <Box sx={{ borderRadius: '15px', border: '1px solid #E0E0E0' }}>
-            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                <Tabs
-                    className="bg-white rounded-t-[15px] "
-                    value={value}
-                    onChange={handleChange}
-                    aria-label="tabs"
-                    variant="scrollable" // This is applied to Tabs, not Tab
-                    scrollButtons="auto" // This is applied to Tabs
-                    allowScrollButtonsMobile // Also applied to Tabs
-                >
-                    {tabTitles.map((title, index) => (
-                        <Tab
-                            key={title}
-                            className="  text-[#333333] font-semibold "
-                            label={title}
-                            {...a11yProps(index)}
-                        />
-                    ))}
-                </Tabs>
-            </Box>
-            <Box className="w-full overflow-x-auto  tab-scrollbar">
-                {tabContents.map((content, index) => (
-                    <CustomTabPanel key={index} value={value} index={index} >
-                        {content}
-                    </CustomTabPanel>
-                ))}
-            </Box>
-        </Box>
-    );
+  return (
+    <Box
+      sx={{
+        borderRadius: "12px",
+        border: "1px solid var(--border-primary)",
+        overflow: "hidden",
+        backgroundColor: "var(--bg-card)",
+      }}
+    >
+      <Box sx={{ borderBottom: 1, borderColor: "var(--border-primary)" }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="tabs"
+          variant="scrollable"
+          scrollButtons="auto"
+          allowScrollButtonsMobile
+          sx={{
+            backgroundColor: "var(--bg-card)",
+            "& .MuiTab-root": {
+              color: "var(--text-tertiary)",
+              fontWeight: 600,
+              fontSize: "0.875rem",
+              textTransform: "none",
+              "&.Mui-selected": {
+                color: "var(--accent-blue)",
+              },
+            },
+            "& .MuiTabs-indicator": {
+              backgroundColor: "var(--accent-blue)",
+            },
+          }}
+        >
+          {tabTitles.map((title, index) => (
+            <Tab key={title} label={title} {...a11yProps(index)} />
+          ))}
+        </Tabs>
+      </Box>
+      <Box className="w-full overflow-x-auto">
+        {tabContents.map((content, index) => (
+          <CustomTabPanel key={index} value={value} index={index}>
+            {content}
+          </CustomTabPanel>
+        ))}
+      </Box>
+    </Box>
+  );
 }

app/(root)/application/ApplicationsList.tsx

@@ -0,0 +1,86 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { Clock } from "lucide-react";
+import Link from "next/link";
+
+interface JoinRequest {
+  _id: string;
+  project: { _id: string; title: string };
+  status: string;
+  createdAt: string;
+}
+
+const ApplicationsList = ({ filterStatus }: { filterStatus: string }) => {
+  const [requests, setRequests] = useState<JoinRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchRequests = async () => {
+      try {
+        const response = await axios.get("/api/applications");
+        const filtered = response.data.filter(
+          (r: JoinRequest) => r.status === filterStatus
+        );
+        setRequests(filtered);
+      } catch (error) {
+        console.error("Error fetching applications:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRequests();
+  }, [filterStatus]);
+
+  if (loading) {
+    return (
+      <div className="w-full space-y-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-16 skeleton rounded-xl w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  if (requests.length === 0) {
+    return (
+      <div className="py-8 text-center text-sm text-theme-secondary">
+        No applications found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full space-y-2">
+      {requests.map((item) => (
+        <Link
+          key={item._id}
+          href={`/project/${item.project?._id}`}
+          className="block glass-card p-4 hover:border-brand-500/30 transition-colors"
+        >
+          <div className="flex justify-between items-center">
+            <span className="text-sm font-semibold text-theme-primary">
+              {item.project?.title || "Unknown Project"}
+            </span>
+            <div className="flex items-center gap-3 text-xs">
+              <span className={`px-2 py-1 rounded-md font-medium capitalize ${
+                item.status === 'accepted' ? 'bg-green-500/10 text-green-500' :
+                item.status === 'rejected' ? 'bg-red-500/10 text-red-500' :
+                'bg-amber-500/10 text-amber-500'
+              }`}>
+                {item.status}
+              </span>
+              <span className="flex items-center gap-1 text-theme-tertiary">
+                <Clock size={12} />
+                {new Date(item.createdAt).toLocaleDateString()}
+              </span>
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default ApplicationsList;