Working on notifier system.

2026-07-14 11:16:13 +02:00 · 2025-11-09 16:47:58 +01:00
parent 411e09f452
commit 7dfd9f02e8
27 changed files with 2755 additions and 81 deletions
@@ -0,0 +1,41 @@
+import {OrganizationWithMembers} from "@/db/schema/03_organization";
+import {Bell} from "lucide-react";
+import {NotificationChannel} from "@/db/schema/09_notification-channel";
+import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
+import {NotifierCard} from "@/components/wrappers/dashboard/common/notifier/notifier-card/notifier-card";
+import {NotifierAddEditModal} from "@/components/wrappers/dashboard/common/notifier/notifier-add-edit-modal";
+
+
+export type OrganizationNotifiersTabProps = {
+    organization: OrganizationWithMembers;
+    notificationChannels: NotificationChannel[];
+};
+
+export const OrganizationNotifiersTab = ({organization ,notificationChannels}: OrganizationNotifiersTabProps) => {
+
+
+    return (
+        <div className="flex flex-col gap-y-4 h-full py-4">
+            <div className="flex flex-col gap-y-4 ">
+                <div>
+                    <div className="flex items-center gap-3 mb-2">
+                        <div
+                            className="flex h-10 w-10 items-center justify-center rounded-lg bg-card border border-border">
+                            <Bell className="h-5 w-5 text-foreground"/>
+                        </div>
+                        <h1 className="text-3xl font-semibold text-balance">Notification Settings</h1>
+                    </div>
+                    <p className="text-muted-foreground leading-relaxed">
+                        Configure how and when you receive alerts about your services and infrastructure.
+                    </p>
+                </div>
+                <div>
+                    <NotifierAddEditModal organization={organization}/>
+                </div>
+            </div>
+            <div className=" h-full">
+                <CardsWithPagination data={notificationChannels} cardItem={NotifierCard} cardsPerPage={8} numberOfColumns={2} organization={organization}/>
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,56 @@
+"use client";
+
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
+import {useEffect, useState} from "react";
+import {useRouter, useSearchParams} from "next/navigation";
+import {OrganizationWithMembers} from "@/db/schema/03_organization";
+import {
+    SettingsOrganizationMembersTable
+} from "@/components/wrappers/dashboard/settings/settings-organization-members-table";
+import {
+    OrganizationNotifiersTab
+} from "@/components/wrappers/dashboard/organization/tabs/organization-notifiers-tab/organization-notifiers-tab";
+import {NotificationChannel} from "@/db/schema/09_notification-channel";
+
+export type OrganizationTabsProps = {
+    organization: OrganizationWithMembers;
+    notificationChannels: NotificationChannel[];
+};
+
+export const OrganizationTabs = ({organization, notificationChannels}: OrganizationTabsProps) => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    const [tab, setTab] = useState<string>(() => searchParams.get("tab") ?? "users");
+
+    useEffect(() => {
+        const newTab = searchParams.get("tab") ?? "users";
+        setTab(newTab);
+    }, [searchParams]);
+
+    const handleChangeTab = (value: string) => {
+        router.push(`?tab=${value}`);
+    };
+
+    return (
+        <Tabs className="h-full" value={tab} onValueChange={handleChangeTab}>
+            <TabsList className="w-full">
+                <TabsTrigger className="w-full" value="users">
+                    Users
+                </TabsTrigger>
+                <TabsTrigger className="w-full" value="notifications">
+                    Notifiers
+                </TabsTrigger>
+            </TabsList>
+            <TabsContent className="h-full" value="users">
+                <SettingsOrganizationMembersTable organization={organization}/>
+            </TabsContent>
+            <TabsContent className="h-full" value="notifications">
+                <OrganizationNotifiersTab
+                    organization={organization}
+                    notificationChannels={notificationChannels}
+                />
+            </TabsContent>
+        </Tabs>
+    );
+};