[V0_FILE]typescriptreact:file="src/components/auth-session.tsx" "use client" import type React from "react" interface AuthSessionProps { children: React.ReactNode } export function AuthSession({ children }: AuthSessionProps) { // In a real implementation, this would handle authentication state // For now, we'll just pass through the children return <>{children} } [V0_FILE]typescriptreact:file="src/interfaces/api-response.ts" export interface ApiResponse { success: boolean data?: T error?: string message?: string } export interface PaginatedResponse extends ApiResponse { pagination: { page: number limit: number total: number totalPages: number } } export interface MigrationStatusResponse extends ApiResponse { data: { id: string status: string progress: number components: Array<{ name: string status: string progress: number }> } } [V0_FILE]typescriptreact:file="src/utils/format-date.ts" export function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }).format(date) } export function formatDuration(startTime: Date, endTime?: Date): string { const end = endTime || new Date() const diffMs = end.getTime() - startTime.getTime() const hours = Math.floor(diffMs / (1000 * 60 * 60)) const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)) if (hours > 0) { return `${hours}h ${minutes}m` } return `${minutes}m` } export function formatRelativeTime(date: Date): string { const now = new Date() const diffMs = now.getTime() - date.getTime() const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)) const diffHours = Math.floor(diffMs / (1000 * 60 * 60)) const diffMinutes = Math.floor(diffMs / (1000 * 60)) if (diffDays > 0) { return `${diffDays} day${diffDays > 1 ? "s" : ""} ago` } else if (diffHours > 0) { return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago` } else if (diffMinutes > 0) { return `${diffMinutes} minute${diffMinutes > 1 ? "s" : ""} ago` } else { return "Just now" } } [V0_FILE]typescriptreact:file="src/utils/truncate-text.ts" export function truncateText(text: string, maxLength: number): string { if (text.length <= maxLength) { return text } return text.slice(0, maxLength) + "..." } export function truncateMiddle(text: string, maxLength: number): string { if (text.length <= maxLength) { return text } const start = Math.ceil((maxLength - 3) / 2) const end = Math.floor((maxLength - 3) / 2) return text.slice(0, start) + "..." + text.slice(-end) } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "es6"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]javascript:file="next.config.mjs" isFixed="true" isQuickEdit="true" /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { appDir: true, }, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]typescriptreact:file="src/lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="src/components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="src/components/ui/dropdown-menu.tsx" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="src/components/ui/avatar.tsx" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="src/components/layout/header.tsx" isQuickEdit="true" "use client" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { BellIcon, HelpCircleIcon, Settings } from "lucide-react" export function Header() { return ( ) } [V0_FILE]typescriptreact:file="src/components/ui/button.tsx" isQuickEdit="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer", { variants: { variant: { default: "bg-primary text-primary-foreground hover:opacity-90 hover:shadow-md focus-visible:opacity-90 active:opacity-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-all duration-200", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:bg-destructive/90 active:bg-destructive/95 focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground active:bg-accent/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:bg-secondary/80 active:bg-secondary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", ghost: "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground active:bg-accent/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", link: "text-primary underline-offset-4 hover:underline focus-visible:underline active:text-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, disabled, children, tabIndex, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( {children} ) }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="src/utils/migration-store.ts" import { addMigrationToHistory, updateMigrationInHistory, type MigrationHistoryItem, } from "@/data/migration-history-data" // Utility functions to manage migration state across components export class MigrationStore { private static instance: MigrationStore private activeMigrations: Map = new Map() static getInstance(): MigrationStore { if (!MigrationStore.instance) { MigrationStore.instance = new MigrationStore() } return MigrationStore.instance } // Start a new migration startMigration(migration: any) { this.activeMigrations.set(migration.id, migration) // Add to history as running const historyItem: MigrationHistoryItem = { id: migration.id, type: migration.type, sourceOrg: migration.sourceOrg?.name || migration.sourceOrg, targetOrg: migration.targetOrg?.name || migration.targetOrg, status: "running", startTime: migration.startTime, duration: "0m (ongoing)", componentsTotal: migration.selectedComponents?.length || migration.components?.length || 4, componentsCompleted: 0, componentsErrors: 0, initiatedBy: migration.initiatedBy || "admin@acme.com", dataSize: migration.dataSize || "0 MB", totalItems: migration.totalItems || 0, selectedComponents: migration.selectedComponents, } addMigrationToHistory(historyItem) } // Complete a migration completeMigration(migrationId: string, completedData: any) { const migration = this.activeMigrations.get(migrationId) if (migration) { // Update in active migrations const updatedMigration = { ...migration, ...completedData, status: "completed" } this.activeMigrations.set(migrationId, updatedMigration) // Update in history updateMigrationInHistory(migrationId, { status: "completed", endTime: completedData.endTime, duration: completedData.duration, componentsCompleted: completedData.componentsTotal, dataSize: completedData.dataSize, totalItems: completedData.totalItems, selectedComponents: completedData.selectedComponents, }) } } // Get migration by ID getMigration(migrationId: string) { return this.activeMigrations.get(migrationId) } // Update migration progress updateMigrationProgress(migrationId: string, updates: any) { const migration = this.activeMigrations.get(migrationId) if (migration) { const updatedMigration = { ...migration, ...updates } this.activeMigrations.set(migrationId, updatedMigration) // Update in history if needed if (updates.status || updates.progress || updates.components) { updateMigrationInHistory(migrationId, { componentsCompleted: updates.components?.filter((c: any) => c.status === "completed").length || migration.componentsCompleted, componentsErrors: updates.components?.filter((c: any) => c.status === "error").length || migration.componentsErrors, }) } } } } export const migrationStore = MigrationStore.getInstance() [V0_FILE]typescriptreact:file="src/app/migrations/page.tsx" import { CrossOrgPortal } from "@/components/cross-org-portal" export default function MigrationsPage() { return } [V0_FILE]typescriptreact:file="src/app/migrations/[migrationId]/page.tsx" import { MigrationDetailsPage } from "@/components/migration/migration-details-page" interface MigrationDetailPageProps { params: { migrationId: string } } export default function MigrationDetailPage({ params }: MigrationDetailPageProps) { return } [V0_FILE]typescriptreact:file="src/app/page.tsx" isQuickEdit="true" import { redirect } from "next/navigation" import { ROUTES } from "@/constants/routes" export default function Home() { redirect(ROUTES.MIGRATIONS) } [V0_FILE]typescriptreact:file="src/app/migrations/new/page.tsx" isQuickEdit="true" import { AuthSession } from "@/components/auth-session" import { MigrationManagerPage } from "@/components/migration/migration-manager-page" export default function MigrationNewRoute() { return ( ) } [V0_FILE]typescriptreact:file="src/app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Platform Migration Hub", description: "Cross-org management console for data migration", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="src/components/ui/toast.tsx" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg bg-white", { variants: { variant: { default: "border bg-white text-foreground", destructive: "destructive border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="src/hooks/use-toast.ts" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 5000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="src/components/ui/toaster.tsx" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="src/components/migration/migration-manager.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import { MigrationSetup } from "./migration-setup" import { MigrationProgress } from "./migration-progress" import { SelectiveMigrationPage } from "./selective-migration-page" import { useRouter } from "next/navigation" import { ROUTES } from "@/constants/routes" interface MigrationManagerProps { onBack: () => void migrationId?: string viewMigration?: any source?: "portal" | "history" | "manager" initialTab?: "setup" | "history" } export function MigrationManager({ onBack, migrationId, viewMigration, source = "manager", initialTab = "setup", }: MigrationManagerProps) { const router = useRouter() const [activeTab, setActiveTab] = useState(initialTab) const [activeMigration, setActiveMigration] = useState(null) const [selectiveMigrationData, setSelectiveMigrationData] = useState<{ sourceOrg: any; targetOrg: any } | null>(null) if (activeMigration) { return ( { setActiveMigration(null) setActiveTab("setup") }} onBack={() => setActiveMigration(null)} /> ) } if (activeTab === "selective" && selectiveMigrationData) { return ( { setActiveTab("setup") setSelectiveMigrationData(null) }} onStartMigration={(migration) => { setActiveMigration(migration) setSelectiveMigrationData(null) }} /> ) } const getBackButtonText = () => { const referrer = document.referrer if (referrer.includes("/migrations/history")) { return "Back to Migration History" } else { return "Back to Portal" } } const handleBackNavigation = () => { const referrer = document.referrer if (referrer.includes("/migrations/history")) { router.push(ROUTES.MIGRATION_HISTORY) } else { router.push(ROUTES.MIGRATIONS) } } return (

Migration Manager

Manage data and configuration migrations between customer organizations

{ setSelectiveMigrationData({ sourceOrg, targetOrg }) setActiveTab("selective") }} />

) } [V0_FILE]typescriptreact:file="src/components/migration/migration-history-page.tsx" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import { MigrationHistory } from "./migration-history" import { useRouter } from "next/navigation" import { ROUTES } from "@/constants/routes" export function MigrationHistoryPage() { const router = useRouter() const handleViewMigrationDetails = (migration: any) => { router.push(`${ROUTES.MIGRATION_DETAIL}/${migration.id}`) } const handleBack = () => { // Check if we came from Migration Manager or Portal const referrer = document.referrer if (referrer.includes("/migrations/new")) { // Came from Migration Manager router.push(ROUTES.MIGRATION_NEW) } else { // Default to Portal router.push(ROUTES.MIGRATIONS) } } const getBackButtonText = () => { const referrer = document.referrer if (referrer.includes("/migrations/new")) { return "Back to Migration Manager" } else { return "Back to Portal" } } return (

Migration History

View and manage all migration activities across customer organizations

) } [V0_FILE]typescript:file="src/constants/routes.ts" export const ROUTES = { HOME: "/", MIGRATIONS: "/migrations", MIGRATION_NEW: "/migrations/new", MIGRATION_DETAIL: "/migrations", } as const [V0_FILE]typescriptreact:file="src/components/migration/migration-manager-page.tsx" "use client" import { MigrationManager } from "./migration-manager" import { useRouter } from "next/navigation" import { ROUTES } from "@/constants/routes" export function MigrationManagerPage() { const router = useRouter() const handleBack = () => { router.push(ROUTES.MIGRATIONS) } return } [V0_FILE]typescriptreact:file="src/components/migration/migration-details-page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { MigrationDetails } from "./migration-details" import { allMigrationHistory } from "@/data/migration-history-data" import { ROUTES } from "@/constants/routes" interface MigrationDetailsPageProps { migrationId: string } export function MigrationDetailsPage({ migrationId }: MigrationDetailsPageProps) { const router = useRouter() const [migration, setMigration] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { // Find migration in history data const foundMigration = allMigrationHistory.find((m) => m.id === migrationId) if (foundMigration) { setMigration(foundMigration) } else { setError("Migration not found") } setLoading(false) }, [migrationId]) const handleBack = () => { // Always go back to main migrations page (portal) router.push(ROUTES.MIGRATIONS) } if (loading) { return (

Loading migration details...

) } if (error || !migration) { return (

Migration Not Found

The requested migration could not be found.

) } // Always use "portal" as source since we're going back to the main page return } [V0_FILE]typescriptreact:file="src/components/migration/migration-header.tsx" "use client" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" interface MigrationHeaderProps { title: string subtitle: string backButtonText: string onBack: () => void } export function MigrationHeader({ title, subtitle, backButtonText, onBack }: MigrationHeaderProps) { return (

{title}

{subtitle}

) } [V0_FILE]typescript:file="src/data/component-dependencies.ts" export interface ComponentDependency { id: string name: string type: "required" | "optional" reason: string } export interface ComponentDependencies { [componentId: string]: { required: ComponentDependency[] optional: ComponentDependency[] } } // Define component dependencies - using actual component IDs from mock data export const componentDependencies: ComponentDependencies = { // Account object dependencies (using actual ID from mock data) account: { required: [ { id: "contract", // Contract object - parent dependency name: "Contract", type: "required", reason: "Contract object is a parent dependency for Account data", }, { id: "currency", // Currency object - parent dependency name: "Currency", type: "required", reason: "Currency object is a parent dependency for Account data", }, ], optional: [ { id: "case", // Case object - references Account name: "Case", type: "optional", reason: "Case object references Account data and may be useful to migrate together", }, { id: "case-history", // CaseHistory object - references Account name: "CaseHistory", type: "optional", reason: "CaseHistory object references Account data and may be useful to migrate together", }, { id: "asset", // Asset object - references Account name: "Asset", type: "optional", reason: "Asset object references Account data and may be useful to migrate together", }, ], }, // You can add more dependencies for other objects here contract: { required: [], optional: [], }, currency: { required: [], optional: [], }, case: { required: [], optional: [], }, "case-history": { required: [], optional: [], }, asset: { required: [], optional: [], }, } export function getComponentDependencies(componentId: string) { return componentDependencies[componentId] || { required: [], optional: [] } } export function getAllRequiredDependencies(selectedComponentIds: string[]): string[] { const requiredDeps = new Set() selectedComponentIds.forEach((componentId) => { const deps = getComponentDependencies(componentId) deps.required.forEach((dep) => requiredDeps.add(dep.id)) }) return Array.from(requiredDeps) } export function getAllOptionalDependencies(selectedComponentIds: string[]): string[] { const optionalDeps = new Set() selectedComponentIds.forEach((componentId) => { const deps = getComponentDependencies(componentId) deps.optional.forEach((dep) => optionalDeps.add(dep.id)) }) return Array.from(optionalDeps) } // Helper function to check if a component is a dependency of any selected component export function isDependencyOf( componentId: string, selectedComponentIds: string[], ): { isRequired: boolean isOptional: boolean requiredBy: string[] optionalFor: string[] } { const requiredBy: string[] = [] const optionalFor: string[] = [] selectedComponentIds.forEach((selectedId) => { const deps = getComponentDependencies(selectedId) if (deps.required.some((dep) => dep.id === componentId)) { requiredBy.push(selectedId) } if (deps.optional.some((dep) => dep.id === componentId)) { optionalFor.push(selectedId) } }) return { isRequired: requiredBy.length > 0, isOptional: optionalFor.length > 0, requiredBy, optionalFor, } } [V0_FILE]typescriptreact:file="src/components/ui/separator.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (

)) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="src/data/migration-mock-data.ts" isQuickEdit="true" export interface MigrationComponent { id: string name: string description: string category: string subcategory?: string } export interface MigrationCategory { id: string name: string icon: string } export const migrationComponents: MigrationComponent[] = [ // Schema { id: "schema", name: "Schema", description: "Database schema definitions, object structures, and field configurations", category: "schema", }, // Data { id: "accounts", name: "Accounts", description: "Customer and partner account records with relationships", category: "data", subcategory: "CRM", }, { id: "account-location", name: "Account Location", description: "Geographic location data associated with accounts", category: "data", subcategory: "CRM", }, { id: "acl-addax-transaction", name: "Acl Addax Transaction", description: "Access control list transaction records", category: "data", subcategory: "Platform", }, { id: "action-permission", name: "Action Permission", description: "User action permissions and access controls", category: "data", subcategory: "Platform", }, { id: "activity-history", name: "Activity History", description: "Historical activity logs and audit trails", category: "data", subcategory: "CRM", }, { id: "adhoc-approval-group", name: "Adhoc Approval Group", description: "Temporary approval groups for specific processes", category: "data", subcategory: "Approvals", }, { id: "adhoc-approval-process-info", name: "Adhoc Approval Process Info", description: "Information about ad-hoc approval processes", category: "data", subcategory: "Approvals", }, { id: "adhoc-approver", name: "Adhoc Approver", description: "Temporary approvers assigned to specific processes", category: "data", subcategory: "Approvals", }, { id: "ad-hoc-group", name: "Ad Hoc Group", description: "Temporary user groups created for specific purposes", category: "data", subcategory: "Approvals", }, { id: "adjustment-line-item", name: "Adjustment Line Item", description: "Line item adjustments and modifications", category: "data", subcategory: "Billing", }, { id: "agreement", name: "Agreement", description: "Contracts, legal agreements, and terms documentation", category: "data", subcategory: "CLM", }, { id: "agreement-clause", name: "Agreement Clause", description: "Individual clauses within agreements and contracts", category: "data", subcategory: "CLM", }, { id: "agreement-insight", name: "Agreement Insight", description: "Analytics and insights derived from agreement data", category: "data", subcategory: "CLM", }, { id: "agreement-life-cycle-action-config", name: "Agreement Life Cycle Action Config", description: "Configuration for agreement lifecycle actions", category: "data", subcategory: "CLM", }, { id: "agreement-line-item", name: "Agreement Line Item", description: "Individual line items within agreements", category: "data", subcategory: "CLM", }, { id: "agreement-obligation", name: "Agreement Obligation", description: "Obligations and commitments within agreements", category: "data", subcategory: "CLM", }, { id: "agreement-obligation-fulfillment", name: "Agreement Obligation Fulfillment", description: "Records of fulfilled agreement obligations", category: "data", subcategory: "CLM", }, { id: "agreement-protection", name: "Agreement Protection", description: "Protection clauses and safeguards in agreements", category: "data", subcategory: "CLM", }, { id: "agreement-rule", name: "Agreement Rule", description: "Business rules governing agreement processes", category: "data", subcategory: "CLM", }, { id: "ai-platform-context-model", name: "Ai Platform Context Model", description: "AI context models for intelligent processing", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-copilot-conversation", name: "Ai Platform Copilot Conversation", description: "AI copilot conversation history and data", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-document-checksum", name: "Ai Platform Document Checksum", description: "Document integrity checksums for AI processing", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-document-summary", name: "Ai Platform Document Summary", description: "AI-generated document summaries and abstracts", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-golden-templates", name: "Ai Platform Golden Templates", description: "Master templates for AI document processing", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-imported-document", name: "Ai Platform Imported Document", description: "Documents imported into the AI platform", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-job-tracker", name: "Ai Platform Job Tracker", description: "AI processing job tracking and status", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-message", name: "Ai Platform Message", description: "Messages and communications within AI platform", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-nlq-intent-templates", name: "Ai Platform NLQ Intent Templates", description: "Natural language query intent templates", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-prompt", name: "Ai Platform Prompt", description: "AI prompts and query templates", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-raw-file", name: "Ai Platform Raw File", description: "Raw files processed by the AI platform", category: "data", subcategory: "AI Platform", }, { id: "ai-platform-vectorized-document", name: "Ai Platform Vectorized Document", description: "Documents converted to vector format for AI processing", category: "data", subcategory: "AI Platform", }, { id: "alternate-clause-mapping", name: "Alternate Clause Mapping", description: "Mappings between alternative clause versions", category: "data", subcategory: "CLM", }, { id: "annotate", name: "Annotate", description: "Document annotations and markup data", category: "data", subcategory: "Document Automation", }, { id: "api-connection", name: "API Connection", description: "External API connection configurations", category: "data", subcategory: "Platform", }, { id: "api-template", name: "API Template", description: "Templates for API request and response structures", category: "data", subcategory: "Platform", }, { id: "api-template-test-step-relation", name: "API Template Test Step Relation", description: "Relationships between API templates and test steps", category: "data", subcategory: "Test Author", }, { id: "app-groups", name: "App Groups", description: "Application groupings and categorizations", category: "data", subcategory: "Core Apps", }, { id: "applied-attribute-constraint-rule-info", name: "Applied Attribute Constraint Rule Info", description: "Information about applied attribute constraint rules", category: "data", subcategory: "CPQ", }, { id: "applied-expression-info", name: "Applied Expression Info", description: "Information about applied business expressions", category: "data", subcategory: "CPQ", }, { id: "applied-rule-action-info", name: "Applied Rule Action Info", description: "Information about applied rule actions", category: "data", subcategory: "CPQ", }, { id: "applied-rule-info", name: "Applied Rule Info", description: "Information about applied business rules", category: "data", subcategory: "CPQ", }, { id: "app-registery", name: "App Registery", description: "Application registry and metadata", category: "data", subcategory: "Core Apps", }, { id: "approval-process", name: "Approval Process", description: "Approval workflow processes and definitions", category: "data", subcategory: "Approvals", }, { id: "approval-process-instance", name: "Approval Process Instance", description: "Active instances of approval processes", category: "data", subcategory: "Approvals", }, { id: "approval-request", name: "Approval Request", description: "Individual approval requests and submissions", category: "data", subcategory: "Approvals", }, { id: "approval-request-notification-history", name: "Approval Request Notification History", description: "History of approval request notifications", category: "data", subcategory: "Approvals", }, { id: "approval-rule", name: "Approval Rule", description: "Rules governing approval processes", category: "data", subcategory: "Approvals", }, { id: "approval-rule-assignee", name: "Approval Rule Assignee", description: "Assignees for approval rules", category: "data", subcategory: "Approvals", }, { id: "approval-rule-dimension", name: "Approval Rule Dimension", description: "Dimensions and criteria for approval rules", category: "data", subcategory: "Approvals", }, { id: "approval-rule-entry", name: "Approval Rule Entry", description: "Individual entries within approval rules", category: "data", subcategory: "Approvals", }, { id: "approvals-activity", name: "Approvals Activity", description: "Activity logs for approval processes", category: "data", subcategory: "Approvals", }, { id: "approvals-queue", name: "Approvals Queue", description: "Queues for managing approval workflows", category: "data", subcategory: "Approvals", }, { id: "approvals-queue-member", name: "Approvals Queue Member", description: "Members assigned to approval queues", category: "data", subcategory: "Approvals", }, { id: "asset", name: "Asset", description: "Customer assets, subscriptions, and installed products", category: "data", subcategory: "CPQ", }, { id: "asset-line-item", name: "Asset Line Item", description: "Individual line items within asset records", category: "data", subcategory: "CPQ", }, { id: "asset-line-item-attribute", name: "Asset Line Item Attribute", description: "Attributes associated with asset line items", category: "data", subcategory: "CPQ", }, { id: "asset-line-item-history", name: "Asset Line Item History", description: "Historical changes to asset line items", category: "data", subcategory: "CPQ", }, { id: "asset-renew-group", name: "Asset Renew Group", description: "Groups of assets for renewal processing", category: "data", subcategory: "CPQ", }, { id: "asset-renew-group-item", name: "Asset Renew Group Item", description: "Individual items within asset renewal groups", category: "data", subcategory: "CPQ", }, { id: "asset-transaction-history", name: "Asset Transaction History", description: "Historical transaction records for assets", category: "data", subcategory: "CPQ", }, { id: "asset-usage-price-tier", name: "Asset Usage Price Tier", description: "Pricing tiers for asset usage", category: "data", subcategory: "CPQ", }, { id: "asset-usage-price-tier-history", name: "Asset Usage Price Tier History", description: "Historical changes to asset usage pricing tiers", category: "data", subcategory: "CPQ", }, { id: "async-operation-status", name: "Async Operation Status", description: "Status tracking for asynchronous operations", category: "data", subcategory: "Platform", }, { id: "attribute", name: "Attribute", description: "Product and entity attributes and properties", category: "data", subcategory: "CPQ", }, { id: "attribute-constraint-rule", name: "Attribute Constraint Rule", description: "Rules constraining attribute values and relationships", category: "data", subcategory: "CPQ", }, { id: "attribute-constraint-rule-entry", name: "Attribute Constraint Rule Entry", description: "Individual entries within attribute constraint rules", category: "data", subcategory: "CPQ", }, { id: "attribute-group", name: "Attribute Group", description: "Groupings of related attributes", category: "data", subcategory: "CPQ", }, { id: "attribute-group-member", name: "Attribute Group Member", description: "Members within attribute groups", category: "data", subcategory: "CPQ", }, { id: "attribute-matrix", name: "Attribute Matrix", description: "Matrix configurations for attribute relationships", category: "data", subcategory: "CPQ", }, { id: "attribute-matrix-entry", name: "Attribute Matrix Entry", description: "Individual entries within attribute matrices", category: "data", subcategory: "CPQ", }, { id: "authentication-activity-audit-history", name: "Authentication Activity Audit History", description: "Audit history for authentication activities", category: "data", subcategory: "Audit", }, { id: "backup-delegate-approver", name: "Backup Delegate Approver", description: "Backup and delegate approver assignments", category: "data", subcategory: "Approvals", }, { id: "batch", name: "Batch", description: "Batch processing jobs and operations", category: "data", subcategory: "Platform", }, { id: "billing-header", name: "Billing Header", description: "Header information for billing records", category: "data", subcategory: "Billing", }, { id: "billing-preference", name: "Billing Preference", description: "Customer billing preferences and settings", category: "data", subcategory: "Billing", }, { id: "billing-schedule-details", name: "Billing Schedule Details", description: "Detailed billing schedule information", category: "data", subcategory: "Billing", }, { id: "billing-schedule-record", name: "Billing Schedule Record", description: "Individual billing schedule records", category: "data", subcategory: "Billing", }, { id: "box-basilisk-transaction-persistence-records", name: "Box Basilisk Transaction Persistence Records", description: "Transaction persistence records for Box Basilisk", category: "data", subcategory: "Internal", }, { id: "bundle-config-records-tracker", name: "Bundle Config Records Tracker", description: "Tracking records for bundle configurations", category: "data", subcategory: "Internal", }, { id: "business-classifications", name: "Business Classifications", description: "Business classification categories and taxonomies", category: "data", subcategory: "Common", }, { id: "business-unit", name: "Business Unit", description: "Organizational business unit structures", category: "data", subcategory: "CRM", }, { id: "category", name: "Category", description: "Product and content categorization data", category: "data", subcategory: "Common", }, { id: "cci-config", name: "Cci Config", description: "CCI configuration settings and parameters", category: "data", subcategory: "Internal", }, { id: "claim-access", name: "Claim Access", description: "Access claims and permissions data", category: "data", subcategory: "Platform", }, { id: "clause-comparison", name: "Clause Comparison", description: "Comparison data between different clauses", category: "data", subcategory: "CLM", }, { id: "clause-comparison-status", name: "Clause Comparison Status", description: "Status information for clause comparisons", category: "data", subcategory: "CLM", }, { id: "clause-configuration", name: "Clause Configuration", description: "Configuration settings for clauses", category: "data", subcategory: "CLM", }, { id: "clause-map", name: "Clause Map", description: "Mapping relationships between clauses", category: "data", subcategory: "CLM", }, { id: "clause-obligation", name: "Clause Obligation", description: "Obligations defined within clauses", category: "data", subcategory: "CLM", }, { id: "clm-project-code", name: "Clm Project Code", description: "Project codes for CLM (Contract Lifecycle Management)", category: "data", subcategory: "CLM", }, { id: "collaboration-request", name: "Collaboration Request", description: "Requests for collaboration and shared access", category: "data", subcategory: "CLM", }, { id: "company-location", name: "Company Location", description: "Company location and facility information", category: "data", subcategory: "CRM", }, { id: "composer-solution", name: "Composer Solution", description: "Composer solution configurations and templates", category: "data", subcategory: "Document Automation", }, { id: "configuration-change-audit-history", name: "Configuration Change Audit History", description: "Audit history for configuration changes", category: "data", subcategory: "Audit", }, { id: "configuration-entity", name: "Configuration Entity", description: "Configuration entity definitions and structures", category: "data", subcategory: "Common", }, { id: "conga-sign-event", name: "Conga Sign Event", description: "Events and activities from Conga Sign", category: "data", subcategory: "E-Sign", }, { id: "constraint-rule", name: "Constraint Rule", description: "Business constraint rules and validations", category: "data", subcategory: "CPQ", }, { id: "constraint-rule-action", name: "Constraint Rule Action", description: "Actions triggered by constraint rules", category: "data", subcategory: "CPQ", }, { id: "constraint-rule-action-expression", name: "Constraint Rule Action Expression", description: "Expressions used in constraint rule actions", category: "data", subcategory: "CPQ", }, { id: "constraint-rule-condition", name: "Constraint Rule Condition", description: "Conditions that trigger constraint rules", category: "data", subcategory: "CPQ", }, // Configuration { id: "integration-settings", name: "Integration Settings", description: "External system integration configurations and API settings", category: "configuration", }, { id: "data-sync-settings", name: "Data Sync Settings", description: "Data synchronization configuration and mapping rules", category: "configuration", }, { id: "data-sync-schedules", name: "Data Sync Schedules", description: "Scheduled data synchronization jobs and timing configurations", category: "configuration", }, { id: "data-sync-transformations", name: "Data Sync Value Transformations", description: "Value transformation rules for data synchronization processes", category: "configuration", }, { id: "global-settings", name: "Global Settings", description: "Application-wide configuration settings and preferences", category: "configuration", }, { id: "flow-settings", name: "Flow Settings", description: "Process flow configuration settings and parameters", category: "configuration", }, { id: "approval-workflows", name: "Approval Workflows", description: "Approval process workflows, chains, and routing logic", category: "configuration", }, { id: "field-expressions", name: "Field Expressions", description: "Dynamic field calculation expressions and formulas", category: "configuration", }, // Custom Code { id: "custom-code", name: "Custom Code", description: "Apex classes, triggers, custom logic, and code implementations", category: "custom-code", }, { id: "workflows", name: "Workflows", description: "Automated business process workflows and custom automations", category: "custom-code", }, ] export const migrationCategories: MigrationCategory[] = [ { id: "schema", name: "Schema", icon: "Database" }, { id: "data", name: "Data", icon: "Users" }, { id: "configuration", name: "Configuration", icon: "Settings" }, { id: "custom-code", name: "Custom Code", icon: "FileText" }, ] // Subcategory definitions for Data components export const dataSubcategories = [ { id: "crm", name: "CRM", color: "bg-neutral-100 text-neutral-800" }, { id: "common", name: "Common", color: "bg-neutral-100 text-neutral-800" }, { id: "core-apps", name: "Core Apps", color: "bg-neutral-100 text-neutral-800" }, { id: "platform", name: "Platform", color: "bg-neutral-100 text-neutral-800" }, { id: "clm", name: "CLM", color: "bg-neutral-100 text-neutral-800" }, { id: "approvals", name: "Approvals", color: "bg-neutral-100 text-neutral-800" }, { id: "cpq", name: "CPQ", color: "bg-neutral-100 text-neutral-800" }, { id: "ai-platform", name: "AI Platform", color: "bg-neutral-100 text-neutral-800" }, { id: "document-automation", name: "Document Automation", color: "bg-neutral-100 text-neutral-800" }, { id: "idd", name: "IDD", color: "bg-neutral-100 text-neutral-800" }, { id: "test-author", name: "Test Author", color: "bg-neutral-100 text-neutral-800" }, { id: "audit", name: "Audit", color: "bg-neutral-100 text-neutral-800" }, { id: "billing", name: "Billing", color: "bg-neutral-100 text-neutral-800" }, { id: "srm", name: "SRM", color: "bg-neutral-100 text-neutral-800" }, { id: "internal", name: "Internal", color: "bg-neutral-100 text-neutral-800" }, { id: "data-sync", name: "Data Sync", color: "bg-neutral-100 text-neutral-800" }, { id: "e-sign", name: "E-Sign", color: "bg-neutral-100 text-neutral-800" }, { id: "migration-manager", name: "Migration Manager", color: "bg-neutral-100 text-neutral-800" }, { id: "order-management", name: "Order Management", color: "bg-neutral-100 text-neutral-800" }, { id: "review", name: "Review", color: "bg-neutral-100 text-neutral-800" }, { id: "xae", name: "XAE", color: "bg-neutral-100 text-neutral-800" }, ] export const mockOrganizations = { source: { id: "acme-preview", name: "Acme Corp - Preview", type: "preview", status: "active", }, target: { id: "acme-staging", name: "Acme Corp - Staging", type: "staging", status: "active", }, } export const defaultSelectedComponents = ["schema", "objects", "fields", "picklists"] export const preflightChecklist = [ { id: "source-connection", label: "Source environment connection verified", completed: true, }, { id: "target-capacity", label: "Target environment capacity confirmed", completed: true, }, { id: "dependencies", label: "Component dependencies analyzed", completed: true, }, { id: "migration-path", label: "Migration path validated", completed: true, }, { id: "backup-snapshot", label: "Backup snapshot created", completed: true, }, ] [V0_FILE]typescriptreact:file="src/components/ui/table.tsx" isQuickEdit="true" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef>( ({ className, ...props }, ref) => (

), ) Table.displayName = "Table" const TableHeader = React.forwardRef>( ({ className, ...props }, ref) => , ) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef>( ({ className, ...props }, ref) => ( tr]:last:border-b-0", className)} {...props} /> ), ) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef< HTMLTableRowElement, React.HTMLAttributes & { interactive?: boolean } >(({ className, interactive = false, tabIndex, ...props }, ref) => ( )) TableRow.displayName = "TableRow" const TableHead = React.forwardRef< HTMLTableCellElement, React.ThHTMLAttributes & { scope?: string } >(({ className, scope = "col", ...props }, ref) => (

)) TableHead.displayName = "TableHead" const TableCell = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCaption.displayName = "TableCaption" export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } [V0_FILE]typescriptreact:file="src/components/ui/progress.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { "aria-label"?: string "aria-describedby"?: string } >(({ className, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="src/components/ui/select.tsx" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { error?: string } >(({ className, children, error, ...props }, ref) => ( span]:line-clamp-1", error && "border-destructive focus:ring-destructive", className, )} aria-invalid={error ? "true" : undefined} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="src/components/ui/alert.tsx" "use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", warning: "border-yellow-500/50 bg-yellow-50 text-yellow-800 [&>svg]:text-yellow-600", success: "border-green-500/50 bg-green-50 text-green-800 [&>svg]:text-green-600", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps & { dismissible?: boolean onDismiss?: () => void } >(({ className, variant, dismissible, onDismiss, children, ...props }, ref) => (

{children} {dismissible && onDismiss && ( )}

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="src/components/ui/pagination.tsx" import * as React from "react" import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" import { type ButtonProps, buttonVariants } from "@/components/ui/button" const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
) Pagination.displayName = "Pagination" const PaginationContent = React.forwardRef>( ({ className, ...props }, ref) => (
), ) PaginationContent.displayName = "PaginationContent" const PaginationItem = React.forwardRef>(({ className, ...props }, ref) => (
)) PaginationItem.displayName = "PaginationItem" type PaginationLinkProps = { isActive?: boolean } & Pick & React.ComponentProps<"a"> const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => ( ) PaginationLink.displayName = "PaginationLink" const PaginationPrevious = ({ className, ...props }: React.ComponentProps) => ( Previous ) PaginationPrevious.displayName = "PaginationPrevious" const PaginationNext = ({ className, ...props }: React.ComponentProps) => ( Next ) PaginationNext.displayName = "PaginationNext" const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( More pages ) PaginationEllipsis.displayName = "PaginationEllipsis" export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } [V0_FILE]typescriptreact:file="src/components/ui/dialog.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { showCloseButton?: boolean } >(({ className, children, showCloseButton = true, ...props }, ref) => ( { // Allow natural focus behavior const focusableElement = e.currentTarget.querySelector( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', ) as HTMLElement if (focusableElement) { e.preventDefault() focusableElement.focus() } }} {...props} > {children} {showCloseButton && ( Close dialog )} )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="src/app/globals.css" @import "tailwindcss"; @custom-variant dark (&:is(.dark )); @theme { / Color palette tokens / --color-brand-100: #e1efff; --color-brand-200: #c9e2ff; --color-brand-300: #b0d5ff; --color-brand-400: #98c8ff; --color-brand-500: #5ea9fe; --color-brand-600: #0170ef; --color-brand-700: #015abf; --color-brand-800: #01458f; --color-brand-900: #01305f; --color-green-100: #e3fcf3; --color-green-600: #15ad7a; --color-yellow-100: #fef8ea; --color-yellow-600: #f2bb30; --color-red-100: #fee2e2; --color-red-600: #dc2626; --color-red-700: #b91c1c; --color-purple-500: #8b5cf6; --color-purple-600: #7c3aed; --color-neutral-0: #ffffff; --color-neutral-100: #f8f8f8; --color-neutral-200: #f4f4f4; --color-neutral-300: #dcdfe4; --color-neutral-700: #626f86; --color-neutral-800: #44546f; --color-neutral-900: #2c3e5d; --color-neutral-1000: #172b4d; / Light theme colors / --color-background: #ffffff; --color-foreground: #172b4d; --color-card: #ffffff; --color-card-foreground: #172b4d; --color-popover: #ffffff; --color-popover-foreground: #172b4d; --color-primary: #0170ef; --color-primary-foreground: #ffffff; --color-secondary: #f8f8f8; --color-secondary-foreground: #172b4d; --color-muted: #f4f4f4; --color-muted-foreground: #44546f; --color-accent: #f8f8f8; --color-accent-foreground: #172b4d; --color-destructive: #e53535; --color-destructive-foreground: #ffffff; --color-border: #dcdfe4; --color-input: #ffffff; --color-ring: #0170ef; / Custom design system colors / --color-text: #172b4d; --color-text-soft: #44546f; --color-text-softer: #626f86; --color-bg-neutral-soft: #f8f8f8; --color-bg-neutral-softer: #f4f4f4; --color-bg-neutral-softest: #ffffff; --color-bg-primary: #0170ef; --color-bg-primary-bold: #015abf; --color-bg-primary-softest: #e1efff; --color-bg-primary-softer: #c9e2ff; --color-bg-success: #15ad7a; --color-bg-success-softest: #e3fcf3; --color-bg-warning: #f2bb30; --color-bg-warning-softest: #fef8ea; --color-bg-danger: #e53535; --color-bg-danger-softest: #fcebeb; --color-border-input: #dcdfe4; --color-border-primary: #0170ef; --color-border-success: #15ad7a; --color-border-warning: #f2bb30; --color-border-danger: #e53535; } @tailwind base; @tailwind components; @tailwind utilities; / Light theme (default) / :root { / shadcn variables / --background: var(--color-background); --foreground: var(--color-foreground); --card: var(--color-card); --card-foreground: var(--color-card-foreground); --popover: var(--color-popover); --popover-foreground: var(--color-popover-foreground); --primary: var(--color-primary); --primary-foreground: var(--color-primary-foreground); --secondary: var(--color-secondary); --secondary-foreground: var(--color-secondary-foreground); --muted: var(--color-muted); --muted-foreground: var(--color-muted-foreground); --accent: var(--color-accent); --accent-foreground: var(--color-accent-foreground); --destructive: var(--color-destructive); --destructive-foreground: var(--color-destructive-foreground); --border: var(--color-border); --input: var(--color-input); --ring: var(--color-ring); / Custom design system colors / --text: var(--color-text); --text-soft: var(--color-text-soft); --text-softer: var(--color-text-softer); --bg-neutral-soft: var(--color-bg-neutral-soft); --bg-neutral-softer: var(--color-bg-neutral-softer); --bg-neutral-softest: var(--color-bg-neutral-softest); --bg-primary: var(--color-bg-primary); --bg-primary-bold: var(--color-bg-primary-bold); --bg-primary-softest: var(--color-bg-primary-softest); --bg-primary-softer: var(--color-bg-primary-softer); --bg-success: var(--color-bg-success); --bg-success-softest: var(--color-bg-success-softest); --bg-warning: var(--color-bg-warning); --bg-warning-softest: var(--color-bg-warning-softest); --bg-danger: var(--color-bg-danger); --bg-danger-softest: var(--color-bg-danger-softest); --border-input: var(--color-border-input); --border-primary: var(--color-border-primary); --border-success: var(--color-border-success); --border-warning: var(--color-border-warning); --border-danger: var(--color-border-danger); } .dark { / shadcn variables for dark mode / --background: #172b4d; --foreground: #ffffff; --card: #2c3e5d; --card-foreground: #ffffff; --popover: #2c3e5d; --popover-foreground: #ffffff; --primary: #5ea9fe; --primary-foreground: #172b4d; --secondary: #44546f; --secondary-foreground: #ffffff; --muted: #44546f; --muted-foreground: #b3b9c4; --accent: #44546f; --accent-foreground: #ffffff; --destructive: #ef8686; --destructive-foreground: #172b4d; --border: #44546f; --input: #2c3e5d; --ring: #5ea9fe; / Custom design system colors for dark mode / --text: #ffffff; --text-soft: #b3b9c4; --text-softer: #8590a2; --bg-neutral-soft: #2c3e5d; --bg-neutral-softer: #44546f; --bg-neutral-softest: #172b4d; --bg-primary: #5ea9fe; --bg-primary-bold: #93c5ff; --bg-primary-softest: #002d60; --bg-primary-softer: #015abf; --bg-success: #56eab9; --bg-success-softest: #084531; --bg-warning: #f7d683; --bg-warning-softest: #6d5007; --bg-danger: #ef8686; --bg-danger-softest: #640d0d; --border-input: #44546f; --border-primary: #5ea9fe; --border-success: #56eab9; --border-warning: #f7d683; --border-danger: #ef8686; } @layer base { { @apply border-border; } body { @apply bg-background text-foreground; font-family: "Inter", sans-serif; } /* Enhanced focus styles for better accessibility / :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Remove focus styles from non-interactive elements / div:focus, main:focus, section:focus, article:focus, aside:focus, header:focus, footer:focus, nav:focus, h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, p:focus, span:focus { outline: none; } / Ensure interactive elements have proper cursor / button, [role="button"], [tabindex="0"], a, input, select, textarea { cursor: pointer; } input, select, textarea { cursor: text; } button:disabled, [role="button"][aria-disabled="true"] { cursor: not-allowed; } } @layer utilities { / Background utilities with direct color values / .bg-bg-neutral-soft { background-color: var(--bg-neutral-soft); } .bg-bg-neutral-softer { background-color: var(--bg-neutral-softer); } .bg-bg-neutral-softest { background-color: var(--bg-neutral-softest); } .bg-bg-primary { background-color: var(--bg-primary); } .bg-bg-primary-bold { background-color: var(--bg-primary-bold); } .bg-bg-primary-softest { background-color: var(--bg-primary-softest); } .bg-bg-primary-softer { background-color: var(--bg-primary-softer); } .bg-bg-success { background-color: var(--bg-success); } .bg-bg-success-softest { background-color: var(--bg-success-softest); } .bg-bg-warning { background-color: var(--bg-warning); } .bg-bg-warning-softest { background-color: var(--bg-warning-softest); } .bg-bg-danger { background-color: var(--bg-danger); } .bg-bg-danger-softest { background-color: var(--bg-danger-softest); } / Text utilities / .text-text { color: var(--text); } .text-text-soft { color: var(--text-soft); } .text-text-softer { color: var(--text-softer); } .text-success { color: var(--bg-success); } .text-warning { color: var(--bg-warning); } .text-danger { color: var(--bg-danger); } / Border utilities / .border-border-input { border-color: var(--border-input); } .border-border-primary { border-color: var(--border-primary); } .border-border-success { border-color: var(--border-success); } .border-border-warning { border-color: var(--border-warning); } .border-border-danger { border-color: var(--border-danger); } / Placeholder text utilities / .placeholder-light { --tw-placeholder-opacity: 0.4; } / Skip link styling / .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: inherit; margin: inherit; overflow: visible; clip: auto; white-space: normal; } } [V0_FILE]typescriptreact:file="src/components/ui/input.tsx" import as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescript:file="src/interfaces/migration.ts" export interface Organization { id: string name: string organization: string } export interface MigrationComponent { id: string name: string description: string count: number category: string status?: "pending" | "in-progress" | "completed" | "failed" progress?: number } export interface Migration { id: string type: "full" | "selective" sourceOrg: Organization targetOrg: Organization startTime: Date endTime?: Date status: "pending" | "in-progress" | "completed" | "failed" | "paused" progress: number components: Array<{ name: string status: "pending" | "in-progress" | "completed" | "failed" progress: number }> selectedComponents?: MigrationComponent[] initiatedBy?: string duration?: string } export interface MigrationHistory { id: string type: "full" | "selective" sourceOrg: string targetOrg: string status: "completed" | "in-progress" | "failed" | "paused" startTime: Date endTime?: Date duration: string componentsTotal: number componentsCompleted: number componentsErrors: number initiatedBy: string } [V0_FILE]typescript:file="src/data/migration-history-data.ts" export interface MigrationHistoryItem { id: string type: "full" | "selective" sourceOrg: string targetOrg: string status: "completed" | "in-progress" | "failed" startTime: Date endTime?: Date duration: string componentsTotal: number componentsCompleted: number componentsErrors: number initiatedBy: string dataSize: string totalItems: number selectedComponents?: Array<{ name: string description: string count: number status: string progress: number category?: string }> } // In-memory store for migration history (in a real app, this would be in a database/API) const migrationHistoryStore = [ { id: "migration-1704067200000", type: "full" as const, sourceOrg: "Acme Corp - Development", targetOrg: "Acme Corp - Staging", status: "completed" as const, startTime: new Date("2024-01-15T10:00:00"), endTime: new Date("2024-01-15T12:30:00"), duration: "2h 30m", initiatedBy: "admin@acme.com", componentsTotal: 4, componentsCompleted: 4, componentsErrors: 0, dataSize: "15.2 MB", totalItems: 47405, selectedComponents: [ { name: "Schema", description: "Database schema definitions, object structures, and field configurations", count: 1, status: "completed", progress: 100, category: "schema", }, { name: "Accounts", description: "Customer and partner account records with relationships", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Account Location", description: "Geographic location data associated with accounts", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Activity History", description: "Historical activity logs and audit trails", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Agreement", description: "Contracts, legal agreements, and terms documentation", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Asset", description: "Customer assets, subscriptions, and installed products", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Integration Settings", description: "External system integration configurations and API settings", count: 1, status: "completed", progress: 100, category: "configuration", }, { name: "Data Sync Settings", description: "Data synchronization configuration and mapping rules", count: 1, status: "completed", progress: 100, category: "configuration", }, { name: "Global Settings", description: "Application-wide configuration settings and preferences", count: 1, status: "completed", progress: 100, category: "configuration", }, { name: "Approval Workflows", description: "Approval process workflows, chains, and routing logic", count: 1, status: "completed", progress: 100, category: "configuration", }, { name: "Custom Code", description: "Apex classes, triggers, custom logic, and code implementations", count: 1, status: "completed", progress: 100, category: "custom-code", }, { name: "Workflows", description: "Automated business process workflows and custom automations", count: 1, status: "completed", progress: 100, category: "custom-code", }, ], }, { id: "migration-1704326400000", type: "selective" as const, sourceOrg: "Acme Corp - Preview", targetOrg: "Acme Corp - Production", status: "completed" as const, startTime: new Date("2024-01-14T14:00:00"), endTime: new Date("2024-01-14T14:45:00"), duration: "45m", initiatedBy: "admin@acme.com", componentsTotal: 2, componentsCompleted: 2, componentsErrors: 0, dataSize: "3.1 MB", totalItems: 2103, selectedComponents: [ { name: "Schema", description: "Database schema definitions, object structures, and field configurations", count: 1, status: "completed", progress: 100, category: "schema", }, { name: "Accounts", description: "Customer and partner account records with relationships", count: 1, status: "completed", progress: 100, category: "data", }, ], }, { id: "migration-1704412800000", type: "full" as const, sourceOrg: "Acme Corp - Development", targetOrg: "Acme Corp - Staging", status: "in-progress" as const, startTime: new Date("2024-01-13T11:00:00"), endTime: undefined, duration: "2h 15m (ongoing)", initiatedBy: "developer@acme.com", componentsTotal: 4, componentsCompleted: 2, componentsErrors: 0, dataSize: "14.5 MB", totalItems: 47405, selectedComponents: [ { name: "Schema", description: "Database schema definitions, object structures, and field configurations", count: 1, status: "completed", progress: 100, category: "schema", }, { name: "Accounts", description: "Customer and partner account records with relationships", count: 1, status: "in-progress", progress: 65, category: "data", }, { name: "Asset", description: "Customer assets, subscriptions, and installed products", count: 1, status: "in-progress", progress: 65, category: "data", }, { name: "Integration Settings", description: "External system integration configurations and API settings", count: 1, status: "pending", progress: 0, category: "configuration", }, { name: "Custom Code", description: "Apex classes, triggers, custom logic, and code implementations", count: 1, status: "pending", progress: 0, category: "custom-code", }, ], }, { id: "migration-1704499200000", type: "selective", sourceOrg: "Acme Corp - Staging", targetOrg: "Acme Corp - Production", status: "completed", startTime: new Date("2024-01-12T16:00:00"), endTime: new Date("2024-01-12T16:45:00"), duration: "45m", initiatedBy: "admin@acme.com", componentsTotal: 3, componentsCompleted: 3, componentsErrors: 0, dataSize: "8.7 MB", totalItems: 4295, selectedComponents: [ { name: "Schema", description: "Database schema definitions, object structures, and field configurations", count: 1, status: "completed", progress: 100, category: "schema", }, { name: "Accounts", description: "Customer and partner account records with relationships", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Integration Settings", description: "External system integration configurations and API settings", count: 1, status: "completed", progress: 100, category: "configuration", }, ], }, { id: "migration-1704240000000", type: "full", sourceOrg: "Acme Corp - Development", targetOrg: "Acme Corp - Production", status: "failed", startTime: new Date("2024-01-11T09:00:00"), endTime: new Date("2024-01-11T10:15:00"), duration: "1h 15m", initiatedBy: "admin@acme.com", componentsTotal: 6, componentsCompleted: 4, componentsErrors: 2, dataSize: "12.8 MB", totalItems: 8142, selectedComponents: [ { name: "Schema", description: "Database schema definitions, object structures, and field configurations", count: 1, status: "completed", progress: 100, category: "schema", }, { name: "Accounts", description: "Customer and partner account records with relationships", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Asset", description: "Customer assets, subscriptions, and installed products", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Agreement", description: "Contracts, legal agreements, and terms documentation", count: 1, status: "completed", progress: 100, category: "data", }, { name: "Integration Settings", description: "External system integration configurations and API settings", count: 1, status: "failed", progress: 0, category: "configuration", }, { name: "Custom Code", description: "Apex classes, triggers, custom logic, and code implementations", count: 1, status: "failed", progress: 0, category: "custom-code", }, ], }, // Generate additional mock data for pagination ...Array.from({ length: 45 }, (_, index) => { const id = `migration-${1704000000000 - (index + 6) * 86400000}` const types: ("full" | "selective")[] = ["full", "selective"] const statuses: ("completed" | "in-progress" | "failed")[] = ["completed", "in-progress", "failed"] const environments = [ "Acme Corp - Development", "Acme Corp - Staging", "Acme Corp - Preview", "Acme Corp - Production", "Beta Corp - Development", "Beta Corp - Staging", "Gamma Inc - Development", "Gamma Inc - Production", ] const users = ["admin@acme.com", "developer@acme.com", "deployer@acme.com", "admin@beta.com", "admin@gamma.com"] const type = types[Math.floor(Math.random() * types.length)] as "full" | "selective" const status = statuses[Math.floor(Math.random() * statuses.length)] as "completed" | "in-progress" | "failed" const sourceOrg = environments[Math.floor(Math.random() * environments.length)] let targetOrg = environments[Math.floor(Math.random() * environments.length)] while (targetOrg === sourceOrg) { targetOrg = environments[Math.floor(Math.random() * environments.length)] } const startTime = new Date(1704000000000 - (index + 6) * 86400000) const durationMinutes = Math.floor(Math.random() * 180) + 15 // 15-195 minutes const endTime = status === "in-progress" ? undefined : new Date(startTime.getTime() + durationMinutes * 60000) const componentsTotal = type === "full" ? 4 : Math.floor(Math.random() * 3) + 1 const componentsErrors = status === "failed" ? Math.floor(Math.random() * 2) + 1 : 0 const componentsCompleted = status === "completed" ? componentsTotal : status === "failed" ? componentsTotal - componentsErrors : Math.floor(Math.random() * componentsTotal) const baseItemsPerComponent = type === "full" ? 12000 : Math.floor(Math.random() * 8000) + 2000 const totalItems = Math.floor(baseItemsPerComponent * (componentsTotal / 4)) return { id, type, sourceOrg, targetOrg, status, startTime, endTime, duration: status === "in-progress" ? `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m (ongoing)` : `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m`, initiatedBy: users[Math.floor(Math.random() * users.length)], componentsTotal, componentsCompleted, componentsErrors, dataSize: `${(Math.random() * 15 + 2).toFixed(1)} MB`, totalItems, } }), ] // Function to add a new migration to history export function addMigrationToHistory(migration: MigrationHistoryItem) { migrationHistoryStore.unshift(migration) // Add to beginning of array } // Function to update an existing migration in history export function updateMigrationInHistory(migrationId: string, updates: Partial) { const index = migrationHistoryStore.findIndex((m) => m.id === migrationId) if (index !== -1) { migrationHistoryStore[index] = { ...migrationHistoryStore[index], ...updates } } } // Function to get migration by ID export function getMigrationById(migrationId: string): MigrationHistoryItem | undefined { return migrationHistoryStore.find((m) => m.id === migrationId) } // Export the current history (this replaces the previous allMigrationHistory export) export const allMigrationHistory: MigrationHistoryItem[] = migrationHistoryStore // Generate additional mock data for pagination (keeping the existing logic) const additionalMockData = Array.from({ length: 45 }, (_, index) => { const id = `migration-${1704000000000 - (index + 6) * 86400000}` const types: ("full" | "selective")[] = ["full", "selective"] const statuses: ("completed" | "in-progress" | "failed")[] = ["completed", "in-progress", "failed"] const environments = [ "Acme Corp - Development", "Acme Corp - Staging", "Acme Corp - Preview", "Acme Corp - Production", "Beta Corp - Development", "Beta Corp - Staging", "Gamma Inc - Development", "Gamma Inc - Production", ] const users = ["admin@acme.com", "developer@acme.com", "deployer@acme.com", "admin@beta.com", "admin@gamma.com"] const type = types[Math.floor(Math.random() * types.length)] as "full" | "selective" const status = statuses[Math.floor(Math.random() * statuses.length)] as "completed" | "in-progress" | "failed" const sourceOrg = environments[Math.floor(Math.random() * environments.length)] let targetOrg = environments[Math.floor(Math.random() * environments.length)] while (targetOrg === sourceOrg) { targetOrg = environments[Math.floor(Math.random() * environments.length)] } const startTime = new Date(1704000000000 - (index + 6) * 86400000) const durationMinutes = Math.floor(Math.random() * 180) + 15 // 15-195 minutes const endTime = status === "in-progress" ? undefined : new Date(startTime.getTime() + durationMinutes * 60000) const componentsTotal = type === "full" ? 4 : Math.floor(Math.random() * 3) + 1 const componentsErrors = status === "failed" ? Math.floor(Math.random() * 2) + 1 : 0 const componentsCompleted = status === "completed" ? componentsTotal : status === "failed" ? componentsTotal - componentsErrors : Math.floor(Math.random() * componentsTotal) const baseItemsPerComponent = type === "full" ? 12000 : Math.floor(Math.random() * 8000) + 2000 const totalItems = Math.floor(baseItemsPerComponent * (componentsTotal / 4)) return { id, type, sourceOrg, targetOrg, status, startTime, endTime, duration: status === "in-progress" ? `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m (ongoing)` : `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m`, initiatedBy: users[Math.floor(Math.random() * users.length)], componentsTotal, componentsCompleted, componentsErrors, dataSize: `${(Math.random() * 15 + 2).toFixed(1)} MB`, totalItems, } }) // Add the mock data to the store migrationHistoryStore.push(...additionalMockData) [V0_FILE]typescriptreact:file="src/components/migration/selective-migration-dialog.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { Checkbox } from "@/components/ui/checkbox" import { Progress } from "@/components/ui/progress" import { Separator } from "@/components/ui/separator" import { Database, Settings, Code, FileText, AlertCircle } from "lucide-react" interface SelectiveMigrationDialogProps { open: boolean onOpenChange: (open: boolean) => void sourceOrg: any targetOrg: any onStartMigration: (migration: any) => void } interface Component { id: string name: string description: string category: string count: number selected: boolean dependencies?: string[] } const availableComponents: Component[] = [ // Schema Components { id: "custom-objects", name: "Custom Objects", description: "Custom database objects and field definitions", category: "schema", count: 67, selected: false, }, { id: "custom-fields", name: "Custom Fields", description: "Custom field definitions and metadata", category: "schema", count: 234, selected: false, }, { id: "relationships", name: "Relationships", description: "Object relationships and lookup fields", category: "schema", count: 89, selected: false, }, // Data Components { id: "account", name: "Account", description: "Account records, customer information, and account hierarchies", category: "data", count: 1250, selected: false, }, { id: "account-contact-relation", name: "AccountContactRelation", description: "Relationships between accounts and contacts", category: "data", count: 890, selected: false, dependencies: ["account", "contact"], }, { id: "account-history", name: "AccountHistory", description: "Historical changes and audit trail for accounts", category: "data", count: 3420, selected: false, dependencies: ["account"], }, { id: "contact", name: "Contact", description: "Contact records and personal information", category: "data", count: 2340, selected: false, }, { id: "contract", name: "Contract", description: "Contract records and legal agreements", category: "data", count: 567, selected: false, dependencies: ["account"], }, { id: "currency", name: "Currency", description: "Currency definitions and exchange rates", category: "data", count: 45, selected: false, }, { id: "user", name: "User", description: "User accounts and profile information", category: "data", count: 234, selected: false, }, { id: "product", name: "Product", description: "Product catalog and pricing information", category: "data", count: 1890, selected: false, }, { id: "quote", name: "Quote", description: "Sales quotes and proposals", category: "data", count: 2340, selected: false, dependencies: ["account", "product"], }, { id: "order", name: "Order", description: "Sales orders and fulfillment data", category: "data", count: 1567, selected: false, dependencies: ["account", "product"], }, // Configuration Components { id: "workflow-rules", name: "Workflow Rules", description: "Automated workflow rules and processes", category: "configuration", count: 78, selected: false, }, { id: "approval-processes", name: "Approval Processes", description: "Multi-step approval workflows", category: "configuration", count: 23, selected: false, }, { id: "integration-settings", name: "Integration Settings", description: "Third-party integration configurations", category: "configuration", count: 12, selected: false, }, { id: "email-templates", name: "Email Templates", description: "Email templates and communication settings", category: "configuration", count: 45, selected: false, }, // Extensibility Components { id: "apex-classes", name: "Apex Classes", description: "Custom Apex code and business logic", category: "extensibility", count: 156, selected: false, }, { id: "triggers", name: "Triggers", description: "Database triggers and automation", category: "extensibility", count: 89, selected: false, }, { id: "visualforce-pages", name: "Visualforce Pages", description: "Custom user interface pages", category: "extensibility", count: 34, selected: false, }, ] const categoryIcons = { schema: Database, data: FileText, configuration: Settings, extensibility: Code, } const categoryColors = { schema: "bg-blue-100 text-blue-800 border-blue-200", data: "bg-green-100 text-green-800 border-green-200", configuration: "bg-yellow-100 text-yellow-800 border-yellow-200", extensibility: "bg-purple-100 text-purple-800 border-purple-200", } export function SelectiveMigrationDialog({ open, onOpenChange, sourceOrg, targetOrg, onStartMigration, }: SelectiveMigrationDialogProps) { const [components, setComponents] = useState(availableComponents) const [isAnalyzing, setIsAnalyzing] = useState(false) const [analysisProgress, setAnalysisProgress] = useState(0) useEffect(() => { if (open) { setComponents(availableComponents.map((comp) => ({ ...comp, selected: false }))) setIsAnalyzing(false) setAnalysisProgress(0) } }, [open]) const handleComponentToggle = (componentId: string, checked: boolean) => { setComponents((prev) => prev.map((comp) => { if (comp.id === componentId) { return { ...comp, selected: checked } } // Handle dependencies if (checked && comp.dependencies?.includes(componentId)) { return { ...comp, selected: true } } return comp }), ) } const handleCategoryToggle = (category: string, checked: boolean) => { setComponents((prev) => prev.map((comp) => (comp.category === category ? { ...comp, selected: checked } : comp))) } const selectedComponents = components.filter((comp) => comp.selected) const totalSelectedCount = selectedComponents.reduce((sum, comp) => sum + comp.count, 0) const groupedComponents = components.reduce( (acc, comp) => { if (!acc[comp.category]) { acc[comp.category] = [] } acc[comp.category].push(comp) return acc }, {} as Record, ) const handleStartMigration = () => { if (selectedComponents.length === 0) return setIsAnalyzing(true) setAnalysisProgress(0) // Simulate analysis progress const interval = setInterval(() => { setAnalysisProgress((prev) => { if (prev >= 100) { clearInterval(interval) // Create migration object with proper structure const migration = { id: `migration-${Date.now()}`, type: "selective", sourceOrg: sourceOrg?.name || "", targetOrg: targetOrg?.name || "", startTime: new Date(), status: "running", progress: 0, selectedComponents: selectedComponents.map((comp) => ({ id: comp.id, name: comp.name, description: comp.description, category: comp.category, count: comp.count, status: "pending", progress: 0, })), components: selectedComponents.map((comp) => ({ name: comp.name, status: "pending", progress: 0, })), } onStartMigration(migration) onOpenChange(false) return 100 } return prev + 10 }) }, 200) } if (isAnalyzing) { return ( Analyzing Components Analyzing selected components and preparing migration...

{analysisProgress}% complete

) } return ( Configure Selective Migration Choose specific components to migrate from {sourceOrg?.name} to {targetOrg?.name}
{Object.entries(groupedComponents).map(([category, categoryComponents]) => { const Icon = categoryIcons[category as keyof typeof categoryIcons] const selectedInCategory = categoryComponents.filter((comp) => comp.selected).length const totalInCategory = categoryComponents.length const allSelected = selectedInCategory === totalInCategory const someSelected = selectedInCategory > 0 && selectedInCategory < totalInCategory return (

{category} Components {selectedInCategory} of {totalInCategory} selected

{category} { if (el) el.indeterminate = someSelected }} onCheckedChange={(checked) => handleCategoryToggle(category, checked as boolean)} />

{categoryComponents.map((component) => (
handleComponentToggle(component.id, checked as boolean)} className="mt-1" />

{component.name}
{component.count.toLocaleString()} records

{component.description}
{component.dependencies && (
Depends on: {component.dependencies.join(", ")}
)}

))}
) })}

{selectedComponents.length} components selected {totalSelectedCount > 0 && ( {" "} • {totalSelectedCount.toLocaleString()} total records )}

) } [V0_FILE]typescriptreact:file="src/components/migration/migration-progress.tsx" isQuickEdit="true" "use client" import React, { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { useToast } from "@/hooks/use-toast" import { CheckCircle2, Clock, ArrowLeft, Database, Settings, FileText, Users, Download, XCircle } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" interface MigrationProgressProps { migration: any onComplete: (migrationData: any) => void onBack: () => void } export function MigrationProgress({ migration, onComplete, onBack }: MigrationProgressProps) { const [startTime] = useState(migration?.startTime || new Date()) const [elapsedTime, setElapsedTime] = useState(0) const [isCompleted, setIsCompleted] = useState(false) const [completedMigration, setCompletedMigration] = useState(null) const { toast } = useToast() const [selectedCategoryModal, setSelectedCategoryModal] = useState(null) // Generate stable migration ID const migrationId = migration?.id || `migration-${startTime.getTime().toString().slice(-10)}` // Define stages for different component types const getComponentStages = (category: string) => { switch (category) { case "schema": return ["Schema Extraction", "Schema Comparison", "Schema Ingestion"] case "data": return ["Data Extraction", "Data Transformation", "Data Ingestion"] default: return ["Processing"] // For configuration and custom-code } } // Get current stage based on progress const getCurrentStage = (progress: number, category: string) => { const stages = getComponentStages(category) if (category === "schema" || category === "data") { if (progress < 33) return stages[0] if (progress < 66) return stages[1] if (progress < 100) return stages[2] return "Completed" } return progress < 100 ? stages[0] : "Completed" } // Initialize individual component progress - track each selected component individually const [individualComponentProgress, setIndividualComponentProgress] = useState(() => { // For selective migrations, use the actual selected components if (migration?.selectedComponents && migration.selectedComponents.length > 0) { return migration.selectedComponents.map((component: any) => ({ id: component.id || component.name.toLowerCase().replace(/\s+/g, "-"), name: component.name, status: "in-progress" as const, progress: 0, description: component.description, category: component.category || "data", currentStage: getCurrentStage(0, component.category || "data"), })) } // Default components for demo/full migration - all start as in-progress return [ { id: "schema", name: "Schema", status: "in-progress" as const, progress: 0, description: "Database schema definitions, object structures, and field configurations", category: "schema", currentStage: "Schema Extraction", }, { id: "account", name: "Account", status: "in-progress" as const, progress: 0, description: "Customer and partner account records with relationships", category: "data", currentStage: "Data Extraction", }, { id: "account-contact-relation", name: "AccountContactRelation", status: "in-progress" as const, progress: 0, description: "Relationships between accounts and contacts", category: "data", currentStage: "Data Extraction", }, { id: "account-history", name: "AccountHistory", status: "in-progress" as const, progress: 0, description: "Historical changes and audit trail for accounts", category: "data", currentStage: "Data Extraction", }, { id: "contract", name: "Contract", status: "in-progress" as const, progress: 0, description: "Contract records and legal agreements", category: "data", currentStage: "Data Extraction", }, { id: "currency", name: "Currency", status: "in-progress" as const, progress: 0, description: "Currency definitions and exchange rates", category: "data", currentStage: "Data Extraction", }, { id: "integration-settings", name: "Integration Settings", status: "in-progress" as const, progress: 0, description: "External system integration configurations and API settings", category: "configuration", currentStage: "Processing", }, { id: "custom-code", name: "Custom Code", status: "in-progress" as const, progress: 0, description: "Apex classes, triggers, custom logic, and automated business processes", category: "extensibility", currentStage: "Processing", }, ] }) // Group individual components by category for display const componentProgress = React.useMemo(() => { const categoryGroups = individualComponentProgress.reduce((acc: any, component) => { const category = component.category if (!acc[category]) { acc[category] = [] } acc[category].push(component) return acc }, {}) return Object.keys(categoryGroups).map((categoryId) => { const categoryComponents = categoryGroups[categoryId] const categoryProgress = Math.round( categoryComponents.reduce((sum: number, comp: any) => sum + comp.progress, 0) / categoryComponents.length, ) const allCompleted = categoryComponents.every((comp: any) => comp.status === "completed") const hasFailed = categoryComponents.some((comp: any) => comp.status === "failed") const hasInProgress = categoryComponents.some((comp: any) => comp.status === "in-progress") // Only use three statuses: failed > completed > in-progress const categoryStatus = hasFailed ? "failed" : allCompleted ? "completed" : "in-progress" const categoryName = categoryId === "schema" ? "Schema" : categoryId === "data" ? "Data" : categoryId === "configuration" ? "Configuration" : categoryId === "extensibility" ? "Extensibility" : "Components" return { name: categoryName, category: categoryId, count: categoryComponents.length, status: categoryStatus, progress: categoryProgress, components: categoryComponents, currentStage: getCurrentStage(categoryProgress, categoryId), detailedComponents: categoryComponents, // Add this for modal display } }) }, [individualComponentProgress]) // Categories definition const categories = [ { id: "schema", name: "Schema", icon: Database }, { id: "data", name: "Data", icon: Users }, { id: "configuration", name: "Configuration", icon: Settings }, { id: "extensibility", name: "Extensibility", icon: FileText }, ] // Calculate overall progress as average of all individual component progress const overallProgress = Math.round( individualComponentProgress.reduce((sum, component) => sum + component.progress, 0) / individualComponentProgress.length, ) // Get terminology based on categories const getCategoryObjectTerminology = (categoryId: string) => { switch (categoryId) { case "schema": return { singular: "object", plural: "objects" } case "data": return { singular: "object", plural: "objects" } case "configuration": return { singular: "configuration", plural: "configurations" } case "extensibility": return { singular: "project", plural: "projects" } default: return { singular: "object", plural: "objects" } } } // Get status icon for tiles const getStatusIcon = (isInProgress: boolean, isFailed: boolean, isCompletedCategory: boolean) => { if (isCompletedCategory) { return } if (isFailed) { return } if (isInProgress) { return } return } // Simulate progress updates with asynchronous processing for individual components useEffect(() => { if (isCompleted) return const interval = setInterval(() => { setElapsedTime((prev) => prev + 1) setIndividualComponentProgress((prevComponents) => { return prevComponents.map((component) => { if (component.status === "in-progress" && component.progress < 100) { // More aggressive progress rate - 3-7% per update const progressRate = Math.random() * 4 + 3 const newProgress = Math.min(component.progress + progressRate, 100) const newStage = getCurrentStage(newProgress, component.category) if (newProgress >= 100) { return { ...component, progress: 100, status: "completed" as const, currentStage: "Completed", } } return { ...component, progress: Math.round(newProgress), currentStage: newStage, } } if (component.progress >= 100 && component.status !== "completed") { return { ...component, progress: 100, status: "completed" as const, currentStage: "Completed", } } return component }) }) }, 500) // Update every 500ms return () => clearInterval(interval) }, [isCompleted]) // Handle migration completion const handleMigrationComplete = () => { const endTime = new Date() const duration = Math.floor((endTime.getTime() - startTime.getTime()) / 1000) const completedMigrationData = { id: migrationId, type: migration?.type || "selective", sourceOrg: migration?.sourceOrg?.name || "Acme Corp - Staging", targetOrg: migration?.targetOrg?.name || "Acme Corp - Preview", status: "completed", startTime: startTime, endTime: endTime, duration: formatTime(duration), componentsTotal: individualComponentProgress.length, componentsCompleted: individualComponentProgress.length, componentsErrors: 0, initiatedBy: "admin@acme.com", dataSize: `${(individualComponentProgress.length * 0.5).toFixed(1)} MB`, totalItems: individualComponentProgress.length * 100, selectedComponents: individualComponentProgress.map((comp) => ({ name: comp.name, description: comp.description, category: comp.category, status: "completed", progress: 100, })), } setCompletedMigration(completedMigrationData) setIsCompleted(true) toast({ title: "Migration Completed Successfully!", description: "All components have been migrated successfully. You can now download the detailed report.", duration: 5000, }) // Call the onComplete callback with the completed migration data onComplete(completedMigrationData) } // Check if migration is complete useEffect(() => { if (isCompleted) return const allCompleted = individualComponentProgress.every((component) => component.status === "completed") if (allCompleted && overallProgress === 100) { setTimeout(() => { handleMigrationComplete() }, 2000) } }, [individualComponentProgress, overallProgress, isCompleted]) const formatTime = (seconds: number) => { const hours = Math.floor(seconds / 3600) const minutes = Math.floor((seconds % 3600) / 60) if (hours > 0) { return `${hours}h ${minutes}m` } return `${minutes}m` } const formatDuration = () => { if (isCompleted && completedMigration?.endTime) { const duration = Math.floor((completedMigration.endTime.getTime() - startTime.getTime()) / 1000) return formatTime(duration) } return `${formatTime(elapsedTime)} (ongoing)` } return (

{/* Header /}

{isCompleted ? "Migration Completed" : "Migration Progress"}

{migration?.type === "selective" ? "Selective" : "Full"} Migration - {migrationId}

{/ Migration Status /}

{isCompleted ? ( ) : ( )} Migration Status
{isCompleted ? "Completed" : "In Progress"}

{migration?.sourceOrg?.name || "Acme Corp - Staging"} →{" "} {migration?.targetOrg?.name || "Acme Corp - Preview"}
{/ Overall Progress - ALWAYS SHOW /}

Overall Progress {overallProgress}%

{/ Category Tiles /}
{isCompleted ? "Migration Summary" : "Migration Progress"}
{categories.map((category) => { const categoryData = componentProgress.find((comp) => comp.category === category.id) if (!categoryData) return null const Icon = category.icon const isCompletedCategory = categoryData.status === "completed" const isFailed = categoryData.status === "failed" const isInProgress = categoryData.status === "in-progress" const categoryProgressValue = categoryData.progress return (
setSelectedCategoryModal(category.id)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() setSelectedCategoryModal(category.id) } }} aria-label={`View details for ${category.name} components`} >
{category.name} {isCompletedCategory && } {isFailed && } {isInProgress && }

{categoryData.count} {getCategoryObjectTerminology(category.id).plural}

{isCompletedCategory ? "(completed)" : isFailed ? "(failed)" : "(in progress)"}

{/ Progress Bar - Show for all categories /}

Progress {categoryProgressValue}%

) })}

{/ Migration Details /}

Migration Information
Technical details and timing information

{isCompleted && ( )}

Migration ID

{migrationId}

Migration Type

{migration?.type === "selective" ? "Selective Migration" : "Full Migration"}

Source Organization

{migration?.sourceOrg?.name || "Acme Corp - Staging"}

Target Organization

{migration?.targetOrg?.name || "Acme Corp - Preview"}

Started

{startTime.toLocaleDateString()}, {startTime.toLocaleTimeString()}

Completed

{isCompleted && completedMigration?.endTime ? `${completedMigration.endTime.toLocaleDateString()}, ${completedMigration.endTime.toLocaleTimeString()}` : "In Progress"}

Duration

{formatDuration()}

Initiated By

admin@acme.com

{/ Component Details Modal /} setSelectedCategoryModal(null)}> {selectedCategoryModal && ( <> {categories.find((cat) => cat.id === selectedCategoryModal)?.icon && React.createElement(categories.find((cat) => cat.id === selectedCategoryModal)!.icon, { className: "h-5 w-5 text-neutral-700", })} {categories.find((cat) => cat.id === selectedCategoryModal)?.name} )} {selectedCategoryModal && (

Selected {getCategoryObjectTerminology(selectedCategoryModal).plural} for migration from the{" "} {categories.find((cat) => cat.id === selectedCategoryModal)?.name.toLowerCase()}:

{individualComponentProgress .filter((comp) => comp.category === selectedCategoryModal) .map((component, index) => (

{component.name}
{component.status !== "completed" && (
{component.description}
)}

{component.status === "completed" && ( Completed )} {component.status === "in-progress" && ( In Progress )} {component.status === "failed" && ( Failed )}

{/ Progress bar for in-progress components /} {component.status === "in-progress" && (

{component.category === "schema" || component.category === "data" ? component.currentStage === "Completed" ? "Progress" : `${component.currentStage} is in progress` : "Migration is in progress"} {component.progress}%

)}
))}
{/ Summary /}

Summary:{" "} {individualComponentProgress.filter((comp) => comp.category === selectedCategoryModal).length}{" "} {getCategoryObjectTerminology(selectedCategoryModal).plural} selected for migration

)}

) } [V0_FILE]typescriptreact:file="src/components/ui/badge.tsx" import type as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-none cursor-default", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground", secondary: "border-transparent bg-secondary text-secondary-foreground", destructive: "border-transparent bg-destructive text-destructive-foreground", outline: "text-foreground border-input bg-background", success: "border-transparent bg-green-600 text-white", warning: "border-transparent bg-yellow-600 text-white", info: "border-transparent bg-blue-600 text-white", }, interactive: { true: "cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", false: "cursor-default", }, }, defaultVariants: { variant: "default", interactive: false, }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps { interactive?: boolean icon?: React.ReactNode "aria-label"?: string } function Badge({ className, variant, interactive = false, tabIndex, icon, "aria-label": ariaLabel, children, ...props }: BadgeProps) { return (
{icon && ( )} {children}
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="src/components/migration/migration-history.tsx" "use client" import { useState, useMemo, useRef, useEffect } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" import { Search, CheckCircle2, AlertTriangle, Clock } from "lucide-react" import { allMigrationHistory, type MigrationHistoryItem } from "@/data/migration-history-data" import { ROUTES } from "@/constants/routes" const ITEMS_PER_PAGE = 10 type MigrationHistoryProps = {} export function MigrationHistory({}: MigrationHistoryProps) { const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [typeFilter, setTypeFilter] = useState("all") const [currentPage, setCurrentPage] = useState(1) const [announceMessage, setAnnounceMessage] = useState("") const searchInputRef = useRef(null) const router = useRouter() // Use useMemo for filtering with improved logic const filteredMigrations = useMemo(() => { let result = [...allMigrationHistory] // Create a copy to avoid mutations // Search filter - improved to handle empty/undefined values if (searchTerm && searchTerm.trim() !== "") { const searchLower = searchTerm.toLowerCase().trim() result = result.filter((migration) => { const searchableFields = [ migration.id || "", migration.sourceOrg || "", migration.targetOrg || "", migration.initiatedBy || "", ] return searchableFields.some((field) => field.toLowerCase().includes(searchLower)) }) } // Status filter - ensure exact match if (statusFilter && statusFilter !== "all") { result = result.filter((migration) => migration.status === statusFilter) } // Type filter - ensure exact match if (typeFilter && typeFilter !== "all") { result = result.filter((migration) => migration.type === typeFilter) } // Sort by date (newest first) - handle potential undefined dates result.sort((a, b) => { const dateA = a.startTime ? new Date(a.startTime).getTime() : 0 const dateB = b.startTime ? new Date(b.startTime).getTime() : 0 return dateB - dateA }) return result }, [searchTerm, statusFilter, typeFilter]) // Pagination const totalItems = filteredMigrations.length const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE) const startIndex = (currentPage - 1) * ITEMS_PER_PAGE const endIndex = startIndex + ITEMS_PER_PAGE const currentItems = filteredMigrations.slice(startIndex, endIndex) // Reset page when filters change useEffect(() => { setCurrentPage(1) }, [searchTerm, statusFilter, typeFilter]) // Focus management useEffect(() => { if (searchInputRef.current) { searchInputRef.current.focus() } }, []) const announceToScreenReader = (message: string) => { setAnnounceMessage(message) setTimeout(() => setAnnounceMessage(""), 1000) } const getStatusIcon = (status: string) => { const iconProps = { className: "h-4 w-4", "aria-hidden": true } switch (status) { case "completed": return case "in-progress": return case "failed": return default: return } } const getStatusBadge = (status: string) => { switch (status) { case "completed": return ( Completed ) case "in-progress": return ( In Progress ) case "failed": return ( Failed ) case "paused": return ( Paused ) default: return ( Pending ) } } const getTypeBadge = (type: string) => { return ( {type} ) } const handleSearchChange = (value: string) => { setSearchTerm(value) } const handleStatusFilterChange = (value: string) => { setStatusFilter(value) announceToScreenReader(`Status filter changed to ${value === "all" ? "all statuses" : value}`) } const handleTypeFilterChange = (value: string) => { setTypeFilter(value) announceToScreenReader(`Type filter changed to ${value === "all" ? "all types" : value}`) } const handleMigrationDetails = (migration: MigrationHistoryItem) => { router.push(`${ROUTES.MIGRATION_DETAIL}/${migration.id}`) announceToScreenReader(`Opening details for migration ${migration.id}`) } const handlePageChange = (page: number) => { setCurrentPage(page) announceToScreenReader(`Navigated to page ${page} of ${totalPages}`) } // Generate pagination items const generatePaginationItems = () => { const items = [] const maxVisiblePages = 5 if (totalPages <= maxVisiblePages) { // Show all pages if total is small for (let i = 1; i <= totalPages; i++) { items.push( { e.preventDefault() handlePageChange(i) }} aria-label={`Go to page ${i}`} > {i} , ) } } else { // Show first page items.push( { e.preventDefault() handlePageChange(1) }} aria-label="Go to page 1" > 1 , ) // Show ellipsis if needed if (currentPage > 3) { items.push( , ) } // Show pages around current page const start = Math.max(2, currentPage - 1) const end = Math.min(totalPages - 1, currentPage + 1) for (let i = start; i <= end; i++) { items.push( { e.preventDefault() handlePageChange(i) }} aria-label={`Go to page ${i}`} > {i} , ) } // Show ellipsis if needed if (currentPage < totalPages - 2) { items.push( , ) } // Show last page if (totalPages > 1) { items.push( { e.preventDefault() handlePageChange(totalPages) }} aria-label={`Go to page ${totalPages}`} > {totalPages} , ) } } return items } // Announce filter results useEffect(() => { if (searchTerm || statusFilter !== "all" || typeFilter !== "all") { announceToScreenReader(`${filteredMigrations.length} migrations found.`) } }, [filteredMigrations.length, searchTerm, statusFilter, typeFilter]) return (
{/* Screen reader announcements /}
{announceMessage}
{/ Migration History Card /}

handleSearchChange(e.target.value)} className="pl-10 bg-bg-input border-border-input text-text" aria-label="Search migrations by ID, source, target, or user" aria-describedby="search-help" role="searchbox" />
Search by migration ID, source organization, target organization, or user email

{/ Migrations Table /} Migrations ({totalItems}) Showing {startIndex + 1}-{Math.min(endIndex, totalItems)} of {totalItems} migrations {/ Desktop Table View /}
Migration ID Type Source → Target Status Date/Time Duration Components Initiated By {currentItems.map((migration) => ( {getTypeBadge(migration.type)}

{migration.sourceOrg}

{migration.targetOrg}

Migration from {migration.sourceOrg} to {migration.targetOrg}

{getStatusBadge(migration.status)}

{migration.startTime.toLocaleDateString()}

{migration.componentsCompleted} completed

of {migration.componentsTotal} total
{migration.componentsErrors > 0 && (
{migration.componentsErrors} errors
)}
{migration.initiatedBy} ))}
Migration history table showing {totalItems} migrations with details including ID, type, source and target organizations, status, duration, components, and initiator. Use filters above to narrow results.

{/ Mobile/Tablet Card View /}
{currentItems.map((migration) => ( handleMigrationDetails(migration)} role="button" aria-label={`View details for migration ${migration.id} from ${migration.sourceOrg} to ${migration.targetOrg}`} tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() handleMigrationDetails(migration) } }} > {/ Header with ID and Status /}

{migration.id}

{getTypeBadge(migration.type)}

{getStatusBadge(migration.status)}

{/ Organizations /}

Migration Path

{migration.sourceOrg} {migration.targetOrg}

{/ Date and Duration /}

Date

{migration.startTime.toLocaleDateString()}

Duration

{/ Components Progress /}

Components

{migration.componentsCompleted} completed of {migration.componentsTotal} total
{migration.componentsErrors > 0 && (
{migration.componentsErrors} errors
)}

{/ Initiated By /}

Initiated By

{migration.initiatedBy}

))} {/ Empty State for Mobile /} {currentItems.length === 0 && (

No migrations found

Try adjusting your search or filter criteria

)}
{/ Pagination /} {totalPages > 1 && (

Showing {startIndex + 1}-{Math.min(endIndex, totalItems)} of {totalItems} results

{ e.preventDefault() if (currentPage > 1) { handlePageChange(currentPage - 1) } }} className={currentPage === 1 ? "pointer-events-none opacity-50" : ""} aria-disabled={currentPage === 1} /> {generatePaginationItems()} { e.preventDefault() if (currentPage < totalPages) { handlePageChange(currentPage + 1) } }} className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""} aria-disabled={currentPage === totalPages} />

)}
) } [V0_FILE]typescriptreact:file="src/components/ui/card.tsx" isQuickEdit="true" import as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { interactive?: boolean } >(({ className, interactive, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => null, ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="src/components/migration/setup.tsx" isFixed="true" isQuickEdit="true" "use client" import { Button } from "src/components/ui/button" import { Play } from "src/components/icons/play" import { canStartMigration } from "src/utils/migration" import { handleFullMigration } from "src/actions/migration" const SetupMigration = () => { return (
{/* ... existing code here ... /} {/ ... existing code here ... /}
) } export default SetupMigration [V0_FILE]typescriptreact:file="src/components/migration/migration-details.tsx" isFixed="true" isQuickEdit="true" "use client" import React, { useState, useEffect, useRef } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { useToast } from "@/hooks/use-toast" import { Clock, AlertTriangle, ArrowLeft, Download, Database, Settings, FileText, Users, CheckCircle2, XCircle, Pause, } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" // Default source organization (logged-in organization) const defaultSourceOrg = { id: "production", name: "Acme Corp - Production", organization: "Production" } interface MigrationDetailsProps { migration: any onBack: () => void source?: "portal" | "manager" } export function MigrationDetails({ migration, onBack, source = "portal" }: MigrationDetailsProps) { const { toast } = useToast() const [startTime] = useState(migration?.startTime || new Date()) const [elapsedTime, setElapsedTime] = useState(0) const [currentMigration, setCurrentMigration] = useState(() => ({ ...migration, status: migration?.status || "in-progress", // Always set to in-progress for new migrations })) const intervalRef = useRef(null) const [selectedCategoryModal, setSelectedCategoryModal] = useState(null) // Define stages for different component types const getComponentStages = (category: string) => { switch (category) { case "schema": return ["Schema Extraction", "Schema Comparison", "Schema Ingestion"] case "data": return ["Data Extraction", "Data Transformation", "Data Ingestion"] default: return ["Processing"] // For configuration and custom-code } } // Get current stage based on progress const getCurrentStage = (progress: number, category: string) => { const stages = getComponentStages(category) if (category === "schema" || category === "data") { if (progress < 33) return stages[0] if (progress < 66) return stages[1] if (progress < 100) return stages[2] return "Completed" } return progress < 100 ? stages[0] : "Completed" } // Map migration history data to expected format function mapHistoryDataToComponents(migration: any) { if (migration?.selectedComponents && migration.selectedComponents.length > 0) { // Group selected components by category to get accurate counts const componentsByCategory = migration.selectedComponents.reduce((acc: any, comp: any) => { let category = comp.category if (!category) { if (comp.name.toLowerCase().includes("schema")) category = "schema" else if (comp.name.toLowerCase().includes("data")) category = "data" else if (comp.name.toLowerCase().includes("configuration")) category = "configuration" else if ( comp.name.toLowerCase().includes("custom") || comp.name.toLowerCase().includes("code") || comp.name.toLowerCase().includes("extensibility") ) category = "extensibility" else category = "data" // default fallback } if (!acc[category]) { acc[category] = [] } acc[category].push(comp) return acc }, {}) // Create component groups with accurate counts const componentGroups = [] Object.keys(componentsByCategory).forEach((category) => { const categoryComponents = componentsByCategory[category] const actualCount = categoryComponents.length // For new migrations, start with low progress const isNewMigration = !migration?.status || migration?.status === "in-progress" const initialProgress = isNewMigration ? Math.floor(Math.random() 20) + 5 : 50 // 5-25% for new migrations // Create detailed components array with actual selected components const detailedComponents = categoryComponents.map((comp: any) => ({ name: comp.name, description: comp.description, status: "in-progress", // Always start as in-progress for new migrations progress: initialProgress, })) // Create the category group const categoryName = category === "schema" ? "Schema" : category === "data" ? "Data Components" : category === "configuration" ? "Configuration Settings" : category === "extensibility" ? "Extensibility" : "Components" componentGroups.push({ name: categoryName, category: category, count: actualCount, itemCount: actualCount, status: "in-progress", // Always start as in-progress progress: initialProgress, detailedComponents: detailedComponents, description: category === "schema" ? "Database schema definitions, object structures, and field configurations" : category === "data" ? "User accounts, customer data, products, quotes, orders, and transactional records" : category === "configuration" ? "Integration settings, workflows, approval processes, and system configurations" : category === "extensibility" ? "Custom code, templates, images, documents, and extensibility components" : "Selected components", }) }) return componentGroups } // For migrations without selectedComponents (legacy or full migrations), use default structure const defaultComponents = [ { name: "Schema", category: "schema", count: 1, itemCount: 1, description: "Database schema definitions, object structures, and field configurations", }, { name: "Data Components", category: "data", count: 8, itemCount: 8, description: "User accounts, customer data, products, quotes, orders, and transactional records", }, { name: "Configuration Settings", category: "configuration", count: 8, itemCount: 8, description: "Integration settings, workflows, approval processes, and system configurations", }, { name: "Extensibility", category: "extensibility", count: 2, itemCount: 2, description: "Custom code, templates, images, documents, and extensibility components", }, ] return defaultComponents.map((comp, index) => { let componentStatus = "in-progress" let componentProgress = Math.floor(Math.random() * 20) + 5 // Start with 5-25% for new migrations // Only use different logic for completed/failed migrations if (migration.status === "completed") { componentStatus = "completed" componentProgress = 100 } else if (migration.status === "failed") { const completedComponents = migration.componentsCompleted || 0 const errorComponents = migration.componentsErrors || 0 if (index < completedComponents) { componentStatus = "completed" componentProgress = 100 } else if (index < completedComponents + errorComponents) { componentStatus = "failed" componentProgress = 0 } else { componentStatus = "in-progress" componentProgress = Math.floor(Math.random() * 20) + 5 } } // Generate the correct number of detailed components with proper status distribution const detailedComponents = [] for (let i = 0; i < comp.count; i++) { let detailStatus = componentStatus let detailProgress = componentProgress // For failed migrations, distribute status across detailed components if (migration.status === "failed" && comp.count > 1) { const completedCount = Math.floor(comp.count * 0.6) // 60% completed const errorCount = comp.count - completedCount // rest failed if (i < completedCount) { detailStatus = "completed" detailProgress = 100 } else { detailStatus = "failed" detailProgress = 0 } } const templates = { schema: [ { name: "Schema", description: "Database schema definitions, object structures, and field configurations" }, ], data: [ { name: "Accounts", description: "Customer and partner account records with relationships" }, { name: "Account Location", description: "Geographic location data associated with accounts" }, { name: "Activity History", description: "Historical activity logs and audit trails" }, { name: "Agreement", description: "Contracts, legal agreements, and terms documentation" }, { name: "Asset", description: "Customer assets, subscriptions, and installed products" }, { name: "Contact", description: "Individual contact information and relationships" }, { name: "Opportunity", description: "Sales opportunities and pipeline data" }, { name: "Product", description: "Product catalog and pricing information" }, ], configuration: [ { name: "Integration Settings", description: "External system integration configurations and API settings", }, { name: "Data Sync Settings", description: "Data synchronization configuration and mapping rules" }, { name: "Global Settings", description: "Application-wide configuration settings and preferences" }, { name: "Approval Workflows", description: "Approval process workflows, chains, and routing logic" }, { name: "Validation Rules", description: "Data quality and integrity constraints" }, { name: "Price Rules", description: "Dynamic pricing and discount configurations" }, { name: "Workflow Rules", description: "Automated business process configurations" }, { name: "Security Settings", description: "User permissions, roles, and access control configurations" }, ], extensibility: [ { name: "Code", description: "Custom business logic implementations including Apex classes, triggers, Lightning components, and automation scripts", }, { name: "Image", description: "Static resources, logos, icons, custom graphics, and visual assets used throughout the application", }, { name: "Document", description: "Document templates, contract templates, email templates, and other business document formats", }, ], } const categoryTemplates = templates[comp.category as keyof typeof templates] || [] const template = categoryTemplates[i % categoryTemplates.length] const suffix = categoryTemplates.length > 1 && i >= categoryTemplates.length ? ` ${Math.floor(i / categoryTemplates.length) + 1}` : "" detailedComponents.push({ name: template.name + suffix, description: template.description, status: detailStatus, progress: detailProgress, }) } return { ...comp, status: componentStatus, progress: componentProgress, detailedComponents: detailedComponents, } }) } // Calculate category status based on detailed components const getCategoryStatus = (detailedComponents: any[]) => { if (!detailedComponents || detailedComponents.length === 0) { return "in-progress" } // Priority: failed > in-progress > completed const hasFailed = detailedComponents.some((comp) => comp.status === "failed") const hasInProgress = detailedComponents.some((comp) => comp.status === "in-progress") const allCompleted = detailedComponents.every((comp) => comp.status === "completed") if (hasFailed) return "failed" if (hasInProgress) return "in-progress" if (allCompleted) return "completed" // Default to in-progress return "in-progress" } // Initialize component progress state for all migration types const [componentProgress, setComponentProgress] = useState(() => { const components = mapHistoryDataToComponents(migration) return components.map((comp: any) => { const baseProgress = comp.progress || 0 const processedCount = Math.floor((baseProgress / 100) * (comp.count || comp.itemCount || 0)) // Calculate actual category status from detailed components const categoryStatus = getCategoryStatus(comp.detailedComponents) return { ...comp, progress: baseProgress, processedCount: processedCount, status: categoryStatus, // Use calculated category status currentStage: getCurrentStage(baseProgress, comp.category), // detailedComponents is already set in mapHistoryDataToComponents } }) }) const [isCompleted, setIsCompleted] = useState(migration?.status === "completed") // Categories definition const categories = [ { id: "schema", name: "Schema", icon: Database }, { id: "data", name: "Data", icon: Users }, { id: "configuration", name: "Configuration", icon: Settings }, { id: "extensibility", name: "Extensibility", icon: FileText }, ] // Get terminology based on categories const getTerminology = (categoryId: string) => { switch (categoryId) { case "schema": return { unit: "items", objectType: "objects" } case "data": return { unit: "objects", objectType: "objects" } case "configuration": return { unit: "items", objectType: "configurations" } case "extensibility": return { unit: "items", objectType: "projects" } default: return { unit: "items", objectType: "items" } } } // Get status icon for tiles const getStatusIcon = (isInProgress: boolean, isFailed: boolean, isCompletedCategory: boolean) => { if (isCompletedCategory) { return } if (isFailed) { return } if (isInProgress) { return } return } // Calculate elapsed time useEffect(() => { const interval = setInterval(() => { const now = new Date() const elapsed = Math.floor((now.getTime() - startTime.getTime()) / 1000) setElapsedTime(elapsed) }, 1000) return () => clearInterval(interval) }, [startTime]) // Handle migration completion const handleMigrationComplete = (completedMigrationData?: any) => { setCurrentMigration((prev: any) => ({ ...prev, ...completedMigrationData, status: "completed", endTime: completedMigrationData?.endTime || new Date(), progress: 100, // Always set to 100% when completed components: completedMigrationData?.selectedComponents || prev.components?.map((comp: any) => ({ ...comp, status: "completed", progress: 100, })) || [], })) } // Simulate progress updates for in-progress migrations useEffect(() => { // Clear any existing interval first if (intervalRef.current) { clearInterval(intervalRef.current) intervalRef.current = null } // Start progress simulation for in-progress migrations (including new ones) if (currentMigration?.status === "completed" || currentMigration?.status === "failed" || isCompleted) { return // Don't simulate progress for completed or failed migrations } intervalRef.current = setInterval(() => { setComponentProgress((prevComponents) => { let hasUpdates = false let allComponentsCompleted = true const updatedComponents = prevComponents.map((component) => { if (component.status === "in-progress" && component.progress < 100) { allComponentsCompleted = false hasUpdates = true const progressRate = Math.random() * 3 + 1 // 1-4% per update const newProgress = Math.min(component.progress + progressRate, 100) const newStage = getCurrentStage(newProgress, component.category) // Update detailed components progress const updatedDetailedComponents = component.detailedComponents?.map((detail: any) => { if (detail.status === "in-progress" && detail.progress < 100) { const detailProgressRate = Math.random() * 4 + 1 const newDetailProgress = Math.min(detail.progress + detailProgressRate, 100) return { ...detail, progress: Math.round(newDetailProgress), status: newDetailProgress >= 100 ? "completed" : "in-progress", } } return detail }) // Recalculate category status based on updated detailed components const newCategoryStatus = getCategoryStatus(updatedDetailedComponents) if (newProgress >= 100) { return { ...component, progress: 100, status: "completed", currentStage: "Completed", detailedComponents: updatedDetailedComponents?.map((detail: any) => ({ ...detail, status: "completed", progress: 100, })), } } return { ...component, progress: Math.round(newProgress), status: newCategoryStatus, currentStage: newStage, detailedComponents: updatedDetailedComponents, } } else if (component.status === "completed") { // Component is already completed } else { allComponentsCompleted = false } return component }) // If all components are completed, trigger migration completion if (allComponentsCompleted && !isCompleted) { // Clear the interval immediately if (intervalRef.current) { clearInterval(intervalRef.current) intervalRef.current = null } setTimeout(() => { toast({ title: "Migration Completed Successfully!", description: "All components have been migrated successfully. You can now download the detailed report.", variant: "default", }) setIsCompleted(true) setCurrentMigration((prev: any) => ({ ...prev, status: "completed", endTime: new Date(), progress: 100, components: updatedComponents, })) }, 100) } return updatedComponents }) }, 500) // Update every 500ms return () => { if (intervalRef.current) { clearInterval(intervalRef.current) intervalRef.current = null } } }, [currentMigration?.status, currentMigration?.id, isCompleted, toast]) // Check if migration is complete and update overall status useEffect(() => { if (componentProgress.length > 0) { const allCompleted = componentProgress.every((component) => component.status === "completed") // Calculate overall progress - if all completed, force to 100% const overallProgress = allCompleted ? 100 : Math.round( componentProgress.reduce((sum, component) => sum + component.progress, 0) / componentProgress.length, ) // Update current migration with new progress setCurrentMigration((prev: any) => ({ ...prev, progress: overallProgress, components: componentProgress, })) if (allCompleted && !isCompleted) { // Stop the progress simulation immediately if (intervalRef.current) { clearInterval(intervalRef.current) intervalRef.current = null } setTimeout(() => { setIsCompleted(true) handleMigrationComplete({ endTime: new Date(), selectedComponents: componentProgress, progress: 100, // Ensure final progress is 100% }) }, 2000) } } }, [componentProgress, isCompleted, toast]) // Helper functions const getStatusBadge = (status: string) => { const currentStatus = isCompleted || currentMigration?.status === "completed" ? "completed" : status switch (currentStatus) { case "completed": return ( Completed ) case "in-progress": return ( In Progress ) case "failed": return ( Failed ) default: return ( In Progress ) } } const formatTime = (seconds: number) => { const hours = Math.floor(seconds / 3600) const minutes = Math.floor((seconds % 3600) / 60) if (hours > 0) { return `${hours}h ${minutes}m` } return `${minutes}m` } const formatDuration = () => { if (currentMigration?.status === "in-progress") { return `${formatTime(elapsedTime)} (ongoing)` } if (currentMigration?.endTime && startTime) { const duration = Math.floor((currentMigration.endTime.getTime() - startTime.getTime()) / 1000) return formatTime(duration) } return currentMigration?.duration || "N/A" } const getBackButtonText = () => { switch (source) { case "manager": return "Back to Migration Manager" case "portal": default: return "Back to Migration Portal" } } const getCategoryObjectTerminology = (categoryId: string) => { switch (categoryId) { case "schema": return { singular: "object", plural: "objects" } case "data": return { singular: "object", plural: "objects" } case "configuration": return { singular: "configuration", plural: "configurations" } case "extensibility": return { singular: "project", plural: "projects" } default: return { singular: "item", plural: "items" } } } // Calculate values const migrationId = currentMigration?.id || `migration-${Date.now().toString().slice(-10)}` const overallProgress = currentMigration?.progress || 0 // Use component progress for all migration types const displayComponents = componentProgress return (

{/* Header /}

Migration Progress

{migration?.type === "selective" || currentMigration?.type === "selective" ? "Selective" : "Full"}{" "} Migration - {migrationId}

{/ Migration Status /}

{isCompleted || currentMigration?.status === "completed" ? ( ) : currentMigration?.status === "failed" ? ( ) : ( )} Migration Status
{getStatusBadge(currentMigration?.status || "in-progress")}

{currentMigration?.sourceOrg?.name || defaultSourceOrg.name}→{" "} {currentMigration?.targetOrg?.name || currentMigration?.targetOrg || currentMigration?.target || "Target Organization"}
{/ Overall Progress - Hide when completed /} {overallProgress < 100 && !isCompleted && currentMigration?.status !== "completed" && (

Overall Progress {overallProgress}%

)} {/ Category Tiles /}
Migration Progress
{categories.map((category) => { const categoryComponents = displayComponents.filter((comp) => comp.category === category.id) if (categoryComponents.length === 0) return null const totalComponents = categoryComponents.length const Icon = category.icon // Use category-specific status instead of overall migration status const categoryStatus = categoryComponents[0]?.status || "in-progress" const isInProgress = categoryStatus === "in-progress" const isFailed = categoryStatus === "failed" const isCompletedCategory = categoryStatus === "completed" // Calculate category progress const categoryProgress = Math.round( categoryComponents.reduce((sum, comp) => sum + (comp.progress || 0), 0) / categoryComponents.length, ) // Use the actual count from the component (which now matches detailed components) const actualCount = categoryComponents[0]?.count || categoryComponents[0]?.itemCount || totalComponents return (
setSelectedCategoryModal(category.id)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() setSelectedCategoryModal(category.id) } }} aria-label={`View details for ${category.name} components`} >

{category.name}
{/ Status-appropriate icon /} {getStatusIcon(isInProgress, isFailed, isCompletedCategory)}

{actualCount} {getCategoryObjectTerminology(category.id).plural}

{isCompletedCategory && ( Completed )} {isFailed && ( Failed )} {isInProgress && ( In Progress )}

{/ Progress Bar - Show for in-progress migrations /} {isInProgress && (

Progress {categoryProgress}%

)}

) })}

{/ Failed Details /} {currentMigration?.status === "failed" && (

Migration Failed

Migration failed during validation rule processing. Conflicts detected in custom field dependencies. Please review the failed logs and contact support if needed.

)} {/ Migration Details /}

Migration Information
Technical details and timing information

{(currentMigration?.status === "completed" || isCompleted) && ( )}

Migration ID

{migrationId}

Migration Type

{migration?.type === "selective" || currentMigration?.type === "selective" ? "Selective Migration" : "Full Migration"}

Source Organization

{currentMigration?.sourceOrg?.name || defaultSourceOrg.name}

Target Organization

{currentMigration?.targetOrg?.name || currentMigration?.targetOrg || currentMigration?.target || "N/A"}

Started

{startTime.toLocaleDateString()}, {startTime.toLocaleTimeString()}

Completed

{currentMigration?.endTime ? `${currentMigration.endTime.toLocaleDateString()}, ${currentMigration.endTime.toLocaleTimeString()}` : isCompleted && currentMigration?.endTime ? `${currentMigration.endTime.toLocaleDateString()}, ${currentMigration.endTime.toLocaleTimeString()}` : currentMigration?.status === "in-progress" ? "In Progress" : currentMigration?.status === "failed" ? "Failed" : "N/A"}

Duration

{formatDuration()}

Initiated By

{currentMigration?.initiatedBy || "admin@acme.com"}

{/ Component Details Modal - Available for all migration types /} setSelectedCategoryModal(null)}> {selectedCategoryModal && ( <> {categories.find((cat) => cat.id === selectedCategoryModal)?.icon && React.createElement(categories.find((cat) => cat.id === selectedCategoryModal)!.icon, { className: "h-5 w-5 text-neutral-700", })} {categories.find((cat) => cat.id === selectedCategoryModal)?.name} )} {selectedCategoryModal && (

Selected {getCategoryObjectTerminology(selectedCategoryModal).plural} for migration from the{" "} {categories.find((cat) => cat.id === selectedCategoryModal)?.name.toLowerCase()}:

{componentProgress .filter((comp) => comp.category === selectedCategoryModal) .map((component, index) => (
{component.detailedComponents?.map((detail: any, detailIndex: number) => (

{detail.name}

{detail.status === "completed" && ( Completed )} {detail.status === "in-progress" && ( In Progress )} {detail.status === "failed" && ( Failed )}

{/ Progress bar for in-progress components /} {detail.status === "in-progress" && (

{component.category === "schema" || component.category === "data" ? component.currentStage === "Completed" ? "Progress" : `${component.currentStage} is in progress` : "Migration is in progress"} {detail.progress}%

)}
))}
))}
{/ Summary /}

Summary:{" "} {componentProgress .filter((comp) => comp.category === selectedCategoryModal) .reduce((total, comp) => total + (comp.detailedComponents?.length || 0), 0)}{" "} {getCategoryObjectTerminology(selectedCategoryModal).plural} selected for migration

)}

) } [V0_FILE]typescriptreact:file="src/components/ui/skeleton.tsx" import type React from "react" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.ComponentProps<"div">) { return
} export { Skeleton } [V0_FILE]typescriptreact:file="src/components/migration/migration-component-skeleton.tsx" isQuickEdit="true" import { Skeleton } from "../ui/skeleton" interface MigrationComponentSkeletonProps { count?: number } export function MigrationComponentSkeleton({ count = 6 }: MigrationComponentSkeletonProps) { return (
{Array.from({ length: count }).map((_, index) => (
{/ Checkbox skeleton /}
{/ Title and badge row /}
{/ Component name skeleton /} {/ Badge skeleton /}
{/ Description skeleton - matches actual description styling /}

))}
) } [V0_FILE]typescriptreact:file="src/components/theme-provider.tsx" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" | "system" type ThemeProviderProps = { children: React.ReactNode defaultTheme?: Theme storageKey?: string attribute?: string value?: Record enableSystem?: boolean disableTransitionOnChange?: boolean } type ThemeProviderState = { theme: Theme setTheme: (theme: Theme) => void } const initialState: ThemeProviderState = { theme: "system", setTheme: () => null, } const ThemeProviderContext = createContext(initialState) export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", attribute = "class", enableSystem = true, disableTransitionOnChange = false, ...props }: ThemeProviderProps) { const [theme, setTheme] = useState(() => (localStorage?.getItem(storageKey) as Theme) || defaultTheme) useEffect(() => { const root = window.document.documentElement root.classList.remove("light", "dark") if (theme === "system" && enableSystem) { const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" root.classList.add(systemTheme) return } root.classList.add(theme) }, [theme, enableSystem]) const value = { theme, setTheme: (theme: Theme) => { localStorage?.setItem(storageKey, theme) setTheme(theme) }, } return ( {children} ) } export const useTheme = () => { const context = useContext(ThemeProviderContext) if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") return context } [V0_FILE]typescriptreact:file="src/components/migration/data-criteria-builder.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { Plus, X, Filter, Database, Link } from "lucide-react" import { mockDataObjects, fieldOperators, type DataObject, type CriteriaRule, type CriteriaQuery, } from "@/data/data-criteria-mock" interface DataCriteriaBuilderProps { selectedObject: DataObject | null onObjectSelect: (object: DataObject) => void onQueryChange: (query: CriteriaQuery | null) => void onClose: () => void } export function DataCriteriaBuilder({ selectedObject, onObjectSelect, onQueryChange, onClose, }: DataCriteriaBuilderProps) { const [rules, setRules] = useState([]) const [includeRelatedData, setIncludeRelatedData] = useState(false) const [selectedRelatedObjects, setSelectedRelatedObjects] = useState([]) const [estimatedRecords, setEstimatedRecords] = useState(null) const addRule = () => { if (!selectedObject) return const newRule: CriteriaRule = { id: `rule-${Date.now()}`, field: selectedObject.queryableFields[0]?.name || "", operator: "equals", value: "", logicalOperator: rules.length > 0 ? "AND" : undefined, } setRules([...rules, newRule]) } const removeRule = (ruleId: string) => { const newRules = rules.filter((rule) => rule.id !== ruleId) // Remove logical operator from first rule if it exists if (newRules.length > 0 && newRules[0].logicalOperator) { newRules[0] = { ...newRules[0], logicalOperator: undefined } } setRules(newRules) } const updateRule = (ruleId: string, updates: Partial) => { setRules(rules.map((rule) => (rule.id === ruleId ? { ...rule, ...updates } : rule))) } const handleRelatedObjectToggle = (objectId: string) => { setSelectedRelatedObjects((prev) => prev.includes(objectId) ? prev.filter((id) => id !== objectId) : [...prev, objectId], ) } const calculateEstimatedRecords = () => { if (!selectedObject) return // Simple estimation logic - in real app this would call an API const baseCount = selectedObject.recordCount const reductionFactor = Math.max(0.1, 1 - rules.length 0.2) const estimated = Math.floor(baseCount * reductionFactor) setEstimatedRecords(estimated) } const applyQuery = () => { if (!selectedObject) return const query: CriteriaQuery = { objectId: selectedObject.id, rules, includeRelatedData, relatedObjects: selectedRelatedObjects, } onQueryChange(query) calculateEstimatedRecords() } const clearQuery = () => { setRules([]) setIncludeRelatedData(false) setSelectedRelatedObjects([]) setEstimatedRecords(null) onQueryChange(null) } const getFieldType = (fieldName: string) => { return selectedObject?.queryableFields.find((f) => f.name === fieldName)?.type || "text" } const getFieldOptions = (fieldName: string) => { return selectedObject?.queryableFields.find((f) => f.name === fieldName)?.options || [] } const getRelatedObjectName = (objectId: string) => { return mockDataObjects.find((obj) => obj.id === objectId)?.name || objectId } return (
{/* Object Selection /} Select Data Object {selectedObject && (

{selectedObject.name}

{selectedObject.description}

{selectedObject.recordCount.toLocaleString()} total records

)} {selectedObject && ( <> {/ Criteria Rules /}
Filter Criteria
{rules.length === 0 ? (

No filter rules defined

Click "Add Rule" to start filtering records

) : (
{rules.map((rule, index) => (
{index > 0 && (

)}
{/ Field Selection /} {/ Operator Selection /} {/ Value Input /}
{getFieldType(rule.field) === "picklist" ? ( ) : getFieldType(rule.field) === "boolean" ? ( ) : ( updateRule(rule.id, { value: e.target.value })} placeholder="Enter value..." /> )}
{/ Remove Button /}

))}
)} {/ Related Data /} {selectedObject.relatedObjects.length > 0 && ( Related Data

{ setIncludeRelatedData(checked as boolean) if (!checked) { setSelectedRelatedObjects([]) } }} /> Include related data objects
{includeRelatedData && (

Select related objects to include in the migration:
{selectedObject.relatedObjects.map((objectId) => { const relatedObject = mockDataObjects.find((obj) => obj.id === objectId) if (!relatedObject) return null return (
handleRelatedObjectToggle(objectId)} /> {relatedObject.name} {relatedObject.recordCount.toLocaleString()} records
) })}
)}
)} {/ Actions /}

{estimatedRecords !== null && (
Estimated records:{" "} {estimatedRecords.toLocaleString()}
)}
)}
) } [V0_FILE]typescriptreact:file="src/components/cross-org-portal.tsx" isQuickEdit="true" "use client" import { useState, useRef, useEffect, useMemo } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Database, GitBranch, History, CheckCircle2, Clock, ArrowRight, AlertCircle, Search } from "lucide-react" import { MigrationManager } from "@/components/migration/migration-manager" import { MigrationDetails } from "@/components/migration/migration-details" import { allMigrationHistory } from "@/data/migration-history-data" import { ROUTES } from "@/constants/routes" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" export function CrossOrgPortal() { const [activeSection, setActiveSection] = useState(null) const [selectedMigration, setSelectedMigration] = useState(null) const [announceMessage, setAnnounceMessage] = useState("") const mainContentRef = useRef(null) const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [typeFilter, setTypeFilter] = useState("all") const [currentPage, setCurrentPage] = useState(1) const searchInputRef = useRef(null) const ITEMS_PER_PAGE = 10 // Use useMemo for filtering with improved logic const filteredMigrations = useMemo(() => { let result = [...allMigrationHistory] // Create a copy to avoid mutations // Search filter - improved to handle empty/undefined values if (searchTerm && searchTerm.trim() !== "") { const searchLower = searchTerm.toLowerCase().trim() result = result.filter((migration) => { const searchableFields = [ migration.id || "", migration.sourceOrg || "", migration.targetOrg || "", migration.initiatedBy || "", ] return searchableFields.some((field) => field.toLowerCase().includes(searchLower)) }) } // Status filter - ensure exact match if (statusFilter && statusFilter !== "all") { result = result.filter((migration) => migration.status === statusFilter) } // Type filter - ensure exact match if (typeFilter && typeFilter !== "all") { result = result.filter((migration) => migration.type === typeFilter) } // Sort by date (newest first) - handle potential undefined dates result.sort((a, b) => { const dateA = a.startTime ? new Date(a.startTime).getTime() : 0 const dateB = b.startTime ? new Date(b.startTime).getTime() : 0 return dateB - dateA }) return result }, [searchTerm, statusFilter, typeFilter]) // Pagination const totalItems = filteredMigrations.length const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE) const startIndex = (currentPage - 1) ITEMS_PER_PAGE const endIndex = startIndex + ITEMS_PER_PAGE const currentItems = filteredMigrations.slice(startIndex, endIndex) // Reset page when filters change useEffect(() => { setCurrentPage(1) }, [searchTerm, statusFilter, typeFilter]) const handleSearchChange = (value: string) => { setSearchTerm(value) } const handleStatusFilterChange = (value: string) => { setStatusFilter(value) announceToScreenReader(`Status filter changed to ${value === "all" ? "all statuses" : value}`) } const handleTypeFilterChange = (value: string) => { setTypeFilter(value) announceToScreenReader(`Type filter changed to ${value === "all" ? "all types" : value}`) } const handlePageChange = (page: number) => { setCurrentPage(page) announceToScreenReader(`Navigated to page ${page} of ${totalPages}`) } // Generate pagination items const generatePaginationItems = () => { const items = [] const maxVisiblePages = 5 if (totalPages <= maxVisiblePages) { // Show all pages if total is small for (let i = 1; i <= totalPages; i++) { items.push( { e.preventDefault() handlePageChange(i) }} aria-label={`Go to page ${i}`} > {i} , ) } } else { // Show first page items.push( { e.preventDefault() handlePageChange(1) }} aria-label="Go to page 1" > 1 , ) // Show ellipsis if needed if (currentPage > 3) { items.push( , ) } // Show pages around current page const start = Math.max(2, currentPage - 1) const end = Math.min(totalPages - 1, currentPage + 1) for (let i = start; i <= end; i++) { items.push( { e.preventDefault() handlePageChange(i) }} aria-label={`Go to page ${i}`} > {i} , ) } // Show ellipsis if needed if (currentPage < totalPages - 2) { items.push( , ) } // Show last page if (totalPages > 1) { items.push( { e.preventDefault() handlePageChange(totalPages) }} aria-label={`Go to page ${totalPages}`} > {totalPages} , ) } } return items } // Announce changes to screen readers const announceToScreenReader = (message: string) => { setAnnounceMessage(message) setTimeout(() => setAnnounceMessage(""), 1000) } // Focus management useEffect(() => { if (mainContentRef.current) { mainContentRef.current.focus() } }, [activeSection]) // Handle direct migration details view from portal const handleMigrationDetailsView = () => { if (selectedMigration && !activeSection) { return ( { setSelectedMigration(null) announceToScreenReader("Returned to main dashboard") }} source="portal" /> ) } return null } // Handle Migration Manager views const handleMigrationManagerView = () => { if (activeSection === "migration" || activeSection === "migration-history") { return ( { setActiveSection(null) announceToScreenReader("Returned to main dashboard") }} source="portal" /> ) } return null } const handleMigrationManagerLaunch = () => { window.location.href = ROUTES.MIGRATION_NEW announceToScreenReader("Launching Migration Manager") } const handleMigrationDetails = (migration: any) => { window.location.href = `${ROUTES.MIGRATION_DETAIL}/${migration.id}` announceToScreenReader(`Opening details for migration ${migration.id}`) } const getStatusIcon = (status: string) => { const iconProps = { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true } switch (status) { case "completed": return case "in-progress": return case "failed": return default: return } } const getStatusBadge = (status: string) => { switch (status) { case "completed": return ( Completed ) case "in-progress": return ( In Progress ) case "failed": return ( Failed ) default: return ( Pending ) } } const getTypeBadge = (type: string) => { return ( {type} ) } return (
{/* Screen reader announcements /}
{announceMessage}

{/ Hero Section /}

Cross-Organization Management

Centralized interface for managing migrations and configurations across customer organizations

Opens the migration management interface for configuring and running data migrations

{/ Feature Boxes /}

Full & Selective Migrations

Choose between complete data transfers or select specific components to migrate

Cross-Organization Support

Migrate between any organization combination with intelligent conflict resolution

Migration History & Reporting

Comprehensive logs and detailed reports for all migration activities

{/ Migration History /}

Migration History

Manage and monitor all migration activities

{/ Search and Filters - Responsive Layout /} {/ Mobile Layout /}
{/ Search Input - Full Width /}

handleSearchChange(e.target.value)} className="pl-10 bg-white border-neutral-300 text-neutral-1000 w-full" aria-label="Search migrations by ID, source, target, or user" aria-describedby="search-help" role="searchbox" />
Search by migration ID, source organization, target organization, or user email

{/ Filter Dropdowns - 2 Column Grid /}

{/ Desktop Layout - Original /}

handleSearchChange(e.target.value)} className="pl-10 bg-white border-neutral-300 text-neutral-1000" aria-label="Search migrations by ID, source, target, or user" aria-describedby="search-help-desktop" role="searchbox" />
Search by migration ID, source organization, target organization, or user email

{/ Migrations Table /} Migrations ({totalItems}) Showing {startIndex + 1}-{Math.min(endIndex, totalItems)} of {totalItems} migrations {/ Desktop Table View /}
Migration Type Source → Target Status Date/Time Duration Components Initiated By {currentItems.map((migration) => ( {getTypeBadge(migration.type)}

{migration.sourceOrg}

{migration.targetOrg}

Migration from {migration.sourceOrg} to {migration.targetOrg}

{getStatusBadge(migration.status)}

{migration.startTime.toLocaleDateString()}

{migration.componentsCompleted} completed

of {migration.componentsTotal} total
{migration.componentsErrors > 0 && (
{migration.componentsErrors} errors
)}
{migration.initiatedBy} ))}
Migration history table showing {totalItems} migrations. Use the search and filter controls above to find specific migrations.

{/ Mobile/Tablet Card View /}
{currentItems.map((migration) => ( handleMigrationDetails(migration)} role="button" aria-label={`View details for migration ${migration.id} from ${migration.sourceOrg} to ${migration.targetOrg}`} tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() handleMigrationDetails(migration) } }} > {/ Header with ID and Status /}

{migration.id}

{getTypeBadge(migration.type)}

{getStatusBadge(migration.status)}

{/ Organizations /}

Migration Path

{migration.sourceOrg} {migration.targetOrg}

{/ Date and Duration /}

Date

{migration.startTime.toLocaleDateString()}

Duration

{/ Components Progress /}

Components

{migration.componentsCompleted} completed of {migration.componentsTotal} total
{migration.componentsErrors > 0 && (
{migration.componentsErrors} errors
)}

{/ Initiated By /}

Initiated By

{migration.initiatedBy}

))} {/ Empty State for Mobile /} {currentItems.length === 0 && (

No migrations found

Try adjusting your search or filter criteria

)}
{/ Pagination /} {totalPages > 1 && (

Showing {startIndex + 1}-{Math.min(endIndex, totalItems)} of {totalItems} results

{ e.preventDefault() if (currentPage > 1) { handlePageChange(currentPage - 1) } }} className={currentPage === 1 ? "pointer-events-none opacity-50" : ""} aria-disabled={currentPage === 1} /> {generatePaginationItems()} { e.preventDefault() if (currentPage < totalPages) { handlePageChange(currentPage + 1) } }} className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""} aria-disabled={currentPage === totalPages} />

)}

) } [V0_FILE]typescriptreact:file="src/components/migration/tabs/shared/comparison-summary-stats.tsx" "use client" import { Plus, Minus, Edit } from "lucide-react" interface ComparisonSummaryStatsProps { addedCount: number modifiedCount: number removedCount: number addedSubtext: string modifiedSubtext: string removedSubtext: string } export function ComparisonSummaryStats({ addedCount, modifiedCount, removedCount, addedSubtext, modifiedSubtext, removedSubtext, }: ComparisonSummaryStatsProps) { return (

Added

{addedCount}

{addedSubtext}

Modified

{modifiedCount}

{modifiedSubtext}

Removed

{removedCount}

{removedSubtext}

) } [V0_FILE]typescriptreact:file="src/data/migration-categories.ts" import { Database, Settings, FileText, Users } from "lucide-react" export const migrationCategories = [ { id: "schema", name: "Schema", icon: Database }, { id: "data", name: "Data", icon: Users }, { id: "configuration", name: "Configuration", icon: Settings }, { id: "extensibility", name: "Extensibility", icon: FileText }, ] export type MigrationCategoryId = "schema" | "data" | "configuration" | "extensibility" [V0_FILE]typescriptreact:file="src/components/migration/migration-tabs.tsx" isQuickEdit="true" "use client" import type { ReactNode } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { migrationCategories } from "@/data/migration-categories" interface MigrationTabsProps { activeTab: string onTabChange: (value: string) => void selectedComponents: string[] isReviewMode: boolean getCategoryCount: (categoryId: string) => number children: ReactNode } interface MigrationTabContentProps { categoryId: string selectedComponents: string[] isReviewMode: boolean children: ReactNode } export function MigrationTabs({ activeTab, onTabChange, selectedComponents, isReviewMode, getCategoryCount, children, }: MigrationTabsProps) { return (
{migrationCategories.map((category) => { const Icon = category.icon const count = getCategoryCount(category.id) return ( {isReviewMode ? ( <> {category.name} {category.id === "configuration" ? "Config" : category.id === "extensibility" ? "Ext" : category.name} ({count}) ) : ( <> ) })}
{children} ) } export function MigrationTabContent({ categoryId, selectedComponents, isReviewMode, children, }: MigrationTabContentProps) { return ( {children} ) } [V0_FILE]typescriptreact:file="src/components/ui/centered-pagination.tsx" "use client" import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" interface CenteredPaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export function CenteredPagination({ currentPage, totalPages, onPageChange }: CenteredPaginationProps) { const generatePaginationItems = () => { const items = [] const maxVisiblePages = 5 if (totalPages <= maxVisiblePages) { for (let i = 1; i <= totalPages; i++) { items.push( { e.preventDefault() onPageChange(i) }} aria-label={`Go to page ${i}`} > {i} , ) } } else { items.push( { e.preventDefault() onPageChange(1) }} aria-label="Go to page 1" > 1 , ) if (currentPage > 3) { items.push( , ) } const start = Math.max(2, currentPage - 1) const end = Math.min(totalPages - 1, currentPage + 1) for (let i = start; i <= end; i++) { items.push( { e.preventDefault() onPageChange(i) }} aria-label={`Go to page ${i}`} > {i} , ) } if (currentPage < totalPages - 2) { items.push( , ) } if (totalPages > 1) { items.push( { e.preventDefault() onPageChange(totalPages) }} aria-label={`Go to page ${totalPages}`} > {totalPages} , ) } } return items } return (
{ e.preventDefault() if (currentPage > 1) { onPageChange(currentPage - 1) } }} className={currentPage === 1 ? "pointer-events-none opacity-50" : ""} aria-disabled={currentPage === 1} /> {generatePaginationItems()} { e.preventDefault() if (currentPage < totalPages) { onPageChange(currentPage + 1) } }} className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""} aria-disabled={currentPage === totalPages} />
) } [V0_FILE]typescriptreact:file="src/components/migration/migration-setup.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Database, GitBranch, Play, Settings, CheckCircle2, AlertCircle } from "lucide-react" import { SelectiveMigrationDialog } from "./selective-migration-dialog" import { FullMigrationDialog } from "./full-migration-dialog" interface MigrationSetupProps { onStartMigration: (migration: any) => void onNavigateToSelective: (sourceOrg: any, targetOrg: any) => void } const organizations = [ { id: "development", name: "Acme Corp - Development", organization: "Development" }, { id: "staging", name: "Acme Corp - Staging", organization: "Staging" }, { id: "preview", name: "Acme Corp - Preview", organization: "Preview" }, { id: "production", name: "Acme Corp - Production", organization: "Production" }, ] // Default source organization (logged-in organization) const defaultSourceOrg = { id: "production", name: "Acme Corp - Production", organization: "Production" } export function MigrationSetup({ onStartMigration, onNavigateToSelective }: MigrationSetupProps) { const [targetOrg, setTargetOrg] = useState("") const [showFullDialog, setShowFullDialog] = useState(false) const [showSelectiveDialog, setShowSelectiveDialog] = useState(false) // Source organization API connection fields const [sourceClientId, setSourceClientId] = useState("") const [sourceClientSecret, setSourceClientSecret] = useState("") // Target organization API connection fields const [targetUserId, setTargetUserId] = useState("") const [targetClientId, setTargetClientId] = useState("") const [targetClientSecret, setTargetClientSecret] = useState("") const [isSaving, setIsSaving] = useState(false) const [isSaved, setIsSaved] = useState(false) const [saveError, setSaveError] = useState("") const canStartMigration = isSaved && targetOrg !== "" const canSave = targetOrg !== "" && sourceClientId.trim() !== "" && sourceClientSecret.trim() !== "" && targetUserId.trim() !== "" && targetClientId.trim() !== "" && targetClientSecret.trim() !== "" const getOrgById = (id: string) => organizations.find((env) => env.id === id) const handleSave = async () => { if (!canSave) return setIsSaving(true) setSaveError("") try { // Simulate API validation await new Promise((resolve) => setTimeout(resolve, 1500)) // Simulate random validation failure for demo if (Math.random() < 0.2) { throw new Error("Invalid API credentials. Please check your Client ID and Client Secret.") } setIsSaved(true) } catch (error) { setSaveError(error instanceof Error ? error.message : "Failed to validate connection") setIsSaved(false) } finally { setIsSaving(false) } } // Update the setTargetOrg call to reset saved state const handleTargetOrgChange = (value: string) => { setTargetOrg(value) setIsSaved(false) setSaveError("") } const handleFullMigration = () => { if (!canStartMigration) return // Create a comprehensive migration object for full migration const fullMigrationComponents = [ { id: "account", name: "Account", description: "Account records, customer information, and account hierarchies", category: "data", count: 1250, status: "pending", progress: 0, }, { id: "account-contact-relation", name: "AccountContactRelation", description: "Relationships between accounts and contacts", category: "data", count: 890, status: "pending", progress: 0, }, { id: "account-history", name: "AccountHistory", description: "Historical changes and audit trail for accounts", category: "data", count: 3420, status: "pending", progress: 0, }, { id: "contract", name: "Contract", description: "Contract records and legal agreements", category: "data", count: 567, status: "pending", progress: 0, }, { id: "currency", name: "Currency", description: "Currency definitions and exchange rates", category: "data", count: 45, status: "pending", progress: 0, }, { id: "user", name: "User", description: "User accounts and profile information", category: "data", count: 234, status: "pending", progress: 0, }, { id: "product", name: "Product", description: "Product catalog and pricing information", category: "data", count: 1890, status: "pending", progress: 0, }, { id: "quote", name: "Quote", description: "Sales quotes and proposals", category: "data", count: 2340, status: "pending", progress: 0, }, { id: "order", name: "Order", description: "Sales orders and fulfillment data", category: "data", count: 1567, status: "pending", progress: 0, }, { id: "workflow-rules", name: "Workflow Rules", description: "Automated workflow rules and processes", category: "configuration", count: 78, status: "pending", progress: 0, }, { id: "approval-processes", name: "Approval Processes", description: "Multi-step approval workflows", category: "configuration", count: 23, status: "pending", progress: 0, }, { id: "integration-settings", name: "Integration Settings", description: "Third-party integration configurations", category: "configuration", count: 12, status: "pending", progress: 0, }, { id: "apex-classes", name: "Apex Classes", description: "Custom Apex code and business logic", category: "extensibility", count: 156, status: "pending", progress: 0, }, { id: "triggers", name: "Triggers", description: "Database triggers and automation", category: "extensibility", count: 89, status: "pending", progress: 0, }, { id: "custom-objects", name: "Custom Objects", description: "Custom database objects and fields", category: "schema", count: 67, status: "pending", progress: 0, }, ] const migration = { id: `migration-${Date.now()}`, type: "full", sourceOrg: defaultSourceOrg.name, targetOrg: getOrgById(targetOrg)?.name || "", startTime: new Date(), status: "running", progress: 0, selectedComponents: fullMigrationComponents, components: fullMigrationComponents.map((comp) => ({ name: comp.name, status: comp.status, progress: comp.progress, })), } onStartMigration(migration) setShowFullDialog(false) } return (
{/ Organization Selection /} Organization Selection Select target organization for your migration from {defaultSourceOrg.name}

Source Organization
{defaultSourceOrg.name} (Current Organization)
{/ Source Organization API Connection Fields /}

User ID

Client ID setSourceClientId(e.target.value)} className="bg-bg-input border-neutral-400" required />

Client Secret * setSourceClientSecret(e.target.value)} className="bg-bg-input border-neutral-400" required />

Get your Client ID and Client Secret from Admin → Connections → API in your source organization

Target Organization {/* Target Organization API Connection Fields /} {targetOrg && (

User ID setTargetUserId(e.target.value)} className="bg-bg-input border-neutral-400" required />

Client ID * setTargetClientId(e.target.value)} className="bg-bg-input border-neutral-400" required />

Client Secret * setTargetClientSecret(e.target.value)} className="bg-bg-input border-neutral-400" required />

Get your Client ID and Client Secret from Admin → Connection → API in your target organization

)}

{isSaved && (
Connection validated successfully
)} {saveError && (
{saveError}
)}

{!isSaved && (

Please validate and save your organization connection before proceeding with migration.

)} {/* Migration Types /}
{/ Full Migration /} { if ((e.key === "Enter" || e.key === " ") && canStartMigration) { e.preventDefault() setShowFullDialog(true) } }} onClick={() => canStartMigration && setShowFullDialog(true)} >

Full Migration Complete migration of all data and configurations between organizations

Schema (database structure and field definitions)

Data Components (users, accounts, products, transactions)

Configuration Settings (workflows, integrations, approvals)

Custom Code (Apex classes, triggers, automations)

{/ Selective Migration /} { if ((e.key === "Enter" || e.key === " ") && canStartMigration) { e.preventDefault() onNavigateToSelective(defaultSourceOrg, getOrgById(targetOrg)) } }} onClick={() => canStartMigration && onNavigateToSelective(defaultSourceOrg, getOrgById(targetOrg))} >

Selective Migration Choose specific components to migrate between organizations

Schema (objects, fields, relationships)

Data (users, accounts, products, quotes, orders)

Configuration (settings, workflows, integrations)

Extensibility (Apex, triggers, automations)

{/ Migration Dialogs /}
) } [V0_FILE]typescriptreact:file="src/components/migration/full-migration-confirmation-dialog.tsx" "use client" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { AlertTriangle } from "lucide-react" interface FullMigrationConfirmationDialogProps { open: boolean onOpenChange: (open: boolean) => void sourceOrg: any targetOrg: any onConfirm: () => void } export function FullMigrationConfirmationDialog({ open, onOpenChange, sourceOrg, targetOrg, onConfirm, }: FullMigrationConfirmationDialogProps) { const handleProceed = () => { onConfirm() onOpenChange(false) } return ( Start Full Migration Review the migration details and confirm to proceed with the full migration.

Migration Summary

Source Organization
{sourceOrg?.name || "Not selected"}

Target Organization
{targetOrg?.name || "Not selected"}

Important Warnings
• Please make sure target organization is empty before initiating Full migration

• This will copy all Schema, Configurations, Data to the target organization

• The migration process cannot be undone once started

) } [V0_FILE]typescriptreact:file="src/components/migration/full-migration-dialog.tsx" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { AlertTriangle } from "lucide-react" interface FullMigrationDialogProps { open: boolean onOpenChange: (open: boolean) => void sourceOrg: any targetOrg: any onStartMigration: (migration: any) => void } export function FullMigrationDialog({ open, onOpenChange, sourceOrg, targetOrg, onStartMigration, }: FullMigrationDialogProps) { const handleStartMigration = () => { const migration = { id: `migration-${Date.now()}`, type: "full", sourceOrg, targetOrg, startTime: new Date(), status: "running", progress: 0, selectedComponents: [ { id: "schema", name: "Schema", description: "Database schema definitions, object structures, and field configurations", category: "schema", count: 1, status: "pending", progress: 0, }, { id: "account", name: "Account", description: "Customer and partner account records with relationships", category: "data", count: 1, status: "pending", progress: 0, }, { id: "account-contact-relation", name: "AccountContactRelation", description: "Relationships between accounts and contacts", category: "data", count: 1, status: "pending", progress: 0, }, { id: "account-history", name: "AccountHistory", description: "Historical changes and audit trail for accounts", category: "data", count: 1, status: "pending", progress: 0, }, { id: "contract", name: "Contract", description: "Contract records and legal agreements", category: "data", count: 1, status: "pending", progress: 0, }, { id: "currency", name: "Currency", description: "Currency definitions and exchange rates", category: "data", count: 1, status: "pending", progress: 0, }, { id: "configuration", name: "Configuration Settings", description: "Integration settings, workflows, approval processes, and global settings", category: "configuration", count: 1, status: "pending", progress: 0, }, { id: "custom-code", name: "Custom Code", description: "Apex classes, triggers, custom logic, and automated workflows", category: "extensibility", count: 1, status: "pending", progress: 0, }, ], components: [ { name: "Schema", status: "pending", progress: 0 }, { name: "Data Components", status: "pending", progress: 0 }, { name: "Configuration Settings", status: "pending", progress: 0 }, { name: "Custom Code", status: "pending", progress: 0 }, ], } onStartMigration(migration) onOpenChange(false) } return ( Start Full Migration
Important Warnings

Please make sure target organization is empty before initiating Full migration

This will copy all Schema, Configurations, Data from{" "} {sourceOrg?.name || "Source Org"} to{" "} {targetOrg?.name || "Target Org"}.

The migration process cannot be undone once started

) } [V0_FILE]typescriptreact:file="src/components/migration/migration-component-item.tsx" isQuickEdit="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { Lock, ChevronDown, ChevronRight, Trash2 } from "lucide-react" import { useState } from "react" import { getComponentDependencies } from "@/data/component-dependencies" import { Button } from "@/components/ui/button" interface MigrationComponentItemProps { component: { id: string name: string description: string subcategory?: string } mode: "selection" | "review" isSelected?: boolean onToggle?: (componentId: string) => void dependencyInfo?: { isRequiredDependency: boolean wasExplicitlyDeselected?: boolean wasManuallySelectedAfterRequired?: boolean requiredBy?: string[] } onRemoveDependency?: (componentId: string) => void } export function MigrationComponentItem({ component, mode, isSelected = false, onToggle, dependencyInfo, onRemoveDependency, }: MigrationComponentItemProps) { const getSubcategoryColor = (subcategory: string) => { // Always return neutral colors for all subcategory badges return "bg-neutral-300 text-neutral-800" } const handleToggle = () => { if (mode === "selection" && onToggle) { onToggle(component.id) } } const [isDependencyExpanded, setIsDependencyExpanded] = useState(false) // Get dependencies for this component (not dependencies OF this component) const componentDependencies = getComponentDependencies(component.id) const hasRequiredDependencies = componentDependencies.required.length > 0 return (
{/ Selection/Review Icon /} {/ Component Content /}

{mode === "selection" ? ( {component.name} ) : (
{component.name}
)} {component.subcategory && ( {component.subcategory} )} {/ Required Dependency Badge - Only in review mode /} {mode === "review" && dependencyInfo?.isRequiredDependency && ( Required Dependency )} {/ Remove button for auto-included dependencies /} {mode === "review" && onRemoveDependency && ( )}

{component.description}
{/ Expandable Dependency Section - Only show for selected components that HAVE required dependencies /} {mode === "review" && isSelected && hasRequiredDependencies && !dependencyInfo?.isRequiredDependency && (
{isDependencyExpanded && (

{componentDependencies.required.map((dep) => (
• {dep.name}
))}

)}
)}

) } [V0_FILE]typescriptreact:file="src/components/ui/popover.tsx" "use client" import as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "src": "1.1.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="src/components/ui/command.tsx" isQuickEdit="true" "use client" import * as React from "react" import type { DialogProps } from "@radix-ui/react-dialog" import { Command as CommandPrimitive } from "cmdk" import { Search } from "lucide-react" import { cn } from "@/lib/utils" import { Dialog, DialogContent } from "@/components/ui/dialog" const Command = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Command.displayName = CommandPrimitive.displayName interface CommandDialogProps extends DialogProps {} const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( {children} ) } const CommandInput = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => (

)) CommandInput.displayName = CommandPrimitive.Input.displayName const CommandList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandList.displayName = CommandPrimitive.List.displayName const CommandEmpty = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >((props, ref) => ) CommandEmpty.displayName = CommandPrimitive.Empty.displayName const CommandGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandGroup.displayName = CommandPrimitive.Group.displayName const CommandSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandSeparator.displayName = CommandPrimitive.Separator.displayName const CommandItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandItem.displayName = CommandPrimitive.Item.displayName const CommandShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } CommandShortcut.displayName = "CommandShortcut" export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } [V0_FILE]typescriptreact:file="src/components/ui/combobox.tsx" "use client" import * as React from "react" import { Check, ChevronsUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Input } from "@/components/ui/input" export interface ComboboxOption { value: string label: string } interface ComboboxProps { options: ComboboxOption[] value?: string onValueChange?: (value: string) => void placeholder?: string searchPlaceholder?: string emptyText?: string className?: string disabled?: boolean } export function Combobox({ options, value, onValueChange, placeholder = "Select...", searchPlaceholder = "Search...", emptyText = "No results found.", className, disabled, }: ComboboxProps) { const [open, setOpen] = React.useState(false) const [searchQuery, setSearchQuery] = React.useState("") const selectedOption = options.find((option) => option.value === value) const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())) const handleSelect = (selectedValue: string) => { console.log("[v0] Combobox item clicked:", selectedValue) onValueChange?.(selectedValue) setOpen(false) setSearchQuery("") } return (

setSearchQuery(e.target.value)} className="h-10 border-0 focus-visible:ring-0 focus-visible:ring-offset-0" />

{filteredOptions.length === 0 ? (
{emptyText}
) : ( filteredOptions.map((option) => { const isSelected = value === option.value return ( ) }) )}

) } [V0_FILE]typescriptreact:file="src/components/ui/tooltip.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="src/components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="src/components/migration/tabs/extensibility-tab.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { MigrationComponentItem } from "../migration-component-item" import { MigrationComponentSkeleton } from "../migration-component-skeleton" import { TabSearchFilter } from "./shared/tab-search-filter" import { CenteredPagination } from "@/components/ui/centered-pagination" interface ExtensibilityTabProps { filteredComponents: any[] selectedComponents: string[] onComponentToggle: (componentId: string) => void searchTerm: string onSearchChange: (term: string) => void onSelectAll: () => void isTabLoading?: boolean } const ITEMS_PER_PAGE = 10 export function ExtensibilityTab({ filteredComponents, selectedComponents, onComponentToggle, searchTerm, onSearchChange, onSelectAll, isTabLoading = false, }: ExtensibilityTabProps) { const [currentPage, setCurrentPage] = useState(1) const sortedComponents = [...filteredComponents].sort((a, b) => a.name.localeCompare(b.name)) const totalItems = sortedComponents.length const totalPages = Math.max(1, Math.ceil(totalItems / ITEMS_PER_PAGE)) const startIndex = (currentPage - 1) * ITEMS_PER_PAGE const endIndex = startIndex + ITEMS_PER_PAGE const currentItems = sortedComponents.slice(startIndex, endIndex) useEffect(() => { setCurrentPage(1) }, [searchTerm]) const allSelected = sortedComponents.length > 0 && sortedComponents.every((component) => selectedComponents.includes(component.id)) const handlePageChange = (page: number) => { setCurrentPage(page) } return ( {isTabLoading ? ( ) : ( <>
{currentItems.map((component) => ( ))}
)} ) } [V0_FILE]typescriptreact:file="src/components/ui/checkbox.tsx" isQuickEdit="true" "use client" import { Label } from "@/components/ui/label" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" interface CheckboxProps extends React.ComponentPropsWithoutRef { label?: string description?: string } const Checkbox = React.forwardRef, CheckboxProps>( ({ className, label, description, id, ...props }, ref) => (
{label && (
{label} {description && ( {description} )}
)}
), ) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescript:file="src/interfaces/schema-comparison.ts" isQuickEdit="true" export interface SchemaObject { name: string displayName: string description: string category: string hasChanges: boolean changeType: "added" | "modified" | "removed" | "unchanged" fieldsWithChanges: SchemaField[] } export interface SchemaField { name: string changeType: "added" | "modified" | "removed" oldValue?: string newValue?: string } export interface SchemaComparisonReport { sourceOrg: string targetOrg: string comparisonDate: Date totalObjects: number objectsWithChanges: number addedObjects: number modifiedObjects: number removedObjects: number objects: SchemaObject[] } [V0_FILE]typescript:file="src/data/schema-comparison-mock.ts" isQuickEdit="true" import type { SchemaObject, SchemaComparisonReport } from "@/interfaces/schema-comparison" export const mockSchemaComparisonData: SchemaObject[] = [ { name: "ZuvaProvisionDocumentList", displayName: "Zuva Provision Document List", description: "Manages document provisions and metadata for IDD document processing", category: "IDD", hasChanges: true, changeType: "modified", fieldsWithChanges: [ { name: "DocumentType", changeType: "modified", oldValue: "String(50)", newValue: "String(100)" }, { name: "Status", changeType: "added", newValue: "Picklist(Active,Inactive,Draft)" }, { name: "LegacyField", changeType: "removed", oldValue: "Number" }, ], }, { name: "ContractClause", displayName: "Contract Clause", description: "Stores and manages contract clause definitions and variations", category: "CLM", hasChanges: true, changeType: "modified", fieldsWithChanges: [ { name: "ClauseText", changeType: "modified", oldValue: "LongText(5000)", newValue: "LongText(10000)" }, { name: "IsActive", changeType: "added", newValue: "Boolean" }, { name: "Priority", changeType: "modified", oldValue: "Number(1,0)", newValue: "Number(2,0)" }, ], }, { name: "ProductConfiguration", displayName: "Product Configuration", description: "Defines product configuration rules and settings for CPQ", category: "CPQ", hasChanges: true, changeType: "added", fieldsWithChanges: [ { name: "ConfigurationName", changeType: "added", newValue: "String(255)" }, { name: "IsDefault", changeType: "added", newValue: "Boolean" }, { name: "CreatedDate", changeType: "added", newValue: "DateTime" }, { name: "ConfigurationData", changeType: "added", newValue: "LongText" }, ], }, { name: "BillingSchedule", displayName: "Billing Schedule", description: "Tracks billing schedules and payment frequency for customer accounts", category: "Billing", hasChanges: true, changeType: "modified", fieldsWithChanges: [ { name: "BillingFrequency", changeType: "modified", oldValue: "Picklist(Monthly,Quarterly)", newValue: "Picklist(Monthly,Quarterly,Annually)", }, { name: "NextBillingDate", changeType: "added", newValue: "Date" }, ], }, { name: "AIInsightData", displayName: "AI Insight Data", description: "Captures AI-generated insights and confidence scores for analysis", category: "AI Platform", hasChanges: true, changeType: "modified", fieldsWithChanges: [ { name: "ConfidenceScore", changeType: "modified", oldValue: "Number(3,2)", newValue: "Number(5,4)" }, { name: "ModelVersion", changeType: "added", newValue: "String(50)" }, { name: "ProcessingTime", changeType: "added", newValue: "Number" }, ], }, { name: "DocumentTemplate", displayName: "Document Template", description: "Stores document templates for automated document generation", category: "Document Automation", hasChanges: true, changeType: "modified", fieldsWithChanges: [ { name: "TemplateFormat", changeType: "modified", oldValue: "Picklist(PDF,Word)", newValue: "Picklist(PDF,Word,Excel,PowerPoint)", }, { name: "IsVersioned", changeType: "added", newValue: "Boolean" }, ], }, { name: "UserPermissionSet", displayName: "User Permission Set", description: "Defines user access permissions and security levels", category: "Platform", hasChanges: true, changeType: "modified", fieldsWithChanges: [ { name: "PermissionLevel", changeType: "modified", oldValue: "Picklist(Read,Write)", newValue: "Picklist(Read,Write,Admin,SuperAdmin)", }, ], }, { name: "CustomerAccount", displayName: "Customer Account", description: "Manages customer account information and relationships", category: "CRM", hasChanges: true, changeType: "modified", fieldsWithChanges: [ { name: "AccountTier", changeType: "added", newValue: "Picklist(Bronze,Silver,Gold,Platinum)" }, { name: "LastActivityDate", changeType: "modified", oldValue: "Date", newValue: "DateTime" }, ], }, { name: "LegacyDataObject", displayName: "Legacy Data Object", description: "Deprecated object for legacy data migration", category: "Platform", hasChanges: true, changeType: "removed", fieldsWithChanges: [ { name: "LegacyId", changeType: "removed", oldValue: "String(18)" }, { name: "LegacyData", changeType: "removed", oldValue: "LongText" }, ], }, ] export function generateSchemaComparisonReport(sourceOrg: string, targetOrg: string): SchemaComparisonReport { const objectsWithChanges = mockSchemaComparisonData.filter((obj) => obj.hasChanges) const addedObjects = mockSchemaComparisonData.filter((obj) => obj.changeType === "added") const modifiedObjects = mockSchemaComparisonData.filter((obj) => obj.changeType === "modified") const removedObjects = mockSchemaComparisonData.filter((obj) => obj.changeType === "removed") return { sourceOrg, targetOrg, comparisonDate: new Date(), totalObjects: mockSchemaComparisonData.length, objectsWithChanges: objectsWithChanges.length, addedObjects: addedObjects.length, modifiedObjects: modifiedObjects.length, removedObjects: removedObjects.length, objects: mockSchemaComparisonData, } } export const schemaCategories = [ { id: "all", name: "All Categories", count: mockSchemaComparisonData.length }, { id: "IDD", name: "IDD", count: mockSchemaComparisonData.filter((obj) => obj.category === "IDD").length }, { id: "CLM", name: "CLM", count: mockSchemaComparisonData.filter((obj) => obj.category === "CLM").length }, { id: "CPQ", name: "CPQ", count: mockSchemaComparisonData.filter((obj) => obj.category === "CPQ").length }, { id: "Billing", name: "Billing", count: mockSchemaComparisonData.filter((obj) => obj.category === "Billing").length, }, { id: "AI Platform", name: "AI Platform", count: mockSchemaComparisonData.filter((obj) => obj.category === "AI Platform").length, }, { id: "Document Automation", name: "Document Automation", count: mockSchemaComparisonData.filter((obj) => obj.category === "Document Automation").length, }, { id: "Platform", name: "Platform", count: mockSchemaComparisonData.filter((obj) => obj.category === "Platform").length, }, { id: "CRM", name: "CRM", count: mockSchemaComparisonData.filter((obj) => obj.category === "CRM").length }, ] [V0_FILE]typescript:file="src/interfaces/configuration-comparison.ts" isQuickEdit="true" export interface ConfigurationObject { name: string displayName: string description: string category: string configurationType: string hasChanges: boolean changeType: "added" | "modified" | "removed" | "unchanged" settingsWithChanges: ConfigurationSetting[] } export interface ConfigurationSetting { name: string changeType: "added" | "modified" | "removed" oldValue?: string newValue?: string } export interface ConfigurationComparisonReport { sourceOrg: string targetOrg: string comparisonDate: Date totalConfigurations: number configurationsWithChanges: number addedConfigurations: number modifiedConfigurations: number removedConfigurations: number configurations: ConfigurationObject[] } [V0_FILE]typescript:file="src/data/configuration-comparison-mock.ts" isQuickEdit="true" import type { ConfigurationObject, ConfigurationComparisonReport } from "@/interfaces/configuration-comparison" export const mockConfigurationComparisonData: ConfigurationObject[] = [ { name: "EmailNotificationSettings", displayName: "Email Notification Settings", description: "Configure email notification preferences and delivery settings", category: "Notifications", configurationType: "System Configuration", hasChanges: true, changeType: "modified", settingsWithChanges: [ { name: "EnableEmailNotifications", changeType: "modified", oldValue: "false", newValue: "true" }, { name: "NotificationFrequency", changeType: "modified", oldValue: "Daily", newValue: "Immediate" }, { name: "MaxRecipientsPerEmail", changeType: "added", newValue: "50" }, ], }, { name: "ApprovalWorkflowConfig", displayName: "Approval Workflow Configuration", description: "Define approval rules and workflow automation settings", category: "Workflow", configurationType: "Business Process", hasChanges: true, changeType: "modified", settingsWithChanges: [ { name: "RequireManagerApproval", changeType: "modified", oldValue: "true", newValue: "false" }, { name: "ApprovalThreshold", changeType: "modified", oldValue: "10000", newValue: "25000" }, { name: "EscalationTimeoutHours", changeType: "added", newValue: "48" }, ], }, { name: "DataRetentionPolicy", displayName: "Data Retention Policy", description: "Set data retention periods and archival policies for compliance", category: "Compliance", configurationType: "Security & Compliance", hasChanges: true, changeType: "added", settingsWithChanges: [ { name: "RetentionPeriodDays", changeType: "added", newValue: "2555" }, { name: "AutoArchiveEnabled", changeType: "added", newValue: "true" }, { name: "DeleteAfterArchive", changeType: "added", newValue: "false" }, ], }, { name: "UserSessionTimeout", displayName: "User Session Timeout", description: "Configure user session timeout and security settings", category: "Security", configurationType: "Security & Compliance", hasChanges: true, changeType: "modified", settingsWithChanges: [ { name: "TimeoutMinutes", changeType: "modified", oldValue: "30", newValue: "60" }, { name: "ShowWarningBeforeTimeout", changeType: "added", newValue: "true" }, ], }, { name: "DocumentGenerationSettings", displayName: "Document Generation Settings", description: "Control document output format and generation options", category: "Document Automation", configurationType: "Feature Configuration", hasChanges: true, changeType: "modified", settingsWithChanges: [ { name: "DefaultOutputFormat", changeType: "modified", oldValue: "PDF", newValue: "DOCX" }, { name: "EnableWatermark", changeType: "added", newValue: "true" }, { name: "CompressionLevel", changeType: "modified", oldValue: "Medium", newValue: "High" }, ], }, { name: "PricingCalculationRules", displayName: "Pricing Calculation Rules", description: "Define pricing calculation logic and discount rules", category: "CPQ", configurationType: "Business Process", hasChanges: true, changeType: "modified", settingsWithChanges: [ { name: "ApplyVolumeDiscounts", changeType: "modified", oldValue: "false", newValue: "true" }, { name: "RoundingPrecision", changeType: "modified", oldValue: "2", newValue: "4" }, ], }, { name: "LegacyIntegrationConfig", displayName: "Legacy Integration Configuration", description: "Legacy system integration endpoints and authentication", category: "Integration", configurationType: "System Configuration", hasChanges: true, changeType: "removed", settingsWithChanges: [ { name: "LegacyEndpoint", changeType: "removed", oldValue: "https://legacy.api.example.com" }, { name: "LegacyAuthToken", changeType: "removed", oldValue: "***" }, ], }, { name: "AIModelSettings", displayName: "AI Model Settings", description: "Configure AI model version and confidence threshold settings", category: "AI Platform", configurationType: "Feature Configuration", hasChanges: true, changeType: "modified", settingsWithChanges: [ { name: "ModelVersion", changeType: "modified", oldValue: "v1.2", newValue: "v2.0" }, { name: "ConfidenceThreshold", changeType: "modified", oldValue: "0.75", newValue: "0.85" }, { name: "EnableAutoRetraining", changeType: "added", newValue: "true" }, ], }, ] export function generateConfigurationComparisonReport( sourceOrg: string, targetOrg: string, ): ConfigurationComparisonReport { const configurationsWithChanges = mockConfigurationComparisonData.filter((config) => config.hasChanges) const addedConfigurations = mockConfigurationComparisonData.filter((config) => config.changeType === "added") const modifiedConfigurations = mockConfigurationComparisonData.filter((config) => config.changeType === "modified") const removedConfigurations = mockConfigurationComparisonData.filter((config) => config.changeType === "removed") return { sourceOrg, targetOrg, comparisonDate: new Date(), totalConfigurations: mockConfigurationComparisonData.length, configurationsWithChanges: configurationsWithChanges.length, addedConfigurations: addedConfigurations.length, modifiedConfigurations: modifiedConfigurations.length, removedConfigurations: removedConfigurations.length, configurations: mockConfigurationComparisonData, } } export const configurationCategories = [ { id: "all", name: "All Categories", count: mockConfigurationComparisonData.length, }, { id: "Notifications", name: "Notifications", count: mockConfigurationComparisonData.filter((config) => config.category === "Notifications").length, }, { id: "Workflow", name: "Workflow", count: mockConfigurationComparisonData.filter((config) => config.category === "Workflow").length, }, { id: "Compliance", name: "Compliance", count: mockConfigurationComparisonData.filter((config) => config.category === "Compliance").length, }, { id: "Security", name: "Security", count: mockConfigurationComparisonData.filter((config) => config.category === "Security").length, }, { id: "Document Automation", name: "Document Automation", count: mockConfigurationComparisonData.filter((config) => config.category === "Document Automation").length, }, { id: "CPQ", name: "CPQ", count: mockConfigurationComparisonData.filter((config) => config.category === "CPQ").length, }, { id: "Integration", name: "Integration", count: mockConfigurationComparisonData.filter((config) => config.category === "Integration").length, }, { id: "AI Platform", name: "AI Platform", count: mockConfigurationComparisonData.filter((config) => config.category === "AI Platform").length, }, ] [V0_FILE]typescript:file="src/data/migration-api-mock-data.ts" isQuickEdit="true" // Mock API Response Structure export interface ApiResponse { org_id: string nodes: Array<{ type: | "Schema" | "Data" | "Configuration" | "Code" | "Image" | "Document" | "Workflows" | "Translations" | "Dashboards" objects?: Array<{ name: string; description?: string }> categories?: Array<{ category: string objects: Array<{ id: string; name: string; description: string }> }> configurations?: Array<{ name: string; description?: string }> children?: Array<{ name: string; description?: string }> }> } // Mock API Response export const mockApiResponse: ApiResponse = { org_id: "org-12345", nodes: [ { type: "Schema", objects: [ { name: "Schema", description: "Database schema definitions, object structures, field configurations, and relationship mappings", }, ], }, { type: "Data", categories: [ { category: "Platform", objects: [ { id: "user", name: "User", description: "User account information, authentication data, and profile settings", }, { id: "role", name: "Role", description: "User roles and permission assignments for access control" }, { id: "permission", name: "Permission", description: "Access control permissions and security restrictions", }, { id: "profile", name: "Profile", description: "User profile configurations and system preferences" }, { id: "group", name: "Group", description: "User groups and organizational structures" }, { id: "queue", name: "Queue", description: "Work queues and task assignment mechanisms" }, { id: "territory", name: "Territory", description: "Sales territories and geographic assignments" }, { id: "holiday", name: "Holiday", description: "Holiday calendars and business day configurations" }, { id: "business-hours", name: "BusinessHours", description: "Business hours and operational time settings", }, { id: "organization", name: "Organization", description: "Organization-wide settings and configurations" }, { id: "division", name: "Division", description: "Business divisions and organizational units" }, { id: "currency", name: "Currency", description: "Currency definitions and exchange rate settings" }, { id: "fiscal-year", name: "FiscalYear", description: "Fiscal year definitions and financial periods" }, { id: "custom-setting", name: "CustomSetting", description: "Custom application settings and configurations", }, { id: "custom-metadata", name: "CustomMetadata", description: "Custom metadata types and field definitions", }, { id: "static-resource", name: "StaticResource", description: "Static files, images, and web resources" }, { id: "remote-site", name: "RemoteSite", description: "Remote site settings for external integrations" }, { id: "named-credential", name: "NamedCredential", description: "Named credentials for secure API authentication", }, { id: "external-data-source", name: "ExternalDataSource", description: "External data source connections and mappings", }, { id: "custom-application", name: "CustomApplication", description: "Custom application definitions and navigation", }, { id: "connected-app", name: "ConnectedApp", description: "Connected applications and OAuth configurations", }, { id: "auth-provider", name: "AuthProvider", description: "Authentication providers and SSO configurations", }, { id: "single-sign-on-setting", name: "SingleSignOnSetting", description: "Single sign-on settings and SAML configurations", }, { id: "login-history", name: "LoginHistory", description: "User login history and authentication logs" }, { id: "setup-audit-trail", name: "SetupAuditTrail", description: "System setup changes and configuration audit trail", }, { id: "data-export", name: "DataExport", description: "Data export requests and backup configurations" }, { id: "sandbox", name: "Sandbox", description: "Sandbox environments and development configurations" }, { id: "change-set", name: "ChangeSet", description: "Change sets for deployment and migration tracking" }, { id: "deployment-status", name: "DeploymentStatus", description: "Deployment status and release management", }, { id: "apex-class", name: "ApexClass", description: "Custom Apex classes and business logic implementations", }, { id: "apex-trigger", name: "ApexTrigger", description: "Database triggers and automated business processes", }, { id: "visualforce-page", name: "VisualforcePage", description: "Custom user interface pages and components", }, { id: "visualforce-component", name: "VisualforceComponent", description: "Reusable UI components and page elements", }, { id: "lightning-component", name: "LightningComponent", description: "Lightning web components and modern UI elements", }, { id: "flow", name: "Flow", description: "Process automation flows and business workflows" }, { id: "process-builder", name: "ProcessBuilder", description: "Process builder automations and business rules", }, { id: "workflow-rule", name: "WorkflowRule", description: "Workflow rules and automated field updates" }, { id: "validation-rule", name: "ValidationRule", description: "Data validation rules and business constraints", }, { id: "field-update", name: "FieldUpdate", description: "Automated field updates and data modifications" }, { id: "email-alert", name: "EmailAlert", description: "Email alerts and notification configurations" }, { id: "task", name: "Task", description: "Task records and activity management" }, { id: "event", name: "Event", description: "Calendar events and meeting records" }, { id: "email-template", name: "EmailTemplate", description: "Email templates and communication formats" }, { id: "letter-template", name: "LetterTemplate", description: "Letter templates and document formats" }, { id: "report-type", name: "ReportType", description: "Custom report types and data relationships" }, { id: "report", name: "Report", description: "Business reports and analytics configurations" }, { id: "dashboard", name: "Dashboard", description: "Executive dashboards and data visualizations" }, { id: "folder", name: "Folder", description: "Document folders and organizational structures" }, { id: "document", name: "Document", description: "Document storage and file management" }, { id: "content-version", name: "ContentVersion", description: "Document versions and revision history" }, { id: "content-document", name: "ContentDocument", description: "Content documents and file metadata" }, { id: "attachment", name: "Attachment", description: "File attachments and binary data storage" }, { id: "note", name: "Note", description: "Notes and text-based annotations" }, { id: "tag", name: "Tag", description: "Content tags and categorization labels" }, { id: "feed-item", name: "FeedItem", description: "Social feed items and activity streams" }, { id: "feed-comment", name: "FeedComment", description: "Comments on feed items and social interactions" }, { id: "entity-subscription", name: "EntitySubscription", description: "Record subscriptions and follow relationships", }, { id: "user-feed", name: "UserFeed", description: "User activity feeds and social updates" }, { id: "collaboration-group", name: "CollaborationGroup", description: "Collaboration groups and team workspaces", }, { id: "collaboration-group-member", name: "CollaborationGroupMember", description: "Group membership and collaboration access", }, { id: "idea", name: "Idea", description: "Innovation ideas and suggestion management" }, { id: "idea-comment", name: "IdeaComment", description: "Comments on ideas and feedback tracking" }, { id: "knowledge", name: "Knowledge", description: "Knowledge base articles and information management" }, { id: "knowledge-article", name: "KnowledgeArticle", description: "Knowledge articles and documentation content", }, { id: "solution", name: "Solution", description: "Solution records and problem resolution tracking" }, { id: "case", name: "Case", description: "Customer service cases and support ticket management" }, { id: "case-comment", name: "CaseComment", description: "Case comments and support interaction history" }, { id: "case-history", name: "CaseHistory", description: "Case history and status change tracking" }, { id: "social-post", name: "SocialPost", description: "Social media posts and external content integration", }, { id: "social-persona", name: "SocialPersona", description: "Social media personas and identity management", }, { id: "live-chat-transcript", name: "LiveChatTranscript", description: "Live chat transcripts and customer conversations", }, { id: "live-chat-visitor", name: "LiveChatVisitor", description: "Live chat visitor information and session data", }, { id: "macro-instruction", name: "MacroInstruction", description: "Macro instructions and automated task sequences", }, { id: "quick-text", name: "QuickText", description: "Quick text snippets and response templates" }, { id: "email-message", name: "EmailMessage", description: "Email messages and communication records" }, { id: "list-email", name: "ListEmail", description: "Mass email campaigns and list communications" }, { id: "campaign", name: "Campaign", description: "Marketing campaigns and promotional activities" }, { id: "campaign-member", name: "CampaignMember", description: "Campaign membership and participant tracking", }, ], }, { category: "CRM", objects: [ { id: "account", name: "Account", description: "Customer and partner account records with business relationships", }, { id: "contact", name: "Contact", description: "Individual contact records and personal information" }, { id: "lead", name: "Lead", description: "Sales leads and prospect management" }, { id: "opportunity", name: "Opportunity", description: "Sales opportunities and deal tracking" }, { id: "opportunity-line-item", name: "OpportunityLineItem", description: "Individual products and services within opportunities", }, { id: "product2", name: "Product2", description: "Product catalog and inventory management" }, { id: "pricebook-entry", name: "PricebookEntry", description: "Product pricing and pricebook configurations", }, { id: "pricebook2", name: "Pricebook2", description: "Price books and pricing strategy management" }, { id: "quote", name: "Quote", description: "Sales quotes and proposal generation" }, { id: "quote-line-item", name: "QuoteLineItem", description: "Individual line items within sales quotes" }, { id: "contract", name: "Contract", description: "Customer contracts and agreement management" }, { id: "order", name: "Order", description: "Sales orders and fulfillment tracking" }, { id: "order-item", name: "OrderItem", description: "Individual items within sales orders" }, { id: "asset", name: "Asset", description: "Customer assets and installed product tracking" }, { id: "account-contact-relation", name: "AccountContactRelation", description: "Relationships between accounts and contacts", }, { id: "account-partner", name: "AccountPartner", description: "Partner relationships and channel management", }, { id: "partner", name: "Partner", description: "Business partners and channel partner information" }, { id: "opportunity-partner", name: "OpportunityPartner", description: "Partner involvement in sales opportunities", }, { id: "opportunity-competitor", name: "OpportunityCompetitor", description: "Competitor tracking within opportunities", }, { id: "competitor", name: "Competitor", description: "Competitor information and market intelligence" }, { id: "lead-history", name: "LeadHistory", description: "Lead status changes and conversion tracking" }, { id: "account-history", name: "AccountHistory", description: "Account record changes and audit trail" }, { id: "contact-history", name: "ContactHistory", description: "Contact record changes and interaction history", }, { id: "opportunity-history", name: "OpportunityHistory", description: "Opportunity stage changes and sales progression", }, { id: "opportunity-stage", name: "OpportunityStage", description: "Sales stage definitions and pipeline management", }, { id: "forecasting-quota", name: "ForecastingQuota", description: "Sales quotas and forecasting targets" }, { id: "territory2", name: "Territory2", description: "Advanced territory management and assignments" }, { id: "territory2-model", name: "Territory2Model", description: "Territory model configurations and hierarchies", }, { id: "territory2-type", name: "Territory2Type", description: "Territory types and classification systems", }, { id: "user-territory2-association", name: "UserTerritory2Association", description: "User assignments to territories", }, { id: "account-territory2-association", name: "AccountTerritory2Association", description: "Account assignments to territories", }, { id: "opportunity-territory2-association", name: "OpportunityTerritory2Association", description: "Opportunity territory assignments", }, { id: "territory2-rule", name: "Territory2Rule", description: "Territory assignment rules and automation" }, { id: "territory2-rule-item", name: "Territory2RuleItem", description: "Individual rule items within territory rules", }, { id: "object-territory2-association", name: "ObjectTerritory2Association", description: "Object-based territory associations", }, { id: "account-share", name: "AccountShare", description: "Account sharing rules and access permissions" }, { id: "contact-share", name: "ContactShare", description: "Contact sharing rules and visibility settings" }, { id: "lead-share", name: "LeadShare", description: "Lead sharing rules and access control" }, { id: "opportunity-share", name: "OpportunityShare", description: "Opportunity sharing rules and team access", }, { id: "campaign-share", name: "CampaignShare", description: "Campaign sharing rules and collaboration access", }, { id: "asset-share", name: "AssetShare", description: "Asset sharing rules and visibility permissions" }, { id: "contract-share", name: "ContractShare", description: "Contract sharing rules and access management", }, { id: "order-share", name: "OrderShare", description: "Order sharing rules and fulfillment access" }, { id: "quote-share", name: "QuoteShare", description: "Quote sharing rules and proposal collaboration" }, { id: "product2-share", name: "Product2Share", description: "Product sharing rules and catalog access" }, { id: "pricebook2-share", name: "Pricebook2Share", description: "Pricebook sharing rules and pricing access", }, { id: "territory2-share", name: "Territory2Share", description: "Territory sharing rules and management access", }, { id: "partner-share", name: "PartnerShare", description: "Partner sharing rules and channel access" }, ], }, { category: "CPQ", objects: [ { id: "sbqq-quote", name: "SBQQQuotec", description: "CPQ quotes with advanced pricing and configuration", }, { id: "sbqq-quote-line", name: "SBQQQuoteLinec", description: "Individual line items within CPQ quotes", }, { id: "sbqq-product", name: "SBQQProductc", description: "CPQ product catalog with configuration options", }, { id: "sbqq-price-book", name: "SBQQPriceBookc", description: "CPQ price books and pricing strategies", }, { id: "sbqq-price-rule", name: "SBQQPriceRulec", description: "Dynamic pricing rules and calculations", }, { id: "sbqq-product-rule", name: "SBQQProductRulec", description: "Product selection and configuration rules", }, { id: "sbqq-configuration-attribute", name: "SBQQConfigurationAttributec", description: "Product configuration attributes and options", }, { id: "sbqq-product-attribute", name: "SBQQProductAttributec", description: "Product-specific attributes and properties", }, { id: "sbqq-attribute-set", name: "SBQQAttributeSetc", description: "Grouped sets of product attributes", }, { id: "sbqq-product-option", name: "SBQQProductOptionc", description: "Product options and add-on configurations", }, { id: "sbqq-product-feature", name: "SBQQProductFeaturec", description: "Product features and capability definitions", }, { id: "sbqq-option-constraint", name: "SBQQOptionConstraintc", description: "Constraints on product option selections", }, { id: "sbqq-constraint-rule", name: "SBQQConstraintRulec", description: "Business rules for product constraints", }, { id: "sbqq-summary-variable", name: "SBQQSummaryVariablec", description: "Summary variables for quote calculations", }, { id: "sbqq-quote-process", name: "SBQQQuoteProcessc", description: "Quote approval and workflow processes", }, { id: "sbqq-process-input", name: "SBQQProcessInputc", description: "Input parameters for quote processes", }, { id: "sbqq-quote-template", name: "SBQQQuoteTemplatec", description: "Quote document templates and formatting", }, { id: "sbqq-template-content", name: "SBQQTemplateContentc", description: "Content sections within quote templates", }, { id: "sbqq-quote-document", name: "SBQQQuoteDocumentc", description: "Generated quote documents and proposals", }, { id: "sbqq-related-content", name: "SBQQRelatedContentc", description: "Related content and attachments for quotes", }, { id: "sbqq-dimension", name: "SBQQDimensionc", description: "Pricing dimensions and measurement units", }, { id: "sbqq-block-price", name: "SBQQBlockPricec", description: "Block pricing tiers and volume discounts", }, { id: "sbqq-discount-schedule", name: "SBQQDiscountSchedulec", description: "Discount schedules and pricing tiers", }, { id: "sbqq-discount-tier", name: "SBQQDiscountTierc", description: "Individual discount tiers and thresholds", }, { id: "sbqq-subscription", name: "SBQQSubscriptionc", description: "Subscription products and recurring billing", }, { id: "sbqq-subscribed-asset", name: "SBQQSubscribedAssetc", description: "Assets under subscription management", }, { id: "sbqq-usage", name: "SBQQUsagec", description: "Usage tracking for consumption-based pricing" }, { id: "sbqq-usage-rate", name: "SBQQUsageRatec", description: "Usage-based pricing rates and calculations", }, { id: "sbqq-rate-card", name: "SBQQRateCardc", description: "Rate cards for usage-based pricing models", }, { id: "sbqq-import-column", name: "SBQQImportColumnc", description: "Data import column mappings and configurations", }, { id: "sbqq-import-format", name: "SBQQImportFormatc", description: "Data import formats and templates", }, { id: "sbqq-web-quote", name: "SBQQWebQuotec", description: "Web-based quote generation and self-service", }, ], }, { category: "CLM", objects: [ { id: "apts-agreement", name: "Apttus__APTS_Agreementc", description: "Contract agreements and legal document management", }, { id: "apts-template", name: "ApttusAPTS_Templatec", description: "Contract templates and document frameworks", }, { id: "apts-clause-library", name: "ApttusAPTS_Clause_Libraryc", description: "Legal clause library and content management", }, { id: "apts-terms-conditions", name: "ApttusAPTS_Terms_Conditionsc", description: "Terms and conditions definitions", }, { id: "apts-approval-request", name: "ApttusAPTS_Approval_Requestc", description: "Contract approval requests and workflows", }, { id: "apts-approval-rule", name: "ApttusAPTS_Approval_Rulec", description: "Approval rules and routing logic", }, { id: "apts-contract-type", name: "ApttusAPTS_Contract_Typec", description: "Contract type classifications and categories", }, { id: "apts-party", name: "ApttusAPTS_Partyc", description: "Contract parties and signatory information", }, { id: "apts-related-agreement", name: "ApttusAPTS_Related_Agreementc", description: "Related agreements and contract relationships", }, { id: "apts-amendment", name: "ApttusAPTS_Amendmentc", description: "Contract amendments and modifications", }, { id: "apts-renewal", name: "ApttusAPTS_Renewalc", description: "Contract renewals and extension management", }, { id: "apts-obligation", name: "ApttusAPTS_Obligationc", description: "Contract obligations and compliance tracking", }, { id: "apts-milestone", name: "ApttusAPTS_Milestonec", description: "Contract milestones and deliverable tracking", }, { id: "apts-contract-request", name: "ApttusAPTS_Contract_Requestc", description: "Contract creation requests and intake", }, { id: "apts-redline", name: "ApttusAPTS_Redlinec", description: "Contract redlines and negotiation tracking", }, { id: "apts-contract-workspace", name: "ApttusAPTS_Contract_Workspacec", description: "Collaborative contract workspaces", }, { id: "apts-contract-document", name: "ApttusAPTS_Contract_Documentc", description: "Contract documents and file management", }, { id: "apts-template-clause", name: "ApttusAPTS_Template_Clausec", description: "Template clauses and reusable content", }, { id: "apts-master-agreement", name: "ApttusAPTS_Master_Agreementc", description: "Master service agreements and frameworks", }, { id: "apts-service-agreement", name: "ApttusAPTS_Service_Agreementc", description: "Service agreements and SLA management", }, { id: "apts-sow", name: "ApttusAPTS_SOWc", description: "Statements of work and project contracts" }, { id: "apts-nda", name: "ApttusAPTS_NDAc", description: "Non-disclosure agreements and confidentiality", }, { id: "apts-purchase-agreement", name: "ApttusAPTS_Purchase_Agreementc", description: "Purchase agreements and procurement contracts", }, { id: "apts-license-agreement", name: "ApttusAPTS_License_Agreementc", description: "Software and IP license agreements", }, { id: "apts-support-agreement", name: "ApttusAPTS_Support_Agreementc", description: "Support and maintenance agreements", }, { id: "apts-partnership-agreement", name: "ApttusAPTS_Partnership_Agreementc", description: "Partnership and collaboration agreements", }, { id: "apts-vendor-agreement", name: "ApttusAPTS_Vendor_Agreementc", description: "Vendor agreements and supplier contracts", }, { id: "apts-employment-agreement", name: "ApttusAPTS_Employment_Agreementc", description: "Employment contracts and HR agreements", }, ], }, { category: "Billing", objects: [ { id: "blng-invoice", name: "blngInvoicec", description: "Customer invoices and billing documents" }, { id: "blng-invoice-line", name: "blngInvoiceLinec", description: "Individual line items within invoices", }, { id: "blng-billing-rule", name: "blngBillingRulec", description: "Billing rules and automation logic", }, { id: "blng-revenue-recognition-rule", name: "blngRevenueRecognitionRulec", description: "Revenue recognition rules and accounting standards", }, { id: "blng-tax-rule", name: "blngTaxRulec", description: "Tax calculation rules and compliance" }, { id: "blng-payment-method", name: "blngPaymentMethodc", description: "Customer payment methods and preferences", }, { id: "blng-payment", name: "blngPaymentc", description: "Payment records and transaction history" }, { id: "blng-refund", name: "blngRefundc", description: "Refund processing and credit management" }, { id: "blng-credit-note", name: "blngCreditNotec", description: "Credit notes and billing adjustments", }, { id: "blng-credit-note-line", name: "blngCreditNoteLinec", description: "Individual line items within credit notes", }, { id: "blng-debit-note", name: "blngDebitNotec", description: "Debit notes and additional charges" }, { id: "blng-debit-note-line", name: "blngDebitNoteLinec", description: "Individual line items within debit notes", }, { id: "blng-billing-schedule", name: "blngBillingSchedulec", description: "Billing schedules and recurring charges", }, { id: "blng-revenue-schedule", name: "blngRevenueSchedulec", description: "Revenue recognition schedules", }, { id: "blng-usage", name: "blngUsagec", description: "Usage tracking for consumption billing" }, { id: "blng-usage-summary", name: "blngUsageSummaryc", description: "Usage summaries and aggregated consumption", }, { id: "blng-billing-treatment", name: "blngBillingTreatmentc", description: "Billing treatment rules and configurations", }, { id: "blng-revenue-recognition-treatment", name: "blngRevenueRecognitionTreatmentc", description: "Revenue recognition treatment settings", }, { id: "blng-tax-treatment", name: "blngTaxTreatmentc", description: "Tax treatment rules and exemptions", }, { id: "blng-finance-book", name: "blngFinanceBookc", description: "Financial books and accounting periods", }, { id: "blng-finance-period", name: "blngFinancePeriodc", description: "Financial periods and reporting cycles", }, { id: "blng-gl-account", name: "blngGLAccountc", description: "General ledger accounts and chart of accounts", }, { id: "blng-gl-rule", name: "blngGLRulec", description: "General ledger posting rules" }, { id: "blng-billing-gl-treatment", name: "blngBillingGLTreatmentc", description: "Billing GL treatment and accounting integration", }, ], }, { category: "Approvals", objects: [ { id: "sbaa-approval", name: "sbaaApprovalc", description: "Approval records and decision tracking" }, { id: "sbaa-approval-rule", name: "sbaaApprovalRulec", description: "Approval rules and routing logic", }, { id: "sbaa-approval-condition", name: "sbaaApprovalConditionc", description: "Conditions that trigger approval processes", }, { id: "sbaa-approval-variable", name: "sbaaApprovalVariablec", description: "Variables used in approval calculations", }, { id: "sbaa-approval-chain", name: "sbaaApprovalChainc", description: "Sequential approval chains and workflows", }, { id: "sbaa-approver", name: "sbaaApproverc", description: "Approver assignments and delegations" }, { id: "sbaa-approval-template", name: "sbaaApprovalTemplatec", description: "Approval process templates and configurations", }, { id: "sbaa-email-template", name: "sbaaEmailTemplatec", description: "Email templates for approval notifications", }, { id: "sbaa-approval-history", name: "sbaaApprovalHistoryc", description: "Historical approval decisions and audit trail", }, { id: "sbaa-approval-comment", name: "sbaaApprovalCommentc", description: "Comments and feedback on approval requests", }, { id: "sbaa-approval-request", name: "sbaaApprovalRequestc", description: "Individual approval requests and submissions", }, { id: "sbaa-approval-step", name: "sbaaApprovalStepc", description: "Individual steps within approval processes", }, { id: "sbaa-approval-group", name: "sbaaApprovalGroupc", description: "Approval groups and team-based decisions", }, { id: "sbaa-approval-group-member", name: "sbaaApprovalGroupMemberc", description: "Members within approval groups", }, { id: "sbaa-approval-matrix", name: "sbaaApprovalMatrixc", description: "Approval matrices and decision frameworks", }, { id: "sbaa-approval-criteria", name: "sbaaApprovalCriteriac", description: "Criteria for approval routing and decisions", }, { id: "sbaa-approval-action", name: "sbaaApprovalActionc", description: "Actions triggered by approval decisions", }, { id: "sbaa-approval-notification", name: "sbaaApprovalNotificationc", description: "Notification settings for approval processes", }, ], }, { category: "AI Platform", objects: [ { id: "ai-application", name: "AIApplication", description: "AI application configurations and settings" }, { id: "ai-application-config", name: "AIApplicationConfig", description: "AI application configuration parameters", }, { id: "ai-insight-value", name: "AIInsightValue", description: "AI-generated insights and predictions" }, { id: "ai-insight-action", name: "AIInsightAction", description: "Recommended actions based on AI insights", }, { id: "ai-insight-feedback", name: "AIInsightFeedback", description: "User feedback on AI insights and recommendations", }, { id: "ai-insight-reason", name: "AIInsightReason", description: "Reasoning and explanations for AI insights", }, { id: "ai-prediction-event", name: "AIPredictionEvent", description: "AI prediction events and model outputs", }, { id: "ai-record-insight", name: "AIRecordInsight", description: "Record-specific AI insights and analysis", }, { id: "ml-data-definition", name: "MLDataDefinition", description: "Machine learning data definitions and schemas", }, { id: "ml-field", name: "MLField", description: "Machine learning field mappings and features" }, { id: "ml-model", name: "MLModel", description: "Machine learning models and algorithms" }, { id: "ml-model-factor", name: "MLModelFactor", description: "Factors and variables in ML models" }, { id: "ml-prediction-definition", name: "MLPredictionDefinition", description: "ML prediction definitions and configurations", }, { id: "einstein-answer-feedback", name: "EinsteinAnswerFeedback", description: "Feedback on Einstein AI answers and responses", }, { id: "einstein-case-classification", name: "EinsteinCaseClassification", description: "AI-powered case classification and routing", }, ], }, { category: "Document Automation", objects: [ { id: "conga-merge-query", name: "APXTConga4Conga_Merge_Queryc", description: "Data queries for document merge operations", }, { id: "conga-template", name: "APXTConga4Conga_Templatec", description: "Document templates for automated generation", }, { id: "conga-email-template", name: "APXTConga4Conga_Email_Templatec", description: "Email templates for automated communications", }, { id: "conga-solution", name: "APXTConga4Conga_Solutionc", description: "Document automation solutions and workflows", }, { id: "conga-batch", name: "APXTConga4Conga_Batchc", description: "Batch document processing configurations", }, { id: "conga-batch-job", name: "APXTConga4Conga_Batch_Jobc", description: "Batch job execution and monitoring", }, { id: "conga-report", name: "APXTConga4Conga_Reportc", description: "Report configurations for document generation", }, { id: "conga-mail-merge", name: "APXTConga4Conga_Mail_Mergec", description: "Mail merge configurations and settings", }, { id: "conga-template-field", name: "APXTConga4Conga_Template_Fieldc", description: "Template field mappings and data bindings", }, { id: "conga-merge-field", name: "APXTConga4Conga_Merge_Fieldc", description: "Merge field definitions and formatting", }, { id: "conga-button-link", name: "APXTConga4Conga_Button_Linkc", description: "Button links for document generation triggers", }, { id: "conga-delivery-option", name: "APXTConga4Conga_Delivery_Option__c", description: "Document delivery options and methods", }, ], }, ], }, { type: "Configuration", configurations: [ { name: "Integration Settings", description: "API endpoints, authentication configurations, and third-party system connections", }, { name: "Global Settings", description: "Organization-wide preferences, default values, and system-level configurations", }, { name: "Security Settings", description: "Password policies, session settings, login restrictions, and security configurations", }, { name: "Email Settings", description: "SMTP configurations, email templates, deliverability settings, and notification preferences", }, { name: "User Interface Settings", description: "Theme configurations, layout settings, custom branding, and user experience preferences", }, { name: "Workflow Settings", description: "Business process configurations, approval workflows, and automation rule settings", }, { name: "Data Management Settings", description: "Data retention policies, backup configurations, and data quality rule settings", }, { name: "Reporting Settings", description: "Dashboard configurations, report scheduling, and analytics preference settings", }, { name: "Mobile Settings", description: "Mobile app configurations, offline sync settings, and mobile-specific preferences", }, { name: "Compliance Settings", description: "Regulatory compliance configurations, audit trail settings, and data governance policies", }, ], }, { type: "Workflows", children: [ { name: "Workflows", description: "Automated business processes and rules including both non-interactive background workflows and interactive user-driven workflows", }, ], }, { type: "Translations", children: [ { name: "Translations", description: "Localization resources, language packs, custom labels, field translations, and multilingual content for supporting international users", }, ], }, { type: "Dashboards", children: [ { name: "Dashboards", description: "Interactive data visualizations, analytics dashboards, custom reports, charts", }, ], }, ], } // Data subcategories with colors for UI export const dataSubcategories = [ { id: "platform", name: "Platform", color: "bg-blue-100 text-blue-800" }, { id: "crm", name: "CRM", color: "bg-green-100 text-green-800" }, { id: "cpq", name: "CPQ", color: "bg-purple-100 text-purple-800" }, { id: "clm", name: "CLM", color: "bg-orange-100 text-orange-800" }, { id: "billing", name: "Billing", color: "bg-red-100 text-red-800" }, { id: "approvals", name: "Approvals", color: "bg-yellow-100 text-yellow-800" }, { id: "ai-platform", name: "AI Platform", color: "bg-indigo-100 text-indigo-800" }, { id: "document-automation", name: "Document Automation", color: "bg-pink-100 text-pink-800" }, ] // Transform API data to UI format export function transformApiDataForUI(apiResponse: ApiResponse) { const components: Array<{ id: string name: string description: string category: string subcategory?: string }> = [] apiResponse.nodes.forEach((node) => { switch (node.type) { case "Schema": if (node.objects) { node.objects.forEach((obj) => { components.push({ id: `schema-${obj.name.toLowerCase().replace(/\s+/g, "-")}`, name: obj.name, description: obj.description || "Schema component", category: "schema", }) }) } break case "Data": if (node.categories) { node.categories.forEach((category) => { category.objects.forEach((obj) => { components.push({ id: obj.id, name: obj.name, description: obj.description, category: "data", subcategory: category.category, }) }) }) } break case "Configuration": if (node.configurations) { node.configurations.forEach((config) => { components.push({ id: `configuration-${config.name.toLowerCase().replace(/\s+/g, "-")}`, name: config.name, description: config.description || "Configuration setting", category: "configuration", }) }) } break case "Workflows": if (node.children) { node.children.forEach((child) => { components.push({ id: `extensibility-workflows`, name: child.name, description: child.description || "Workflows component", category: "extensibility", }) }) } break case "Translations": if (node.children) { node.children.forEach((child) => { components.push({ id: `extensibility-translations`, name: child.name, description: child.description || "Translations component", category: "extensibility", }) }) } break case "Dashboards": if (node.children) { node.children.forEach((child) => { components.push({ id: `extensibility-dashboards`, name: child.name, description: child.description || "Dashboards component", category: "extensibility", }) }) } break } }) return components } // Transformed components for UI export const transformedMigrationComponents = transformApiDataForUI(mockApiResponse) [V0_FILE]typescript:file="src/data/mock-data-objects.ts" export interface MockDataObject { id: string name: string category: string recordCount: number relatedObjects?: string[] description: string } export const mockDataObjects: MockDataObject[] = [ { id: "product", name: "Product", category: "CRM", recordCount: 1250, relatedObjects: ["price-list", "price-rule", "option-group", "expression", "avm"], description: "Core product catalog including items, SKUs, pricing, and inventory information", }, { id: "account", name: "Account", category: "CRM", recordCount: 850, relatedObjects: ["contact", "opportunity"], description: "Customer and partner account records with company details and relationships", }, { id: "contact", name: "Contact", category: "CRM", recordCount: 2100, relatedObjects: [], description: "Individual contact persons associated with accounts and opportunities", }, { id: "opportunity", name: "Opportunity", category: "CRM", recordCount: 450, relatedObjects: ["quote", "proposal"], description: "Sales opportunities tracking potential deals through the sales pipeline", }, { id: "price-list", name: "Price List", category: "CPQ", recordCount: 75, relatedObjects: [], description: "Pricing schedules and price books for products and services", }, { id: "price-rule", name: "Price Rule", category: "CPQ", recordCount: 120, relatedObjects: [], description: "Automated pricing rules and discount calculations", }, { id: "option-group", name: "Option Group", category: "CPQ", recordCount: 95, relatedObjects: [], description: "Product configuration options and feature bundles", }, { id: "expression", name: "Expression", category: "Configuration", recordCount: 180, relatedObjects: [], description: "Formula expressions for dynamic calculations and business logic", }, { id: "avm", name: "AVM (Asset Value Management)", category: "Configuration", recordCount: 65, relatedObjects: [], description: "Asset valuation models and depreciation schedules", }, { id: "quote", name: "Quote", category: "Sales", recordCount: 320, relatedObjects: [], description: "Customer quotations with pricing and terms", }, { id: "proposal", name: "Proposal", category: "Sales", recordCount: 280, relatedObjects: [], description: "Formal business proposals and statements of work", }, ] [V0_FILE]typescriptreact:file="src/components/migration/review-tabs/generic-item-review-tab.tsx" isQuickEdit="true" "use client" import type { LucideIcon } from "lucide-react" import { CenteredPagination } from "@/components/ui/centered-pagination" import { MigrationComponentItem } from "../migration-component-item" import { mockSchemaComparisonData } from "@/data/schema-comparison-mock" import { mockConfigurationComparisonData } from "@/data/configuration-comparison-mock" import { Badge } from "@/components/ui/badge" interface GenericItemReviewTabProps { type: "schema" | "configuration" | "extensibility" icon: LucideIcon items: any[] emptyMessage: string currentPage: number onPageChange: (page: number) => void itemsPerPage?: number selectedFields?: Record onRemoveDependency?: (dependencyId: string) => void originalAutoIncludedDependencies?: string[] getDependencyInfo?: (componentId: string) => any } const ITEMS_PER_PAGE = 10 const LABELS = { schema: { singular: "Schema object", plural: "schema objects", description: "with changes", }, configuration: { singular: "Configuration", plural: "configurations", description: "with changes", }, extensibility: { singular: "Extensibility component", plural: "extensibility components", description: "selected", }, } export function GenericItemReviewTab({ type, icon: Icon, items, emptyMessage, currentPage, onPageChange, itemsPerPage = ITEMS_PER_PAGE, selectedFields = {}, onRemoveDependency, originalAutoIncludedDependencies = [], getDependencyInfo, }: GenericItemReviewTabProps) { const iconColor = "text-blue-600" const badgeColor = "bg-blue-100 text-blue-800" const emptyIcon = "text-neutral-400" const label = LABELS[type] const totalItems = items.length const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage)) const startIndex = (currentPage - 1) * itemsPerPage const endIndex = startIndex + itemsPerPage const currentItems = items.slice(startIndex, endIndex) if (items.length === 0) { return (

{emptyMessage}

) } // Render extensibility components differently if (type === "extensibility") { return (
{currentItems.map((component) => { const dependencyInfo = getDependencyInfo?.(component.id) return ( ) })} {totalPages > 1 && ( )}
) } // Render schema/configuration items return (
{currentItems.map((itemName) => { const objectData = type === "schema" ? mockSchemaComparisonData.find((obj) => obj.name === itemName) : type === "configuration" ? mockConfigurationComparisonData.find((config) => config.name === itemName) : null const selectedFieldsList = selectedFields[itemName] || [] const totalChanges = objectData ? type === "schema" ? (objectData as any).fieldsWithChanges?.filter((f: any) => f.changeType !== "removed").length || 0 : (objectData as any).settingsWithChanges?.filter((s: any) => s.changeType !== "removed").length || 0 : 0 return (

{objectData?.displayName || itemName}
{objectData?.category && ( {objectData.category} )}
{objectData?.description &&
{objectData.description}
}

) })} {totalPages > 1 && ( )}
) } [V0_FILE]typescriptreact:file="src/components/migration/tabs/shared/comparison-item.tsx" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Card, CardContent } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { ChevronDown, ChevronRight } from "lucide-react" interface ChangeItem { name: string changeType: "added" | "removed" | "modified" oldValue?: string newValue?: string } interface ComparisonItemProps { name: string displayName: string description?: string category: string changeType: "added" | "removed" | "modified" isSelected: boolean onToggle: (name: string) => void hasChanges: boolean changesWithDetails: ChangeItem[] changesLabel: string selectedFields?: string[] onFieldToggle?: (objectName: string, fieldName: string) => void } export function ComparisonItem({ name, displayName, description, category, changeType, isSelected, onToggle, hasChanges, changesWithDetails, changesLabel, selectedFields = [], onFieldToggle, }: ComparisonItemProps) { const [isExpanded, setIsExpanded] = useState(false) const parentCheckboxRef = useRef(null) const selectableFields = changesWithDetails.filter((field) => field.changeType !== "removed") const selectedFieldsForObject = selectedFields.filter((fieldName) => changesWithDetails.some((field) => field.name === fieldName), ) const allSelectableSelected = selectableFields.length > 0 && selectedFieldsForObject.length === selectableFields.length const someSelected = selectedFieldsForObject.length > 0 && selectedFieldsForObject.length < selectableFields.length const isParentRemoved = changeType === "removed" useEffect(() => { if (parentCheckboxRef.current) { const checkboxElement = parentCheckboxRef.current.querySelector('[role="checkbox"]') as HTMLElement if (checkboxElement) { checkboxElement.setAttribute( "data-state", someSelected ? "indeterminate" : allSelectableSelected ? "checked" : "unchecked", ) } } }, [someSelected, allSelectableSelected]) const handleParentToggle = () => { if (!onFieldToggle) { onToggle(name) return } // If all selectable fields are selected, deselect all // Otherwise, select all selectable fields if (allSelectableSelected) { selectableFields.forEach((field) => { if (selectedFields.includes(field.name)) { onFieldToggle(name, field.name) } }) } else { selectableFields.forEach((field) => { if (!selectedFields.includes(field.name)) { onFieldToggle(name, field.name) } }) } } const getChangeTypeBadge = (type: string) => { const variants = { added: "bg-green-100 text-green-800 border-green-200", removed: "bg-red-100 text-red-800 border-red-200", modified: "bg-blue-100 text-blue-800 border-blue-200", } const badgeText = type.charAt(0).toUpperCase() + type.slice(1) return ( {badgeText} ) } const getObjectLevelBadge = (type: string) => { const uniqueChangeTypes = new Set(changesWithDetails.map((field) => field.changeType)) const allFieldsSameType = uniqueChangeTypes.size === 1 const singleChangeType = uniqueChangeTypes.values().next().value // If all fields have the same changeType, show that status // Otherwise, show the count of changes const showStatusBadge = allFieldsSameType && (singleChangeType === "added" || singleChangeType === "removed") const variants = { added: "bg-green-100 text-green-800 border-green-200", removed: "bg-red-100 text-red-800 border-red-200", modified: "bg-blue-100 text-blue-800 border-blue-200", neutral: "bg-blue-100 text-blue-800 border-blue-200", } let badgeText: string let variantKey: keyof typeof variants if (showStatusBadge) { // All fields are added or removed - show status badgeText = singleChangeType.charAt(0).toUpperCase() + singleChangeType.slice(1) variantKey = singleChangeType as keyof typeof variants } else { // Mixed changes or all modified - show count badgeText = `${changesWithDetails.length} ${changesWithDetails.length === 1 ? "change" : "changes"}` variantKey = "neutral" } return ( {badgeText} ) } const renderChangeDetail = (change: ChangeItem) => { const isFieldSelected = selectedFields.includes(change.name) const isRemoved = change.changeType === "removed" return (
onFieldToggle?.(name, change.name)} className={isRemoved ? "opacity-40 cursor-not-allowed" : ""} /> {change.name} {getChangeTypeBadge(change.changeType)}
) } return (

{hasChanges && ( )}

{displayName}
{category} {getObjectLevelBadge(changeType)}
{description &&
{description}
}

{isExpanded && hasChanges && (

{changesLabel.charAt(0).toUpperCase() + changesLabel.slice(1)} Changes:

{changesWithDetails.map(renderChangeDetail)}

)} ) } [V0_FILE]typescriptreact:file="src/components/migration/tabs/schema-config-tab.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { AlertTriangle, FileText, Download, type LucideIcon } from "lucide-react" import { TabSearchFilter } from "./shared/tab-search-filter" import { ComparisonSummaryStats } from "./shared/comparison-summary-stats" import { ComparisonItem } from "./shared/comparison-item" import { CenteredPagination } from "@/components/ui/centered-pagination" import { Button } from "@/components/ui/button" interface ComparisonData { name: string displayName: string description?: string category: string changeType: "added" | "removed" | "modified" hasChanges: boolean changesWithDetails: Array<{ name: string changeType: "added" | "removed" | "modified" oldValue?: string newValue?: string }> } interface SchemaConfigTabProps { title: string icon: LucideIcon totalBadgeText: string sourceOrg: any targetOrg: any comparisonData: ComparisonData[] categories: Array<{ id: string; name: string; count: number }> selectedItems: string[] onItemToggle: (itemName: string) => void onSelectAll: () => void searchTerm: string onSearchChange: (term: string) => void selectedCategory: string onCategoryChange: (category: string) => void onDownloadReport: () => void changesLabel: string emptyStateMessage: string selectedFields?: Record onFieldToggle?: (objectName: string, fieldName: string) => void showDownloadReport?: boolean } const ITEMS_PER_PAGE = 10 export function SchemaConfigTab({ title, icon: Icon, totalBadgeText, sourceOrg, targetOrg, comparisonData, categories, selectedItems, onItemToggle, onSelectAll, searchTerm, onSearchChange, selectedCategory, onCategoryChange, onDownloadReport, changesLabel, emptyStateMessage, selectedFields = {}, onFieldToggle, showDownloadReport = true, }: SchemaConfigTabProps) { const [currentPage, setCurrentPage] = useState(1) const filteredData = comparisonData.filter((item) => { const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) || item.displayName.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = selectedCategory === "all" || item.category === selectedCategory return matchesSearch && matchesCategory }) const totalItems = filteredData.length const totalPages = Math.max(1, Math.ceil(totalItems / ITEMS_PER_PAGE)) const startIndex = (currentPage - 1) * ITEMS_PER_PAGE const endIndex = startIndex + ITEMS_PER_PAGE const currentItems = filteredData.slice(startIndex, endIndex) useEffect(() => { setCurrentPage(1) }, [searchTerm, selectedCategory]) const addedItems = comparisonData.filter((item) => item.changeType === "added").length const modifiedItems = comparisonData.filter((item) => item.changeType === "modified").length const removedItems = comparisonData.filter((item) => item.changeType === "removed").length const totalChangesCount = comparisonData.reduce((total, item) => total + item.changesWithDetails.length, 0) const addedChanges = comparisonData.reduce( (total, item) => total + item.changesWithDetails.filter((change) => change.changeType === "added").length, 0, ) const modifiedChanges = comparisonData.reduce( (total, item) => total + item.changesWithDetails.filter((change) => change.changeType === "modified").length, 0, ) const removedChanges = comparisonData.reduce( (total, item) => total + item.changesWithDetails.filter((change) => change.changeType === "removed").length, 0, ) const selectableItems = filteredData.filter((item) => item.changeType !== "removed") // Check if all selectable items have all their selectable fields selected const allSelectableSelected = selectableItems.length > 0 && selectableItems.every((item) => { // Check if object is selected if (!selectedItems.includes(item.name)) return false // If onFieldToggle is provided, check if all selectable fields are selected if (onFieldToggle && selectedFields[item.name]) { const selectableFields = item.changesWithDetails.filter((field) => field.changeType !== "removed") const selectedFieldsForItem = selectedFields[item.name] || [] return selectableFields.every((field) => selectedFieldsForItem.includes(field.name)) } return true }) const handleSelectAllToggle = () => { onSelectAll() } const handlePageChange = (page: number) => { setCurrentPage(page) } return (

{title} {totalBadgeText}
{showDownloadReport && ( )}

{title} Results

Showing only items with changes between {sourceOrg?.name} and {targetOrg?.name}. Select items to include in your migration.

{filteredData.length === 0 ? (

No items found

{emptyStateMessage}

) : ( <>
{currentItems.map((item) => ( ))}
)} ) } [V0_FILE]typescriptreact:file="src/components/migration/schema-comparison-view.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Search, Download, ChevronDown, ChevronRight, Plus, Minus, Edit, AlertTriangle, FileText } from "lucide-react" import type { SchemaField } from "@/interfaces/schema-comparison" import { mockSchemaComparisonData, schemaCategories, generateSchemaComparisonReport, } from "@/data/schema-comparison-mock" interface SchemaComparisonViewProps { sourceOrg: any targetOrg: any selectedObjects: string[] onObjectToggle: (objectName: string) => void onSelectAllObjects: () => void searchTerm: string onSearchChange: (term: string) => void selectedCategory: string onCategoryChange: (category: string) => void } export function SchemaComparisonView({ sourceOrg, targetOrg, selectedObjects, onObjectToggle, onSelectAllObjects, searchTerm, onSearchChange, selectedCategory, onCategoryChange, }: SchemaComparisonViewProps) { const [expandedObjects, setExpandedObjects] = useState([]) const filteredObjects = mockSchemaComparisonData.filter((obj) => { const matchesSearch = obj.name.toLowerCase().includes(searchTerm.toLowerCase()) || obj.displayName.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = selectedCategory === "all" || obj.category === selectedCategory return matchesSearch && matchesCategory }) const totalObjects = mockSchemaComparisonData.length const addedObjects = mockSchemaComparisonData.filter((obj) => obj.changeType === "added").length const modifiedObjects = mockSchemaComparisonData.filter((obj) => obj.changeType === "modified").length const removedObjects = mockSchemaComparisonData.filter((obj) => obj.changeType === "removed").length const totalFieldsWithChanges = mockSchemaComparisonData.reduce( (total, obj) => total + obj.fieldsWithChanges.length, 0, ) const addedFields = mockSchemaComparisonData.reduce( (total, obj) => total + obj.fieldsWithChanges.filter((field) => field.changeType === "added").length, 0, ) const modifiedFields = mockSchemaComparisonData.reduce( (total, obj) => total + obj.fieldsWithChanges.filter((field) => field.changeType === "modified").length, 0, ) const removedFields = mockSchemaComparisonData.reduce( (total, obj) => total + obj.fieldsWithChanges.filter((field) => field.changeType === "removed").length, 0, ) const toggleObjectExpansion = (objectName: string) => { setExpandedObjects((prev) => prev.includes(objectName) ? prev.filter((name) => name !== objectName) : [...prev, objectName], ) } const getChangeTypeIcon = (changeType: string) => { switch (changeType) { case "added": return case "removed": return case "modified": return default: return null } } const getChangeTypeBadge = (changeType: string) => { const variants = { added: "bg-green-100 text-green-800 border-green-200", removed: "bg-red-100 text-red-800 border-red-200", modified: "bg-blue-100 text-blue-800 border-blue-200", } return ( {changeType.charAt(0).toUpperCase() + changeType.slice(1)} ) } const renderFieldChange = (field: SchemaField) => { return (

{getChangeTypeIcon(field.changeType)} {field.name} {getChangeTypeBadge(field.changeType)}

{field.changeType === "modified" && ( {field.oldValue} → {field.newValue} )} {field.changeType === "added" && New: {field.newValue}} {field.changeType === "removed" && Removed: {field.oldValue}}

) } const handleDownloadReport = () => { const report = generateSchemaComparisonReport(sourceOrg?.name || "Source", targetOrg?.name || "Target") const reportData = { ...report, filteredObjects: filteredObjects, selectedObjects: selectedObjects, } const blob = new Blob([JSON.stringify(reportData, null, 2)], { type: "application/json" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `schema-comparison-report-${new Date().toISOString().split("T")[0]}.json` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } return (

Schema Comparison {totalObjects} changed objects

Added

{addedObjects}

objects, {addedFields} fields

Modified

{modifiedObjects}

objects, {modifiedFields} fields

Removed

{removedObjects}

objects, {removedFields} fields

Schema Comparison Results

Showing only objects with changes between {sourceOrg?.name} and {targetOrg?.name}. Select objects to include in your migration.

onSearchChange(e.target.value)} className="pl-10 bg-neutral-0 border-neutral-300" />

{filteredObjects.length === 0 ? (

No schema objects found

{searchTerm || selectedCategory !== "all" ? "Try adjusting your search or category filter." : "No schema changes detected between source and target environments."}

) : (
{filteredObjects.map((schemaObject) => { const isExpanded = expandedObjects.includes(schemaObject.name) const isSelected = selectedObjects.includes(schemaObject.name) return (

onObjectToggle(schemaObject.name)} /> {schemaObject.hasChanges && ( )}

{schemaObject.displayName}
{getChangeTypeBadge(schemaObject.changeType)} {schemaObject.category} {schemaObject.hasChanges && ( {schemaObject.fieldsWithChanges.length} change {schemaObject.fieldsWithChanges.length !== 1 ? "s" : ""} )}

{schemaObject.description}

{isExpanded && schemaObject.hasChanges && (

Field Changes:

{schemaObject.fieldsWithChanges.map(renderFieldChange)}

)}
) })}
)} ) } [V0_FILE]typescriptreact:file="src/components/migration/configuration-comparison-view.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Search, ChevronDown, ChevronRight, Plus, Minus, Edit, AlertTriangle, Settings, FileText } from "lucide-react" import type { ConfigurationSetting } from "@/interfaces/configuration-comparison" import { mockConfigurationComparisonData, configurationCategories } from "@/data/configuration-comparison-mock" interface ConfigurationComparisonViewProps { sourceOrg: any targetOrg: any selectedConfigurations: string[] onConfigurationToggle: (configName: string) => void onSelectAllConfigurations: () => void searchTerm: string onSearchChange: (term: string) => void selectedCategory: string onCategoryChange: (category: string) => void } export function ConfigurationComparisonView({ sourceOrg, targetOrg, selectedConfigurations, onConfigurationToggle, onSelectAllConfigurations, searchTerm, onSearchChange, selectedCategory, onCategoryChange, }: ConfigurationComparisonViewProps) { const [expandedConfigurations, setExpandedConfigurations] = useState([]) const filteredConfigurations = mockConfigurationComparisonData.filter((config) => { const matchesSearch = config.name.toLowerCase().includes(searchTerm.toLowerCase()) || config.displayName.toLowerCase().includes(searchTerm.toLowerCase()) || config.configurationType.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = selectedCategory === "all" || config.category === selectedCategory return matchesSearch && matchesCategory }) const totalConfigurations = mockConfigurationComparisonData.length const addedConfigurations = mockConfigurationComparisonData.filter((config) => config.changeType === "added").length const modifiedConfigurations = mockConfigurationComparisonData.filter( (config) => config.changeType === "modified", ).length const removedConfigurations = mockConfigurationComparisonData.filter( (config) => config.changeType === "removed", ).length const totalSettingsWithChanges = mockConfigurationComparisonData.reduce( (total, config) => total + config.settingsWithChanges.length, 0, ) const addedSettings = mockConfigurationComparisonData.reduce( (total, config) => total + config.settingsWithChanges.filter((setting) => setting.changeType === "added").length, 0, ) const modifiedSettings = mockConfigurationComparisonData.reduce( (total, config) => total + config.settingsWithChanges.filter((setting) => setting.changeType === "modified").length, 0, ) const removedSettings = mockConfigurationComparisonData.reduce( (total, config) => total + config.settingsWithChanges.filter((setting) => setting.changeType === "removed").length, 0, ) const toggleConfigurationExpansion = (configName: string) => { setExpandedConfigurations((prev) => prev.includes(configName) ? prev.filter((name) => name !== configName) : [...prev, configName], ) } const getChangeTypeIcon = (changeType: string) => { switch (changeType) { case "added": return case "removed": return case "modified": return default: return null } } const getChangeTypeBadge = (changeType: string) => { const variants = { added: "bg-green-100 text-green-800 border-green-200", removed: "bg-red-100 text-red-800 border-red-200", modified: "bg-blue-100 text-blue-800 border-blue-200", } return ( {changeType.charAt(0).toUpperCase() + changeType.slice(1)} ) } const renderSettingChange = (setting: ConfigurationSetting) => { return (

{getChangeTypeIcon(setting.changeType)} {setting.name} {getChangeTypeBadge(setting.changeType)}

{setting.changeType === "modified" && ( {setting.oldValue} → {setting.newValue} )} {setting.changeType === "added" && New: {setting.newValue}} {setting.changeType === "removed" && Removed: {setting.oldValue}}

) } const selectedConfigurationsCount = filteredConfigurations.filter((config) => selectedConfigurations.includes(config.name), ).length const selectableConfigurations = filteredConfigurations.filter((config) => config.changeType !== "removed") const isAllSelectableSelected = selectableConfigurations.length > 0 && selectableConfigurations.every((config) => selectedConfigurations.includes(config.name)) const handleSelectAllToggle = () => { onSelectAllConfigurations() } return (

Configuration Comparison {totalConfigurations} changed configurations

Added

{addedConfigurations}

configurations, {addedSettings} settings

Modified

{modifiedConfigurations}

configurations, {modifiedSettings} settings

Removed

{removedConfigurations}

configurations, {removedSettings} settings

Configuration Comparison Results

Showing only configurations with changes between {sourceOrg?.name} and {targetOrg?.name}. Select configurations to include in your migration.

onSearchChange(e.target.value)} className="pl-10 bg-neutral-0 border-neutral-300" />

{filteredConfigurations.length === 0 ? (

No configurations found

{searchTerm || selectedCategory !== "all" ? "Try adjusting your search or category filter." : "No configuration changes detected between source and target environments."}

) : (
{filteredConfigurations.map((configuration) => { const isExpanded = expandedConfigurations.includes(configuration.name) const isSelected = selectedConfigurations.includes(configuration.name) return (

onConfigurationToggle(configuration.name)} /> {configuration.hasChanges && ( )}

{configuration.displayName}
{configuration.category} {getChangeTypeBadge(configuration.changeType)}

{configuration.configurationType}
{configuration.hasChanges && (
{configuration.settingsWithChanges.length} setting {configuration.settingsWithChanges.length !== 1 ? "s" : ""} with changes
)}

{isExpanded && configuration.hasChanges && (

Setting Changes:

{configuration.settingsWithChanges.map(renderSettingChange)}

)}
) })}
)} ) } [V0_FILE]typescript:file="src/data/data-criteria-mock.ts" isQuickEdit="true" export interface DataObject { id: string name: string description: string subcategory: string recordCount: number queryableFields: QueryableField[] relatedObjects: string[] } export interface QueryableField { name: string type: "text" | "number" | "date" | "boolean" | "picklist" label: string options?: string[] // For picklist fields } export interface CriteriaRule { id: string field: string operator: string value: string | number | boolean logicalOperator?: "Where" | "And" | "Or" } export interface CriteriaGroup { id: string logicalOperator: "And" | "Or" items: (CriteriaRule | CriteriaGroup)[] } export type CriteriaItem = CriteriaRule | CriteriaGroup export function isCriteriaGroup(item: CriteriaItem): item is CriteriaGroup { return "items" in item } export interface CriteriaQuery { objectId: string items: CriteriaItem[] includeRelatedData: boolean relatedObjects: string[] } // Mock data objects with queryable fields and relationships export const mockDataObjects: DataObject[] = [ { id: "product", name: "Product", description: "Product catalog and configuration data", subcategory: "CPQ", recordCount: 1250, queryableFields: [ { name: "name", type: "text", label: "Product Name" }, { name: "productCode", type: "text", label: "Product Code" }, { name: "status", type: "picklist", label: "Status", options: ["Active", "Inactive", "Draft"] }, { name: "price", type: "number", label: "List Price" }, { name: "createdDate", type: "date", label: "Created Date" }, { name: "isConfigurable", type: "boolean", label: "Is Configurable" }, { name: "category", type: "picklist", label: "Category", options: ["Software", "Hardware", "Service", "Subscription"], }, ], relatedObjects: ["price-list", "price-rule", "option-group", "expression", "avm"], }, { id: "price-list", name: "Price List", description: "Pricing lists and schedules", subcategory: "CPQ", recordCount: 85, queryableFields: [ { name: "name", type: "text", label: "Price List Name" }, { name: "currency", type: "picklist", label: "Currency", options: ["USD", "EUR", "GBP", "CAD"] }, { name: "effectiveDate", type: "date", label: "Effective Date" }, { name: "expirationDate", type: "date", label: "Expiration Date" }, { name: "isActive", type: "boolean", label: "Is Active" }, ], relatedObjects: ["price-rule"], }, { id: "price-rule", name: "Price Rule", description: "Pricing rules and calculations", subcategory: "CPQ", recordCount: 342, queryableFields: [ { name: "name", type: "text", label: "Rule Name" }, { name: "type", type: "picklist", label: "Rule Type", options: ["Discount", "Markup", "Override", "Tier"] }, { name: "priority", type: "number", label: "Priority" }, { name: "isActive", type: "boolean", label: "Is Active" }, { name: "effectiveDate", type: "date", label: "Effective Date" }, ], relatedObjects: ["product", "price-list", "expression"], }, { id: "option-group", name: "Option Group", description: "Product option groups and configurations", subcategory: "CPQ", recordCount: 156, queryableFields: [ { name: "name", type: "text", label: "Group Name" }, { name: "type", type: "picklist", label: "Group Type", options: ["Required", "Optional", "Conditional"] }, { name: "maxSelections", type: "number", label: "Max Selections" }, { name: "isActive", type: "boolean", label: "Is Active" }, ], relatedObjects: ["product", "expression"], }, { id: "expression", name: "Expression", description: "Business logic expressions and formulas", subcategory: "CPQ", recordCount: 89, queryableFields: [ { name: "name", type: "text", label: "Expression Name" }, { name: "type", type: "picklist", label: "Expression Type", options: ["Validation", "Calculation", "Visibility", "Requirement"], }, { name: "isActive", type: "boolean", label: "Is Active" }, { name: "lastModified", type: "date", label: "Last Modified" }, ], relatedObjects: ["product", "price-rule", "option-group", "avm"], }, { id: "avm", name: "AVM (Asset Value Management)", description: "Asset value management configurations", subcategory: "CPQ", recordCount: 67, queryableFields: [ { name: "name", type: "text", label: "AVM Name" }, { name: "valueType", type: "picklist", label: "Value Type", options: ["Fixed", "Percentage", "Formula"] }, { name: "isActive", type: "boolean", label: "Is Active" }, { name: "effectiveDate", type: "date", label: "Effective Date" }, ], relatedObjects: ["product", "expression"], }, { id: "account", name: "Account", description: "Customer and partner account records", subcategory: "CRM", recordCount: 2840, queryableFields: [ { name: "name", type: "text", label: "Account Name" }, { name: "type", type: "picklist", label: "Account Type", options: ["Customer", "Partner", "Prospect", "Vendor"] }, { name: "industry", type: "picklist", label: "Industry", options: ["Technology", "Healthcare", "Finance", "Manufacturing", "Retail"], }, { name: "annualRevenue", type: "number", label: "Annual Revenue" }, { name: "isActive", type: "boolean", label: "Is Active" }, { name: "createdDate", type: "date", label: "Created Date" }, ], relatedObjects: ["agreement"], }, { id: "agreement", name: "Agreement", description: "Contracts and legal agreements", subcategory: "CLM", recordCount: 1567, queryableFields: [ { name: "name", type: "text", label: "Agreement Name" }, { name: "status", type: "picklist", label: "Status", options: ["Draft", "In Review", "Approved", "Executed", "Expired"], }, { name: "type", type: "picklist", label: "Agreement Type", options: ["MSA", "SOW", "Amendment", "Renewal"] }, { name: "value", type: "number", label: "Contract Value" }, { name: "startDate", type: "date", label: "Start Date" }, { name: "endDate", type: "date", label: "End Date" }, { name: "autoRenew", type: "boolean", label: "Auto Renew" }, ], relatedObjects: ["account", "agreement-clause"], }, { id: "agreement-clause", name: "Agreement Clause", description: "Individual clauses within agreements", subcategory: "CLM", recordCount: 4230, queryableFields: [ { name: "title", type: "text", label: "Clause Title" }, { name: "type", type: "picklist", label: "Clause Type", options: ["Standard", "Custom", "Negotiated", "Fallback"], }, { name: "category", type: "picklist", label: "Category", options: ["Terms", "Liability", "IP", "Termination", "Payment"], }, { name: "isRequired", type: "boolean", label: "Is Required" }, { name: "lastUpdated", type: "date", label: "Last Updated" }, ], relatedObjects: ["agreement"], }, ] // Operators for different field types export const fieldOperators = { text: [ { value: "equals", label: "Equals" }, { value: "contains", label: "Contains" }, { value: "startsWith", label: "Starts With" }, { value: "endsWith", label: "Ends With" }, { value: "notEquals", label: "Not Equals" }, ], number: [ { value: "equals", label: "Equals" }, { value: "greaterThan", label: "Greater Than" }, { value: "lessThan", label: "Less Than" }, { value: "greaterThanOrEqual", label: "Greater Than or Equal" }, { value: "lessThanOrEqual", label: "Less Than or Equal" }, { value: "notEquals", label: "Not Equals" }, ], date: [ { value: "equals", label: "Equals" }, { value: "after", label: "After" }, { value: "before", label: "Before" }, { value: "between", label: "Between" }, { value: "notEquals", label: "Not Equals" }, ], boolean: [{ value: "equals", label: "Equals" }], picklist: [ { value: "equals", label: "Equals" }, { value: "notEquals", label: "Not Equals" }, { value: "in", label: "In" }, { value: "notIn", label: "Not In" }, ], } [V0_FILE]typescriptreact:file="src/components/migration/selective-migration-page.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { transformedMigrationComponents } from "@/data/migration-api-mock-data" import { useRouter } from "next/navigation" import { migrationStore } from "@/utils/migration-store" import { MigrationReviewView } from "./migration-review-view" import { SelectiveMigrationView } from "./selective-migration-view" import { getAllRequiredDependencies } from "@/data/component-dependencies" import { mockDataObjects } from "@/data/data-criteria-mock" import { mockDataObjects as mockDataCriteria } from "@/data/data-criteria-mock" interface SelectiveMigrationPageProps { sourceOrg: any targetOrg: any onBack: () => void onStartMigration: (migration: any) => void } export function SelectiveMigrationPage({ sourceOrg, targetOrg, onBack, onStartMigration, }: SelectiveMigrationPageProps) { const [activeTab, setActiveTab] = useState("schema") const [isTabLoading, setIsTabLoading] = useState(false) const [searchTerms, setSearchTerms] = useState>({ schema: "", data: "", configuration: "", extensibility: "", }) const [userSelectedComponents, setUserSelectedComponents] = useState([]) const [reviewing, setReviewing] = useState(false) const [announceMessage, setAnnounceMessage] = useState("") const [selectedSubcategories, setSelectedSubcategories] = useState([]) const [allSelectedComponents, setAllSelectedComponents] = useState([]) const [explicitlyDeselectedDependencies, setExplicitlyDeselectedDependencies] = useState([]) const [originalUserSelection, setOriginalUserSelection] = useState([]) const [removedDependencies, setRemovedDependencies] = useState([]) const [originalAutoIncludedDependencies, setOriginalAutoIncludedDependencies] = useState([]) const [selectedSchemaObjects, setSelectedSchemaObjects] = useState([]) const [selectedDataObjects, setSelectedDataObjects] = useState([]) const [dataObjectQueries, setDataObjectQueries] = useState>({}) const [selectedConfigurationObjects, setSelectedConfigurationObjects] = useState([]) const [selectedSchemaFields, setSelectedSchemaFields] = useState>({}) const [selectedConfigurationFields, setSelectedConfigurationFields] = useState>({}) const [autoIncludedDataCount, setAutoIncludedDataCount] = useState(0) const router = useRouter() useEffect(() => { if (!reviewing) { setAllSelectedComponents(userSelectedComponents) } console.log("User selected:", userSelectedComponents) console.log("All selected:", allSelectedComponents) console.log("Explicitly deselected deps:", explicitlyDeselectedDependencies) }, [userSelectedComponents, reviewing, explicitlyDeselectedDependencies]) const announceToScreenReader = (message: string) => { setAnnounceMessage(message) setTimeout(() => setAnnounceMessage(""), 1000) } const filteredComponents = transformedMigrationComponents.filter((component) => { const matchesCategory = component.category === activeTab const searchTerm = searchTerms[activeTab] || "" const matchesSearch = component.name.toLowerCase().includes(searchTerm.toLowerCase()) || component.description.toLowerCase().includes(searchTerm.toLowerCase()) const matchesSubcategory = activeTab !== "data" || selectedSubcategories.length === 0 || (component.subcategory && selectedSubcategories.includes(component.subcategory)) return matchesCategory && matchesSearch && matchesSubcategory }) const handleComponentToggle = (componentId: string) => { const isCurrentlySelected = userSelectedComponents.includes(componentId) if (isCurrentlySelected) { const newUserSelected = userSelectedComponents.filter((id) => id !== componentId) setUserSelectedComponents(newUserSelected) const wasAutoDependency = !originalUserSelection.includes(componentId) && allSelectedComponents.includes(componentId) if (wasAutoDependency) { setExplicitlyDeselectedDependencies((prev) => [...new Set([...prev, componentId])]) } const component = transformedMigrationComponents.find((c) => c.id === componentId) if (component) { announceToScreenReader(`${component.name} deselected from migration`) } } else { const newUserSelected = [...new Set([...userSelectedComponents, componentId])] setUserSelectedComponents(newUserSelected) setExplicitlyDeselectedDependencies((prev) => prev.filter((id) => id !== componentId)) const component = transformedMigrationComponents.find((c) => c.id === componentId) if (component) { announceToScreenReader(`${component.name} selected for migration`) } } } const handleSelectAllInCategory = () => { const categoryComponents = filteredComponents.map((c) => c.id) const categoryName = activeTab const allFilteredSelected = categoryComponents.every((id) => userSelectedComponents.includes(id)) if (allFilteredSelected && categoryComponents.length > 0) { const newUserSelected = userSelectedComponents.filter((id) => !categoryComponents.includes(id)) setUserSelectedComponents(newUserSelected) const autoDepsToBecomeExplicit = categoryComponents.filter( (id) => !originalUserSelection.includes(id) && allSelectedComponents.includes(id), ) setExplicitlyDeselectedDependencies((prev) => [...new Set([...prev, ...autoDepsToBecomeExplicit])]) announceToScreenReader(`All filtered ${categoryName} components deselected`) } else { const newUserSelected = [...new Set([...userSelectedComponents, ...categoryComponents])] setUserSelectedComponents(newUserSelected) setExplicitlyDeselectedDependencies((prev) => prev.filter((id) => !categoryComponents.includes(id))) announceToScreenReader(`All filtered ${categoryName} components selected`) } } const handleReviewSelection = ( schemaObjects: string[] = [], configurationObjects: string[] = [], schemaFieldsData: Record = {}, configurationFieldsData: Record = {}, autoDataCount = 0, dataObjects: string[] = [], dataQueries: Record = {}, ) => { console.log("[v0] handleReviewSelection called with:") console.log("[v0] userSelectedComponents:", userSelectedComponents) console.log("[v0] schemaObjects:", schemaObjects) console.log("[v0] dataObjects:", dataObjects) console.log("[v0] configurationObjects:", configurationObjects) console.log("[v0] configurationFieldsData:", configurationFieldsData) const hasConfigurationSelections = Object.keys(configurationFieldsData).length > 0 const hasSchemaSelections = Object.keys(schemaFieldsData).length > 0 if ( userSelectedComponents.length === 0 && !hasSchemaSelections && dataObjects.length === 0 && !hasConfigurationSelections ) { console.log("[v0] No selections found, returning early") return } console.log("[v0] Proceeding to review") setSelectedSchemaObjects(schemaObjects) setSelectedConfigurationObjects(configurationObjects) setSelectedSchemaFields(schemaFieldsData) setSelectedConfigurationFields(configurationFieldsData) setAutoIncludedDataCount(autoDataCount) setSelectedDataObjects(dataObjects) setDataObjectQueries(dataQueries) const allRequiredDeps = getAllRequiredDependencies(userSelectedComponents) if (originalAutoIncludedDependencies.length === 0) { const autoIncluded = allRequiredDeps.filter((depId) => !originalUserSelection.includes(depId)) setOriginalAutoIncludedDependencies(autoIncluded) } const reviewSelectedComponents = [...new Set([...userSelectedComponents, ...allRequiredDeps])] setRemovedDependencies([]) setAllSelectedComponents(reviewSelectedComponents) setReviewing(true) announceToScreenReader("Navigated to migration review page") } const handleStartMigration = () => { const migration = { id: `migration-${Date.now()}`, type: "selective", sourceOrg, targetOrg, startTime: new Date(), status: "running", progress: 0, selectedComponents: allSelectedComponents .map((id) => transformedMigrationComponents.find((c) => c.id === id)) .filter(Boolean), selectedSchemaObjects, selectedDataObjects, dataObjectQueries, selectedConfigurationObjects, selectedSchemaFields, selectedConfigurationFields, components: [ ...allSelectedComponents.map((id) => ({ name: transformedMigrationComponents.find((c) => c.id === id)?.name || "", status: "pending", progress: 0, type: "component", })), ...selectedSchemaObjects.map((objectName) => ({ name: objectName, status: "pending", progress: 0, type: "schema", })), ...selectedDataObjects.map((objectName) => ({ name: objectName, status: "pending", progress: 0, type: "data", query: dataObjectQueries[objectName], })), ...selectedConfigurationObjects.map((objectName) => ({ name: objectName, status: "pending", progress: 0, type: "configuration", })), ], } migrationStore.startMigration(migration) announceToScreenReader("Migration started successfully") router.push(`/migrations/${migration.id}`) } const handleBackToSelection = () => { setUserSelectedComponents(allSelectedComponents) setReviewing(false) announceToScreenReader("Returned to component selection") } const handleTabChange = (value: string) => { if (value !== "schema" && value !== activeTab) { setIsTabLoading(true) setTimeout(() => { setIsTabLoading(false) }, 1200) } setActiveTab(value) if (value !== "data") { setSelectedSubcategories([]) } announceToScreenReader(`Switched to ${value} tab`) } const handleSearchChange = (category: string, term: string) => { setSearchTerms((prev) => ({ ...prev, [category]: term })) } const handleSubcategoryChange = (subcategories: string[]) => { setSelectedSubcategories(subcategories) } const handleRemoveDependency = (dependencyId: string) => { setRemovedDependencies((prev) => [...new Set([...prev, dependencyId])]) setAllSelectedComponents((prev) => prev.filter((id) => id !== dependencyId)) } const handleDataObjectSelectionChange = (objectId: string, isSelected: boolean, query: any = null) => { if (isSelected) { setSelectedDataObjects((prev) => [...new Set([...prev, objectId])]) if (query) { setDataObjectQueries((prev) => ({ ...prev, [objectId]: query })) } } else { const objectData = mockDataObjects.find((obj: any) => obj.id === objectId) const dependentIds = objectData?.relatedObjects || [] // Remove the object itself setSelectedDataObjects((prev) => prev.filter((id) => id !== objectId)) // Remove queries for parent and all dependents setDataObjectQueries((prev) => { const newQueries = { ...prev } delete newQueries[objectId] dependentIds.forEach((depId: string) => { delete newQueries[depId] }) return newQueries }) // Remove dependents from selection setSelectedDataObjects((prev) => prev.filter((id) => !dependentIds.includes(id))) // Return the dependent IDs so SelectiveMigrationView can clear their filter states return dependentIds } } if (reviewing) { console.log("[v0] SelectiveMigrationPage - calculating relatedDataObjects") console.log("[v0] selectedDataObjects:", selectedDataObjects) console.log("[v0] mockDataCriteria:", mockDataCriteria) const relatedDataObjects: any[] = [] const seenIds = new Set() selectedDataObjects.forEach((selectedId) => { console.log("[v0] Processing selectedId:", selectedId) const dataObject = mockDataCriteria.find((obj: any) => obj.id === selectedId) console.log("[v0] Found dataObject:", dataObject) if (dataObject && dataObject.relatedObjects) { console.log("[v0] relatedObjects array:", dataObject.relatedObjects) dataObject.relatedObjects.forEach((relatedId: string) => { console.log("[v0] Processing relatedId:", relatedId) console.log("[v0] Already in selectedDataObjects?", selectedDataObjects.includes(relatedId)) console.log("[v0] Already seen?", seenIds.has(relatedId)) if (!selectedDataObjects.includes(relatedId) && !seenIds.has(relatedId)) { const relatedObject = mockDataCriteria.find((obj: any) => obj.id === relatedId) console.log("[v0] Found relatedObject:", relatedObject) if (relatedObject) { relatedDataObjects.push({ ...relatedObject, parentObject: dataObject.name, }) seenIds.add(relatedId) } } }) } }) console.log("[v0] Final relatedDataObjects to pass:", relatedDataObjects) return ( !originalUserSelection.includes(id))} onRemoveDependency={handleRemoveDependency} removedDependencies={removedDependencies} originalAutoIncludedDependencies={originalAutoIncludedDependencies} autoIncludedDataCount={autoIncludedDataCount} relatedDataObjects={relatedDataObjects} /> ) } return ( ) } [V0_FILE]typescriptreact:file="src/components/migration/migration-review-view.tsx" isQuickEdit="true" "use client" import type React from "react" import { useMemo } from "react" import { useState, useRef, useEffect, useCallback } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, Play, Users, Database, Settings, FileText, CheckCircle, Lock, AlertTriangle } from "lucide-react" import { transformedMigrationComponents } from "@/data/migration-api-mock-data" import { getComponentDependencies, getAllRequiredDependencies, getAllOptionalDependencies, } from "@/data/component-dependencies" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { useToast } from "@/hooks/use-toast" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import type { CriteriaQuery } from "@/types/criteria-query" import { GenericItemReviewTab } from "./review-tabs/generic-item-review-tab" import { DataReviewTab } from "./review-tabs/data-review-tab" import { SchemaReviewTab } from "./review-tabs/schema-review-tab" import { ConfigurationReviewTab } from "./review-tabs/configuration-review-tab" import { mockSchemaComparisonData } from "@/data/schema-comparison-mock" import { mockConfigurationComparisonData } from "@/data/configuration-comparison-mock" import { mockDataObjects as mockDataObjectsFromDataTab } from "@/data/data-criteria-mock" interface MigrationReviewViewProps { sourceOrg: any targetOrg: any selectedComponents: string[] userSelectedComponents: string[] selectedSchemaObjects?: string[] selectedDataObjects?: string[] dataObjectQueries?: Record selectedConfigurationObjects?: string[] selectedSchemaFields?: Record selectedConfigurationFields?: Record explicitlyDeselectedRequiredDeps: string[] onBack: () => void onStartMigration: () => void announceMessage: string autoIncludedComponents: string[] onRemoveDependency: (dependencyId: string) => void removedDependencies: string[] originalAutoIncludedDependencies: string[] autoIncludedDataCount?: number relatedDataObjects?: Array<{ id: string name: string parentObject: string isFiltered: boolean filterSummary?: string }> } function useTextTruncation(text: string) { const ref = useRef(null) const [isTruncated, setIsTruncated] = useState(false) const checkTruncation = useCallback(() => { const element = ref.current if (element && text) { const tempElement = document.createElement("span") tempElement.style.visibility = "hidden" tempElement.style.position = "absolute" tempElement.style.whiteSpace = "nowrap" tempElement.style.fontSize = window.getComputedStyle(element).fontSize tempElement.style.fontFamily = window.getComputedStyle(element).fontFamily tempElement.style.fontWeight = window.getComputedStyle(element).fontWeight tempElement.textContent = text document.body.appendChild(tempElement) const fullWidth = tempElement.offsetWidth document.body.removeChild(tempElement) const containerWidth = element.clientWidth const isOverflowing = fullWidth > containerWidth setIsTruncated(isOverflowing) } }, [text]) useEffect(() => { const timeoutId = setTimeout(checkTruncation, 50) return () => clearTimeout(timeoutId) }, [text, checkTruncation]) useEffect(() => { const element = ref.current if (!element) return checkTruncation() const resizeObserver = new ResizeObserver(() => { setTimeout(checkTruncation, 10) }) resizeObserver.observe(element) let parentElement = element.parentElement let levels = 0 while (parentElement && levels < 5) { resizeObserver.observe(parentElement) parentElement = parentElement.parentElement levels++ } const handleResize = () => { setTimeout(checkTruncation, 100) } window.addEventListener("resize", handleResize) return () => { resizeObserver.disconnect() window.removeEventListener("resize", handleResize) } }, [checkTruncation]) return { ref, isTruncated } } function TruncatedText({ children, className = "", fullText, as = "span", }: { children: React.ReactNode className?: string fullText: string as?: "span" | "div" }) { const { ref, isTruncated } = useTextTruncation(fullText) const Element = as const textElement = ( {children} ) if (isTruncated) { return ( {textElement}
{fullText}
) } return textElement } export function MigrationReviewView({ sourceOrg, targetOrg, selectedComponents, userSelectedComponents, selectedSchemaObjects = [], selectedDataObjects = [], dataObjectQueries = {}, selectedConfigurationObjects = [], selectedSchemaFields = {}, selectedConfigurationFields = {}, explicitlyDeselectedRequiredDeps, onBack, onStartMigration, announceMessage, autoIncludedComponents, onRemoveDependency, removedDependencies, originalAutoIncludedDependencies, autoIncludedDataCount = 0, relatedDataObjects = [], }: MigrationReviewViewProps) { const [activeTab, setActiveTab] = useState("schema") const [showEditWarningDialog, setShowEditWarningDialog] = useState(false) const [removedRelatedObjects, setRemovedRelatedObjects] = useState([]) const [schemaPagination, setSchemaPagination] = useState({ currentPage: 1 }) const [dataPagination, setDataPagination] = useState({ currentPage: 1 }) const [configPagination, setConfigPagination] = useState({ currentPage: 1 }) const [extensibilityPagination, setExtensibilityPagination] = useState({ currentPage: 1 }) const { toast } = useToast() console.log("[v0] MigrationReviewView rendered") console.log("[v0] selectedDataObjects:", selectedDataObjects) console.log("[v0] dataObjectQueries:", dataObjectQueries) console.log("[v0] autoIncludedDataCount:", autoIncludedDataCount) const selectedComponentObjects = selectedComponents .map((id) => transformedMigrationComponents.find((c) => c.id === id)) .filter(Boolean) const userSelectedComponentObjects = userSelectedComponents .map((id) => transformedMigrationComponents.find((c) => c.id === id)) .filter(Boolean) const autoIncludedComponentObjects = autoIncludedComponents .map((id) => transformedMigrationComponents.find((c) => c.id === id)) .filter(Boolean) const allRequiredDependencies = getAllRequiredDependencies(userSelectedComponents) const allOptionalDependencies = getAllOptionalDependencies(userSelectedComponents) const TOTAL_DATA_OBJECTS = 9 const isAllDataSelected = selectedDataObjects.length === TOTAL_DATA_OBJECTS const activeRelatedDataObjects = relatedDataObjects.filter((obj) => !removedRelatedObjects.includes(obj.id)) const totalDataDependencies = relatedDataObjects.length const selectedDataDependencies = activeRelatedDataObjects.length console.log("[v0] MigrationReviewView rendered") console.log("[v0] selectedDataObjects:", selectedDataObjects) console.log("[v0] dataObjectQueries:", dataObjectQueries) console.log("[v0] autoIncludedDataCount:", autoIncludedDataCount) const totalRequiredDependencies = Object.keys(allRequiredDependencies).length const selectedRequiredDependencies = Object.keys(allRequiredDependencies).filter( (depId) => !removedRelatedObjects.includes(depId), ).length console.log("[v0] totalRequiredDependencies:", totalRequiredDependencies) console.log("[v0] selectedRequiredDependencies:", selectedRequiredDependencies) console.log("[v0] MigrationReviewView - Dependency calculation:") console.log("[v0] relatedDataObjects:", relatedDataObjects) console.log("[v0] totalDataDependencies:", totalDataDependencies) console.log("[v0] selectedDataDependencies:", selectedDataDependencies) console.log("[v0] isAllDataSelected:", isAllDataSelected) const dependencySummary = useMemo(() => { const componentDeps = getComponentDependencies(selectedComponents) console.log("[v0] componentDeps from getComponentDependencies:", componentDeps) const dataDepsTotal = isAllDataSelected ? 0 : totalDataDependencies const dataDepsSelected = isAllDataSelected ? 0 : selectedDataDependencies const total = componentDeps.required.length + dataDepsTotal const selected = componentDeps.required.filter((dep) => selectedComponents.includes(dep)).length + dataDepsSelected console.log("[v0] dependencySummary calculation:", { isAllDataSelected, selectedDataObjectsCount: selectedDataObjects.length, totalDataObjects: TOTAL_DATA_OBJECTS, componentDeps, dataDepsTotal, dataDepsSelected, finalTotal: total, finalSelected: selected, }) return { total, selected } }, [selectedComponents, totalDataDependencies, selectedDataDependencies, isAllDataSelected]) const getCategoryCount = (categoryId: string) => { if (categoryId === "schema") { return Object.keys(selectedSchemaFields).length } if (categoryId === "data") { return selectedDataObjects.length + activeRelatedDataObjects.length } if (categoryId === "configuration") { return Object.keys(selectedConfigurationFields).length } return selectedComponentObjects.filter((c) => c.category === categoryId).length } const getTotalComponentsForCategory = (categoryId: string) => { if (categoryId === "schema") { return mockSchemaComparisonData.length } if (categoryId === "data") { return mockDataObjectsFromDataTab.length // Use the same mock data as selection page } if (categoryId === "configuration") { return mockConfigurationComparisonData.length } return transformedMigrationComponents.filter((c) => c.category === categoryId).length } const handleRemoveRelatedObject = (objectId: string) => { setRemovedRelatedObjects((prev) => [...prev, objectId]) const relatedObject = relatedDataObjects.find((obj) => obj.id === objectId) toast({ title: "Related Object Removed", description: `${relatedObject?.name || "Object"} has been removed from the migration.`, variant: "destructive", }) } const handleRemoveDependency = (dependencyId: string) => { const component = transformedMigrationComponents.find((c) => c.id === dependencyId) toast({ title: "Dependency Removed", description: `${component?.name || "Component"} has been removed from the migration. This may cause issues if other components depend on it.`, variant: "destructive", }) onRemoveDependency(dependencyId) } const handleBackClick = () => { if (removedDependencies.length > 0 || removedRelatedObjects.length > 0) { setShowEditWarningDialog(true) } else { onBack() } } const handleContinueEditing = () => { setShowEditWarningDialog(false) onBack() } const handleStayInReview = () => { setShowEditWarningDialog(false) } useEffect(() => { if (activeTab === "schema") setSchemaPagination({ currentPage: 1 }) if (activeTab === "data") setDataPagination({ currentPage: 1 }) if (activeTab === "configuration") setConfigPagination({ currentPage: 1 }) if (activeTab === "extensibility") setExtensibilityPagination({ currentPage: 1 }) }, [activeTab]) const getDependencyInfo = (componentId: string) => { const requiredDeps = getAllRequiredDependencies(userSelectedComponents) const optionalDeps = getAllOptionalDependencies(userSelectedComponents) const isRequiredDependency = requiredDeps.includes(componentId) const isOptionalDependency = optionalDeps.includes(componentId) && !isRequiredDependency const isUserSelected = userSelectedComponents.includes(componentId) const wasManuallySelectedAfterRequired = isUserSelected && isRequiredDependency const requiredBy: string[] = [] const optionalFor: string[] = [] userSelectedComponents.forEach((selectedId) => { const deps = getComponentDependencies(selectedId) const selectedComponent = transformedMigrationComponents.find((c) => c.id === selectedId) if (deps.required.some((dep) => dep.id === componentId) && selectedComponent) { requiredBy.push(selectedComponent.name) } if (deps.optional.some((dep) => dep.id === componentId) && selectedComponent) { optionalFor.push(selectedComponent.name) } }) return { isRequiredDependency, isOptionalDependency, wasManuallySelectedAfterRequired, requiredBy: requiredBy.length > 0 ? requiredBy : undefined, optionalFor: optionalFor.length > 0 ? optionalFor : undefined, } } return (

{announceMessage}
Dependencies Removed You have removed dependencies from this migration. If you edit your selection, all required dependencies may reappear in the review. Do you want to continue editing, or stay in review mode?

Review Migration

Review your selection and confirm to start the selective migration

Migration Review Details

Migration Summary
Source and target organization details

Source Organization
{sourceOrg?.name}

Target Organization
{targetOrg?.name}

Selected Components ( {getCategoryCount("schema") + getCategoryCount("data") + getCategoryCount("configuration") + getCategoryCount("extensibility")} )
Components organized by category

{categories.map((category) => { const count = getCategoryCount(category.id) return ( {category.shortName} ({count}) ) })}

{categories.map((category) => { const count = getCategoryCount(category.id) return ( {category.name} ({count}) ) })}
setSchemaPagination({ currentPage: page })} /> setDataPagination({ currentPage: page })} isAllDataSelected={isAllDataSelected} /> setConfigPagination({ currentPage: page })} /> c.category === "extensibility")} emptyMessage="No extensibility components selected" currentPage={extensibilityPagination.currentPage} onPageChange={(page) => setExtensibilityPagination({ currentPage: page })} onRemoveDependency={handleRemoveDependency} originalAutoIncludedDependencies={originalAutoIncludedDependencies} getDependencyInfo={getDependencyInfo} />

Migration Actions
Migration Details
Migration Type Selective Migration

Selected Components
{categories.map((category) => { const count = getCategoryCount(category.id) const total = getTotalComponentsForCategory(category.id) const Icon = category.icon const hasSelection = count > 0 const categoryText = category.name const selectedText = `${count} selected` const descriptionText = `from ${total} ${ category.id === "schema" ? "objects" : category.id === "data" ? "objects" : category.id === "configuration" ? "configurations" : category.id === "extensibility" ? "components" : "objects" }` return (

{categoryText}
{selectedText} {descriptionText}
) })}

{dependencySummary.total > 0 && (

Dependencies
{dependencySummary.selected} of {dependencySummary.total} required dependencies are selected
)}

) } const categories = [ { id: "schema", name: "Schema", icon: Database, shortName: "Schema" }, { id: "data", name: "Data", icon: Users, shortName: "Data" }, { id: "configuration", name: "Configuration", icon: Settings, shortName: "Config" }, { id: "extensibility", name: "Extensibility", icon: FileText, shortName: "Extend" }, ] [V0_FILE]typescriptreact:file="src/components/migration/review-tabs/data-review-tab.tsx" isQuickEdit="true" "use client" import { Lock, Trash2, ChevronDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { CenteredPagination } from "@/components/ui/centered-pagination" import { mockDataObjects } from "@/data/mock-data-objects" import { mockDataObjects as dataCriteriaObjects } from "@/data/data-criteria-mock" import { fieldOperators } from "@/data/data-criteria-mock" import type { CriteriaQuery } from "@/types/criteria-query" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { useState } from "react" interface RelatedDataObject { id: string name: string parentObject: string isFiltered: boolean filterSummary?: string } interface DataReviewTabProps { selectedDataObjects: string[] dataObjectQueries: Record relatedDataObjects: RelatedDataObject[] onRemoveRelatedObject: (objectId: string) => void currentPage: number onPageChange: (page: number) => void itemsPerPage?: number isAllDataSelected: boolean } const ITEMS_PER_PAGE = 10 export function DataReviewTab({ selectedDataObjects, dataObjectQueries, relatedDataObjects, onRemoveRelatedObject, currentPage, onPageChange, itemsPerPage = ITEMS_PER_PAGE, isAllDataSelected, }: DataReviewTabProps) { const [expandedDependencies, setExpandedDependencies] = useState>(new Set()) const [expandedFilters, setExpandedFilters] = useState>(new Set()) const toggleDependencies = (objectId: string) => { setExpandedDependencies((prev) => { const newSet = new Set(prev) if (newSet.has(objectId)) { newSet.delete(objectId) } else { newSet.add(objectId) } return newSet }) } const toggleFilter = (objectId: string) => { setExpandedFilters((prev) => { const newSet = new Set(prev) if (newSet.has(objectId)) { newSet.delete(objectId) } else { newSet.add(objectId) } return newSet }) } const uniqueRelatedObjects = relatedDataObjects.filter((relatedObj) => !selectedDataObjects.includes(relatedObj.id)) const isSelectAllActive = isAllDataSelected const allDataItems = [ ...selectedDataObjects.map((objectId) => ({ type: "selected", id: objectId })), ...uniqueRelatedObjects.map((obj) => ({ type: "related", id: obj.id, data: obj })), ] const totalItems = allDataItems.length const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage)) const startIndex = (currentPage - 1) * itemsPerPage const endIndex = startIndex + itemsPerPage const currentItems = allDataItems.slice(startIndex, endIndex) if (selectedDataObjects.length === 0) { return (

No data objects selected

) } return (
{currentItems.map((item: any) => { if (item.type === "selected") { const dataObject = mockDataObjects.find((obj) => obj.id === item.id) if (!dataObject) return null const query = dataObjectQueries[item.id] const isFiltered = query && query.items && query.items.length > 0 const dataObjectWithDeps = dataCriteriaObjects.find((obj) => obj.id === item.id) const dependencies = dataObjectWithDeps?.relatedObjects || [] const hasDependencies = dependencies.length > 0 && !isSelectAllActive const isExpanded = expandedDependencies.has(item.id) const isFilterExpanded = expandedFilters.has(item.id) const filterSummary = query ? generateFilterSummary(query, dataObjectWithDeps) : null const estimatedRecords = query?.estimatedRecords ?? null const hasZeroRecords = estimatedRecords === 0 return (

{dataObject.name}
{dataObject.category}

{dataObject.description}
{isFiltered && filterSummary && (
{isFilterExpanded && (

Filter Criteria:
{filterSummary}

{estimatedRecords !== null && (
Estimated Records:{" "} {estimatedRecords.toLocaleString()} {estimatedRecords === 1 ? "record" : "records"}
)} {hasZeroRecords && (
⚠️ This object will be excluded from migration as no records match the filter criteria.
)}
)}
)} {hasDependencies && (
{isExpanded && (
{dependencies.map((depId) => { const depObject = dataCriteriaObjects.find((obj) => obj.id === depId) return (
• {depObject?.name || depId}
) })}
)}
)}

) } if (item.type === "related") { const relatedObject = item.data const relatedDataObject = mockDataObjects.find((obj) => obj.id === relatedObject.id) return (

{relatedObject.name}
{relatedDataObject && ( {relatedDataObject.category} )} Required Dependency
Required dependency of {relatedObject.parentObject}

{relatedDataObject ? relatedDataObject.description : relatedObject.name}

) } return null })} {allDataItems.length > 0 && totalPages > 1 && ( )}
) } function generateFilterSummary(query: CriteriaQuery, dataObject: any): string { const summaries: string[] = [] query.items.forEach((item) => { if ("items" in item) { const groupSummaries = item.items .map((subItem: any) => { if ("field" in subItem) { const field = dataObject?.queryableFields?.find((f: any) => f.name === subItem.field) const operators = fieldOperators[field?.type || "text"] || [] const operator = operators.find((op) => op.value === subItem.operator) return `${field?.label || subItem.field} ${operator?.label || subItem.operator} "${subItem.value}"` } return "" }) .filter(Boolean) if (groupSummaries.length > 0) { summaries.push(`(${groupSummaries.join(` ${item.logicalOperator} `)})`) } } else if ("field" in item) { const field = dataObject?.queryableFields?.find((f: any) => f.name === item.field) const operators = fieldOperators[field?.type || "text"] || [] const operator = operators.find((op) => op.value === item.operator) summaries.push(`${field?.label || item.field} ${operator?.label || item.operator} "${item.value}"`) } }) const connector = query.matchCondition === "ALL" ? " AND " : " OR " return summaries.join(connector) } [V0_FILE]typescriptreact:file="src/interfaces/criteria-query.ts" isFixed="true" isQuickEdit="true" import type { CriteriaItem } from "./criteria-item" // Assuming CriteriaItem is declared in another file export interface CriteriaQuery { objectId: string items: CriteriaItem[] includeRelatedData: boolean relatedObjects: string[] matchCondition: "ALL" | "ANY" estimatedRecords?: number | null } [V0_FILE]typescriptreact:file="src/components/migration/selective-migration-view.tsx" isQuickEdit="true" "use client" import { useRef, useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Database, AlertCircle } from "lucide-react" import { MigrationHeader } from "./migration-header" import { MigrationTabs, MigrationTabContent } from "./migration-tabs" import { transformedMigrationComponents } from "@/data/migration-api-mock-data" import { SchemaConfigTab } from "./tabs/schema-config-tab" import { DataTab } from "./tabs/data-tab" import { ExtensibilityTab } from "./tabs/extensibility-tab" import { mockSchemaComparisonData, schemaCategories } from "@/data/schema-comparison-mock" import { mockConfigurationComparisonData, configurationCategories } from "@/data/configuration-comparison-mock" import { migrationCategories } from "@/data/migration-categories" import type { CriteriaQuery, CriteriaItem } from "@/data/data-criteria-mock" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export interface DataFilterState { items: CriteriaItem[] matchCondition: "ALL" | "ANY" appliedFilter: string | null estimatedRecords: number | null showCriteria: boolean } interface SelectiveMigrationViewProps { sourceOrg: any targetOrg: any activeTab: string onTabChange: (value: string) => void isTabLoading?: boolean searchTerms: Record onSearchChange: (category: string, term: string) => void selectedComponents: string[] userSelectedComponents: string[] onComponentToggle: (componentId: string) => void onSelectAllInCategory: () => void selectedSubcategories: string[] onSubcategoryChange: (subcategories: string[]) => void onBack: () => void onReviewSelection: ( schemaObjects?: string[], configurationObjects?: string[], selectedSchemaFields?: Record, selectedConfigurationFields?: Record, autoIncludedDataCount?: number, selectedDataObjects?: string[], dataObjectQueries?: Record, ) => void announceMessage: string filteredComponents: any[] selectedDataObjects?: string[] dataObjectQueries?: Record onDataObjectSelectionChange?: (objectId: string, isSelected: boolean, query?: CriteriaQuery | null) => void selectedConfigurationObjects?: string[] selectedSchemaObjects?: string[] selectedSchemaFields?: Record selectedConfigurationFields?: Record } export function SelectiveMigrationView({ sourceOrg, targetOrg, activeTab, onTabChange, isTabLoading = false, searchTerms, onSearchChange, selectedComponents, userSelectedComponents, onComponentToggle, onSelectAllInCategory, selectedSubcategories, onSubcategoryChange, onBack, onReviewSelection, announceMessage, filteredComponents, selectedDataObjects = [], dataObjectQueries = {}, onDataObjectSelectionChange, selectedSchemaObjects: selectedSchemaObjectsFromParent = [], selectedSchemaFields: selectedSchemaFieldsFromParent = {}, selectedConfigurationFields: selectedConfigurationFieldsFromParent = {}, }: SelectiveMigrationViewProps) { const reviewButtonRef = useRef(null) const hasRestoredFilters = useRef(false) const [selectedSchemaObjects, setSelectedSchemaObjects] = useState(selectedSchemaObjectsFromParent) const [schemaSearchTerm, setSchemaSearchTerm] = useState("") const [selectedSchemaCategory, setSelectedSchemaCategory] = useState("all") const [selectedConfigurationObjectsLocal, setSelectedConfigurationObjectsLocal] = useState( selectedSchemaObjectsFromParent, ) const [configurationSearchTerm, setConfigurationSearchTerm] = useState("") const [selectedConfigurationCategory, setSelectedConfigurationCategory] = useState("all") const [autoIncludedDataCount, setAutoIncludedDataCount] = useState(0) const [selectedSchemaFields, setSelectedSchemaFields] = useState>(selectedSchemaFieldsFromParent) const [selectedConfigurationFields, setSelectedConfigurationFields] = useState>( selectedConfigurationFieldsFromParent, ) const [dataFilterStates, setDataFilterStates] = useState>({}) useEffect(() => { if (Object.keys(dataObjectQueries).length > 0 && !hasRestoredFilters.current) { const newFilterStates: Record = {} Object.entries(dataObjectQueries).forEach(([objectId, query]) => { if (query && query.items && query.items.length > 0) { newFilterStates[objectId] = { items: query.items, matchCondition: query.matchCondition || "ALL", showCriteria: false, appliedFilter: query.items.length > 0 ? query : null, estimatedRecords: query.estimatedRecords ?? null, } } }) // Only update if we have new states to add if (Object.keys(newFilterStates).length > 0) { console.log("[v0] Initializing dataFilterStates from dataObjectQueries:", newFilterStates) setDataFilterStates((prev) => ({ ...prev, ...newFilterStates, })) hasRestoredFilters.current = true } } }, [dataObjectQueries]) useEffect(() => { console.log("[v0] Schema objects from parent changed:", selectedSchemaObjectsFromParent) setSelectedSchemaObjects(selectedSchemaObjectsFromParent) }, [selectedSchemaObjectsFromParent]) useEffect(() => { console.log("[v0] Configuration objects from parent changed:", selectedSchemaObjectsFromParent) setSelectedConfigurationObjectsLocal(selectedSchemaObjectsFromParent) }, [selectedSchemaObjectsFromParent]) useEffect(() => { console.log("[v0] Data objects from parent:", selectedDataObjects) console.log("[v0] Data object queries from parent:", dataObjectQueries) }, [selectedDataObjects, dataObjectQueries]) useEffect(() => { setSelectedSchemaFields(selectedSchemaFieldsFromParent) }, [selectedSchemaFieldsFromParent]) useEffect(() => { setSelectedConfigurationFields(selectedConfigurationFieldsFromParent) }, [selectedConfigurationFieldsFromParent]) const getCategoryCount = (categoryId: string) => { if (categoryId === "schema") { // Count objects that have field selections return Object.keys(selectedSchemaFields).length } if (categoryId === "data") { return selectedDataObjects.length + autoIncludedDataCount } if (categoryId === "configuration") { // Count configuration items that have field selections return Object.keys(selectedConfigurationFields).length } return selectedComponents.filter( (id) => transformedMigrationComponents.find((c) => c.id === id)?.category === categoryId, ).length } const getTerminology = (categoryId: string) => { const terminology = { schema: { singular: "object", plural: "objects" }, data: { singular: "object", plural: "objects" }, configuration: { singular: "configuration", plural: "configurations" }, extensibility: { singular: "component", plural: "components" }, } return terminology[categoryId as keyof typeof terminology] || { singular: "component", plural: "components" } } const handleSchemaObjectToggle = (objectName: string) => { setSelectedSchemaObjects((prev) => prev.includes(objectName) ? prev.filter((name) => name !== objectName) : [...prev, objectName], ) } const handleSelectAllSchemaObjects = () => { const filteredSchemaObjects = mockSchemaComparisonData.filter((obj) => { const matchesSearch = obj.name.toLowerCase().includes(schemaSearchTerm.toLowerCase()) || obj.displayName.toLowerCase().includes(schemaSearchTerm.toLowerCase()) const matchesCategory = selectedSchemaCategory === "all" || obj.category === selectedSchemaCategory const isSelectable = obj.changeType !== "removed" return matchesSearch && matchesCategory && isSelectable }) const filteredNames = filteredSchemaObjects.map((obj) => obj.name) const allFilteredFieldsSelected = filteredNames.every((name) => { const obj = mockSchemaComparisonData.find((o) => o.name === name) if (!obj) return false const selectableFieldNames = obj.fieldsWithChanges.filter((f) => f.changeType !== "removed").map((f) => f.name) const selectedFieldsForObj = selectedSchemaFields[name] || [] return selectableFieldNames.every((fieldName) => selectedFieldsForObj.includes(fieldName)) }) if (allFilteredFieldsSelected && filteredNames.length > 0) { setSelectedSchemaFields((prev) => { const newFields = { ...prev } filteredNames.forEach((name) => { delete newFields[name] }) return newFields }) setSelectedSchemaObjects((prev) => prev.filter((name) => !filteredNames.includes(name))) } else { setSelectedSchemaFields((prev) => { const newFields = { ...prev } filteredSchemaObjects.forEach((obj) => { const selectableFieldNames = obj.fieldsWithChanges .filter((f) => f.changeType !== "removed") .map((f) => f.name) newFields[obj.name] = selectableFieldNames }) return newFields }) setSelectedSchemaObjects((prev) => { const allNames = [...prev] filteredNames.forEach((name) => { if (!allNames.includes(name)) { allNames.push(name) } }) return allNames }) } } const handleConfigurationObjectToggle = (configName: string) => { setSelectedConfigurationObjectsLocal((prev) => prev.includes(configName) ? prev.filter((name) => name !== configName) : [...prev, configName], ) } const handleSelectAllConfigurationObjects = () => { const filteredConfigObjects = mockConfigurationComparisonData.filter((obj) => { const matchesSearch = obj.name.toLowerCase().includes(configurationSearchTerm.toLowerCase()) || obj.displayName.toLowerCase().includes(configurationSearchTerm.toLowerCase()) const matchesCategory = selectedConfigurationCategory === "all" || obj.category === selectedConfigurationCategory const isSelectable = obj.changeType !== "removed" return matchesSearch && matchesCategory && isSelectable }) const filteredNames = filteredConfigObjects.map((obj) => obj.name) const allFilteredSettingsSelected = filteredNames.every((name) => { const obj = mockConfigurationComparisonData.find((o) => o.name === name) if (!obj) return false const selectableSettingNames = obj.settingsWithChanges .filter((s) => s.changeType !== "removed") .map((s) => s.name) const selectedSettingsForConfig = selectedConfigurationFields[name] || [] return selectableSettingNames.every((settingName) => selectedSettingsForConfig.includes(settingName)) }) if (allFilteredSettingsSelected && filteredNames.length > 0) { setSelectedConfigurationFields((prev) => { const newFields = { ...prev } filteredNames.forEach((name) => { delete newFields[name] }) return newFields }) setSelectedConfigurationObjectsLocal((prev) => prev.filter((name) => !filteredNames.includes(name))) } else { setSelectedConfigurationFields((prev) => { const newFields = { ...prev } filteredConfigObjects.forEach((obj) => { const selectableSettingNames = obj.settingsWithChanges .filter((s) => s.changeType !== "removed") .map((s) => s.name) newFields[obj.name] = selectableSettingNames }) return newFields }) setSelectedConfigurationObjectsLocal((prev) => { const allNames = [...prev] filteredNames.forEach((name) => { if (!allNames.includes(name)) { allNames.push(name) } }) return allNames }) } } const handleReviewSelectionClick = () => { onReviewSelection( selectedSchemaObjects, selectedConfigurationObjectsLocal, selectedSchemaFields, selectedConfigurationFields, autoIncludedDataCount, selectedDataObjects, dataObjectQueries, ) } const handleDataObjectQueryChange = (objectId: string, query: CriteriaQuery | null) => { if (onDataObjectSelectionChange) { const isSelected = selectedDataObjects.includes(objectId) onDataObjectSelectionChange(objectId, isSelected, query) } } const handleDataObjectToggle = (objectId: string) => { const isCurrentlySelected = selectedDataObjects.includes(objectId) const newSelectionState = !isCurrentlySelected if (newSelectionState) { onDataObjectSelectionChange(objectId, true, dataObjectQueries[objectId] || null) } else { const dependentIds = onDataObjectSelectionChange(objectId, false, null) // Clear filter states for the parent object and all dependents setDataFilterStates((prev) => { const newStates = { ...prev } delete newStates[objectId] if (dependentIds && Array.isArray(dependentIds)) { dependentIds.forEach((depId: string) => { delete newStates[depId] }) } return newStates }) } } const handleDataFilterStateChange = (objectId: string, filterState: DataFilterState) => { setDataFilterStates((prev) => ({ ...prev, [objectId]: filterState, })) } const handleSchemaFieldToggle = (objectName: string, fieldName: string) => { const obj = mockSchemaComparisonData.find((o) => o.name === objectName) const field = obj?.fieldsWithChanges.find((f) => f.name === fieldName) if (field?.changeType === "removed") { return } setSelectedSchemaFields((prev) => { const currentFields = prev[objectName] || [] const isSelected = currentFields.includes(fieldName) if (isSelected) { // Remove field const newFields = currentFields.filter((f) => f !== fieldName) if (newFields.length === 0) { const { [objectName]: _, ...rest } = prev return rest } return { ...prev, [objectName]: newFields } } else { // Add field return { ...prev, [objectName]: [...currentFields, fieldName] } } }) } const handleConfigurationFieldToggle = (configName: string, fieldName: string) => { const config = mockConfigurationComparisonData.find((c) => c.name === configName) const setting = config?.settingsWithChanges.find((s) => s.name === fieldName) if (setting?.changeType === "removed") { return } setSelectedConfigurationFields((prev) => { const currentFields = prev[configName] || [] const isSelected = currentFields.includes(fieldName) if (isSelected) { // Remove field const newFields = currentFields.filter((f) => f !== fieldName) if (newFields.length === 0) { const { [configName]: _, ...rest } = prev return rest } return { ...prev, [configName]: newFields } } else { // Add field return { ...prev, [configName]: [...currentFields, fieldName] } } }) } const schemaComparisonData = mockSchemaComparisonData.map((obj) => ({ name: obj.name, displayName: obj.displayName, description: obj.description, category: obj.category, changeType: obj.changeType, hasChanges: obj.hasChanges, changesWithDetails: obj.fieldsWithChanges, })) const configurationComparisonData = mockConfigurationComparisonData.map((config) => ({ name: config.name, displayName: config.displayName, description: config.description, category: config.category, changeType: config.changeType, hasChanges: config.hasChanges, changesWithDetails: config.settingsWithChanges, })) const hasSchemaSelections = Object.keys(selectedSchemaFields).length > 0 const hasConfigurationSelections = Object.keys(selectedConfigurationFields).length > 0 console.log("[v0] hasConfigurationSelections:", hasConfigurationSelections) console.log("[v0] selectedConfigurationFields:", selectedConfigurationFields) console.log("[v0] selectedConfigurationFields keys:", Object.keys(selectedConfigurationFields)) const hasZeroRecordWarning = () => { return selectedDataObjects.some((objectId) => { const filterState = dataFilterStates[objectId] return filterState?.appliedFilter && filterState?.estimatedRecords === 0 }) } return (

{announceMessage}

Component Selection
{}} changesLabel="field" emptyStateMessage={ schemaSearchTerm || selectedSchemaCategory !== "all" ? "Try adjusting your search or category filter." : "No schema changes detected between source and target environments." } selectedFields={selectedSchemaFields} onFieldToggle={handleSchemaFieldToggle} showDownloadReport={true} /> onSearchChange("data", term)} selectedSubcategories={selectedSubcategories} onSubcategoryChange={onSubcategoryChange} onSelectAll={onSelectAllInCategory} isTabLoading={isTabLoading} dataFilterStates={dataFilterStates} onDataFilterStateChange={handleDataFilterStateChange} onAutoIncludedCountChange={setAutoIncludedDataCount} /> c.id === "configuration")!.icon} totalBadgeText={`${mockConfigurationComparisonData.length} changed configurations`} sourceOrg={sourceOrg} targetOrg={targetOrg} comparisonData={configurationComparisonData} categories={configurationCategories} selectedItems={selectedConfigurationObjectsLocal} onItemToggle={handleConfigurationObjectToggle} onSelectAll={handleSelectAllConfigurationObjects} searchTerm={configurationSearchTerm} onSearchChange={setConfigurationSearchTerm} selectedCategory={selectedConfigurationCategory} onCategoryChange={setSelectedConfigurationCategory} onDownloadReport={() => {}} changesLabel="setting" emptyStateMessage={ configurationSearchTerm || selectedConfigurationCategory !== "all" ? "Try adjusting your search or category filter." : "No configuration changes detected between source and target environments." } selectedFields={selectedConfigurationFields} onFieldToggle={handleConfigurationFieldToggle} showDownloadReport={false} /> onSearchChange("extensibility", term)} onSelectAll={onSelectAllInCategory} isTabLoading={isTabLoading} />

Selection Summary {selectedComponents.length > 0 || selectedSchemaObjects.length > 0 || selectedDataObjects.length > 0 || selectedConfigurationObjectsLocal.length > 0 || hasSchemaSelections || hasConfigurationSelections ? (

Selected Components

{migrationCategories.map((category) => { const count = getCategoryCount(category.id) const totalInCategory = category.id === "schema" ? mockSchemaComparisonData.length : category.id === "data" ? 9 : category.id === "configuration" ? mockConfigurationComparisonData.length : transformedMigrationComponents.filter((c) => c.category === category.id).length const terminology = getTerminology(category.id) const Icon = category.icon const hasSelection = count > 0 const showZeroRecordWarning = category.id === "data" && hasSelection && hasZeroRecordWarning() return (

{category.name}

{count} selected {showZeroRecordWarning && (
Some selected objects have no records matching the applied filter criteria and will be excluded from migration
)}

from {totalInCategory} {totalInCategory === 1 ? terminology.singular : terminology.plural}

) })}

) : (

No components selected

Select components to start building your migration.

)} {(selectedComponents.length > 0 || selectedDataObjects.length > 0 || hasSchemaSelections || hasConfigurationSelections) && (

Additional dependent objects may be automatically included in your selection. Review your selection to see all included components.

)}

) } [V0_FILE]typescriptreact:file="src/components/migration/review-tabs/schema-review-tab.tsx" isQuickEdit="true" "use client" import { ChevronDown } from "lucide-react" import { Badge } from "@/components/ui/badge" import { CenteredPagination } from "@/components/ui/centered-pagination" import { useState } from "react" import { mockSchemaComparisonData } from "@/data/schema-comparison-mock" interface SchemaReviewTabProps { selectedSchemaFields: Record currentPage: number onPageChange: (page: number) => void itemsPerPage?: number } const ITEMS_PER_PAGE = 10 export function SchemaReviewTab({ selectedSchemaFields, currentPage, onPageChange, itemsPerPage = ITEMS_PER_PAGE, }: SchemaReviewTabProps) { const [expandedObjects, setExpandedObjects] = useState>(new Set()) const toggleObject = (objectId: string) => { setExpandedObjects((prev) => { const newSet = new Set(prev) if (newSet.has(objectId)) { newSet.delete(objectId) } else { newSet.add(objectId) } return newSet }) } const schemaObjects = Object.keys(selectedSchemaFields) const totalItems = schemaObjects.length const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage)) const startIndex = (currentPage - 1) * itemsPerPage const endIndex = startIndex + itemsPerPage const currentItems = schemaObjects.slice(startIndex, endIndex) if (schemaObjects.length === 0) { return (

No schema objects selected

) } return (
{currentItems.map((objectId) => { const fields = selectedSchemaFields[objectId] || [] const isExpanded = expandedObjects.has(objectId) const schemaObject = mockSchemaComparisonData.find((obj) => obj.name === objectId) return (

{schemaObject?.displayName || objectId}
Schema

{schemaObject?.description || `Schema object with ${fields.length} selected field${fields.length !== 1 ? "s" : ""}`}

{isExpanded && (

{fields.map((field) => (
• {field}
))}

)}

) })} {totalItems > 0 && totalPages > 1 && ( )}
) } [V0_FILE]typescriptreact:file="src/components/migration/review-tabs/configuration-review-tab.tsx" isQuickEdit="true" "use client" import { ChevronDown } from "lucide-react" import { Badge } from "@/components/ui/badge" import { CenteredPagination } from "@/components/ui/centered-pagination" import { useState } from "react" import { mockConfigurationComparisonData } from "@/data/configuration-comparison-mock" interface ConfigurationReviewTabProps { selectedConfigurationFields: Record currentPage: number onPageChange: (page: number) => void itemsPerPage?: number } const ITEMS_PER_PAGE = 10 export function ConfigurationReviewTab({ selectedConfigurationFields, currentPage, onPageChange, itemsPerPage = ITEMS_PER_PAGE, }: ConfigurationReviewTabProps) { const [expandedObjects, setExpandedObjects] = useState>(new Set()) const toggleObject = (objectId: string) => { setExpandedObjects((prev) => { const newSet = new Set(prev) if (newSet.has(objectId)) { newSet.delete(objectId) } else { newSet.add(objectId) } return newSet }) } const configObjects = Object.keys(selectedConfigurationFields) const totalItems = configObjects.length const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage)) const startIndex = (currentPage - 1) * itemsPerPage const endIndex = startIndex + itemsPerPage const currentItems = configObjects.slice(startIndex, endIndex) if (configObjects.length === 0) { return (

No configuration objects selected

) } return (
{currentItems.map((objectId) => { const settings = selectedConfigurationFields[objectId] || [] const isExpanded = expandedObjects.has(objectId) const configObject = mockConfigurationComparisonData.find((obj) => obj.name === objectId) return (

{configObject?.displayName || objectId}
Configuration

{configObject?.description || `Configuration object with ${settings.length} selected setting${settings.length !== 1 ? "s" : ""}`}

{isExpanded && (

{settings.map((setting) => (
• {setting}
))}

)}

) })} {totalItems > 0 && totalPages > 1 && ( )}
) } [V0_FILE]typescriptreact:file="src/components/shared/criteria-rule.tsx" isQuickEdit="true" "use client" import { memo } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Combobox } from "@/components/ui/combobox" import { Trash2 } from "lucide-react" import type { CriteriaRule } from "@/data/data-criteria-mock" interface Field { name: string label: string type: "text" | "number" | "date" | "boolean" | "picklist" options?: string[] } interface Operator { value: string label: string } interface CriteriaRuleComponentProps { rule: CriteriaRule path: number[] fields: Field[] fieldOperators: Record onUpdateRule: (path: number[], updates: Partial) => void onRemoveItem: (path: number[]) => void } export const CriteriaRuleComponent = memo(function CriteriaRuleComponent({ rule, path, fields, fieldOperators, onUpdateRule, onRemoveItem, }: CriteriaRuleComponentProps) { const getFieldType = (fieldName: string) => { return fields.find((f) => f.name === fieldName)?.type || "text" } const getFieldOptions = (fieldName: string) => { return fields.find((f) => f.name === fieldName)?.options || [] } const fieldType = getFieldType(rule.field) return (

{rule.logicalOperator || "And"}
({ value: field.name, label: field.label }))} value={rule.field} onValueChange={(value) => onUpdateRule(path, { field: value, operator: "", value: "" })} placeholder="Select field..." searchPlaceholder="Search fields..." emptyText="No fields found." className="w-full md:flex-1" />
{fieldType === "picklist" ? ( ) : fieldType === "boolean" ? ( ) : ( onUpdateRule(path, { value: e.target.value })} placeholder="Value" className="border border-neutral-300 bg-white" /> )}

) }) [V0_FILE]typescriptreact:file="src/components/shared/criteria-builder.tsx" isQuickEdit="true" "use client" import { useCallback } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Plus, ChevronDown } from "lucide-react" import type { CriteriaItem, CriteriaRule, CriteriaGroup } from "@/data/data-criteria-mock" import { isCriteriaGroup } from "@/data/data-criteria-mock" import { CriteriaRuleComponent } from "./criteria-rule" import { CriteriaGroupComponent } from "./criteria-group" interface Field { name: string label: string type: "text" | "number" | "date" | "boolean" | "picklist" options?: string[] } interface Operator { value: string label: string } interface CriteriaBuilderProps { items: CriteriaItem[] matchCondition: "ALL" | "ANY" fields: Field[] fieldOperators: Record onItemsChange: (items: CriteriaItem[]) => void onMatchConditionChange: (condition: "ALL" | "ANY") => void onApplyFilter?: () => void } export function CriteriaBuilder({ items, matchCondition, fields, fieldOperators, onItemsChange, onMatchConditionChange, onApplyFilter, }: CriteriaBuilderProps) { const countRules = useCallback((items: CriteriaItem[]): number => { return items.reduce((count, item) => { if (isCriteriaGroup(item)) { return count + countRules(item.items) } return count + 1 }, 0) }, []) const getItemAtPath = useCallback((items: CriteriaItem[], path: number[]): CriteriaItem | null => { if (path.length === 0) return null let current: CriteriaItem | null = items[path[0]] for (let i = 1; i < path.length; i++) { if (current && isCriteriaGroup(current)) { current = current.items[path[i]] } else { return null } } return current }, []) const addRule = useCallback( (path: number[] = [], parentOperator?: "And" | "Or") => { const newRule: CriteriaRule = { id: `rule-${Date.now()}`, field: "", operator: "", value: "", logicalOperator: "And", } if (path.length === 0) { const newItems = [...items] if (newItems.length === 0) { newRule.logicalOperator = "Where" } else { newRule.logicalOperator = matchCondition === "ANY" ? "Or" : "And" } newItems.push(newRule) onItemsChange(newItems) } else { const newItems = [...items] const parent = getItemAtPath(newItems, path) as CriteriaGroup if (parent && isCriteriaGroup(parent)) { if (parent.items.length === 0) { newRule.logicalOperator = "Where" } else { newRule.logicalOperator = parent.logicalOperator === "Or" ? "Or" : "And" } parent.items.push(newRule) onItemsChange(newItems) } } }, [items, matchCondition, fields, onItemsChange, getItemAtPath], ) const addGroup = useCallback( (path: number[] = []) => { const newGroup: CriteriaGroup = { id: `group-${Date.now()}`, logicalOperator: "And", items: [], } if (path.length === 0) { const newItems = [...items, newGroup] onItemsChange(newItems) } else { const newItems = [...items] const parent = getItemAtPath(newItems, path) as CriteriaGroup if (parent && isCriteriaGroup(parent)) { parent.items.push(newGroup) onItemsChange(newItems) } } }, [items, onItemsChange, getItemAtPath], ) const removeItem = useCallback( (path: number[]) => { const newItems = [...items] if (path.length === 1) { newItems.splice(path[0], 1) if (newItems.length > 0 && !isCriteriaGroup(newItems[0])) { ;(newItems[0] as CriteriaRule).logicalOperator = "Where" } for (let i = 1; i < newItems.length; i++) { if (!isCriteriaGroup(newItems[i])) { ;(newItems[i] as CriteriaRule).logicalOperator = matchCondition === "ANY" ? "Or" : "And" } } } else { const parentPath = path.slice(0, -1) const parent = getItemAtPath(newItems, parentPath) as CriteriaGroup if (parent && isCriteriaGroup(parent)) { parent.items.splice(path[path.length - 1], 1) if (parent.items.length > 0 && !isCriteriaGroup(parent.items[0])) { ;(parent.items[0] as CriteriaRule).logicalOperator = "Where" } for (let i = 1; i < parent.items.length; i++) { if (!isCriteriaGroup(parent.items[i])) { ;(parent.items[i] as CriteriaRule).logicalOperator = parent.logicalOperator === "Or" ? "Or" : "And" } } } } onItemsChange(newItems) }, [items, matchCondition, onItemsChange, getItemAtPath], ) const updateRule = useCallback( (path: number[], updates: Partial) => { const newItems = [...items] const item = getItemAtPath(newItems, path) if (item && !isCriteriaGroup(item)) { Object.assign(item, updates) onItemsChange(newItems) } }, [items, onItemsChange, getItemAtPath], ) const updateGroup = useCallback( (path: number[], updates: Partial) => { const newItems = [...items] const item = getItemAtPath(newItems, path) if (item && isCriteriaGroup(item)) { Object.assign(item, updates) if (updates.logicalOperator) { for (let i = 1; i < item.items.length; i++) { if (!isCriteriaGroup(item.items[i])) { ;(item.items[i] as CriteriaRule).logicalOperator = updates.logicalOperator === "Or" ? "Or" : "And" } } } onItemsChange(newItems) } }, [items, onItemsChange, getItemAtPath], ) const handleMatchConditionChange = useCallback( (value: "ALL" | "ANY") => { onMatchConditionChange(value) const newItems = [...items] for (let i = 1; i < newItems.length; i++) { if (!isCriteriaGroup(newItems[i])) { ;(newItems[i] as CriteriaRule).logicalOperator = value === "ANY" ? "Or" : "And" } } onItemsChange(newItems) }, [items, onItemsChange, onMatchConditionChange], ) const allRulesHaveValues = useCallback((items: CriteriaItem[]): boolean => { return items.every((item) => { if (isCriteriaGroup(item)) { return allRulesHaveValues(item.items) } return item.value !== "" && item.value !== null && item.value !== undefined }) }, []) const hasRules = countRules(items) > 0 const isApplyEnabled = hasRules && allRulesHaveValues(items) return (
{/* Match condition selector /}
Match: of the following conditions:
{/ Rules and groups /} {items.length === 0 ? (

Click "Add Filter Rule" to start filtering records

) : (
{items.map((item, index) => { const path = [index] if (isCriteriaGroup(item)) { return ( ) } else { return ( ) } })}
)} {/ Add controls /}
addRule()}> Add Rule addGroup()}> Add Group {onApplyFilter && ( )}

) } [V0_FILE]typescriptreact:file="src/components/shared/criteria-group.tsx" isQuickEdit="true" "use client" import { memo } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Plus, ChevronDown, Trash2 } from "lucide-react" import type { CriteriaGroup, CriteriaRule } from "@/data/data-criteria-mock" import { isCriteriaGroup } from "@/data/data-criteria-mock" import { CriteriaRuleComponent } from "./criteria-rule" interface Field { name: string label: string type: "text" | "number" | "date" | "boolean" | "picklist" options?: string[] } interface Operator { value: string label: string } interface CriteriaGroupComponentProps { group: CriteriaGroup path: number[] depth: number fields: Field[] fieldOperators: Record onUpdateGroup: (path: number[], updates: Partial) => void onUpdateRule: (path: number[], updates: Partial) => void onRemoveItem: (path: number[]) => void onAddRule: (path: number[], parentOperator?: "And" | "Or") => void onAddGroup: (path: number[]) => void } export const CriteriaGroupComponent = memo(function CriteriaGroupComponent({ group, path, depth, fields, fieldOperators, onUpdateGroup, onUpdateRule, onRemoveItem, onAddRule, onAddGroup, }: CriteriaGroupComponentProps) { const getDepthBackground = (depth: number) => { switch (depth) { case 0: return "bg-neutral-100" case 1: return "bg-neutral-200" case 2: return "bg-neutral-300" default: return "bg-neutral-400" } } return (

Group:

{group.items.map((item, index) => { const itemPath = [...path, index] if (isCriteriaGroup(item)) { return ( ) } else { return ( ) } })}
onAddRule(path, group.logicalOperator)}> Add Rule onAddGroup(path)}> Add Group

) }) [V0_FILE]typescriptreact:file="src/components/migration/data-object-filter.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { Filter, ChevronDown, ChevronUp, CheckCircle, AlertCircle, Lock } from "lucide-react" import { fieldOperators, type DataObject, type CriteriaQuery, type CriteriaItem, type CriteriaRule, } from "@/data/data-criteria-mock" import { CriteriaBuilder } from "@/components/shared/criteria-builder" import { isCriteriaGroup } from "@/data/data-criteria-mock" import type { DataFilterState } from "./selective-migration-view" import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip" interface DataObjectFilterProps { object: DataObject isSelected: boolean onToggle: (objectId: string) => void onQueryChange?: (objectId: string, query: CriteriaQuery | null) => void filterState?: DataFilterState onFilterStateChange?: (objectId: string, filterState: DataFilterState) => void isAutoIncluded?: boolean dependencyObjects?: DataObject[] parentObjects?: string[] isSelectAllActive?: boolean } export function DataObjectFilter({ object, isSelected, onToggle, onQueryChange, filterState, onFilterStateChange, isAutoIncluded = false, dependencyObjects = [], parentObjects = [], isSelectAllActive = false, }: DataObjectFilterProps) { const [showCriteria, setShowCriteria] = useState(filterState?.showCriteria || false) const [items, setItems] = useState(filterState?.items || []) const [matchCondition, setMatchCondition] = useState<"ALL" | "ANY">(filterState?.matchCondition || "ALL") const [appliedFilter, setAppliedFilter] = useState(filterState?.appliedFilter || null) const [estimatedRecords, setEstimatedRecords] = useState(filterState?.estimatedRecords || null) useEffect(() => { if (!isSelected) { setShowCriteria(false) setItems([]) setMatchCondition("ALL") setAppliedFilter(null) setEstimatedRecords(null) } }, [isSelected]) useEffect(() => { if (isAutoIncluded) { setShowCriteria(false) setItems([]) setMatchCondition("ALL") setAppliedFilter(null) setEstimatedRecords(null) persistFilterState({ items: [], matchCondition: "ALL", showCriteria: false, appliedFilter: null, estimatedRecords: null, }) } }, [isAutoIncluded]) const persistFilterState = (updates: Partial) => { if (onFilterStateChange) { const newState: DataFilterState = { items, matchCondition, appliedFilter, estimatedRecords, showCriteria, ...updates, } onFilterStateChange(object.id, newState) } } const countRules = (items: CriteriaItem[]): number => { return items.reduce((count, item) => { if ("items" in item) { return count + countRules(item.items) } return count + 1 }, 0) } const updateQuery = (newItems: CriteriaItem[]) => { if (onQueryChange) { const query: CriteriaQuery = { objectId: object.id, items: newItems, includeRelatedData: false, relatedObjects: [], matchCondition: matchCondition, } onQueryChange(object.id, countRules(newItems) > 0 ? query : null) } } const handleItemsChange = (newItems: CriteriaItem[]) => { setItems(newItems) updateQuery(newItems) persistFilterState({ items: newItems }) if (countRules(newItems) > 0 && !isSelected) { onToggle(object.id) } if (countRules(newItems) === 0 && isSelected) { onToggle(object.id) } } const handleMatchConditionChange = (condition: "ALL" | "ANY") => { setMatchCondition(condition) persistFilterState({ matchCondition: condition }) } const handleCheckboxToggle = () => { if (isSelected) { // Clear items, applied filter, and estimated records setItems([]) setAppliedFilter(null) setEstimatedRecords(null) setShowCriteria(false) persistFilterState({ items: [], appliedFilter: null, estimatedRecords: null, showCriteria: false, }) if (onQueryChange) { onQueryChange(object.id, null) } } // Toggle selection onToggle(object.id) } const generateFilterSummary = (items: CriteriaItem[]): string => { const summaries: string[] = [] items.forEach((item) => { if (isCriteriaGroup(item)) { const groupSummary = generateFilterSummary(item.items) if (groupSummary) summaries.push(`(${groupSummary})`) } else { const rule = item as CriteriaRule const field = object.queryableFields.find((f) => f.name === rule.field) const operator = fieldOperators[field?.type || "text"]?.find((op) => op.value === rule.operator) if (field && operator && rule.value) { summaries.push(`${field.label} ${operator.label} "${rule.value}"`) } } }) const connector = matchCondition === "ALL" ? " AND " : " OR " return summaries.join(connector) } const handleApplyFilter = () => { const summary = generateFilterSummary(items) const mockRecordCount = object.name === "Price List" ? 0 : Math.floor(Math.random() (9999 - 100 + 1)) + 100 setAppliedFilter(summary) setEstimatedRecords(mockRecordCount) persistFilterState({ appliedFilter: summary, estimatedRecords: mockRecordCount, }) // Pass the estimated records in the query if (onQueryChange) { const query: CriteriaQuery = { objectId: object.id, items: items, includeRelatedData: false, relatedObjects: [], matchCondition: matchCondition, estimatedRecords: mockRecordCount, // Store the estimated records } onQueryChange(object.id, countRules(items) > 0 ? query : null) } console.log("[v0] Filter applied:", summary, "Estimated records:", mockRecordCount) } const handleShowCriteriaToggle = () => { if (isAutoIncluded || isSelectAllActive) return const newShowCriteria = !showCriteria setShowCriteria(newShowCriteria) persistFilterState({ showCriteria: newShowCriteria }) } const isCheckboxDisabled = isAutoIncluded || isSelectAllActive return (

{isSelectAllActive && (
Disabled while 'Select All' is active
)}

{object.name} {object.subcategory} {isAutoIncluded && ( Auto Included
Required dependency of{" "} {parentObjects.length === 1 ? parentObjects[0] : parentObjects.slice(0, -1).join(", ") + " and " + parentObjects[parentObjects.length - 1]}
)}

{object.description}

{showCriteria && !isAutoIncluded && !isSelectAllActive && (

)}
{isSelectAllActive && (
Disabled while 'Select All' is active
)} {appliedFilter && estimatedRecords !== null && !isAutoIncluded && (

{estimatedRecords === 0 ? ( ) : ( )}
{estimatedRecords === 0 ? (
No records match the applied filter criteria
) : (
Estimated results: {estimatedRecords.toLocaleString()} records
)}

)}

) } [V0_FILE]typescriptreact:file="src/components/migration/tabs/shared/tab-search-filter.tsx" isQuickEdit="true" "use client" import type React from "react" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Search } from "lucide-react" interface TabSearchFilterProps { searchTerm: string onSearchChange: (term: string) => void searchPlaceholder: string showCategoryFilter?: boolean selectedCategory?: string onCategoryChange?: (category: string) => void categories?: Array<{ id: string; name: string; count: number }> showSelectAll?: boolean selectAllChecked?: boolean onSelectAllChange?: () => void selectAllLabel?: string isDisabled?: boolean customSelectAllRender?: React.ReactNode } export function TabSearchFilter({ searchTerm, onSearchChange, searchPlaceholder, showCategoryFilter = false, selectedCategory = "all", onCategoryChange, categories = [], showSelectAll = false, selectAllChecked = false, onSelectAllChange, selectAllLabel = "Select All", isDisabled = false, customSelectAllRender, }: TabSearchFilterProps) { return (
{customSelectAllRender ? customSelectAllRender : showSelectAll && (
{selectAllLabel}
)}
{showCategoryFilter && categories.length > 0 && onCategoryChange && (

)}
onSearchChange(e.target.value)} className="pl-10 bg-neutral-0 border-neutral-300" disabled={isDisabled} />

) } [V0_FILE]typescriptreact:file="src/components/migration/tabs/data-tab.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { DataObjectFilter } from "../data-object-filter" import { TabSearchFilter } from "./shared/tab-search-filter" import { mockDataObjects } from "@/data/data-criteria-mock" import type { CriteriaQuery } from "@/data/data-criteria-mock" import { CenteredPagination } from "@/components/ui/centered-pagination" import type { DataFilterState } from "../selective-migration-view" import { Alert, AlertDescription } from "@/components/ui/alert" import { Info } from "lucide-react" import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip" import { Checkbox } from "@/components/ui/checkbox" interface DataTabProps { selectedDataObjects: string[] dataObjectQueries: Record onDataObjectToggle: (objectId: string) => void onDataObjectQueryChange: (objectId: string, query: CriteriaQuery | null) => void searchTerm: string onSearchChange: (term: string) => void selectedSubcategories: string[] onSubcategoryChange: (subcategories: string[]) => void onSelectAll: () => void isTabLoading?: boolean dataFilterStates?: Record onDataFilterStateChange?: (objectId: string, filterState: DataFilterState) => void onAutoIncludedCountChange?: (count: number) => void } const ITEMS_PER_PAGE = 10 export function DataTab({ selectedDataObjects, dataObjectQueries, onDataObjectToggle, onDataObjectQueryChange, searchTerm, onSearchChange, selectedSubcategories, onSubcategoryChange, onSelectAll, isTabLoading = false, dataFilterStates = {}, onDataFilterStateChange, onAutoIncludedCountChange, }: DataTabProps) { const [currentPage, setCurrentPage] = useState(1) const [manuallySelectedObjects, setManuallySelectedObjects] = useState>(new Set()) const [selectAllTriggered, setSelectAllTriggered] = useState(false) const [filterStateVersion, setFilterStateVersion] = useState(0) const isSelectAllActive = selectedDataObjects.length === mockDataObjects.length const hasActiveFiltersOrSearch = searchTerm.trim() !== "" || selectedSubcategories.length > 0 const getAutoIncludedDependencies = (): Map => { if (isSelectAllActive) { return new Map() } const dependencyMap = new Map() selectedDataObjects.forEach((objectId) => { const object = mockDataObjects.find((obj) => obj.id === objectId) if (object && object.relatedObjects) { object.relatedObjects.forEach((depId) => { const parents = dependencyMap.get(depId) || [] parents.push(object.name) dependencyMap.set(depId, parents) }) } }) return dependencyMap } const autoIncludedDependencyMap = getAutoIncludedDependencies() const autoIncludedObjectIds = Array.from(autoIncludedDependencyMap.keys()).filter( (depId) => !selectedDataObjects.includes(depId), ) useEffect(() => { if (isSelectAllActive) { setManuallySelectedObjects(new Set(selectedDataObjects)) } }, [isSelectAllActive, selectedDataObjects]) useEffect(() => { const newManuallySelected = new Set(manuallySelectedObjects) let hasChanges = false autoIncludedDependencyMap.forEach((parents, depId) => { if (parents.length > 0 && selectedDataObjects.includes(depId)) { if (newManuallySelected.has(depId)) { newManuallySelected.delete(depId) hasChanges = true if (dataObjectQueries[depId]) { onDataObjectQueryChange(depId, null) } if (dataFilterStates[depId]) { onDataFilterStateChange?.(depId, { isOpen: false, resultMessage: "", items: [], showCriteria: false, appliedFilter: null, estimatedRecords: null, matchCondition: "ALL", }) } } } }) if (hasChanges) { setManuallySelectedObjects(newManuallySelected) } Object.keys(dataFilterStates).forEach((objectId) => { const parents = autoIncludedDependencyMap.get(objectId) || [] if (parents.length === 0 && !selectedDataObjects.includes(objectId)) { onDataFilterStateChange?.(objectId, { isOpen: false, resultMessage: "", items: [], showCriteria: false, appliedFilter: null, estimatedRecords: null, matchCondition: "ALL", }) } }) }, [JSON.stringify(Array.from(autoIncludedDependencyMap.entries())), selectedDataObjects]) useEffect(() => { setManuallySelectedObjects((prev) => { const newSet = new Set(prev) Array.from(newSet).forEach((id) => { if (!selectedDataObjects.includes(id)) { newSet.delete(id) } }) return newSet }) }, [selectedDataObjects]) useEffect(() => { if (onAutoIncludedCountChange) { onAutoIncludedCountChange(autoIncludedObjectIds.length) } }, [autoIncludedObjectIds.length, onAutoIncludedCountChange]) const getDependencyObjects = (objectId: string) => { const object = mockDataObjects.find((obj) => obj.id === objectId) if (!object || !object.relatedObjects) return [] return object.relatedObjects .map((depId) => mockDataObjects.find((obj) => obj.id === depId)) .filter((obj): obj is (typeof mockDataObjects)[0] => obj !== undefined) } const getSubcategories = () => { const subcategories = [...new Set(mockDataObjects.map((obj) => obj.subcategory).filter(Boolean))] return subcategories.sort().map((sub) => ({ id: sub, name: sub, count: mockDataObjects.filter((obj) => obj.subcategory === sub).length, })) } const filteredDataObjects = mockDataObjects.filter((obj) => { const matchesSearch = obj.name.toLowerCase().includes(searchTerm.toLowerCase()) || obj.description.toLowerCase().includes(searchTerm.toLowerCase()) const matchesSubcategory = selectedSubcategories.length === 0 || selectedSubcategories.includes(obj.subcategory) return matchesSearch && matchesSubcategory }) const totalItems = filteredDataObjects.length const totalPages = Math.max(1, Math.ceil(totalItems / ITEMS_PER_PAGE)) const startIndex = (currentPage - 1) * ITEMS_PER_PAGE const endIndex = startIndex + ITEMS_PER_PAGE const currentItems = filteredDataObjects.slice(startIndex, endIndex) useEffect(() => { setCurrentPage(1) }, [searchTerm, selectedSubcategories]) const allSubcategories = getSubcategories() const categoriesWithAll = [{ id: "all", name: "All categories", count: mockDataObjects.length }, ...allSubcategories] const selectedCategory = selectedSubcategories.length === 1 ? selectedSubcategories[0] : "all" const handleCategoryChange = (value: string) => { if (value === "all") { onSubcategoryChange([]) } else { onSubcategoryChange([value]) } } const handleSelectAllToggle = () => { const allSelected = filteredDataObjects.length > 0 && filteredDataObjects.every((obj) => selectedDataObjects.includes(obj.id)) if (allSelected) { filteredDataObjects.forEach((obj) => { if (selectedDataObjects.includes(obj.id)) { onDataObjectToggle(obj.id) } }) setManuallySelectedObjects(new Set()) } else { setSelectAllTriggered(true) filteredDataObjects.forEach((obj) => { if (!selectedDataObjects.includes(obj.id)) { onDataObjectToggle(obj.id) } }) } } useEffect(() => { if (selectAllTriggered && selectedDataObjects.length > 0) { setManuallySelectedObjects(new Set(selectedDataObjects)) setSelectAllTriggered(false) } }, [selectAllTriggered, selectedDataObjects]) const handleDataObjectToggle = (objectId: string) => { if (selectedDataObjects.includes(objectId)) { setManuallySelectedObjects((prev) => { const newSet = new Set(prev) newSet.delete(objectId) return newSet }) } else { setManuallySelectedObjects((prev) => new Set(prev).add(objectId)) } onDataObjectToggle(objectId) } const allFilteredSelected = filteredDataObjects.length > 0 && filteredDataObjects.every((obj) => selectedDataObjects.includes(obj.id)) const handlePageChange = (page: number) => { setCurrentPage(page) } useEffect(() => { const hasRestoredFilters = Object.keys(dataFilterStates).some( (key) => dataFilterStates[key]?.appliedFilter != null || dataFilterStates[key]?.estimatedRecords != null, ) if (hasRestoredFilters) { setFilterStateVersion((prev) => prev + 1) } }, [Object.keys(dataFilterStates).length]) const getSelectAllTooltipContent = () => { if (hasActiveFiltersOrSearch) { return "Clear all filters and search to use Select All" } if (isSelectAllActive) { return "All objects selected. Individual selection and filtering are disabled." } return "Selecting all will migrate all objects. Individual selection and filtering will be disabled." } const isSelectAllDisabled = isTabLoading || hasActiveFiltersOrSearch const selectAllLabel = hasActiveFiltersOrSearch ? "Select All" : `Select All (${filteredDataObjects.length} objects)` const customSelectAllRender = (

{selectAllLabel}

{getSelectAllTooltipContent()}

{getSelectAllTooltipContent()}

) return ( {isSelectAllActive && ( All objects selected for migration. To customize your selection, deselect 'Select All' first. )}
{currentItems.map((object) => { const parentObjects = autoIncludedDependencyMap.get(object.id) || [] const isAutoIncluded = !isSelectAllActive && parentObjects.length > 0 && !manuallySelectedObjects.has(object.id) const dependencyObjects = getDependencyObjects(object.id) return ( ) })}
) }