IFIF Project Management System

import { useDeployProject } from '@/lib/ifif-project-management-hooks'
import { DeployProjectModal } from '@/components/ifif-project-management-modals'
import { shortenHash, shortenAddress } from '@/config/constants'
import { toast } from 'sonner'
 
function DeployProjectButton() {
  const { deployProject, isLoading, isSuccess, isError, error, txHash, reset } = useDeployProject()
  
  const handleDeployProject = async () => {
    try {
      const config = {
        fundToken: '0x123...' as Address,
        projectId: 1,
        fundAmount: parseUnits('1000', 18),
        privateSaleTime: Math.floor(Date.now() / 1000) + 86400, // 1 day from now
        privateBonusPercent: 10,
        publicSaleTime: Math.floor(Date.now() / 1000) + 172800, // 2 days from now
        desiredEndEpoch: Math.floor(Date.now() / 1000) + 604800 // 1 week from now
      }
      
      const nextConfig = {
        projectOwner: '0x456...' as Address,
        distributor: '0x789...' as Address,
        distributorFeePercent: 5,
        projectOwnerFeePercent: 10,
        platformFeePercent: 2,
        pairPrice: parseUnits('1', 18)
      }
      
      const hash = await deployProject({
        config,
        nextConfig,
        configSignature: '0xsignature1...' as `0x${string}`,
        nextConfigSignature: '0xsignature2...' as `0x${string}`,
        projectName: 'Test Project',
        projectSymbol: 'TEST'
      })
      
      console.log('Transaction hash:', hash)
    } catch (err) {
      console.error('Failed to deploy project:', err)
      // Error is automatically handled by the hook state
    }
  }
 
  // Handle success state
  useEffect(() => {
    if (isSuccess && txHash) {
      toast.success(`Project deployed successfully! TX: ${shortenHash(txHash)}`)
      reset() // Reset hook state after success
    }
  }, [isSuccess, txHash, reset])
 
  // Handle error state
  useEffect(() => {
    if (isError && error) {
      toast.error(`Deployment failed: ${error}`)
    }
  }, [isError, error])
 
  return (
    <Button 
      onClick={handleDeployProject}
      disabled={isLoading}
    >
      {isLoading ? 'Deploying...' : 'Deploy Project'}
    </Button>
  )
}

import { usePurchase, useRefund, useClaim, useDeposit } from '@/lib/ifif-project-management-hooks'
import { PurchaseModal, RefundModal, ClaimModal, DepositModal } from '@/components/ifif-project-client-modals'
 
function InvestmentControls({ projectAddress }: { projectAddress: Address }) {
  const { purchase, isLoading: isPurchasing, isSuccess: purchaseSuccess, isError: purchaseError, error: purchaseErrorMessage, txHash: purchaseTxHash, reset: resetPurchase } = usePurchase()
  const { refund, isLoading: isRefunding, isSuccess: refundSuccess, isError: refundError, error: refundErrorMessage, txHash: refundTxHash, reset: resetRefund } = useRefund()
  const { claim, isLoading: isClaiming, isSuccess: claimSuccess, isError: claimError, error: claimErrorMessage, txHash: claimTxHash, reset: resetClaim } = useClaim()
  const { deposit, isLoading: isDepositing, isSuccess: depositSuccess, isError: depositError, error: depositErrorMessage, txHash: depositTxHash, reset: resetDeposit } = useDeposit()
  
  const handlePurchase = async (amount: string, fundTokenAddress: Address, merkleProof: string[] = []) => {
    try {
      await purchase({
        projectAddress,
        amount: parseUnits(amount, 18),
        fundTokenAddress,
        merkleProof
      })
    } catch (err) {
      console.error('Purchase failed:', err)
      // Error state automatically handled by hook
    }
  }
  
  const handleRefund = async () => {
    try {
      await refund({ projectAddress })
    } catch (err) {
      console.error('Refund failed:', err)
      // Error state automatically handled by hook
    }
  }
  
  const handleClaim = async () => {
    try {
      await claim({ projectAddress })
    } catch (err) {
      console.error('Claim failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handleDeposit = async (amount: string, fundTokenAddress: Address) => {
    try {
      await deposit({
        projectAddress,
        amount: parseUnits(amount, 18),
        fundTokenAddress
      })
    } catch (err) {
      console.error('Deposit failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  // Handle success states with UI feedback
  useEffect(() => {
    if (purchaseSuccess && purchaseTxHash) {
      console.log(`Purchase successful! TX: ${purchaseTxHash}`)
      resetPurchase()
    }
    if (refundSuccess && refundTxHash) {
      console.log(`Refund successful! TX: ${refundTxHash}`)
      resetRefund()
    }
    if (claimSuccess && claimTxHash) {
      console.log(`Claim successful! TX: ${claimTxHash}`)
      resetClaim()
    }
    if (depositSuccess && depositTxHash) {
      console.log(`Deposit successful! TX: ${depositTxHash}`)
      resetDeposit()
    }
  }, [purchaseSuccess, refundSuccess, claimSuccess, depositSuccess])
 
  // Handle error states with UI feedback
  useEffect(() => {
    if (purchaseError && purchaseErrorMessage) {
      console.error(`Purchase failed: ${purchaseErrorMessage}`)
    }
    if (refundError && refundErrorMessage) {
      console.error(`Refund failed: ${refundErrorMessage}`)
    }
    if (claimError && claimErrorMessage) {
      console.error(`Claim failed: ${claimErrorMessage}`)
    }
    if (depositError && depositErrorMessage) {
      console.error(`Deposit failed: ${depositErrorMessage}`)
    }
  }, [purchaseError, refundError, claimError, depositError])
 
  return (
    <div className="space-y-2">
      <Button onClick={() => handlePurchase('100', '0x123...' as Address)} disabled={isPurchasing}>
        {isPurchasing ? 'Purchasing...' : 'Purchase Tokens'}
      </Button>
      
      <Button onClick={handleRefund} disabled={isRefunding} variant="destructive">
        {isRefunding ? 'Processing...' : 'Request Refund'}
      </Button>
      
      <Button onClick={handleClaim} disabled={isClaiming}>
        {isClaiming ? 'Claiming...' : 'Claim Tokens'}
      </Button>
 
      <Button onClick={() => handleDeposit('50', '0x123...' as Address)} disabled={isDepositing}>
        {isDepositing ? 'Depositing...' : 'Deposit Tokens'}
      </Button>
    </div>
  )
}

import { 
  useUpdateProjectConfig, 
  useStartPrivateSale, 
  useStartPublicSale, 
  useEndSales, 
  usePublicEndSales 
} from '@/lib/ifif-project-management-hooks'
import { 
  UpdateProjectConfigModal,
  StartPrivateSaleModal,
  StartPublicSaleModal,
  EndSalesModal,
  PublicEndSalesModal 
} from '@/components/ifif-project-management-modals'
 
function ProjectConfigControls({ projectAddress }: { projectAddress: Address }) {
  const { updateProjectConfig, isLoading: isUpdatingConfig, isSuccess: configUpdateSuccess, isError: configUpdateError, error: configError, txHash: configTxHash, reset: resetConfig } = useUpdateProjectConfig()
  const { startPrivateSale, isLoading: isStartingPrivate, isSuccess: privateSaleSuccess, isError: privateSaleError, error: privateSaleErrorMessage, txHash: privateSaleTxHash, reset: resetPrivateSale } = useStartPrivateSale()
  const { startPublicSale, isLoading: isStartingPublic, isSuccess: publicSaleSuccess, isError: publicSaleError, error: publicSaleErrorMessage, txHash: publicSaleTxHash, reset: resetPublicSale } = useStartPublicSale()
  const { endSales, isLoading: isEndingSales, isSuccess: endSalesSuccess, isError: endSalesError, error: endSalesErrorMessage, txHash: endSalesTxHash, reset: resetEndSales } = useEndSales()
  const { publicEndSales, isLoading: isPublicEndingSales, isSuccess: publicEndSalesSuccess, isError: publicEndSalesError, error: publicEndSalesErrorMessage, txHash: publicEndSalesTxHash, reset: resetPublicEndSales } = usePublicEndSales()
  
  const handleUpdateConfig = async () => {
    try {
      const nextConfig = {
        projectOwner: '0x456...' as Address,
        distributor: '0x789...' as Address,
        distributorFeePercent: 5,
        projectOwnerFeePercent: 10,
        platformFeePercent: 2,
        pairPrice: parseUnits('1', 18)
      }
      
      await updateProjectConfig({
        projectAddress,
        nextConfig,
        signatures: ['0xsig1', '0xsig2', '0xsig3'] // [manager, distributor, owner] signatures
      })
    } catch (err) {
      console.error('Config update failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handleStartPrivateSale = async () => {
    try {
      await startPrivateSale({ projectAddress })
    } catch (err) {
      console.error('Private sale start failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handleStartPublicSale = async () => {
    try {
      await startPublicSale({ projectAddress })
    } catch (err) {
      console.error('Public sale start failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handleEndSales = async () => {
    try {
      await endSales({ projectAddress })
    } catch (err) {
      console.error('End sales failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handlePublicEndSales = async () => {
    try {
      await publicEndSales({ projectAddress })
    } catch (err) {
      console.error('Public end sales failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  // Handle success states
  useEffect(() => {
    if (configUpdateSuccess && configTxHash) {
      console.log(`Config updated successfully! TX: ${configTxHash}`)
      resetConfig()
    }
    if (privateSaleSuccess && privateSaleTxHash) {
      console.log(`Private sale started successfully! TX: ${privateSaleTxHash}`)
      resetPrivateSale()
    }
    if (publicSaleSuccess && publicSaleTxHash) {
      console.log(`Public sale started successfully! TX: ${publicSaleTxHash}`)
      resetPublicSale()
    }
    if (endSalesSuccess && endSalesTxHash) {
      console.log(`Sales ended successfully! TX: ${endSalesTxHash}`)
      resetEndSales()
    }
    if (publicEndSalesSuccess && publicEndSalesTxHash) {
      console.log(`Public end sales completed! TX: ${publicEndSalesTxHash}`)
      resetPublicEndSales()
    }
  }, [configUpdateSuccess, privateSaleSuccess, publicSaleSuccess, endSalesSuccess, publicEndSalesSuccess])
 
  // Handle error states
  useEffect(() => {
    if (configUpdateError && configError) {
      console.error(`Config update failed: ${configError}`)
    }
    if (privateSaleError && privateSaleErrorMessage) {
      console.error(`Private sale start failed: ${privateSaleErrorMessage}`)
    }
    if (publicSaleError && publicSaleErrorMessage) {
      console.error(`Public sale start failed: ${publicSaleErrorMessage}`)
    }
    if (endSalesError && endSalesErrorMessage) {
      console.error(`End sales failed: ${endSalesErrorMessage}`)
    }
    if (publicEndSalesError && publicEndSalesErrorMessage) {
      console.error(`Public end sales failed: ${publicEndSalesErrorMessage}`)
    }
  }, [configUpdateError, privateSaleError, publicSaleError, endSalesError, publicEndSalesError])
 
  return (
    <div className="space-y-2">
      <Button onClick={handleUpdateConfig} disabled={isUpdatingConfig}>
        {isUpdatingConfig ? 'Updating...' : 'Update Project Config'}
      </Button>
      
      <Button onClick={handleStartPrivateSale} disabled={isStartingPrivate}>
        {isStartingPrivate ? 'Starting...' : 'Start Private Sale'}
      </Button>
      
      <Button onClick={handleStartPublicSale} disabled={isStartingPublic}>
        {isStartingPublic ? 'Starting...' : 'Start Public Sale'}
      </Button>
 
      <Button onClick={handleEndSales} disabled={isEndingSales} variant="destructive">
        {isEndingSales ? 'Ending...' : 'End Sales'}
      </Button>
 
      <Button onClick={handlePublicEndSales} disabled={isPublicEndingSales} variant="destructive">
        {isPublicEndingSales ? 'Ending...' : 'Public End Sales'}
      </Button>
    </div>
  )
}

import { useProjectManagement } from '@/lib/ifif-project-management-hooks'
 
function ProjectManager({ projectAddress }: { projectAddress: Address }) {
  const {
    // Deployment operations
    updateDeploymentDetails,
    isUpdatingDeploymentDetails,
    updateDeploymentDetailsSuccess,
    updateDeploymentDetailsError,
    updateDeploymentDetailsTxHash,
    
    // Configuration operations
    updateProjectConfig,
    isUpdatingProjectConfig,
    updateProjectConfigSuccess,
    updateProjectConfigError,
    updateProjectConfigTxHash,
    
    // Sales lifecycle operations
    startPrivateSale,
    isStartingPrivateSale,
    startPrivateSaleSuccess,
    startPrivateSaleError,
    startPrivateSaleTxHash,
    
    startPublicSale,
    isStartingPublicSale,
    startPublicSaleSuccess,
    startPublicSaleError,
    startPublicSaleTxHash,
    
    endSales,
    isEndingSales,
    endSalesSuccess,
    endSalesError,
    endSalesTxHash,
    
    publicEndSales,
    isPublicEndingSales,
    publicEndSalesSuccess,
    publicEndSalesError,
    publicEndSalesTxHash,
    
    // Client operations
    purchase,
    isPurchasing,
    purchaseSuccess,
    purchaseError,
    purchaseTxHash,
    
    refund,
    isRefunding,
    refundSuccess,
    refundError,
    refundTxHash,
    
    claim,
    isClaiming,
    claimSuccess,
    claimError,
    claimTxHash,
    
    claimNFT,
    isClaimingNFT,
    claimNFTSuccess,
    claimNFTError,
    claimNFTTxHash,
    
    deposit,
    isDepositing,
    depositSuccess,
    depositError,
    depositTxHash,
    
    convertNFT,
    isConvertingNFT,
    convertNFTSuccess,
    convertNFTError,
    convertNFTTxHash,
    
    // Deployment operations
    deployProject,
    isDeploying,
    deploySuccess,
    deployError,
    deployTxHash,
    
    // Combined states for project lifecycle management
    isAnyLoading,
    hasAnyError,
    lastError,
    resetAll
  } = useProjectManagement()
  
  const handleDeploymentUpdate = async () => {
    try {
      await updateDeploymentDetails({
        projectId: 1,
        projectName: 'Updated Project Name',
        projectSymbol: 'UPD'
      })
    } catch (err) {
      console.error('Deployment update failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handleConfigUpdate = async () => {
    try {
      const nextConfig = {
        projectOwner: '0x456...' as Address,
        distributor: '0x789...' as Address,
        distributorFeePercent: 5,
        projectOwnerFeePercent: 10,
        platformFeePercent: 2,
        pairPrice: parseUnits('1', 18)
      }
      
      await updateProjectConfig({
        projectAddress,
        nextConfig,
        signatures: ['0xsig1', '0xsig2', '0xsig3']
      })
    } catch (err) {
      console.error('Config update failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handleStartPrivateSale = async () => {
    try {
      await startPrivateSale({ projectAddress })
    } catch (err) {
      console.error('Private sale start failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  const handlePurchase = async () => {
    try {
      await purchase({
        projectAddress,
        amount: parseUnits('100', 18),
        fundTokenAddress: '0x123...' as Address,
        merkleProof: []
      })
    } catch (err) {
      console.error('Purchase failed:', err)
      // Error state automatically handled by hook
    }
  }
 
  // Handle success states for project lifecycle
  useEffect(() => {
    if (updateDeploymentDetailsSuccess && updateDeploymentDetailsTxHash) {
      console.log(`Deployment details updated! TX: ${updateDeploymentDetailsTxHash}`)
    }
    if (startPrivateSaleSuccess && startPrivateSaleTxHash) {
      console.log(`Private sale started! TX: ${startPrivateSaleTxHash}`)
    }
    if (purchaseSuccess && purchaseTxHash) {
      console.log(`Purchase completed! TX: ${purchaseTxHash}`)
    }
    // Additional success handlers for other operations...
  }, [updateDeploymentDetailsSuccess, startPrivateSaleSuccess, purchaseSuccess])
 
  // Handle error states for project lifecycle
  useEffect(() => {
    if (hasAnyError && lastError) {
      console.error(`Project operation failed: ${lastError}`)
    }
  }, [hasAnyError, lastError])
 
  return (
    <div className="p-4 border rounded space-y-4">
      <h3 className="text-lg font-semibold">Project Lifecycle Management</h3>
      
      {hasAnyError && (
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertTitle>Operation Failed</AlertTitle>
          <AlertDescription>{lastError}</AlertDescription>
        </Alert>
      )}
 
      {/* Project Management Operations */}
      <div className="space-y-3">
        <div className="grid grid-cols-2 gap-2">
          <Button 
            onClick={handleDeploymentUpdate}
            disabled={isAnyLoading}
            variant="outline"
          >
            {isUpdatingDeploymentDetails ? 'Updating...' : 'Update Details'}
          </Button>
          
          <Button 
            onClick={handleConfigUpdate}
            disabled={isAnyLoading}
            variant="outline"
          >
            {isUpdatingProjectConfig ? 'Configuring...' : 'Update Config'}
          </Button>
        </div>
 
        {/* Sales Lifecycle Management */}
        <div className="grid grid-cols-2 gap-2">
          <Button 
            onClick={handleStartPrivateSale}
            disabled={isAnyLoading}
          >
            {isStartingPrivateSale ? 'Starting...' : 'Start Private Sale'}
          </Button>
          
          <Button 
            onClick={() => startPublicSale({ projectAddress })}
            disabled={isAnyLoading}
          >
            {isStartingPublicSale ? 'Starting...' : 'Start Public Sale'}
          </Button>
        </div>
 
        <div className="grid grid-cols-2 gap-2">
          <Button 
            onClick={() => endSales({ projectAddress })}
            disabled={isAnyLoading}
            variant="destructive"
          >
            {isEndingSales ? 'Ending...' : 'End Sales'}
          </Button>
          
          <Button 
            onClick={() => publicEndSales({ projectAddress })}
            disabled={isAnyLoading}
            variant="destructive"
          >
            {isPublicEndingSales ? 'Emergency End' : 'Public End Sales'}
          </Button>
        </div>
 
        {/* Client Operations */}
        <div className="grid grid-cols-3 gap-2">
          <Button 
            onClick={handlePurchase}
            disabled={isAnyLoading}
            size="sm"
          >
            {isPurchasing ? 'Buying...' : 'Purchase'}
          </Button>
          
          <Button 
            onClick={() => refund({ projectAddress })}
            disabled={isAnyLoading}
            size="sm"
            variant="outline"
          >
            {isRefunding ? 'Processing...' : 'Refund'}
          </Button>
          
          <Button 
            onClick={() => claim({ projectAddress })}
            disabled={isAnyLoading}
            size="sm"
          >
            {isClaiming ? 'Claiming...' : 'Claim'}
          </Button>
        </div>
 
        {/* Utility Actions */}
        <div className="flex justify-between pt-4 border-t">
          <Badge variant={isAnyLoading ? 'default' : 'outline'}>
            {isAnyLoading ? 'Operation in Progress...' : 'Ready'}
          </Badge>
          
          <Button 
            onClick={resetAll} 
            variant="ghost" 
            size="sm"
            disabled={isAnyLoading}
          >
            Reset All States
          </Button>
        </div>
      </div>
    </div>
  )
}

import { 
  useProgressiveIFIFProjectsLoader,
  useProgressiveNFTOperationsLoader,
  useProgressiveIFIFDataLoader,
  useCachedIFIFData 
} from '@/lib/progressive-ifif-hooks'
 
function IFIFDashboard() {
  // Individual progressive loaders
  const {
    projects,
    isLoading: isLoadingProjects,
    progress: projectsProgress,
    total: totalProjects
  } = useProgressiveIFIFProjectsLoader()
 
  const {
    operations,
    isLoading: isLoadingOperations,
    progress: operationsProgress,
    total: totalOperations
  } = useProgressiveNFTOperationsLoader()
 
  // Main progressive data loader with all IFIF data types
  const {
    projects: allProjects,
    operations: allOperations,
    deployments,
    claims,
    purchases,
    refunds,
    deposits,
    projectsProgress: detailedProjectsProgress,
    operationsProgress: detailedOperationsProgress,
    isAnyIFIFLoading
  } = useProgressiveIFIFDataLoader()
 
  return (
    <div className="space-y-6">
      <div>
        <h3>Active Projects ({totalProjects})</h3>
        
        {/* Progress indicator for projects */}
        {isLoadingProjects && (
          <div className="mb-4">
            <div className="text-sm text-gray-600 mb-2">
              Loading projects: {projectsProgress} / {totalProjects} 
              ({detailedProjectsProgress.percentage}%)
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                style={{ width: `${detailedProjectsProgress.percentage}%` }}
              />
            </div>
          </div>
        )}
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {projects.map((project) => (
            <ProjectCard key={project.projectId} project={project} />
          ))}
        </div>
      </div>
 
      <div>
        <h3>NFT Operations ({totalOperations})</h3>
        
        {/* Progress indicator for operations */}
        {isLoadingOperations && (
          <div className="mb-4">
            <div className="text-sm text-gray-600 mb-2">
              Loading operations: {operationsProgress} / {totalOperations}
              ({detailedOperationsProgress.percentage}%)
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="bg-green-600 h-2 rounded-full transition-all duration-300"
                style={{ width: `${detailedOperationsProgress.percentage}%` }}
              />
            </div>
          </div>
        )}
        
        <div className="space-y-2">
          {operations.map((operation) => (
            <OperationCard key={operation.id} operation={operation} />
          ))}
        </div>
      </div>
 
      {/* Overall loading indicator */}
      {isAnyIFIFLoading && (
        <div className="fixed bottom-4 right-4 bg-white border border-gray-200 rounded-lg p-4 shadow-lg">
          <div className="flex items-center space-x-3">
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600" />
            <span className="text-sm text-gray-600">Loading IFIF data...</span>
          </div>
        </div>
      )}
    </div>
  )
}

import { useCachedIFIFData, useDataCacheStore } from '@/lib/progressive-ifif-hooks'
 
function ProjectAnalytics({ projectId }: { projectId: number }) {
  // Use cached IFIF data from Zustand store
  const {
    projects,
    deployments,
    claims,
    operations,
    purchases,
    refunds,
    deposits,
    isProjectsLoading,
    isDeploymentsLoading,
    isClaimsLoading,
    isOperationsLoading,
    isPurchasesLoading,
    isRefundsLoading,
    isDepositsLoading,
    projectsProgress,
    deploymentsProgress,
    claimsProgress,
    operationsProgress,
    purchasesProgress,
    refundsProgress,
    depositsProgress,
    isAnyIFIFLoading
  } = useCachedIFIFData()
 
  // Access specific cache actions for manual cache management
  const updateProgress = useDataCacheStore((state) => state.updateProgress)
  const clearCache = useDataCacheStore((state) => state.clearCache)
  const isInitialized = useDataCacheStore((state) => state.isInitialized)
 
  // Find specific project data from cached collections
  const projectData = projects.find(p => p.projectId === projectId)
  const projectOperations = operations.filter(op => 
    op.projectAddress === projectData?.id
  )
  const projectClaims = claims.filter(c => 
    c.projectAddress === projectData?.id
  )
 
  // Calculate analytics from cached data
  const analytics = useMemo(() => {
    if (!projectData) return null
 
    const totalRaised = BigInt(projectData.totalPurchase)
    const fundingProgress = BigInt(projectData.fundingTarget) > 0n 
      ? Number((totalRaised * 100n) / BigInt(projectData.fundingTarget))
      : 0
 
    return {
      totalRaised: totalRaised.toString(),
      investorCount: purchases.filter(p => p.projectAddress === projectData.id).length,
      nftCount: operations.filter(op => 
        op.projectAddress === projectData.id && op.operationType === 1
      ).length,
      completionPercent: Math.min(fundingProgress, 100),
      recentActivity: operations
        .filter(op => op.projectAddress === projectData.id)
        .slice(0, 5)
    }
  }, [projectData, purchases, operations])
 
  if (!isInitialized || isAnyIFIFLoading) {
    return (
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h3>Project Analytics</h3>
          <div className="flex items-center space-x-2">
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600" />
            <span className="text-sm text-gray-600">Loading data...</span>
          </div>
        </div>
        
        {/* Progress indicators */}
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Projects: {projectsProgress}%</span>
            <span>Operations: {operationsProgress}%</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className="bg-blue-600 h-2 rounded-full transition-all duration-300"
              style={{ width: `${(projectsProgress + operationsProgress) / 2}%` }}
            />
          </div>
        </div>
        
        <LoadingSpinner />
      </div>
    )
  }
 
  if (!analytics) {
    return (
      <Alert variant="destructive">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Project Not Found</AlertTitle>
        <AlertDescription>
          Project with ID {projectId} was not found in cached data.
        </AlertDescription>
      </Alert>
    )
  }
 
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3>Project Analytics</h3>
        <div className="flex items-center space-x-2">
          <Badge variant="outline" className="text-green-600">
            Data Cached ({projects.length} projects)
          </Badge>
          <Button 
            onClick={clearCache} 
            variant="outline" 
            size="sm"
            className="text-red-600 hover:text-red-700"
          >
            Clear Cache
          </Button>
        </div>
      </div>
      
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <MetricCard 
          title="Total Raised" 
          value={formatEther(analytics.totalRaised)} 
          suffix="ETH"
        />
        <MetricCard 
          title="Investors" 
          value={analytics.investorCount} 
        />
        <MetricCard 
          title="NFTs Minted" 
          value={analytics.nftCount} 
        />
        <MetricCard 
          title="Completion" 
          value={`${analytics.completionPercent}%`} 
        />
      </div>
 
      {/* Recent activity from cached data */}
      <div className="space-y-2">
        <h4 className="text-sm font-medium">Recent Activity</h4>
        {analytics.recentActivity.map((activity) => (
          <div key={activity.id} className="text-xs text-gray-600 p-2 bg-gray-50 rounded">
            Operation {activity.operationType} - {activity.user.slice(0, 8)}...
          </div>
        ))}
      </div>
    </div>
  )
}

import { 
  useCachedIFIFData, 
  useCachedFactoryData 
} from '@/lib/progressive-ifif-hooks'
import { 
  getActivityType, 
  getActivityUser, 
  getActivityAmount,
  getActivityProjectWithLookup,
  getActivityProperty,
  type ActivityData
} from '@/lib/activity-utils'
import { getActivityTypeIndicatorColor } from '@/config/constants'
import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, createColumnHelper, flexRender } from '@tanstack/react-table'
 
function IFIFActivityTracker() {
  // Get all cached IFIF data types
  const { 
    deployments,
    claims,
    operations,
    purchases,
    refunds,
    deposits,
    isOperationsLoading,
    isClaimsLoading
  } = useCachedIFIFData()
 
  // Get factory data for project name lookup
  const { projectLookup } = useCachedFactoryData()
 
  // State for filtering and table management
  const [globalFilter, setGlobalFilter] = useState('')
  const [activityFilters, setActivityFilters] = useState({
    activityType: 'all' as string,
  })
  const [sorting, setSorting] = useState<SortingState>([])
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  })
 
  // Combine all activities into unified structure
  const allActivities = useMemo(() => {
    const activities: ActivityData[] = []
    
    if (deployments) activities.push(...deployments.map(d => ({ ...d, type: 'deployment' })))
    if (claims) activities.push(...claims.map(c => ({ ...c, type: 'claim' })))
    if (operations) activities.push(...operations.map(o => ({ ...o, type: 'operation' })))
    if (purchases) activities.push(...purchases.map(p => ({ ...p, type: 'purchase' })))
    if (refunds) activities.push(...refunds.map(r => ({ ...r, type: 'refund' })))
    if (deposits) activities.push(...deposits.map(d => ({ ...d, type: 'deposit' })))
    
    // Sort by timestamp descending (newest first)
    return activities.sort((a, b) => {
      const timestampA = typeof a.timestamp === 'string' ? parseFloat(a.timestamp) : Number(a.timestamp)
      const timestampB = typeof b.timestamp === 'string' ? parseFloat(b.timestamp) : Number(b.timestamp)
      return timestampB - timestampA
    })
  }, [deployments, claims, operations, purchases, refunds, deposits])
 
  // Create table columns using activity utilities
  const columns = useMemo(() => {
    const columnHelper = createColumnHelper<ActivityData>()
    
    return [
      columnHelper.accessor('type', {
        header: 'Activity Type',
        cell: ({ row }) => {
          const activity = row.original
          const activityType = getActivityType(activity)
          const typeColor = getActivityTypeIndicatorColor(activityType)
          
          return (
            <div className="flex items-center space-x-3">
              <div className={`w-3 h-3 ${typeColor} rounded-full`} />
              <div>
                <p className="font-medium text-slate-900">{activityType}</p>
              </div>
            </div>
          )
        }
      }),
      columnHelper.accessor((row) => getActivityProjectWithLookup(row, projectLookup), {
        id: 'project',
        header: 'Project',
        cell: ({ getValue }) => {
          const projectInfo = getValue()
          if (!projectInfo) {
            return <span className="text-slate-400">-</span>
          }
          
          const { id, name, address } = projectInfo
          
          return (
            <div>
              <p className="font-medium text-slate-900">#{id} - {name}</p>
              {address && (
                <p className="text-xs text-slate-500 font-mono">{shortenHash(address)}</p>
              )}
            </div>
          )
        }
      }),
      columnHelper.accessor((row) => getActivityUser(row), {
        id: 'user',
        header: 'User',
        cell: ({ getValue }) => {
          const user = getValue()
          if (!user) {
            return <span className="text-slate-400">System</span>
          }
          return (
            <div>
              <p className="font-medium text-slate-900">{shortenHash(user)}</p>
              <p className="text-xs text-slate-500 font-mono">{user}</p>
            </div>
          )
        }
      }),
      columnHelper.accessor((row) => getActivityAmount(row), {
        id: 'amount',
        header: 'Amount',
        cell: ({ getValue }) => {
          const amount = getValue()
          return amount ? (
            <Badge variant="outline" className="font-mono">
              {Number(amount).toFixed(4)} ETH
            </Badge>
          ) : (
            <span className="text-slate-400">-</span>
          )
        }
      }),
      columnHelper.accessor('timestamp', {
        header: 'Timestamp',
        sortingFn: 'basic',
        cell: ({ getValue }) => {
          const timestamp = getValue()
          const timestampValue = typeof timestamp === 'string' ? parseFloat(timestamp) : Number(timestamp)
          const date = new Date(timestampValue * 1000)
          return (
            <div>
              <p className="font-medium text-slate-900">
                {format(date, 'MMM dd, yyyy')}
              </p>
              <p className="text-xs text-slate-500">
                {format(date, 'HH:mm:ss')}
              </p>
            </div>
          )
        }
      }),
      columnHelper.display({
        id: 'actions',
        header: 'Actions',
        cell: ({ row }) => (
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              // Open activity details modal
              setSelectedActivity(row.original)
            }}
          >
            <Eye className="h-3 w-3 mr-1" />
            View
          </Button>
        )
      })
    ]
  }, [projectLookup])
 
  // Filter activities based on type selection
  const filteredActivities = useMemo(() => {
    if (activityFilters.activityType === 'all') {
      return allActivities
    }
    return allActivities.filter(activity => activity.type === activityFilters.activityType)
  }, [allActivities, activityFilters.activityType])
 
  // Create table instance with comprehensive filtering
  const table = useReactTable({
    data: filteredActivities,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    globalFilterFn: (row, columnId, value) => {
      if (!value) return true
      
      const activity = row.original
      const searchValue = String(value).toLowerCase()
      const user = getActivityUser(activity)
      const tokenAddress = getActivityProperty(activity, 'tokenAddress')
      const activityType = getActivityType(activity)
      const projectInfo = getActivityProjectWithLookup(activity, projectLookup)
      
      return Boolean(
        (user && user.toLowerCase().includes(searchValue)) ||
        (activity.id && activity.id.toLowerCase().includes(searchValue)) ||
        (typeof tokenAddress === 'string' && tokenAddress.toLowerCase().includes(searchValue)) ||
        activityType.toLowerCase().includes(searchValue) ||
        (projectInfo && (
          (projectInfo.id && projectInfo.id.toString().toLowerCase().includes(searchValue)) ||
          (projectInfo.name && projectInfo.name.toLowerCase().includes(searchValue))
        ))
      )
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    onPaginationChange: setPagination,
    state: {
      sorting,
      globalFilter,
      pagination,
    },
  })
 
  // Activity metrics from filtered data
  const metrics = useMemo(() => {
    const filteredData = table.getFilteredRowModel().rows.map(row => row.original)
    const totalActivities = filteredData.length
    const last24h = filteredData.filter(a => {
      const now = Date.now() / 1000
      const activityTimestamp = typeof a.timestamp === 'string' ? parseFloat(a.timestamp) : Number(a.timestamp)
      return now - activityTimestamp <= 86400
    }).length
    
    const uniqueUsers = new Set(
      filteredData
        .map(a => getActivityUser(a))
        .filter(u => u !== null)
    ).size
 
    return {
      totalActivities,
      last24h,
      uniqueUsers
    }
  }, [table.getFilteredRowModel().rows])
 
  const isLoading = isOperationsLoading || isClaimsLoading
 
  return (
    <div className="space-y-6">
      {/* Activity Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white p-4 border border-gray-200 rounded-lg">
          <div className="text-2xl font-bold text-gray-900">{metrics.totalActivities}</div>
          <div className="text-sm text-gray-600">Total Activities</div>
        </div>
        <div className="bg-white p-4 border border-gray-200 rounded-lg">
          <div className="text-2xl font-bold text-gray-900">{metrics.last24h}</div>
          <div className="text-sm text-gray-600">Last 24 Hours</div>
        </div>
        <div className="bg-white p-4 border border-gray-200 rounded-lg">
          <div className="text-2xl font-bold text-gray-900">{metrics.uniqueUsers}</div>
          <div className="text-sm text-gray-600">Unique Users</div>
        </div>
      </div>
 
      {/* Filters */}
      <div className="bg-white border border-gray-200 p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4 flex-1">
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search activities..."
                value={table.getState().globalFilter ?? ''}
                onChange={(e) => table.setGlobalFilter(e.target.value)}
                className="pl-10"
              />
            </div>
            
            <Select 
              value={activityFilters.activityType} 
              onValueChange={(value) => setActivityFilters(prev => ({ ...prev, activityType: value }))}
            >
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Filter by type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Types</SelectItem>
                <SelectItem value="deployment">Token Deployments</SelectItem>
                <SelectItem value="claim">Token Claims</SelectItem>
                <SelectItem value="operation">NFT Operations</SelectItem>
                <SelectItem value="purchase">User Purchases</SelectItem>
                <SelectItem value="refund">User Refunds</SelectItem>
                <SelectItem value="deposit">Asset Deposits</SelectItem>
              </SelectContent>
            </Select>
          </div>
          
          <div className="text-sm text-gray-600">
            {table.getFilteredRowModel().rows.length} activities found
          </div>
        </div>
      </div>
 
      {/* Activities Table */}
      <div className="bg-white border border-gray-200">
        {isLoading ? (
          <div className="p-6">
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="flex items-center space-x-4 p-4 animate-pulse">
                  <div className="w-3 h-3 bg-gray-300 rounded-full" />
                  <div className="flex-1 space-y-2">
                    <div className="h-4 bg-gray-300 w-1/4" />
                    <div className="h-3 bg-gray-200 w-1/2" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : table.getFilteredRowModel().rows.length > 0 ? (
          <>
            <Table>
              <TableHeader>
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow key={headerGroup.id}>
                    {headerGroup.headers.map((header) => (
                      <TableHead 
                        key={header.id}
                        className={header.column.getCanSort() ? 'cursor-pointer select-none hover:bg-muted/50' : ''}
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        <div className="flex items-center space-x-2">
                          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                          {header.column.getCanSort() && (
                            <div className="ml-2">
                              {header.column.getIsSorted() === 'asc' && <ChevronUp className="h-4 w-4" />}
                              {header.column.getIsSorted() === 'desc' && <ChevronDown className="h-4 w-4" />}
                              {!header.column.getIsSorted() && <ChevronsUpDown className="h-4 w-4 opacity-50" />}
                            </div>
                          )}
                        </div>
                      </TableHead>
                    ))}
                  </TableRow>
                ))}
              </TableHeader>
              <TableBody>
                {table.getRowModel().rows.map((row) => (
                  <TableRow key={row.id}>
                    {row.getVisibleCells().map((cell) => (
                      <TableCell key={cell.id}>
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
 
            {/* Pagination */}
            <div className="flex items-center justify-between p-6 border-t border-gray-200">
              <div className="text-sm text-gray-600">
                Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{' '}
                {Math.min(
                  (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
                  table.getFilteredRowModel().rows.length
                )}{' '}
                of {table.getFilteredRowModel().rows.length} results
              </div>
              <div className="flex space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => table.previousPage()}
                  disabled={!table.getCanPreviousPage()}
                >
                  Previous
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => table.nextPage()}
                  disabled={!table.getCanNextPage()}
                >
                  Next
                </Button>
              </div>
            </div>
          </>
        ) : (
          <div className="text-center py-12">
            <Activity className="mx-auto h-16 w-16 text-gray-300 mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">No activities found</h3>
            <p className="text-gray-600">
              {table.getState().globalFilter ? 'Try adjusting your search criteria' : 'No activities recorded yet'}
            </p>
          </div>
        )}
      </div>
    </div>
  )
}

import { 
  useProjectDetailData, 
  useProjectMetrics, 
  useProjectInvestorData,
  useCachedIFIFData,
  useCachedFactoryData 
} from '@/lib/progressive-ifif-hooks'
import { MetricGrid, BarChartComponent, DonutChartComponent } from '@/components/shared'
 
// Main Projects Listing Page - Overview Metrics
function IFIFProjectsMetrics() {
  const { projects, isProjectsLoading } = useCachedIFIFData()
  const { projectLookup } = useCachedFactoryData()
 
  // Calculate aggregate metrics across all projects
  const metrics = useMemo(() => {
    if (!projects) return {
      totalProjects: 0,
      activeProjects: 0,
      completedProjects: 0,
      totalFunding: '0',
      successRate: 0,
      averageFunding: '0'
    }
 
    const totalProjects = projects.length
    const activeProjects = projects.filter(p => p.stage === 2 || p.stage === 3).length // PRIVATE_SALE=2, PUBLIC_SALE=3
    const completedProjects = projects.filter(p => p.stage === 4).length // SALE_SUCCESSED=4
    const totalFunding = projects.reduce((sum, p) => sum + Number(p.totalPurchase || 0), 0)
    const successRate = totalProjects > 0 ? (completedProjects / totalProjects) * 100 : 0
    const averageFunding = totalProjects > 0 ? totalFunding / totalProjects : 0
 
    return {
      totalProjects,
      activeProjects,
      completedProjects,
      totalFunding: Number(formatEther(BigInt(totalFunding))).toFixed(2),
      successRate: Math.round(successRate),
      averageFunding: Number(formatEther(BigInt(Math.round(averageFunding)))).toFixed(2)
    }
  }, [projects])
 
  // Chart data for project stage distribution
  const stageDistribution = useMemo(() => {
    if (!projects) return []
    
    const stageNumbers = [0, 1, 2, 3, 4, 5, 6] // NONE, INIT, PRIVATE_SALE, PUBLIC_SALE, SALE_SUCCESSED, SALE_FAILED, CLAIM
    return stageNumbers.map(stageNum => ({
      name: PROJECT_STAGES[stageNum]?.name || `Stage ${stageNum}`,
      value: projects.filter(p => p.stage === stageNum).length,
      color: PROJECT_STAGES[stageNum]?.color || '#64748b'
    })).filter(item => item.value > 0)
  }, [projects])
 
  // Funding progress distribution
  const fundingProgress = useMemo(() => {
    if (!projects) return []
    
    const ranges = [
      { name: '0-25%', min: 0, max: 0.25 },
      { name: '25-50%', min: 0.25, max: 0.5 },
      { name: '50-75%', min: 0.5, max: 0.75 },
      { name: '75-100%', min: 0.75, max: 1 },
      { name: '100%+', min: 1, max: Infinity }
    ]
 
    return ranges.map(range => ({
      name: range.name,
      value: projects.filter(p => {
        const ratio = p.totalPurchase && p.fundingTarget 
          ? Number(p.totalPurchase) / Number(p.fundingTarget) 
          : 0
        return ratio >= range.min && ratio < range.max
      }).length
    })).filter(item => item.value > 0)
  }, [projects])
 
  return (
    <div className="space-y-6">
      {/* Overview Metrics Grid */}
      <MetricGrid
        metrics={[
          {
            key: 'totalProjects',
            value: metrics.totalProjects,
            subtitle: 'Total Projects'
          },
          {
            key: 'activeProjects',
            value: metrics.activeProjects,
            subtitle: 'Active Projects'
          },
          {
            key: 'completedProjects',
            value: metrics.completedProjects,
            subtitle: 'Completed Projects'
          },
          {
            key: 'totalFunding',
            value: `${metrics.totalFunding}`,
            subtitle: 'Total Funding'
          }
        ]}
        isLoading={isProjectsLoading}
      />
 
      {/* Charts Section */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 border border-slate-200">
          <h3 className="text-lg font-semibold mb-4">Project Stage Distribution</h3>
          <DonutChartComponent 
            data={stageDistribution}
            category="value"
            dataKey="name"
            showLabel={true}
            valueFormatter={(value) => `${value} project${value !== 1 ? 's' : ''}`}
          />
        </div>
        <div className="bg-white p-6 border border-slate-200">
          <h3 className="text-lg font-semibold mb-4">Funding Progress Distribution</h3>
          <BarChartComponent 
            data={fundingProgress}
            dataKey="name"
            categories={['value']}
          />
        </div>
      </div>
    </div>
  )
}
 
// Individual Project Detail Page - Comprehensive Dashboard
function ProjectDetailDashboard({ projectId }: { projectId: number }) {
  // Get comprehensive project details and metrics
  const { project, overview, isLoading, error } = useProjectDetailData(projectId)
  const metrics = useProjectMetrics(projectId)
  const { projectLookup } = useCachedFactoryData()
 
  if (isLoading) {
    return (
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <div className="bg-white border border-slate-200 space-y-4">
            <div className="p-6">
              <div className="space-y-4">
                <div className="h-6 w-48 bg-muted rounded animate-pulse" />
                <div className="h-4 w-full bg-muted rounded animate-pulse" />
                <div className="h-4 w-3/4 bg-muted rounded animate-pulse" />
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
 
  if (error || !project || !overview) {
    return (
      <Alert variant="destructive">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Failed to Load Project Data</AlertTitle>
        <AlertDescription>
          Project with ID {projectId} could not be loaded.
        </AlertDescription>
      </Alert>
    )
  }
 
  const projectInfo = projectLookup.get(overview.projectId.toString())
 
  return (
    <div className="space-y-6">
      {/* Header with project identification */}
      <div className="space-y-2">
        <h1 className="text-4xl font-bold tracking-tight text-slate-900 flex items-center gap-3">
          <TrendingUp className="h-8 w-8" />
          #{overview.projectId}{projectInfo?.name ? ` - ${projectInfo.name}` : ''}
        </h1>
        <div className="flex items-center gap-4">
          <StageBadge stage={overview.stage} />
          <ExplorerLink 
            hash={overview.projectAddress}
            type="address"
            variant="button"
            className="flex items-center gap-2"
          >
            <ExternalLink className="h-4 w-4" />
            View on Explorer
          </ExplorerLink>
        </div>
      </div>
 
      {/* Key Metrics Grid */}
      <MetricGrid 
        metrics={[
          {
            key: 'users' as const,
            value: overview.investorCount,
            subtitle: 'Total investors'
          },
          {
            key: 'totalFunding' as const,
            value: `${overview.fundingProgress.toFixed(1)}%`,
            subtitle: 'Funding progress'
          },
          {
            key: 'activities' as const,
            value: overview.activeNFTCount,
            subtitle: 'Active NFTs'
          },
          {
            key: 'last24h' as const,
            value: overview.totalTransactions,
            subtitle: 'Total transactions'
          }
        ]}
        isLoading={isLoading}
        columns={4}
      />
 
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Project Status Card */}
        <div className="lg:col-span-2">
          <div className="bg-white border border-slate-200 space-y-6 p-6">
            <div className="flex items-center justify-between">
              <h2 className="text-xl font-semibold">Project Status</h2>
              <StageBadge stage={overview.stage} />
            </div>
            
            {/* Funding Progress */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="font-semibold flex items-center gap-2">
                  <DollarSign className="h-4 w-4" />
                  Funding Progress
                </h3>
                <span className="text-sm text-muted-foreground">
                  {overview.fundingProgress.toFixed(1)}% complete
                </span>
              </div>
              <Progress value={overview.fundingProgress} className="h-3" />
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">
                  Raised: {Number(formatEther(overview.totalPurchase)).toFixed(2)} ETH
                </span>
                <span className="text-muted-foreground">
                  Target: {Number(formatEther(overview.fundingTarget)).toFixed(2)} ETH
                </span>
              </div>
              {overview.isFullyFunded && (
                <Badge variant="outline" className="w-full justify-center bg-green-50 text-green-700 border-green-200">
                  <Target className="h-3 w-3 mr-1" />
                  Funding Target Reached
                </Badge>
              )}
            </div>
 
            {/* Project Details Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
              <div className="space-y-2">
                <label className="text-sm font-medium text-muted-foreground">Created</label>
                <div className="flex items-center gap-2">
                  <Calendar className="h-3 w-3 text-muted-foreground" />
                  <span className="text-sm">
                    {format(new Date(Number(overview.createdAt) * 1000), 'MMM dd, yyyy')}
                  </span>
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium text-muted-foreground">Last Updated</label>
                <div className="flex items-center gap-2">
                  <Clock className="h-3 w-3 text-muted-foreground" />
                  <span className="text-sm">
                    {format(new Date(Number(overview.lastUpdated) * 1000), 'MMM dd, yyyy')}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
 
        {/* Sidebar with Quick Stats and Status */}
        <div className="space-y-6">
          {/* Quick Stats */}
          <div className="bg-white border border-slate-200 space-y-4">
            <div className="p-6 pb-0">
              <h2 className="text-lg font-semibold">Quick Stats</h2>
            </div>
            <div className="px-6 pb-6 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="text-center space-y-1">
                  <div className="flex items-center justify-center">
                    <Users className="h-4 w-4 text-blue-500 mr-1" />
                    <span className="text-2xl font-bold">{overview.investorCount}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Investors</p>
                </div>
                <div className="text-center space-y-1">
                  <div className="flex items-center justify-center">
                    <Coins className="h-4 w-4 text-purple-500 mr-1" />
                    <span className="text-2xl font-bold">{overview.activeNFTCount}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Active NFTs</p>
                </div>
                <div className="text-center space-y-1">
                  <div className="flex items-center justify-center">
                    <Zap className="h-4 w-4 text-orange-500 mr-1" />
                    <span className="text-2xl font-bold">{overview.totalTransactions}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Transactions</p>
                </div>
                <div className="text-center space-y-1">
                  <div className="flex items-center justify-center">
                    <BarChart3 className="h-4 w-4 text-green-500 mr-1" />
                    <span className="text-2xl font-bold">{overview.recentStageChanges}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Stage Changes</p>
                </div>
              </div>
            </div>
          </div>
 
          {/* Status Indicators */}
          <div className="bg-white border border-slate-200 space-y-4">
            <div className="p-6 pb-0">
              <h2 className="text-lg font-semibold">Status Indicators</h2>
            </div>
            <div className="px-6 pb-6 space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm">Funding Status</span>
                <Badge variant={overview.isFullyFunded ? "default" : "secondary"}>
                  {overview.isFullyFunded ? "Complete" : "In Progress"}
                </Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">Project Activity</span>
                <Badge variant={overview.isActive ? "default" : "secondary"}>
                  {overview.isActive ? "Active" : "Inactive"}
                </Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">Token Deployment</span>
                <Badge variant={overview.hasTokenDeployment ? "default" : "secondary"}>
                  {overview.hasTokenDeployment ? "Deployed" : "Pending"}
                </Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">Recent Activity</span>
                <Badge variant={overview.hasRecentActivity ? "default" : "secondary"}>
                  {overview.hasRecentActivity ? "Active" : "Quiet"}
                </Badge>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
 
// Project Investor Dashboard - Investment-focused Metrics
function ProjectInvestorMetrics({ projectId }: { projectId: string }) {
  const { project } = useProjectDetailData(parseInt(projectId) || 0)
  const { 
    investors, 
    purchases, 
    refunds, 
    claims, 
    isLoading 
  } = useProjectInvestorData(project?.id || '')
 
  // Calculate investment-specific metrics
  const investorMetrics = useMemo(() => {
    const totalInvestors = investors.length
    const totalInvested = purchases.reduce((sum, p) => sum + BigInt(p.amount), BigInt(0))
    const totalRefunded = refunds.reduce((sum, r) => sum + BigInt(r.amount), BigInt(0))
    const totalClaimed = claims.reduce((sum, c) => sum + BigInt(c.amount), BigInt(0))
    const netInvestment = totalInvested - totalRefunded
 
    return [
      {
        key: 'users' as const,
        value: totalInvestors,
        subtitle: 'Total investors'
      },
      {
        key: 'totalFunding' as const,
        value: parseFloat(formatEther(totalInvested)).toFixed(2),
        subtitle: 'Total invested'
      },
      {
        key: 'activeProjects' as const,
        value: parseFloat(formatEther(netInvestment)).toFixed(2),
        subtitle: 'Net investment'
      },
      {
        key: 'activities' as const,
        value: parseFloat(formatEther(totalClaimed)).toFixed(2),
        subtitle: 'Total claimed'
      }
    ]
  }, [investors, purchases, refunds, claims])
 
  return (
    <div className="space-y-6">
      {/* Investment Metrics */}
      <MetricGrid
        metrics={investorMetrics}
        isLoading={isLoading}
        columns={4}
      />
 
      {/* Investment Status Distribution */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 border border-slate-200">
          <h3 className="text-lg font-semibold mb-4">Investment Status Distribution</h3>
          <DonutChartComponent 
            data={[
              { name: 'Active', value: investors.filter(i => i.investmentStatus === 'active').length },
              { name: 'Refunded', value: investors.filter(i => i.investmentStatus === 'refunded').length },
              { name: 'Claimed', value: investors.filter(i => i.investmentStatus === 'claimed').length }
            ].filter(item => item.value > 0)}
            category="value"
            dataKey="name"
            showLabel={true}
            valueFormatter={(value) => `${value} investor${value !== 1 ? 's' : ''}`}
          />
        </div>
        
        <div className="bg-white p-6 border border-slate-200">
          <h3 className="text-lg font-semibold mb-4">Transaction Timeline</h3>
          <BarChartComponent 
            data={[
              { name: 'Purchases', value: purchases.length },
              { name: 'Refunds', value: refunds.length },
              { name: 'Claims', value: claims.length }
            ]}
            dataKey="name"
            categories={['value']}
          />
        </div>
      </div>
    </div>
  )
}