feat: Webhook Management System — Complete Frontend Dashboard for CommDesk

package.json

@@ -45,6 +45,9 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.3.0",
     "@tauri-apps/cli": "2.10.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/markdown-to-jsx": "^7.0.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -54,13 +57,15 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
     "prettier": "^3.8.3",
     "shadcn": "^3.8.5",
     "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.59.2",
-    "vite": "^7.3.3"
+    "vite": "^7.3.3",
+    "vitest": "^4.1.6"
   },
   "overrides": {
     "ip-address": "^10.1.1",

src-tauri/Cargo.toml

@@ -19,9 +19,9 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2.6.1", features = [] }
 
 [dependencies]
-tauri = { version = "2.10", features = [] }
-tauri-plugin-opener = "2.5"
-tauri-plugin-process = "2.3"
-tauri-plugin-updater = "2.10"
+tauri = { version = "2.0", features = [] }
+tauri-plugin-opener = "2.0"
+tauri-plugin-process = "2.0"
+tauri-plugin-updater = "2.0"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"

src/features/Member/v1/mock/dashboardData.ts

@@ -3,7 +3,7 @@ import { DashboardData } from "../../../Dashboard/Member/v1/Type/dashboard";
 export const dashboardData: DashboardData = {
   user: {
     name: "Arjun Mehta",
-    role: "Member",
+    role: "Admin",
   },
 
   summary: {

src/features/SideBar/v1/Section/SideBar.tsx

@@ -1,5 +1,5 @@
 import { RiContactsBookFill } from "react-icons/ri";
-import { MdAssignment, MdDashboard, MdEvent, MdGroup, MdSettings, MdWork } from "react-icons/md";
+import { MdAssignment, MdDashboard, MdEvent, MdGroup, MdSettings, MdWork, MdWebhook } from "react-icons/md";
 import { useTheme } from "@/theme";
 import { ThemeToggle } from "@/Component/ui/ThemeToggle";
 
@@ -49,6 +49,7 @@ const SideBar = () => {
         <SideBarLink icon={<MdGroup />} text="Teams" link="/org/member" />
         <SideBarLink icon={<MdEvent />} text="Events" link="/org/events" />
         <SideBarLink icon={<MdAssignment />} text="Tasks" link="/org/tasks" />
+        <SideBarLink icon={<MdWebhook />} text="Webhooks" link="/org/dashboard/webhooks" />
         <SideBarLink icon={<RiContactsBookFill />} text="Contact Submissions" link="/org/contact" />
 
         {/* Footer */}

src/features/Tasks/v1/components/common/ConfirmModal.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from "react";
-import { AlertTriangle, X, Loader2 } from "lucide-react";
+import { AlertTriangle, X, Loader2, CheckCircle2, Info, AlertCircle, LucideIcon } from "lucide-react";
+
+type ModalVariant = "danger" | "success" | "warning" | "info";
 
 interface ConfirmModalProps {
   isOpen: boolean;
@@ -10,9 +12,37 @@ interface ConfirmModalProps {
   onConfirm: () => void;
   onCancel: () => void;
   isLoading?: boolean;
-  danger?: boolean;
+  variant?: ModalVariant;
+  icon?: LucideIcon;
 }
 
+const VARIANT_CONFIG = {
+  danger: {
+    bg: "bg-[var(--cd-danger-subtle)]",
+    text: "text-[var(--cd-danger)]",
+    btn: "bg-[var(--cd-danger)] hover:bg-[var(--cd-danger-text)]",
+    icon: AlertTriangle,
+  },
+  success: {
+    bg: "bg-[var(--cd-success-subtle)]",
+    text: "text-[var(--cd-success)]",
+    btn: "bg-[var(--cd-success)] hover:bg-[var(--cd-success-text)]",
+    icon: CheckCircle2,
+  },
+  warning: {
+    bg: "bg-[var(--cd-warning-subtle)]",
+    text: "text-[var(--cd-warning)]",
+    btn: "bg-[var(--cd-warning)] hover:bg-[var(--cd-warning-text)]",
+    icon: AlertCircle,
+  },
+  info: {
+    bg: "bg-[var(--cd-primary-subtle)]",
+    text: "text-[var(--cd-primary)]",
+    btn: "bg-[var(--cd-primary)] hover:bg-[var(--cd-primary-text)]",
+    icon: Info,
+  },
+};
+
 export default function ConfirmModal({
   isOpen,
   title,
@@ -22,11 +52,13 @@ export default function ConfirmModal({
   onConfirm,
   onCancel,
   isLoading = false,
-  danger = false,
+  variant = "info",
+  icon: CustomIcon,
 }: ConfirmModalProps) {
   const cancelRef = useRef<HTMLButtonElement>(null);
+  const config = VARIANT_CONFIG[variant];
+  const Icon = CustomIcon || config.icon;
 
-  // Focus cancel on open & close on Escape
   useEffect(() => {
     if (!isOpen) return;
     cancelRef.current?.focus();
@@ -40,77 +72,58 @@ export default function ConfirmModal({
   if (!isOpen) return null;
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      aria-modal="true"
-      role="dialog"
-    >
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/30 backdrop-blur-[2px]"
+        className="absolute inset-0 bg-black/40 backdrop-blur-[2px]"
         onClick={() => !isLoading && onCancel()}
       />
 
       {/* Dialog */}
       <div 
-        className="relative z-10 w-full max-w-md mx-4 rounded-2xl shadow-2xl border overflow-hidden animate-in fade-in zoom-in-95 duration-150"
+        className="relative z-10 w-full max-w-md rounded-2xl shadow-2xl border overflow-hidden animate-in fade-in zoom-in-95 duration-150"
         style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
       >
-        {/* Close */}
         <button
           onClick={onCancel}
           disabled={isLoading}
           className="absolute top-4 right-4 p-1.5 rounded-lg text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)] transition disabled:opacity-40"
-          aria-label="Close"
         >
           <X size={16} />
         </button>
 
-        <div className="p-6">
-          {/* Icon + Title */}
-          <div className="flex items-start gap-4">
-            <div
-              className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center ${
-                danger ? "bg-[var(--cd-danger-subtle)]" : "bg-[var(--cd-primary-subtle)]"
-              }`}
-            >
-              <AlertTriangle
-                size={22}
-                className={danger ? "text-[var(--cd-danger)]" : "text-[var(--cd-primary)]"}
-              />
+        <div className="p-6 pt-8">
+          <div className="flex flex-col items-center text-center gap-4">
+            <div className={`shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center ${config.bg}`}>
+              <Icon size={28} className={config.text} />
             </div>
-            <div className="flex flex-col gap-2 min-w-0">
-              <h3 className="text-lg font-bold text-[var(--cd-text)] leading-tight">{title}</h3>
-              <p className="text-sm text-[var(--cd-text-2)] leading-relaxed">{message}</p>
+
+            <div className="flex flex-col gap-2">
+              <h3 className="text-xl font-bold text-[var(--cd-text)] leading-tight">{title}</h3>
+              <p className="text-[var(--cd-text-2)] leading-relaxed">{message}</p>
             </div>
           </div>
 
-          {/* Actions */}
-          <div className="flex items-center justify-end gap-3 mt-8">
+          <div className="flex items-center gap-3 mt-8">
             <button
               ref={cancelRef}
               onClick={onCancel}
               disabled={isLoading}
-              className="px-5 py-2.5 rounded-xl border border-[var(--cd-border)] text-sm font-bold text-[var(--cd-text-2)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)] transition-all active:scale-95 disabled:opacity-40"
+              className="flex-1 px-5 py-3 rounded-xl border border-[var(--cd-border)] text-sm font-bold text-[var(--cd-text-2)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)] transition-all active:scale-95 disabled:opacity-40"
             >
               {cancelLabel}
             </button>
             <button
               onClick={onConfirm}
               disabled={isLoading}
-              className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-bold text-white transition-all active:scale-95 shadow-sm disabled:opacity-60 ${
-                danger
-                  ? "bg-[var(--cd-danger)] hover:opacity-90 shadow-[var(--cd-danger-subtle)]"
-                  : "bg-[var(--cd-primary)] hover:opacity-90 shadow-[var(--cd-primary-subtle)]"
-              }`}
+              className={`flex-1 flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-sm font-bold text-white transition-all active:scale-95 shadow-sm disabled:opacity-60 ${config.btn}`}
             >
-              {isLoading && <Loader2 size={15} className="animate-spin" />}
+              {isLoading && <Loader2 size={16} className="animate-spin" />}
               {confirmLabel}
             </button>
           </div>
         </div>
       </div>
-
     </div>
   );
-}
+}

src/features/Webhooks/v1/Webhook.types.ts

@@ -0,0 +1,75 @@
+export type WebhookEvent =
+  | "member.created"
+  | "member.activated"
+  | "event.created"
+  | "hackathon.created"
+  | "github.push"
+  | "github.pr.opened";
+
+export type WebhookStatus = "active" | "inactive";
+
+export interface Webhook {
+  id: string;
+  name: string;
+  url: string;
+  events: WebhookEvent[];
+  status: WebhookStatus;
+  secret: string; // Typically masked like ********abcd
+  permissions?: string[];
+  lastDeliveryStatus?: "success" | "failed" | "pending";
+  lastTestedAt?: string;
+  lastTestStatus?: "success" | "failed";
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface WebhookLog {
+  id: string;
+  webhookId: string;
+  event: WebhookEvent;
+  status: "success" | "failed";
+  timestamp: string;
+  responseCode: number;
+  requestPayload: unknown;
+  responsePayload: unknown;
+}
+
+export interface CreateWebhookPayload {
+  name: string;
+  url: string;
+  events: WebhookEvent[];
+  secret?: string;
+  permissions?: string[];
+}
+
+export interface UpdateWebhookPayload {
+  name?: string;
+  url?: string;
+  events?: WebhookEvent[];
+  status?: WebhookStatus;
+  secret?: string;
+}
+
+export interface WebhookFilters {
+  status: WebhookStatus | "all";
+  search: string;
+  page: number;
+}
+
+export interface PaginatedWebhooks {
+  data: Webhook[];
+  total: number;
+  totalPages: number;
+}
+
+export interface WebhookLogFilters {
+  status: "all" | "success" | "failed";
+  event: WebhookEvent | "all";
+  page: number;
+}
+
+export interface PaginatedWebhookLogs {
+  data: WebhookLog[];
+  total: number;
+  totalPages: number;
+}