fix: vercel integration, website service, cleanup

Author: izadoesdev

apps/dashboard/app/(main)/settings/integrations/vercel/_components/create-website-dialog.tsx

@@ -19,15 +19,9 @@ import {
 	SheetHeader,
 	SheetTitle,
 } from '@/components/ui/sheet';
-import type { Domain, Project } from './types';
+import type { Domain, Project, WebsiteConfig } from './types';
 import { generateWebsiteName, generateWebsitePlaceholder } from './utils';
 
-interface WebsiteConfig {
-	domain: Domain;
-	name: string;
-	target: string[];
-}
-
 interface CreateWebsiteDialogProps {
 	isOpen: boolean;
 	onClose: () => void;

apps/dashboard/app/(main)/settings/integrations/vercel/_components/project-row.tsx

@@ -1,3 +1,4 @@
+import { authClient } from '@databuddy/auth/client';
 import {
 	ArrowRightIcon,
 	CaretRightIcon,
@@ -7,7 +8,6 @@ import {
 	PlusIcon,
 	TrashIcon,
 	WarningIcon,
-	WrenchIcon,
 	XCircleIcon,
 } from '@phosphor-icons/react';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -25,7 +25,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Skeleton } from '@/components/ui/skeleton';
 import { trpc } from '@/lib/trpc';
-import type { Domain, Project } from './types';
+import type { Domain, Project, TriageAction } from './types';
 
 interface ProjectRowProps {
 	project: Project;
@@ -106,11 +106,7 @@ const TriageMenu = ({
 	domain: any;
 	triageIssueMutation: any;
 	onTriageAction: (
-		action:
-			| 'remove_orphaned'
-			| 'fix_domain_mismatch'
-			| 'remove_duplicates'
-			| 'create_missing_website',
+		action: TriageAction,
 		domainName: string,
 		envVarId?: string,
 		websiteId?: string
@@ -127,17 +123,6 @@ const TriageMenu = ({
 			});
 		}
 
-		if (
-			domainStatus.status === 'invalid' &&
-			domainStatus.issues[0]?.includes('Domain mismatch')
-		) {
-			actions.push({
-				label: 'Fix',
-				icon: WrenchIcon,
-				action: 'fix_domain_mismatch' as const,
-			});
-		}
-
 		if (
 			domainStatus.status === 'invalid' &&
 			domainStatus.issues[0]?.includes('Multiple')
@@ -149,14 +134,11 @@ const TriageMenu = ({
 			});
 		}
 
-		if (
-			domainStatus.status === 'not_integrated' &&
-			domainStatus.issues[0]?.includes('Website exists')
-		) {
+		if (domainStatus.status === 'integrated') {
 			actions.push({
-				label: 'Create Website',
-				icon: PlusIcon,
-				action: 'create_missing_website' as const,
+				label: 'Unintegrate',
+				icon: TrashIcon,
+				action: 'unintegrate' as const,
 			});
 		}
 
@@ -214,11 +196,7 @@ const TriageMenu = ({
 							key={action.action}
 							onClick={() => {
 								onTriageAction(
-									action.action as
-										| 'remove_orphaned'
-										| 'fix_domain_mismatch'
-										| 'remove_duplicates'
-										| 'create_missing_website',
+									action.action,
 									domain.name,
 									domainStatus.envVarId,
 									domainStatus.websiteId
@@ -251,11 +229,7 @@ const DomainRow = ({
 	isIntegrated: boolean;
 	onSelectionChange: (domainName: string, checked: boolean) => void;
 	onTriageAction: (
-		action:
-			| 'remove_orphaned'
-			| 'fix_domain_mismatch'
-			| 'remove_duplicates'
-			| 'create_missing_website',
+		action: TriageAction,
 		domainName: string,
 		envVarId?: string,
 		websiteId?: string
@@ -377,6 +351,8 @@ export function ProjectRow({
 		new Set()
 	);
 
+	const { data: activeOrganization } = authClient.useActiveOrganization();
+
 	const { data: domainsData, isLoading: isLoadingDomains } =
 		trpc.vercel.getProjectDomains.useQuery(
 			{ projectId: project.id },
@@ -428,24 +404,39 @@ export function ProjectRow({
 		}
 	};
 
+	const unintegrateMutation = trpc.vercel.unintegrate.useMutation();
+
 	const handleTriageAction = async (
-		action:
-			| 'remove_orphaned'
-			| 'fix_domain_mismatch'
-			| 'remove_duplicates'
-			| 'create_missing_website',
+		action: TriageAction,
 		domainName: string,
 		envVarId?: string,
 		websiteId?: string
 	) => {
 		try {
-			await triageIssueMutation.mutateAsync({
-				projectId: project.id,
-				action,
-				domainName,
-				envVarId,
-				websiteId,
-			});
+			if (action === 'unintegrate') {
+				if (!envVarId) {
+					throw new Error(
+						'Environment variable ID is required for unintegrate action'
+					);
+				}
+				await unintegrateMutation.mutateAsync({
+					projectId: project.id,
+					domainName,
+					envVarId,
+					websiteId,
+					deleteWebsite: false, // Default to keeping the website
+					organizationId: activeOrganization?.id,
+				});
+			} else {
+				await triageIssueMutation.mutateAsync({
+					projectId: project.id,
+					action,
+					domainName,
+					envVarId,
+					websiteId,
+					organizationId: activeOrganization?.id,
+				});
+			}
 
 			// Refresh the projects data to show updated status
 			await utils.vercel.getProjects.invalidate();
@@ -454,53 +445,6 @@ export function ProjectRow({
 		}
 	};
 
-	const getTriageActions = (domainStatus: any) => {
-		const actions = [];
-
-		if (domainStatus.status === 'orphaned') {
-			actions.push({
-				label: 'Remove',
-				icon: TrashIcon,
-				action: 'remove_orphaned' as const,
-			});
-		}
-
-		if (
-			domainStatus.status === 'invalid' &&
-			domainStatus.issues[0]?.includes('Domain mismatch')
-		) {
-			actions.push({
-				label: 'Fix',
-				icon: WrenchIcon,
-				action: 'fix_domain_mismatch' as const,
-			});
-		}
-
-		if (
-			domainStatus.status === 'invalid' &&
-			domainStatus.issues[0]?.includes('Multiple')
-		) {
-			actions.push({
-				label: 'Remove Duplicates',
-				icon: TrashIcon,
-				action: 'remove_duplicates' as const,
-			});
-		}
-
-		if (
-			domainStatus.status === 'not_integrated' &&
-			domainStatus.issues[0]?.includes('Website exists')
-		) {
-			actions.push({
-				label: 'Create Website',
-				icon: PlusIcon,
-				action: 'create_missing_website' as const,
-			});
-		}
-
-		return actions;
-	};
-
 	return (
 		<motion.div
 			animate={{
@@ -582,16 +526,6 @@ export function ProjectRow({
 						)}
 					</div>
 
-					<div className="flex justify-center truncate">
-						{project.live ? (
-							<span className="text-blue-600">fix: meta</span>
-						) : (
-							<span className="text-muted-foreground">
-								No Production Deployment
-							</span>
-						)}
-					</div>
-
 					<div className="hidden justify-center sm:flex">
 						{project.link?.productionBranch ? (
 							<div className="flex min-w-0 items-center space-x-1">

apps/dashboard/app/(main)/settings/integrations/vercel/_components/types.ts

@@ -1,38 +1,6 @@
-export interface Project {
-	id: string;
-	name: string;
-	framework?: string | null;
-	accountId: string;
-	directoryListing: boolean;
-	nodeVersion: string;
-	live?: boolean;
-	createdAt?: number;
-	updatedAt?: number;
-	primaryDomain?: string;
-	productionUrl?: string;
-	link?: {
-		type: string;
-		repo?: string;
-		org?: string;
-		productionBranch?: string;
-	};
-}
-
-export interface Domain {
-	name: string;
-	apexName: string;
-	projectId: string;
-	redirect?: string | null;
-	redirectStatusCode?: number | null;
-	gitBranch?: string | null;
-	customEnvironmentId?: string | null;
-	updatedAt: number;
-	createdAt: number;
-	verified: boolean;
-	verification?: Array<{
-		type: string;
-		domain: string;
-		value: string;
-		reason: string;
-	}>;
-}
+export type {
+	Domain,
+	Project,
+	TriageAction,
+	WebsiteConfig,
+} from '@databuddy/shared';

apps/dashboard/app/(main)/settings/integrations/vercel/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { authClient } from '@databuddy/auth/client';
 import { RocketLaunchIcon } from '@phosphor-icons/react';
 import { useState } from 'react';
 import { trpc } from '@/lib/trpc';
@@ -20,11 +21,21 @@ export default function VercelConfigPage() {
 	const [selectedDomains, setSelectedDomains] = useState<Domain[]>([]);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 
+	const { data: activeOrganization, isPending: isLoadingOrganization } =
+		authClient.useActiveOrganization();
+
 	const {
 		data: projectsData,
 		isLoading: isLoadingProjects,
 		error: projectsError,
-	} = trpc.vercel.getProjects.useQuery({ limit: '20' });
+	} = trpc.vercel.getProjects.useQuery(
+		{
+			limit: '20',
+			includeIntegrationStatus: true,
+			organizationId: activeOrganization?.id,
+		},
+		{ enabled: !isLoadingOrganization }
+	);
 
 	const toggleProjectExpansion = (projectId: string) => {
 		setExpandedProjects((prev) => {
@@ -64,6 +75,7 @@ export default function VercelConfigPage() {
 					verified: config.domain.verified,
 					gitBranch: config.domain.gitBranch,
 				})),
+				organizationId: activeOrganization?.id,
 			});
 
 			if (result.success) {
@@ -127,7 +139,7 @@ export default function VercelConfigPage() {
 
 			<main className="flex-1 overflow-y-auto">
 				<div>
-					{isLoadingProjects ? (
+					{isLoadingProjects || isLoadingOrganization ? (
 						<LoadingSkeleton />
 					) : projectsError ? (
 						<ErrorState message="Failed to load projects" />

packages/db/src/drizzle/schema.ts

@@ -284,6 +284,7 @@ export const websites = pgTable(
 		updatedAt: timestamp({ precision: 3 }).defaultNow().notNull(),
 		deletedAt: timestamp({ precision: 3 }),
 		organizationId: text('organization_id'),
+		integrations: jsonb(),
 	},
 	(table) => [
 		uniqueIndex('websites_user_domain_unique')