From ce23f4758aa941a39b4dfd02e65941dbc99f0d3f Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 4 May 2025 23:20:46 +0200
Subject: [PATCH] livres

---
 app/missions/layout.tsx                      |  15 +
 app/missions/page.tsx                        |  13 +
 components/missions/missions-admin-panel.tsx | 318 +++++++++++++++++++
 3 files changed, 346 insertions(+)
 create mode 100644 app/missions/layout.tsx
 create mode 100644 app/missions/page.tsx
 create mode 100644 components/missions/missions-admin-panel.tsx

diff --git a/app/missions/layout.tsx b/app/missions/layout.tsx
new file mode 100644
index 00000000..4e961d24
--- /dev/null
+++ b/app/missions/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+
+export default function MissionsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <main className="flex-1 p-6">{children}</main>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/missions/page.tsx b/app/missions/page.tsx
new file mode 100644
index 00000000..d5827659
--- /dev/null
+++ b/app/missions/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useState } from "react";
+import { MissionsAdminPanel } from "../../components/missions/missions-admin-panel";
+
+export default function MissionsPage() {
+  return (
+    <div className="container mx-auto py-6">
+      <h1 className="text-3xl font-bold mb-8">Missions Administration</h1>
+      <MissionsAdminPanel />
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/missions/missions-admin-panel.tsx b/components/missions/missions-admin-panel.tsx
new file mode 100644
index 00000000..4e332db9
--- /dev/null
+++ b/components/missions/missions-admin-panel.tsx
@@ -0,0 +1,318 @@
+"use client";
+
+import React, { useState } from "react";
+import { 
+  Tabs, 
+  TabsContent, 
+  TabsList, 
+  TabsTrigger 
+} from "../ui/tabs";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Textarea } from "../ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Checkbox } from "../ui/checkbox";
+import { 
+  Card, 
+  CardContent, 
+  CardHeader, 
+  CardTitle 
+} from "../ui/card";
+
+export function MissionsAdminPanel() {
+  return (
+    <div className="w-full">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold">Post a New Project</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="general" className="w-full">
+            <TabsList className="mb-4">
+              <TabsTrigger value="general">General</TabsTrigger>
+              <TabsTrigger value="details">Details</TabsTrigger>
+              <TabsTrigger value="attachments">Attachments</TabsTrigger>
+              <TabsTrigger value="skills">Skills</TabsTrigger>
+            </TabsList>
+            
+            <TabsContent value="general" className="space-y-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium mb-1">Title</label>
+                  <Input placeholder="Project title" />
+                </div>
+                
+                <div>
+                  <label className="block text-sm font-medium mb-1">Featured Image</label>
+                  <div className="border border-dashed rounded-md p-6 text-center">
+                    <Button variant="outline" className="mb-2">Browse</Button>
+                  </div>
+                </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Categories</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select category" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="education">Education</SelectItem>
+                        <SelectItem value="technology">Technology</SelectItem>
+                        <SelectItem value="environment">Environment</SelectItem>
+                        <SelectItem value="health">Health</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Project Type</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select project type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="individual">Individual</SelectItem>
+                        <SelectItem value="group">Group</SelectItem>
+                        <SelectItem value="organization">Organization</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                
+                <div>
+                  <label className="block text-sm font-medium mb-1">Description</label>
+                  <div className="border rounded-md">
+                    <div className="bg-gray-50 p-2 border-b flex items-center space-x-2">
+                      <span>Paragraphe</span>
+                      <div className="flex items-center space-x-1">
+                        <Button variant="ghost" size="icon" className="h-8 w-8">B</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">I</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">•</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">1.</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">"</Button>
+                      </div>
+                    </div>
+                    <Textarea className="min-h-[200px] border-0" />
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="details" className="space-y-6">
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Project location type</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select location type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="remote">Remote</SelectItem>
+                        <SelectItem value="onsite">On Site</SelectItem>
+                        <SelectItem value="hybrid">Hybrid</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Volunteer Type</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select volunteer type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="individual">Individual</SelectItem>
+                        <SelectItem value="group">Group</SelectItem>
+                        <SelectItem value="organization">Organization</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Duration</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select duration" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="short">Short Term (&lt; 1 month)</SelectItem>
+                        <SelectItem value="medium">Medium Term (1-3 months)</SelectItem>
+                        <SelectItem value="long">Long Term (&gt; 3 months)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Experience</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select required experience" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="beginner">Beginner</SelectItem>
+                        <SelectItem value="intermediate">Intermediate</SelectItem>
+                        <SelectItem value="expert">Expert</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Friendly Address</label>
+                    <Input placeholder="Enter address" />
+                  </div>
+                  
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Location</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select %s" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="paris">Paris</SelectItem>
+                        <SelectItem value="london">London</SelectItem>
+                        <SelectItem value="newyork">New York</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Language</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select language" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="english">English</SelectItem>
+                        <SelectItem value="french">French</SelectItem>
+                        <SelectItem value="spanish">Spanish</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <label className="block text-sm font-medium mb-1">Level</label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select level" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="beginner">Beginner</SelectItem>
+                        <SelectItem value="intermediate">Intermediate</SelectItem>
+                        <SelectItem value="advanced">Advanced</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                
+                <div>
+                  <label className="block text-sm font-medium mb-1">English Level</label>
+                  <Select>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select English level" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="beginner">Beginner</SelectItem>
+                      <SelectItem value="intermediate">Intermediate</SelectItem>
+                      <SelectItem value="advanced">Advanced</SelectItem>
+                      <SelectItem value="fluent">Fluent</SelectItem>
+                      <SelectItem value="native">Native</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="attachments" className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium mb-1">Attachments</label>
+                <div className="border border-dashed rounded-md p-6 text-center">
+                  <Button variant="outline" className="mb-2">Browse</Button>
+                  <p className="text-sm text-gray-500">Upload file .pdf, .doc, .docx</p>
+                </div>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="skills" className="space-y-6">
+              <div>
+                <div className="flex justify-between mb-4">
+                  <h3 className="text-lg font-medium">Skills</h3>
+                  <Button variant="outline" size="sm">Select / Deselect All</Button>
+                </div>
+                
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="photoshop" />
+                    <label htmlFor="photoshop" className="text-sm">Adobe Photoshop</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="xd" />
+                    <label htmlFor="xd" className="text-sm">Adobe XD</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="android" />
+                    <label htmlFor="android" className="text-sm">Android Developer</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="artist" />
+                    <label htmlFor="artist" className="text-sm">Artist</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="computer" />
+                    <label htmlFor="computer" className="text-sm">Computer</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="developer" />
+                    <label htmlFor="developer" className="text-sm">Developer</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="frontend" />
+                    <label htmlFor="frontend" className="text-sm">Front end Developer</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="ios" />
+                    <label htmlFor="ios" className="text-sm">iOS Developer</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="support" />
+                    <label htmlFor="support" className="text-sm">Support Agent</label>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="writer" />
+                    <label htmlFor="writer" className="text-sm">Writer</label>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+          
+          <div className="mt-8 flex justify-end">
+            <Button className="bg-green-500 hover:bg-green-600 text-white">
+              Save & Preview
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+              </svg>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 
\ No newline at end of file