Add weather information display and configuration options

Integrate weather data fetching, display in a widget, and provide a settings page for configuration.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/BIZe1t3

client/src/components/Layout.tsx

@@ -6,6 +6,7 @@ import { LogOut, Store, Menu } from "lucide-react";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { useIsMobile } from "@/hooks/use-mobile";
 import Sidebar from "./Sidebar";
+import WeatherWidget from "./WeatherWidget";
 import type { Group } from "@shared/schema";
 
 interface StoreContextType {
@@ -91,6 +92,8 @@ export default function Layout({ children }: LayoutProps) {
                 </Button>
               )}
 
+              {/* Weather widget */}
+              <WeatherWidget />
             </div>
 
             {/* Store selector for admin - responsive */}

client/src/components/RouterProduction.tsx

@@ -22,6 +22,7 @@ import Utilities from "@/pages/Utilities";
 import Tasks from "@/pages/Tasks";
 import TasksSimplified from "@/pages/TasksSimplified";
 import SavTickets from "@/pages/SavTickets";
+import WeatherSettings from "@/pages/WeatherSettings";
 import Layout from "@/components/Layout";
 
 function RouterProduction() {
@@ -101,6 +102,7 @@ function RouterProduction() {
         <Route path="/backup" component={Utilities} />
         <Route path="/nocodb-config" component={Utilities} />
         <Route path="/database-debug" component={Utilities} />
+        <Route path="/weather-settings" component={Utilities} />
         
         <Route path="/" component={Dashboard} />
         <Route component={NotFound} />

client/src/components/WeatherWidget.tsx

@@ -0,0 +1,110 @@
+import { useQuery } from "@tanstack/react-query";
+import { Cloud, CloudRain, Sun, CloudSnow, ThermometerSun } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface WeatherData {
+  id: number;
+  date: string;
+  location: string;
+  maxTemperature: number;
+  minTemperature: number;
+  condition: string;
+  icon: string;
+  isCurrentYear: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface WeatherResponse {
+  currentYear: WeatherData | null;
+  previousYear: WeatherData | null;
+  location: string;
+}
+
+const WeatherIcon = ({ condition, size = 16 }: { condition: string; size?: number }) => {
+  const iconClass = `h-${Math.floor(size/4)} w-${Math.floor(size/4)}`;
+  
+  if (condition.includes('rain') || condition.includes('pluie')) {
+    return <CloudRain className={iconClass} />;
+  }
+  if (condition.includes('snow') || condition.includes('neige')) {
+    return <CloudSnow className={iconClass} />;
+  }
+  if (condition.includes('cloud') || condition.includes('nuage')) {
+    return <Cloud className={iconClass} />;
+  }
+  if (condition.includes('sun') || condition.includes('soleil') || condition.includes('clear')) {
+    return <Sun className={iconClass} />;
+  }
+  return <ThermometerSun className={iconClass} />;
+};
+
+export default function WeatherWidget() {
+  const { data: weather, isLoading, error } = useQuery<WeatherResponse>({
+    queryKey: ['/api/weather/current'],
+    refetchInterval: 30 * 60 * 1000, // Refetch every 30 minutes
+    retry: 1,
+  });
+
+  if (isLoading) {
+    return (
+      <Card className="bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+        <CardContent className="p-3">
+          <div className="flex items-center gap-2 text-sm">
+            <div className="animate-pulse">
+              <Cloud className="h-4 w-4" />
+            </div>
+            <span className="text-blue-700 dark:text-blue-300">Chargement météo...</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error || !weather) {
+    return null; // Don't show widget if weather service is not configured
+  }
+
+  const currentTemp = weather.currentYear?.maxTemperature;
+  const previousTemp = weather.previousYear?.maxTemperature;
+  const location = weather.location || "Nancy";
+
+  return (
+    <Card className="bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+      <CardContent className="p-3">
+        <div className="flex items-center gap-3 text-sm">
+          <div className="flex items-center gap-1">
+            <WeatherIcon condition={weather.currentYear?.condition || ''} />
+            <span className="text-blue-700 dark:text-blue-300 font-medium">
+              {location.split(',')[0]}
+            </span>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <div className="text-blue-800 dark:text-blue-200 font-semibold">
+              {currentTemp !== undefined ? `${Math.round(currentTemp)}°` : '--°'}
+            </div>
+            
+            {previousTemp !== undefined && (
+              <div className="text-blue-600 dark:text-blue-400 text-xs">
+                (l'an dernier: {Math.round(previousTemp)}°)
+              </div>
+            )}
+          </div>
+          
+          {currentTemp !== undefined && previousTemp !== undefined && (
+            <div className="text-xs">
+              {currentTemp > previousTemp ? (
+                <span className="text-red-600 dark:text-red-400">↑{Math.round(currentTemp - previousTemp)}°</span>
+              ) : currentTemp < previousTemp ? (
+                <span className="text-blue-600 dark:text-blue-400">↓{Math.round(previousTemp - currentTemp)}°</span>
+              ) : (
+                <span className="text-gray-600 dark:text-gray-400">=</span>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

client/src/pages/Utilities.tsx

@@ -5,7 +5,8 @@ import {
   Settings,
   Database,
   Server,
-  Bug
+  Bug,
+  Cloud
 } from "lucide-react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -15,6 +16,7 @@ import { AlertTriangle } from "lucide-react";
 import BackupManager from "./BackupManager";
 import NocoDBConfig from "./NocoDBConfig";
 import DatabaseDebug from "./DatabaseDebug";
+import WeatherSettings from "./WeatherSettings";
 
 export default function Utilities() {
   const { user } = useAuthUnified();
@@ -24,6 +26,7 @@ export default function Utilities() {
     if (path === '/backup') return 'backups';
     if (path === '/nocodb-config') return 'nocodb';
     if (path === '/database-debug') return 'debug';
+    if (path === '/weather-settings') return 'weather';
     return 'backups';
   });
 
@@ -31,9 +34,10 @@ export default function Utilities() {
   const canManageBackups = hasPermission(user?.role || '', 'backups', 'manage');
   const canManageNocoDB = user?.role === 'admin';
   const canDebugDatabase = user?.role === 'admin';
+  const canManageWeather = user?.role === 'admin';
 
   // Si l'utilisateur n'a aucune permission, afficher le message d'accès refusé
-  if (!canManageBackups && !canManageNocoDB && !canDebugDatabase) {
+  if (!canManageBackups && !canManageNocoDB && !canDebugDatabase && !canManageWeather) {
     return (
       <div className="flex-1 flex items-center justify-center">
         <Card className="w-96">
@@ -69,7 +73,7 @@ export default function Utilities() {
       {/* Content avec onglets */}
       <div className="flex-1 p-6 overflow-hidden">
         <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
-          <TabsList className="grid w-full grid-cols-3 mb-6">
+          <TabsList className="grid w-full grid-cols-4 mb-6">
             {canManageBackups && (
               <TabsTrigger value="backups" className="flex items-center gap-2">
                 <Database className="w-4 h-4" />
@@ -88,6 +92,12 @@ export default function Utilities() {
                 Debug Base de Données
               </TabsTrigger>
             )}
+            {canManageWeather && (
+              <TabsTrigger value="weather" className="flex items-center gap-2">
+                <Cloud className="w-4 h-4" />
+                Météo
+              </TabsTrigger>
+            )}
           </TabsList>
 
           {/* Contenu des onglets */}
@@ -114,6 +124,14 @@ export default function Utilities() {
               </div>
             </TabsContent>
           )}
+
+          {canManageWeather && (
+            <TabsContent value="weather" className="flex-1 overflow-hidden">
+              <div className="h-full bg-gray-50 -m-6 p-6">
+                <WeatherSettings />
+              </div>
+            </TabsContent>
+          )}
         </Tabs>
       </div>
     </div>

client/src/pages/WeatherSettings.tsx

@@ -0,0 +1,265 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { AlertCircle, CheckCircle, Cloud, Settings } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+
+interface WeatherSettings {
+  id: number;
+  apiKey: string;
+  location: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function WeatherSettings() {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [isTesting, setIsTesting] = useState(false);
+
+  // Fetch weather settings
+  const { data: settings, isLoading } = useQuery<WeatherSettings>({
+    queryKey: ['/api/weather/settings'],
+  });
+
+  // Update settings mutation
+  const updateSettingsMutation = useMutation({
+    mutationFn: async (data: Partial<WeatherSettings>) => {
+      const url = settings?.id ? `/api/weather/settings/${settings.id}` : '/api/weather/settings';
+      const method = settings?.id ? 'PUT' : 'POST';
+      
+      const response = await fetch(url, {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to save settings');
+      }
+      
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['/api/weather/settings'] });
+      toast({
+        title: "Configuration sauvegardée",
+        description: "Les paramètres météo ont été mis à jour avec succès.",
+      });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Erreur",
+        description: error.message || "Impossible de sauvegarder les paramètres.",
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Test API connection
+  const testConnection = async (apiKey: string, location: string) => {
+    setIsTesting(true);
+    setTestResult(null);
+    
+    try {
+      const response = await fetch('/api/weather/test-connection', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ apiKey, location }),
+      });
+      
+      if (!response.ok) {
+        throw new Error('Test connection failed');
+      }
+      
+      const result = await response.json();
+      setTestResult(result);
+    } catch (error: any) {
+      setTestResult({ 
+        success: false, 
+        message: error.message || "Erreur lors du test de connexion" 
+      });
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    
+    const data = {
+      apiKey: formData.get('apiKey') as string,
+      location: formData.get('location') as string,
+      isActive: formData.get('isActive') === 'on',
+    };
+
+    updateSettingsMutation.mutate(data);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Cloud className="h-6 w-6" />
+          <h1 className="text-2xl font-bold">Configuration Météo</h1>
+        </div>
+        <Card>
+          <CardContent className="p-6">
+            <div className="animate-pulse space-y-4">
+              <div className="h-4 bg-gray-200 rounded w-1/4"></div>
+              <div className="h-10 bg-gray-200 rounded"></div>
+              <div className="h-4 bg-gray-200 rounded w-1/4"></div>
+              <div className="h-10 bg-gray-200 rounded"></div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6 max-w-2xl">
+      <div className="flex items-center gap-2 mb-6">
+        <Cloud className="h-6 w-6" />
+        <h1 className="text-2xl font-bold">Configuration Météo</h1>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Settings className="h-5 w-5" />
+            Paramètres API Visual Crossing
+          </CardTitle>
+          <CardDescription>
+            Configurez l'API Visual Crossing pour afficher la météo du jour actuel et de l'année précédente.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="apiKey">Clé API Visual Crossing</Label>
+              <Input
+                id="apiKey"
+                name="apiKey"
+                type="password"
+                placeholder="Votre clé API Visual Crossing"
+                defaultValue={settings?.apiKey || ""}
+                required
+              />
+              <p className="text-sm text-muted-foreground">
+                Obtenez votre clé API gratuite sur{" "}
+                <a
+                  href="https://www.visualcrossing.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:underline"
+                >
+                  visualcrossing.com
+                </a>
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="location">Localisation</Label>
+              <Input
+                id="location"
+                name="location"
+                placeholder="Nancy, France"
+                defaultValue={settings?.location || "Nancy, France"}
+                required
+              />
+              <p className="text-sm text-muted-foreground">
+                Ville ou région pour laquelle afficher la météo
+              </p>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Switch
+                id="isActive"
+                name="isActive"
+                defaultChecked={settings?.isActive ?? true}
+              />
+              <Label htmlFor="isActive">Activer l'affichage météo</Label>
+            </div>
+
+            {testResult && (
+              <Alert variant={testResult.success ? "default" : "destructive"}>
+                {testResult.success ? (
+                  <CheckCircle className="h-4 w-4" />
+                ) : (
+                  <AlertCircle className="h-4 w-4" />
+                )}
+                <AlertDescription>{testResult.message}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="flex gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  const formData = new FormData(document.querySelector('form') as HTMLFormElement);
+                  const apiKey = formData.get('apiKey') as string;
+                  const location = formData.get('location') as string;
+                  
+                  if (apiKey && location) {
+                    testConnection(apiKey, location);
+                  } else {
+                    toast({
+                      title: "Erreur",
+                      description: "Veuillez remplir la clé API et la localisation avant de tester.",
+                      variant: "destructive",
+                    });
+                  }
+                }}
+                disabled={isTesting}
+              >
+                {isTesting ? "Test en cours..." : "Tester la connexion"}
+              </Button>
+              
+              <Button 
+                type="submit" 
+                disabled={updateSettingsMutation.isPending}
+              >
+                {updateSettingsMutation.isPending ? "Sauvegarde..." : "Sauvegarder"}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>À propos</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground space-y-2">
+          <p>
+            Le widget météo affiche la température maximale du jour actuel ainsi que 
+            celle du même jour l'année précédente, permettant une comparaison rapide.
+          </p>
+          <p>
+            Les données sont mises en cache pour éviter les appels API répétés et 
+            optimiser les performances.
+          </p>
+          <p>
+            L'affichage météo apparaît en haut à gauche de l'interface, 
+            à côté du sélecteur de magasin.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}