missions

app/missions/layout.tsx

@@ -15,40 +15,33 @@ export default function MissionsLayout({
   const pathname = usePathname();
   
   return (
-    <div className="flex h-[calc(100vh-4rem)] overflow-hidden">
+    <div className="flex h-screen">
       {/* Sidebar */}
-      <div className="hidden md:flex w-64 border-r flex-col bg-white">
-        <div className="p-4 border-b">
-          <h2 className="text-xl font-semibold flex items-center">
-            <Kanban className="mr-2 h-5 w-5" />
-            Missions
-          </h2>
-        </div>
-        <ScrollArea className="flex-1">
-          <div className="p-3 space-y-1">
+      <div className="w-[246px] min-w-[246px] border-r bg-white">
+        <ScrollArea className="h-full">
+          <div className="p-4 space-y-2">
             <Link href="/missions" passHref>
-              <Button 
-                variant={pathname === "/missions" ? "secondary" : "ghost"} 
-                className="w-full justify-start text-left"
-              >
-                Mes Missions
-              </Button>
+              <div className={`w-full p-3 rounded-md ${pathname === "/missions" ? "bg-slate-100" : "hover:bg-slate-50"}`}>
+                <span className="text-sm font-medium">Mes Missions</span>
+              </div>
             </Link>
             <Link href="/missions/new" passHref>
-              <Button 
-                variant={pathname === "/missions/new" ? "secondary" : "ghost"} 
-                className="w-full justify-start text-left"
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                Poster une Mission
-              </Button>
+              <div className={`w-full p-3 rounded-md ${pathname === "/missions/new" ? "bg-slate-100" : "hover:bg-slate-50"}`}>
+                <span className="text-sm font-medium">Nouvelle Mission</span>
+              </div>
             </Link>
           </div>
         </ScrollArea>
       </div>
       
       {/* Main content */}
-      <div className="flex-1 overflow-auto">
+      <div 
+        className="flex-1 overflow-auto bg-cover bg-center" 
+        style={{ 
+          backgroundImage: "url('/images/wood-background.jpg')",
+          backgroundRepeat: "repeat",
+        }}
+      >
         {children}
       </div>
     </div>

app/missions/page.tsx

@@ -5,8 +5,6 @@ import { Plus, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import Link from "next/link";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
 
 // Mock mission data until we implement the database
 const mockMissions = [
@@ -49,74 +47,66 @@ export default function MissionsPage() {
   );
   
   return (
-    <div className="p-6">
-      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
-        <div>
-          <h1 className="text-2xl font-bold">Mes Missions</h1>
-          <p className="text-gray-500 mt-1">Gérez vos missions et opportunités de bénévolat</p>
-        </div>
-        
-        <div className="flex gap-3 w-full md:w-auto">
-          <div className="relative flex-1 md:w-64">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
+    <div className="p-0">
+      <div className="flex items-center justify-between bg-blue-900 bg-opacity-20 p-6">
+        <h1 className="text-lg font-semibold text-white">Gérez vos missions et opportunités de bénévolat</h1>
+        <div className="flex items-center space-x-2">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
             <Input
               placeholder="Rechercher une mission..."
-              className="pl-9 w-full"
+              className="pl-9 pr-4 py-2 bg-white/90 border-0 w-64"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
           </div>
           <Link href="/missions/new">
-            <Button>
-              <Plus className="mr-2 h-4 w-4" />
+            <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+              <Plus className="h-4 w-4 mr-2" />
               Nouvelle Mission
             </Button>
           </Link>
         </div>
       </div>
       
-      {filteredMissions.length > 0 ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filteredMissions.map(mission => (
-            <Card key={mission.id} className="overflow-hidden">
-              <CardHeader className="pb-3">
-                <div className="flex justify-between">
-                  <Badge className="mb-2">{mission.category}</Badge>
-                  <Badge variant="outline">{mission.duration}</Badge>
-                </div>
-                <CardTitle className="text-lg">{mission.title}</CardTitle>
-                <CardDescription className="flex items-center mt-1">
-                  <span>Location: {mission.location}</span>
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="pb-3">
-                <div className="flex flex-wrap gap-1">
-                  {mission.skills.map(skill => (
-                    <Badge key={skill} variant="secondary" className="text-xs">
-                      {skill}
-                    </Badge>
-                  ))}
-                </div>
-              </CardContent>
-              <CardFooter className="border-t pt-3 flex justify-between">
+      <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+        {filteredMissions.map(mission => (
+          <div key={mission.id} className="bg-white rounded-lg overflow-hidden shadow">
+            <div className="p-4">
+              <div className="flex justify-between items-start mb-3">
+                <span className="inline-block px-2 py-1 text-xs rounded bg-gray-200 text-gray-800 font-medium">
+                  {mission.category}
+                </span>
+                <span className="text-sm text-gray-500 border border-gray-200 rounded px-2 py-1">
+                  {mission.duration}
+                </span>
+              </div>
+              
+              <h2 className="text-lg font-semibold mb-2">{mission.title}</h2>
+              <p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
+              
+              <div className="flex flex-wrap gap-1 mb-4">
+                {mission.skills.map(skill => (
+                  <span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">
+                    {skill}
+                  </span>
+                ))}
+              </div>
+              
+              <div className="flex justify-between items-center mt-2">
                 <span className="text-xs text-gray-500">
-                  Créée le {new Date(mission.createdAt).toLocaleDateString('fr-FR')}
+                  Créée le {mission.createdAt}
                 </span>
                 <Link href={`/missions/${mission.id}`}>
-                  <Button variant="outline" size="sm">Voir details</Button>
+                  <span className="px-3 py-1 bg-black text-white text-xs rounded font-medium">
+                    Voir détails
+                  </span>
                 </Link>
-              </CardFooter>
-            </Card>
-          ))}
-        </div>
-      ) : (
-        <div className="text-center py-12">
-          <h3 className="text-lg font-medium text-gray-900">Aucune mission trouvée</h3>
-          <p className="mt-1 text-sm text-gray-500">
-            Utilisez le bouton "Nouvelle Mission" pour créer votre première mission.
-          </p>
-        </div>
-      )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }