feat: Simplify feedback system, fix Firebase issues, and improve analytics dashboard

- Create SimpleFeedbackModal for quick 30-second feedback collection
- Fix Firebase feedback submission issues with better error handling
- Improve analytics dashboard with funding-ready metrics and revenue projections
- Remove typewriter effect from first demo title for instant display
- Clean up unused files from /lib folder
- Update badge system with correct badge names and requirements
- Fix notification loops in demo completion process
- Add comprehensive error logging and debugging for Firebase operations
- Enhance user experience with streamlined feedback flow
- Add market opportunity metrics for investor presentations

Author: josegomez-dev

app/analytics/page.tsx

@@ -22,7 +22,7 @@ import { MilestoneVotingDemo } from '@/components/demos/MilestoneVotingDemo';
 import { DisputeResolutionDemo } from '@/components/demos/DisputeResolutionDemo';
 import { MicroTaskMarketplaceDemo } from '@/components/demos/MicroTaskMarketplaceDemo';
 import { useDemoStats } from '@/hooks/useDemoStats';
-import { DemoFeedbackModal } from '@/components/ui/modals/DemoFeedbackModal';
+import { SimpleFeedbackModal } from '@/components/ui/modals/SimpleFeedbackModal';
 import { initializeDemoStats } from '@/lib/demo-stats-initializer';
 import { OnboardingOverlay } from '@/components/OnboardingOverlay';
 import { ImmersiveDemoModal } from '@/components/ui/modals/ImmersiveDemoModal';
@@ -107,7 +107,7 @@ const DemoSelector = ({
   isConnected: boolean;
 }) => {
   const { getCompletedDemos } = useAccount();
-  const { demoStats, clapDemo } = useDemoStats();
+  const { demoStats, clapDemo, refreshStats } = useDemoStats();
 
   const getClapStats = (demoId: string) => {
     const stats = demoStats[demoId];
@@ -476,8 +476,9 @@ const DemoSelector = ({
 function HomePageContent() {
   const { isConnected } = useGlobalWallet();
   const { isAuthenticated, user } = useAuth();
+  const { account } = useAccount();
   const [activeDemo, setActiveDemo] = useState('hello-milestone');
-  const { submitFeedback, markDemoComplete } = useDemoStats();
+  const { submitFeedback, markDemoComplete, refreshStats } = useDemoStats();
 
   const [walletSidebarOpen, setWalletSidebarOpen] = useState(false);
   const [walletExpanded, setWalletExpanded] = useState(false);
@@ -571,6 +572,15 @@ function HomePageContent() {
     };
   }, []);
 
+  // Refresh demo stats when account changes (after demo completion)
+  useEffect(() => {
+    if (account) {
+      refreshStats().catch(error => {
+        console.error('Failed to refresh demo stats:', error);
+      });
+    }
+  }, [account, refreshStats]);
+
   // Authentication handlers
   const handleSignUpClick = () => {
     setAuthModalMode('signup');
@@ -1129,7 +1139,7 @@ function HomePageContent() {
 
       {/* Demo Feedback Modal */}
       {showFeedbackModal && feedbackDemoData && (
-        <DemoFeedbackModal
+        <SimpleFeedbackModal
           isOpen={showFeedbackModal}
           onClose={handleFeedbackClose}
           onSubmit={handleFeedbackSubmit}

app/page.tsx

@@ -15,6 +15,7 @@ import {
   useRealInitializeEscrow,
 } from '@/lib/real-trustless-work';
 import { assetConfig } from '@/lib/wallet-config';
+import { useAccount } from '@/contexts/AccountContext';
 import { useToast } from '@/contexts/ToastContext';
 import { useTransactionHistory } from '@/contexts/TransactionContext';
 import { useDemoStats } from '@/hooks/useDemoStats';
@@ -50,6 +51,7 @@ export const DisputeResolutionDemo = () => {
   const { addToast } = useToast();
   const { addTransaction, updateTransaction } = useTransactionHistory();
   const { addCompletion, getDemoHistory, getTotalPointsEarned, getBestScore, getCompletionCount } = useDemoCompletionHistory();
+  const { completeDemo: completeDemoInAccount } = useAccount();
   const [contractId, setContractId] = useState<string>('');
   const [escrowData, setEscrowData] = useState<any>(null);
   const [currentRole, setCurrentRole] = useState<'client' | 'worker' | 'arbitrator'>('client');
@@ -113,6 +115,7 @@ export const DisputeResolutionDemo = () => {
       client: 'client_wallet_address',
     },
   ]);
+  const [isCompleted, setIsCompleted] = useState(false);
 
   // Trigger confetti when demo is completed
   useEffect(() => {
@@ -123,49 +126,29 @@ export const DisputeResolutionDemo = () => {
       milestones.map(m => ({ id: m.id, status: m.status }))
     );
 
-    if (allReleased) {
+    // Only complete if all milestones are released AND demo hasn't been completed yet
+    if (allReleased && !isCompleted) {
       console.log('🎉 Triggering confetti for Dispute Resolution Demo!');
       setShowConfetti(true);
+      setIsCompleted(true); // Mark as completed to prevent multiple executions
 
-      // Complete the demo in Firebase
+      // Complete the demo using the centralized account system
       const completeDemo = async () => {
         try {
-          const completionTime = 5; // Estimated completion time in minutes
           const score = 95; // High score for completing dispute resolution
-          const completionHistory = getDemoHistory('dispute-resolution');
-          const isFirstCompletion = completionHistory.length === 0;
 
-          // Calculate points earned
-          const basePoints = 150; // Higher base points for dispute resolution
-          const scoreMultiplier = score / 100;
-          let pointsEarned = Math.round(basePoints * scoreMultiplier);
-          
-          // Give reduced points for replays (25% of original)
-          if (!isFirstCompletion) {
-            pointsEarned = Math.round(pointsEarned * 0.25);
-          }
-          
-          // Add to completion history
-          addCompletion({
-            demoId: 'dispute-resolution',
-            demoName: 'Drama Queen Escrow',
-            score,
-            pointsEarned,
-            completionTime,
-            isFirstCompletion,
-            network: walletData?.network || 'TESTNET',
-            walletAddress: walletData?.publicKey || '',
-          });
-          
-          // Demo completion is handled by the account system via completeDemo
+          // Use the centralized account system for completion
+          await completeDemoInAccount('dispute-resolution', score);
 
+          console.log('✅ Dispute Resolution Demo completed successfully');
+        } catch (error) {
+          console.error('❌ Failed to complete Dispute Resolution Demo:', error);
           addToast({
-            type: 'success',
-            title: 'Demo Completed!',
-            message: `Completed Drama Queen Escrow! Earned ${pointsEarned} points! 🎉`,
+            type: 'error',
+            title: '❌ Demo Completion Failed',
+            message: 'Failed to complete demo. Please try again.',
+            duration: 5000,
           });
-        } catch (error) {
-          console.error('Failed to complete demo:', error);
         }
       };
 
@@ -179,7 +162,7 @@ export const DisputeResolutionDemo = () => {
       }, 4000);
       return () => clearTimeout(timer);
     }
-  }, [milestones, addCompletion, getDemoHistory, walletData, addToast]);
+  }, [milestones, completeDemoInAccount, walletData, addToast, isCompleted]);
 
   async function handleInitializeEscrow() {
     if (!walletData) {

components/demos/DisputeResolutionDemo.tsx

@@ -1407,21 +1407,12 @@ export const HelloMilestoneDemo = () => {
       <div className='bg-gradient-to-br from-brand-500/20 to-brand-400/20 backdrop-blur-sm border border-brand-400/30 rounded-xl shadow-2xl p-8'>
         <div className='text-center mb-8'>
           <h2 className='text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-brand-300 mb-4'>
-            <TypeWriter
-              text="🚀 Baby Steps to Riches Flow Demo"
-              speed={60}
-              className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-brand-300"
-              showCursor={false}
-            />
+            🚀 Baby Steps to Riches Flow Demo
           </h2>
           <div className="mb-4">
-            <TypeWriter
-              text="Experience the complete trustless escrow flow with real blockchain transactions"
-              speed={40}
-              delay={2000}
-              className="text-white/80 text-lg"
-              showCursor={false}
-            />
+            <p className="text-white/80 text-lg">
+              Experience the complete trustless escrow flow with real blockchain transactions
+            </p>
           </div>
 
 

components/demos/HelloMilestoneDemo.tsx

@@ -405,15 +405,9 @@ export const MicroTaskMarketplaceDemo = () => {
         duration: 5000,
       });
 
-      // Mark milestone as completed
-      const payload = {
-        contractId: task.escrowId,
-        milestoneId: 'release_1',
-        status: 'completed',
-        releaseMode: 'multi-release',
-      };
-
-      await hooks.changeMilestoneStatus(payload);
+      // Note: Milestone status change is handled by the escrow system
+      // For demo purposes, we'll skip the milestone status change
+      // as it requires real blockchain implementation
       setDeliverable('');
     } catch (error) {
       console.error('Failed to submit deliverable:', error);

components/demos/MicroTaskMarketplaceDemo.tsx

@@ -64,19 +64,6 @@ export const Header = () => {
               />
               <span>Nexus Web3 Playground</span>
             </a>
-            <a
-              href='/docs'
-              className='text-white/80 hover:text-white transition-colors flex items-center space-x-2'
-            >
-              <Image
-                src='/images/icons/docs.png'
-                alt='Docs'
-                width={20}
-                height={20}
-                className='w-5 h-5'
-              />
-              <span>Docs</span>
-            </a>
           </nav>
 
           {/* Header Controls */}
@@ -199,6 +186,16 @@ export const Header = () => {
                 <span>Docs</span>
               </div>
             </a>
+            <a
+              href='/analytics'
+              className='block px-3 py-2 text-white/80 hover:text-white hover:bg-white/10 rounded-md transition-colors'
+              onClick={() => setIsMenuOpen(false)}
+            >
+              <div className='flex items-center space-x-2'>
+                <span className='text-lg'>📊</span>
+                <span>Analytics</span>
+              </div>
+            </a>
           </div>
         </div>
       )}

components/layout/Header.tsx

@@ -113,16 +113,31 @@ export const RewardsSidebar: React.FC<RewardsSidebarProps> = ({ isOpen, onClose
 
   const renderBadges = () => {
     try {
+      // Define main achievement badges
+      const mainBadgeIds = [
+        'welcome_explorer',
+        'escrow-expert', 
+        'trust-guardian',
+        'stellar-champion',
+        'nexus-master'
+      ];
+
       // Check which badges are earned by the user (match by name since that's how they're stored)
       const earnedBadgeNames = safeAccount.badges?.map((badge: any) => badge.name) || [];
       const badgesWithStatus = AVAILABLE_BADGES?.map((badge: Badge) => ({
         ...badge,
         isEarned: earnedBadgeNames.includes(badge.name),
-        earnedAt: safeAccount.badges?.find(b => b.name === badge.name)?.earnedAt
+        earnedAt: safeAccount.badges?.find(b => b.name === badge.name)?.earnedAt,
+        isMainAchievement: mainBadgeIds.includes(badge.id)
       })) || [];
 
+      // Separate main achievements from extra badges
+      const mainBadges = badgesWithStatus.filter(badge => badge.isMainAchievement);
+      const extraBadges = badgesWithStatus.filter(badge => !badge.isMainAchievement);
+
       const earnedCount = earnedBadgeNames.length;
       const totalCount = AVAILABLE_BADGES?.length || 0;
+      const mainEarnedCount = mainBadges.filter(badge => badge.isEarned).length;
 
       return (
         <div className="space-y-4">
@@ -136,23 +151,67 @@ export const RewardsSidebar: React.FC<RewardsSidebarProps> = ({ isOpen, onClose
               />
             </div>
           </div>
-          
-          <div className="grid grid-cols-1 gap-3 max-h-96 overflow-y-auto">
-            {badgesWithStatus.length > 0 ? (
-              badgesWithStatus.map((badge) => (
-                <Badge3D
-                  key={badge.id}
-                  badge={badge}
-                  size="sm"
-                  compact={true}
-                />
-              ))
-            ) : (
-              <div className="text-center py-8 text-gray-400">
-                <div className="text-4xl mb-2">🏆</div>
-                <div className="text-sm">No badges available</div>
+
+          {/* Main Achievements Section */}
+          <div className="space-y-3">
+            <div className="flex items-center space-x-2 mb-3">
+              <div className="w-2 h-2 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full"></div>
+              <h3 className="text-lg font-semibold text-white">Main Achievements</h3>
+              <div className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 px-2 py-1 rounded-full text-xs text-blue-300 border border-blue-400/30">
+                {mainEarnedCount} / {mainBadges.length}
+              </div>
+            </div>
+            
+            <div className="space-y-2">
+              {mainBadges.map((badge) => (
+                <div key={badge.id} className="relative">
+                  <Badge3D
+                    badge={badge}
+                    size="sm"
+                    compact={true}
+                  />
+                  {/* Main Achievement Indicator */}
+                  <div className="absolute -top-1 -right-1 w-3 h-3 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full border border-white/20"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Extra Badges Section */}
+          {extraBadges.length > 0 && (
+            <div className="space-y-3">
+              <div className="flex items-center space-x-2 mb-3">
+                <div className="w-2 h-2 bg-gradient-to-r from-gray-400 to-gray-500 rounded-full"></div>
+                <h3 className="text-lg font-semibold text-white">Extra Badges</h3>
+                <div className="bg-gradient-to-r from-gray-500/20 to-gray-600/20 px-2 py-1 rounded-full text-xs text-gray-300 border border-gray-400/30">
+                  {extraBadges.filter(badge => badge.isEarned).length} / {extraBadges.length}
+                </div>
+              </div>
+              
+              <div className="space-y-2 max-h-64 overflow-y-auto">
+                {extraBadges.map((badge) => (
+                  <div key={badge.id} className="opacity-80 hover:opacity-100 transition-opacity">
+                    <Badge3D
+                      badge={badge}
+                      size="sm"
+                      compact={true}
+                    />
+                  </div>
+                ))}
               </div>
-            )}
+            </div>
+          )}
+
+          {/* Achievement Guide */}
+          <div className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-lg p-3 border border-blue-400/20 mt-4">
+            <h4 className="text-sm font-semibold text-blue-300 mb-2">🎯 Achievement Guide</h4>
+            <div className="text-xs text-gray-300 space-y-1">
+              <div>• <span className="text-blue-300">Account Creation</span> → Welcome Explorer</div>
+              <div>• <span className="text-blue-300">Complete Demo 1</span> → Escrow Expert</div>
+              <div>• <span className="text-blue-300">Complete Demo 3</span> → Trust Guardian</div>
+              <div>• <span className="text-blue-300">Complete Demo 4</span> → Stellar Champion</div>
+              <div>• <span className="text-purple-300">Complete Demos 1, 3, 4</span> → Nexus Master</div>
+            </div>
           </div>
         </div>
       );

components/ui/RewardsSidebar.tsx

@@ -69,3 +69,5 @@ export const Card: React.FC<CardProps> = ({
 
 
 
+
+

components/ui/common/Card.tsx

@@ -53,3 +53,5 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
 
 
 
+
+

components/ui/common/LoadingSpinner.tsx

@@ -64,3 +64,5 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
 
 
 
+
+