missions
This commit is contained in:
parent
3570e87aaf
commit
a8c08310ec
@ -1,15 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Kanban, Plus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export default function MissionsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<main className="flex-1 p-6">{children}</main>
|
||||
<div className="flex h-[calc(100vh-4rem)] overflow-hidden">
|
||||
{/* 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">
|
||||
<Link href="/missions" passHref>
|
||||
<Button
|
||||
variant={pathname === "/missions" ? "secondary" : "ghost"}
|
||||
className="w-full justify-start text-left"
|
||||
>
|
||||
Mes Missions
|
||||
</Button>
|
||||
</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>
|
||||
</Link>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
app/missions/new/page.tsx
Normal file
42
app/missions/new/page.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { MissionsAdminPanel } from "@/components/missions/missions-admin-panel";
|
||||
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
|
||||
|
||||
export default function NewMissionPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink asChild>
|
||||
<Link href="/missions">Missions</Link>
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink>Poster une Mission</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
|
||||
<div className="flex items-center mt-4">
|
||||
<Link href="/missions">
|
||||
<Button variant="ghost" size="sm" className="mr-4">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold">Poster une Nouvelle Mission</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MissionsAdminPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,13 +1,122 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { MissionsAdminPanel } from "../../components/missions/missions-admin-panel";
|
||||
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 = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Développement d'une application web",
|
||||
category: "Technology",
|
||||
location: "Remote",
|
||||
skills: ["React", "Node.js", "MongoDB"],
|
||||
duration: "1-3 months",
|
||||
createdAt: "2023-05-15"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Conception d'identité visuelle",
|
||||
category: "Design",
|
||||
location: "Paris",
|
||||
skills: ["Adobe Photoshop", "Illustrator", "UI/UX"],
|
||||
duration: "< 1 month",
|
||||
createdAt: "2023-06-02"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Traduction de documentation technique",
|
||||
category: "Writing",
|
||||
location: "Hybrid",
|
||||
skills: ["Translation", "Technical Writing", "English"],
|
||||
duration: "> 3 months",
|
||||
createdAt: "2023-06-10"
|
||||
}
|
||||
];
|
||||
|
||||
export default function MissionsPage() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const filteredMissions = mockMissions.filter(mission =>
|
||||
mission.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
mission.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
mission.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-6">
|
||||
<h1 className="text-3xl font-bold mb-8">Missions Administration</h1>
|
||||
<MissionsAdminPanel />
|
||||
<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" />
|
||||
<Input
|
||||
placeholder="Rechercher une mission..."
|
||||
className="pl-9 w-full"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Link href="/missions/new">
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
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">
|
||||
<span className="text-xs text-gray-500">
|
||||
Créée le {new Date(mission.createdAt).toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
<Link href={`/missions/${mission.id}`}>
|
||||
<Button variant="outline" size="sm">Voir details</Button>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user