64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { AnnouncementForm } from "./announcement-form";
|
|
import { AnnouncementsList } from "./announcements-list";
|
|
import { AnnouncementsDropdown } from "./announcements-dropdown";
|
|
|
|
interface AnnouncementsPageProps {
|
|
userRole: string | string[];
|
|
}
|
|
|
|
export function AnnouncementsPage({ userRole = [] }: AnnouncementsPageProps) {
|
|
const roles = Array.isArray(userRole) ? userRole : [userRole];
|
|
|
|
// Check if user has admin, entrepreneurship, or communication role
|
|
const hasAdminAccess = roles.some(role =>
|
|
["admin", "entrepreneurship", "communication"].includes(role)
|
|
);
|
|
|
|
if (!hasAdminAccess) {
|
|
// For regular users, just show the dropdown
|
|
return (
|
|
<div className="flex flex-col">
|
|
<h1 className="text-2xl font-bold mb-6">Announcements</h1>
|
|
<AnnouncementsDropdown />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// For users with admin access, show the full UI with tabs
|
|
return (
|
|
<div className="flex flex-col">
|
|
<h1 className="text-2xl font-bold mb-6">Announcements Management</h1>
|
|
|
|
<Tabs defaultValue="list">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<TabsList className="bg-gray-200 border-0">
|
|
<TabsTrigger
|
|
value="list"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-700"
|
|
>
|
|
All Announcements
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="create"
|
|
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-700"
|
|
>
|
|
Create Announcement
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
<TabsContent value="list">
|
|
<AnnouncementsList userRole={roles} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="create">
|
|
<AnnouncementForm userRole={roles} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|