Working on notifier system.

src/components/wrappers/dashboard/common/notifier/notifier-card/button-delete-notifier.tsx

@@ -0,0 +1,62 @@
+"use client";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {useMutation} from "@tanstack/react-query";
+import {useRouter} from "next/navigation";
+import {Trash2} from "lucide-react";
+import {
+    removeNotificationChannelAction,
+} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.action";
+import {toast} from "sonner";
+
+export type DeleteNotifierButtonProps = {
+    notificationChannelId: string;
+    organizationId?: string;
+};
+
+export const DeleteNotifierButton = ({notificationChannelId, organizationId}: DeleteNotifierButtonProps) => {
+    const router = useRouter();
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            const result = await removeNotificationChannelAction({organizationId, notificationChannelId})
+            const inner = result?.data;
+
+            if (inner?.success) {
+                toast.success(inner.actionSuccess?.message);
+                router.refresh();
+            } else {
+                toast.error(inner?.actionError?.message);
+            }
+        },
+    });
+
+    return (
+        <ButtonWithConfirm
+            title="Delete Notifier"
+            description="Are you sure you want to remove this notifier? This action cannot be undone."
+            button={{
+                main: {
+                    size: "icon",
+                    variant: "ghost",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
+            }}
+            isPending={mutation.isPending}
+        />
+    );
+};

src/components/wrappers/dashboard/common/notifier/notifier-card/button-edit-notifier.tsx

@@ -0,0 +1,55 @@
+"use client";
+import {useMutation} from "@tanstack/react-query";
+import {useRouter} from "next/navigation";
+import {NotifierAddEditModal} from "@/components/wrappers/dashboard/common/notifier/notifier-add-edit-modal";
+import {NotificationChannel} from "@/db/schema/09_notification-channel";
+import {Switch} from "@/components/ui/switch";
+import {
+    updateNotificationChannelAction
+} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.action";
+import {toast} from "sonner";
+
+export type EditNotifierButtonProps = {
+    notificationChannel: NotificationChannel;
+};
+
+export const EditNotifierButton = ({notificationChannel}: EditNotifierButtonProps) => {
+    const router = useRouter();
+
+    const mutation = useMutation({
+        mutationFn: async (value: boolean) => {
+
+            const payload = {
+                data: {
+                    name: notificationChannel.name,
+                    provider: notificationChannel.provider,
+                    config: notificationChannel.config as Record<string, any>,
+                    enabled: value
+                },
+                notificationChannelId: notificationChannel.id
+            };
+
+            const result = await updateNotificationChannelAction(payload);
+            const inner = result?.data;
+
+            if (inner?.success) {
+                toast.success(inner.actionSuccess?.message);
+                router.refresh();
+            } else {
+                toast.error(inner?.actionError?.message);
+            }
+        },
+    });
+
+    return (
+        <>
+            <Switch checked={notificationChannel.enabled} onCheckedChange={async () => {
+                await mutation.mutateAsync(!notificationChannel.enabled)
+            }}
+            />
+            <NotifierAddEditModal
+                notificationChannel={notificationChannel}
+            />
+        </>
+    );
+};

src/components/wrappers/dashboard/common/notifier/notifier-card/notifier-card.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import {Card} from "@/components/ui/card";
+import {NotificationChannel} from "@/db/schema/09_notification-channel";
+import {Mail, MessageSquare, Pencil, Trash2, Webhook} from "lucide-react";
+import {Badge} from "@/components/ui/badge";
+import {Switch} from "@/components/ui/switch";
+import {
+    DeleteNotifierButton
+} from "@/components/wrappers/dashboard/common/notifier/notifier-card/button-delete-notifier";
+import {EditNotifierButton} from "@/components/wrappers/dashboard/common/notifier/notifier-card/button-edit-notifier";
+import {Organization} from "@/db/schema/03_organization";
+
+export type NotifierCardProps = {
+    data: NotificationChannel;
+    organization?: Organization;
+};
+
+export const NotifierCard = (props: NotifierCardProps) => {
+    const {data, organization} = props;
+
+    return (
+        <div className="block transition-all duration-200 rounded-xl">
+            <Card className="flex flex-row justify-between p-4">
+                <div className="flex items-center gap-3">
+                    <div
+                        className="flex h-10 w-10 items-center justify-center rounded-md bg-secondary border border-border">
+                        {getIcon(data.provider)}
+                    </div>
+                    <div className={`h-2 w-2 rounded-full ${data.enabled ? "bg-green-600" : "bg-muted"}`}/>
+                </div>
+
+                <div className="flex justify-start w-full">
+                    <div className="flex flex-col items-start md:flex-row md:items-center gap-2 ">
+                        <h3 className="font-medium text-foreground">{data.name}</h3>
+                        <Badge variant="secondary" className="text-xs font-mono">
+                            {data.provider}
+                        </Badge>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <EditNotifierButton notificationChannel={data}/>
+                    <DeleteNotifierButton
+                        organizationId={organization?.id}
+                        notificationChannelId={data.id}
+                    />
+                </div>
+            </Card>
+        </div>
+    );
+};
+
+
+const getIcon = (type: string) => {
+    const Icon = notificationTypes.find((t) => t.value === type)?.icon
+    return Icon ? <Icon className="h-4 w-4"/> : null
+}
+
+
+const notificationTypes = [
+    {value: "smtp", label: "Email", icon: Mail},
+    {value: "slack", label: "Slack", icon: MessageSquare},
+    {value: "webhook", label: "Webhook", icon: Webhook},
+]