backend/app/Http/Controllers/API/TripController.php

@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Http\Controllers\API;
+
+use App\Http\Controllers\Controller;
+use App\Models\Trip;
+use Illuminate\Http\Request;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Validation\ValidationException;
+
+class TripController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request): JsonResponse
+    {
+        $trips = Trip::where('created_by_user_id', $request->user()->id)
+            ->orderBy('created_at', 'desc')
+            ->get();
+
+        return response()->json($trips);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request): JsonResponse
+    {
+        $validated = $request->validate([
+            'name' => 'required|string|max:255',
+            'description' => 'nullable|string',
+            'start_date' => 'nullable|date',
+            'end_date' => 'nullable|date|after_or_equal:start_date',
+        ]);
+
+        $validated['created_by_user_id'] = $request->user()->id;
+
+        $trip = Trip::create($validated);
+
+        return response()->json($trip, 201);
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Request $request, string $id): JsonResponse
+    {
+        $trip = Trip::where('id', $id)
+            ->where('created_by_user_id', $request->user()->id)
+            ->firstOrFail();
+
+        return response()->json($trip);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id): JsonResponse
+    {
+        $trip = Trip::where('id', $id)
+            ->where('created_by_user_id', $request->user()->id)
+            ->firstOrFail();
+
+        $validated = $request->validate([
+            'name' => 'required|string|max:255',
+            'description' => 'nullable|string',
+            'start_date' => 'nullable|date',
+            'end_date' => 'nullable|date|after_or_equal:start_date',
+        ]);
+
+        $trip->update($validated);
+
+        return response()->json($trip);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Request $request, string $id): JsonResponse
+    {
+        $trip = Trip::where('id', $id)
+            ->where('created_by_user_id', $request->user()->id)
+            ->firstOrFail();
+
+        $trip->delete();
+
+        return response()->json(['message' => 'Trip deleted successfully']);
+    }
+}

backend/app/Models/Trip.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class Trip extends Model
+{
+    protected $fillable = [
+        'name',
+        'description',
+        'start_date',
+        'end_date',
+        'created_by_user_id'
+    ];
+
+    protected $casts = [
+        'start_date' => 'date',
+        'end_date' => 'date',
+    ];
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'created_by_user_id');
+    }
+}

backend/database/migrations/2025_09_27_004838_create_trips_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('trips', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->text('description')->nullable();
+            $table->date('start_date')->nullable();
+            $table->date('end_date')->nullable();
+            $table->foreignId('created_by_user_id')->constrained('users')->onDelete('cascade');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('trips');
+    }
+};

backend/routes/api.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\API\AuthController;
+use App\Http\Controllers\API\TripController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -20,4 +21,7 @@
     });
     Route::get('/profile', [AuthController::class, 'profile']);
     Route::post('/logout', [AuthController::class, 'logout']);
+
+    // Trip routes
+    Route::apiResource('trips', TripController::class);
 });

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@heroicons/react": "^2.2.0",
         "axios": "^1.12.2",
         "react": "^19.1.1",
         "react-dom": "^19.1.1"
@@ -902,6 +903,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "axios": "^1.12.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"

frontend/src/App.css

@@ -1,3 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
+
+:root {
+  /* Color Palette from Coolors.co */
+  --color-navy: #03071e;
+  --color-dark-red: #370617;
+  --color-burgundy: #6a040f;
+  --color-crimson: #9d0208;
+  --color-red: #d00000;
+  --color-red-orange: #dc2f02;
+  --color-orange: #e85d04;
+  --color-orange-yellow: #f48c06;
+  --color-yellow-orange: #faa307;
+  --color-yellow: #ffba08;
+
+  /* Semantic colors */
+  --primary-color: var(--color-orange);
+  --primary-hover: var(--color-red-orange);
+  --secondary-color: var(--color-burgundy);
+  --accent-color: var(--color-yellow-orange);
+  --danger-color: var(--color-crimson);
+  --danger-hover: var(--color-red);
+  --text-primary: var(--color-navy);
+  --text-secondary: var(--color-dark-red);
+  --text-muted: #666;
+
+  /* Background colors */
+  --bg-primary: #faf8f5;
+  --bg-secondary: #f5f1eb;
+  --bg-light: #fdf9f4;
+  --bg-card: #fbf7f2;
+  --bg-gradient: linear-gradient(135deg, #faf8f5 0%, #f5f1eb 100%);
+
+  /* Typography */
+  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  --font-secondary: 'Playfair Display', Georgia, 'Times New Roman', serif;
+
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -5,14 +49,18 @@
 body {
   margin: 0;
   padding: 0;
+  background: var(--bg-gradient);
+  min-height: 100vh;
+  font-family: var(--font-primary);
+  line-height: 1.6;
 }
 
 .App {
   min-height: 100vh;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  padding: 2rem;
+  padding: 0;
   width: 100vw;
   box-sizing: border-box;
 }
@@ -26,7 +74,7 @@ body {
 .login-form {
   background: #f8f9fa;
   padding: 2rem;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   width: 100%;
   max-width: 400px;
@@ -47,23 +95,29 @@ body {
 .form-group label {
   display: block;
   margin-bottom: 0.5rem;
-  font-weight: 500;
+  font-weight: 600;
-  color: #555;
+  color: var(--color-dark-red);
+  background: rgba(255, 244, 230, 0.3);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  display: inline-block;
 }
 
 .form-group input {
   width: 100%;
   padding: 0.75rem;
-  border: 1px solid #ddd;
+  border: 1px solid var(--primary-color);
-  border-radius: 4px;
+  border-radius: var(--radius-md);
   font-size: 1rem;
   box-sizing: border-box;
+  background: #fff4e6;
+  color: #000;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #007bff;
+  border-color: var(--color-red-orange);
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 2px rgba(220, 47, 2, 0.25);
 }
 
 .form-group input.error {
@@ -80,7 +134,7 @@ body {
 .alert {
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .alert-success {
@@ -98,21 +152,21 @@ body {
 button[type="submit"] {
   width: 100%;
   padding: 0.75rem;
-  background-color: #007bff;
+  background-color: var(--primary-color);
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
 button[type="submit"]:hover:not(:disabled) {
-  background-color: #0056b3;
+  background-color: var(--primary-hover);
 }
 
 button[type="submit"]:disabled {
-  background-color: #6c757d;
+  background-color: var(--text-muted);
   cursor: not-allowed;
 }
 
@@ -136,7 +190,7 @@ button[type="submit"]:disabled {
 .auth-toggle {
   display: flex;
   margin-bottom: 2rem;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid #ddd;
 }
@@ -151,7 +205,7 @@ button[type="submit"]:disabled {
 }
 
 .auth-toggle button.active {
-  background: #007bff;
+  background: var(--primary-color);
   color: white;
 }
 
@@ -167,7 +221,7 @@ button[type="submit"]:disabled {
 .link-button {
   background: none;
   border: none;
-  color: #007bff;
+  color: var(--primary-color);
   cursor: pointer;
   text-decoration: underline;
   padding: 0;
@@ -175,14 +229,29 @@ button[type="submit"]:disabled {
 }
 
 .link-button:hover {
-  color: #0056b3;
+  color: var(--primary-hover);
 }
 
 /* Dashboard Styles */
 .dashboard {
+  width: 1200px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem;
+  position: relative;
+}
+
+.dashboard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 200px;
+  background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-orange) 50%, var(--color-red-orange) 100%);
+  opacity: 0.03;
+  border-radius: 0 0 50px 50px;
+  z-index: -1;
 }
 
 .dashboard-header {
@@ -194,9 +263,74 @@ button[type="submit"]:disabled {
   border-bottom: 1px solid #eee;
 }
 
+.dashboard-title {
+  display: flex;
+  align-items: center;
+}
+
 .dashboard-header h1 {
   margin: 0;
-  color: #333;
+  color: var(--text-primary);
+  background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-orange) 25%, var(--color-red-orange) 50%, var(--color-crimson) 75%, var(--color-dark-red) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 700;
+  font-size: 2rem;
+  font-family: var(--font-secondary);
+}
+
+/* User menu styles */
+.user-dropdown {
+  position: relative;
+}
+
+.user-menu-trigger {
+  background: var(--bg-card);
+  border: 1px solid var(--primary-color);
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+  border-radius: 20px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.user-menu-trigger:hover {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-red-orange) 100%);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.user-menu-trigger:focus {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+.dropdown-arrow {
+  font-size: 0.7rem;
+  transition: transform 0.2s;
+}
+
+.user-dropdown[data-open="true"] .dropdown-arrow {
+  transform: rotate(180deg);
+}
+
+.user-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: var(--bg-card);
+  border: 1px solid rgba(228, 93, 4, 0.2);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  min-width: 120px;
+  margin-top: 0.5rem;
 }
 
 .user-info {
@@ -205,18 +339,30 @@ button[type="submit"]:disabled {
   gap: 1rem;
 }
 
-.logout-btn {
+/* Trips section header */
-  padding: 0.5rem 1rem;
+.trips-section-header {
-  background: #dc3545;
+  display: flex;
-  color: white;
+  justify-content: space-between;
-  border: none;
+  align-items: center;
-  border-radius: 4px;
+  margin-bottom: 0;
-  cursor: pointer;
-  transition: background-color 0.2s;
 }
 
-.logout-btn:hover {
+.create-trip-btn-small {
-  background: #c82333;
+  padding: 0.5rem 1rem;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+  margin-top: 0.2rem;
+}
+
+.create-trip-btn-small:hover {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-red-orange) 100%);
+  transform: translateY(-1px);
 }
 
 .welcome-section {
@@ -239,7 +385,7 @@ button[type="submit"]:disabled {
 .feature-card {
   background: #f8f9fa;
   padding: 2rem;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   text-align: center;
 }
@@ -271,7 +417,7 @@ button[type="submit"]:disabled {
   text-align: center;
   padding: 3rem;
   background: #f8f9fa;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   margin: 2rem 0;
 }
 
@@ -283,3 +429,529 @@ button[type="submit"]:disabled {
 .unauthorized-container p {
   color: #666;
 }
+
+/* Trip Styles */
+.trips-section {
+  margin-top: 4rem;
+  position: relative;
+}
+
+.trips-section::before {
+  content: '';
+  position: absolute;
+  top: -3.5rem;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent 0%, var(--color-yellow) 20%, var(--color-orange) 40%, var(--color-red-orange) 60%, var(--color-crimson) 80%, transparent 100%);
+  opacity: 0.6;
+}
+
+.trips-section-title {
+  background: linear-gradient(135deg, #6a040f 0%, #370617 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  font-weight: 700;
+  font-family: var(--font-secondary);
+}
+
+.trips-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin-top: 0;
+}
+
+.trip-card {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  position: relative;
+  border: 1px solid rgba(228, 93, 4, 0.1);
+  overflow: hidden;
+}
+
+.trip-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-yellow-orange) 50%, var(--color-yellow) 100%);
+}
+
+.trip-card:hover {
+  box-shadow: 0 8px 30px rgba(228, 93, 4, 0.15);
+  transform: translateY(-4px) scale(1.02);
+}
+
+.add-trip-card {
+  background: var(--bg-card);
+  border: 4px dashed var(--primary-color);
+  border-radius: 12px;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  opacity: 0.8;
+}
+
+.add-trip-card:hover {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-red-orange) 100%);
+  border-color: var(--primary-hover);
+  transform: translateY(-2px);
+  opacity: 1;
+}
+
+.add-trip-card:hover .add-trip-content {
+  color: white;
+}
+
+.add-trip-card:hover .add-trip-icon {
+  color: white;
+}
+
+.add-trip-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  color: var(--primary-color);
+  transition: color 0.3s ease;
+}
+
+.add-trip-icon {
+  width: 4rem;
+  height: 4rem;
+  color: var(--primary-color);
+}
+
+.add-trip-text {
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.trip-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.trip-card-title {
+  margin: 0;
+  color: var(--primary-color);
+  font-size: 1.25rem;
+  line-height: 1.3;
+  flex: 1;
+  margin-right: 1rem;
+  position: relative;
+}
+
+.trip-card-title::before {
+  content: '🗺️';
+  font-size: 0.9rem;
+  margin-right: 0.5rem;
+  opacity: 0.7;
+}
+
+.trip-card-menu {
+  position: relative;
+}
+
+.trip-menu-trigger {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: #666;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.2s;
+}
+
+.trip-menu-trigger:hover {
+  background: #e9ecef;
+}
+
+.trip-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  min-width: 120px;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: none;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  color: #333;
+}
+
+.dropdown-item:hover {
+  background: #f8f9fa;
+}
+
+.dropdown-item-danger {
+  color: var(--danger-color);
+}
+
+.dropdown-item-danger:hover {
+  background: #f8d7da;
+  color: var(--danger-hover);
+}
+
+.trip-card-description {
+  color: #666;
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+
+.trip-card-dates {
+  margin-bottom: 1rem;
+}
+
+.trip-date-range {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.trip-dates {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.trip-duration {
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.trip-dates-placeholder {
+  color: #999;
+  font-style: italic;
+}
+
+.trip-card-footer {
+  border-top: 1px solid #e9ecef;
+  padding-top: 0.75rem;
+  margin-top: 1rem;
+}
+
+.trip-created {
+  font-size: 0.875rem;
+  color: #999;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 2rem;
+  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-light) 100%);
+  border-radius: 16px;
+  margin-top: 2rem;
+  border: 2px dashed rgba(228, 93, 4, 0.2);
+  position: relative;
+}
+
+.empty-state::before {
+  content: '✈️';
+  font-size: 3rem;
+  display: block;
+  margin-bottom: 1rem;
+  opacity: 0.6;
+}
+
+.empty-state h3 {
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.empty-state p {
+  color: #999;
+  margin: 0;
+}
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(3, 7, 30, 0.8);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+  animation: modalOverlayFadeIn 0.2s ease-out;
+}
+
+@keyframes modalOverlayFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-content {
+  background: var(--bg-card);
+  border-radius: var(--radius-md);
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow: hidden;
+  box-shadow:
+    0 25px 80px rgba(3, 7, 30, 0.4),
+    0 0 0 1px rgba(228, 93, 4, 0.1);
+  animation: modalSlideIn 0.3s ease-out;
+  position: relative;
+}
+
+.modal-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-red-orange) 50%, var(--color-crimson) 100%);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem 2rem 1rem;
+  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-light) 100%);
+}
+
+.modal-header h2 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-red-orange) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.modal-close {
+  background: var(--bg-secondary);
+  border: 1px solid rgba(228, 93, 4, 0.2);
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: var(--primary-color);
+  padding: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  font-weight: 300;
+}
+
+.modal-close:hover {
+  background: var(--primary-color);
+  color: white;
+  transform: scale(1.1);
+}
+
+.modal-body {
+  padding: 0 2rem;
+  max-height: calc(90vh - 200px);
+  overflow-y: auto;
+}
+
+.trip-form {
+  padding: 1.5rem 0;
+}
+
+.trip-form .form-group {
+  margin-bottom: 1.5rem;
+}
+
+.trip-form textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--primary-color);
+  border-radius: var(--radius-md);
+  font-size: 1rem;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 80px;
+  box-sizing: border-box;
+  background: #fff4e6;
+  color: #000;
+}
+
+.trip-form textarea:focus {
+  outline: none;
+  border-color: var(--color-red-orange);
+  box-shadow: 0 0 0 2px rgba(220, 47, 2, 0.25);
+}
+
+.date-format-hint {
+  font-size: 0.875rem;
+  color: #666;
+  font-weight: normal;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-top: 1px solid rgba(228, 93, 4, 0.1);
+  background: var(--bg-secondary);
+  border-radius: 0 0 16px 16px;
+}
+
+.btn-primary {
+  padding: 0.75rem 1.5rem;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-red-orange) 100%);
+}
+
+.btn-primary:disabled {
+  background: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 0.75rem 1.5rem;
+  background: transparent;
+  color: var(--secondary-color);
+  border: 2px solid var(--secondary-color);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--color-burgundy) 100%);
+  border-color: var(--color-burgundy);
+  color: white;
+  transform: translateY(-1px);
+}
+
+.btn-secondary:disabled {
+  background: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.btn-danger {
+  padding: 0.75rem 1.5rem;
+  background: var(--danger-color);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: var(--danger-hover);
+}
+
+.btn-danger:disabled {
+  background: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.confirm-dialog {
+  max-width: 400px;
+}
+
+.confirm-dialog-body {
+  padding: 1.5rem;
+}
+
+.confirm-dialog-body p {
+  margin: 0;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .dashboard {
+    padding: 1rem;
+  }
+
+  .dashboard-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+
+  .dashboard-header-actions {
+    justify-content: space-between;
+  }
+
+  .trips-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-content {
+    margin: 1rem;
+    max-width: none;
+  }
+
+  .modal-actions {
+    flex-direction: column;
+  }
+}

frontend/src/components/BaseModal.jsx

@@ -0,0 +1,48 @@
+const BaseModal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  actions,
+  maxWidth = "500px",
+  className = ""
+}) => {
+  if (!isOpen) return null;
+
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={handleOverlayClick}>
+      <div
+        className={`modal-content ${className}`}
+        style={{ maxWidth }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {title && (
+          <div className="modal-header">
+            <h2>{title}</h2>
+            <button className="modal-close" onClick={onClose} aria-label="Close modal">
+              ×
+            </button>
+          </div>
+        )}
+
+        <div className="modal-body">
+          {children}
+        </div>
+
+        {actions && (
+          <div className="modal-actions">
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BaseModal;

frontend/src/components/ConfirmDialog.jsx

@@ -0,0 +1,60 @@
+import BaseModal from './BaseModal';
+
+const ConfirmDialog = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title = "Confirm Action",
+  message = "Are you sure you want to proceed?",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isLoading = false,
+  variant = "danger" // "danger" or "primary"
+}) => {
+  const handleConfirm = async () => {
+    try {
+      await onConfirm();
+      onClose();
+    } catch (error) {
+      console.error('Confirm action failed:', error);
+    }
+  };
+
+  const actions = (
+    <>
+      <button
+        type="button"
+        onClick={onClose}
+        disabled={isLoading}
+        className="btn-secondary"
+      >
+        {cancelText}
+      </button>
+      <button
+        type="button"
+        onClick={handleConfirm}
+        disabled={isLoading}
+        className={variant === "danger" ? "btn-danger" : "btn-primary"}
+      >
+        {isLoading ? 'Processing...' : confirmText}
+      </button>
+    </>
+  );
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      actions={actions}
+      maxWidth="400px"
+      className="confirm-dialog"
+    >
+      <div className="confirm-dialog-body">
+        <p>{message}</p>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default ConfirmDialog;

frontend/src/components/Dashboard.jsx

@@ -1,47 +1,164 @@
+import { useState, useEffect, useRef } from 'react';
 import { useAuth } from '../contexts/AuthContext';
+import api from '../utils/api';
+import TripList from './TripList';
+import TripModal from './TripModal';
+import ConfirmDialog from './ConfirmDialog';
 
 const Dashboard = () => {
   const { user, logout } = useAuth();
+  const [trips, setTrips] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showTripModal, setShowTripModal] = useState(false);
+  const [selectedTrip, setSelectedTrip] = useState(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [tripToDelete, setTripToDelete] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showUserDropdown, setShowUserDropdown] = useState(false);
+  const userDropdownRef = useRef(null);
+
+  useEffect(() => {
+    fetchTrips();
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (userDropdownRef.current && !userDropdownRef.current.contains(event.target)) {
+        setShowUserDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const fetchTrips = async () => {
+    try {
+      setIsLoading(true);
+      const response = await api.get('/trips');
+      setTrips(response.data);
+    } catch (error) {
+      console.error('Error fetching trips:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const handleLogout = async () => {
     await logout();
   };
 
+  const handleCreateTrip = () => {
+    setSelectedTrip(null);
+    setShowTripModal(true);
+  };
+
+  const handleEditTrip = (trip) => {
+    setSelectedTrip(trip);
+    setShowTripModal(true);
+  };
+
+  const handleDeleteTrip = (trip) => {
+    setTripToDelete(trip);
+    setShowDeleteConfirm(true);
+  };
+
+  const handleTripSubmit = async (tripData) => {
+    setIsSubmitting(true);
+    try {
+      if (selectedTrip) {
+        const response = await api.put(`/trips/${selectedTrip.id}`, tripData);
+        setTrips(trips.map(trip =>
+          trip.id === selectedTrip.id ? response.data : trip
+        ));
+      } else {
+        const response = await api.post('/trips', tripData);
+        setTrips([response.data, ...trips]);
+      }
+      setShowTripModal(false);
+      setSelectedTrip(null);
+    } catch (error) {
+      console.error('Error saving trip:', error);
+      throw error;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const confirmDeleteTrip = async () => {
+    try {
+      await api.delete(`/trips/${tripToDelete.id}`);
+      setTrips(trips.filter(trip => trip.id !== tripToDelete.id));
+      setShowDeleteConfirm(false);
+      setTripToDelete(null);
+    } catch (error) {
+      console.error('Error deleting trip:', error);
+      throw error;
+    }
+  };
+
   return (
     <div className="dashboard">
       <header className="dashboard-header">
-        <h1>Trip Planner Dashboard</h1>
+        <div className="dashboard-title">
+          <h1>TripPlanner</h1>
+        </div>
         <div className="user-info">
-          <span>Welcome, {user?.name}!</span>
+          <span>Welcome back!</span>
-          <button onClick={handleLogout} className="logout-btn">
+          <div className="user-dropdown" ref={userDropdownRef}>
-            Logout
+            <button
-          </button>
+              className="user-menu-trigger"
+              onClick={() => setShowUserDropdown(!showUserDropdown)}
+            >
+              {user?.name}
+              <span className="dropdown-arrow">▼</span>
+            </button>
+            {showUserDropdown && (
+              <div className="user-dropdown-menu">
+                <button onClick={handleLogout} className="dropdown-item">
+                  🚪 Logout
+                </button>
+              </div>
+            )}
+          </div>
         </div>
       </header>
 
       <main className="dashboard-content">
-        <div className="welcome-section">
+        <TripList
-          <h2>Welcome to Your Trip Planner</h2>
+          trips={trips}
-          <p>Start planning your next adventure!</p>
+          isLoading={isLoading}
-        </div>
+          onEdit={handleEditTrip}
-
+          onDelete={handleDeleteTrip}
-        <div className="features-grid">
+          onCreateTrip={handleCreateTrip}
-          <div className="feature-card">
+        />
-            <h3>Plan Trips</h3>
-            <p>Create and organize your travel itineraries</p>
-          </div>
-
-          <div className="feature-card">
-            <h3>Save Destinations</h3>
-            <p>Keep track of places you want to visit</p>
-          </div>
-
-          <div className="feature-card">
-            <h3>Share Plans</h3>
-            <p>Collaborate with friends and family</p>
-          </div>
-        </div>
       </main>
+
+      <TripModal
+        isOpen={showTripModal}
+        onClose={() => {
+          setShowTripModal(false);
+          setSelectedTrip(null);
+        }}
+        onSubmit={handleTripSubmit}
+        trip={selectedTrip}
+        isLoading={isSubmitting}
+      />
+
+      <ConfirmDialog
+        isOpen={showDeleteConfirm}
+        onClose={() => {
+          setShowDeleteConfirm(false);
+          setTripToDelete(null);
+        }}
+        onConfirm={confirmDeleteTrip}
+        title="Delete Trip"
+        message={`Are you sure you want to delete "${tripToDelete?.name}"? This action cannot be undone.`}
+        confirmText="Delete"
+        variant="danger"
+      />
     </div>
   );
 };

frontend/src/components/TripCard.jsx

@@ -0,0 +1,118 @@
+import { useState, useRef, useEffect } from 'react';
+
+const TripCard = ({ trip, onEdit, onDelete }) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const formatDate = (dateString) => {
+    if (!dateString) return null;
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  const handleEdit = () => {
+    setShowDropdown(false);
+    onEdit(trip);
+  };
+
+  const handleDelete = () => {
+    setShowDropdown(false);
+    onDelete(trip);
+  };
+
+  const getDuration = () => {
+    if (!trip.start_date || !trip.end_date) return null;
+
+    const start = new Date(trip.start_date);
+    const end = new Date(trip.end_date);
+    const diffTime = Math.abs(end - start);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+
+    return diffDays === 1 ? '1 day' : `${diffDays} days`;
+  };
+
+  return (
+    <div className="trip-card">
+      <div className="trip-card-header">
+        <h3 className="trip-card-title">{trip.name}</h3>
+        <div className="trip-card-menu" ref={dropdownRef}>
+          <button
+            className="trip-menu-trigger"
+            onClick={() => setShowDropdown(!showDropdown)}
+            aria-label="Trip options"
+          >
+            ⋯
+          </button>
+          {showDropdown && (
+            <div className="trip-dropdown">
+              <button onClick={handleEdit} className="dropdown-item">
+                Edit
+              </button>
+              <button onClick={handleDelete} className="dropdown-item dropdown-item-danger">
+                Delete
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {trip.description && (
+        <p className="trip-card-description">{trip.description}</p>
+      )}
+
+      <div className="trip-card-dates">
+        {trip.start_date && trip.end_date ? (
+          <div className="trip-date-range">
+            <span className="trip-dates">
+              {formatDate(trip.start_date)} - {formatDate(trip.end_date)}
+            </span>
+            <span className="trip-duration">
+              {getDuration()}
+            </span>
+          </div>
+        ) : trip.start_date ? (
+          <span className="trip-dates">
+            Starts: {formatDate(trip.start_date)}
+          </span>
+        ) : trip.end_date ? (
+          <span className="trip-dates">
+            Ends: {formatDate(trip.end_date)}
+          </span>
+        ) : (
+          <span className="trip-dates trip-dates-placeholder">
+            Dates not set
+          </span>
+        )}
+      </div>
+
+      <div className="trip-card-footer">
+        <span className="trip-created">
+          Created {new Date(trip.created_at).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+          })}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default TripCard;

frontend/src/components/TripList.jsx

@@ -0,0 +1,54 @@
+import TripCard from './TripCard';
+import { GlobeEuropeAfricaIcon } from '@heroicons/react/24/outline';
+
+const TripList = ({ trips, isLoading, onEdit, onDelete, onCreateTrip }) => {
+  if (isLoading) {
+    return (
+      <div className="trips-section">
+        <div className="loading-container">
+          <span className="loading-spinner">Loading trips...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!trips || trips.length === 0) {
+    return (
+      <div className="trips-section">
+        <h2 className="trips-section-title">Your Trips</h2>
+        <div className="trips-grid">
+          <div className="add-trip-card" onClick={onCreateTrip}>
+            <div className="add-trip-content">
+              <GlobeEuropeAfricaIcon className="add-trip-icon" />
+              <span className="add-trip-text">Create New Trip</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="trips-section">
+      <h2 className="trips-section-title">Your Trips</h2>
+      <div className="trips-grid">
+        {trips.map((trip) => (
+          <TripCard
+            key={trip.id}
+            trip={trip}
+            onEdit={onEdit}
+            onDelete={onDelete}
+          />
+        ))}
+        <div className="add-trip-card" onClick={onCreateTrip}>
+          <div className="add-trip-content">
+            <GlobeEuropeAfricaIcon className="add-trip-icon" />
+            <span className="add-trip-text">Create New Trip</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TripList;

frontend/src/components/TripModal.jsx

@@ -0,0 +1,175 @@
+import { useState, useEffect } from 'react';
+import BaseModal from './BaseModal';
+
+const TripModal = ({ isOpen, onClose, onSubmit, trip = null, isLoading = false }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    start_date: '',
+    end_date: ''
+  });
+  const [errors, setErrors] = useState({});
+
+  useEffect(() => {
+    if (trip) {
+      setFormData({
+        name: trip.name || '',
+        description: trip.description || '',
+        start_date: trip.start_date ? trip.start_date.split('T')[0] : '',
+        end_date: trip.end_date ? trip.end_date.split('T')[0] : ''
+      });
+    } else {
+      setFormData({
+        name: '',
+        description: '',
+        start_date: '',
+        end_date: ''
+      });
+    }
+    setErrors({});
+  }, [trip, isOpen]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+
+    if (errors[name]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: ''
+      }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Trip name is required';
+    }
+
+    if (formData.start_date && formData.end_date && formData.start_date > formData.end_date) {
+      newErrors.end_date = 'End date must be after start date';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    try {
+      await onSubmit(formData);
+      onClose();
+    } catch (error) {
+      if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors);
+      }
+    }
+  };
+
+  const handleClose = () => {
+    setFormData({
+      name: '',
+      description: '',
+      start_date: '',
+      end_date: ''
+    });
+    setErrors({});
+    onClose();
+  };
+
+  const actions = (
+    <>
+      <button type="button" onClick={handleClose} disabled={isLoading} className="btn-secondary">
+        Cancel
+      </button>
+      <button type="submit" form="trip-form" disabled={isLoading} className="btn-primary">
+        {isLoading ? 'Saving...' : (trip ? 'Update Trip' : 'Create Trip')}
+      </button>
+    </>
+  );
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={trip ? 'Edit Trip' : 'Create New Trip'}
+      actions={actions}
+      className="trip-modal"
+    >
+      <form id="trip-form" onSubmit={handleSubmit} className="trip-form">
+        <div className="form-group">
+          <label htmlFor="name">Trip Name *</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            className={errors.name ? 'error' : ''}
+            disabled={isLoading}
+            required
+          />
+          {errors.name && <span className="error-message">{errors.name}</span>}
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="description">Description</label>
+          <textarea
+            id="description"
+            name="description"
+            value={formData.description}
+            onChange={handleChange}
+            rows="3"
+            className={errors.description ? 'error' : ''}
+            disabled={isLoading}
+          />
+          {errors.description && <span className="error-message">{errors.description}</span>}
+        </div>
+
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="start_date">Start Date</label>
+            <input
+              type="date"
+              id="start_date"
+              name="start_date"
+              value={formData.start_date}
+              onChange={handleChange}
+              className={errors.start_date ? 'error' : ''}
+              disabled={isLoading}
+              lang="en-GB"
+            />
+            {errors.start_date && <span className="error-message">{errors.start_date}</span>}
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="end_date">End Date</label>
+            <input
+              type="date"
+              id="end_date"
+              name="end_date"
+              value={formData.end_date}
+              onChange={handleChange}
+              className={errors.end_date ? 'error' : ''}
+              disabled={isLoading}
+              lang="en-GB"
+            />
+            {errors.end_date && <span className="error-message">{errors.end_date}</span>}
+          </div>
+        </div>
+      </form>
+    </BaseModal>
+  );
+};
+
+export default TripModal;