From 1a80211ae64894bc051f1ac209fd2d4fdd0edd70 Mon Sep 17 00:00:00 2001
From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com>
Date: Sun, 8 Jun 2025 15:46:43 +0000
Subject: [PATCH] Improve overall user interface and fix reported functionality
 problems

Fixes dark mode toggle, landing page layout, dashboard structure, and removes unused imports.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7e7c4e8-20cb-41c4-9d0e-79f48938fede
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/d4eed189-5f49-4ca5-967b-42e14b879685.jpg
---
 client/src/pages/DashboardPage.tsx |  17 +-
 client/src/pages/LandingPage.tsx   | 365 ++++++++---------------------
 client/src/pages/SettingsPage.tsx  |  15 +-
 3 files changed, 117 insertions(+), 280 deletions(-)

diff --git a/client/src/pages/DashboardPage.tsx b/client/src/pages/DashboardPage.tsx
index 30fe774..02b51ff 100644
--- a/client/src/pages/DashboardPage.tsx
+++ b/client/src/pages/DashboardPage.tsx
@@ -75,15 +75,10 @@ export default function DashboardPage() {
   };
 
   return (
-    <div className="min-h-screen bg-background">
-      <Header />
-      
-      <div className="dashboard-grid">
-        {/* Sidebar */}
-        <Sidebar className="hidden md:block" />
-        
-        {/* Main Content */}
-        <main className="flex-1 p-6 overflow-auto">
+    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-900">
+      <Sidebar className="w-64 border-r" />
+      <div className="flex-1 overflow-auto">
+        <div className="p-6">
           <div className="max-w-7xl mx-auto space-y-6">
             
             {/* Welcome Header */}
@@ -265,11 +260,11 @@ export default function DashboardPage() {
               </Card>
             )}
           </div>
-        </main>
+        </div>
       </div>
 
       {/* Global Voice Indicator */}
-      <VoiceIndicator showControls />
+      <VoiceIndicator />
     </div>
   );
 }
diff --git a/client/src/pages/LandingPage.tsx b/client/src/pages/LandingPage.tsx
index 42f1e25..a114cdf 100644
--- a/client/src/pages/LandingPage.tsx
+++ b/client/src/pages/LandingPage.tsx
@@ -1,12 +1,8 @@
 import { useLocation } from "wouter";
 import { useAuth } from "@/hooks/useAuth";
 import { useVoice } from "@/hooks/useVoice";
-import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-import { aiService } from "@/services/aiService";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
 import DailyJoke from "@/components/ai/DailyJoke";
 import VoiceIndicator from "@/components/voice/VoiceIndicator";
 import Header from "@/components/layout/Header";
@@ -14,22 +10,16 @@ import { useTheme } from "@/context/ThemeContext";
 import { 
   Mic, 
   Volume2, 
-  Shield, 
   Brain, 
-  CheckCircle, 
   DollarSign, 
   Calendar,
-  Play,
-  ArrowRight,
-  Zap
+  ArrowRight
 } from "lucide-react";
 
 export default function LandingPage() {
   const [, setLocation] = useLocation();
   const { user } = useAuth();
   const { isListening, startListening, stopListening, isSupported } = useVoice();
-  const { theme } = useTheme();
-  const { t } = useTranslation();
 
   // Redirect to dashboard if already authenticated
   if (user) {
@@ -54,283 +44,122 @@ export default function LandingPage() {
       <Header />
       
       {/* Hero Section */}
-      <main className="relative py-20 lg:py-32 overflow-hidden">
-        {/* Background Pattern */}
-        <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%236366f1%22%20fill-opacity%3D%220.05%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%222%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-50"></div>
-        
-        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
+      <main className="relative py-12 lg:py-20 overflow-hidden">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center space-y-8">
             
-            {/* Left Column: Content */}
-            <div className="space-y-8">
-              {/* Daily Joke Display */}
-              <DailyJoke />
-
-              <div className="space-y-4">
-                <h1 className="text-4xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
-                  {t('landing.heroTitle')}
-                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600">
-                    {" "}MenAssist
-                  </span>
-                </h1>
-                
-                <p className="text-xl text-slate-600 dark:text-slate-300 leading-relaxed">
-                  {t('landing.heroSubtitle')}
-                </p>
-              </div>
-
-              {/* Key Features */}
-              <div className="grid grid-cols-2 gap-4">
-                <Card className="border-slate-200 dark:border-slate-700">
-                  <CardContent className="p-4">
-                    <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900/50 rounded-lg flex items-center justify-center mb-3">
-                      <Calendar className="w-5 h-5 text-primary-600 dark:text-primary-400" />
-                    </div>
-                    <h4 className="font-semibold text-slate-900 dark:text-white text-sm">{t('landing.taskManagement')}</h4>
-                    <p className="text-xs text-slate-600 dark:text-slate-400 mt-1">{t('landing.taskManagementDesc')}</p>
-                  </CardContent>
-                </Card>
-                
-                <Card className="border-slate-200 dark:border-slate-700">
-                  <CardContent className="p-4">
-                    <div className="w-8 h-8 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg flex items-center justify-center mb-3">
-                      <DollarSign className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
-                    </div>
-                    <h4 className="font-semibold text-slate-900 dark:text-white text-sm">{t('landing.financialTracking')}</h4>
-                    <p className="text-xs text-slate-600 dark:text-slate-400 mt-1">{t('landing.financialTrackingDesc')}</p>
-                  </CardContent>
-                </Card>
-              </div>
-
-              <div className="flex flex-col sm:flex-row gap-4">
-                <Button 
-                  onClick={handleGetStarted}
-                  className="flex-1 bg-primary-600 hover:bg-primary-700 text-white px-8 py-4 text-lg font-semibold shadow-lg hover:shadow-xl transition-all"
-                >
-                  {t('landing.startFreeTrial')}
-                  <ArrowRight className="w-5 h-5 ml-2" />
-                </Button>
-                <Button 
-                  variant="outline"
-                  onClick={() => setLocation("/demo")}
-                  className="px-8 py-4 text-lg font-semibold border-slate-300 dark:border-slate-600 hover:border-primary-300 dark:hover:border-primary-500"
-                >
-                  <Play className="w-5 h-5 mr-2" />
-                  {t('landing.viewDemo')}
-                </Button>
-              </div>
-            </div>
-
-            {/* Right Column: Voice Demo */}
-            <div className="lg:pl-8">
-              <Card className="shadow-2xl border-slate-200 dark:border-slate-700">
-                <CardContent className="p-8">
-                  <div className="text-center space-y-6">
-                    <h3 className="text-xl font-semibold text-slate-900 dark:text-white">{t('landing.tryVoiceCommands')}</h3>
-                    
-                    {/* Voice Visualizer */}
-                    <div className="flex justify-center">
-                      <div className="relative">
-                        <Button
-                          onClick={handleVoiceDemo}
-                          disabled={!isSupported}
-                          className={`w-24 h-24 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white border-0 ${
-                            isListening ? 'animate-pulse scale-110' : ''
-                          }`}
-                        >
-                          <Mic className="w-12 h-12" />
-                        </Button>
-                        {isListening && (
-                          <div className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full animate-pulse" />
-                        )}
-                      </div>
-                    </div>
-                    
-                    <div className="space-y-3">
-                      <Button
-                        onClick={handleVoiceDemo}
-                        disabled={!isSupported}
-                        className="w-full bg-secondary-600 hover:bg-secondary-700 text-white font-medium"
-                      >
-                        <Mic className="w-4 h-4 mr-2" />
-                        {isListening ? t('landing.stopListening') : t('landing.startVoiceDemo')}
-                      </Button>
-                      
-                      <div className="text-sm text-slate-600 dark:text-slate-400 space-y-1">
-                        <p className="font-medium">{t('landing.trySaying')}</p>
-                        <Card className="bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700">
-                          <CardContent className="p-3 text-left space-y-1">
-                            <p>"{t('landing.createTaskExample')}"</p>
-                            <p>"{t('landing.addExpenseExample')}"</p>
-                            <p>"{t('landing.showScheduleExample')}"</p>
-                          </CardContent>
-                        </Card>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          </div>
-        </div>
-
-        {/* Features Section */}
-        <section className="py-20 bg-white dark:bg-slate-800 mt-20">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="text-center mb-16">
-              <h2 className="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mb-4">
-                {t('landing.completeOfflineVoiceAI')}
-              </h2>
-              <p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
-                {t('landing.enterpriseGradeDesc')}
+            {/* Main Hero Content */}
+            <div className="space-y-6">
+              <h1 className="text-4xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
+                Your Personal
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
+                  {" "}Productivity Assistant
+                </span>
+              </h1>
+              
+              <p className="text-xl text-slate-600 dark:text-slate-300 leading-relaxed max-w-3xl mx-auto">
+                Streamline your tasks, manage finances, and boost productivity with AI-powered assistance and voice control.
               </p>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {/* Local AI Processing */}
-              <Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
-                <CardContent className="p-8">
-                  <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-xl flex items-center justify-center mb-4">
-                    <Brain className="w-6 h-6 text-primary-600 dark:text-primary-400" />
-                  </div>
-                  <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.localAIModels')}</h3>
-                  <p className="text-slate-600 dark:text-slate-300 mb-4">
-                    {t('landing.localAIDesc')}
-                  </p>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.baseModelsIncluded')}</span>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.swappableArchitecture')}</span>
-                    </div>
+            {/* Daily Joke in a prominent card */}
+            <div className="max-w-2xl mx-auto">
+              <DailyJoke />
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                size="lg"
+                onClick={handleGetStarted}
+                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-3 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all"
+              >
+                Get Started
+                <ArrowRight className="ml-2 w-5 h-5" />
+              </Button>
+              
+              {isSupported && (
+                <Button
+                  size="lg"
+                  variant="outline"
+                  onClick={handleVoiceDemo}
+                  className="border-2 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-8 py-3 text-lg font-semibold rounded-xl transition-all"
+                >
+                  {isListening ? (
+                    <>
+                      <Volume2 className="w-5 h-5 mr-2 animate-pulse" />
+                      Listening...
+                    </>
+                  ) : (
+                    <>
+                      <Mic className="w-5 h-5 mr-2" />
+                      Try Voice Demo
+                    </>
+                  )}
+                </Button>
+              )}
+            </div>
+
+            {/* Features Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mt-16">
+              <Card className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow">
+                <CardContent className="p-6 text-center">
+                  <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                    <Calendar className="w-6 h-6 text-blue-600 dark:text-blue-400" />
                   </div>
+                  <h3 className="font-semibold text-slate-900 dark:text-white mb-2">Task Management</h3>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">Organize and track your daily tasks efficiently with smart prioritization</p>
                 </CardContent>
               </Card>
-
-              {/* Voice Task Management */}
-              <Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
-                <CardContent className="p-8">
-                  <div className="w-12 h-12 bg-secondary-100 dark:bg-secondary-900 rounded-xl flex items-center justify-center mb-4">
-                    <Calendar className="w-6 h-6 text-secondary-600 dark:text-secondary-400" />
-                  </div>
-                  <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.voiceTaskCreation')}</h3>
-                  <p className="text-slate-600 dark:text-slate-300 mb-4">
-                    {t('landing.voiceTaskCreationDesc')}
-                  </p>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.naturalLanguageProcessing')}</span>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.smartDateExtraction')}</span>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Financial Voice Entry */}
-              <Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
-                <CardContent className="p-8">
-                  <div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900 rounded-xl flex items-center justify-center mb-4">
+              
+              <Card className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow">
+                <CardContent className="p-6 text-center">
+                  <div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg flex items-center justify-center mb-4 mx-auto">
                     <DollarSign className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
                   </div>
-                  <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.voiceFinancialTracking')}</h3>
-                  <p className="text-slate-600 dark:text-slate-300 mb-4">
-                    {t('landing.voiceFinancialDesc')}
-                  </p>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.autoCategorization')}</span>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.receiptOCR')}</span>
-                    </div>
-                  </div>
+                  <h3 className="font-semibold text-slate-900 dark:text-white mb-2">Financial Tracking</h3>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">Monitor your expenses and achieve your financial goals with insights</p>
                 </CardContent>
               </Card>
 
-              {/* Privacy & Security */}
-              <Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
-                <CardContent className="p-8">
-                  <div className="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-xl flex items-center justify-center mb-4">
-                    <Shield className="w-6 h-6 text-red-600 dark:text-red-400" />
-                  </div>
-                  <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.completePrivacy')}</h3>
-                  <p className="text-slate-600 dark:text-slate-300 mb-4">
-                    {t('landing.completePrivacyDesc')}
-                  </p>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.onPremiseDeployment')}</span>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.encryptedStorage')}</span>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Real-time Processing */}
-              <Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
-                <CardContent className="p-8">
-                  <div className="w-12 h-12 bg-amber-100 dark:bg-amber-900 rounded-xl flex items-center justify-center mb-4">
-                    <Zap className="w-6 h-6 text-amber-600 dark:text-amber-400" />
-                  </div>
-                  <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.realTimeProcessing')}</h3>
-                  <p className="text-slate-600 dark:text-slate-300 mb-4">
-                    {t('landing.realTimeProcessingDesc')}
-                  </p>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.subSecondResponse')}</span>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.continuousListening')}</span>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              {/* Multi-user Support */}
-              <Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
-                <CardContent className="p-8">
-                  <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4">
-                    <Volume2 className="w-6 h-6 text-purple-600 dark:text-purple-400" />
-                  </div>
-                  <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.multiTierAccess')}</h3>
-                  <p className="text-slate-600 dark:text-slate-300 mb-4">
-                    {t('landing.multiTierDesc')}
-                  </p>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.progressiveOnboarding')}</span>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                      <span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.featureBasedPermissions')}</span>
-                    </div>
+              <Card className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow">
+                <CardContent className="p-6 text-center">
+                  <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                    <Brain className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                   </div>
+                  <h3 className="font-semibold text-slate-900 dark:text-white mb-2">AI Assistant</h3>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">Get intelligent suggestions and automation powered by advanced AI</p>
                 </CardContent>
               </Card>
             </div>
+
+            {/* Voice Control Section */}
+            <div className="mt-20 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-slate-800 dark:to-slate-700 rounded-2xl p-8">
+              <div className="text-center space-y-4">
+                <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto">
+                  <Mic className="w-8 h-8 text-white" />
+                </div>
+                <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Voice-Powered Control</h2>
+                <p className="text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
+                  Control your productivity suite with natural voice commands. Create tasks, check finances, and navigate the app hands-free.
+                </p>
+                {isSupported ? (
+                  <p className="text-sm text-green-600 dark:text-green-400 font-medium">
+                    ✓ Voice control supported on your device
+                  </p>
+                ) : (
+                  <p className="text-sm text-orange-600 dark:text-orange-400">
+                    Voice control requires a modern browser with microphone access
+                  </p>
+                )}
+              </div>
+            </div>
           </div>
-        </section>
+        </div>
       </main>
 
       {/* Voice Status Indicator */}
       <VoiceIndicator />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/client/src/pages/SettingsPage.tsx b/client/src/pages/SettingsPage.tsx
index 9062b9e..96a3201 100644
--- a/client/src/pages/SettingsPage.tsx
+++ b/client/src/pages/SettingsPage.tsx
@@ -243,7 +243,20 @@ export default function SettingsPage() {
                         Switch between light and dark themes
                       </p>
                     </div>
-                    <Switch />
+                    <Switch 
+                      checked={theme === 'dark'}
+                      onCheckedChange={toggleTheme}
+                    />
+                  </div>
+                  <Separator />
+                  <div className="space-y-4">
+                    <div>
+                      <Label>Language</Label>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                        Choose your preferred language
+                      </p>
+                      <LanguageSwitcher />
+                    </div>
                   </div>
                 </CardContent>
               </Card>