From cb242e59ba4a5072b892f1a1e207865884f4f86b Mon Sep 17 00:00:00 2001
From: Matthias Guillitte <matthias@guillitte.com>
Date: Tue, 16 Sep 2025 16:30:37 +0200
Subject: [PATCH] Minimal Viable Product + Refactor to pinia store + Fix PDF
 export

---
 .../Controllers/ResumeComponentController.php |  50 +++
 .../ResumeComponentPlacementController.php    |  48 ++-
 app/Http/Controllers/ResumeController.php     |  29 +-
 .../StoreResumeComponentPlacementRequest.php  |   7 +-
 app/Models/ResumeComponent.php                |   5 +
 app/Models/ResumeComponentData.php            |  48 ++-
 app/Models/ResumeComponentInput.php           |   5 -
 app/Models/ResumeComponentInputData.php       |   6 +
 app/Models/ResumeComponentPlacement.php       |   9 +-
 .../ResumeComponentPlacementPolicy.php        |   5 +
 config/app.php                                |   3 +
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  46 +++
 resources/css/app.css                         |   7 +
 resources/js/app.ts                           |   2 +
 .../js/components/SidebarListResumeItem.vue   |  48 +++
 .../SidebarListResumeItemToolButton.vue       |  14 +
 resources/js/components/SidebarResumeList.vue |  61 ++-
 .../resume/ComponentsSelectionList.vue        |  85 +++++
 .../resume/ComponentsSelectionListItem.vue    |  19 +
 .../components/resume/PrintResumeButton.vue   |   8 +-
 .../components/resume/ResumeComponentEdit.vue |  31 +-
 .../resume/ResumeComponentsList.vue           |  65 +++-
 .../resume/ResumeComponentsListItem.vue       |  33 ++
 .../ResumeComponentsListItemToolButton.vue    |  14 +
 .../js/components/resume/ResumeEditPanel.vue  |  19 +-
 .../js/components/resume/ResumeNameInput.vue  |  30 +-
 .../components/resume/ResumePreviewPanel.vue  |  30 +-
 resources/js/components/ui/sidebar/utils.ts   |   2 +-
 resources/js/layouts/app/AppSidebarLayout.vue |   2 +-
 resources/js/lib/pdfExport.ts                 |  24 +-
 resources/js/lib/pinia.ts                     |   5 +
 resources/js/lib/utils.ts                     |   8 +-
 resources/js/pages/resumes/Edit.vue           |  34 +-
 resources/js/ssr.ts                           |   2 +
 resources/js/stores/resume.ts                 | 360 ++++++++++++++++++
 resources/js/stores/ui.ts                     |  14 +
 routes/api.php                                |  10 +-
 routes/web.php                                |   3 +
 39 files changed, 1055 insertions(+), 137 deletions(-)
 create mode 100644 app/Http/Controllers/ResumeComponentController.php
 create mode 100644 resources/js/components/SidebarListResumeItem.vue
 create mode 100644 resources/js/components/SidebarListResumeItemToolButton.vue
 create mode 100644 resources/js/components/resume/ComponentsSelectionList.vue
 create mode 100644 resources/js/components/resume/ComponentsSelectionListItem.vue
 create mode 100644 resources/js/components/resume/ResumeComponentsListItem.vue
 create mode 100644 resources/js/components/resume/ResumeComponentsListItemToolButton.vue
 create mode 100644 resources/js/lib/pinia.ts
 create mode 100644 resources/js/stores/resume.ts
 create mode 100644 resources/js/stores/ui.ts

diff --git a/app/Http/Controllers/ResumeComponentController.php b/app/Http/Controllers/ResumeComponentController.php
new file mode 100644
index 0000000..7516f46
--- /dev/null
+++ b/app/Http/Controllers/ResumeComponentController.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\StoreResumeComponentRequest;
+use App\Http\Requests\UpdateResumeComponentRequest;
+use App\Models\ResumeComponent;
+
+class ResumeComponentController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        return ResumeComponent::all();
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreResumeComponentRequest $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(ResumeComponent $resumeComponent)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateResumeComponentRequest $request, ResumeComponent $resumeComponent)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(ResumeComponent $resumeComponent)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/ResumeComponentPlacementController.php b/app/Http/Controllers/ResumeComponentPlacementController.php
index 241cc03..830ff94 100644
--- a/app/Http/Controllers/ResumeComponentPlacementController.php
+++ b/app/Http/Controllers/ResumeComponentPlacementController.php
@@ -4,6 +4,9 @@ namespace App\Http\Controllers;
 
 use App\Http\Requests\StoreResumeComponentPlacementRequest;
 use App\Http\Requests\UpdateResumeComponentPlacementRequest;
+use App\Models\Resume;
+use App\Models\ResumeComponent;
+use App\Models\ResumeComponentData;
 use App\Models\ResumeComponentPlacement;
 use Log;
 
@@ -24,9 +27,29 @@ class ResumeComponentPlacementController extends Controller
      */
     public function store(StoreResumeComponentPlacementRequest $request)
     {
-        dd('hello');
+        // === VERIFICATIONS ===
+        $user = $request->user();
+        $validated = $request->validated();
+        // 1) User owns the linked resume
+        $resume = Resume::find($validated['resume_id']);
+        if (!$resume || !$user->can('update', $resume)) {
+            return response()->json(['error' => 'You do not own that resume'], 403);
+        }
+        // 2) the resume does not already have a component placement with that order
+        $existingPlacement = ResumeComponentPlacement::where('resume_id', $resume->id)
+            ->where('order', $validated['order'])
+            ->first();
+        if ($existingPlacement) {
+            return response()->json(['error' => 'Component placement with that order already exists'], 422);
+        }
 
-        //
+        // === CREATION ===
+        $newResumeComponentData = ResumeComponentData::createWithInputs(ResumeComponent::find($validated['component_id']));
+        $componentPlacement = $resume->componentsPlacements()->create([
+            'resume_component_data_id' => $newResumeComponentData->id,
+            'order' => $validated['order'],
+        ]);
+        return response()->json($componentPlacement->load('componentData.component', 'componentData.inputData.componentInput.dataType'), 201);
     }
 
     /**
@@ -56,7 +79,6 @@ class ResumeComponentPlacementController extends Controller
         // Update component data
         $componentData = collect($data['component_data'])->except(['input_data', 'component'])->toArray();
         $componentData['resume_component_id'] = $data['component_data']['component']['id'] ?? null;
-        $componentData['resume_component_placement_id'] = $resumeComponentPlacement->id;
         $resumeComponentPlacement->componentData()->update($componentData);
 
         // Update input data
@@ -79,13 +101,27 @@ class ResumeComponentPlacementController extends Controller
         return response()->json($resumeComponentPlacement);
     }
 
+    public function unlink(ResumeComponentPlacement $placement)
+    {
+        // Load relations
+        $placement->load('componentData.component', 'componentData.inputData');
+
+        // Create a new ResumeComponentData without inputs
+        $newComponentData = ResumeComponentData::copyFrom($placement->componentData()->first());
+
+        // Update the placement to link to the new component data
+        $placement->resume_component_data_id = $newComponentData->id;
+        $placement->save();
+
+        return response()->json($newComponentData->load('component', 'inputData.componentInput.dataType'));
+    }
+
     /**
      * Remove the specified resource from storage.
      */
     public function destroy(ResumeComponentPlacement $resumeComponentPlacement)
     {
-        dd('hello');
-
-        //
+        $resumeComponentPlacement->delete();
+        return response()->json(null, 204);
     }
 }
diff --git a/app/Http/Controllers/ResumeController.php b/app/Http/Controllers/ResumeController.php
index d78247f..6106bff 100644
--- a/app/Http/Controllers/ResumeController.php
+++ b/app/Http/Controllers/ResumeController.php
@@ -8,6 +8,7 @@ use App\Models\Resume;
 use Illuminate\Http\JsonResponse;
 use Inertia\Inertia;
 use Illuminate\Http\Request;
+use \Illuminate\Database\Eloquent\ModelNotFoundException;
 
 class ResumeController extends Controller
 {
@@ -31,11 +32,27 @@ class ResumeController extends Controller
         }
 
         $newResume = new Resume();
+        $newResume->creator()->associate($request->user());
         $newResume->save();
         // Redirect to the edit page for the new resume
         return redirect()->route('resumes.edit', $newResume);
     }
 
+    public function duplicate(Resume $resume)
+    {
+        $newResume = $resume->replicate();
+        $newResume->name = $resume->name . ' (Copy)';
+        $newResume->save();
+
+        foreach ($resume->componentsPlacements as $placement) {
+            $newPlacement = $placement->replicate();
+            $newPlacement->resume_id = $newResume->id;
+            $newPlacement->save();
+        }
+
+        return redirect()->route('resumes.edit', $newResume);
+    }
+
     /**
      * Store a newly created resource in storage.
      */
@@ -55,8 +72,15 @@ class ResumeController extends Controller
     /**
      * Show the form for editing the specified resource.
      */
-    public function edit(Request $request, Resume $resume)
+    public function edit(Request $request, int $resumeId)
     {
+        $resume = null;
+        try {
+            $resume = Resume::findOrFail($resumeId);
+        } catch (ModelNotFoundException $e) {
+            return redirect()->route(config('app.redirect_route'));
+        }
+
         // Check if the user can edit the resume
         if ($request->user()->cannot('update', $resume)) {
             abort(403);
@@ -80,6 +104,7 @@ class ResumeController extends Controller
      */
     public function destroy(Resume $resume)
     {
-        //
+        $resume->delete();
+        return response()->json(null, 204);
     }
 }
diff --git a/app/Http/Requests/StoreResumeComponentPlacementRequest.php b/app/Http/Requests/StoreResumeComponentPlacementRequest.php
index 21cde9a..d0965b9 100644
--- a/app/Http/Requests/StoreResumeComponentPlacementRequest.php
+++ b/app/Http/Requests/StoreResumeComponentPlacementRequest.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Requests;
 
+use App\Models\ResumeComponentPlacement;
 use Illuminate\Foundation\Http\FormRequest;
 
 class StoreResumeComponentPlacementRequest extends FormRequest
@@ -11,7 +12,7 @@ class StoreResumeComponentPlacementRequest extends FormRequest
      */
     public function authorize(): bool
     {
-        return false;
+        return $this->user()->can('create', ResumeComponentPlacement::class);
     }
 
     /**
@@ -22,7 +23,9 @@ class StoreResumeComponentPlacementRequest extends FormRequest
     public function rules(): array
     {
         return [
-            //
+            'component_id' => ['required', 'exists:resume_components,id'],
+            'resume_id' => ['required', 'exists:resumes,id'],
+            'order' => ['required', 'integer'],
         ];
     }
 }
diff --git a/app/Models/ResumeComponent.php b/app/Models/ResumeComponent.php
index d82e777..d6da341 100644
--- a/app/Models/ResumeComponent.php
+++ b/app/Models/ResumeComponent.php
@@ -36,4 +36,9 @@ class ResumeComponent extends Model
         return $this->belongsToMany(ResumeComponentPlacement::class)
             ->using(ResumeComponentData::class);
     }
+
+    public function inputs(): HasMany
+    {
+        return $this->hasMany(ResumeComponentInput::class, 'resume_component_id');
+    }
 }
diff --git a/app/Models/ResumeComponentData.php b/app/Models/ResumeComponentData.php
index 06c86c8..fafac2f 100644
--- a/app/Models/ResumeComponentData.php
+++ b/app/Models/ResumeComponentData.php
@@ -2,24 +2,64 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\Pivot;
 
-class ResumeComponentData extends Pivot
+class ResumeComponentData extends Model
 {
     protected $table = 'resume_component_data';
 
-    public function component()
+    protected $fillable = [
+        'resume_component_id',
+    ];
+
+    public function component(): BelongsTo
     {
         return $this->belongsTo(ResumeComponent::class, 'resume_component_id');
     }
 
-    public function componentPlacements()
+    public function componentPlacements(): HasMany
     {
         return $this->hasMany(ResumeComponentPlacement::class);
     }
 
-    public function inputData()
+    public function inputData(): HasMany
     {
         return $this->hasMany(ResumeComponentInputData::class, 'resume_component_data_id');
     }
+
+    public static function createWithInputs(ResumeComponent $component): ResumeComponentData
+    {
+        $componentData = ResumeComponentData::create([
+            'resume_component_id' => $component->id,
+        ]);
+
+        foreach ($component->inputs()->get() as $input) {
+            $componentData->inputData()->create([
+                'resume_component_data_id' => $componentData->id,
+                'resume_component_input_id' => $input->id,
+            ]);
+        }
+
+        return $componentData->refresh();
+    }
+
+    public static function copyFrom(ResumeComponentData $existingData): ResumeComponentData
+    {
+        $componentData = ResumeComponentData::create([
+            'resume_component_id' => $existingData->resume_component_id,
+        ]);
+
+        foreach ($existingData->inputData()->get() as $inputDatum) {
+            $componentData->inputData()->create([
+                'resume_component_data_id' => $componentData->id,
+                'resume_component_input_id' => $inputDatum->resume_component_input_id,
+                'value' => $inputDatum->value,
+            ]);
+        }
+
+        return $componentData->refresh();
+    }
 }
diff --git a/app/Models/ResumeComponentInput.php b/app/Models/ResumeComponentInput.php
index be69a66..6f38a38 100644
--- a/app/Models/ResumeComponentInput.php
+++ b/app/Models/ResumeComponentInput.php
@@ -24,11 +24,6 @@ class ResumeComponentInput extends Pivot
         'placeholder'
     ];
 
-    public function resumes()
-    {
-        return ;
-    }
-
     public function component(): BelongsTo
     {
         return $this->belongsTo(ResumeComponent::class);
diff --git a/app/Models/ResumeComponentInputData.php b/app/Models/ResumeComponentInputData.php
index 52fb330..d0bb2a5 100644
--- a/app/Models/ResumeComponentInputData.php
+++ b/app/Models/ResumeComponentInputData.php
@@ -8,6 +8,12 @@ class ResumeComponentInputData extends Pivot
 {
     protected $table = 'resume_component_input_data';
 
+    protected $fillable = [
+        'resume_component_data_id',
+        'resume_component_input_id',
+        'value',
+    ];
+
 
     public function componentData()
     {
diff --git a/app/Models/ResumeComponentPlacement.php b/app/Models/ResumeComponentPlacement.php
index cb23422..a59521c 100644
--- a/app/Models/ResumeComponentPlacement.php
+++ b/app/Models/ResumeComponentPlacement.php
@@ -4,14 +4,21 @@ namespace App\Models;
 
 use App\Policies\ResumeComponentPlacementPolicy;
 use Illuminate\Database\Eloquent\Attributes\UsePolicy;
+use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\Pivot;
 
 #[UsePolicy(ResumeComponentPlacementPolicy::class)]
-class ResumeComponentPlacement extends Pivot
+class ResumeComponentPlacement extends Model
 {
     protected $table = 'resume_component_placements';
 
+    protected $fillable = [
+        'resume_component_data_id',
+        'resume_id',
+        'order',
+    ];
+
     public function componentData(): BelongsTo
     {
         return $this->belongsTo(ResumeComponentData::class, 'resume_component_data_id');
diff --git a/app/Policies/ResumeComponentPlacementPolicy.php b/app/Policies/ResumeComponentPlacementPolicy.php
index 7016feb..3d6fb1b 100644
--- a/app/Policies/ResumeComponentPlacementPolicy.php
+++ b/app/Policies/ResumeComponentPlacementPolicy.php
@@ -32,6 +32,11 @@ class ResumeComponentPlacementPolicy
         return true;
     }
 
+    public function createForResume(User $user, ResumeComponentPlacement $componentPlacement): bool
+    {
+        return $user->can('update', $componentPlacement->load('resume')->resume);
+    }
+
     /**
      * Determine whether the user can update the model.
      */
diff --git a/config/app.php b/config/app.php
index 324b513..8a935c0 100644
--- a/config/app.php
+++ b/config/app.php
@@ -123,4 +123,7 @@ return [
         'store' => env('APP_MAINTENANCE_STORE', 'database'),
     ],
 
+
+    'redirect_route' => 'dashboard',
+
 ];
diff --git a/package.json b/package.json
index f710bc5..cb75a85 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
         "jspdf": "^3.0.1",
         "laravel-vite-plugin": "^2.0.0",
         "lucide-vue-next": "^0.468.0",
+        "pinia": "^3.0.3",
         "reka-ui": "^2.2.0",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01f5f7e..e65faad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       lucide-vue-next:
         specifier: ^0.468.0
         version: 0.468.0(vue@3.5.18(typescript@5.9.2))
+      pinia:
+        specifier: ^3.0.3
+        version: 3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
       reka-ui:
         specifier: ^2.2.0
         version: 2.4.1(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
@@ -881,14 +884,23 @@ packages:
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
+  '@vue/devtools-api@7.7.7':
+    resolution: {integrity: sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==}
+
   '@vue/devtools-core@8.0.0':
     resolution: {integrity: sha512-5bPtF0jAFnaGs4C/4+3vGRR5U+cf6Y8UWK0nJflutEDGepHxl5L9JRaPdHQYCUgrzUaf4cY4waNBEEGXrfcs3A==}
     peerDependencies:
       vue: ^3.0.0
 
+  '@vue/devtools-kit@7.7.7':
+    resolution: {integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==}
+
   '@vue/devtools-kit@8.0.0':
     resolution: {integrity: sha512-b11OeQODkE0bctdT0RhL684pEV2DPXJ80bjpywVCbFn1PxuL3bmMPDoJKjbMnnoWbrnUYXYzFfmMWBZAMhORkQ==}
 
+  '@vue/devtools-shared@7.7.7':
+    resolution: {integrity: sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==}
+
   '@vue/devtools-shared@8.0.0':
     resolution: {integrity: sha512-jrKnbjshQCiOAJanoeJjTU7WaCg0Dz2BUal6SaR6VM/P3hiFdX5Q6Pxl73ZMnrhCxNK9nAg5hvvRGqs+6dtU1g==}
 
@@ -1762,6 +1774,15 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  pinia@3.0.3:
+    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -3040,6 +3061,10 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
+  '@vue/devtools-api@7.7.7':
+    dependencies:
+      '@vue/devtools-kit': 7.7.7
+
   '@vue/devtools-core@8.0.0(vite@7.1.2(@types/node@22.17.2)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1))(vue@3.5.18(typescript@5.9.2))':
     dependencies:
       '@vue/devtools-kit': 8.0.0
@@ -3052,6 +3077,16 @@ snapshots:
     transitivePeerDependencies:
       - vite
 
+  '@vue/devtools-kit@7.7.7':
+    dependencies:
+      '@vue/devtools-shared': 7.7.7
+      birpc: 2.5.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.2
+
   '@vue/devtools-kit@8.0.0':
     dependencies:
       '@vue/devtools-shared': 8.0.0
@@ -3062,6 +3097,10 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.2
 
+  '@vue/devtools-shared@7.7.7':
+    dependencies:
+      rfdc: 1.4.1
+
   '@vue/devtools-shared@8.0.0':
     dependencies:
       rfdc: 1.4.1
@@ -3916,6 +3955,13 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  pinia@3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2)):
+    dependencies:
+      '@vue/devtools-api': 7.7.7
+      vue: 3.5.18(typescript@5.9.2)
+    optionalDependencies:
+      typescript: 5.9.2
+
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
diff --git a/resources/css/app.css b/resources/css/app.css
index 1a7ee31..45cab6b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,6 +7,13 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* FIX jspdf export (https://github.com/parallax/jsPDF/issues/3532#issuecomment-1492983053) */
+@layer base {
+  img {
+    @apply inline-block;
+  }
+}
+
 @theme inline {
     --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 792a46c..0cd1a4f 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -6,6 +6,7 @@ import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
 import { initializeTheme } from './composables/useAppearance';
+import pinia from './lib/pinia';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -15,6 +16,7 @@ createInertiaApp({
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)
+            .use(pinia)
             .use(ZiggyVue)
             .mount(el);
     },
diff --git a/resources/js/components/SidebarListResumeItem.vue b/resources/js/components/SidebarListResumeItem.vue
new file mode 100644
index 0000000..1d2e190
--- /dev/null
+++ b/resources/js/components/SidebarListResumeItem.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Resume } from '@/types/resume';
+import SidebarListResumeItemToolButton from './SidebarListResumeItemToolButton.vue';
+import { httpApi } from '@/lib/utils';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps<{
+    resume: Resume;
+}>();
+
+const emit = defineEmits<{
+    (e: 'deleted', resume: Resume): void;
+    (e: 'duplicated'): void;
+}>();
+
+function duplicateResume() {
+    router.post(route('resumes.duplicate', props.resume));
+    emit('duplicated', props.resume);
+}
+
+async function deleteResume() {
+    const { error } = await httpApi(route('resumes.destroy', props.resume), {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+            'Accept': 'application/json'
+        },
+    });
+
+    if (error) {
+        console.error('Failed to delete resume:', error);
+        return;
+    }
+
+    emit('deleted', props.resume);
+}
+</script>
+
+<template>
+    <div class="flex w-full flex-nowrap justify-between items-center">
+        <span class="font-medium h-min">{{ props.resume.name ?? 'Sans titre' }}</span>
+        <div class="sidebar-list-resume-item-tools flex gap-2">
+            <SidebarListResumeItemToolButton @click.prevent="duplicateResume" logoName="BookCopy" />
+            <SidebarListResumeItemToolButton @click.prevent="deleteResume" logoName="Trash2" class="text-red-500" />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/SidebarListResumeItemToolButton.vue b/resources/js/components/SidebarListResumeItemToolButton.vue
new file mode 100644
index 0000000..e9878ac
--- /dev/null
+++ b/resources/js/components/SidebarListResumeItemToolButton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Icon from './Icon.vue';
+import Button from './ui/button/Button.vue';
+
+const props = defineProps<{
+    logoName: string
+}>();
+</script>
+
+<template>
+    <Button variant="outline" size="sm" class="px-1 gap-0 cursor-pointer">
+        <Icon :name="props.logoName" v-bind="$attrs" :size="20" />
+    </Button>
+</template>
diff --git a/resources/js/components/SidebarResumeList.vue b/resources/js/components/SidebarResumeList.vue
index f48f88d..d07a4a5 100644
--- a/resources/js/components/SidebarResumeList.vue
+++ b/resources/js/components/SidebarResumeList.vue
@@ -1,29 +1,49 @@
 <script setup lang="ts">
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { httpApi } from '@/lib/utils';
 import { type NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { ref, onMounted } from 'vue';
+import { onMounted, computed } from 'vue';
 import { Resume } from '@/types/resume';
+import Button from './ui/button/Button.vue';
+import { Plus } from 'lucide-vue-next';
+import SidebarListResumeItem from './SidebarListResumeItem.vue';
+import { useResumesStore } from '@/stores/resume';
 
-const items = ref<NavItem[]>([]);
+const items = computed<(NavItem & { resume: Resume })[]>(() => {
+    return resumeStore.resumes.map((resume: Resume) => ({
+        title: resume.name,
+        href: route("resumes.edit", resume, false), // false returns only the path
+        resume: resume,
+    }));
+});
 const page = usePage();
 
+const resumeStore = useResumesStore();
+
 onMounted(async () => {
-  try {
-    const { data: resumes, error } = await httpApi<Resume[]>(route("resumes.index"));
-    if (error || !resumes) {
-      console.error('Failed to fetch resumes:', error);
-      return;
-    }
-    items.value = resumes.map((resume: Resume) => ({
-      title: resume.name,
-      href: route("resumes.edit", resume),
-    }));
-  } catch (error) {
-    console.error('Failed to fetch resumes:', error);
-  }
+    await loadResumes();
 });
+
+
+async function loadResumes() {
+    await resumeStore.fetchResumes();
+}
+
+function createNewResume() {
+    window.location.href = route("resumes.create");
+}
+
+function removeResume(deletedResume: Resume) {
+    resumeStore.removeResumeById(deletedResume.id);
+    if (page.url === route("resumes.edit", deletedResume, false)) {
+        // If we are on the deleted resume, redirect to the first resume or to the create page if no resumes left
+        if (resumeStore.resumes.length > 0) {
+            window.location.href = route("resumes.edit", resumeStore.resumes[0], false);
+        } else {
+            window.location.href = route("resumes.create");
+        }
+    }
+}
 </script>
 
 <template>
@@ -33,10 +53,17 @@ onMounted(async () => {
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton as-child :is-active="item.href === page.url" :tooltip="item.title">
                     <Link :href="item.href">
-                        <span>{{ item.title }}</span>
+                        <SidebarListResumeItem :resume="item.resume" @deleted="removeResume" @duplicated="loadResumes" />
                     </Link>
                 </SidebarMenuButton>
             </SidebarMenuItem>
+            <SidebarMenuItem>
+                <SidebarMenuButton as-child class="cursor-pointer text-center" tooltip="Ajouter un composant">
+                    <Button variant="outline" size="sm" class="w-full" @click="createNewResume">
+                        <Plus />Nouveau CV
+                    </Button>
+                </SidebarMenuButton>
+            </SidebarMenuItem>
         </SidebarMenu>
     </SidebarGroup>
 </template>
diff --git a/resources/js/components/resume/ComponentsSelectionList.vue b/resources/js/components/resume/ComponentsSelectionList.vue
new file mode 100644
index 0000000..c83af93
--- /dev/null
+++ b/resources/js/components/resume/ComponentsSelectionList.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { Resume, ResumeComponent, ResumeComponentPlacement } from '@/types/resume';
+import { ChevronLeft } from 'lucide-vue-next';
+import { onMounted, ref } from 'vue';
+import Button from '../ui/button/Button.vue';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu } from '@/components/ui/sidebar';
+import { httpApi } from '@/lib/utils';
+import ComponentsSelectionListItem from './ComponentsSelectionListItem.vue';
+import { useShowComponentSelectionStore } from '@/stores/ui';
+import { useResumesStore } from '@/stores/resume';
+
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+
+const showComponentSelectionStore = useShowComponentSelectionStore();
+
+const components = ref<ResumeComponent[]>([]);
+
+// Fetch the available components from the API or store
+function fetchAvailableComponents() {
+    httpApi<ResumeComponent[]>(route('resume-components.index'), {
+        method: 'GET',
+    }).then(response => {
+        if (!response) {
+            console.error('Failed to fetch components.');
+            return;
+        }
+        components.value = response.data;
+    });
+}
+
+onMounted(() => {
+    fetchAvailableComponents();
+});
+
+async function addNewComponentToResume(component: ResumeComponent) {
+    const newResume: Resume = { ...resume.value }; // Create a shallow copy of the current resume
+    let newComponentPlacement: ResumeComponentPlacement | null = null;
+
+    const { data, error } = await httpApi<ResumeComponentPlacement>(route('resume-component-placements.store'), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify({
+            component_id: component.id,
+            resume_id: resume.value.id,
+            order: (resume.value.components_placements?.length ?? 0) + 1,
+        }),
+    });
+    if (error) {
+        console.error('Error creating component placement: ', error);
+        return;
+    }
+    newComponentPlacement = data!;
+
+    console.debug("New component placement created: ", newComponentPlacement);
+
+    newResume.components_placements!.push(newComponentPlacement!);
+
+    resumeStore.setAndUpdateCurrentResume(newResume);
+    resumeStore.setSelectedResumePlacementById(newComponentPlacement.id);
+    showComponentSelectionStore.setShowComponentSelection(false);
+}
+
+</script>
+
+<template>
+    <div class="h-full w-full">
+        <Button @click="showComponentSelectionStore.setShowComponentSelection(false);" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
+        <SidebarGroup class="w-full p-0">
+            <SidebarGroupLabel>Composants disponibles</SidebarGroupLabel>
+            <SidebarMenu>
+                <ComponentsSelectionListItem
+                    v-for="component in components"
+                    :key="component.id"
+                    :component="component"
+                    @click="addNewComponentToResume(component)"
+                />
+            </SidebarMenu>
+        </SidebarGroup>
+    </div>
+</template>
diff --git a/resources/js/components/resume/ComponentsSelectionListItem.vue b/resources/js/components/resume/ComponentsSelectionListItem.vue
new file mode 100644
index 0000000..bf8a8a3
--- /dev/null
+++ b/resources/js/components/resume/ComponentsSelectionListItem.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ResumeComponent } from '@/types/resume';
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+
+
+const props = defineProps<{
+    component: ResumeComponent;
+}>();
+</script>
+
+<template>
+    <SidebarMenuItem>
+        <SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.component.name">
+            <div class="flex w-full flex-nowrap justify-between items-center">
+                <span>{{ props.component.name }}</span>
+            </div>
+        </SidebarMenuButton>
+    </SidebarMenuItem>
+</template>
diff --git a/resources/js/components/resume/PrintResumeButton.vue b/resources/js/components/resume/PrintResumeButton.vue
index cdec876..e84d5b6 100644
--- a/resources/js/components/resume/PrintResumeButton.vue
+++ b/resources/js/components/resume/PrintResumeButton.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { Resume } from '@/types/resume';
 import Button from '../ui/button/Button.vue';
 import { exportToPdf } from '@/lib/pdfExport';
 import { FileText } from 'lucide-vue-next';
+import { useResumesStore } from '@/stores/resume';
 
-const props = defineProps<{
-    resume: Resume,
-}>();
+const resumeStore = useResumesStore();
 
 function printResume() {
-    exportToPdf(document.getElementById('resume')!, (props.resume.name || 'Sans titre') + '.pdf');
+    exportToPdf(document.getElementById('resume')!, resumeStore.currentResumeName.value + '.pdf');
 }
 </script>
 
diff --git a/resources/js/components/resume/ResumeComponentEdit.vue b/resources/js/components/resume/ResumeComponentEdit.vue
index e77041b..d8d961a 100644
--- a/resources/js/components/resume/ResumeComponentEdit.vue
+++ b/resources/js/components/resume/ResumeComponentEdit.vue
@@ -1,26 +1,23 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement, ResumeInputData } from '@/types/resume';
+import { ResumeComponentPlacement, ResumeInputData } from '@/types/resume';
 import Button from '../ui/button/Button.vue';
 import { ChevronLeft } from 'lucide-vue-next';
 import { SidebarGroup, SidebarGroupLabel } from '@/components/ui/sidebar';
 import ResumeComponentEditForm from './ResumeComponentEditForm.vue';
 import { httpApi } from '@/lib/utils';
+import { useResumesStore } from '@/stores/resume';
 
 const SEND_CHANGED_DATA_DELAY = 500;
 
-const props = defineProps<{
-    resume: Resume
-    selectedComponent: ResumeComponentPlacement | null
-}>();
-
-const emit = defineEmits(['selected-component-change']);
+const resumeStore = useResumesStore();
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
 let delayedSendTimeout: ReturnType<typeof setTimeout> | null = null
 async function sendChangedData(newData: ResumeInputData[]) {
-    const newSelectedComponent = {
-        ...props.selectedComponent,
+    const newSelectedComponent: ResumeComponentPlacement = {
+        ...selectedComponent.value,
         component_data: {
-            ...props.selectedComponent?.component_data,
+            ...selectedComponent.value?.component_data,
             input_data: newData
         }
     };
@@ -31,7 +28,7 @@ async function sendChangedData(newData: ResumeInputData[]) {
         clearTimeout(delayedSendTimeout);
     }
     delayedSendTimeout = setTimeout(async () => {
-        const { data, error } = await httpApi(route('resume-component-placements.update', newSelectedComponent.id), {
+        const { data, error } = await httpApi(route('resume-component-placements.update', newSelectedComponent), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -54,21 +51,21 @@ async function sendChangedData(newData: ResumeInputData[]) {
         return;
     }
 
-    emit('selected-component-change', newSelectedComponent);
+    resumeStore.modifyCurrentSelectedResumePlacement(newSelectedComponent!);
 }
 </script>
 
 <template>
     <div class="h-full w-full">
-        <Button @click="emit('selected-component-change', null)" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
+        <Button @click="resumeStore.clearSelectedResumePlacement();" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
         <SidebarGroup class="w-full p-0">
-            <SidebarGroupLabel>{{ props.selectedComponent?.component_data?.component?.name }}</SidebarGroupLabel>
+            <SidebarGroupLabel>{{ selectedComponent?.component_data?.component?.name }}</SidebarGroupLabel>
             <ResumeComponentEditForm
-                v-if="props.selectedComponent?.component_data?.input_data"
-                :data="props.selectedComponent?.component_data?.input_data!"
+                v-if="selectedComponent?.component_data?.input_data"
+                :data="selectedComponent?.component_data?.input_data!"
                 @data-changed="sendChangedData($event)"
             />
-            <p v-else class="text-destructive">No component input data : {{ props.selectedComponent?.component_data }}</p>
+            <p v-else class="text-destructive">No component input data : {{ selectedComponent?.component_data }}</p>
         </SidebarGroup>
     </div>
 </template>
diff --git a/resources/js/components/resume/ResumeComponentsList.vue b/resources/js/components/resume/ResumeComponentsList.vue
index bcc34aa..e95b74f 100644
--- a/resources/js/components/resume/ResumeComponentsList.vue
+++ b/resources/js/components/resume/ResumeComponentsList.vue
@@ -1,31 +1,68 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import { ResumeComponentPlacement } from '@/types/resume';
 import { computed } from 'vue';
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { Link } from '@inertiajs/vue3';
+import ResumeComponentsListItem from './ResumeComponentsListItem.vue';
+import Button from '@/components/ui/button/Button.vue';
+import { Plus } from 'lucide-vue-next';
+import { useResumesStore } from '@/stores/resume';
+import { useShowComponentSelectionStore } from '@/stores/ui';
 
-const props = defineProps<{
-    resume: Resume;
-    selectedComponent: ResumeComponentPlacement | null;
-}>();
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+
+const showComponentSelectionStore = useShowComponentSelectionStore();
 
 const orderedComponentsPlacements = computed(() => {
-    console.log('Ordered Components Placements:', props.resume.components_placements);
-    return props.resume.components_placements ? [...props.resume.components_placements].sort((a, b) => a.order - b.order) : [];
+    if (!resume.value) return [];
+    return resume.value.components_placements ? [...resume.value.components_placements].sort((a, b) => a.order - b.order) : [];
 });
 
-const emit = defineEmits(['selected-component-change']);
+function findComponentPlacementIndexById(id: number) {
+    return resumeStore.currentResume?.value!.components_placements!.findIndex(cp => cp.id === id) ?? -1;
+}
+
+
+function moveComponent(componentPlacement: ResumeComponentPlacement, direction: 1 | -1) {
+    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
+    if (placementIndex === -1) return;
+    const newIndex = placementIndex + direction;
+    resumeStore.swapComponentsPlacementsOrder(placementIndex, newIndex);
+}
+
+function unlinkComponentData(componentPlacement: ResumeComponentPlacement) {
+    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
+    if (placementIndex === -1) return;
+    resumeStore.unlinkComponentPlacement(placementIndex);
+}
+
+function deleteComponent(componentPlacement: ResumeComponentPlacement) {
+    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
+    if (placementIndex === -1) return;
+    resumeStore.deleteComponentPlacement(placementIndex);
+}
 </script>
 
 <template>
     <SidebarGroup class="w-full p-0">
         <SidebarGroupLabel>Composants du CV</SidebarGroupLabel>
         <SidebarMenu>
-            <SidebarMenuItem v-for="component in orderedComponentsPlacements" :key="component.id">
-                <SidebarMenuButton as-child class="cursor-pointer" :tooltip="component.component_data?.component?.name">
-                    <div @click="emit('selected-component-change', component)">
-                        <span>{{ component.component_data?.component?.name }}</span>
-                    </div>
+            <ResumeComponentsListItem
+                v-for="componentPlacement in orderedComponentsPlacements"
+                :key="componentPlacement.id"
+                :component-placement="componentPlacement"
+                @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)"
+
+                @moved-up="moveComponent($event, -1)"
+                @moved-down="moveComponent($event, 1)"
+                @unlinked="unlinkComponentData($event)"
+                @removed="deleteComponent($event)"
+                />
+            <SidebarMenuItem>
+                <SidebarMenuButton as-child class="cursor-pointer text-center" tooltip="Ajouter un composant">
+                    <Button variant="secondary" size="sm" class="w-full" @click="showComponentSelectionStore.setShowComponentSelection(true)">
+                        <Plus />Ajouter un composant
+                    </Button>
                 </SidebarMenuButton>
             </SidebarMenuItem>
         </SidebarMenu>
diff --git a/resources/js/components/resume/ResumeComponentsListItem.vue b/resources/js/components/resume/ResumeComponentsListItem.vue
new file mode 100644
index 0000000..90b39aa
--- /dev/null
+++ b/resources/js/components/resume/ResumeComponentsListItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ResumeComponentPlacement } from '@/types/resume';
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import ResumeComponentsListItemToolButton from './ResumeComponentsListItemToolButton.vue';
+
+
+const props = defineProps<{
+    componentPlacement: ResumeComponentPlacement;
+}>();
+
+const emit = defineEmits<{
+    (e: 'movedUp', component: ResumeComponentPlacement): void;
+    (e: 'movedDown', component: ResumeComponentPlacement): void;
+    (e: 'unlinked', component: ResumeComponentPlacement): void;
+    (e: 'removed', component: ResumeComponentPlacement): void;
+}>();
+</script>
+
+<template>
+    <SidebarMenuItem>
+        <SidebarMenuButton as-child class="cursor-pointer" :tooltip="props.componentPlacement.component_data?.component!.name">
+            <div class="flex w-full flex-nowrap justify-between items-center">
+                <span>{{ props.componentPlacement.component_data?.component!.name }}</span>
+                <div class="sidebar-list-resume-item-tools flex gap-2">
+                    <ResumeComponentsListItemToolButton @click.stop="emit('movedUp', props.componentPlacement)" logo-name="ChevronUp" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('movedDown', props.componentPlacement)" logo-name="ChevronDown" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('unlinked', props.componentPlacement)" logo-name="Unlink" />
+                    <ResumeComponentsListItemToolButton @click.stop="emit('removed', props.componentPlacement)" logo-name="Trash2" class="text-red-500" />
+                </div>
+            </div>
+        </SidebarMenuButton>
+    </SidebarMenuItem>
+</template>
diff --git a/resources/js/components/resume/ResumeComponentsListItemToolButton.vue b/resources/js/components/resume/ResumeComponentsListItemToolButton.vue
new file mode 100644
index 0000000..9aa7920
--- /dev/null
+++ b/resources/js/components/resume/ResumeComponentsListItemToolButton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Icon from '@/components/Icon.vue';
+import Button from '@/components/ui/button/Button.vue';
+
+const props = defineProps<{
+    logoName: string
+}>();
+</script>
+
+<template>
+    <Button variant="secondary" size="sm" class="px-1 gap-0 cursor-pointer">
+        <Icon :name="props.logoName" v-bind="$attrs" :size="20" />
+    </Button>
+</template>
diff --git a/resources/js/components/resume/ResumeEditPanel.vue b/resources/js/components/resume/ResumeEditPanel.vue
index 1d63677..e271637 100644
--- a/resources/js/components/resume/ResumeEditPanel.vue
+++ b/resources/js/components/resume/ResumeEditPanel.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
 import ResumeComponentEdit from './ResumeComponentEdit.vue';
 import ResumeComponentsList from './ResumeComponentsList.vue';
+import ComponentsSelectionList from './ComponentsSelectionList.vue';
+import { computed } from 'vue';
+import { useResumesStore } from '@/stores/resume';
+import { useShowComponentSelectionStore } from '@/stores/ui';
 
-const props = defineProps<{
-    resume: Resume
-    selectedComponent: ResumeComponentPlacement | null
-}>();
+const resumeStore = useResumesStore();
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
-const emit = defineEmits(['selected-component-change']);
+const showComponentSelectionStore = useShowComponentSelectionStore();
+const showComponentSelection = computed<boolean>(() => showComponentSelectionStore.showComponentSelection);
 </script>
 
 <template>
     <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto max-w-[25%] bg-accent relative">
         <Transition mode="out-in" appear>
-            <ResumeComponentEdit v-if="selectedComponent != null" :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" :key="selectedComponent ? selectedComponent.id : 'form'" />
-            <ResumeComponentsList v-else :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" />
+            <ResumeComponentEdit v-if="selectedComponent != null" :key="selectedComponent ? selectedComponent.id : 'form'" />
+            <ComponentsSelectionList v-else-if="showComponentSelection" />
+            <ResumeComponentsList v-else />
         </Transition>
     </div>
 </template>
diff --git a/resources/js/components/resume/ResumeNameInput.vue b/resources/js/components/resume/ResumeNameInput.vue
index ff1bcd7..593da38 100644
--- a/resources/js/components/resume/ResumeNameInput.vue
+++ b/resources/js/components/resume/ResumeNameInput.vue
@@ -1,44 +1,40 @@
 <script setup lang="ts">
-import { ref, Transition } from 'vue';
+import { ref } from 'vue';
 import { Save } from 'lucide-vue-next';
 import Button from '../ui/button/Button.vue';
 import Input from '../ui/input/Input.vue';
-import { Form } from '@inertiajs/vue3';
 import { httpApi } from '@/lib/utils';
-import { Resume } from '@/types/resume';
+import { useResumesStore } from '@/stores/resume';
 
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
 
-const props = defineProps<{
-    resume: Resume,
-    resumeTitle: string,
-}>();
-
-const emit = defineEmits(['update:resume-title']);
-
-const originalTitle = ref<string>(props.resumeTitle);
+const resumeTitle = resumeStore.currentResumeName;
+const originalTitle = ref<string>(resumeTitle.value);
 const titleChanged = ref<boolean>(false);
 
 function saveTitle() {
-    const resume = { ...props.resume, name: props.resumeTitle };
-    resume['components_placements'] = null;
+    const resumeCopy = { ...resume.value, name: resumeTitle.value };
+    resumeCopy['components_placements'] = null;
 
-    httpApi(route('resumes.update', props.resume), {
+    httpApi(route('resumes.update', resume.value), {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
             'Accept': 'application/json'
         },
-        body: JSON.stringify({ ...resume, _method: 'PUT' })
+        body: JSON.stringify({ ...resumeCopy, _method: 'PUT' })
     }).then(() => {
-        location.reload();
+        originalTitle.value = resumeTitle.value;
+        titleChanged.value = false;
     });
 }
 </script>
 
 <template>
     <div class="flex gap-1" >
-        <Input type="text" v-model="props.resumeTitle" placeholder="Sans titre" class="border p-2 rounded" @input="(event) => {emit('update:resume-title', event.target.value); titleChanged = (event.target.value !== originalTitle)}" />
+        <Input type="text" v-model="resumeTitle" placeholder="Sans titre" class="border p-2 rounded" @input="(event) => {resumeStore.setCurrentResumeName(event.target.value); titleChanged = (event.target.value !== originalTitle)}" />
         <Transition>
             <Button v-if="titleChanged" variant="outline" class="cursor-pointer transition" @click="saveTitle"><Save /></Button>
         </Transition>
diff --git a/resources/js/components/resume/ResumePreviewPanel.vue b/resources/js/components/resume/ResumePreviewPanel.vue
index 3054921..d138116 100644
--- a/resources/js/components/resume/ResumePreviewPanel.vue
+++ b/resources/js/components/resume/ResumePreviewPanel.vue
@@ -1,25 +1,35 @@
 <script setup lang="ts">
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
 import ResumeComponent from './ResumeComponent.vue';
 import PrintResumeButton from './PrintResumeButton.vue';
 import ResumeNameInput from './ResumeNameInput.vue';
+import { useResumesStore } from '@/stores/resume';
 
-const props = defineProps<{
-    resume: Resume,
-    selectedComponent: ResumeComponentPlacement | null
-}>();
+const resumeStore = useResumesStore();
+const resume = resumeStore.currentResume;
+const selectedComponent = resumeStore.currentSelectedResumePlacement;
 
-const emit = defineEmits(['selected-component-change', 'update:resume-title']);
 </script>
 
 <template>
     <div class="flex-2 flex flex-col gap-3 w-full">
         <div id="tools" class="w-full flex gap-3 justify-between">
-            <ResumeNameInput :resume="props.resume" :resumeTitle="props.resume.name" @update:resume-title="emit('update:resume-title', $event)" />
-            <PrintResumeButton :resume="props.resume" />
+            <ResumeNameInput />
+            <PrintResumeButton />
         </div>
-        <div id="resume" class="aspect-[0.707317073] w-full max-w-[84.1cm] bg-white text-black">
-            <ResumeComponent v-for="componentPlacement in props.resume.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" @click="emit('selected-component-change', componentPlacement)" />
+        <div class="resume aspect-[0.707317073] w-full bg-white text-black">
+            <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
+        </div>
+        <div class="w-[210mm]" style="position: fixed; top:calc(-297mm - 5000px); container-type: inline-size; ">
+            <div id="resume" class="aspect-[0.707317073] w-full bg-white text-black" >
+                <ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
+            </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+.resume {
+    container-type: inline-size;
+    font-size: 1cqw;
+}
+</style>
diff --git a/resources/js/components/ui/sidebar/utils.ts b/resources/js/components/ui/sidebar/utils.ts
index 6edb140..9a352b4 100644
--- a/resources/js/components/ui/sidebar/utils.ts
+++ b/resources/js/components/ui/sidebar/utils.ts
@@ -3,7 +3,7 @@ import { createContext } from 'reka-ui'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH = '20rem'
 export const SIDEBAR_WIDTH_MOBILE = '18rem'
 export const SIDEBAR_WIDTH_ICON = '3rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
index 69b2db1..6431bd9 100644
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ b/resources/js/layouts/app/AppSidebarLayout.vue
@@ -23,7 +23,7 @@ withDefaults(defineProps<Props>(), {
             </template>
         </AppSidebar>
         <AppContent variant="sidebar" class="overflow-x-hidden">
-            <AppSidebarHeader :breadcrumbs="breadcrumbs" />
+            <!-- <AppSidebarHeader :breadcrumbs="breadcrumbs" /> -->
             <slot />
         </AppContent>
     </AppShell>
diff --git a/resources/js/lib/pdfExport.ts b/resources/js/lib/pdfExport.ts
index af071d3..e6bb9ae 100644
--- a/resources/js/lib/pdfExport.ts
+++ b/resources/js/lib/pdfExport.ts
@@ -1,13 +1,33 @@
 import { jsPDF } from "jspdf";
 
 export function exportToPdf(element: HTMLElement, name: string) {
-    const pdf = new jsPDF();
+    // const pdf = new jsPDF({orientation: 'portrait', unit: 'mm', format: 'a4', precision: 1, hotfixes: ["px_scaling"]});
 
+    // pdf.html(element, {
+    //     callback: function (doc) {
+    //         doc.save(name);
+    //     },
+    //     margin: [0, 0, 0, 0],
+    //     autoPaging: 'text',
+    //     // width: 210,
+    //     // windowWidth: 2100,
+    //     html2canvas: {
+    //         allowTaint: true,
+    //         letterRendering: true,
+    //         logging: true,
+    //         // width: 210,
+    //         // windowWidth: 2100,
+    //         // scale: 0.2,
+    //         // scale: 210 / element.scrollWidth,
+    //     },
+    // });
+
+    const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
     pdf.html(element, {
         callback: function (doc) {
             doc.save(name);
         },
         width: 210,
-        windowWidth: element.scrollWidth,
+        windowWidth: 1080,
     });
 }
diff --git a/resources/js/lib/pinia.ts b/resources/js/lib/pinia.ts
new file mode 100644
index 0000000..8a05980
--- /dev/null
+++ b/resources/js/lib/pinia.ts
@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia'
+
+const pinia = createPinia()
+
+export default pinia
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
index 3512cae..82f8fb2 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -26,9 +26,13 @@ export async function httpApi<T>(url: string, options?: RequestInit, useFetchOpt
             ...options,
         },
         useFetchOptions
-    ).json();
+    );
 
-    if (!error.value && data.value) {
+    if (data.value) {
+        data.value = JSON.parse(data.value as string) as T;
+    }
+
+    if (!error.value) {
         return { data: data.value, error: null };
     } else {
         return { data: data.value, error: error.value };
diff --git a/resources/js/pages/resumes/Edit.vue b/resources/js/pages/resumes/Edit.vue
index 0070770..5a4631b 100644
--- a/resources/js/pages/resumes/Edit.vue
+++ b/resources/js/pages/resumes/Edit.vue
@@ -2,20 +2,25 @@
 import AppLayout from '@/layouts/AppLayout.vue';
 import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/vue3';
-import { Resume, ResumeComponentPlacement } from '@/types/resume';
+import { Resume } from '@/types/resume';
+import { useResumesStore } from '@/stores/resume';
 import ResumeEditPanel from '@/components/resume/ResumeEditPanel.vue';
 import ResumePreviewPanel from '@/components/resume/ResumePreviewPanel.vue';
-import { computed, ref, watch } from 'vue';
+import { useShowComponentSelectionStore } from '@/stores/ui';
 
 const props = defineProps<{
     resume: Resume
 }>();
 
-const localResume = ref({ ...props.resume });
+const resumeStore = useResumesStore();
+resumeStore.setAndUpdateCurrentResumeWhenFetched(props.resume);
 
-const resumeTitle = computed<string>(() => (localResume.value.name == '' ? 'Sans titre' : localResume.value.name) ?? 'Sans titre');
+const showComponentSelectionStore = useShowComponentSelectionStore();
+showComponentSelectionStore.setShowComponentSelection(false);
 
-const selectedComponent = ref<ResumeComponentPlacement | null>(null);
+const resumeTitle = resumeStore.currentResumeName;
+
+resumeStore.setSelectedResumePlacement(-1);
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -24,21 +29,6 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-function changeSelectedComponent(newComponent: ResumeComponentPlacement) {
-    selectedComponent.value = newComponent;
-    // Update the resume
-    localResume.value.components_placements! = localResume.value.components_placements!.map(component =>
-        component.id === newComponent.id ? newComponent : component
-    );
-}
-
-function changeResumeTitle(newTitle: string) {
-    console.log('Changing resume title to ', newTitle);
-    localResume.value.name = newTitle;
-}
-
-console.debug('Resume : ', localResume.value);
-
 </script>
 
 <template>
@@ -46,8 +36,8 @@ console.debug('Resume : ', localResume.value);
 
     <AppLayout :breadcrumbs="breadcrumbs">
         <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto">
-            <ResumeEditPanel :resume="localResume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" />
-            <ResumePreviewPanel :resume="localResume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" @update:resume-title="changeResumeTitle" />
+            <ResumeEditPanel />
+            <ResumePreviewPanel />
         </div>
     </AppLayout>
 </template>
diff --git a/resources/js/ssr.ts b/resources/js/ssr.ts
index 8fcdebe..fa1c474 100644
--- a/resources/js/ssr.ts
+++ b/resources/js/ssr.ts
@@ -4,6 +4,7 @@ import { renderToString } from 'vue/server-renderer';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { createSSRApp, DefineComponent, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
+import pinia from './lib/pinia';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -16,6 +17,7 @@ createServer((page) =>
         setup: ({ App, props, plugin }) =>
             createSSRApp({ render: () => h(App, props) })
                 .use(plugin)
+                .use(pinia)
                 .use(ZiggyVue, {
                     ...page.props.ziggy,
                     location: new URL(page.props.ziggy.location),
diff --git a/resources/js/stores/resume.ts b/resources/js/stores/resume.ts
new file mode 100644
index 0000000..495b60c
--- /dev/null
+++ b/resources/js/stores/resume.ts
@@ -0,0 +1,360 @@
+import { httpApi } from '@/lib/utils';
+import { Resume, ResumeComponentData, ResumeComponentPlacement } from '@/types/resume';
+import { set } from '@vueuse/core';
+import { defineStore } from 'pinia'
+import { computed, ComputedRef, watch } from 'vue';
+
+const useResumesStore = defineStore('resumes', {
+    state: () => ({
+        resumes: [] as Array<Resume>,
+        resumesAreFetched: false as boolean,
+        currentResumeIndex: -1 as number,
+        selectedResumePlacementIndex: -1 as number,
+    }),
+    getters: {
+        hasResumes: (state) => computed(() => state.resumes.length > 0),
+
+        /* === CURRENT RESUME === */
+        currentResume(state): ComputedRef<Resume | null> {
+            console.debug("Current resume index : ", state.currentResumeIndex);
+            return computed(() => state.currentResumeIndex >= 0 ? state.resumes[state.currentResumeIndex] : null);
+        },
+        hasCurrentResume: (state) => computed(() => state.currentResumeIndex >= 0 && state.currentResumeIndex < state.resumes.length),
+        currentResumeName() {
+            return computed(() => {
+                const resume = this.currentResume;
+                return resume ? (resume.value?.name || 'Sans titre') : 'Sans titre';
+            });
+        },
+
+        /* === SELECTED RESUME PLACEMENT === */
+        hasCurrentSelectedResumePlacement(): ComputedRef<boolean> {
+            return computed(() => {
+                const currentResume = this.currentResume;
+                const selectedPlacementIndex = this.selectedResumePlacementIndex;
+                return currentResume !== null &&
+                    selectedPlacementIndex >= 0 &&
+                    selectedPlacementIndex < (currentResume.value?.components_placements?.length ?? 0);
+            });
+        },
+        currentSelectedResumePlacement(): ComputedRef<ResumeComponentPlacement | null> {
+            return computed(() => {
+                if (!this.hasCurrentSelectedResumePlacement.value) return null;
+
+                const currentResume = this.currentResume;
+                const selectedPlacementIndex = this.selectedResumePlacementIndex;
+                return currentResume.value.components_placements[selectedPlacementIndex];
+            });
+        },
+    },
+    actions: {
+        async fetchResumes() {
+            try {
+                this.resumesAreFetched = false;
+                // get from cache
+                const cachedResumes = localStorage.resumes;
+                if (cachedResumes) {
+                    this.setResumes(JSON.parse(cachedResumes));
+                }
+
+                const { data: resumes, error } = await httpApi<Resume[]>(route("resumes.index"));
+                if (error || !resumes) {
+                console.error('Failed to fetch resumes:', error);
+                return;
+                }
+                this.setResumes(resumes);
+
+                // Store in cache
+                this.saveResumesToCache();
+
+                this.resumesAreFetched = true;
+            } catch (error) {
+                console.error('Failed to fetch resumes:', error);
+            }
+        },
+        async updateResumeToApi(resumeIndex: number) {
+            try {
+                if (!this.resumesAreFetched) {
+                    console.warn("Resumes are not fetched yet. Cannot update to API.");
+                    return;
+                }
+                if (resumeIndex < 0 || resumeIndex >= this.resumes.length) {
+                    console.warn("Invalid resume index. Cannot update to API.");
+                    return;
+                }
+
+                const resumeToUpdate = this.resumes[resumeIndex];
+                const { data: updatedResume, error } = await httpApi<null>(route("resumes.update", { resume: resumeToUpdate.id }), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(resumeToUpdate),
+                });
+                if (error || !updatedResume) {
+                    console.error('Failed to update resumes:', error);
+                    return;
+                }
+            } catch (error) {
+                console.error('Failed to update resumes:', error);
+            }
+        },
+        async updateCurrentResumeToApi() {
+            await this.updateResumeToApi(this.currentResumeIndex);
+        },
+        async saveResumesToCache() {
+            localStorage.resumes = JSON.stringify(this.resumes);
+        },
+        setResumes(resumes: Array<Resume>) {
+            this.resumes = resumes;
+        },
+        addResume(resume: Resume) {
+            this.resumes.push(resume);
+            this.currentResumeIndex = this.resumes.length - 1;
+        },
+        removeResume(index: number) {
+            if (index < 0 || index >= this.resumes.length) return;
+
+            this.resumes.splice(index, 1);
+            if (this.currentResumeIndex >= this.resumes.length) {
+                this.currentResumeIndex = this.resumes.length - 1;
+            }
+        },
+        removeResumeById(id: number) {
+            const index = this.resumes.findIndex(resume => resume.id === id);
+            if (index === -1) return;
+            this.removeResume(index);
+        },
+        setCurrentResume(index: number) {
+            if (index < 0 || index >= this.resumes.length) return;
+            this.currentResumeIndex = index;
+        },
+        setCurrentResumeById(id: number) {
+            const index = this.resumes.findIndex(resume => resume.id === id);
+            if (index === -1) return;
+            this.setCurrentResume(index);
+        },
+        setAndUpdateCurrentResume(resume: Resume) {
+            this.setCurrentResumeById(resume.id);
+            this.updateCurrentResume(resume);
+        },
+        setAndUpdateCurrentResumeWhenFetched(resume: Resume) {
+            watch(() => this.resumesAreFetched, (newVal) => {
+                if (newVal === true) {
+                    this.setAndUpdateCurrentResume(resume);
+                }
+            });
+        },
+        updateCurrentResume(updatedResume: Resume) {
+            if (this.currentResumeIndex < 0 || this.currentResumeIndex >= this.resumes.length) return;
+            set(this.resumes, this.currentResumeIndex, updatedResume);
+            this.saveResumesToCache();
+        },
+        setCurrentResumeName(name: string) {
+            if (this.currentResumeIndex < 0 || this.currentResumeIndex >= this.resumes.length) return;
+            this.resumes[this.currentResumeIndex].name = name;
+            this.saveResumesToCache();
+        },
+
+        /* === RESUME COMPONENT PLACEMENTS === */
+        hasComponentsPlacements(): ComputedRef<boolean> {
+            return computed(() => {
+                const currentResume = this.currentResume;
+                return currentResume !== null && (currentResume.value?.components_placements?.length ?? 0) > 0;
+            });
+        },
+        async updateCurrentResumePlacementsToApi(index: number) {
+            // resume-component-placements.update
+            try {
+                if (!this.hasCurrentResume.value) {
+                    console.warn("No current resume selected. Cannot update placements to API.");
+                    return;
+                }
+                const currentResume = this.currentResume.value;
+                if (!currentResume) {
+                    console.warn("Current resume is null. Cannot update placements to API.");
+                    return;
+                }
+
+                const componentPlacements = currentResume.components_placements;
+                if (!componentPlacements) {
+                    console.warn("Current resume has no components placements. Cannot update placements to API.");
+                    return;
+                }
+
+                const componentPlacement = componentPlacements[index];
+                if (!componentPlacement) {
+                    console.warn("Invalid component placement index. Cannot update placements to API.");
+                    return;
+                }
+                console.debug("Updating component placement:", componentPlacement);
+
+                const { data: updatedPlacement, error } = await httpApi<ResumeComponentPlacement>(route("resume-component-placements.update", componentPlacement.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(componentPlacement),
+                });
+                if (error || !updatedPlacement) {
+                    console.error('Failed to update resume placements:', error);
+                    return;
+                }
+
+                // Update the local state with the updated placement
+                this.modifyResumePlacements(index, updatedPlacement);
+                this.saveResumesToCache();
+            } catch (error) {
+                console.error('Failed to update resume placements:', error);
+            }
+        },
+        setSelectedResumePlacement(index: number) {
+            const currentResume = this.currentResume;
+            if (!this.hasCurrentResume.value || !currentResume.value?.components_placements) {
+                this.selectedResumePlacementIndex = -1;
+                return;
+            }
+            if (index < 0 || index >= currentResume.value.components_placements.length) {
+                this.selectedResumePlacementIndex = -1;
+                return;
+            }
+            this.selectedResumePlacementIndex = index;
+        },
+        setSelectedResumePlacementById(id: number) {
+            if (!this.hasCurrentResume.value || !this.currentResume.value?.components_placements) return;
+            const resumePlacementIndex = this.currentResume.value?.components_placements.findIndex(placement => placement.id === id) ?? -1;
+            this.setSelectedResumePlacement(resumePlacementIndex);
+        },
+        modifyResumePlacements(index:number, modifiedPlacement: ResumeComponentPlacement) {
+            if (!this.hasCurrentResume.value || !this.currentResume.value?.components_placements) return;
+            const currentResume = this.currentResume.value;
+            set(currentResume.components_placements!, index, modifiedPlacement);
+        },
+        modifyCurrentSelectedResumePlacement(updatedPlacement: ResumeComponentPlacement) {
+            if (!this.hasCurrentSelectedResumePlacement.value) return;
+            this.modifyResumePlacements(this.selectedResumePlacementIndex, updatedPlacement);
+        },
+        swapComponentsPlacementsOrder(indexA: number, indexB: number) {
+            if (!this.hasCurrentResume.value || !this.currentResume.value?.components_placements) return;
+            const currentResume = this.currentResume.value;
+            const placements = currentResume.components_placements!;
+
+            if (indexA < 0 || indexA >= placements.length || indexB < 0 || indexB >= placements.length) return;
+
+            // Swap the order values
+            const tempOrder = placements[indexA].order;
+            placements[indexA].order = placements[indexB].order;
+            placements[indexB].order = tempOrder;
+
+            // Swap the placements in the array
+            [placements[indexA], placements[indexB]] = [placements[indexB], placements[indexA]];
+
+            // Update the components placements
+            this.updateCurrentResumePlacementsToApi(indexA);
+            this.updateCurrentResumePlacementsToApi(indexB);
+        },
+        async unlinkComponentPlacement(index: number) {
+            if (!this.hasComponentsPlacements) return;
+            const currentResume = this.currentResume.value!;
+            if (index < 0 || index >= currentResume.components_placements!.length) return;
+
+            // Call the 'resume-component-placements.unlink' API endpoint
+            // It will return the new component_data that need to be set to the placement
+            const placementToUnlink = currentResume.components_placements![index];
+            try {
+                const { data: newComponentData, error } = await httpApi<ResumeComponentData>(route("resume-component-placements.unlink", placementToUnlink.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                });
+                if (error || !newComponentData) {
+                    console.error('Failed to unlink resume placement:', error);
+                    return;
+                }
+
+                const updatedPlacement = { ...placementToUnlink, component_data: newComponentData };
+
+                // Update the local state with the updated placement
+                this.modifyResumePlacements(index, updatedPlacement);
+                this.saveResumesToCache();
+            } catch (error) {
+                console.error('Failed to unlink resume placement:', error);
+            }
+        },
+        async deleteComponentPlacement(index: number) {
+            if (!this.hasComponentsPlacements) return;
+            const currentResume = this.currentResume.value!;
+            if (index < 0 || index >= currentResume.components_placements!.length) return;
+
+            const placementToDelete = currentResume.components_placements![index];
+            try {
+                const { error } = await httpApi<null>(route("resume-component-placements.destroy", placementToDelete.id), {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+                        'Accept': 'application/json'
+                    },
+                });
+                if (error) {
+                    console.error('Failed to delete resume placement:', error);
+                    return;
+                }
+
+                // Remove the placement from the local state
+                currentResume.components_placements!.splice(index, 1);
+                this.saveResumesToCache();
+
+                // Clear selected placement if it was the deleted one
+                if (this.selectedResumePlacementIndex === index) {
+                    this.clearSelectedResumePlacement();
+                }
+            } catch (error) {
+                console.error('Failed to delete resume placement:', error);
+            }
+        },
+        clearSelectedResumePlacement() {
+            this.selectedResumePlacementIndex = -1;
+        },
+
+    },
+});
+
+// const useCurrentResumeStore = defineStore('currentResume', {
+//     state: () => ({
+//         currentResume: null as Resume | null,
+//     }),
+//     getters: {
+//         hasCurrentResume: (state) => computed(() => state.currentResume !== null),
+//         currentResumeName: (state) => computed(() => state.currentResume?.name ?? 'Sans titre'),
+//     },
+//     actions: {
+//         setCurrentResume(resume: Resume) {
+//             this.currentResume = resume;
+//         },
+//         setResumeName(name: string) {
+//             if (this.currentResume) {
+//                 this.currentResume.name = name;
+//             }
+//         }
+//     },
+// });
+
+// const useSelectedResumePlacementStore = defineStore('selectedResumePlacement', {
+//     state: () => ({
+//         selectedResumePlacement: null as ResumeComponentPlacement | null,
+//     }),
+//     actions: {
+//         setSelectedResumePlacement(placement: ResumeComponentPlacement | null) {
+//             this.selectedResumePlacement = placement;
+//         },
+//     },
+// });
+
+export { useResumesStore };
diff --git a/resources/js/stores/ui.ts b/resources/js/stores/ui.ts
new file mode 100644
index 0000000..53b7198
--- /dev/null
+++ b/resources/js/stores/ui.ts
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+const useShowComponentSelectionStore = defineStore('showComponentSelection', {
+    state: () => ({
+        showComponentSelection: false as boolean,
+    }),
+    actions: {
+        setShowComponentSelection(show: boolean) {
+            this.showComponentSelection = show;
+        },
+    },
+});
+
+export { useShowComponentSelectionStore };
diff --git a/routes/api.php b/routes/api.php
index 97769b0..2bb22e4 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,10 +1,18 @@
 <?php
 
+use App\Http\Controllers\ResumeComponentController;
 use App\Http\Controllers\ResumeComponentPlacementController;
 use App\Http\Controllers\ResumeController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
-Route::apiResource('resume-component-placements', ResumeComponentPlacementController::class)->middleware(['auth:sanctum', 'verified']);
+/* === RESUMES ===  */
 Route::apiResource('resumes', ResumeController::class)->middleware(['auth:sanctum', 'verified']);
 
+/* === RESUME COMPONENT PLACEMENTS ===  */
+Route::apiResource('resume-component-placements', ResumeComponentPlacementController::class)->middleware(['auth:sanctum', 'verified']);
+Route::put('resume-component-placements/unlink/{placement}', [ResumeComponentPlacementController::class, 'unlink'])->name('resume-component-placements.unlink')->middleware(['auth:sanctum', 'verified']);
+
+/* === RESUME COMPONENTS ===  */
+Route::apiResource('resume-components', ResumeComponentController::class)->middleware(['auth:sanctum', 'verified']);
+
diff --git a/routes/web.php b/routes/web.php
index 5497763..72cfb1c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -12,7 +12,10 @@ Route::get('dashboard', function () {
     return Inertia::render('Dashboard');
 })->middleware(['auth', 'verified'])->name('dashboard');
 
+/* === RESUMES ===  */
 Route::resource('resumes', ResumeController::class)->middleware(['auth', 'verified']);
+Route::post('resumes/{resume}/duplicate', [ResumeController::class, 'duplicate'])->middleware(['auth', 'verified'])->name('resumes.duplicate');
+
 
 require __DIR__.'/settings.php';
 require __DIR__.'/auth.php';