Merge pull request #182 from R0m1k3/1.1

1.1

client/src/components/AnnouncementCard.tsx

@@ -45,7 +45,7 @@ export default function AnnouncementCard() {
   });
 
   // Fetch announcements
-  const { data: announcements = [] } = useQuery<AnnouncementWithRelations[]>({
+  const { data: announcements = [], isLoading } = useQuery<AnnouncementWithRelations[]>({
     queryKey: ['/api/announcements', selectedStoreId],
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -63,6 +63,7 @@ export default function AnnouncementCard() {
       
       return response.json();
     },
+    enabled: !!user,
   });
 
   // Fetch groups for admin
@@ -182,19 +183,36 @@ export default function AnnouncementCard() {
     }
   };
 
+  if (isLoading) {
     return (
       <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <div className="flex items-center space-x-2">
+          <CardTitle className="text-sm font-medium">Informations</CardTitle>
-          <Megaphone className="h-5 w-5 text-muted-foreground" />
+          <Megaphone className="h-4 w-4 text-muted-foreground" />
-          <CardTitle className="text-lg">Informations</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center h-32">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
           </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">Informations</CardTitle>
+        <Megaphone className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
         {user?.role === 'admin' && (
+          <div className="mb-4">
             <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
               <DialogTrigger asChild>
-              <Button size="sm" variant="outline">
+                <Button size="sm" variant="outline" className="w-full">
-                <Plus className="h-4 w-4 mr-1" />
+                  <Plus className="h-4 w-4 mr-2" />
-                Nouveau
+                  Nouvelle information
                 </Button>
               </DialogTrigger>
               <DialogContent className="sm:max-w-[500px]">
@@ -261,7 +279,7 @@ export default function AnnouncementCard() {
                       render={({ field }) => (
                         <FormItem>
                           <FormLabel>Magasin (optionnel)</FormLabel>
-                        <Select onValueChange={(value) => field.onChange(value === 'all' ? undefined : parseInt(value))}>
+                          <Select onValueChange={(value) => field.onChange(value === 'all' ? null : parseInt(value))}>
                             <FormControl>
                               <SelectTrigger>
                                 <SelectValue placeholder="Tous les magasins" />
@@ -288,23 +306,6 @@ export default function AnnouncementCard() {
                       >
                         Annuler
                       </Button>
-                    <Button 
-                      type="button"
-                      variant="secondary"
-                      onClick={() => {
-                        console.log('🔥 [TEST] Direct test button clicked');
-                        const testData = {
-                          title: "Test Direct",
-                          content: "Test contenu direct",
-                          priority: "normal" as const,
-                          groupId: null,
-                        };
-                        console.log('🔥 [TEST] Test data:', testData);
-                        createMutation.mutate(testData);
-                      }}
-                    >
-                      Test Direct
-                    </Button>
                       <Button 
                         type="submit" 
                         disabled={createMutation.isPending}
@@ -317,43 +318,46 @@ export default function AnnouncementCard() {
                 </Form>
               </DialogContent>
             </Dialog>
+          </div>
         )}
-      </CardHeader>
+
-      <CardContent>
         {announcements.length === 0 ? (
-          <div className="text-center text-muted-foreground py-6">
+          <div className="text-center py-6">
-            <Megaphone className="h-12 w-12 mx-auto mb-2 opacity-50" />
+            <Megaphone className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
-            <p>Aucune information disponible</p>
+            <p className="text-sm text-muted-foreground">
+              Aucune information disponible
+            </p>
           </div>
         ) : (
-          <div className="space-y-3 max-h-80 overflow-y-auto">
+          <div className="space-y-3">
-            {announcements.map((announcement) => (
+            {announcements.map((announcement) => {
-              <div
+              return (
-                key={announcement.id}
+                <div key={announcement.id} className="flex items-start justify-between p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
-                className="p-3 bg-muted/50 rounded-lg space-y-2"
-              >
-                <div className="flex items-start justify-between">
                   <div className="flex-1 min-w-0">
-                    <div className="flex items-center space-x-2 mb-1">
+                    <div className="flex items-center gap-2 mb-1">
-                      {getPriorityIcon(announcement.priority)}
                       <h4 className="font-medium text-sm truncate">
                         {announcement.title}
                       </h4>
                       <Badge variant="secondary" className={getPriorityColor(announcement.priority)}>
+                        <span className="flex items-center gap-1">
+                          {getPriorityIcon(announcement.priority)}
                           {announcement.priority === 'urgent' ? 'Urgent' : 
                            announcement.priority === 'important' ? 'Important' : 'Normal'}
+                        </span>
                       </Badge>
                     </div>
-                    <p className="text-sm text-muted-foreground line-clamp-2">
+                    
+                    <p className="text-xs text-muted-foreground mb-1 line-clamp-2">
                       {announcement.content}
                     </p>
-                    <div className="flex items-center justify-between text-xs text-muted-foreground mt-2">
+                    
+                    <div className="flex items-center gap-3 text-xs text-muted-foreground">
                       <span>
                         Par {announcement.author.firstName} {announcement.author.lastName}
                         {announcement.group && ` • ${announcement.group.name}`}
                       </span>
                       <span>
-                        {safeFormat(safeDate(announcement.createdAt), 'dd/MM/yyyy HH:mm')}
+                        {safeFormat(safeDate(announcement.createdAt), 'dd/MM HH:mm')}
                       </span>
                     </div>
                   </div>
@@ -369,8 +373,8 @@ export default function AnnouncementCard() {
                     </Button>
                   )}
                 </div>
-              </div>
+              );
-            ))}
+            })}
           </div>
         )}
       </CardContent>

client/src/pages/Dashboard.tsx

@@ -234,11 +234,6 @@ export default function Dashboard() {
               Vue d'ensemble des performances et statistiques
             </p>
           </div>
-          {selectedStoreId && user?.role === 'admin' && (
-            <Badge variant="outline" className="text-blue-700 border-blue-300 w-fit">
-              Magasin sélectionné
-            </Badge>
-          )}
         </div>
       </div>