From b2f12560df62c58f62f92d376e26845330431b76 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 10:44:57 +0600
Subject: [PATCH 01/45] Add Reports Page

---
 app/Http/Controllers/ProductsController.php | 57 +++++++++++++++++++++
 app/Http/Controllers/ReportsController.php  | 26 +++++++++-
 resources/js/Components/Card.vue            | 41 +++++++++++++++
 resources/js/Pages/Reports/Index.vue        | 29 ++++++++++-
 resources/js/Shared/Card.vue                | 46 +++++++++++++++++
 resources/js/Shared/Icon.vue                |  2 +
 resources/js/Shared/MainMenu.vue            |  6 +++
 routes/web.php                              | 15 ++++++
 8 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 app/Http/Controllers/ProductsController.php
 create mode 100644 resources/js/Components/Card.vue
 create mode 100644 resources/js/Shared/Card.vue

diff --git a/app/Http/Controllers/ProductsController.php b/app/Http/Controllers/ProductsController.php
new file mode 100644
index 000000000..6774fe85d
--- /dev/null
+++ b/app/Http/Controllers/ProductsController.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Organization;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Redirect;
+use Illuminate\Support\Facades\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+
+class ProductsController extends Controller
+{
+    public function index(): Response
+    {
+        return Inertia::render('Organizations/Index', [
+            'filters' => Request::all('search', 'trashed'),
+            'organizations' => Auth::user()->account->organizations()
+                ->orderBy('name')
+                ->filter(Request::only('search', 'trashed'))
+                ->paginate(10)
+                ->withQueryString()
+                ->through(fn ($organization) => [
+                    'id' => $organization->id,
+                    'name' => $organization->name,
+                    'phone' => $organization->phone,
+                    'city' => $organization->city,
+                    'deleted_at' => $organization->deleted_at,
+                ]),
+        ]);
+    }
+
+    public function create(): Response
+    {
+        return Inertia::render('Organizations/Create');
+    }
+
+    public function store(): RedirectResponse
+    {
+        Auth::user()->account->organizations()->create(
+            Request::validate([
+                'name' => ['required', 'max:100'],
+                'email' => ['nullable', 'max:50', 'email'],
+                'phone' => ['nullable', 'max:50'],
+                'address' => ['nullable', 'max:150'],
+                'city' => ['nullable', 'max:50'],
+                'region' => ['nullable', 'max:50'],
+                'country' => ['nullable', 'max:2'],
+                'postal_code' => ['nullable', 'max:25'],
+            ])
+        );
+
+        return Redirect::route('organizations')->with('success', 'Organization created.');
+    }
+}
diff --git a/app/Http/Controllers/ReportsController.php b/app/Http/Controllers/ReportsController.php
index 57a978a47..32148da51 100644
--- a/app/Http/Controllers/ReportsController.php
+++ b/app/Http/Controllers/ReportsController.php
@@ -4,11 +4,35 @@
 
 use Inertia\Inertia;
 use Inertia\Response;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Request;
 
 class ReportsController extends Controller
 {
     public function index(): Response
     {
-        return Inertia::render('Reports/Index');
+        $organizations = Auth::user()->account->organizations()
+            ->orderBy('name')
+            ->paginate(9)
+            ->withQueryString()
+            ->through(function ($organization) {
+                $contact = $organization->contacts()->first();
+                $ownerName = $contact
+                    ? ($contact->first_name . ' ' . $contact->last_name)
+                    : "N/A";
+
+                return [
+                    'id' => $organization->id,
+                    'name' => implode(' ', array_slice(explode(' ', $organization->name), 0, 2)),
+                    'phone' => $organization->phone,
+                    'city' => $organization->city,
+                    'deleted_at' => $organization->deleted_at,
+                    'owner' => $ownerName,
+                ];
+            });
+
+        return Inertia::render('Reports/Index', [
+            'organizations' => $organizations,
+        ]);
     }
 }
diff --git a/resources/js/Components/Card.vue b/resources/js/Components/Card.vue
new file mode 100644
index 000000000..4818f1ab3
--- /dev/null
+++ b/resources/js/Components/Card.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:scale-110 hover:shadow-2xl hover:bg-white bg-gradient-to-r from-indigo-900 to-indigo-800 p-2">
+    <img class="w-full h-48 object-cover  rounded" src="https://via.placeholder.com/150" alt="Placeholder Image">
+    <div class="font-bold text-xl mb-1 text-white bg-gradient-to-r from-indigo-900 to-indigo-800 text-center mt-1">{{ name }}</div>
+    <div class="px-6 py-4 bg-white rounded shadow-sm">
+
+      <p class="text-gray-700 text-base mb-2">
+        City: {{ city }}
+      </p>
+      <p class="text-gray-700 text-base mb-2">
+        Phone: {{ phone }}
+      </p>
+      <p class="text-gray-700 text-base">
+        Owner: {{ owner || 'N/A' }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    city: {
+      type: String,
+      required: true
+    },
+    phone: {
+      type: String,
+      required: true
+    },
+    owner: {
+      type: String,
+      default: 'N/A'
+    }
+  }
+}
+</script>
diff --git a/resources/js/Pages/Reports/Index.vue b/resources/js/Pages/Reports/Index.vue
index e464089cb..b7ee67123 100644
--- a/resources/js/Pages/Reports/Index.vue
+++ b/resources/js/Pages/Reports/Index.vue
@@ -2,16 +2,43 @@
   <div>
     <Head title="Reports" />
     <h1 class="mb-8 text-3xl font-bold">Reports</h1>
+    <div v-if="organizations.data.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <Card
+        v-for="organization in organizations.data"
+        :key="organization.id"
+        :id="organization.id"
+        :name="organization.name"
+        :city="organization.city"
+        :phone="organization.phone"
+        :owner="organization.owner"
+      />
+    </div>
+    <div v-else class="text-center py-4">
+      <p class="text-gray-600">No organizations found.</p>
+    </div>
+    <pagination class="mt-6" :links="organizations.links" />
   </div>
 </template>
 
 <script>
 import { Head } from '@inertiajs/vue3'
 import Layout from '@/Shared/Layout.vue'
-
+import Card from '@/Shared/Card.vue'
+import Pagination from '@/Shared/Pagination.vue'
 export default {
   components: {
     Head,
+    Pagination,
+    Card
+  },
+  props: {
+    organizations: {
+      type: Object,
+      required: true
+    }
+  },
+  mounted() {
+    console.log(this.organizations.data);
   },
   layout: Layout,
 }
diff --git a/resources/js/Shared/Card.vue b/resources/js/Shared/Card.vue
new file mode 100644
index 000000000..5363b4669
--- /dev/null
+++ b/resources/js/Shared/Card.vue
@@ -0,0 +1,46 @@
+<template>
+  <a :href="`/organizations/${id}/edit`" class="block max-w-sm rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:scale-105 hover:shadow-2xl hover:bg-indigo-600 bg-indigo-800 p-2">
+    <img class="w-full h-48 object-cover rounded" src="https://via.placeholder.com/150" alt="Placeholder Image">
+    <div class="font-bold text-xl mb-1 text-white bg-gradient-to-r from-indigo-600 to-indigo-700 text-center mt-1 rounded">{{ name }}</div>
+    <div class="px-6 py-4 bg-white rounded shadow-sm">
+      <p class="text-gray-700 text-base mb-2">
+        City: {{ city }}
+      </p>
+      <p class="text-gray-700 text-base mb-2">
+        Phone: {{ phone }}
+      </p>
+      <p class="text-gray-700 text-base">
+        Owner: {{ owner || 'N/A' }}
+      </p>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    city: {
+      type: String,
+      required: true
+    },
+    phone: {
+      type: String,
+      required: true
+    },
+    owner: {
+      type: String,
+      default: 'N/A',
+      required: true
+    }
+  }
+}
+</script>
+
diff --git a/resources/js/Shared/Icon.vue b/resources/js/Shared/Icon.vue
index 35db91a36..c38e54618 100644
--- a/resources/js/Shared/Icon.vue
+++ b/resources/js/Shared/Icon.vue
@@ -6,8 +6,10 @@
   <svg v-else-if="name === 'printer'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 16H0V6h20v10h-4v4H4v-4zm2-4v6h8v-6H6zM4 0h12v5H4V0zM2 8v2h2V8H2zm4 0v2h2V8H6z" /></svg>
   <svg v-else-if="name === 'trash'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z" /></svg>
   <svg v-else-if="name === 'users'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z" /></svg>
+  <svg v-else-if="name === 'product'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm-2-16h4v2h-4zm-1 4h6v10h-6z"/></svg>
 </template>
 
+
 <script>
 export default {
   props: {
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 365694652..3f20b7655 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -24,6 +24,12 @@
         <div :class="isUrl('reports') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Reports</div>
       </Link>
     </div>
+    <div class="mb-4">
+      <Link class="group flex items-center py-3" href="/products">
+        <icon name="product" class="mr-2 w-4 h-4" :class="isUrl('Products') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
+        <div :class="isUrl('Products') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Products</div>
+      </Link>
+    </div>
   </div>
 </template>
 
diff --git a/routes/web.php b/routes/web.php
index c59b3da54..fc3a07723 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,6 +7,7 @@
 use App\Http\Controllers\OrganizationsController;
 use App\Http\Controllers\ReportsController;
 use App\Http\Controllers\UsersController;
+use App\Http\Controllers\ProductsController;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -140,3 +141,17 @@
 Route::get('/img/{path}', [ImagesController::class, 'show'])
     ->where('path', '.*')
     ->name('image');
+
+
+
+// Products
+
+Route::get('products', [ProductsController::class, 'index'])
+    ->name('products')
+    ->middleware('auth');
+Route::get('products/create', [ProductsController::class, 'create'])
+    ->name('products.create')
+    ->middleware('auth');
+Route::post('products', [ProductsController::class, 'store'])
+    ->name('products.store')
+    ->middleware('auth');

From 9f3d5ac9b4b25fe204a576bdcd01d3b0b0b93355 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 11:01:51 +0600
Subject: [PATCH 02/45] Add Migration for Products

---
 app/Models/Product.php                        | 13 ++++++++
 ...024_08_07_045450_create_products_table.php | 31 +++++++++++++++++++
 resources/js/Shared/MainMenu.vue              |  2 +-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 app/Models/Product.php
 create mode 100644 database/migrations/2024_08_07_045450_create_products_table.php

diff --git a/app/Models/Product.php b/app/Models/Product.php
new file mode 100644
index 000000000..7de822ac1
--- /dev/null
+++ b/app/Models/Product.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Product extends Model
+{
+    use HasFactory;
+    protected $table = 'products';
+    protected $fillable = ['name', 'description', 'price', 'quantity'];
+}
diff --git a/database/migrations/2024_08_07_045450_create_products_table.php b/database/migrations/2024_08_07_045450_create_products_table.php
new file mode 100644
index 000000000..110f7f031
--- /dev/null
+++ b/database/migrations/2024_08_07_045450_create_products_table.php
@@ -0,0 +1,31 @@
+<?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('products', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->text('description');
+            $table->decimal('price', 8, 2);
+            $table->integer('quantity');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('products');
+    }
+};
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 3f20b7655..925c7499c 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -27,7 +27,7 @@
     <div class="mb-4">
       <Link class="group flex items-center py-3" href="/products">
         <icon name="product" class="mr-2 w-4 h-4" :class="isUrl('Products') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
-        <div :class="isUrl('Products') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Products</div>
+        <div :class="isUrl('products') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Products</div>
       </Link>
     </div>
   </div>

From f04b4732831bd88452ef3e771121485e7bb1f0d7 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 12:27:38 +0600
Subject: [PATCH 03/45] Add Products

---
 app/Http/Controllers/ProductsController.php | 60 ++++++++++----------
 app/Models/Product.php                      |  5 ++
 resources/js/Components/Card.vue            | 41 --------------
 resources/js/Pages/Products/Create.vue      | 57 +++++++++++++++++++
 resources/js/Pages/Products/Index.vue       | 63 +++++++++++++++++++++
 resources/js/Shared/Pagination.vue          | 12 +++-
 6 files changed, 165 insertions(+), 73 deletions(-)
 delete mode 100644 resources/js/Components/Card.vue
 create mode 100644 resources/js/Pages/Products/Create.vue
 create mode 100644 resources/js/Pages/Products/Index.vue

diff --git a/app/Http/Controllers/ProductsController.php b/app/Http/Controllers/ProductsController.php
index 6774fe85d..2dd18cb45 100644
--- a/app/Http/Controllers/ProductsController.php
+++ b/app/Http/Controllers/ProductsController.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Controllers;
 
-use App\Models\Organization;
+use App\Models\Product;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
@@ -15,43 +15,43 @@ class ProductsController extends Controller
 {
     public function index(): Response
     {
-        return Inertia::render('Organizations/Index', [
-            'filters' => Request::all('search', 'trashed'),
-            'organizations' => Auth::user()->account->organizations()
-                ->orderBy('name')
-                ->filter(Request::only('search', 'trashed'))
-                ->paginate(10)
-                ->withQueryString()
-                ->through(fn ($organization) => [
-                    'id' => $organization->id,
-                    'name' => $organization->name,
-                    'phone' => $organization->phone,
-                    'city' => $organization->city,
-                    'deleted_at' => $organization->deleted_at,
-                ]),
+        $products = Product::orderBy('name')
+            ->paginate(10)
+            ->withQueryString()
+            ->through(fn ($product) => [
+                'id' => $product->id,
+                'name' => $product->name,
+                'description' => $product->description,
+                'price' => $product->price,
+                'quantity' => $product->quantity,
+            ]);
+
+        return Inertia::render('Products/Index', [
+            'products' => $products,
         ]);
     }
 
     public function create(): Response
     {
-        return Inertia::render('Organizations/Create');
+        return Inertia::render('Products/Create');
     }
 
     public function store(): RedirectResponse
     {
-        Auth::user()->account->organizations()->create(
-            Request::validate([
-                'name' => ['required', 'max:100'],
-                'email' => ['nullable', 'max:50', 'email'],
-                'phone' => ['nullable', 'max:50'],
-                'address' => ['nullable', 'max:150'],
-                'city' => ['nullable', 'max:50'],
-                'region' => ['nullable', 'max:50'],
-                'country' => ['nullable', 'max:2'],
-                'postal_code' => ['nullable', 'max:25'],
-            ])
-        );
-
-        return Redirect::route('organizations')->with('success', 'Organization created.');
+        Request::validate([
+            'name' => ['required', 'max:50'],
+            'description' => ['required', 'max:255'],
+            'price' => ['required', 'numeric'],
+            'quantity' => ['required', 'numeric'],
+        ]);
+
+        Product::create([
+            'name' => Request::get('name'),
+            'description' => Request::get('description'),
+            'price' => Request::get('price'),
+            'quantity' => Request::get('quantity'),
+        ]);
+
+        return Redirect::route('products')->with('success', 'Product created.');
     }
 }
diff --git a/app/Models/Product.php b/app/Models/Product.php
index 7de822ac1..e0077388e 100644
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@@ -10,4 +10,9 @@ class Product extends Model
     use HasFactory;
     protected $table = 'products';
     protected $fillable = ['name', 'description', 'price', 'quantity'];
+
+    public function resolveRouteBinding($value, $field = null)
+    {
+        return $this->where($field ?? 'id', $value)->firstOrFail();
+    }
 }
diff --git a/resources/js/Components/Card.vue b/resources/js/Components/Card.vue
deleted file mode 100644
index 4818f1ab3..000000000
--- a/resources/js/Components/Card.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:scale-110 hover:shadow-2xl hover:bg-white bg-gradient-to-r from-indigo-900 to-indigo-800 p-2">
-    <img class="w-full h-48 object-cover  rounded" src="https://via.placeholder.com/150" alt="Placeholder Image">
-    <div class="font-bold text-xl mb-1 text-white bg-gradient-to-r from-indigo-900 to-indigo-800 text-center mt-1">{{ name }}</div>
-    <div class="px-6 py-4 bg-white rounded shadow-sm">
-
-      <p class="text-gray-700 text-base mb-2">
-        City: {{ city }}
-      </p>
-      <p class="text-gray-700 text-base mb-2">
-        Phone: {{ phone }}
-      </p>
-      <p class="text-gray-700 text-base">
-        Owner: {{ owner || 'N/A' }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    city: {
-      type: String,
-      required: true
-    },
-    phone: {
-      type: String,
-      required: true
-    },
-    owner: {
-      type: String,
-      default: 'N/A'
-    }
-  }
-}
-</script>
diff --git a/resources/js/Pages/Products/Create.vue b/resources/js/Pages/Products/Create.vue
new file mode 100644
index 000000000..690ba368c
--- /dev/null
+++ b/resources/js/Pages/Products/Create.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Head title="Create Product" />
+    <h1 class="mb-8 text-3xl font-bold">
+      <Link class="text-indigo-400 hover:text-indigo-600" href="/products">Products</Link>
+      <span class="text-indigo-400 font-medium">/</span> Create
+    </h1>
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
+      <form @submit.prevent="store">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.name" :error="form.errors.name" class="pb-8 pr-6 w-full lg:w-1/2" label="Name" />
+          <text-input v-model="form.description" :error="form.errors.description" class="pb-8 pr-6 w-full lg:w-1/2" label="Description" />
+          <text-input v-model="form.price" :error="form.errors.price" class="pb-8 pr-6 w-full lg:w-1/2" label="Price" />
+          <text-input v-model="form.quantity" :error="form.errors.quantity" class="pb-8 pr-6 w-full lg:w-1/2" label="Quantity" />
+        </div>
+        <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
+          <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Product</loading-button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Head, Link } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+
+export default {
+  components: {
+    Head,
+    Link,
+    LoadingButton,
+    SelectInput,
+    TextInput,
+  },
+  layout: Layout,
+  remember: 'form',
+  data() {
+    return {
+      form: this.$inertia.form({
+        name: null,
+        description: null,
+        price: null,
+        quantity: null,
+      }),
+    }
+  },
+  methods: {
+    store() {
+      this.form.post('/products')
+    },
+  },
+}
+</script>
diff --git a/resources/js/Pages/Products/Index.vue b/resources/js/Pages/Products/Index.vue
new file mode 100644
index 000000000..c7f6fa5f9
--- /dev/null
+++ b/resources/js/Pages/Products/Index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <Head title="Products" />
+    <h1 class="mb-8 text-3xl font-bold">Products</h1>
+    <div class="flex items-center justify-between mb-6">
+      <!-- <search-filter v-model="form.search" class="mr-4 w-full max-w-md" @reset="reset">
+        <label class="block text-gray-700">Trashed:</label>
+        <select v-model="form.trashed" class="form-select mt-1 w-full">
+          <option :value="null" />
+          <option value="with">With Trashed</option>
+          <option value="only">Only Trashed</option>
+        </select>
+      </search-filter> -->
+      <Link class="btn-indigo" href="/products/create">
+        <span>Create</span>
+        <span class="hidden md:inline">&nbsp;Organization</span>
+      </Link>
+    </div>
+    <div class="bg-white rounded-md shadow overflow-x-auto">
+      <table class="w-full whitespace-nowrap">
+        <thead>
+          <tr class="text-left font-bold">
+            <th class="pb-4 pt-6 px-6">Name</th>
+            <th class="pb-4 pt-6 px-6">Description</th>
+            <th class="pb-4 pt-6 px-6">Price</th>
+            <th class="pb-4 pt-6 px-6">Quantity</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="product in products.data" :key="product.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
+            <td class="border-t px-6 py-4">{{ product.name }}</td>
+            <td class="border-t px-6 py-4">{{ product.description }}</td>
+            <td class="border-t px-6 py-4">৳{{ product.price }}</td>
+            <td class="border-t px-6 py-4">{{ product.quantity }}</td>
+          </tr>
+          <tr v-if="products.data.length === 0">
+            <td class="px-6 py-4 border-t" colspan="4">No products found.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <pagination class="mt-6" :links="products.links" />
+  </div>
+</template>
+
+<script>
+import { Head, Link } from '@inertiajs/vue3'
+import Pagination from '@/Shared/Pagination.vue'
+import Layout from '@/Shared/Layout.vue'
+
+
+export default {
+  components: {
+    Head,
+    Link,
+    Pagination,
+  },
+  props: {
+    products: Object,
+  },
+  layout: Layout,
+}
+</script>
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
index 7eb3e644b..72c566819 100644
--- a/resources/js/Shared/Pagination.vue
+++ b/resources/js/Shared/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="links.length > 3">
+  <div v-if="links && links.length > 0">
     <div class="flex flex-wrap -mb-1">
       <template v-for="(link, key) in links">
         <div v-if="link.url === null" :key="key" class="mb-1 mr-1 px-4 py-3 text-gray-400 text-sm leading-4 border rounded" v-html="link.label" />
@@ -17,7 +17,15 @@ export default {
     Link,
   },
   props: {
-    links: Array,
+    links: {
+      type: Array,
+      default: () => []
+    },
   },
 }
 </script>
+
+<style scoped>
+/* Add any specific styles here */
+</style>
+

From 1721993fec3c332e8051853d6f54f9aad8570d19 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 13:08:49 +0600
Subject: [PATCH 04/45] Add Search & Edit Product

---
 app/Http/Controllers/ProductsController.php | 58 +++++++++++------
 resources/js/Pages/Products/Edit.vue        | 70 +++++++++++++++++++++
 resources/js/Pages/Products/Index.vue       | 44 ++++++++++---
 routes/web.php                              |  7 +++
 4 files changed, 149 insertions(+), 30 deletions(-)
 create mode 100644 resources/js/Pages/Products/Edit.vue

diff --git a/app/Http/Controllers/ProductsController.php b/app/Http/Controllers/ProductsController.php
index 2dd18cb45..634d33bd3 100644
--- a/app/Http/Controllers/ProductsController.php
+++ b/app/Http/Controllers/ProductsController.php
@@ -6,52 +6,70 @@
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
-use Illuminate\Support\Facades\Request;
+// use Illuminate\Support\Facades\Request;
 use Inertia\Inertia;
 use Inertia\Response;
+use Illuminate\Http\Request;
 
 
 class ProductsController extends Controller
 {
-    public function index(): Response
+    public function index(Request $request): Response
     {
-        $products = Product::orderBy('name')
-            ->paginate(10)
-            ->withQueryString()
-            ->through(fn ($product) => [
-                'id' => $product->id,
-                'name' => $product->name,
-                'description' => $product->description,
-                'price' => $product->price,
-                'quantity' => $product->quantity,
-            ]);
+        $query = Product::query();
+
+        if ($request->has('search') && $search = $request->input('search')) {
+            $query->where('name', 'like', "%{$search}%");
+        }
+
+        $products = $query->paginate(10);
+
+        // Manually add query string to pagination links
+        $products->appends(['search' => $request->input('search')]);
 
         return Inertia::render('Products/Index', [
             'products' => $products,
         ]);
     }
 
+
     public function create(): Response
     {
         return Inertia::render('Products/Create');
     }
 
-    public function store(): RedirectResponse
+    public function store(Request $request): RedirectResponse
     {
-        Request::validate([
+        $validateData = $request->validate([
             'name' => ['required', 'max:50'],
             'description' => ['required', 'max:255'],
             'price' => ['required', 'numeric'],
             'quantity' => ['required', 'numeric'],
         ]);
 
-        Product::create([
-            'name' => Request::get('name'),
-            'description' => Request::get('description'),
-            'price' => Request::get('price'),
-            'quantity' => Request::get('quantity'),
-        ]);
+        Product::create($validateData);
 
         return Redirect::route('products')->with('success', 'Product created.');
     }
+
+    public function edit(Product $product): Response
+    {
+        return Inertia::render('Products/Edit', [
+            'product' => $product,
+        ]);
+    }
+
+    public function update(Product $product): RedirectResponse
+    {
+        $validateData = request()->validate([
+            'name' => ['required', 'max:50'],
+            'description' => ['required', 'max:255'],
+            'price' => ['required', 'numeric'],
+            'quantity' => ['required', 'numeric'],
+        ]);
+
+        $product->update($validateData);
+
+        return Redirect::back()->with('success', 'Product updated.');
+    }
 }
diff --git a/resources/js/Pages/Products/Edit.vue b/resources/js/Pages/Products/Edit.vue
new file mode 100644
index 000000000..49c068621
--- /dev/null
+++ b/resources/js/Pages/Products/Edit.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <Head title="Edit Product" />
+    <h1 class="mb-8 text-3xl font-bold">
+      <Link class="text-indigo-400 hover:text-indigo-600" href="/products">Products</Link>
+      <span class="text-indigo-400 font-medium">/</span> Edit
+    </h1>
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
+      <form @submit.prevent="update">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.name" :error="form.errors.name" class="pb-8 pr-6 w-full lg:w-1/2" label="Name" />
+          <text-input v-model="form.description" :error="form.errors.description" class="pb-8 pr-6 w-full lg:w-1/2" label="Description" />
+          <text-input v-model="form.price" :error="form.errors.price" class="pb-8 pr-6 w-full lg:w-1/2" label="Price" />
+          <text-input v-model="form.quantity" :error="form.errors.quantity" class="pb-8 pr-6 w-full lg:w-1/2" label="Quantity" />
+        </div>
+        <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
+          <loading-button :loading="form.processing" class="btn-indigo" type="submit">Update Product</loading-button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Head, Link } from '@inertiajs/vue3'
+import TextInput from '@/Shared/TextInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+import Layout from '@/Shared/Layout.vue'
+
+export default {
+  components: {
+    Head,
+    Link,
+    TextInput,
+    LoadingButton,
+  },
+  layout: Layout,
+  props: {
+    product: Object, // Receive the product data as a prop
+  },
+  data() {
+    return {
+      form: {
+        name: this.product.name,
+        description: this.product.description,
+        price: this.product.price,
+        quantity: this.product.quantity,
+        errors: {},
+        processing: false,
+      },
+    }
+  },
+  methods: {
+    async update() {
+      this.form.processing = true
+      try {
+        await this.$inertia.put(`/products/${this.product.id}`, this.form)
+      } catch (e) {
+        this.form.errors = e.response.data.errors
+      } finally {
+        this.form.processing = false
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+/* Add any specific styles here */
+</style>
diff --git a/resources/js/Pages/Products/Index.vue b/resources/js/Pages/Products/Index.vue
index c7f6fa5f9..c2c24ef3c 100644
--- a/resources/js/Pages/Products/Index.vue
+++ b/resources/js/Pages/Products/Index.vue
@@ -3,17 +3,19 @@
     <Head title="Products" />
     <h1 class="mb-8 text-3xl font-bold">Products</h1>
     <div class="flex items-center justify-between mb-6">
-      <!-- <search-filter v-model="form.search" class="mr-4 w-full max-w-md" @reset="reset">
-        <label class="block text-gray-700">Trashed:</label>
-        <select v-model="form.trashed" class="form-select mt-1 w-full">
-          <option :value="null" />
-          <option value="with">With Trashed</option>
-          <option value="only">Only Trashed</option>
-        </select>
-      </search-filter> -->
+      <!-- Search Field -->
+      <div class="flex-1 max-w-md mr-4">
+        <input
+          type="search"
+          v-model="search"
+          placeholder="Search products..."
+          class="form-input w-1/2 px-4 py-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+        />
+      </div>
+      <!-- Create Button -->
       <Link class="btn-indigo" href="/products/create">
         <span>Create</span>
-        <span class="hidden md:inline">&nbsp;Organization</span>
+        <span class="hidden md:inline">&nbsp;Product</span>
       </Link>
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto">
@@ -32,6 +34,11 @@
             <td class="border-t px-6 py-4">{{ product.description }}</td>
             <td class="border-t px-6 py-4">৳{{ product.price }}</td>
             <td class="border-t px-6 py-4">{{ product.quantity }}</td>
+            <td class="w-px border-t">
+              <Link class="flex items-center px-4" :href="`/products/${product.id}/edit`" tabindex="-1">
+                <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
+              </Link>
+            </td>
           </tr>
           <tr v-if="products.data.length === 0">
             <td class="px-6 py-4 border-t" colspan="4">No products found.</td>
@@ -45,19 +52,36 @@
 
 <script>
 import { Head, Link } from '@inertiajs/vue3'
-import Pagination from '@/Shared/Pagination.vue'
+import Icon from '@/Shared/Icon.vue'
+import pickBy from 'lodash/pickBy'
 import Layout from '@/Shared/Layout.vue'
+import throttle from 'lodash/throttle'
+import mapValues from 'lodash/mapValues'
+import Pagination from '@/Shared/Pagination.vue'
+import SearchFilter from '@/Shared/SearchFilter.vue'
 
 
 export default {
   components: {
     Head,
+    Icon,
     Link,
     Pagination,
+    SearchFilter
   },
   props: {
     products: Object,
   },
   layout: Layout,
+  data() {
+    return {
+      search: '',
+    }
+  },
+  watch: {
+    search(newSearch) {
+      this.$inertia.get('/products', { search: newSearch }, { preserveState: true });
+    },
+  },
 }
 </script>
diff --git a/routes/web.php b/routes/web.php
index fc3a07723..8e474a114 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -155,3 +155,10 @@
 Route::post('products', [ProductsController::class, 'store'])
     ->name('products.store')
     ->middleware('auth');
+Route::get('products/{product}/edit', [ProductsController::class, 'edit'])
+    ->name('products.edit')
+    ->middleware('auth');
+
+Route::put('products/{product}', [ProductsController::class, 'update'])
+    ->name('products.update')
+    ->middleware('auth');

From df69579a0e7f855cf730f20a562f9314ea9a0bc0 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 13:32:21 +0600
Subject: [PATCH 05/45] Add Migration for Invoice

---
 app/Models/Invoice.php                        | 13 ++++++++
 ...024_08_07_071222_create_invoices_table.php | 31 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 app/Models/Invoice.php
 create mode 100644 database/migrations/2024_08_07_071222_create_invoices_table.php

diff --git a/app/Models/Invoice.php b/app/Models/Invoice.php
new file mode 100644
index 000000000..dc95336ee
--- /dev/null
+++ b/app/Models/Invoice.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Invoice extends Model
+{
+    use HasFactory;
+    protected $table = 'invoices';
+    protected $fillable = ['number', 'amount', 'organization_id', 'contact_id'];
+}
diff --git a/database/migrations/2024_08_07_071222_create_invoices_table.php b/database/migrations/2024_08_07_071222_create_invoices_table.php
new file mode 100644
index 000000000..92477952e
--- /dev/null
+++ b/database/migrations/2024_08_07_071222_create_invoices_table.php
@@ -0,0 +1,31 @@
+<?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('invoices', function (Blueprint $table) {
+            $table->id();
+            $table->string('number');
+            $table->decimal('amount', 15, 2);
+            $table->integer('organization_id');
+            $table->integer('contact_id');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('invoices');
+    }
+};

From eec492d98082ba6b926b1ab9ad1877b4f5ebf40e Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 16:26:48 +0600
Subject: [PATCH 06/45] Add Create Invoice

---
 app/Http/Controllers/InvoicesController.php |  62 +++++++
 app/Http/Controllers/ProductsController.php |   1 -
 app/Models/Invoice.php                      |   5 +
 package-lock.json                           |  23 +--
 package.json                                |   3 +
 resources/js/Pages/Invoices/Create.vue      | 172 ++++++++++++++++++++
 resources/js/Pages/Invoices/Index.vue       |  95 +++++++++++
 resources/js/Shared/Icon.vue                |   4 +
 resources/js/Shared/MainMenu.vue            |   7 +
 routes/web.php                              |  16 ++
 10 files changed, 372 insertions(+), 16 deletions(-)
 create mode 100644 app/Http/Controllers/InvoicesController.php
 create mode 100644 resources/js/Pages/Invoices/Create.vue
 create mode 100644 resources/js/Pages/Invoices/Index.vue

diff --git a/app/Http/Controllers/InvoicesController.php b/app/Http/Controllers/InvoicesController.php
new file mode 100644
index 000000000..170797e1f
--- /dev/null
+++ b/app/Http/Controllers/InvoicesController.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Invoice;
+use App\Models\Contact;
+use App\Models\Product;
+use Inertia\Inertia;
+use Inertia\Response;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
+
+class InvoicesController extends Controller
+{
+    public function index(Request $request)
+    {
+        $query = Invoice::query();
+
+        if ($request->has('search') && $search = $request->input('search')) {
+            $query->where('number', 'like', "%{$search}%");
+        }
+
+        $invoices = $query->paginate(10);
+
+        $invoices->appends(['search' => $request->input('search')]);
+
+        return Inertia::render('Invoices/Index', [
+            'invoices' => $invoices,
+        ]);
+    }
+
+    public function create(): Response
+    {
+        return Inertia::render('Invoices/Create', [
+            'organizations' => Auth::user()->account->organizations()
+                ->get()
+                ->map
+                ->only('id', 'name'),
+            'products' => Product::all(['id', 'name', 'price']),
+        ]);
+    }
+
+    public function getContacts($organizationId)
+    {
+        $contacts = Contact::where('organization_id', $organizationId)->get(['id', 'first_name', 'last_name', 'phone', 'email']);
+        Log::info($contacts);
+        return response()->json($contacts);
+    }
+
+    public function store(Request $request)
+    {
+        $invoice = Invoice::create([
+            'number' => $request->number,
+            'amount' => $request->amount,
+            'organization_id' => $request->organization_id,
+            'contact_id' => $request->contact_id,
+        ]);
+
+        return redirect()->route('invoices')->with('success', 'Invoice created.');
+    }
+}
diff --git a/app/Http/Controllers/ProductsController.php b/app/Http/Controllers/ProductsController.php
index 634d33bd3..31ba90f65 100644
--- a/app/Http/Controllers/ProductsController.php
+++ b/app/Http/Controllers/ProductsController.php
@@ -6,7 +6,6 @@
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
-// use Illuminate\Support\Facades\Request;
 use Inertia\Inertia;
 use Inertia\Response;
 use Illuminate\Http\Request;
diff --git a/app/Models/Invoice.php b/app/Models/Invoice.php
index dc95336ee..1f2c03781 100644
--- a/app/Models/Invoice.php
+++ b/app/Models/Invoice.php
@@ -10,4 +10,9 @@ class Invoice extends Model
     use HasFactory;
     protected $table = 'invoices';
     protected $fillable = ['number', 'amount', 'organization_id', 'contact_id'];
+
+    public function resolveRouteBinding($value, $field = null)
+    {
+        return $this->where($field ?? 'id', $value)->firstOrFail();
+    }
 }
diff --git a/package-lock.json b/package-lock.json
index 490a24aa6..20ce51495 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,7 +4,9 @@
     "requires": true,
     "packages": {
         "": {
-            "name": "pingcrm",
+            "dependencies": {
+                "axios": "^1.7.3"
+            },
             "devDependencies": {
                 "@inertiajs/vue3": "^1.0.15",
                 "@popperjs/core": "^2.11.0",
@@ -1102,8 +1104,7 @@
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-            "dev": true
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
         },
         "node_modules/autoprefixer": {
             "version": "10.4.19",
@@ -1143,10 +1144,9 @@
             }
         },
         "node_modules/axios": {
-            "version": "1.6.8",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-            "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
-            "dev": true,
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+            "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
             "dependencies": {
                 "follow-redirects": "^1.15.6",
                 "form-data": "^4.0.0",
@@ -1363,7 +1363,6 @@
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
             "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-            "dev": true,
             "dependencies": {
                 "delayed-stream": "~1.0.0"
             },
@@ -1471,7 +1470,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
             "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-            "dev": true,
             "engines": {
                 "node": ">=0.4.0"
             }
@@ -1925,7 +1923,6 @@
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
             "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-            "dev": true,
             "funding": [
                 {
                     "type": "individual",
@@ -1961,7 +1958,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
             "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-            "dev": true,
             "dependencies": {
                 "asynckit": "^0.4.0",
                 "combined-stream": "^1.0.8",
@@ -2485,7 +2481,6 @@
             "version": "1.52.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
             "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-            "dev": true,
             "engines": {
                 "node": ">= 0.6"
             }
@@ -2494,7 +2489,6 @@
             "version": "2.1.35",
             "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
             "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-            "dev": true,
             "dependencies": {
                 "mime-db": "1.52.0"
             },
@@ -2984,8 +2978,7 @@
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-            "dev": true
+            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
         },
         "node_modules/punycode": {
             "version": "2.3.1",
diff --git a/package.json b/package.json
index 69da4712e..b673158eb 100644
--- a/package.json
+++ b/package.json
@@ -27,5 +27,8 @@
         "uuid": "^8.3.2",
         "vite": "^5.2.7",
         "vue": "^3.2.27"
+    },
+    "dependencies": {
+        "axios": "^1.7.3"
     }
 }
diff --git a/resources/js/Pages/Invoices/Create.vue b/resources/js/Pages/Invoices/Create.vue
new file mode 100644
index 000000000..924366f27
--- /dev/null
+++ b/resources/js/Pages/Invoices/Create.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <Head title="Create Invoice" />
+    <h1 class="mb-8 text-3xl font-bold">
+      <Link class="text-indigo-400 hover:text-indigo-600" href="/invoices">Invoices</Link>
+      <span class="text-indigo-400 font-medium">/</span> Create
+    </h1>
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
+      <form @submit.prevent="store">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <!-- Organization Dropdown -->
+          <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Organization">
+            <option v-for="org in organizations" :key="org.id" :value="org.id">{{ org.name }}</option>
+          </select-input>
+
+          <!-- Contact Dropdown -->
+          <select-input v-model="form.contact_id" :error="form.errors.contact_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Contact">
+            <option v-for="contact in contacts" :key="contact.id" :value="contact.id">{{ contact.first_name + " " + contact.last_name}}</option>
+          </select-input>
+
+          <!-- Product Dropdown -->
+         <select-input v-model="form.product_id" :error="form.errors.product_id" class="pb-8 pr-6 w-full lg:w-full" label="Product">
+            <option value="" >Select a product</option>
+            <option v-for="product in availableProducts" :key="product.id" :value="product.id">{{ product.name }}</option>
+          </select-input>
+        </div>
+
+        <!-- Products Table -->
+        <div class="overflow-x-auto">
+          <hr>
+          <div v-if="form.organization_id && form.contact_id" class="px-8 py-4">
+            <h1 class="text-xl font-bold text-center">Invoice</h1>
+            <p class="text-lg font-semibold text-center">Organization: {{ organizations.find(org => org.id === form.organization_id).name }}</p>
+            <p class="text-lg font-semibold text-center">Contact: {{ contacts.find(contact => contact.id === form.contact_id).first_name + " " + contacts.find(contact => contact.id === form.contact_id).last_name }}</p>
+            <p class="text-sm font-italic text-center">{{ contacts.find(contact => contact.id === form.contact_id).phone }} | {{ contacts.find(contact => contact.id === form.contact_id).email }}</p>
+          </div>
+          <table v-if="addedProducts.length > 0" class="w-full whitespace-nowrap">
+            <thead>
+              <tr>
+                <th class="pb-4 pt-6 px-6">Product</th>
+                <th class="pb-4 pt-6 px-6">Price</th>
+                <th class="pb-4 pt-6 px-6">Quantity</th>
+                <th class="pb-4 pt-6 px-6">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(product, index) in addedProducts" :key="index" class="hover:bg-gray-100 focus-within:bg-gray-100 text-center">
+                <td class="border-t px-6 py-4">{{ product.name }}</td>
+                <td class="border-t px-6 py-4">৳{{ product.price }}</td>
+                <td class="border-t px-6 py-4">
+                  <input type="number" v-model="product.quantity" min="1" class="form-input w-16 mx-auto text-center" />
+                </td>
+                <td class="border-t px-6 py-4">
+                  <button @click="removeProduct(index)" class="text-red-500 hover:text-red-700">Remove</button>
+                </td>
+              </tr>
+              <tr v-if="addedProducts.length === 0">
+                <td class="px-6 py-4 border-t" colspan="4">No products added.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <!-- Total Amount -->
+          <div v-if="addedProducts.length > 0" class="flex justify-end px-8 py-4">
+            <div class="font-bold text-lg">Total Amount: ৳{{ totalAmount }}</div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
+          <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Invoice</loading-button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Head, Link } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+import axios from 'axios'
+
+export default {
+  components: {
+    Head,
+    Link,
+    LoadingButton,
+    SelectInput,
+    TextInput,
+  },
+  layout: Layout,
+  props: {
+    organizations: Array,
+    products: Array,
+  },
+  data() {
+    return {
+      form: this.$inertia.form({
+        organization_id: null,
+        contact_id: null,
+        product_id: null,
+        number: null,
+        amount: null,
+        added_products: [] // List of products added to the invoice
+      }),
+      contacts: [],
+      addedProducts: [], // List of products added to the invoice
+    }
+  },
+  computed: {
+    availableProducts() {
+      // Filter out the products that have already been added to the invoice
+      return this.products.filter(product => !this.addedProducts.some(p => p.id === product.id))
+    },
+    totalAmount() {
+      // Calculate the total amount based on added products and their quantities
+      return this.addedProducts.reduce((total, product) => total + (product.price * product.quantity), 0)
+    }
+  },
+  watch: {
+    'form.organization_id': async function(newOrgId) {
+      if (newOrgId) {
+        try {
+          const response = await axios.get(`/organizations/${newOrgId}/contacts`)
+          this.contacts = response.data
+        } catch (error) {
+          console.error('Failed to fetch contacts:', error)
+        }
+      } else {
+        this.contacts = []
+      }
+    },
+    'form.product_id': function(newProductId) {
+      if (newProductId) {
+        const selectedProduct = this.products.find(p => p.id === newProductId)
+        if (selectedProduct && !this.addedProducts.some(p => p.id === selectedProduct.id)) {
+          this.addedProducts.push({ ...selectedProduct, quantity: 1 }) // Add product with default quantity
+          this.form.product_id = null // Reset the product dropdown
+        }
+      }
+    },
+    addedProducts: {
+      handler(newProducts) {
+        // Update form's added_products field whenever addedProducts changes
+        this.form.added_products = newProducts
+      },
+      deep: true
+    }
+  },
+  methods: {
+    store() {
+      this.form.number = Math.floor(Math.random() * 90000) + 10000; // Generate a random invoice number
+      this.form.amount = this.totalAmount; // Set the total amount in the form
+
+      this.form.post('/invoices')
+        .then(() => {
+          // Reset added products after successful creation
+          this.addedProducts = []
+        })
+        .catch(error => {
+          console.error('Failed to create invoice:', error)
+        })
+    },
+    removeProduct(index) {
+      this.addedProducts.splice(index, 1) // Remove product from the list
+    }
+  }
+}
+</script>
+
diff --git a/resources/js/Pages/Invoices/Index.vue b/resources/js/Pages/Invoices/Index.vue
new file mode 100644
index 000000000..ef923b269
--- /dev/null
+++ b/resources/js/Pages/Invoices/Index.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <Head title="Invoices" />
+    <h1 class="mb-8 text-3xl font-bold">Invoices</h1>
+    <div class="flex items-center justify-between mb-6">
+      <!-- Search Field -->
+      <div class="flex-1 max-w-md mr-4">
+        <input
+          type="search"
+          v-model="search"
+          placeholder="Search invoices..."
+          class="form-input w-1/2 px-4 py-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+        />
+      </div>
+      <!-- Create Button -->
+      <Link class="btn-indigo" href="/invoices/create">
+        <span>Create</span>
+        <span class="hidden md:inline">&nbsp;Invoice</span>
+      </Link>
+    </div>
+    <div class="bg-white rounded-md shadow overflow-x-auto">
+      <table class="w-full whitespace-nowrap">
+        <thead>
+          <tr class="text-left font-bold">
+            <th class="pb-4 pt-6 px-6">Number</th>
+            <th class="pb-4 pt-6 px-6">Amount</th>
+            <th class="pb-4 pt-6 px-6">Organization</th>
+            <th class="pb-4 pt-6 px-6">Contact</th>
+            <th class="pb-4 pt-6 px-6" colspan="2">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="invoice in invoices.data" :key="invoice.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
+            <td class="border-t px-6 py-4">{{ invoice.number }}</td>
+            <td class="border-t px-6 py-4">৳{{ invoice.amount }}</td>
+            <td class="border-t px-6 py-4">{{ invoice.organization.name }}</td>
+            <!-- <td class="border-t px-6 py-4">{{ invoice.contact.name }}</td> -->
+            <td class="w-px border-t">
+              <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}/edit`" tabindex="-1">
+                <icon name="edit" class="block w-6 h-6 fill-gray-400" />
+              </Link>
+            </td>
+            <td class="w-px border-t">
+              <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}`" tabindex="-1">
+                <icon name="view" class="block w-6 h-6 fill-gray-400" />
+              </Link>
+            </td>
+          </tr>
+          <tr v-if="invoices.data.length === 0">
+            <td class="px-6 py-4 border-t" colspan="6">No invoices found.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <pagination class="mt-6" :links="invoices.links" />
+  </div>
+</template>
+
+<script>
+import { Head, Link } from '@inertiajs/vue3'
+import Icon from '@/Shared/Icon.vue'
+import Layout from '@/Shared/Layout.vue'
+import Pagination from '@/Shared/Pagination.vue'
+import SearchFilter from '@/Shared/SearchFilter.vue'
+
+export default {
+  components: {
+    Head,
+    Icon,
+    Link,
+    Pagination,
+    SearchFilter
+  },
+  props: {
+    invoices: Object,
+  },
+  layout: Layout,
+  data() {
+    return {
+      search: '',
+    }
+  },
+  watch: {
+    search(newSearch) {
+      this.$inertia.get('/invoices', { search: newSearch }, { preserveState: true });
+    },
+  },
+
+  //console log invoices on startup
+  mounted() {
+    console.log(this.invoices)
+  }
+
+}
+</script>
diff --git a/resources/js/Shared/Icon.vue b/resources/js/Shared/Icon.vue
index c38e54618..4b6e4467d 100644
--- a/resources/js/Shared/Icon.vue
+++ b/resources/js/Shared/Icon.vue
@@ -7,6 +7,10 @@
   <svg v-else-if="name === 'trash'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z" /></svg>
   <svg v-else-if="name === 'users'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z" /></svg>
   <svg v-else-if="name === 'product'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm-2-16h4v2h-4zm-1 4h6v10h-6z"/></svg>
+  <svg v-else-if="name === 'invoice'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M16 2H8C6.343 2 5 3.343 5 5v14c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3V5c0-1.657-1.343-3-3-3zM8 4h8c.553 0 1 .447 1 1v2H7V5c0-.553.447-1 1-1zm9 13H7v-2h10v2zm0-4H7v-2h10v2zm-1-8h-8v2h8V5z"/>
+</svg>
+
 </template>
 
 
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 925c7499c..1aab5c535 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -30,6 +30,13 @@
         <div :class="isUrl('products') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Products</div>
       </Link>
     </div>
+    <div class="mb-4">
+  <Link class="group flex items-center py-3" href="/invoices">
+    <icon name="invoice" class="mr-2 w-4 h-4" :class="isUrl('Invoices') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
+    <div :class="isUrl('invoices') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Invoices</div>
+  </Link>
+</div>
+
   </div>
 </template>
 
diff --git a/routes/web.php b/routes/web.php
index 8e474a114..c99b1f513 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,6 +8,7 @@
 use App\Http\Controllers\ReportsController;
 use App\Http\Controllers\UsersController;
 use App\Http\Controllers\ProductsController;
+use App\Http\Controllers\InvoicesController;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -162,3 +163,18 @@
 Route::put('products/{product}', [ProductsController::class, 'update'])
     ->name('products.update')
     ->middleware('auth');
+
+
+// Invoices
+Route::get('invoices', [InvoicesController::class, 'index'])
+    ->name('invoices')
+    ->middleware('auth');
+Route::get('invoices/create', [InvoicesController::class, 'create'])
+    ->name('invoices.create')
+    ->middleware('auth');
+Route::post('invoices', [InvoicesController::class, 'store'])
+    ->name('invoices.store')
+    ->middleware('auth');
+Route::get('organizations/{organizationId}/contacts', [InvoicesController::class, 'getContacts'])
+    ->name('organizations.contacts')
+    ->middleware('auth');

From c845b957b08ab0d44765820be4a312be66c21ea9 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 17:36:40 +0600
Subject: [PATCH 07/45] Add Save Invoice with Pdf

---
 app/Http/Controllers/InvoicesController.php   |  26 ++-
 app/Models/Invoice.php                        |   5 -
 ...nization_and_contact_to_invoices_table.php |  30 +++
 package-lock.json                             | 212 +++++++++++++++++-
 package.json                                  |   3 +-
 resources/js/Pages/Invoices/Create.vue        |  95 +++++---
 resources/js/Pages/Invoices/Index.vue         |  14 +-
 7 files changed, 332 insertions(+), 53 deletions(-)
 create mode 100644 database/migrations/2024_08_07_102758_add_ogranization_and_contact_to_invoices_table.php

diff --git a/app/Http/Controllers/InvoicesController.php b/app/Http/Controllers/InvoicesController.php
index 170797e1f..bfc66403a 100644
--- a/app/Http/Controllers/InvoicesController.php
+++ b/app/Http/Controllers/InvoicesController.php
@@ -5,6 +5,7 @@
 use Illuminate\Http\Request;
 use App\Models\Invoice;
 use App\Models\Contact;
+use App\Models\Organization;
 use App\Models\Product;
 use Inertia\Inertia;
 use Inertia\Response;
@@ -37,7 +38,7 @@ public function create(): Response
                 ->get()
                 ->map
                 ->only('id', 'name'),
-            'products' => Product::all(['id', 'name', 'price']),
+            'products' => Product::all(['id', 'name', 'price', 'quantity']),
         ]);
     }
 
@@ -50,13 +51,34 @@ public function getContacts($organizationId)
 
     public function store(Request $request)
     {
+        $request->validate([
+            'number' => 'required',
+            'amount' => 'required',
+            'organization_id' => 'required|exists:organizations,id',
+            'contact_id' => 'required|exists:contacts,id',
+            'added_products' => 'required|array',
+            'added_products.*.id' => 'required|exists:products,id',
+            'added_products.*.quantity' => 'required|integer|min:1',
+        ]);
+
+        $organization = Organization::findOrFail($request->organization_id);
+        $contact = Contact::findOrFail($request->contact_id);
+
         $invoice = Invoice::create([
             'number' => $request->number,
             'amount' => $request->amount,
             'organization_id' => $request->organization_id,
             'contact_id' => $request->contact_id,
+            'organization_name' => $organization->name,
+            'contact_first_name' => $contact->first_name,
+            'contact_last_name' => $contact->last_name,
         ]);
 
-        return redirect()->route('invoices')->with('success', 'Invoice created.');
+        foreach ($request->added_products as $productData) {
+            $product = Product::findOrFail($productData['id']);
+            $product->decrement('quantity', $productData['quantity0']);
+        }
+
+        return redirect()->route('invoices')->with('success', 'Invoice created successfully.');
     }
 }
diff --git a/app/Models/Invoice.php b/app/Models/Invoice.php
index 1f2c03781..dc95336ee 100644
--- a/app/Models/Invoice.php
+++ b/app/Models/Invoice.php
@@ -10,9 +10,4 @@ class Invoice extends Model
     use HasFactory;
     protected $table = 'invoices';
     protected $fillable = ['number', 'amount', 'organization_id', 'contact_id'];
-
-    public function resolveRouteBinding($value, $field = null)
-    {
-        return $this->where($field ?? 'id', $value)->firstOrFail();
-    }
 }
diff --git a/database/migrations/2024_08_07_102758_add_ogranization_and_contact_to_invoices_table.php b/database/migrations/2024_08_07_102758_add_ogranization_and_contact_to_invoices_table.php
new file mode 100644
index 000000000..bbd9888cd
--- /dev/null
+++ b/database/migrations/2024_08_07_102758_add_ogranization_and_contact_to_invoices_table.php
@@ -0,0 +1,30 @@
+<?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::table('invoices', function (Blueprint $table) {
+            $table->string('organization_name')->after('amount');
+            $table->string('contact_first_name')->after('organization_name');
+            $table->string('contact_last_name')->after('contact_first_name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('invoices', function (Blueprint $table) {
+            //
+        });
+    }
+};
diff --git a/package-lock.json b/package-lock.json
index 20ce51495..70e316c00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,8 @@
     "packages": {
         "": {
             "dependencies": {
-                "axios": "^1.7.3"
+                "axios": "^1.7.3",
+                "html2pdf.js": "^0.10.2"
             },
             "devDependencies": {
                 "@inertiajs/vue3": "^1.0.15",
@@ -60,6 +61,17 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/@babel/runtime": {
+            "version": "7.25.0",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
+            "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+            "dependencies": {
+                "regenerator-runtime": "^0.14.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.20.2",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -891,6 +903,12 @@
             "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
             "dev": true
         },
+        "node_modules/@types/raf": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+            "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+            "optional": true
+        },
         "node_modules/@ungap/structured-clone": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -1106,6 +1124,17 @@
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
         },
+        "node_modules/atob": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+            "bin": {
+                "atob": "bin/atob.js"
+            },
+            "engines": {
+                "node": ">= 4.5.0"
+            }
+        },
         "node_modules/autoprefixer": {
             "version": "10.4.19",
             "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
@@ -1159,6 +1188,14 @@
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
             "dev": true
         },
+        "node_modules/base64-arraybuffer": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+            "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
         "node_modules/binary-extensions": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1232,6 +1269,17 @@
                 "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
             }
         },
+        "node_modules/btoa": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+            "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+            "bin": {
+                "btoa": "bin/btoa.js"
+            },
+            "engines": {
+                "node": ">= 0.4.0"
+            }
+        },
         "node_modules/call-bind": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -1289,6 +1337,31 @@
                 }
             ]
         },
+        "node_modules/canvg": {
+            "version": "3.0.10",
+            "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+            "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+            "optional": true,
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@types/raf": "^3.4.0",
+                "core-js": "^3.8.3",
+                "raf": "^3.4.1",
+                "regenerator-runtime": "^0.13.7",
+                "rgbcolor": "^1.0.1",
+                "stackblur-canvas": "^2.0.0",
+                "svg-pathdata": "^6.0.3"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
+        "node_modules/canvg/node_modules/regenerator-runtime": {
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+            "optional": true
+        },
         "node_modules/chalk": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1385,6 +1458,17 @@
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
             "dev": true
         },
+        "node_modules/core-js": {
+            "version": "3.38.0",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
+            "integrity": "sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==",
+            "hasInstallScript": true,
+            "optional": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/core-js"
+            }
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1399,6 +1483,14 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/css-line-break": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+            "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+            "dependencies": {
+                "utrie": "^1.0.2"
+            }
+        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1498,6 +1590,12 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dompurify": {
+            "version": "2.5.6",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.6.tgz",
+            "integrity": "sha512-zUTaUBO8pY4+iJMPE1B9XlO2tXVYIcEA4SNGtvDELzTSCQO7RzH+j7S180BmhmJId78lqGU2z19vgVx2Sxs/PQ==",
+            "optional": true
+        },
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1549,6 +1647,11 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/es6-promise": {
+            "version": "4.2.8",
+            "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+            "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+        },
         "node_modules/esbuild": {
             "version": "0.20.2",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
@@ -1858,6 +1961,11 @@
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/fflate": {
+            "version": "0.4.8",
+            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+            "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+        },
         "node_modules/file-entry-cache": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2150,6 +2258,28 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/html2canvas": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+            "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+            "dependencies": {
+                "css-line-break": "^2.1.0",
+                "text-segmentation": "^1.0.3"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/html2pdf.js": {
+            "version": "0.10.2",
+            "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.10.2.tgz",
+            "integrity": "sha512-WyHVeMb18Bp7vYTmBv1GVsThH//K7SRfHdSdhHPkl4JvyQarNQXnailkYn0QUbRRmnN5rdbbmSIGEsPZtzPy2Q==",
+            "dependencies": {
+                "es6-promise": "^4.2.5",
+                "html2canvas": "^1.0.0",
+                "jspdf": "^2.3.1"
+            }
+        },
         "node_modules/ignore": {
             "version": "5.3.1",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -2336,6 +2466,23 @@
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
             "dev": true
         },
+        "node_modules/jspdf": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+            "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+            "dependencies": {
+                "@babel/runtime": "^7.14.0",
+                "atob": "^2.1.2",
+                "btoa": "^1.2.1",
+                "fflate": "^0.4.8"
+            },
+            "optionalDependencies": {
+                "canvg": "^3.0.6",
+                "core-js": "^3.6.0",
+                "dompurify": "^2.2.0",
+                "html2canvas": "^1.0.0-rc.5"
+            }
+        },
         "node_modules/keyv": {
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2753,6 +2900,12 @@
                 "node": "14 || >=16.14"
             }
         },
+        "node_modules/performance-now": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+            "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+            "optional": true
+        },
         "node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -3024,6 +3177,15 @@
                 }
             ]
         },
+        "node_modules/raf": {
+            "version": "3.4.1",
+            "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+            "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+            "optional": true,
+            "dependencies": {
+                "performance-now": "^2.1.0"
+            }
+        },
         "node_modules/read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3045,6 +3207,11 @@
                 "node": ">=8.10.0"
             }
         },
+        "node_modules/regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        },
         "node_modules/resolve": {
             "version": "1.22.8",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3081,6 +3248,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/rgbcolor": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+            "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8.15"
+            }
+        },
         "node_modules/rimraf": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -3245,6 +3421,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/stackblur-canvas": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+            "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+            "optional": true,
+            "engines": {
+                "node": ">=0.1.14"
+            }
+        },
         "node_modules/string-width": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -3439,6 +3624,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/svg-pathdata": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+            "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+            "optional": true,
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
         "node_modules/tailwind-classes-sorter": {
             "version": "0.2.5",
             "resolved": "https://registry.npmjs.org/tailwind-classes-sorter/-/tailwind-classes-sorter-0.2.5.tgz",
@@ -3502,6 +3696,14 @@
                 "postcss": "^8.0.0"
             }
         },
+        "node_modules/text-segmentation": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+            "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+            "dependencies": {
+                "utrie": "^1.0.2"
+            }
+        },
         "node_modules/text-table": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3617,6 +3819,14 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "dev": true
         },
+        "node_modules/utrie": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+            "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+            "dependencies": {
+                "base64-arraybuffer": "^1.0.2"
+            }
+        },
         "node_modules/uuid": {
             "version": "8.3.2",
             "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index b673158eb..4cbd84aef 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
         "vue": "^3.2.27"
     },
     "dependencies": {
-        "axios": "^1.7.3"
+        "axios": "^1.7.3",
+        "html2pdf.js": "^0.10.2"
     }
 }
diff --git a/resources/js/Pages/Invoices/Create.vue b/resources/js/Pages/Invoices/Create.vue
index 924366f27..858b1aa38 100644
--- a/resources/js/Pages/Invoices/Create.vue
+++ b/resources/js/Pages/Invoices/Create.vue
@@ -1,38 +1,47 @@
 <template>
   <div>
+
     <Head title="Create Invoice" />
     <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/invoices">Invoices</Link>
       <span class="text-indigo-400 font-medium">/</span> Create
     </h1>
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
-      <form @submit.prevent="store">
+      <form @submit.prevent="handleSubmit">
         <div class="flex flex-wrap -mb-8 -mr-6 p-8">
           <!-- Organization Dropdown -->
-          <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Organization">
+          <select-input v-model="form.organization_id" :error="form.errors.organization_id"
+            class="pb-8 pr-6 w-full lg:w-1/2" label="Organization">
             <option v-for="org in organizations" :key="org.id" :value="org.id">{{ org.name }}</option>
           </select-input>
 
           <!-- Contact Dropdown -->
-          <select-input v-model="form.contact_id" :error="form.errors.contact_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Contact">
-            <option v-for="contact in contacts" :key="contact.id" :value="contact.id">{{ contact.first_name + " " + contact.last_name}}</option>
+          <select-input v-model="form.contact_id" :error="form.errors.contact_id" class="pb-8 pr-6 w-full lg:w-1/2"
+            label="Contact">
+            <option v-for="contact in contacts" :key="contact.id" :value="contact.id">{{ contact.first_name + " " +
+              contact.last_name }}</option>
           </select-input>
 
           <!-- Product Dropdown -->
-         <select-input v-model="form.product_id" :error="form.errors.product_id" class="pb-8 pr-6 w-full lg:w-full" label="Product">
-            <option value="" >Select a product</option>
-            <option v-for="product in availableProducts" :key="product.id" :value="product.id">{{ product.name }}</option>
+          <select-input v-model="form.product_id" :error="form.errors.product_id" class="pb-8 pr-6 w-full lg:w-full"
+            label="Product">
+            <option value="">Select a product</option>
+            <option v-for="product in availableProducts" :key="product.id" :value="product.id">{{ product.name }}
+            </option>
           </select-input>
         </div>
-
         <!-- Products Table -->
-        <div class="overflow-x-auto">
+        <div class="overflow-x-auto" ref="invoiceContent">
           <hr>
           <div v-if="form.organization_id && form.contact_id" class="px-8 py-4">
             <h1 class="text-xl font-bold text-center">Invoice</h1>
-            <p class="text-lg font-semibold text-center">Organization: {{ organizations.find(org => org.id === form.organization_id).name }}</p>
-            <p class="text-lg font-semibold text-center">Contact: {{ contacts.find(contact => contact.id === form.contact_id).first_name + " " + contacts.find(contact => contact.id === form.contact_id).last_name }}</p>
-            <p class="text-sm font-italic text-center">{{ contacts.find(contact => contact.id === form.contact_id).phone }} | {{ contacts.find(contact => contact.id === form.contact_id).email }}</p>
+            <p class="text-lg font-semibold text-center">Organization: {{ organizations.find(org => org.id ===
+              form.organization_id).name }}</p>
+            <p class="text-lg font-semibold text-center">Contact: {{ contacts.find(contact => contact.id ===
+              form.contact_id).first_name + " " + contacts.find(contact => contact.id === form.contact_id).last_name }}
+            </p>
+            <p class="text-sm font-italic text-center">{{ contacts.find(contact => contact.id === form.contact_id).phone
+              }} | {{ contacts.find(contact => contact.id === form.contact_id).email }}</p>
           </div>
           <table v-if="addedProducts.length > 0" class="w-full whitespace-nowrap">
             <thead>
@@ -44,11 +53,13 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(product, index) in addedProducts" :key="index" class="hover:bg-gray-100 focus-within:bg-gray-100 text-center">
+              <tr v-for="(product, index) in addedProducts" :key="index"
+                class="hover:bg-gray-100 focus-within:bg-gray-100 text-center">
                 <td class="border-t px-6 py-4">{{ product.name }}</td>
                 <td class="border-t px-6 py-4">৳{{ product.price }}</td>
                 <td class="border-t px-6 py-4">
-                  <input type="number" v-model="product.quantity" min="1" class="form-input w-16 mx-auto text-center" />
+                  <input type="number" v-model="product.quantity0" min="1" :max="product.quantity"
+                    class="form-input w-16 mx-auto text-center" />
                 </td>
                 <td class="border-t px-6 py-4">
                   <button @click="removeProduct(index)" class="text-red-500 hover:text-red-700">Remove</button>
@@ -81,6 +92,7 @@ import TextInput from '@/Shared/TextInput.vue'
 import SelectInput from '@/Shared/SelectInput.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import axios from 'axios'
+import html2pdf from 'html2pdf.js'
 
 export default {
   components: {
@@ -103,24 +115,22 @@ export default {
         product_id: null,
         number: null,
         amount: null,
-        added_products: [] // List of products added to the invoice
+        added_products: []
       }),
       contacts: [],
-      addedProducts: [], // List of products added to the invoice
+      addedProducts: [],
     }
   },
   computed: {
     availableProducts() {
-      // Filter out the products that have already been added to the invoice
       return this.products.filter(product => !this.addedProducts.some(p => p.id === product.id))
     },
     totalAmount() {
-      // Calculate the total amount based on added products and their quantities
-      return this.addedProducts.reduce((total, product) => total + (product.price * product.quantity), 0)
+      return this.addedProducts.reduce((total, product) => total + (product.price * product.quantity0), 0)
     }
   },
   watch: {
-    'form.organization_id': async function(newOrgId) {
+    'form.organization_id': async function (newOrgId) {
       if (newOrgId) {
         try {
           const response = await axios.get(`/organizations/${newOrgId}/contacts`)
@@ -132,41 +142,52 @@ export default {
         this.contacts = []
       }
     },
-    'form.product_id': function(newProductId) {
+    'form.product_id': function (newProductId) {
       if (newProductId) {
         const selectedProduct = this.products.find(p => p.id === newProductId)
         if (selectedProduct && !this.addedProducts.some(p => p.id === selectedProduct.id)) {
-          this.addedProducts.push({ ...selectedProduct, quantity: 1 }) // Add product with default quantity
-          this.form.product_id = null // Reset the product dropdown
+          this.addedProducts.push({ ...selectedProduct, quantity0: 1 })
+          this.form.product_id = null
         }
       }
     },
     addedProducts: {
       handler(newProducts) {
-        // Update form's added_products field whenever addedProducts changes
         this.form.added_products = newProducts
       },
       deep: true
     }
   },
   methods: {
-    store() {
-      this.form.number = Math.floor(Math.random() * 90000) + 10000; // Generate a random invoice number
-      this.form.amount = this.totalAmount; // Set the total amount in the form
+    async handleSubmit() {
+      this.form.number = Math.floor(Math.random() * 90000) + 10000;
+      this.form.amount = this.totalAmount;
+
+      try {
+        await this.form.post('/invoices')
+        this.generatePDF()
+        this.addedProducts = []
+      } catch (error) {
+        console.error('Failed to create invoice:', error)
+      }
+    },
+    generatePDF() {
+      const element = this.$refs.invoiceContent
+      console.log(element)
+      console.log("Hello PDF")
 
-      this.form.post('/invoices')
-        .then(() => {
-          // Reset added products after successful creation
-          this.addedProducts = []
-        })
-        .catch(error => {
-          console.error('Failed to create invoice:', error)
-        })
+      var opt = {
+        margin: 1,
+        filename: 'myfile.pdf',
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: { scale: 2 },
+        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+      };
+      html2pdf(element, opt);
     },
     removeProduct(index) {
-      this.addedProducts.splice(index, 1) // Remove product from the list
+      this.addedProducts.splice(index, 1)
     }
   }
 }
 </script>
-
diff --git a/resources/js/Pages/Invoices/Index.vue b/resources/js/Pages/Invoices/Index.vue
index ef923b269..7a05644d1 100644
--- a/resources/js/Pages/Invoices/Index.vue
+++ b/resources/js/Pages/Invoices/Index.vue
@@ -26,25 +26,25 @@
             <th class="pb-4 pt-6 px-6">Amount</th>
             <th class="pb-4 pt-6 px-6">Organization</th>
             <th class="pb-4 pt-6 px-6">Contact</th>
-            <th class="pb-4 pt-6 px-6" colspan="2">Actions</th>
+            <!-- <th class="pb-4 pt-6 px-6" colspan="2">Actions</th> -->
           </tr>
         </thead>
         <tbody>
           <tr v-for="invoice in invoices.data" :key="invoice.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
             <td class="border-t px-6 py-4">{{ invoice.number }}</td>
             <td class="border-t px-6 py-4">৳{{ invoice.amount }}</td>
-            <td class="border-t px-6 py-4">{{ invoice.organization.name }}</td>
-            <!-- <td class="border-t px-6 py-4">{{ invoice.contact.name }}</td> -->
-            <td class="w-px border-t">
+            <td class="border-t px-6 py-4">{{ invoice.organization_name }}</td>
+            <td class="border-t px-6 py-4">{{ invoice.contact_first_name + " " + invoice.contact_last_name }}</td>
+            <!-- <td class="w-px border-t">
               <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}/edit`" tabindex="-1">
                 <icon name="edit" class="block w-6 h-6 fill-gray-400" />
               </Link>
-            </td>
-            <td class="w-px border-t">
+            </td> -->
+            <!-- <td class="w-px border-t">
               <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}`" tabindex="-1">
                 <icon name="view" class="block w-6 h-6 fill-gray-400" />
               </Link>
-            </td>
+            </td> -->
           </tr>
           <tr v-if="invoices.data.length === 0">
             <td class="px-6 py-4 border-t" colspan="6">No invoices found.</td>

From 3fbd25309c07d97416f3272fde5048fe7946c83f Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 7 Aug 2024 18:00:20 +0600
Subject: [PATCH 08/45] Add Random Invoice Number

---
 .../2024_08_07_115238_create_test_table.php   | 30 +++++++++++++++++++
 resources/js/Pages/Invoices/Create.vue        | 15 ++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 database/migrations/2024_08_07_115238_create_test_table.php

diff --git a/database/migrations/2024_08_07_115238_create_test_table.php b/database/migrations/2024_08_07_115238_create_test_table.php
new file mode 100644
index 000000000..9a66efec7
--- /dev/null
+++ b/database/migrations/2024_08_07_115238_create_test_table.php
@@ -0,0 +1,30 @@
+<?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('test', function (Blueprint $table) {
+            $table->id();
+            $table->integer('organization_id')->unsigned();
+            $table->string('name');
+            $table->foreign('organization_id')->references('id')->on('organizations');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('test');
+    }
+};
diff --git a/resources/js/Pages/Invoices/Create.vue b/resources/js/Pages/Invoices/Create.vue
index 858b1aa38..cd6593ade 100644
--- a/resources/js/Pages/Invoices/Create.vue
+++ b/resources/js/Pages/Invoices/Create.vue
@@ -160,7 +160,7 @@ export default {
   },
   methods: {
     async handleSubmit() {
-      this.form.number = Math.floor(Math.random() * 90000) + 10000;
+      this.form.number = this.generateRandomString(8);
       this.form.amount = this.totalAmount;
 
       try {
@@ -178,7 +178,7 @@ export default {
 
       var opt = {
         margin: 1,
-        filename: 'myfile.pdf',
+        filename: `${this.form.number}.pdf`,
         image: { type: 'jpeg', quality: 0.98 },
         html2canvas: { scale: 2 },
         jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
@@ -187,7 +187,18 @@ export default {
     },
     removeProduct(index) {
       this.addedProducts.splice(index, 1)
+    },
+
+    generateRandomString(length) {
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      const charactersLength = characters.length;
+      for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+      }
+      return result;
     }
+
   }
 }
 </script>

From 018ca55edbdaff92dc44ad60f651282608facdb2 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 8 Aug 2024 11:17:08 +0600
Subject: [PATCH 09/45] Add Migration for Invoice Items

---
 app/Models/InvoiceItem.php                    | 13 ++++++++
 ...8_08_051355_create_invoice_items_table.php | 31 +++++++++++++++++++
 resources/js/Pages/Invoices/Index.vue         | 25 +++++++--------
 3 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 app/Models/InvoiceItem.php
 create mode 100644 database/migrations/2024_08_08_051355_create_invoice_items_table.php

diff --git a/app/Models/InvoiceItem.php b/app/Models/InvoiceItem.php
new file mode 100644
index 000000000..9b840d5fb
--- /dev/null
+++ b/app/Models/InvoiceItem.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class InvoiceItem extends Model
+{
+    use HasFactory;
+    protected $table = 'invoice_items';
+    protected $fillable = ['name', 'price', 'quantity'];
+}
diff --git a/database/migrations/2024_08_08_051355_create_invoice_items_table.php b/database/migrations/2024_08_08_051355_create_invoice_items_table.php
new file mode 100644
index 000000000..01452fd0f
--- /dev/null
+++ b/database/migrations/2024_08_08_051355_create_invoice_items_table.php
@@ -0,0 +1,31 @@
+<?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('invoice_items', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('invoice_id')->constrained('invoices')->onDelete('cascade');
+            $table->string('name');
+            $table->decimal('price', 8, 2);
+            $table->integer('quantity');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('invoice_items');
+    }
+};
diff --git a/resources/js/Pages/Invoices/Index.vue b/resources/js/Pages/Invoices/Index.vue
index 7a05644d1..8013019b1 100644
--- a/resources/js/Pages/Invoices/Index.vue
+++ b/resources/js/Pages/Invoices/Index.vue
@@ -1,21 +1,18 @@
 <template>
   <div>
+
     <Head title="Invoices" />
     <h1 class="mb-8 text-3xl font-bold">Invoices</h1>
     <div class="flex items-center justify-between mb-6">
       <!-- Search Field -->
       <div class="flex-1 max-w-md mr-4">
-        <input
-          type="search"
-          v-model="search"
-          placeholder="Search invoices..."
-          class="form-input w-1/2 px-4 py-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        />
+        <input type="search" v-model="search" placeholder="Search invoices..."
+          class="form-input w-1/2 px-4 py-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
       </div>
       <!-- Create Button -->
       <Link class="btn-indigo" href="/invoices/create">
-        <span>Create</span>
-        <span class="hidden md:inline">&nbsp;Invoice</span>
+      <span>Create</span>
+      <span class="hidden md:inline">&nbsp;Invoice</span>
       </Link>
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto">
@@ -35,16 +32,16 @@
             <td class="border-t px-6 py-4">৳{{ invoice.amount }}</td>
             <td class="border-t px-6 py-4">{{ invoice.organization_name }}</td>
             <td class="border-t px-6 py-4">{{ invoice.contact_first_name + " " + invoice.contact_last_name }}</td>
-            <!-- <td class="w-px border-t">
+            <td class="w-px border-t">
               <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}/edit`" tabindex="-1">
-                <icon name="edit" class="block w-6 h-6 fill-gray-400" />
+              <icon name="edit" class="block w-6 h-6 fill-gray-400" />
               </Link>
-            </td> -->
-            <!-- <td class="w-px border-t">
+            </td>
+            <td class="w-px border-t">
               <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}`" tabindex="-1">
-                <icon name="view" class="block w-6 h-6 fill-gray-400" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
               </Link>
-            </td> -->
+            </td>
           </tr>
           <tr v-if="invoices.data.length === 0">
             <td class="px-6 py-4 border-t" colspan="6">No invoices found.</td>

From f1b3b9e0680cfa8edd4dc76e4fb23f59541d0a96 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 8 Aug 2024 11:56:43 +0600
Subject: [PATCH 10/45] Add View invoice

---
 app/Http/Controllers/InvoicesController.php | 19 ++++++
 app/Models/Invoice.php                      |  9 +++
 resources/js/Pages/Invoices/Index.vue       |  7 +--
 resources/js/Pages/Invoices/View.vue        | 66 +++++++++++++++++++++
 routes/web.php                              |  3 +
 5 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/Pages/Invoices/View.vue

diff --git a/app/Http/Controllers/InvoicesController.php b/app/Http/Controllers/InvoicesController.php
index bfc66403a..f54bb7434 100644
--- a/app/Http/Controllers/InvoicesController.php
+++ b/app/Http/Controllers/InvoicesController.php
@@ -5,6 +5,7 @@
 use Illuminate\Http\Request;
 use App\Models\Invoice;
 use App\Models\Contact;
+use App\Models\InvoiceItem;
 use App\Models\Organization;
 use App\Models\Product;
 use Inertia\Inertia;
@@ -77,8 +78,26 @@ public function store(Request $request)
         foreach ($request->added_products as $productData) {
             $product = Product::findOrFail($productData['id']);
             $product->decrement('quantity', $productData['quantity0']);
+
+            $item = InvoiceItem::create([
+                'invoice_id' => $invoice->id,
+                'name' => $product->name,
+                'price' => $product->price,
+                'quantity' => $productData['quantity0'],
+            ]);
         }
 
         return redirect()->route('invoices')->with('success', 'Invoice created successfully.');
     }
+
+    public function view(Invoice $invoice): Response
+    {
+        $invoice = Invoice::with('items')->findOrFail($invoice->id);
+        $contact = Contact::findOrFail($invoice->contact_id);
+        Log::info($contact);
+        return Inertia::render('Invoices/View', [
+            'invoice' => $invoice,
+            'contact' => $contact,
+        ]);
+    }
 }
diff --git a/app/Models/Invoice.php b/app/Models/Invoice.php
index dc95336ee..a30d8730e 100644
--- a/app/Models/Invoice.php
+++ b/app/Models/Invoice.php
@@ -10,4 +10,13 @@ class Invoice extends Model
     use HasFactory;
     protected $table = 'invoices';
     protected $fillable = ['number', 'amount', 'organization_id', 'contact_id'];
+
+    public function resolveRouteBinding($value, $field = null)
+    {
+        return $this->where($field ?? 'id', $value)->with('items')->firstOrFail();
+    }
+    public function items()
+    {
+        return $this->hasMany(InvoiceItem::class);
+    }
 }
diff --git a/resources/js/Pages/Invoices/Index.vue b/resources/js/Pages/Invoices/Index.vue
index 8013019b1..99c2ca031 100644
--- a/resources/js/Pages/Invoices/Index.vue
+++ b/resources/js/Pages/Invoices/Index.vue
@@ -33,12 +33,7 @@
             <td class="border-t px-6 py-4">{{ invoice.organization_name }}</td>
             <td class="border-t px-6 py-4">{{ invoice.contact_first_name + " " + invoice.contact_last_name }}</td>
             <td class="w-px border-t">
-              <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}/edit`" tabindex="-1">
-              <icon name="edit" class="block w-6 h-6 fill-gray-400" />
-              </Link>
-            </td>
-            <td class="w-px border-t">
-              <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}`" tabindex="-1">
+              <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}/view`" tabindex="-1">
               <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
               </Link>
             </td>
diff --git a/resources/js/Pages/Invoices/View.vue b/resources/js/Pages/Invoices/View.vue
new file mode 100644
index 000000000..599072f36
--- /dev/null
+++ b/resources/js/Pages/Invoices/View.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="overflow-x-auto" ref="invoiceContent">
+    <hr>
+    <div class="px-8 py-4">
+      <h1 class="text-xl font-bold text-center">Invoice</h1>
+      <p class="text-lg font-semibold text-center">Organization: {{ invoice.organization_name }}</p>
+      <p class="text-lg font-semibold text-center">Contact: {{ invoice.contact_first_name + " " +
+        invoice.contact_last_name }}
+      </p>
+      <p class="text-sm font-italic text-center">{{ contact.phone
+        }} | {{ contact.email }}</p>
+    </div>
+    <table class="w-full whitespace-nowrap">
+      <thead>
+        <tr>
+          <th class="pb-4 pt-6 px-6">Product</th>
+          <th class="pb-4 pt-6 px-6">Price</th>
+          <th class="pb-4 pt-6 px-6">Quantity</th>
+          <th class="pb-4 pt-6 px-6">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in invoice.items" :key="index"
+          class="hover:bg-gray-100 focus-within:bg-gray-100 text-center">
+          <td class="border-t px-6 py-4">{{ item.name }}</td>
+          <td class="border-t px-6 py-4">৳{{ item.price }}</td>
+          <td class="border-t px-6 py-4">{{ item.quantity }}</td>
+          <td class="border-t px-6 py-4">৳{{ item.price * item.quantity }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Total Amount -->
+    <div class="flex justify-end px-8 py-4">
+      <div class="font-bold text-lg">Total Amount: ৳{{ invoice.amount }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Head, Link } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+import axios from 'axios'
+import html2pdf from 'html2pdf.js'
+
+export default {
+  components: {
+    Head,
+    Link,
+    LoadingButton,
+    SelectInput,
+    TextInput,
+  },
+  layout: Layout,
+  props: {
+    invoice: Object,
+    contact: Object,
+  },
+  mounted() {
+    console.log(this.invoice)
+  },
+}
+</script>
diff --git a/routes/web.php b/routes/web.php
index c99b1f513..7720cc704 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -175,6 +175,9 @@
 Route::post('invoices', [InvoicesController::class, 'store'])
     ->name('invoices.store')
     ->middleware('auth');
+Route::get('invoices/{invoice}/view', [InvoicesController::class, 'view'])
+    ->name('invoices.view')
+    ->middleware('auth');
 Route::get('organizations/{organizationId}/contacts', [InvoicesController::class, 'getContacts'])
     ->name('organizations.contacts')
     ->middleware('auth');

From 5ef44d25b6ff9a11164e7aba354ad2d6bfc9dd80 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 8 Aug 2024 12:44:19 +0600
Subject: [PATCH 11/45] Add Pdf Generation

---
 resources/js/Pages/Invoices/Create.vue | 17 +-------
 resources/js/Pages/Invoices/View.vue   | 58 ++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/resources/js/Pages/Invoices/Create.vue b/resources/js/Pages/Invoices/Create.vue
index cd6593ade..938dadead 100644
--- a/resources/js/Pages/Invoices/Create.vue
+++ b/resources/js/Pages/Invoices/Create.vue
@@ -160,31 +160,16 @@ export default {
   },
   methods: {
     async handleSubmit() {
-      this.form.number = this.generateRandomString(8);
+      this.form.number = this.generateRandomString(15);
       this.form.amount = this.totalAmount;
 
       try {
         await this.form.post('/invoices')
-        this.generatePDF()
         this.addedProducts = []
       } catch (error) {
         console.error('Failed to create invoice:', error)
       }
     },
-    generatePDF() {
-      const element = this.$refs.invoiceContent
-      console.log(element)
-      console.log("Hello PDF")
-
-      var opt = {
-        margin: 1,
-        filename: `${this.form.number}.pdf`,
-        image: { type: 'jpeg', quality: 0.98 },
-        html2canvas: { scale: 2 },
-        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
-      };
-      html2pdf(element, opt);
-    },
     removeProduct(index) {
       this.addedProducts.splice(index, 1)
     },
diff --git a/resources/js/Pages/Invoices/View.vue b/resources/js/Pages/Invoices/View.vue
index 599072f36..84e379af2 100644
--- a/resources/js/Pages/Invoices/View.vue
+++ b/resources/js/Pages/Invoices/View.vue
@@ -2,13 +2,15 @@
   <div class="overflow-x-auto" ref="invoiceContent">
     <hr>
     <div class="px-8 py-4">
-      <h1 class="text-xl font-bold text-center">Invoice</h1>
+      <p class="flex justify-end px-8 py-4 text-sm italic">Issued Date: {{ new
+        Date(invoice.created_at).toLocaleDateString() }}</p>
+      <h1 class="text-xl font-bold text-center">Invoice #{{ invoice.number }}</h1>
+
       <p class="text-lg font-semibold text-center">Organization: {{ invoice.organization_name }}</p>
       <p class="text-lg font-semibold text-center">Contact: {{ invoice.contact_first_name + " " +
-        invoice.contact_last_name }}
-      </p>
-      <p class="text-sm font-italic text-center">{{ contact.phone
-        }} | {{ contact.email }}</p>
+        invoice.contact_last_name }}</p>
+      <p class="text-sm font-italic text-center">{{ contact.phone }} | {{ contact.email }}</p>
+
     </div>
     <table class="w-full whitespace-nowrap">
       <thead>
@@ -34,7 +36,17 @@
     <div class="flex justify-end px-8 py-4">
       <div class="font-bold text-lg">Total Amount: ৳{{ invoice.amount }}</div>
     </div>
+    <!-- PDF Generation Date -->
+    <div v-if="isPdfGeneration" class="flex justify-between text-green-700 px-8 py-4 text-sm italic">
+      This PDF is generated at {{ new Date().toLocaleString() }}
+    </div>
   </div>
+  <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
+    <loading-button :loading="isLoading" class="btn-indigo" @click="downloadInvoice">
+      Download Invoice
+    </loading-button>
+  </div>
+
 </template>
 
 <script>
@@ -43,7 +55,6 @@ import Layout from '@/Shared/Layout.vue'
 import TextInput from '@/Shared/TextInput.vue'
 import SelectInput from '@/Shared/SelectInput.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
-import axios from 'axios'
 import html2pdf from 'html2pdf.js'
 
 export default {
@@ -59,8 +70,39 @@ export default {
     invoice: Object,
     contact: Object,
   },
-  mounted() {
-    console.log(this.invoice)
+  data() {
+    return {
+      isPdfGeneration: false,
+      isLoading: false,
+    }
   },
+  methods: {
+    async downloadInvoice() {
+      this.isLoading = true
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      try {
+        this.generatePDF()
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async generatePDF() {
+      this.isPdfGeneration = true
+      await this.$nextTick();
+      const element = this.$refs.invoiceContent
+      var opt = {
+        margin: 1,
+        filename: `${this.invoice.number}.pdf`,
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: { scale: 2 },
+        jsPDF: { unit: 'in', format: [8, 8], orientation: 'portrait' }
+      };
+      html2pdf(element, opt);
+      this.isPdfGeneration = false
+    },
+  }
+
 }
 </script>

From 4525e385741f74b1e596e3fe03c6bac13f577f91 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 8 Aug 2024 12:47:16 +0600
Subject: [PATCH 12/45] Fix Orgazization Logic

---
 app/Http/Controllers/InvoicesController.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/Http/Controllers/InvoicesController.php b/app/Http/Controllers/InvoicesController.php
index f54bb7434..5d036d526 100644
--- a/app/Http/Controllers/InvoicesController.php
+++ b/app/Http/Controllers/InvoicesController.php
@@ -36,6 +36,7 @@ public function create(): Response
     {
         return Inertia::render('Invoices/Create', [
             'organizations' => Auth::user()->account->organizations()
+                ->has('contacts')
                 ->get()
                 ->map
                 ->only('id', 'name'),

From e8ee589553c631626f3e109d7a952c06151b9ba6 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 8 Aug 2024 13:07:03 +0600
Subject: [PATCH 13/45] Fix Invoice Number

---
 resources/js/Pages/Invoices/Create.vue |  5 +++--
 resources/js/Pages/Invoices/View.vue   |  2 +-
 resources/js/Pages/Products/Index.vue  | 22 ++++++++++------------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/resources/js/Pages/Invoices/Create.vue b/resources/js/Pages/Invoices/Create.vue
index 938dadead..b8a920752 100644
--- a/resources/js/Pages/Invoices/Create.vue
+++ b/resources/js/Pages/Invoices/Create.vue
@@ -160,7 +160,7 @@ export default {
   },
   methods: {
     async handleSubmit() {
-      this.form.number = this.generateRandomString(15);
+      this.form.number = this.generateRandomString(8)
       this.form.amount = this.totalAmount;
 
       try {
@@ -176,7 +176,8 @@ export default {
 
     generateRandomString(length) {
       const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-      let result = '';
+      const selectedOrg = this.organizations.find(org => org.id === this.form.organization_id);
+      let result = selectedOrg.name.substring(0, 3).toUpperCase() + '-';
       const charactersLength = characters.length;
       for (let i = 0; i < length; i++) {
         result += characters.charAt(Math.floor(Math.random() * charactersLength));
diff --git a/resources/js/Pages/Invoices/View.vue b/resources/js/Pages/Invoices/View.vue
index 84e379af2..99f68cc4e 100644
--- a/resources/js/Pages/Invoices/View.vue
+++ b/resources/js/Pages/Invoices/View.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-x-auto" ref="invoiceContent">
+  <div class="overflow-x-auto bg-white" ref="invoiceContent">
     <hr>
     <div class="px-8 py-4">
       <p class="flex justify-end px-8 py-4 text-sm italic">Issued Date: {{ new
diff --git a/resources/js/Pages/Products/Index.vue b/resources/js/Pages/Products/Index.vue
index c2c24ef3c..1dc752250 100644
--- a/resources/js/Pages/Products/Index.vue
+++ b/resources/js/Pages/Products/Index.vue
@@ -1,42 +1,40 @@
 <template>
   <div>
+
     <Head title="Products" />
     <h1 class="mb-8 text-3xl font-bold">Products</h1>
     <div class="flex items-center justify-between mb-6">
       <!-- Search Field -->
       <div class="flex-1 max-w-md mr-4">
-        <input
-          type="search"
-          v-model="search"
-          placeholder="Search products..."
-          class="form-input w-1/2 px-4 py-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        />
+        <input type="search" v-model="search" placeholder="Search products..."
+          class="form-input w-1/2 px-4 py-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
       </div>
       <!-- Create Button -->
       <Link class="btn-indigo" href="/products/create">
-        <span>Create</span>
-        <span class="hidden md:inline">&nbsp;Product</span>
+      <span>Create</span>
+      <span class="hidden md:inline">&nbsp;Product</span>
       </Link>
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
         <thead>
-          <tr class="text-left font-bold">
+          <tr class="font-bold text-center">
             <th class="pb-4 pt-6 px-6">Name</th>
             <th class="pb-4 pt-6 px-6">Description</th>
             <th class="pb-4 pt-6 px-6">Price</th>
-            <th class="pb-4 pt-6 px-6">Quantity</th>
+            <th class="pb-4 pt-6 px-6">Inventory</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="product in products.data" :key="product.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
+          <tr v-for="product in products.data" :key="product.id"
+            class="hover:bg-gray-100 focus-within:bg-gray-100 text-center">
             <td class="border-t px-6 py-4">{{ product.name }}</td>
             <td class="border-t px-6 py-4">{{ product.description }}</td>
             <td class="border-t px-6 py-4">৳{{ product.price }}</td>
             <td class="border-t px-6 py-4">{{ product.quantity }}</td>
             <td class="w-px border-t">
               <Link class="flex items-center px-4" :href="`/products/${product.id}/edit`" tabindex="-1">
-                <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
               </Link>
             </td>
           </tr>

From f551911a4ca79d3da831b2768d00e0574cf469fc Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 8 Aug 2024 18:04:04 +0600
Subject: [PATCH 14/45] Add Download from Index Page

---
 app/Http/Controllers/InvoicesController.php | 14 +++++
 resources/js/Pages/Invoices/Index.vue       | 61 +++++++++++++++++++--
 resources/js/Pages/Invoices/View.vue        | 47 ++--------------
 resources/js/Shared/Content.vue             | 53 ++++++++++++++++++
 resources/js/Shared/Icon.vue                | 49 +++++++++++++----
 routes/web.php                              |  3 +
 6 files changed, 168 insertions(+), 59 deletions(-)
 create mode 100644 resources/js/Shared/Content.vue

diff --git a/app/Http/Controllers/InvoicesController.php b/app/Http/Controllers/InvoicesController.php
index 5d036d526..0d4124c3d 100644
--- a/app/Http/Controllers/InvoicesController.php
+++ b/app/Http/Controllers/InvoicesController.php
@@ -8,10 +8,13 @@
 use App\Models\InvoiceItem;
 use App\Models\Organization;
 use App\Models\Product;
+use Illuminate\Database\Eloquent\Casts\Json;
+use Illuminate\Http\JsonResponse;
 use Inertia\Inertia;
 use Inertia\Response;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\View;
 
 class InvoicesController extends Controller
 {
@@ -101,4 +104,15 @@ public function view(Invoice $invoice): Response
             'contact' => $contact,
         ]);
     }
+
+    public function download(Invoice $invoice)
+    {
+        $localinvoice = Invoice::with('items')->findOrFail($invoice->id);
+        $localcontact = Contact::findOrFail($invoice->contact_id);
+
+        return response()->json([
+            'localinvoice' => $localinvoice,
+            'localcontact' => $localcontact,
+        ]);
+    }
 }
diff --git a/resources/js/Pages/Invoices/Index.vue b/resources/js/Pages/Invoices/Index.vue
index 99c2ca031..fe432af35 100644
--- a/resources/js/Pages/Invoices/Index.vue
+++ b/resources/js/Pages/Invoices/Index.vue
@@ -23,7 +23,6 @@
             <th class="pb-4 pt-6 px-6">Amount</th>
             <th class="pb-4 pt-6 px-6">Organization</th>
             <th class="pb-4 pt-6 px-6">Contact</th>
-            <!-- <th class="pb-4 pt-6 px-6" colspan="2">Actions</th> -->
           </tr>
         </thead>
         <tbody>
@@ -32,6 +31,11 @@
             <td class="border-t px-6 py-4">৳{{ invoice.amount }}</td>
             <td class="border-t px-6 py-4">{{ invoice.organization_name }}</td>
             <td class="border-t px-6 py-4">{{ invoice.contact_first_name + " " + invoice.contact_last_name }}</td>
+            <td class="w-px border-t">
+              <loading-button class="bg-transparent-100" @click="downloadInvoice(invoice.id)">
+                <icon name="download" class="block w-6 h-6 fill-indigo-700 hover:fill-orange-400" />
+              </loading-button>
+            </td>
             <td class="w-px border-t">
               <Link class="flex items-center px-4" :href="`/invoices/${invoice.id}/view`" tabindex="-1">
               <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
@@ -45,15 +49,26 @@
       </table>
     </div>
     <pagination class="mt-6" :links="invoices.links" />
+
+    <div id="pdf-content" style="display: none;">
+      <InvoiceContent v-if="localcontact" ref="invoiceContent" :invoice="localinvoice" :contact="localcontact"
+        :isPdfGeneration="isPdfGeneration"></InvoiceContent>
+    </div>
+
   </div>
 </template>
 
+
 <script>
 import { Head, Link } from '@inertiajs/vue3'
 import Icon from '@/Shared/Icon.vue'
 import Layout from '@/Shared/Layout.vue'
 import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
+import InvoiceContent from '@/Shared/Content.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+import axios from 'axios'
+import html2pdf from 'html2pdf.js'
 
 export default {
   components: {
@@ -61,7 +76,9 @@ export default {
     Icon,
     Link,
     Pagination,
-    SearchFilter
+    SearchFilter,
+    InvoiceContent,
+    LoadingButton,
   },
   props: {
     invoices: Object,
@@ -70,6 +87,9 @@ export default {
   data() {
     return {
       search: '',
+      localcontact: null,
+      localinvoice: null,
+      isPdfGeneration: true,
     }
   },
   watch: {
@@ -77,11 +97,40 @@ export default {
       this.$inertia.get('/invoices', { search: newSearch }, { preserveState: true });
     },
   },
+  methods: {
+    async downloadInvoice(invoiceId) {
+      try {
+        const response = await axios.get(`/invoices/${invoiceId}/download`);
+        const { localinvoice, localcontact } = response.data;
+        this.localinvoice = localinvoice;
+        this.localcontact = localcontact;
+
+        // Use html2pdf to generate the PDF
+        this.generatePDF();
+
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async generatePDF() {
+      this.isPdfGeneration = true
+      await this.$nextTick();
+      const element = this.$refs.invoiceContent.$el;
+
+      var opt = {
+        margin: 1,
+        filename: `${this.localinvoice.number}.pdf`,
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: { scale: 2 },
+        jsPDF: { unit: 'in', format: [8, 8], orientation: 'portrait' }
+      };
+
+      html2pdf(element, opt);
+      this.isPdfGeneration = false
+    },
+  },
+
 
-  //console log invoices on startup
-  mounted() {
-    console.log(this.invoices)
-  }
 
 }
 </script>
diff --git a/resources/js/Pages/Invoices/View.vue b/resources/js/Pages/Invoices/View.vue
index 99f68cc4e..47dc34e60 100644
--- a/resources/js/Pages/Invoices/View.vue
+++ b/resources/js/Pages/Invoices/View.vue
@@ -1,46 +1,5 @@
 <template>
-  <div class="overflow-x-auto bg-white" ref="invoiceContent">
-    <hr>
-    <div class="px-8 py-4">
-      <p class="flex justify-end px-8 py-4 text-sm italic">Issued Date: {{ new
-        Date(invoice.created_at).toLocaleDateString() }}</p>
-      <h1 class="text-xl font-bold text-center">Invoice #{{ invoice.number }}</h1>
-
-      <p class="text-lg font-semibold text-center">Organization: {{ invoice.organization_name }}</p>
-      <p class="text-lg font-semibold text-center">Contact: {{ invoice.contact_first_name + " " +
-        invoice.contact_last_name }}</p>
-      <p class="text-sm font-italic text-center">{{ contact.phone }} | {{ contact.email }}</p>
-
-    </div>
-    <table class="w-full whitespace-nowrap">
-      <thead>
-        <tr>
-          <th class="pb-4 pt-6 px-6">Product</th>
-          <th class="pb-4 pt-6 px-6">Price</th>
-          <th class="pb-4 pt-6 px-6">Quantity</th>
-          <th class="pb-4 pt-6 px-6">Action</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in invoice.items" :key="index"
-          class="hover:bg-gray-100 focus-within:bg-gray-100 text-center">
-          <td class="border-t px-6 py-4">{{ item.name }}</td>
-          <td class="border-t px-6 py-4">৳{{ item.price }}</td>
-          <td class="border-t px-6 py-4">{{ item.quantity }}</td>
-          <td class="border-t px-6 py-4">৳{{ item.price * item.quantity }}</td>
-        </tr>
-      </tbody>
-    </table>
-
-    <!-- Total Amount -->
-    <div class="flex justify-end px-8 py-4">
-      <div class="font-bold text-lg">Total Amount: ৳{{ invoice.amount }}</div>
-    </div>
-    <!-- PDF Generation Date -->
-    <div v-if="isPdfGeneration" class="flex justify-between text-green-700 px-8 py-4 text-sm italic">
-      This PDF is generated at {{ new Date().toLocaleString() }}
-    </div>
-  </div>
+  <InvoiceContent ref="invoiceContent" :invoice="invoice" :contact="contact" :isPdfGeneration="isPdfGeneration" />
   <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
     <loading-button :loading="isLoading" class="btn-indigo" @click="downloadInvoice">
       Download Invoice
@@ -56,6 +15,7 @@ import TextInput from '@/Shared/TextInput.vue'
 import SelectInput from '@/Shared/SelectInput.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import html2pdf from 'html2pdf.js'
+import InvoiceContent from '@/Shared/Content.vue'
 
 export default {
   components: {
@@ -64,6 +24,7 @@ export default {
     LoadingButton,
     SelectInput,
     TextInput,
+    InvoiceContent,
   },
   layout: Layout,
   props: {
@@ -91,7 +52,7 @@ export default {
     async generatePDF() {
       this.isPdfGeneration = true
       await this.$nextTick();
-      const element = this.$refs.invoiceContent
+      const element = this.$refs.invoiceContent.$el;
       var opt = {
         margin: 1,
         filename: `${this.invoice.number}.pdf`,
diff --git a/resources/js/Shared/Content.vue b/resources/js/Shared/Content.vue
new file mode 100644
index 000000000..bf9646bdc
--- /dev/null
+++ b/resources/js/Shared/Content.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="overflow-x-auto bg-white" ref="invoiceContent">
+    <hr>
+    <div class="px-8 py-4">
+      <p class="flex justify-end px-8 py-4 text-sm italic">Issued Date: {{ new
+        Date(invoice.created_at).toLocaleDateString() }}</p>
+      <h1 class="text-xl font-bold text-center">Invoice #{{ invoice.number }}</h1>
+
+      <p class="text-lg font-semibold text-center">Organization: {{ invoice.organization_name }}</p>
+      <p class="text-lg font-semibold text-center">Contact: {{ invoice.contact_first_name + " " +
+        invoice.contact_last_name }}</p>
+      <p class="text-sm font-italic text-center">{{ contact.phone }} | {{ contact.email }}</p>
+    </div>
+    <table class="w-full whitespace-nowrap">
+      <thead>
+        <tr>
+          <th class="pb-4 pt-6 px-6">Product</th>
+          <th class="pb-4 pt-6 px-6">Price</th>
+          <th class="pb-4 pt-6 px-6">Quantity</th>
+          <th class="pb-4 pt-6 px-6">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in invoice.items" :key="index"
+          class="hover:bg-gray-100 focus-within:bg-gray-100 text-center">
+          <td class="border-t px-6 py-4">{{ item.name }}</td>
+          <td class="border-t px-6 py-4">৳{{ item.price }}</td>
+          <td class="border-t px-6 py-4">{{ item.quantity }}</td>
+          <td class="border-t px-6 py-4">৳{{ item.price * item.quantity }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Total Amount -->
+    <div class="flex justify-end px-8 py-4">
+      <div class="font-bold text-lg">Total Amount: ৳{{ invoice.amount }}</div>
+    </div>
+    <!-- PDF Generation Date -->
+    <div v-if="isPdfGeneration" class="flex justify-between text-green-700 px-8 py-4 text-sm italic">
+      This PDF is generated at {{ new Date().toLocaleString() }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    invoice: Object,
+    contact: Object,
+    isPdfGeneration: Boolean
+  }
+}
+</script>
diff --git a/resources/js/Shared/Icon.vue b/resources/js/Shared/Icon.vue
index 4b6e4467d..439b1ac3c 100644
--- a/resources/js/Shared/Icon.vue
+++ b/resources/js/Shared/Icon.vue
@@ -1,15 +1,44 @@
 <template>
-  <svg v-if="name === 'cheveron-down'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
-  <svg v-else-if="name === 'cheveron-right'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="12.95 10.707 13.657 10 8 4.343 6.586 5.757 10.828 10 6.586 14.243 8 15.657 12.95 10.707" /></svg>
-  <svg v-else-if="name === 'dashboard'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-5.6-4.29a9.95 9.95 0 0 1 11.2 0 8 8 0 1 0-11.2 0zm6.12-7.64l3.02-3.02 1.41 1.41-3.02 3.02a2 2 0 1 1-1.41-1.41z" /></svg>
-  <svg v-else-if="name === 'office'" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill-rule="evenodd" d="M7 0h86v100H57.108V88.418H42.892V100H7V0zm9 64h11v15H16V64zm57 0h11v15H73V64zm-19 0h11v15H54V64zm-19 0h11v15H35V64zM16 37h11v15H16V37zm57 0h11v15H73V37zm-19 0h11v15H54V37zm-19 0h11v15H35V37zM16 11h11v15H16V11zm57 0h11v15H73V11zm-19 0h11v15H54V11zm-19 0h11v15H35V11z" /></svg>
-  <svg v-else-if="name === 'printer'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 16H0V6h20v10h-4v4H4v-4zm2-4v6h8v-6H6zM4 0h12v5H4V0zM2 8v2h2V8H2zm4 0v2h2V8H6z" /></svg>
-  <svg v-else-if="name === 'trash'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z" /></svg>
-  <svg v-else-if="name === 'users'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z" /></svg>
-  <svg v-else-if="name === 'product'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm-2-16h4v2h-4zm-1 4h6v10h-6z"/></svg>
+  <svg v-if="name === 'cheveron-down'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+  </svg>
+  <svg v-else-if="name === 'cheveron-right'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <polygon points="12.95 10.707 13.657 10 8 4.343 6.586 5.757 10.828 10 6.586 14.243 8 15.657 12.95 10.707" />
+  </svg>
+  <svg v-else-if="name === 'dashboard'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path
+      d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-5.6-4.29a9.95 9.95 0 0 1 11.2 0 8 8 0 1 0-11.2 0zm6.12-7.64l3.02-3.02 1.41 1.41-3.02 3.02a2 2 0 1 1-1.41-1.41z" />
+  </svg>
+  <svg v-else-if="name === 'office'" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+    <path fill-rule="evenodd"
+      d="M7 0h86v100H57.108V88.418H42.892V100H7V0zm9 64h11v15H16V64zm57 0h11v15H73V64zm-19 0h11v15H54V64zm-19 0h11v15H35V64zM16 37h11v15H16V37zm57 0h11v15H73V37zm-19 0h11v15H54V37zm-19 0h11v15H35V37zM16 11h11v15H16V11zm57 0h11v15H73V11zm-19 0h11v15H54V11zm-19 0h11v15H35V11z" />
+  </svg>
+  <svg v-else-if="name === 'printer'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M4 16H0V6h20v10h-4v4H4v-4zm2-4v6h8v-6H6zM4 0h12v5H4V0zM2 8v2h2V8H2zm4 0v2h2V8H6z" />
+  </svg>
+  <svg v-else-if="name === 'trash'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z" />
+  </svg>
+  <svg v-else-if="name === 'users'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path
+      d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z" />
+  </svg>
+  <svg v-else-if="name === 'product'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm-2-16h4v2h-4zm-1 4h6v10h-6z" />
+  </svg>
   <svg v-else-if="name === 'invoice'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M16 2H8C6.343 2 5 3.343 5 5v14c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3V5c0-1.657-1.343-3-3-3zM8 4h8c.553 0 1 .447 1 1v2H7V5c0-.553.447-1 1-1zm9 13H7v-2h10v2zm0-4H7v-2h10v2zm-1-8h-8v2h8V5z"/>
-</svg>
+    <path
+      d="M16 2H8C6.343 2 5 3.343 5 5v14c0 1.657 1.343 3 3 3h8c1.657 0 3-1.343 3-3V5c0-1.657-1.343-3-3-3zM8 4h8c.553 0 1 .447 1 1v2H7V5c0-.553.447-1 1-1zm9 13H7v-2h10v2zm0-4H7v-2h10v2zm-1-8h-8v2h8V5z" />
+  </svg>
+
+
+  <svg v-else-if="name === 'download'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+  </svg>
+
+
 
 </template>
 
diff --git a/routes/web.php b/routes/web.php
index 7720cc704..e68cdbf82 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -178,6 +178,9 @@
 Route::get('invoices/{invoice}/view', [InvoicesController::class, 'view'])
     ->name('invoices.view')
     ->middleware('auth');
+Route::get('invoices/{invoice}/download', [InvoicesController::class, 'download'])
+    ->name('invoices.download')
+    ->middleware('auth');
 Route::get('organizations/{organizationId}/contacts', [InvoicesController::class, 'getContacts'])
     ->name('organizations.contacts')
     ->middleware('auth');

From f05df2526ed4dcb62e7e6829ef8441c33254ac1c Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 13:09:55 +0600
Subject: [PATCH 15/45] Fix Invoice Column

---
 resources/js/Shared/Content.vue               |  4 +--
 ....timestamp-1723199851105-ab65d091ab93f.mjs | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 vite.config.js.timestamp-1723199851105-ab65d091ab93f.mjs

diff --git a/resources/js/Shared/Content.vue b/resources/js/Shared/Content.vue
index bf9646bdc..c260932fc 100644
--- a/resources/js/Shared/Content.vue
+++ b/resources/js/Shared/Content.vue
@@ -15,9 +15,9 @@
       <thead>
         <tr>
           <th class="pb-4 pt-6 px-6">Product</th>
-          <th class="pb-4 pt-6 px-6">Price</th>
+          <th class="pb-4 pt-6 px-6">Unit Price</th>
           <th class="pb-4 pt-6 px-6">Quantity</th>
-          <th class="pb-4 pt-6 px-6">Action</th>
+          <th class="pb-4 pt-6 px-6">Product Total</th>
         </tr>
       </thead>
       <tbody>
diff --git a/vite.config.js.timestamp-1723199851105-ab65d091ab93f.mjs b/vite.config.js.timestamp-1723199851105-ab65d091ab93f.mjs
new file mode 100644
index 000000000..e0eb56ed4
--- /dev/null
+++ b/vite.config.js.timestamp-1723199851105-ab65d091ab93f.mjs
@@ -0,0 +1,25 @@
+// vite.config.js
+import { defineConfig } from "file:///C:/Users/Dell/OneDrive/Desktop/pingcrm/node_modules/vite/dist/node/index.js";
+import laravel from "file:///C:/Users/Dell/OneDrive/Desktop/pingcrm/node_modules/laravel-vite-plugin/dist/index.js";
+import vue from "file:///C:/Users/Dell/OneDrive/Desktop/pingcrm/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [
+    laravel({
+      input: "resources/js/app.js",
+      ssr: "resources/js/ssr.js",
+      refresh: true
+    }),
+    vue({
+      template: {
+        transformAssetUrls: {
+          base: null,
+          includeAbsolute: false
+        }
+      }
+    })
+  ]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxEZWxsXFxcXE9uZURyaXZlXFxcXERlc2t0b3BcXFxccGluZ2NybVwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiQzpcXFxcVXNlcnNcXFxcRGVsbFxcXFxPbmVEcml2ZVxcXFxEZXNrdG9wXFxcXHBpbmdjcm1cXFxcdml0ZS5jb25maWcuanNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0M6L1VzZXJzL0RlbGwvT25lRHJpdmUvRGVza3RvcC9waW5nY3JtL3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IGxhcmF2ZWwgZnJvbSAnbGFyYXZlbC12aXRlLXBsdWdpbidcclxuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXHJcblxyXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xyXG4gICAgcGx1Z2luczogW1xyXG4gICAgICAgIGxhcmF2ZWwoe1xyXG4gICAgICAgICAgICBpbnB1dDogJ3Jlc291cmNlcy9qcy9hcHAuanMnLFxyXG4gICAgICAgICAgICBzc3I6ICdyZXNvdXJjZXMvanMvc3NyLmpzJyxcclxuICAgICAgICAgICAgcmVmcmVzaDogdHJ1ZSxcclxuICAgICAgICB9KSxcclxuICAgICAgICB2dWUoe1xyXG4gICAgICAgICAgICB0ZW1wbGF0ZToge1xyXG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtQXNzZXRVcmxzOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgYmFzZTogbnVsbCxcclxuICAgICAgICAgICAgICAgICAgICBpbmNsdWRlQWJzb2x1dGU6IGZhbHNlLFxyXG4gICAgICAgICAgICAgICAgfSxcclxuICAgICAgICAgICAgfSxcclxuICAgICAgICB9KSxcclxuICAgIF0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBZ1QsU0FBUyxvQkFBb0I7QUFDN1UsT0FBTyxhQUFhO0FBQ3BCLE9BQU8sU0FBUztBQUVoQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUN4QixTQUFTO0FBQUEsSUFDTCxRQUFRO0FBQUEsTUFDSixPQUFPO0FBQUEsTUFDUCxLQUFLO0FBQUEsTUFDTCxTQUFTO0FBQUEsSUFDYixDQUFDO0FBQUEsSUFDRCxJQUFJO0FBQUEsTUFDQSxVQUFVO0FBQUEsUUFDTixvQkFBb0I7QUFBQSxVQUNoQixNQUFNO0FBQUEsVUFDTixpQkFBaUI7QUFBQSxRQUNyQjtBQUFBLE1BQ0o7QUFBQSxJQUNKLENBQUM7QUFBQSxFQUNMO0FBQ0osQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

From 0e884ff20802af002b2f8270cb6a297b397a9a76 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 14:53:00 +0600
Subject: [PATCH 16/45] Add Visibility Checkbox for Columns

---
 .../Controllers/OrganizationsController.php   |   7 +-
 package-lock.json                             |  84 +++++++++----
 package.json                                  |   4 +
 resources/css/buttons.css                     |  12 ++
 resources/js/Pages/Organizations/Index.vue    | 111 +++++++++++++++---
 resources/js/app.js                           |   6 +
 6 files changed, 181 insertions(+), 43 deletions(-)

diff --git a/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index db3402e85..37400ad91 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -21,11 +21,16 @@ public function index(): Response
                 ->filter(Request::only('search', 'trashed'))
                 ->paginate(10)
                 ->withQueryString()
-                ->through(fn ($organization) => [
+                ->through(fn($organization) => [
                     'id' => $organization->id,
                     'name' => $organization->name,
                     'phone' => $organization->phone,
                     'city' => $organization->city,
+                    'email' => $organization->email,
+                    'address' => $organization->address,
+                    'region' => $organization->region,
+                    'country' => $organization->country,
+                    'postal_code' => $organization->postal_code,
                     'deleted_at' => $organization->deleted_at,
                 ]),
         ]);
diff --git a/package-lock.json b/package-lock.json
index 70e316c00..4dbb9c0b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,10 @@
     "packages": {
         "": {
             "dependencies": {
+                "@fortawesome/fontawesome-svg-core": "^6.6.0",
+                "@fortawesome/free-brands-svg-icons": "^6.6.0",
+                "@fortawesome/free-solid-svg-icons": "^6.6.0",
+                "@fortawesome/vue-fontawesome": "^3.0.8",
                 "axios": "^1.7.3",
                 "html2pdf.js": "^0.10.2"
             },
@@ -53,7 +57,6 @@
             "version": "7.24.1",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
             "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
-            "dev": true,
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -496,6 +499,56 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
+        "node_modules/@fortawesome/fontawesome-common-types": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+            "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+            "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-brands-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/vue-fontawesome": {
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz",
+            "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==",
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+                "vue": ">= 3.0.0 < 4"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -634,8 +687,7 @@
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.4.15",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-            "dev": true
+            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
         },
         "node_modules/@jridgewell/trace-mapping": {
             "version": "0.3.25",
@@ -932,7 +984,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
             "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
-            "dev": true,
             "dependencies": {
                 "@babel/parser": "^7.23.9",
                 "@vue/shared": "3.4.21",
@@ -945,7 +996,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
             "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-core": "3.4.21",
                 "@vue/shared": "3.4.21"
@@ -955,7 +1005,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
             "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
-            "dev": true,
             "dependencies": {
                 "@babel/parser": "^7.23.9",
                 "@vue/compiler-core": "3.4.21",
@@ -972,7 +1021,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
             "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-dom": "3.4.21",
                 "@vue/shared": "3.4.21"
@@ -982,7 +1030,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
             "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
-            "dev": true,
             "dependencies": {
                 "@vue/shared": "3.4.21"
             }
@@ -991,7 +1038,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
             "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
-            "dev": true,
             "dependencies": {
                 "@vue/reactivity": "3.4.21",
                 "@vue/shared": "3.4.21"
@@ -1001,7 +1047,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
             "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
-            "dev": true,
             "dependencies": {
                 "@vue/runtime-core": "3.4.21",
                 "@vue/shared": "3.4.21",
@@ -1012,7 +1057,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
             "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-ssr": "3.4.21",
                 "@vue/shared": "3.4.21"
@@ -1024,8 +1068,7 @@
         "node_modules/@vue/shared": {
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
-            "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==",
-            "dev": true
+            "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
         },
         "node_modules/acorn": {
             "version": "8.11.3",
@@ -1506,8 +1549,7 @@
         "node_modules/csstype": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-            "dev": true
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
         "node_modules/debug": {
             "version": "4.3.4",
@@ -1618,7 +1660,6 @@
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
             "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-            "dev": true,
             "engines": {
                 "node": ">=0.12"
             },
@@ -1894,8 +1935,7 @@
         "node_modules/estree-walker": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-            "dev": true
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
         },
         "node_modules/esutils": {
             "version": "2.0.3",
@@ -2594,7 +2634,6 @@
             "version": "0.30.8",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
             "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.4.15"
             },
@@ -2685,7 +2724,6 @@
             "version": "3.3.7",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
             "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -2909,8 +2947,7 @@
         "node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-            "dev": true
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
         },
         "node_modules/picomatch": {
             "version": "2.3.1",
@@ -2946,7 +2983,6 @@
             "version": "8.4.38",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
             "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -3416,7 +3452,6 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
             "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -3905,7 +3940,6 @@
             "version": "3.4.21",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
             "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-dom": "3.4.21",
                 "@vue/compiler-sfc": "3.4.21",
diff --git a/package.json b/package.json
index 4cbd84aef..fddd50b56 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,10 @@
         "vue": "^3.2.27"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-brands-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/vue-fontawesome": "^3.0.8",
         "axios": "^1.7.3",
         "html2pdf.js": "^0.10.2"
     }
diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index 9527d7287..b739cc660 100644
--- a/resources/css/buttons.css
+++ b/resources/css/buttons.css
@@ -2,6 +2,18 @@
   @apply px-6 py-3 rounded bg-indigo-600 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-orange-400 focus:bg-orange-400;
 }
 
+.btn-indigo-light {
+    @apply px-6 py-3 rounded bg-indigo-400 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-orange-300 focus:bg-orange-300;
+  }
+
+.btn-green {
+    @apply px-6 py-3 rounded bg-green-600 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-green-400 focus:bg-green-400;
+  }
+
+  .btn-red {
+    @apply px-6 py-3 rounded bg-red-600 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-red-400 focus:bg-red-400;
+  }
+
 .btn-spinner,
 .btn-spinner:after {
   border-radius: 50%;
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 9fc263fa4..af0f4ddaa 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -1,9 +1,10 @@
 <template>
   <div>
+
     <Head title="Organizations" />
     <h1 class="mb-8 text-3xl font-bold">Organizations</h1>
     <div class="flex items-center justify-between mb-6">
-      <search-filter v-model="form.search" class="mr-4 w-full max-w-md" @reset="reset">
+      <search-filter v-model="form.search" class="mr-4 w-2/5 max-w-md" @reset="reset">
         <label class="block text-gray-700">Trashed:</label>
         <select v-model="form.trashed" class="form-select mt-1 w-full">
           <option :value="null" />
@@ -11,41 +12,102 @@
           <option value="only">Only Trashed</option>
         </select>
       </search-filter>
+      <div>
+        <!-- Button to trigger the modal -->
+        <button @click="showModal = true" class="btn-indigo-light ml-24 px-4">
+          <font-awesome-icon icon="table-cells" fade />
+          Visible Columns
+        </button>
+
+        <!-- Modal pop-up -->
+        <div v-if="showModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          <div class="bg-white rounded-lg shadow-lg p-6 w-96">
+            <h2 class="text-xl font-bold mb-4">Select Columns</h2>
+
+            <div class="grid grid-cols-2 gap-4">
+              <div v-for="column in columns" :key="column.name" class="flex items-center">
+                <input type="checkbox" v-model="column.visible" class="mr-2" />
+                <label>{{ column.label }}</label>
+              </div>
+            </div>
+
+            <div class="flex justify-end mt-6">
+              <button @click="applyChanges" class="btn-green px-4 py-2">Apply</button>
+              <button @click="showModal = false" class="ml-4 btn-red px-4 py-2">Cancel</button>
+            </div>
+          </div>
+        </div>
+
+      </div>
       <Link class="btn-indigo" href="/organizations/create">
-        <span>Create</span>
-        <span class="hidden md:inline">&nbsp;Organization</span>
+      <span>Create</span>
+      <span class="hidden md:inline">&nbsp;Organization</span>
       </Link>
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
         <thead>
-          <tr class="text-left font-bold">
-            <th class="pb-4 pt-6 px-6">Name</th>
-            <th class="pb-4 pt-6 px-6">City</th>
-            <th class="pb-4 pt-6 px-6" colspan="2">Phone</th>
+          <tr class="text-left font-bold text-sm">
+            <th class="pb-4 pt-6 pl-3">Name</th>
+            <th class="pb-4 pt-6 pl-3">Phone</th>
+            <th class="pb-4 pt-6 pl-3">Email</th>
+            <th class="pb-4 pt-6 pl-3">Address</th>
+            <th class="pb-4 pt-6 pl-3">City</th>
+            <th class="pb-4 pt-6 pl-3">Region</th>
+            <th class="pb-4 pt-6 pl-3">Country</th>
+            <th class="pb-4 pt-6 pl-6">Postal Code</th>
+
+
           </tr>
         </thead>
         <tbody>
-          <tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
+          <tr v-for="organization in organizations.data" :key="organization.id"
+            class="hover:bg-gray-100 focus-within:bg-gray-100 text-sm">
+            <td class="border-t">
+              <Link class="flex items-center pl-3 py-4 focus:text-indigo-500"
+                :href="`/organizations/${organization.id}/edit`">
+              {{ organization.name }}
+              <icon v-if="organization.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+              </Link>
+            </td>
+            <td class="border-t">
+              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              {{ organization.phone }}
+              </Link>
+            </td>
+            <td class="border-t">
+              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              {{ organization.email }}
+              </Link>
+            </td>
+            <td class="border-t">
+              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              {{ organization.address }}
+              </Link>
+            </td>
+            <td class="border-t">
+              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              {{ organization.city }}
+              </Link>
+            </td>
             <td class="border-t">
-              <Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="`/organizations/${organization.id}/edit`">
-                {{ organization.name }}
-                <icon v-if="organization.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              {{ organization.region }}
               </Link>
             </td>
             <td class="border-t">
-              <Link class="flex items-center px-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-                {{ organization.city }}
+              <Link class="flex items center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              {{ organization.country }}
               </Link>
             </td>
             <td class="border-t">
-              <Link class="flex items-center px-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-                {{ organization.phone }}
+              <Link class="flex items-start pl-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              {{ organization.postal_code }}
               </Link>
             </td>
             <td class="w-px border-t">
-              <Link class="flex items-center px-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-                <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
+              <Link class="flex items-center pl-3" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
               </Link>
             </td>
           </tr>
@@ -88,6 +150,18 @@ export default {
         search: this.filters.search,
         trashed: this.filters.trashed,
       },
+      showModal: false,
+      columns: [
+        { name: 'name', label: 'Name', visible: true },
+        { name: 'phone', label: 'Phone', visible: true },
+        { name: 'email', label: 'Email', visible: true },
+        { name: 'address', label: 'Address', visible: true },
+        { name: 'city', label: 'City', visible: true },
+        { name: 'region', label: 'Region', visible: true },
+        { name: 'country', label: 'Country', visible: true },
+        { name: 'postal_code', label: 'Postal Code', visible: true },
+      ],
+
     }
   },
   watch: {
@@ -102,6 +176,9 @@ export default {
     reset() {
       this.form = mapValues(this.form, () => null)
     },
+    applyChanges() {
+      this.showModal = false
+    },
   },
 }
 </script>
diff --git a/resources/js/app.js b/resources/js/app.js
index b69157cd6..eb6942eaf 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,6 +1,11 @@
 import '../css/app.css'
 import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faTableCells } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faTableCells)
 
 createInertiaApp({
   resolve: name => {
@@ -11,6 +16,7 @@ createInertiaApp({
   setup({ el, App, props, plugin }) {
     createApp({ render: () => h(App, props) })
       .use(plugin)
+      .component('font-awesome-icon', FontAwesomeIcon)
       .mount(el)
   },
 })

From 29d4583857df9d583cb0a462591dc970489c9db9 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 15:01:59 +0600
Subject: [PATCH 17/45] Add Column Visibility Based on Selection

---
 resources/js/Pages/Organizations/Index.vue | 43 +++++++++++-----------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index af0f4ddaa..0eedcc6c4 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -48,65 +48,63 @@
       <table class="w-full whitespace-nowrap">
         <thead>
           <tr class="text-left font-bold text-sm">
-            <th class="pb-4 pt-6 pl-3">Name</th>
-            <th class="pb-4 pt-6 pl-3">Phone</th>
-            <th class="pb-4 pt-6 pl-3">Email</th>
-            <th class="pb-4 pt-6 pl-3">Address</th>
-            <th class="pb-4 pt-6 pl-3">City</th>
-            <th class="pb-4 pt-6 pl-3">Region</th>
-            <th class="pb-4 pt-6 pl-3">Country</th>
-            <th class="pb-4 pt-6 pl-6">Postal Code</th>
-
-
+            <th v-if="isVisible('name')" class="pb-4 pt-6 pl-3">Name</th>
+            <th v-if="isVisible('phone')" class="pb-4 pt-6 pl-3">Phone</th>
+            <th v-if="isVisible('email')" class="pb-4 pt-6 pl-3">Email</th>
+            <th v-if="isVisible('address')" class="pb-4 pt-6 pl-3">Address</th>
+            <th v-if="isVisible('city')" class="pb-4 pt-6 pl-3">City</th>
+            <th v-if="isVisible('region')" class="pb-4 pt-6 pl-3">Region</th>
+            <th v-if="isVisible('country')" class="pb-4 pt-6 pl-3">Country</th>
+            <th v-if="isVisible('postal_code')" class="pb-4 pt-6 pl-6">Postal Code</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="organization in organizations.data" :key="organization.id"
             class="hover:bg-gray-100 focus-within:bg-gray-100 text-sm">
-            <td class="border-t">
+            <td v-if="isVisible('name')" class="border-t">
               <Link class="flex items-center pl-3 py-4 focus:text-indigo-500"
                 :href="`/organizations/${organization.id}/edit`">
               {{ organization.name }}
               <icon v-if="organization.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
               </Link>
             </td>
-            <td class="border-t">
+            <td v-if="isVisible('phone')" class="border-t">
               <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               {{ organization.phone }}
               </Link>
             </td>
-            <td class="border-t">
+            <td v-if="isVisible('email')" class="border-t">
               <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               {{ organization.email }}
               </Link>
             </td>
-            <td class="border-t">
+            <td v-if="isVisible('address')" class="border-t">
               <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               {{ organization.address }}
               </Link>
             </td>
-            <td class="border-t">
+            <td v-if="isVisible('city')" class="border-t">
               <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               {{ organization.city }}
               </Link>
             </td>
-            <td class="border-t">
+            <td v-if="isVisible('region')" class="border-t">
               <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               {{ organization.region }}
               </Link>
             </td>
-            <td class="border-t">
-              <Link class="flex items center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+            <td v-if="isVisible('country')" class="border-t">
+              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               {{ organization.country }}
               </Link>
             </td>
-            <td class="border-t">
+            <td v-if="isVisible('postal_code')" class="border-t">
               <Link class="flex items-start pl-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               {{ organization.postal_code }}
               </Link>
             </td>
-            <td class="w-px border-t">
-              <Link class="flex items-center pl-3" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+            <td class="border-t">
+              <Link class="flex items-center px-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
               </Link>
             </td>
@@ -176,6 +174,9 @@ export default {
     reset() {
       this.form = mapValues(this.form, () => null)
     },
+    isVisible(columnName) {
+      return this.columns.find(column => column.name === columnName).visible
+    },
     applyChanges() {
       this.showModal = false
     },

From 61e1adf1228c92c21677d97952a54dfa712de48e Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 15:06:02 +0600
Subject: [PATCH 18/45] Add Migration for Setting

---
 app/Models/Settings.php                       | 14 +++++++++
 ...024_08_12_090302_create_settings_table.php | 29 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 app/Models/Settings.php
 create mode 100644 database/migrations/2024_08_12_090302_create_settings_table.php

diff --git a/app/Models/Settings.php b/app/Models/Settings.php
new file mode 100644
index 000000000..f916cbda2
--- /dev/null
+++ b/app/Models/Settings.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Settings extends Model
+{
+
+    use HasFactory;
+    protected $table = 'settings';
+    protected $fillable = ['path', 'value'];
+}
diff --git a/database/migrations/2024_08_12_090302_create_settings_table.php b/database/migrations/2024_08_12_090302_create_settings_table.php
new file mode 100644
index 000000000..30cd88c88
--- /dev/null
+++ b/database/migrations/2024_08_12_090302_create_settings_table.php
@@ -0,0 +1,29 @@
+<?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('settings', function (Blueprint $table) {
+            $table->id();
+            $table->string('path')->unique();
+            $table->mediumText('value')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('settings');
+    }
+};

From 3fccd8489158f0e0dda6452621381801b56bca42 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 15:37:20 +0600
Subject: [PATCH 19/45] Add Apply Column Visibility Filters

---
 .../Controllers/OrganizationsController.php   | 20 ++++++++++++
 package-lock.json                             | 22 ++++++++++++-
 package.json                                  |  3 +-
 resources/js/Pages/Organizations/Index.vue    | 31 +++++++++++++------
 routes/web.php                                |  5 +++
 5 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index 37400ad91..5e973f1c2 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -3,18 +3,25 @@
 namespace App\Http\Controllers;
 
 use App\Models\Organization;
+use App\Models\Settings;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
 use Illuminate\Support\Facades\Request;
 use Inertia\Inertia;
 use Inertia\Response;
+use Illuminate\Http\Request as HttpRequest;
 
 class OrganizationsController extends Controller
 {
     public function index(): Response
     {
+        $userId = Auth::user()->id;
+        $path = "org/column/{$userId}";
+        $settings = Settings::where('path', $path)->first();
+        $visibleColumns = $settings ? json_decode($settings->value, true) : [];
         return Inertia::render('Organizations/Index', [
+            'visibleColumns' => $visibleColumns,
             'filters' => Request::all('search', 'trashed'),
             'organizations' => Auth::user()->account->organizations()
                 ->orderBy('name')
@@ -109,4 +116,17 @@ public function restore(Organization $organization): RedirectResponse
 
         return Redirect::back()->with('success', 'Organization restored.');
     }
+
+    public function saveColumnVisibility(HttpRequest $request): RedirectResponse
+    {
+        $userId = Auth::user()->id;
+        $path = "org/column/{$userId}";
+
+        $settings = Settings::updateOrCreate(
+            ['path' => $path],
+            ['value' => json_encode($request->input('columns'))]
+        );
+
+        return Redirect::back();
+    }
 }
diff --git a/package-lock.json b/package-lock.json
index 4dbb9c0b3..a48128d1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
                 "@fortawesome/free-solid-svg-icons": "^6.6.0",
                 "@fortawesome/vue-fontawesome": "^3.0.8",
                 "axios": "^1.7.3",
-                "html2pdf.js": "^0.10.2"
+                "html2pdf.js": "^0.10.2",
+                "ziggy-js": "^2.3.0"
             },
             "devDependencies": {
                 "@inertiajs/vue3": "^1.0.15",
@@ -4124,6 +4125,25 @@
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
+        },
+        "node_modules/ziggy-js": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/ziggy-js/-/ziggy-js-2.3.0.tgz",
+            "integrity": "sha512-g2m/WgC/7KkqZzYFe87LmSVqVbZ6fGkx0RCKR+0mrUvn4xpou3h4s0IIxl7TYsyBspEFebGspdf01JFo1gaCZA==",
+            "dependencies": {
+                "qs": "~6.9.7"
+            }
+        },
+        "node_modules/ziggy-js/node_modules/qs": {
+            "version": "6.9.7",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+            "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+            "engines": {
+                "node": ">=0.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
         }
     }
 }
diff --git a/package.json b/package.json
index fddd50b56..37e7ed47f 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/vue-fontawesome": "^3.0.8",
         "axios": "^1.7.3",
-        "html2pdf.js": "^0.10.2"
+        "html2pdf.js": "^0.10.2",
+        "ziggy-js": "^2.3.0"
     }
 }
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 0eedcc6c4..6f520d885 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -120,7 +120,7 @@
 </template>
 
 <script>
-import { Head, Link } from '@inertiajs/vue3'
+import { Head, Link, } from '@inertiajs/vue3'
 import Icon from '@/Shared/Icon.vue'
 import pickBy from 'lodash/pickBy'
 import Layout from '@/Shared/Layout.vue'
@@ -128,6 +128,7 @@ import throttle from 'lodash/throttle'
 import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
+// import route from 'ziggy-js'
 
 export default {
   components: {
@@ -141,6 +142,7 @@ export default {
   props: {
     filters: Object,
     organizations: Object,
+    visibleColumns: Array,
   },
   data() {
     return {
@@ -150,14 +152,14 @@ export default {
       },
       showModal: false,
       columns: [
-        { name: 'name', label: 'Name', visible: true },
-        { name: 'phone', label: 'Phone', visible: true },
-        { name: 'email', label: 'Email', visible: true },
-        { name: 'address', label: 'Address', visible: true },
-        { name: 'city', label: 'City', visible: true },
-        { name: 'region', label: 'Region', visible: true },
-        { name: 'country', label: 'Country', visible: true },
-        { name: 'postal_code', label: 'Postal Code', visible: true },
+        { name: 'name', label: 'Name', visible: this.visibleColumns.includes('name') },
+        { name: 'phone', label: 'Phone', visible: this.visibleColumns.includes('phone') },
+        { name: 'email', label: 'Email', visible: this.visibleColumns.includes('email') },
+        { name: 'address', label: 'Address', visible: this.visibleColumns.includes('address') },
+        { name: 'city', label: 'City', visible: this.visibleColumns.includes('city') },
+        { name: 'region', label: 'Region', visible: this.visibleColumns.includes('region') },
+        { name: 'country', label: 'Country', visible: this.visibleColumns.includes('country') },
+        { name: 'postal_code', label: 'Postal Code', visible: this.visibleColumns.includes('postal_code') },
       ],
 
     }
@@ -178,7 +180,16 @@ export default {
       return this.columns.find(column => column.name === columnName).visible
     },
     applyChanges() {
-      this.showModal = false
+      this.showModal = false;
+
+      const selectedColumns = this.columns
+        .filter(column => column.visible)
+        .map(column => column.name);
+
+
+      this.$inertia.post('/organizations/column', {
+        columns: selectedColumns,
+      });
     },
   },
 }
diff --git a/routes/web.php b/routes/web.php
index e68cdbf82..8e07c6d9f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -184,3 +184,8 @@
 Route::get('organizations/{organizationId}/contacts', [InvoicesController::class, 'getContacts'])
     ->name('organizations.contacts')
     ->middleware('auth');
+
+//Column Visibility
+Route::post('organizations/column', [OrganizationsController::class, 'saveColumnVisibility'])
+    ->name('organizations.column')
+    ->middleware('auth');

From 3b04353328c9a212ae0b11cfc7ea3d706578900f Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 16:11:16 +0600
Subject: [PATCH 20/45] Add Default Columns

---
 .../Controllers/OrganizationsController.php   | 24 +++++++--------
 app/Models/Organization.php                   | 29 ++++++++++++++++++-
 resources/js/Pages/Organizations/Index.vue    | 11 ++++---
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index 5e973f1c2..d6f7c4ac5 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -20,26 +20,26 @@ public function index(): Response
         $path = "org/column/{$userId}";
         $settings = Settings::where('path', $path)->first();
         $visibleColumns = $settings ? json_decode($settings->value, true) : [];
+
+        $allColumns = Organization::allColumns();
+
+        $columnsToSelect = array_intersect($allColumns, $visibleColumns);
+
+        //if visible column does not exist in all columns, then set default columns
+        if (empty($visibleColumns) || empty($columnsToSelect)) {
+            $columnsToSelect = Organization::defaultColumns();
+        }
+
         return Inertia::render('Organizations/Index', [
             'visibleColumns' => $visibleColumns,
             'filters' => Request::all('search', 'trashed'),
             'organizations' => Auth::user()->account->organizations()
+                ->select($columnsToSelect)
                 ->orderBy('name')
                 ->filter(Request::only('search', 'trashed'))
                 ->paginate(10)
                 ->withQueryString()
-                ->through(fn($organization) => [
-                    'id' => $organization->id,
-                    'name' => $organization->name,
-                    'phone' => $organization->phone,
-                    'city' => $organization->city,
-                    'email' => $organization->email,
-                    'address' => $organization->address,
-                    'region' => $organization->region,
-                    'country' => $organization->country,
-                    'postal_code' => $organization->postal_code,
-                    'deleted_at' => $organization->deleted_at,
-                ]),
+                ->through(fn($organization) => $organization->only($columnsToSelect)),
         ]);
     }
 
diff --git a/app/Models/Organization.php b/app/Models/Organization.php
index fd5647bf3..23fc3d5c1 100644
--- a/app/Models/Organization.php
+++ b/app/Models/Organization.php
@@ -17,6 +17,33 @@ public function resolveRouteBinding($value, $field = null)
         return $this->where($field ?? 'id', $value)->withTrashed()->firstOrFail();
     }
 
+    public static function allColumns(): array
+    {
+        return [
+            'id',
+            'name',
+            'phone',
+            'city',
+            'email',
+            'address',
+            'region',
+            'country',
+            'postal_code',
+            'deleted_at'
+        ];
+    }
+
+    public static function defaultColumns(): array
+    {
+        return [
+            'id',
+            'name',
+            'phone',
+            'city',
+            'email'
+        ];
+    }
+
     public function contacts(): HasMany
     {
         return $this->hasMany(Contact::class);
@@ -25,7 +52,7 @@ public function contacts(): HasMany
     public function scopeFilter($query, array $filters)
     {
         $query->when($filters['search'] ?? null, function ($query, $search) {
-            $query->where('name', 'like', '%'.$search.'%');
+            $query->where('name', 'like', '%' . $search . '%');
         })->when($filters['trashed'] ?? null, function ($query, $trashed) {
             if ($trashed === 'with') {
                 $query->withTrashed();
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 6f520d885..f24fafc75 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -26,7 +26,7 @@
 
             <div class="grid grid-cols-2 gap-4">
               <div v-for="column in columns" :key="column.name" class="flex items-center">
-                <input type="checkbox" v-model="column.visible" class="mr-2" />
+                <input type="checkbox" v-model="column.visible" class="mr-2" :disabled="column.disabled" />
                 <label>{{ column.label }}</label>
               </div>
             </div>
@@ -128,7 +128,6 @@ import throttle from 'lodash/throttle'
 import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
-// import route from 'ziggy-js'
 
 export default {
   components: {
@@ -152,11 +151,11 @@ export default {
       },
       showModal: false,
       columns: [
-        { name: 'name', label: 'Name', visible: this.visibleColumns.includes('name') },
-        { name: 'phone', label: 'Phone', visible: this.visibleColumns.includes('phone') },
-        { name: 'email', label: 'Email', visible: this.visibleColumns.includes('email') },
+        { name: 'name', label: 'Name', visible: this.visibleColumns.includes('name') || true, disabled: true },
+        { name: 'phone', label: 'Phone', visible: this.visibleColumns.includes('phone') || true, disabled: true },
+        { name: 'email', label: 'Email', visible: this.visibleColumns.includes('email') || true, disabled: true },
         { name: 'address', label: 'Address', visible: this.visibleColumns.includes('address') },
-        { name: 'city', label: 'City', visible: this.visibleColumns.includes('city') },
+        { name: 'city', label: 'City', visible: this.visibleColumns.includes('city') || true, disabled: true },
         { name: 'region', label: 'Region', visible: this.visibleColumns.includes('region') },
         { name: 'country', label: 'Country', visible: this.visibleColumns.includes('country') },
         { name: 'postal_code', label: 'Postal Code', visible: this.visibleColumns.includes('postal_code') },

From 7a802bbab2a290318b6c421011d077b5bd7cc577 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 18:26:19 +0600
Subject: [PATCH 21/45] Add Re-Position Columns

---
 .../Controllers/OrganizationsController.php   | 10 ++-
 package-lock.json                             | 33 ++++++++++
 package.json                                  |  2 +
 resources/js/Pages/Organizations/Index.vue    | 61 ++++---------------
 resources/js/app.js                           |  4 +-
 5 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index d6f7c4ac5..2e5edee0d 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -25,7 +25,10 @@ public function index(): Response
 
         $columnsToSelect = array_intersect($allColumns, $visibleColumns);
 
-        //if visible column does not exist in all columns, then set default columns
+        if (!in_array('id', $columnsToSelect)) {
+            $columnsToSelect[] = 'id';
+        }
+
         if (empty($visibleColumns) || empty($columnsToSelect)) {
             $columnsToSelect = Organization::defaultColumns();
         }
@@ -39,7 +42,10 @@ public function index(): Response
                 ->filter(Request::only('search', 'trashed'))
                 ->paginate(10)
                 ->withQueryString()
-                ->through(fn($organization) => $organization->only($columnsToSelect)),
+                ->through(
+                    fn($organization) =>
+                    $organization->only($columnsToSelect)
+                ),
         ]);
     }
 
diff --git a/package-lock.json b/package-lock.json
index a48128d1f..77389d2af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
                 "@fortawesome/vue-fontawesome": "^3.0.8",
                 "axios": "^1.7.3",
                 "html2pdf.js": "^0.10.2",
+                "vue-draggable-next": "^2.2.1",
+                "vuedraggable": "^4.1.0",
                 "ziggy-js": "^2.3.0"
             },
             "devDependencies": {
@@ -3449,6 +3451,12 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz",
+            "integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==",
+            "peer": true
+        },
         "node_modules/source-map-js": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -3957,6 +3965,15 @@
                 }
             }
         },
+        "node_modules/vue-draggable-next": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/vue-draggable-next/-/vue-draggable-next-2.2.1.tgz",
+            "integrity": "sha512-EAMS1IRHF0kZO0o5PMOinsQsXIqsrKT1hKmbICxG3UEtn7zLFkLxlAtajcCcUTisNvQ6TtCB5COjD9a1raNADw==",
+            "peerDependencies": {
+                "sortablejs": "^1.14.0",
+                "vue": "^3.2.2"
+            }
+        },
         "node_modules/vue-eslint-parser": {
             "version": "8.3.0",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -3981,6 +3998,22 @@
                 "eslint": ">=6.0.0"
             }
         },
+        "node_modules/vuedraggable": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+            "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+            "dependencies": {
+                "sortablejs": "1.14.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.1"
+            }
+        },
+        "node_modules/vuedraggable/node_modules/sortablejs": {
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+            "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 37e7ed47f..30baca220 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
         "@fortawesome/vue-fontawesome": "^3.0.8",
         "axios": "^1.7.3",
         "html2pdf.js": "^0.10.2",
+        "vue-draggable-next": "^2.2.1",
+        "vuedraggable": "^4.1.0",
         "ziggy-js": "^2.3.0"
     }
 }
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index f24fafc75..c59aa79d7 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -47,62 +47,25 @@
     <div class="bg-white rounded-md shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
         <thead>
-          <tr class="text-left font-bold text-sm">
-            <th v-if="isVisible('name')" class="pb-4 pt-6 pl-3">Name</th>
-            <th v-if="isVisible('phone')" class="pb-4 pt-6 pl-3">Phone</th>
-            <th v-if="isVisible('email')" class="pb-4 pt-6 pl-3">Email</th>
-            <th v-if="isVisible('address')" class="pb-4 pt-6 pl-3">Address</th>
-            <th v-if="isVisible('city')" class="pb-4 pt-6 pl-3">City</th>
-            <th v-if="isVisible('region')" class="pb-4 pt-6 pl-3">Region</th>
-            <th v-if="isVisible('country')" class="pb-4 pt-6 pl-3">Country</th>
-            <th v-if="isVisible('postal_code')" class="pb-4 pt-6 pl-6">Postal Code</th>
-          </tr>
+          <draggable v-model="columns" tag="tr" class="cursor-pointer text-left font-bold text-sm hover:cursor-grab ">
+            <template #item="{ element: column }">
+              <th v-if="isVisible(column.name)" class="pb-4 pt-6 pl-3">
+                <font-awesome-icon icon="grip-vertical" />
+                {{ column.label }}
+              </th>
+            </template>
+          </draggable>
         </thead>
         <tbody>
           <tr v-for="organization in organizations.data" :key="organization.id"
             class="hover:bg-gray-100 focus-within:bg-gray-100 text-sm">
-            <td v-if="isVisible('name')" class="border-t">
-              <Link class="flex items-center pl-3 py-4 focus:text-indigo-500"
+            <td v-for="column in columns" :key="column.name" class="border-t">
+              <Link class="flex items-center pl-3 py-4 focus:text-indigo-500" v-if="isVisible(column.name)"
                 :href="`/organizations/${organization.id}/edit`">
-              {{ organization.name }}
+              {{ organization[column.name] }}
               <icon v-if="organization.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
               </Link>
             </td>
-            <td v-if="isVisible('phone')" class="border-t">
-              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.phone }}
-              </Link>
-            </td>
-            <td v-if="isVisible('email')" class="border-t">
-              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.email }}
-              </Link>
-            </td>
-            <td v-if="isVisible('address')" class="border-t">
-              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.address }}
-              </Link>
-            </td>
-            <td v-if="isVisible('city')" class="border-t">
-              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.city }}
-              </Link>
-            </td>
-            <td v-if="isVisible('region')" class="border-t">
-              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.region }}
-              </Link>
-            </td>
-            <td v-if="isVisible('country')" class="border-t">
-              <Link class="flex items-center pl-3 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.country }}
-              </Link>
-            </td>
-            <td v-if="isVisible('postal_code')" class="border-t">
-              <Link class="flex items-start pl-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.postal_code }}
-              </Link>
-            </td>
             <td class="border-t">
               <Link class="flex items-center px-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
               <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
@@ -128,6 +91,7 @@ import throttle from 'lodash/throttle'
 import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
+import draggable from 'vuedraggable'
 
 export default {
   components: {
@@ -136,6 +100,7 @@ export default {
     Link,
     Pagination,
     SearchFilter,
+    draggable,
   },
   layout: Layout,
   props: {
diff --git a/resources/js/app.js b/resources/js/app.js
index eb6942eaf..aa1e4217a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,9 +3,9 @@ import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faTableCells } from '@fortawesome/free-solid-svg-icons'
+import { faTableCells , faGripVertical} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faTableCells)
+library.add(faTableCells,faGripVertical)
 
 createInertiaApp({
   resolve: name => {

From 59ed6a67be89c942c12c6b1631e5fdaee1b51319 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 18:45:02 +0600
Subject: [PATCH 22/45] Add Fixed Table Header & Scrollbar

---
 app/Http/Controllers/OrganizationsController.php | 2 +-
 resources/js/Pages/Organizations/Index.vue       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index 2e5edee0d..7ee8142ca 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -40,7 +40,7 @@ public function index(): Response
                 ->select($columnsToSelect)
                 ->orderBy('name')
                 ->filter(Request::only('search', 'trashed'))
-                ->paginate(10)
+                ->paginate(25)
                 ->withQueryString()
                 ->through(
                     fn($organization) =>
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index c59aa79d7..5a2d11249 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -44,12 +44,12 @@
       <span class="hidden md:inline">&nbsp;Organization</span>
       </Link>
     </div>
-    <div class="bg-white rounded-md shadow overflow-x-auto">
+    <div class="bg-white rounded-md shadow overflow-x-auto max-h-96">
       <table class="w-full whitespace-nowrap">
-        <thead>
-          <draggable v-model="columns" tag="tr" class="cursor-pointer text-left font-bold text-sm hover:cursor-grab ">
+        <thead class="bg-white sticky top-0 z-10">
+          <draggable v-model="columns" tag="tr" class="cursor-pointer text-left font-bold text-sm hover:cursor-grab">
             <template #item="{ element: column }">
-              <th v-if="isVisible(column.name)" class="pb-4 pt-6 pl-3">
+              <th v-if="isVisible(column.name)" class="pb-4 pt-6 pl-3 sticky top-0 z-10">
                 <font-awesome-icon icon="grip-vertical" />
                 {{ column.label }}
               </th>

From 248d2e767e34a9d366f6af5453e1a99a000ba6e1 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 12 Aug 2024 19:13:07 +0600
Subject: [PATCH 23/45] Remove id From DefaultProps

---
 app/Models/Organization.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/Models/Organization.php b/app/Models/Organization.php
index 23fc3d5c1..b3ac58e5c 100644
--- a/app/Models/Organization.php
+++ b/app/Models/Organization.php
@@ -20,7 +20,6 @@ public function resolveRouteBinding($value, $field = null)
     public static function allColumns(): array
     {
         return [
-            'id',
             'name',
             'phone',
             'city',
@@ -36,7 +35,6 @@ public static function allColumns(): array
     public static function defaultColumns(): array
     {
         return [
-            'id',
             'name',
             'phone',
             'city',

From aa0878a4ecdbfb863d9a1934a28f34317a32d7c6 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 14 Aug 2024 15:45:19 +0600
Subject: [PATCH 24/45] Fix Spacing

---
 resources/js/Shared/Layout.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 5c6217b19..1bf543599 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -6,11 +6,13 @@
         <div class="md:flex md:shrink-0">
           <div class="flex items-center justify-between px-6 py-4 bg-indigo-900 md:shrink-0 md:justify-center md:w-56">
             <Link class="mt-1" href="/">
-              <logo class="fill-white" width="120" height="28" />
+            <logo class="fill-white" width="120" height="28" />
             </Link>
             <dropdown class="md:hidden" placement="bottom-end">
               <template #default>
-                <svg class="w-6 h-6 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
+                <svg class="w-6 h-6 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+                </svg>
               </template>
               <template #dropdown>
                 <div class="mt-2 px-8 py-4 bg-indigo-800 rounded shadow-lg">
@@ -19,7 +21,8 @@
               </template>
             </dropdown>
           </div>
-          <div class="md:text-md flex items-center justify-between p-4 w-full text-sm bg-white border-b md:px-12 md:py-0">
+          <div
+            class="md:text-md flex items-center justify-between p-4 w-full text-sm bg-white border-b md:px-12 md:py-0">
             <div class="mr-4 mt-1">{{ auth.user.account.name }}</div>
             <dropdown class="mt-1" placement="bottom-end">
               <template #default>
@@ -28,14 +31,17 @@
                     <span>{{ auth.user.first_name }}</span>
                     <span class="hidden md:inline">&nbsp;{{ auth.user.last_name }}</span>
                   </div>
-                  <icon class="w-5 h-5 fill-gray-700 group-hover:fill-indigo-600 focus:fill-indigo-600" name="cheveron-down" />
+                  <icon class="w-5 h-5 fill-gray-700 group-hover:fill-indigo-600 focus:fill-indigo-600"
+                    name="cheveron-down" />
                 </div>
               </template>
               <template #dropdown>
                 <div class="mt-2 py-2 text-sm bg-white rounded shadow-xl">
-                  <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500" :href="`/users/${auth.user.id}/edit`">My Profile</Link>
+                  <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500"
+                    :href="`/users/${auth.user.id}/edit`">My Profile</Link>
                   <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500" href="/users">Manage Users</Link>
-                  <Link class="block px-6 py-2 w-full text-left hover:text-white hover:bg-indigo-500" href="/logout" method="delete" as="button">Logout</Link>
+                  <Link class="block px-6 py-2 w-full text-left hover:text-white hover:bg-indigo-500" href="/logout"
+                    method="delete" as="button">Logout</Link>
                 </div>
               </template>
             </dropdown>
@@ -43,7 +49,7 @@
         </div>
         <div class="md:flex md:grow md:overflow-hidden">
           <main-menu class="hidden shrink-0 p-12 w-56 bg-indigo-800 overflow-y-auto md:block" />
-          <div class="px-4 py-8 md:flex-1 md:p-12 md:overflow-y-auto" scroll-region>
+          <div class="px-2 py-4 md:flex-1 md:p-6 md:overflow-y-auto" scroll-region>
             <flash-messages />
             <slot />
           </div>

From 5d9dae1889c3eaf912d3f59cb74369961b7d88ba Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 14 Aug 2024 16:29:35 +0600
Subject: [PATCH 25/45] Add Csv Input

---
 resources/js/Pages/Organizations/Index.vue | 29 ++++++++++++++++------
 resources/js/app.js                        |  4 +--
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 5a2d11249..80c3bb1f2 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -14,9 +14,8 @@
       </search-filter>
       <div>
         <!-- Button to trigger the modal -->
-        <button @click="showModal = true" class="btn-indigo-light ml-24 px-4">
-          <font-awesome-icon icon="table-cells" fade />
-          Visible Columns
+        <button @click="showModal = true" class="btn-indigo mx-4" title="Visible Columns">
+          <font-awesome-icon icon="table-cells" />
         </button>
 
         <!-- Modal pop-up -->
@@ -38,11 +37,17 @@
           </div>
         </div>
 
+        <button class="btn-indigo mx-4" title="Visible Columns" @click="triggerFileInput">
+          <font-awesome-icon icon="file-import" />
+        </button>
+        <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload" style="display: none;" />
+
+        <Link class="btn-indigo mx-4" href="/organizations/create" title="Create Organization">
+        <font-awesome-icon icon="plus" />
+        </Link>
       </div>
-      <Link class="btn-indigo" href="/organizations/create">
-      <span>Create</span>
-      <span class="hidden md:inline">&nbsp;Organization</span>
-      </Link>
+
+
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto max-h-96">
       <table class="w-full whitespace-nowrap">
@@ -155,6 +160,16 @@ export default {
         columns: selectedColumns,
       });
     },
+    triggerFileInput() {
+      this.$refs.fileInput.click();
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        // Handle the CSV file upload logic here
+        console.log("CSV file selected:", file);
+      }
+    }
   },
 }
 </script>
diff --git a/resources/js/app.js b/resources/js/app.js
index aa1e4217a..bda6ca5ce 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,9 +3,9 @@ import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faTableCells , faGripVertical} from '@fortawesome/free-solid-svg-icons'
+import { faTableCells , faGripVertical, faPlus, faFileImport} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faTableCells,faGripVertical)
+library.add(faTableCells,faGripVertical,faPlus,faFileImport)
 
 createInertiaApp({
   resolve: name => {

From dd2d4790b33a386d5abb31909d9d8318909faa39 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 14 Aug 2024 16:49:39 +0600
Subject: [PATCH 26/45] Add Show  Csv Headers in Popup

---
 package-lock.json                          | 13 ++++++--
 package.json                               |  1 +
 resources/js/Pages/Organizations/Index.vue | 37 +++++++++++++++++++---
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 77389d2af..739d4dd6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,7 @@
     "requires": true,
     "packages": {
         "": {
+            "name": "pingcrm",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.6.0",
                 "@fortawesome/free-brands-svg-icons": "^6.6.0",
@@ -11,6 +12,7 @@
                 "@fortawesome/vue-fontawesome": "^3.0.8",
                 "axios": "^1.7.3",
                 "html2pdf.js": "^0.10.2",
+                "papaparse": "^5.4.1",
                 "vue-draggable-next": "^2.2.1",
                 "vuedraggable": "^4.1.0",
                 "ziggy-js": "^2.3.0"
@@ -1219,9 +1221,9 @@
             }
         },
         "node_modules/axios": {
-            "version": "1.7.3",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
-            "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+            "version": "1.7.4",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+            "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
             "dependencies": {
                 "follow-redirects": "^1.15.6",
                 "form-data": "^4.0.0",
@@ -2871,6 +2873,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/papaparse": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+            "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
+        },
         "node_modules/parent-module": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
diff --git a/package.json b/package.json
index 30baca220..10f1661cc 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.8",
         "axios": "^1.7.3",
         "html2pdf.js": "^0.10.2",
+        "papaparse": "^5.4.1",
         "vue-draggable-next": "^2.2.1",
         "vuedraggable": "^4.1.0",
         "ziggy-js": "^2.3.0"
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 80c3bb1f2..70b6eab84 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -13,12 +13,9 @@
         </select>
       </search-filter>
       <div>
-        <!-- Button to trigger the modal -->
         <button @click="showModal = true" class="btn-indigo mx-4" title="Visible Columns">
           <font-awesome-icon icon="table-cells" />
         </button>
-
-        <!-- Modal pop-up -->
         <div v-if="showModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
           <div class="bg-white rounded-lg shadow-lg p-6 w-96">
             <h2 class="text-xl font-bold mb-4">Select Columns</h2>
@@ -42,6 +39,24 @@
         </button>
         <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload" style="display: none;" />
 
+        <div v-if="showCsvModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          <div class="bg-white rounded-lg shadow-lg p-6 w-96">
+            <h2 class="text-xl font-bold mb-4">CSV Columns</h2>
+
+            <div class="grid grid-cols-1 gap-4">
+              <div v-for="csvColumn in csvColumns" :key="csvColumn" class="flex items-center">
+                <label>{{ csvColumn }}</label>
+              </div>
+
+            </div>
+
+            <div class="flex justify-end mt-6">
+              <button @click="applyCsvChanges" class="btn-green px-4 py-2">Apply</button>
+              <button @click="showCsvModal = false" class="ml-4 btn-red px-4 py-2">Cancel</button>
+            </div>
+          </div>
+        </div>
+
         <Link class="btn-indigo mx-4" href="/organizations/create" title="Create Organization">
         <font-awesome-icon icon="plus" />
         </Link>
@@ -97,6 +112,7 @@ import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
 import draggable from 'vuedraggable'
+import Papa from 'papaparse'
 
 export default {
   components: {
@@ -120,6 +136,7 @@ export default {
         trashed: this.filters.trashed,
       },
       showModal: false,
+      showCsvModal: false,
       columns: [
         { name: 'name', label: 'Name', visible: this.visibleColumns.includes('name') || true, disabled: true },
         { name: 'phone', label: 'Phone', visible: this.visibleColumns.includes('phone') || true, disabled: true },
@@ -130,6 +147,7 @@ export default {
         { name: 'country', label: 'Country', visible: this.visibleColumns.includes('country') },
         { name: 'postal_code', label: 'Postal Code', visible: this.visibleColumns.includes('postal_code') },
       ],
+      csvColumns: [],
 
     }
   },
@@ -166,8 +184,17 @@ export default {
     handleFileUpload(event) {
       const file = event.target.files[0];
       if (file) {
-        // Handle the CSV file upload logic here
-        console.log("CSV file selected:", file);
+        Papa.parse(file, {
+          header: true,
+          complete: (results) => {
+            console.log("CSV file contents:", results.meta.fields);
+            this.csvColumns = results.meta.fields;
+            this.showCsvModal = true
+          },
+          error: (error) => {
+            console.error("Error parsing CSV file:", error);
+          }
+        });
       }
     }
   },

From c132a15c9381c9d5f4facb3120af758b5199c231 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 14 Aug 2024 18:37:50 +0600
Subject: [PATCH 27/45] Add Map CSV Headers & DB Columns with CSV-Data

---
 resources/js/Pages/Organizations/Index.vue | 65 +++++++++++++++++++---
 1 file changed, 58 insertions(+), 7 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 70b6eab84..4736a527a 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -43,12 +43,33 @@
           <div class="bg-white rounded-lg shadow-lg p-6 w-96">
             <h2 class="text-xl font-bold mb-4">CSV Columns</h2>
 
-            <div class="grid grid-cols-1 gap-4">
-              <div v-for="csvColumn in csvColumns" :key="csvColumn" class="flex items-center">
-                <label>{{ csvColumn }}</label>
-              </div>
-
-            </div>
+            <table class="w-full table-auto border-collapse">
+              <thead>
+                <tr>
+                  <th class="border-b font-bold text-left p-2">CSV Column</th>
+                  <th class="border-b font-bold text-left p-2">DB Column</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="csvColumn in csvColumns" :key="csvColumn" :class="{
+                  'bg-green-500': matchingColumn(csvColumn),
+                  'bg-yellow-500': !matchingColumn(csvColumn)
+                }">
+                  <td class="border-b p-2">{{ csvColumn }}</td>
+                  <td class="border-b p-2 w-1/2">
+                    <label v-if="matchingColumn(csvColumn)">{{ matchingColumn(csvColumn).name }}</label>
+                    <select v-else v-model="selectedDbColumns[csvColumn]"
+                      style="width: 120px; background-color:transparent; ">
+                      <option value="" disabled>Select DB Column</option>
+                      <option v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
+                        :value="dbColumn.name">
+                        {{ dbColumn.name }}
+                      </option>
+                    </select>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
 
             <div class="flex justify-end mt-6">
               <button @click="applyCsvChanges" class="btn-green px-4 py-2">Apply</button>
@@ -57,6 +78,7 @@
           </div>
         </div>
 
+
         <Link class="btn-indigo mx-4" href="/organizations/create" title="Create Organization">
         <font-awesome-icon icon="plus" />
         </Link>
@@ -148,7 +170,8 @@ export default {
         { name: 'postal_code', label: 'Postal Code', visible: this.visibleColumns.includes('postal_code') },
       ],
       csvColumns: [],
-
+      selectedDbColumns: {},
+      csvData: []
     }
   },
   watch: {
@@ -189,14 +212,42 @@ export default {
           complete: (results) => {
             console.log("CSV file contents:", results.meta.fields);
             this.csvColumns = results.meta.fields;
+            this.csvData = results.data;
             this.showCsvModal = true
+            console.log(this.csvData)
           },
           error: (error) => {
             console.error("Error parsing CSV file:", error);
           }
         });
       }
+    },
+    matchingColumn(csvColumn) {
+      return this.columns.find(col => col.name === csvColumn);
+    },
+    availableDbColumns(csvColumn) {
+      const selected = new Set(Object.values(this.selectedDbColumns));
+      return this.columns.filter(col => !selected.has(col.name) || col.name === this.selectedDbColumns[csvColumn]);
+    },
+
+    mapCsvToDbColumns() {
+      return this.csvData.map(row => {
+        let mappedRow = {};
+        for (let csvColumn of this.csvColumns) {
+          let dbColumn = this.selectedDbColumns[csvColumn];
+          if (dbColumn) {
+            mappedRow[dbColumn] = row[csvColumn];
+          }
+        }
+        return mappedRow;
+      });
+    },
+
+    applyCsvChanges() {
+      const dataToInsert = this.mapCsvToDbColumns();
+      console.log(dataToInsert)
     }
+
   },
 }
 </script>

From 98f34afbaccd6acbd384b85cd873cd41c535f821 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 14 Aug 2024 19:05:24 +0600
Subject: [PATCH 28/45] Add Show Preview for Data to be Inserted

---
 resources/js/Pages/Organizations/Index.vue | 51 +++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 4736a527a..a0ead7e1d 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -79,6 +79,41 @@
         </div>
 
 
+        <div v-if="PreviewModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          <div class="bg-white rounded-lg shadow-lg p-6 w-3/4 max-w-4xl">
+            <h2 class="text-xl font-bold mb-4">Preview Data</h2>
+
+            <!-- Preview Table -->
+            <table class="w-full table-auto border-collapse">
+              <thead>
+                <tr>
+                  <!-- Render DB Column Headers -->
+                  <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
+                    <span v-if="matchingColumn(csvColumn)">{{ matchingColumn(csvColumn).name }}</span>
+                    <span v-else>
+                      {{ selectedDbColumns[csvColumn] || 'Not Mapped' }}
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <!-- Render Values -->
+                  <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
+                    <span>{{ getValueForColumn(csvColumn) }}</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <!-- Buttons -->
+            <div class="flex justify-end mt-6">
+              <button @click="applyPreviewChanges" class="btn-green px-4 py-2">Apply</button>
+              <button @click="PreviewModal = false" class="ml-4 btn-red px-4 py-2">Cancel</button>
+            </div>
+          </div>
+        </div>
+
+
         <Link class="btn-indigo mx-4" href="/organizations/create" title="Create Organization">
         <font-awesome-icon icon="plus" />
         </Link>
@@ -159,6 +194,7 @@ export default {
       },
       showModal: false,
       showCsvModal: false,
+      PreviewModal: false,
       columns: [
         { name: 'name', label: 'Name', visible: this.visibleColumns.includes('name') || true, disabled: true },
         { name: 'phone', label: 'Phone', visible: this.visibleColumns.includes('phone') || true, disabled: true },
@@ -246,7 +282,20 @@ export default {
     applyCsvChanges() {
       const dataToInsert = this.mapCsvToDbColumns();
       console.log(dataToInsert)
-    }
+      this.showCsvModal = false
+      this.PreviewModal = true
+    },
+
+    getValueForColumn(csvColumn) {
+      // Get the first row of CSV data for preview
+      const firstRow = this.csvData[4];
+      return firstRow ? firstRow[csvColumn] : '';
+    },
+    applyPreviewChanges() {
+      this.insertData();
+      this.PreviewModal = false;
+
+    },
 
   },
 }

From 828ed87250ce7fed18e5eb84edf26bca32796067 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 15 Aug 2024 11:33:54 +0600
Subject: [PATCH 29/45] Add Upto 100 Rows in Preview & Back Button

---
 resources/js/Pages/Organizations/Index.vue | 66 ++++++++++++----------
 resources/js/app.js                        |  4 +-
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index a0ead7e1d..a782a1957 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -78,33 +78,36 @@
           </div>
         </div>
 
-
         <div v-if="PreviewModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
-          <div class="bg-white rounded-lg shadow-lg p-6 w-3/4 max-w-4xl">
-            <h2 class="text-xl font-bold mb-4">Preview Data</h2>
-
+          <div class="bg-white rounded-lg shadow-lg p-6 w-3/4 max-w-4xl relative">
+            <!-- Back Button -->
+            <button @click="goBack" class="absolute top-2 right-2 btn-red px-3 py-1 mr-2" title="Go Back">
+              <font-awesome-icon icon="arrow-left" class="text-white" />
+            </button>
+            <h2 class="text-xl font-bold mb-4">Preview Data <span class="text-xs">(Upto 100 Rows)</span></h2>
             <!-- Preview Table -->
-            <table class="w-full table-auto border-collapse">
-              <thead>
-                <tr>
-                  <!-- Render DB Column Headers -->
-                  <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
-                    <span v-if="matchingColumn(csvColumn)">{{ matchingColumn(csvColumn).name }}</span>
-                    <span v-else>
-                      {{ selectedDbColumns[csvColumn] || 'Not Mapped' }}
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <!-- Render Values -->
-                  <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
-                    <span>{{ getValueForColumn(csvColumn) }}</span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+            <div class="bg-white rounded-md shadow overflow-x-auto max-h-64">
+              <table class="w-full table-auto border-collapse">
+                <thead>
+                  <tr>
+                    <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
+                      <span v-if="matchingColumn(csvColumn)">{{ matchingColumn(csvColumn).name }}</span>
+                      <span v-else>
+                        {{ selectedDbColumns[csvColumn] || 'Not Mapped' }}
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, rowIndex) in csvData.slice(0, 100)" :key="rowIndex">
+                    <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
+                      <span v-if="getValueForColumn(row, csvColumn) != 'N/A'">{{ getValueForColumn(row, csvColumn)
+                        }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
             <!-- Buttons -->
             <div class="flex justify-end mt-6">
               <button @click="applyPreviewChanges" class="btn-green px-4 py-2">Apply</button>
@@ -114,6 +117,7 @@
         </div>
 
 
+
         <Link class="btn-indigo mx-4" href="/organizations/create" title="Create Organization">
         <font-awesome-icon icon="plus" />
         </Link>
@@ -286,17 +290,21 @@ export default {
       this.PreviewModal = true
     },
 
-    getValueForColumn(csvColumn) {
-      // Get the first row of CSV data for preview
-      const firstRow = this.csvData[4];
-      return firstRow ? firstRow[csvColumn] : '';
+    getValueForColumn(row, csvColumn) {
+      return row[csvColumn] || 'N/A';
     },
+
     applyPreviewChanges() {
       this.insertData();
       this.PreviewModal = false;
 
     },
 
+    goBack() {
+      this.PreviewModal = false;
+      this.showCsvModal = true;
+    }
+
   },
 }
 </script>
diff --git a/resources/js/app.js b/resources/js/app.js
index bda6ca5ce..ef70c37b3 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,9 +3,9 @@ import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faTableCells , faGripVertical, faPlus, faFileImport} from '@fortawesome/free-solid-svg-icons'
+import { faTableCells , faGripVertical, faPlus, faFileImport, faArrowLeft} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faTableCells,faGripVertical,faPlus,faFileImport)
+library.add(faTableCells,faGripVertical,faPlus,faFileImport,faArrowLeft)
 
 createInertiaApp({
   resolve: name => {

From fe4d074e85392a7335b152b43b6f9acf99f5f599 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 15 Aug 2024 12:06:28 +0600
Subject: [PATCH 30/45] Add Import Csv Data to Database

---
 .../Controllers/OrganizationsController.php   | 32 +++++++++++++++++++
 resources/js/Pages/Organizations/Index.vue    | 14 ++++++--
 routes/web.php                                |  4 +++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index 7ee8142ca..fb60267dd 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -135,4 +135,36 @@ public function saveColumnVisibility(HttpRequest $request): RedirectResponse
 
         return Redirect::back();
     }
+
+    public function importCsv(): RedirectResponse
+    {
+        $data = Request::input('data');
+
+        $filteredData = array_filter($data, function ($row) {
+            if (empty($row['name'])) {
+                return false;
+            }
+            foreach ($row as $key => $value) {
+                if ($key !== 'name' && ($value === null || $value === 'N/A')) {
+                    $row[$key] = null;
+                }
+            }
+            return true;
+        });
+
+        foreach ($filteredData as $row) {
+            auth()->user()->account->organizations()->create([
+                'name' => $row['name'],
+                'email' => $row['email'] ?? null,
+                'phone' => $row['phone'] ?? null,
+                'address' => $row['address'] ?? null,
+                'city' => $row['city'] ?? null,
+                'region' => $row['region'] ?? null,
+                'country' => $row['country'] ?? null,
+                'postal_code' => $row['postal_code'] ?? null,
+            ]);
+        }
+
+        return Redirect::route('organizations')->with('success', 'Organizations imported.');
+    }
 }
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index a782a1957..b8199abc3 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -294,9 +294,17 @@ export default {
       return row[csvColumn] || 'N/A';
     },
 
-    applyPreviewChanges() {
-      this.insertData();
-      this.PreviewModal = false;
+    async applyPreviewChanges() {
+      const dataToInsert = this.mapCsvToDbColumns();
+
+      this.$inertia.post('/organizations/import-csv', { data: dataToInsert }, {
+        onSuccess: () => {
+          this.PreviewModal = false;
+        },
+        onError: (error) => {
+          console.error("Error occurred while processing data:", error);
+        }
+      });
 
     },
 
diff --git a/routes/web.php b/routes/web.php
index 8e07c6d9f..957fff5dc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -101,6 +101,10 @@
     ->name('organizations.restore')
     ->middleware('auth');
 
+Route::post('organizations/import-csv', [OrganizationsController::class, 'importCsv'])
+    ->name('organizations.import-csv')
+    ->middleware('auth');
+
 // Contacts
 
 Route::get('contacts', [ContactsController::class, 'index'])

From 5e00772d96a1331b5ade40dd94a07c80d3fd7c90 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 15 Aug 2024 13:34:40 +0600
Subject: [PATCH 31/45] Fix File Reload Issue

---
 resources/js/Pages/Organizations/Index.vue | 23 ++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index b8199abc3..2b4a63991 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -13,7 +13,7 @@
         </select>
       </search-filter>
       <div>
-        <button @click="showModal = true" class="btn-indigo mx-4" title="Visible Columns">
+        <button @click="showModal = true" class="btn-indigo mx-4 p-3" title="Visible Columns">
           <font-awesome-icon icon="table-cells" />
         </button>
         <div v-if="showModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
@@ -34,7 +34,7 @@
           </div>
         </div>
 
-        <button class="btn-indigo mx-4" title="Visible Columns" @click="triggerFileInput">
+        <button class="btn-indigo mx-4 p-3" title="Import CSV" @click="triggerFileInput">
           <font-awesome-icon icon="file-import" />
         </button>
         <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload" style="display: none;" />
@@ -46,8 +46,8 @@
             <table class="w-full table-auto border-collapse">
               <thead>
                 <tr>
-                  <th class="border-b font-bold text-left p-2">CSV Column</th>
-                  <th class="border-b font-bold text-left p-2">DB Column</th>
+                  <th class="border font-bold text-left p-2">CSV Column</th>
+                  <th class="border font-bold text-left p-2">DB Column</th>
                 </tr>
               </thead>
               <tbody>
@@ -55,8 +55,8 @@
                   'bg-green-500': matchingColumn(csvColumn),
                   'bg-yellow-500': !matchingColumn(csvColumn)
                 }">
-                  <td class="border-b p-2">{{ csvColumn }}</td>
-                  <td class="border-b p-2 w-1/2">
+                  <td class="border p-2">{{ csvColumn }}</td>
+                  <td class="border p-2 w-1/2">
                     <label v-if="matchingColumn(csvColumn)">{{ matchingColumn(csvColumn).name }}</label>
                     <select v-else v-model="selectedDbColumns[csvColumn]"
                       style="width: 120px; background-color:transparent; ">
@@ -72,8 +72,8 @@
             </table>
 
             <div class="flex justify-end mt-6">
-              <button @click="applyCsvChanges" class="btn-green px-4 py-2">Apply</button>
-              <button @click="showCsvModal = false" class="ml-4 btn-red px-4 py-2">Cancel</button>
+              <button @click="applyCsvChanges" class="btn-green px-4 py-2">Continue</button>
+              <button @click="handleCancel" class="ml-4 btn-red px-4 py-2">Cancel</button>
             </div>
           </div>
         </div>
@@ -118,7 +118,7 @@
 
 
 
-        <Link class="btn-indigo mx-4" href="/organizations/create" title="Create Organization">
+        <Link class="btn-indigo mx-4 p-3" href="/organizations/create" title="Create Organization">
         <font-awesome-icon icon="plus" />
         </Link>
       </div>
@@ -311,8 +311,11 @@ export default {
     goBack() {
       this.PreviewModal = false;
       this.showCsvModal = true;
+    },
+    handleCancel() {
+      window.location.reload();
     }
-
   },
+
 }
 </script>

From af43ff2a9f843023c588c373e11de03b25c3b293 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 15 Aug 2024 13:46:40 +0600
Subject: [PATCH 32/45] Fix Preview Table

---
 resources/js/Pages/Organizations/Index.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 2b4a63991..2c9d5ad87 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -91,27 +91,28 @@
                 <thead>
                   <tr>
                     <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
-                      <span v-if="matchingColumn(csvColumn)">{{ matchingColumn(csvColumn).name }}</span>
-                      <span v-else>
-                        {{ selectedDbColumns[csvColumn] || 'Not Mapped' }}
-                      </span>
+                      <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
+                        matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
+                        }}</span>
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr v-for="(row, rowIndex) in csvData.slice(0, 100)" :key="rowIndex">
                     <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
-                      <span v-if="getValueForColumn(row, csvColumn) != 'N/A'">{{ getValueForColumn(row, csvColumn)
-                        }}</span>
+                      <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
+                        getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
+                      }}</span>
                     </td>
                   </tr>
                 </tbody>
               </table>
+
             </div>
             <!-- Buttons -->
             <div class="flex justify-end mt-6">
               <button @click="applyPreviewChanges" class="btn-green px-4 py-2">Apply</button>
-              <button @click="PreviewModal = false" class="ml-4 btn-red px-4 py-2">Cancel</button>
+              <button @click="handleCancel" class="ml-4 btn-red px-4 py-2">Cancel</button>
             </div>
           </div>
         </div>

From c516bcf0981b3486246e081fee43e16dc165bd2b Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 15 Aug 2024 14:50:50 +0600
Subject: [PATCH 33/45] Fix Csv Preview & Insertion

---
 resources/css/buttons.css                  |  4 +++
 resources/js/Pages/Organizations/Index.vue | 31 +++++++++++++++-------
 resources/js/app.js                        |  4 +--
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index b739cc660..b52b1c1f2 100644
--- a/resources/css/buttons.css
+++ b/resources/css/buttons.css
@@ -14,6 +14,10 @@
     @apply px-6 py-3 rounded bg-red-600 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-red-400 focus:bg-red-400;
   }
 
+  .btn-yellow {
+    @apply px-6 py-3 rounded bg-yellow-600 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-yellow-400 focus:bg-yellow-400;
+  }
+
 .btn-spinner,
 .btn-spinner:after {
   border-radius: 50%;
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 2c9d5ad87..764b8041f 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -40,8 +40,12 @@
         <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload" style="display: none;" />
 
         <div v-if="showCsvModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
-          <div class="bg-white rounded-lg shadow-lg p-6 w-96">
+          <div class="bg-white rounded-lg shadow-lg p-6 w-1/3 max-w-4xl relative">
+
             <h2 class="text-xl font-bold mb-4">CSV Columns</h2>
+            <button @click="handleCancel" class="absolute top-2 right-2 btn-red px-3 py-1 mr-2" title="Go Back">
+              <font-awesome-icon icon="xmark" class="text-white" />
+            </button>
 
             <table class="w-full table-auto border-collapse">
               <thead>
@@ -57,15 +61,16 @@
                 }">
                   <td class="border p-2">{{ csvColumn }}</td>
                   <td class="border p-2 w-1/2">
-                    <label v-if="matchingColumn(csvColumn)">{{ matchingColumn(csvColumn).name }}</label>
-                    <select v-else v-model="selectedDbColumns[csvColumn]"
-                      style="width: 120px; background-color:transparent; ">
-                      <option value="" disabled>Select DB Column</option>
-                      <option v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
+                    <select v-model="selectedDbColumns[csvColumn]" style="width: 120px; background-color:transparent;">
+                      <option v-if="matchingColumn(csvColumn)">
+                        {{ matchingColumn(csvColumn).name }}
+                      </option>
+                      <option v-else v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
                         :value="dbColumn.name">
                         {{ dbColumn.name }}
                       </option>
                     </select>
+
                   </td>
                 </tr>
               </tbody>
@@ -79,10 +84,10 @@
         </div>
 
         <div v-if="PreviewModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
-          <div class="bg-white rounded-lg shadow-lg p-6 w-3/4 max-w-4xl relative">
+          <div class="bg-white rounded-lg shadow-lg p-6 w-auto min-h-1/2 max-w-4xl relative">
             <!-- Back Button -->
-            <button @click="goBack" class="absolute top-2 right-2 btn-red px-3 py-1 mr-2" title="Go Back">
-              <font-awesome-icon icon="arrow-left" class="text-white" />
+            <button @click="handleCancel" class="absolute top-2 right-2 btn-red px-3 py-1 mr-2">
+              <font-awesome-icon icon="xmark" class="text-white" />
             </button>
             <h2 class="text-xl font-bold mb-4">Preview Data <span class="text-xs">(Upto 100 Rows)</span></h2>
             <!-- Preview Table -->
@@ -111,7 +116,10 @@
             </div>
             <!-- Buttons -->
             <div class="flex justify-end mt-6">
-              <button @click="applyPreviewChanges" class="btn-green px-4 py-2">Apply</button>
+              <button @click="goBack" class="btn-yellow px-4 py-2">
+                Back
+              </button>
+              <button @click="applyPreviewChanges" class="btn-green px-4 py-2 ml-4">Apply</button>
               <button @click="handleCancel" class="ml-4 btn-red px-4 py-2">Cancel</button>
             </div>
           </div>
@@ -175,6 +183,7 @@ import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
 import draggable from 'vuedraggable'
 import Papa from 'papaparse'
+import { data } from 'autoprefixer'
 
 export default {
   components: {
@@ -297,10 +306,12 @@ export default {
 
     async applyPreviewChanges() {
       const dataToInsert = this.mapCsvToDbColumns();
+      console.log(dataToInsert)
 
       this.$inertia.post('/organizations/import-csv', { data: dataToInsert }, {
         onSuccess: () => {
           this.PreviewModal = false;
+          window.location.reload();
         },
         onError: (error) => {
           console.error("Error occurred while processing data:", error);
diff --git a/resources/js/app.js b/resources/js/app.js
index ef70c37b3..8cd9445a6 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,9 +3,9 @@ import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faTableCells , faGripVertical, faPlus, faFileImport, faArrowLeft} from '@fortawesome/free-solid-svg-icons'
+import { faTableCells , faGripVertical, faPlus, faFileImport, faArrowLeft, faXmark} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faTableCells,faGripVertical,faPlus,faFileImport,faArrowLeft)
+library.add(faTableCells,faGripVertical,faPlus,faFileImport,faArrowLeft,faXmark)
 
 createInertiaApp({
   resolve: name => {

From e0f959697d6435a5163965ce683167ab8a4a5400 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 15 Aug 2024 15:09:48 +0600
Subject: [PATCH 34/45] Fix PopUp Navigation

---
 resources/js/Pages/Organizations/Index.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 764b8041f..a958af9a2 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -43,8 +43,8 @@
           <div class="bg-white rounded-lg shadow-lg p-6 w-1/3 max-w-4xl relative">
 
             <h2 class="text-xl font-bold mb-4">CSV Columns</h2>
-            <button @click="handleCancel" class="absolute top-2 right-2 btn-red px-3 py-1 mr-2" title="Go Back">
-              <font-awesome-icon icon="xmark" class="text-white" />
+            <button @click="handleCancel" class="absolute top-2 right-2 bg-transparent px-3 py-1 mr-2" title="Go Back">
+              <font-awesome-icon icon="xmark" class="text-black" />
             </button>
 
             <table class="w-full table-auto border-collapse">
@@ -77,8 +77,9 @@
             </table>
 
             <div class="flex justify-end mt-6">
-              <button @click="applyCsvChanges" class="btn-green px-4 py-2">Continue</button>
-              <button @click="handleCancel" class="ml-4 btn-red px-4 py-2">Cancel</button>
+              <button @click="handleCancel" class="btn-red px-4 py-2">Cancel</button>
+              <button @click="applyCsvChanges" class="ml-4 btn-green px-4 py-2">Continue</button>
+
             </div>
           </div>
         </div>
@@ -86,8 +87,8 @@
         <div v-if="PreviewModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
           <div class="bg-white rounded-lg shadow-lg p-6 w-auto min-h-1/2 max-w-4xl relative">
             <!-- Back Button -->
-            <button @click="handleCancel" class="absolute top-2 right-2 btn-red px-3 py-1 mr-2">
-              <font-awesome-icon icon="xmark" class="text-white" />
+            <button @click="handleCancel" class="absolute top-2 right-2 bg-transparent px-3 py-1 mr-2">
+              <font-awesome-icon icon="xmark" class="text-black" />
             </button>
             <h2 class="text-xl font-bold mb-4">Preview Data <span class="text-xs">(Upto 100 Rows)</span></h2>
             <!-- Preview Table -->
@@ -116,11 +117,12 @@
             </div>
             <!-- Buttons -->
             <div class="flex justify-end mt-6">
-              <button @click="goBack" class="btn-yellow px-4 py-2">
+              <button @click="goBack" class="btn-yellow px-4 py-2 mr-56">
                 Back
               </button>
-              <button @click="applyPreviewChanges" class="btn-green px-4 py-2 ml-4">Apply</button>
+
               <button @click="handleCancel" class="ml-4 btn-red px-4 py-2">Cancel</button>
+              <button @click="applyPreviewChanges" class="btn-green px-4 py-2 ml-4">Import</button>
             </div>
           </div>
         </div>

From 50d061a8e2c2035811e9ad2f42dfa8e290567913 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Thu, 15 Aug 2024 15:26:54 +0600
Subject: [PATCH 35/45] Add Export As CSV

---
 resources/js/Pages/Organizations/Index.vue | 54 ++++++++++++++++++----
 resources/js/app.js                        |  4 +-
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index a958af9a2..3ccf8210a 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -13,7 +13,7 @@
         </select>
       </search-filter>
       <div>
-        <button @click="showModal = true" class="btn-indigo mx-4 p-3" title="Visible Columns">
+        <button @click="showModal = true" class="btn-indigo mx-4 px-3 py-2" title="Visible Columns">
           <font-awesome-icon icon="table-cells" />
         </button>
         <div v-if="showModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
@@ -34,7 +34,7 @@
           </div>
         </div>
 
-        <button class="btn-indigo mx-4 p-3" title="Import CSV" @click="triggerFileInput">
+        <button class="btn-indigo mr-4  px-3 py-2" title="Import CSV" @click="triggerFileInput">
           <font-awesome-icon icon="file-import" />
         </button>
         <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload" style="display: none;" />
@@ -99,7 +99,7 @@
                     <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
-                        }}</span>
+                      }}</span>
                     </th>
                   </tr>
                 </thead>
@@ -108,7 +108,7 @@
                     <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
-                      }}</span>
+                        }}</span>
                     </td>
                   </tr>
                 </tbody>
@@ -127,14 +127,14 @@
           </div>
         </div>
 
+        <button @click="downloadCSV" class="btn-indigo  px-3 py-2" title="Export as CSV">
+          <font-awesome-icon icon="file-export" />
+        </button>
 
-
-        <Link class="btn-indigo mx-4 p-3" href="/organizations/create" title="Create Organization">
+        <Link class="btn-indigo mx-4  px-3 py-2" href="/organizations/create" title="Create Organization">
         <font-awesome-icon icon="plus" />
         </Link>
       </div>
-
-
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto max-h-96">
       <table class="w-full whitespace-nowrap">
@@ -328,7 +328,43 @@ export default {
     },
     handleCancel() {
       window.location.reload();
-    }
+    },
+
+
+    //export as csv
+    convertToCSV(data, columns) {
+      const header = columns
+        .filter(column => this.isVisible(column.name))
+        .map(column => column.label)
+        .join(',');
+
+      const rows = data.map(row =>
+        columns
+          .filter(column => this.isVisible(column.name))
+          .map(column => `"${row[column.name] || ''}"`)
+          .join(',')
+      );
+
+      return [header, ...rows].join('\n');
+    },
+
+    downloadCSV() {
+      const csv = this.convertToCSV(this.organizations.data, this.columns);
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+      const link = document.createElement('a');
+
+      if (link.download !== undefined) {
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'organizations.csv');
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    },
+
+
   },
 
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 8cd9445a6..f1341cc30 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,9 +3,9 @@ import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faTableCells , faGripVertical, faPlus, faFileImport, faArrowLeft, faXmark} from '@fortawesome/free-solid-svg-icons'
+import { faTableCells , faGripVertical, faPlus, faFileImport, faArrowLeft, faXmark, faFileExport} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faTableCells,faGripVertical,faPlus,faFileImport,faArrowLeft,faXmark)
+library.add(faTableCells,faGripVertical,faPlus,faFileImport,faArrowLeft,faXmark, faFileExport)
 
 createInertiaApp({
   resolve: name => {

From 5d082948e33b633bf8fdcde73449023866eb1497 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Fri, 16 Aug 2024 11:42:20 +0600
Subject: [PATCH 36/45] Add Organization Dropdown in Contacts CSV Preview

---
 app/Http/Controllers/ContactsController.php |   6 +-
 resources/js/Pages/Contacts/Index.vue       | 224 ++++++++++++++++++--
 resources/js/Pages/Organizations/Index.vue  |   2 +-
 3 files changed, 217 insertions(+), 15 deletions(-)

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index fb612aca1..a842cfd78 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Models\Contact;
+use App\Models\Organization;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
@@ -17,13 +18,14 @@ public function index(): Response
     {
         return Inertia::render('Contacts/Index', [
             'filters' => Request::all('search', 'trashed'),
+            'organizations' => Organization::all(),
             'contacts' => Auth::user()->account->contacts()
                 ->with('organization')
                 ->orderByName()
                 ->filter(Request::only('search', 'trashed'))
                 ->paginate(10)
                 ->withQueryString()
-                ->through(fn ($contact) => [
+                ->through(fn($contact) => [
                     'id' => $contact->id,
                     'name' => $contact->name,
                     'phone' => $contact->phone,
@@ -101,7 +103,7 @@ public function update(Contact $contact): RedirectResponse
                 'last_name' => ['required', 'max:50'],
                 'organization_id' => [
                     'nullable',
-                    Rule::exists('organizations', 'id')->where(fn ($query) => $query->where('account_id', Auth::user()->account_id)),
+                    Rule::exists('organizations', 'id')->where(fn($query) => $query->where('account_id', Auth::user()->account_id)),
                 ],
                 'email' => ['nullable', 'max:50', 'email'],
                 'phone' => ['nullable', 'max:50'],
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index 27b666ce9..12ecbb151 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+
     <Head title="Contacts" />
     <h1 class="mb-8 text-3xl font-bold">Contacts</h1>
     <div class="flex items-center justify-between mb-6">
@@ -11,10 +12,113 @@
           <option value="only">Only Trashed</option>
         </select>
       </search-filter>
-      <Link class="btn-indigo" href="/contacts/create">
-        <span>Create</span>
-        <span class="hidden md:inline">&nbsp;Contact</span>
-      </Link>
+      <div>
+        <button class="btn-indigo mr-4  px-3 py-2" title="Import CSV" @click="triggerFileInput">
+          <font-awesome-icon icon="file-import" />
+        </button>
+        <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload" style="display: none;" />
+
+        <div v-if="showCsvModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          <div class="bg-white rounded-lg shadow-lg p-6 w-1/3 max-w-4xl relative">
+
+            <h2 class="text-xl font-bold mb-4">CSV Columns</h2>
+            <button @click="handleCancel" class="absolute top-2 right-2 bg-transparent px-3 py-1 mr-2" title="Go Back">
+              <font-awesome-icon icon="xmark" class="text-black" />
+            </button>
+
+            <table class="w-full table-auto border-collapse">
+              <thead>
+                <tr>
+                  <th class="border font-bold text-left p-2">CSV Column</th>
+                  <th class="border font-bold text-left p-2">DB Column</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="csvColumn in csvColumns" :key="csvColumn" :class="{
+                  'bg-green-500': matchingColumn(csvColumn),
+                  'bg-yellow-500': !matchingColumn(csvColumn)
+                }">
+                  <td class="border p-2">{{ csvColumn }}</td>
+                  <td class="border p-2 w-1/2">
+                    <select v-model="selectedDbColumns[csvColumn]" style="width: 120px; background-color:transparent;">
+                      <option v-if="matchingColumn(csvColumn)">
+                        {{ matchingColumn(csvColumn).name }}
+                      </option>
+                      <option v-else v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
+                        :value="dbColumn.name">
+                        {{ dbColumn.name }}
+                      </option>
+                    </select>
+
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <div class="flex justify-end mt-6">
+              <button @click="handleCancel" class="btn-red px-4 py-2">Cancel</button>
+              <button @click="applyCsvChanges" class="ml-4 btn-green px-4 py-2">Continue</button>
+
+            </div>
+          </div>
+        </div>
+
+        <div v-if="PreviewModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          <div class="bg-white rounded-lg shadow-lg p-6 w-auto min-h-1/2 max-w-4xl relative">
+            <!-- Back Button -->
+            <button @click="handleCancel" class="absolute top-2 right-2 bg-transparent px-3 py-1 mr-2">
+              <font-awesome-icon icon="xmark" class="text-black" />
+            </button>
+            <h2 class="text-xl font-bold mb-4">Preview Data <span class="text-xs">(Upto 100 Rows)</span></h2>
+            <!-- Preview Table -->
+            <div class="bg-white rounded-md shadow overflow-x-auto max-h-64">
+              <table class="w-full table-auto border-collapse">
+                <thead>
+                  <tr>
+                    <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
+                      <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
+                        matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
+                      }}</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, rowIndex) in csvData.slice(0, 100)" :key="rowIndex">
+                    <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
+                      <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
+                        getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
+                      }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <!-- Organization Dropdown -->
+            <div class="mt-4">
+              <label for="organization" class="block text-sm font-medium text-gray-700">Select Organization</label>
+              <select id="organization" v-model="selectedOrganization"
+                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                <option disabled value="">Please select an organization</option>
+                <option v-for="organization in organizations" :key="organization.id" :value="organization.id">
+                  {{ organization.name }}
+                </option>
+              </select>
+            </div>
+            <!-- Buttons -->
+            <div class="flex justify-end mt-6">
+              <button @click="goBack" class="btn-yellow px-4 py-2 mr-auto">
+                Back
+              </button>
+              <button @click="handleCancel" class="ml-4 btn-red px-4 py-2">Cancel</button>
+              <button @click="applyPreviewChanges" class="btn-green px-4 py-2 ml-4">Import</button>
+            </div>
+          </div>
+        </div>
+
+        <Link class="btn-indigo   px-3 py-2" href="/contacts/create" title="Create Contact">
+        <font-awesome-icon icon="plus" />
+        </Link>
+      </div>
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
@@ -27,30 +131,30 @@
         <tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
             <Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="`/contacts/${contact.id}/edit`">
-              {{ contact.name }}
-              <icon v-if="contact.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+            {{ contact.name }}
+            <icon v-if="contact.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
             </Link>
           </td>
           <td class="border-t">
             <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
-              <div v-if="contact.organization">
-                {{ contact.organization.name }}
-              </div>
+            <div v-if="contact.organization">
+              {{ contact.organization.name }}
+            </div>
             </Link>
           </td>
           <td class="border-t">
             <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
-              {{ contact.city }}
+            {{ contact.city }}
             </Link>
           </td>
           <td class="border-t">
             <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
-              {{ contact.phone }}
+            {{ contact.phone }}
             </Link>
           </td>
           <td class="w-px border-t">
             <Link class="flex items-center px-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
-              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
+            <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
@@ -72,6 +176,7 @@ import throttle from 'lodash/throttle'
 import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
+import Papa from 'papaparse'
 
 export default {
   components: {
@@ -85,6 +190,7 @@ export default {
   props: {
     filters: Object,
     contacts: Object,
+    organizations: Object
   },
   data() {
     return {
@@ -92,6 +198,18 @@ export default {
         search: this.filters.search,
         trashed: this.filters.trashed,
       },
+      showCsvModal: false,
+      PreviewModal: false,
+      csvData: [],
+      csvColumns: [],
+      selectedDbColumns: {},
+      selectedOrganization: '',
+      columns: [
+        { name: 'name', label: 'Name' },
+        { name: 'organization', label: 'Organization' },
+        { name: 'city', label: 'City' },
+        { name: 'phone', label: 'Phone' },
+      ],
     }
   },
   watch: {
@@ -106,6 +224,88 @@ export default {
     reset() {
       this.form = mapValues(this.form, () => null)
     },
+    triggerFileInput() {
+      this.$refs.fileInput.click();
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        Papa.parse(file, {
+          header: true,
+          complete: (results) => {
+            console.log("CSV file contents:", results.meta.fields);
+            this.csvColumns = results.meta.fields;
+            this.csvData = results.data;
+            this.showCsvModal = true
+            console.log(this.csvData)
+          },
+          error: (error) => {
+            console.error("Error parsing CSV file:", error);
+          }
+        });
+      }
+    },
+    matchingColumn(csvColumn) {
+      return this.columns.find(col => col.name === csvColumn);
+    },
+    availableDbColumns(csvColumn) {
+      const selected = new Set(Object.values(this.selectedDbColumns));
+      return this.columns.filter(col => !selected.has(col.name) || col.name === this.selectedDbColumns[csvColumn]);
+    },
+
+    mapCsvToDbColumns() {
+      return this.csvData.map(row => {
+        let mappedRow = {};
+        for (let csvColumn of this.csvColumns) {
+          let dbColumn = this.selectedDbColumns[csvColumn];
+          if (dbColumn) {
+            mappedRow[dbColumn] = row[csvColumn];
+          }
+        }
+
+        if (this.selectedOrganization) {
+          mappedRow.organization_id = this.selectedOrganization;
+        }
+
+        return mappedRow;
+      });
+    },
+
+    applyCsvChanges() {
+      const dataToInsert = this.mapCsvToDbColumns();
+      console.log(dataToInsert)
+      this.showCsvModal = false
+      this.PreviewModal = true
+    },
+
+    getValueForColumn(row, csvColumn) {
+      return row[csvColumn] || 'N/A';
+    },
+
+    async applyPreviewChanges() {
+      const dataToInsert = this.mapCsvToDbColumns();
+      console.log(dataToInsert)
+
+      // this.$inertia.post('/organizations/import-csv', { data: dataToInsert }, {
+      //   onSuccess: () => {
+      //     this.PreviewModal = false;
+      //     window.location.reload();
+      //   },
+      //   onError: (error) => {
+      //     console.error("Error occurred while processing data:", error);
+      //   }
+      // });
+
+    },
+
+    goBack() {
+      this.PreviewModal = false;
+      this.showCsvModal = true;
+    },
+    handleCancel() {
+      window.location.reload()
+    },
+
   },
 }
 </script>
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 3ccf8210a..cdedad9b2 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -117,7 +117,7 @@
             </div>
             <!-- Buttons -->
             <div class="flex justify-end mt-6">
-              <button @click="goBack" class="btn-yellow px-4 py-2 mr-56">
+              <button @click="goBack" class="btn-yellow px-4 py-2 mr-auto">
                 Back
               </button>
 

From 632094811d3a32e6be276887c9553efb00fe649e Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 19 Aug 2024 13:41:50 +0600
Subject: [PATCH 37/45] Add Import Contacts

---
 app/Http/Controllers/ContactsController.php | 32 +++++++++++++++++++++
 resources/js/Pages/Contacts/Index.vue       | 22 +++++++-------
 routes/web.php                              |  5 ++++
 3 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index a842cfd78..9fc6d1ce1 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -131,4 +131,36 @@ public function restore(Contact $contact): RedirectResponse
 
         return Redirect::back()->with('success', 'Contact restored.');
     }
+
+    public function importCsv(): RedirectResponse
+    {
+        $data = Request::input('data');
+
+        $filteredData = array_filter($data, function ($row) {
+            if (empty($row['name'])) {
+                return false;
+            }
+
+            foreach ($row as $key => $value) {
+                if ($key !== 'name' && ($value === null || $value === 'N/A')) {
+                    $row[$key] = null;
+                }
+            }
+
+            return true;
+        });
+
+        foreach ($filteredData as $row) {
+            auth()->user()->account->contacts()->create([
+                'first_name' => explode(' ', $row['name'])[0],
+                'last_name' => explode(' ', $row['name'])[1],
+                'phone' => $row['phone'] ?? null,
+                'city' => $row['city'] ?? null,
+                'organization_id' => $row['organization_id'] ?? null,
+
+            ]);
+        }
+
+        return Redirect::route('contacts')->with('success', 'Contacts imported.');
+    }
 }
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index 12ecbb151..1e1703299 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -78,7 +78,7 @@
                     <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
-                      }}</span>
+                        }}</span>
                     </th>
                   </tr>
                 </thead>
@@ -87,7 +87,7 @@
                     <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
-                      }}</span>
+                        }}</span>
                     </td>
                   </tr>
                 </tbody>
@@ -286,15 +286,15 @@ export default {
       const dataToInsert = this.mapCsvToDbColumns();
       console.log(dataToInsert)
 
-      // this.$inertia.post('/organizations/import-csv', { data: dataToInsert }, {
-      //   onSuccess: () => {
-      //     this.PreviewModal = false;
-      //     window.location.reload();
-      //   },
-      //   onError: (error) => {
-      //     console.error("Error occurred while processing data:", error);
-      //   }
-      // });
+      this.$inertia.post('/contacts/import-csv', { data: dataToInsert }, {
+        onSuccess: () => {
+          this.PreviewModal = false;
+          window.location.reload();
+        },
+        onError: (error) => {
+          console.error("Error occurred while processing data:", error);
+        }
+      });
 
     },
 
diff --git a/routes/web.php b/routes/web.php
index 957fff5dc..13a6f77c3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -135,6 +135,11 @@
     ->name('contacts.restore')
     ->middleware('auth');
 
+
+Route::post('contacts/import-csv', [ContactsController::class, 'importCsv'])
+    ->name('contacts.import-csv')
+    ->middleware('auth');
+
 // Reports
 
 Route::get('reports', [ReportsController::class, 'index'])

From 0f5758522941d8167d4df4019feecd079b894f17 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 19 Aug 2024 14:00:58 +0600
Subject: [PATCH 38/45] Add Migrations for New Contact Columns

---
 app/Models/ContactCustomColumns.php           | 13 ++++++++
 app/Models/ContactsCustomData.php             | 13 ++++++++
 ..._add_additional_data_to_contacts_table.php | 28 +++++++++++++++++
 ...59_create_contact_custom_columns_table.php | 31 +++++++++++++++++++
 ...5119_create_contacts_custom_data_table.php | 31 +++++++++++++++++++
 5 files changed, 116 insertions(+)
 create mode 100644 app/Models/ContactCustomColumns.php
 create mode 100644 app/Models/ContactsCustomData.php
 create mode 100644 database/migrations/2024_08_19_074449_add_additional_data_to_contacts_table.php
 create mode 100644 database/migrations/2024_08_19_074659_create_contact_custom_columns_table.php
 create mode 100644 database/migrations/2024_08_19_075119_create_contacts_custom_data_table.php

diff --git a/app/Models/ContactCustomColumns.php b/app/Models/ContactCustomColumns.php
new file mode 100644
index 000000000..43a043f02
--- /dev/null
+++ b/app/Models/ContactCustomColumns.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class ContactCustomColumns extends Model
+{
+    protected $table = 'contact_custom_columns';
+    protected $fillable = ['name', 'type'];
+    use HasFactory;
+}
diff --git a/app/Models/ContactsCustomData.php b/app/Models/ContactsCustomData.php
new file mode 100644
index 000000000..549b36134
--- /dev/null
+++ b/app/Models/ContactsCustomData.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class ContactsCustomData extends Model
+{
+    protected $table = 'contacts_custom_data';
+    protected $fillable = ['value'];
+    use HasFactory;
+}
diff --git a/database/migrations/2024_08_19_074449_add_additional_data_to_contacts_table.php b/database/migrations/2024_08_19_074449_add_additional_data_to_contacts_table.php
new file mode 100644
index 000000000..b7ac49c01
--- /dev/null
+++ b/database/migrations/2024_08_19_074449_add_additional_data_to_contacts_table.php
@@ -0,0 +1,28 @@
+<?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::table('contacts', function (Blueprint $table) {
+            $table->json('additional_data')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('contacts', function (Blueprint $table) {
+            //
+        });
+    }
+};
diff --git a/database/migrations/2024_08_19_074659_create_contact_custom_columns_table.php b/database/migrations/2024_08_19_074659_create_contact_custom_columns_table.php
new file mode 100644
index 000000000..814644ad7
--- /dev/null
+++ b/database/migrations/2024_08_19_074659_create_contact_custom_columns_table.php
@@ -0,0 +1,31 @@
+<?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('contact_custom_columns', function (Blueprint $table) {
+            $table->id();
+            $table->integer('account_id')->unsigned();
+            $table->foreign('account_id')->references('id')->on('accounts');
+            $table->string('name');
+            $table->string('type');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('contact_custom_columns');
+    }
+};
diff --git a/database/migrations/2024_08_19_075119_create_contacts_custom_data_table.php b/database/migrations/2024_08_19_075119_create_contacts_custom_data_table.php
new file mode 100644
index 000000000..8f5b8cf52
--- /dev/null
+++ b/database/migrations/2024_08_19_075119_create_contacts_custom_data_table.php
@@ -0,0 +1,31 @@
+<?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('contacts_custom_data', function (Blueprint $table) {
+            $table->id();
+            $table->integer('contact_id')->unsigned();
+            $table->foreign('contact_id')->references('id')->on('contacts');
+            $table->foreignId('column_id')->constrained('contact_custom_columns')->onDelete('cascade');
+            $table->string('value');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('contacts_custom_data');
+    }
+};

From 16ed6597548036f73f1a40d287f73ce70df8c7e1 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 19 Aug 2024 15:11:57 +0600
Subject: [PATCH 39/45] Add New Columns

---
 app/Http/Controllers/ContactsController.php | 12 +++++
 app/Models/Account.php                      |  5 ++
 resources/js/Pages/Contacts/Index.vue       | 53 ++++++++++++++++++++-
 routes/web.php                              |  4 ++
 4 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index 9fc6d1ce1..a23e7275e 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -163,4 +163,16 @@ public function importCsv(): RedirectResponse
 
         return Redirect::route('contacts')->with('success', 'Contacts imported.');
     }
+
+    public function addColumn()
+    {
+        $column = Request::validate([
+            'name' => ['required', 'max:50'],
+            'type' => ['required', 'in:string,number,date'],
+        ]);
+
+        Auth::user()->account->contactCustomColumns()->create($column);
+
+        return Redirect::back()->with('success', 'Column added.');
+    }
 }
diff --git a/app/Models/Account.php b/app/Models/Account.php
index c3fdce6f1..885dbad5e 100644
--- a/app/Models/Account.php
+++ b/app/Models/Account.php
@@ -21,4 +21,9 @@ public function contacts(): HasMany
     {
         return $this->hasMany(Contact::class);
     }
+
+    public function contactCustomColumns(): HasMany
+    {
+        return $this->hasMany(ContactCustomColumns::class);
+    }
 }
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index 1e1703299..b8a92e00c 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -13,6 +13,38 @@
         </select>
       </search-filter>
       <div>
+        <button @click="showModal = true" class="btn-indigo mx-4 px-3 py-2" title="Add New Columns">
+          <font-awesome-icon icon="table-cells" />
+        </button>
+        <div v-if="showModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+          <div class="bg-white rounded-lg shadow-lg p-4 w-72">
+            <h2 class="text-xl font-bold mb-4">Add New Columns</h2>
+            <div class="flex flex-col">
+              <div class="flex items-center justify-between">
+                <label for="name" class="block text-sm font-medium text-gray-700">Column Name</label>
+                <input type="text" id="name"
+                  class="mt-1 block w-1/2 py-1  px-2 text-base border-2 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" />
+              </div>
+              <div class="flex items-center justify-between mt-4">
+                <label for="type" class="block text-sm font-medium text-gray-700">Data Type</label>
+                <select id="type"
+                  class="mt-1 block w-1/2 py-2text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                  <option>string</option>
+                  <option>number</option>
+                  <option>date</option>
+                  <option>boolean</option>
+                </select>
+              </div>
+            </div>
+
+
+
+            <div class="flex justify-end mt-6">
+              <button @click="applyChanges" class="btn-green px-4 py-2">Apply</button>
+              <button @click="showModal = false" class="ml-4 btn-red px-4 py-2">Cancel</button>
+            </div>
+          </div>
+        </div>
         <button class="btn-indigo mr-4  px-3 py-2" title="Import CSV" @click="triggerFileInput">
           <font-awesome-icon icon="file-import" />
         </button>
@@ -78,7 +110,7 @@
                     <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
-                        }}</span>
+                      }}</span>
                     </th>
                   </tr>
                 </thead>
@@ -87,7 +119,7 @@
                     <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
-                        }}</span>
+                      }}</span>
                     </td>
                   </tr>
                 </tbody>
@@ -198,6 +230,7 @@ export default {
         search: this.filters.search,
         trashed: this.filters.trashed,
       },
+      showModal: false,
       showCsvModal: false,
       PreviewModal: false,
       csvData: [],
@@ -306,6 +339,22 @@ export default {
       window.location.reload()
     },
 
+    applyChanges() {
+      const name = document.getElementById('name').value;
+      const type = document.getElementById('type').value;
+
+      this.$inertia.post('/contacts/add-column', { name, type }, {
+        onSuccess: () => {
+          this.showModal = false;
+          window.location.reload();
+        },
+        onError: (error) => {
+          console.error("Error occurred while adding column:", error);
+        }
+      });
+
+    },
+
   },
 }
 </script>
diff --git a/routes/web.php b/routes/web.php
index 13a6f77c3..0c25a9725 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -140,6 +140,10 @@
     ->name('contacts.import-csv')
     ->middleware('auth');
 
+Route::post('contacts/add-column', [ContactsController::class, 'addColumn'])
+    ->name('contacts.column')
+    ->middleware('auth');
+
 // Reports
 
 Route::get('reports', [ReportsController::class, 'index'])

From 57d7f5c0c8f5b9f2e81d6db509b9562c889c97a9 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 19 Aug 2024 17:00:18 +0600
Subject: [PATCH 40/45] Add Read & Update Custom Columns Data

---
 app/Http/Controllers/ContactsController.php | 21 ++++++
 app/Models/Contact.php                      | 16 +++--
 app/Models/ContactCustomColumns.php         |  7 ++
 resources/js/Pages/Contacts/Edit.vue        | 73 +++++++++++++++++----
 routes/web.php                              |  4 ++
 5 files changed, 105 insertions(+), 16 deletions(-)

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index a23e7275e..724a3f629 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -11,6 +11,7 @@
 use Illuminate\Validation\Rule;
 use Inertia\Inertia;
 use Inertia\Response;
+use Mockery\Undefined;
 
 class ContactsController extends Controller
 {
@@ -92,6 +93,9 @@ public function edit(Contact $contact): Response
                 ->get()
                 ->map
                 ->only('id', 'name'),
+
+            'customColumns' => Auth::user()->account->contactCustomColumns()->get(),
+            'customData' => $contact->contactsCustomData()->get()->map->only('column_id', 'value'),
         ]);
     }
 
@@ -175,4 +179,21 @@ public function addColumn()
 
         return Redirect::back()->with('success', 'Column added.');
     }
+
+    public function updateCustomColumns(Contact $contact): RedirectResponse
+    {
+        $columns = Request::input('columns');
+
+        foreach ($columns as $column) {
+            if (isset($column['value']) && $column['value'] !== null) {
+                $contact->contactsCustomData()->updateOrCreate(
+                    ['column_id' => $column['id']],
+                    ['value' => $column['value']]
+                );
+            }
+        }
+
+
+        return Redirect::back()->with('success', 'Contact updated.');
+    }
 }
diff --git a/app/Models/Contact.php b/app/Models/Contact.php
index 98411794a..ffb755796 100644
--- a/app/Models/Contact.php
+++ b/app/Models/Contact.php
@@ -6,6 +6,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 class Contact extends Model
 {
@@ -24,7 +25,7 @@ public function organization(): BelongsTo
 
     public function getNameAttribute()
     {
-        return $this->first_name.' '.$this->last_name;
+        return $this->first_name . ' ' . $this->last_name;
     }
 
     public function scopeOrderByName($query)
@@ -36,11 +37,11 @@ public function scopeFilter($query, array $filters)
     {
         $query->when($filters['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
-                $query->where('first_name', 'like', '%'.$search.'%')
-                    ->orWhere('last_name', 'like', '%'.$search.'%')
-                    ->orWhere('email', 'like', '%'.$search.'%')
+                $query->where('first_name', 'like', '%' . $search . '%')
+                    ->orWhere('last_name', 'like', '%' . $search . '%')
+                    ->orWhere('email', 'like', '%' . $search . '%')
                     ->orWhereHas('organization', function ($query) use ($search) {
-                        $query->where('name', 'like', '%'.$search.'%');
+                        $query->where('name', 'like', '%' . $search . '%');
                     });
             });
         })->when($filters['trashed'] ?? null, function ($query, $trashed) {
@@ -51,4 +52,9 @@ public function scopeFilter($query, array $filters)
             }
         });
     }
+
+    public function contactsCustomData(): HasMany
+    {
+        return $this->hasMany(ContactsCustomData::class);
+    }
 }
diff --git a/app/Models/ContactCustomColumns.php b/app/Models/ContactCustomColumns.php
index 43a043f02..d2b216c3c 100644
--- a/app/Models/ContactCustomColumns.php
+++ b/app/Models/ContactCustomColumns.php
@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Model;
 
 class ContactCustomColumns extends Model
@@ -10,4 +11,10 @@ class ContactCustomColumns extends Model
     protected $table = 'contact_custom_columns';
     protected $fillable = ['name', 'type'];
     use HasFactory;
+
+
+    public function ContactsCustomData(): HasMany
+    {
+        return $this->hasMany(ContactsCustomData::class);
+    }
 }
diff --git a/resources/js/Pages/Contacts/Edit.vue b/resources/js/Pages/Contacts/Edit.vue
index fb1019d2f..a02f81461 100644
--- a/resources/js/Pages/Contacts/Edit.vue
+++ b/resources/js/Pages/Contacts/Edit.vue
@@ -1,36 +1,53 @@
 <template>
   <div>
+
     <Head :title="`${form.first_name} ${form.last_name}`" />
     <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/contacts">Contacts</Link>
       <span class="text-indigo-400 font-medium">/</span>
       {{ form.first_name }} {{ form.last_name }}
     </h1>
-    <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore"> This contact has been deleted. </trashed-message>
+    <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore"> This contact has been deleted.
+    </trashed-message>
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="update">
         <div class="flex flex-wrap -mb-8 -mr-6 p-8">
-          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
-          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
-          <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Organization">
+          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2"
+            label="First name" />
+          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2"
+            label="Last name" />
+          <select-input v-model="form.organization_id" :error="form.errors.organization_id"
+            class="pb-8 pr-6 w-full lg:w-1/2" label="Organization">
             <option :value="null" />
-            <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
+            <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{
+              organization.name }}</option>
           </select-input>
           <text-input v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
           <text-input v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
-          <text-input v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2"
+            label="Address" />
           <text-input v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
-          <text-input v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
-          <select-input v-model="form.country" :error="form.errors.country" class="pb-8 pr-6 w-full lg:w-1/2" label="Country">
+          <text-input v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2"
+            label="Province/State" />
+          <select-input v-model="form.country" :error="form.errors.country" class="pb-8 pr-6 w-full lg:w-1/2"
+            label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
+          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pb-8 pr-6 w-full lg:w-1/2"
+            label="Postal code" />
+          <div v-for="(column, index) in columns" :key="index" class="pb-8 pr-6 w-full lg:w-1/2">
+            <text-input v-model="columns[index].value" :label="column.name" :id="'input-' + index"
+              @input="updateCustomColumn(index, value, $event)" />
+          </div>
+
         </div>
         <div class="flex items-center px-8 py-4 bg-gray-50 border-t border-gray-100">
-          <button v-if="!contact.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
-          <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
+          <button v-if="!contact.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button"
+            @click="destroy">Delete Contact</button>
+          <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update
+            Contact</loading-button>
         </div>
       </form>
     </div>
@@ -58,6 +75,11 @@ export default {
   props: {
     contact: Object,
     organizations: Array,
+    customColumns: Array,
+    customData: {
+      type: Array,
+      default: () => [],  // Ensure it's always an array
+    },
   },
   remember: 'form',
   data() {
@@ -74,11 +96,40 @@ export default {
         country: this.contact.country,
         postal_code: this.contact.postal_code,
       }),
+      columns: [],
     }
   },
+  mounted() {
+    this.initializeCustomColumns();
+  },
   methods: {
+    initializeCustomColumns() {
+      this.columns = this.customColumns.map(column => {
+        const data = this.customData.find(item => item.column_id === column.id);
+        return {
+          ...column,
+          value: data ? data.value : ''
+        };
+      });
+    },
+    updateCustomColumn(index, value, event) {
+      this.customColumns[index].value = event.target.value
+    },
+    getCustomColumns() {
+      return this.customColumns.map((column, index) => {
+        return {
+          name: column.name,
+          value: column.value,
+          id: column.id,
+        }
+      })
+    },
     update() {
       this.form.put(`/contacts/${this.contact.id}`)
+      const input = this.getCustomColumns()
+      this.$inertia.put(`/contacts/${this.contact.id}/custom-columns`, {
+        columns: input,
+      })
     },
     destroy() {
       if (confirm('Are you sure you want to delete this contact?')) {
diff --git a/routes/web.php b/routes/web.php
index 0c25a9725..ea6676b59 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -127,6 +127,10 @@
     ->name('contacts.update')
     ->middleware('auth');
 
+Route::put('contacts/{contact}/custom-columns', [ContactsController::class, 'updateCustomColumns'])
+    ->name('contacts.update-custom-columns')
+    ->middleware('auth');
+
 Route::delete('contacts/{contact}', [ContactsController::class, 'destroy'])
     ->name('contacts.destroy')
     ->middleware('auth');

From 3b38f85a71ffae598c530bba9bf6326d657ee0b2 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Mon, 19 Aug 2024 17:55:31 +0600
Subject: [PATCH 41/45] Add View Additional Data on Table

---
 app/Http/Controllers/ContactsController.php | 10 ++++++++++
 resources/js/Pages/Contacts/Index.vue       | 20 ++++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index 724a3f629..78c9cd18b 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -4,6 +4,7 @@
 
 use App\Models\Contact;
 use App\Models\Organization;
+use App\Models\ContactCustomColumns;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
@@ -20,6 +21,7 @@ public function index(): Response
         return Inertia::render('Contacts/Index', [
             'filters' => Request::all('search', 'trashed'),
             'organizations' => Organization::all(),
+            'additionalColumns' => Auth::user()->account->contactCustomColumns()->get(),
             'contacts' => Auth::user()->account->contacts()
                 ->with('organization')
                 ->orderByName()
@@ -33,6 +35,7 @@ public function index(): Response
                     'city' => $contact->city,
                     'deleted_at' => $contact->deleted_at,
                     'organization' => $contact->organization ? $contact->organization->only('name') : null,
+                    'additional_data' => $contact->additional_data,
                 ]),
         ]);
     }
@@ -183,6 +186,7 @@ public function addColumn()
     public function updateCustomColumns(Contact $contact): RedirectResponse
     {
         $columns = Request::input('columns');
+        $additionalData = json_decode($contact->additional_data, true) ?: [];
 
         foreach ($columns as $column) {
             if (isset($column['value']) && $column['value'] !== null) {
@@ -190,8 +194,14 @@ public function updateCustomColumns(Contact $contact): RedirectResponse
                     ['column_id' => $column['id']],
                     ['value' => $column['value']]
                 );
+
+                $columnName = ContactCustomColumns::where('id', $column['id'])->value('name');
+                $additionalData[$columnName] = $column['value'];
             }
         }
+        $contact->update([
+            'additional_data' => json_encode($additionalData),
+        ]);
 
 
         return Redirect::back()->with('success', 'Contact updated.');
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index b8a92e00c..cbb2ba59b 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -158,7 +158,8 @@
           <th class="pb-4 pt-6 px-6">Name</th>
           <th class="pb-4 pt-6 px-6">Organization</th>
           <th class="pb-4 pt-6 px-6">City</th>
-          <th class="pb-4 pt-6 px-6" colspan="2">Phone</th>
+          <th class="pb-4 pt-6 px-6">Phone</th>
+          <th v-for="column in additionalColumns" :key="column.id" class="pb-4 pt-6 px-6">{{ column.name }}</th>
         </tr>
         <tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
@@ -184,6 +185,11 @@
             {{ contact.phone }}
             </Link>
           </td>
+          <td v-for="column in additionalColumns" :key="column.id" class="border-t">
+            <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+            {{ getValue(column.name, contact) }}
+            </Link>
+          </td>
           <td class="w-px border-t">
             <Link class="flex items-center px-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
             <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
@@ -209,6 +215,7 @@ import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination.vue'
 import SearchFilter from '@/Shared/SearchFilter.vue'
 import Papa from 'papaparse'
+import { get } from 'lodash'
 
 export default {
   components: {
@@ -222,7 +229,8 @@ export default {
   props: {
     filters: Object,
     contacts: Object,
-    organizations: Object
+    organizations: Object,
+    additionalColumns: Object,
   },
   data() {
     return {
@@ -355,6 +363,14 @@ export default {
 
     },
 
+    getValue(columnName, contact) {
+      // Ensure additional_data is parsed or initialized
+      const additionalData = JSON.parse(contact.additional_data || '{}');
+
+      // Return the value for the specified column name, or an empty string if the key doesn't exist
+      return additionalData[columnName] || '';
+    }
+
   },
 }
 </script>

From 8e427efa71b2580845bd7ea4fb206ac7c4ad5197 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Tue, 20 Aug 2024 12:08:16 +0600
Subject: [PATCH 42/45] Add Events to Trigger Contacts Update

---
 app/Events/CustomColumnsUpdated.php         | 26 ++++++++++++++++++
 app/Http/Controllers/ContactsController.php | 10 ++-----
 app/Listeners/UpdateAdditionalData.php      | 29 +++++++++++++++++++++
 app/Providers/EventServiceProvider.php      | 29 +++++++++++++++++++++
 bootstrap/providers.php                     |  1 +
 5 files changed, 87 insertions(+), 8 deletions(-)
 create mode 100644 app/Events/CustomColumnsUpdated.php
 create mode 100644 app/Listeners/UpdateAdditionalData.php
 create mode 100644 app/Providers/EventServiceProvider.php

diff --git a/app/Events/CustomColumnsUpdated.php b/app/Events/CustomColumnsUpdated.php
new file mode 100644
index 000000000..88567c9cd
--- /dev/null
+++ b/app/Events/CustomColumnsUpdated.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+use App\Models\Contact;
+
+class CustomColumnsUpdated
+{
+    use SerializesModels;
+
+    public $contact;
+    public $columns;
+
+    public function __construct(Contact $contact, array $columns)
+    {
+        $this->contact = $contact;
+        $this->columns = $columns;
+    }
+}
diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index 78c9cd18b..7224354d6 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -12,7 +12,7 @@
 use Illuminate\Validation\Rule;
 use Inertia\Inertia;
 use Inertia\Response;
-use Mockery\Undefined;
+use App\Events\CustomColumnsUpdated;
 
 class ContactsController extends Controller
 {
@@ -186,7 +186,6 @@ public function addColumn()
     public function updateCustomColumns(Contact $contact): RedirectResponse
     {
         $columns = Request::input('columns');
-        $additionalData = json_decode($contact->additional_data, true) ?: [];
 
         foreach ($columns as $column) {
             if (isset($column['value']) && $column['value'] !== null) {
@@ -194,15 +193,10 @@ public function updateCustomColumns(Contact $contact): RedirectResponse
                     ['column_id' => $column['id']],
                     ['value' => $column['value']]
                 );
-
-                $columnName = ContactCustomColumns::where('id', $column['id'])->value('name');
-                $additionalData[$columnName] = $column['value'];
             }
         }
-        $contact->update([
-            'additional_data' => json_encode($additionalData),
-        ]);
 
+        event(new CustomColumnsUpdated($contact, $columns));
 
         return Redirect::back()->with('success', 'Contact updated.');
     }
diff --git a/app/Listeners/UpdateAdditionalData.php b/app/Listeners/UpdateAdditionalData.php
new file mode 100644
index 000000000..b5762fd48
--- /dev/null
+++ b/app/Listeners/UpdateAdditionalData.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Listeners;
+
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Queue\InteractsWithQueue;
+use App\Events\CustomColumnsUpdated;
+use App\Models\ContactCustomColumns;
+
+class UpdateAdditionalData
+{
+    public function handle(CustomColumnsUpdated $event)
+    {
+        $contact = $event->contact;
+        $columns = $event->columns;
+        $additionalData = json_decode($contact->additional_data, true) ?: [];
+
+        foreach ($columns as $column) {
+            if (isset($column['value']) && $column['value'] !== null) {
+                $columnName = ContactCustomColumns::where('id', $column['id'])->value('name');
+                $additionalData[$columnName] = $column['value'];
+            }
+        }
+
+        $contact->update([
+            'additional_data' => json_encode($additionalData),
+        ]);
+    }
+}
diff --git a/app/Providers/EventServiceProvider.php b/app/Providers/EventServiceProvider.php
new file mode 100644
index 000000000..3da6727d8
--- /dev/null
+++ b/app/Providers/EventServiceProvider.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * Register services.
+     */
+    protected $listen = [
+        \App\Events\CustomColumnsUpdated::class => [
+            \App\Listeners\UpdateAdditionalData::class,
+        ],
+    ];
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap services.
+     */
+    public function boot(): void
+    {
+        //
+    }
+}
diff --git a/bootstrap/providers.php b/bootstrap/providers.php
index 38b258d18..86f5297a5 100644
--- a/bootstrap/providers.php
+++ b/bootstrap/providers.php
@@ -2,4 +2,5 @@
 
 return [
     App\Providers\AppServiceProvider::class,
+    App\Providers\EventServiceProvider::class,
 ];

From de82144b6039e824b6805986d12fed7a2a2d3e95 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Tue, 20 Aug 2024 13:07:49 +0600
Subject: [PATCH 43/45] Add Prevent Duplicate Column

---
 app/Http/Controllers/ContactsController.php | 12 ++++++++++--
 resources/js/Pages/Contacts/Index.vue       |  6 +++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index 7224354d6..68f06e0fc 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -178,9 +178,17 @@ public function addColumn()
             'type' => ['required', 'in:string,number,date'],
         ]);
 
-        Auth::user()->account->contactCustomColumns()->create($column);
+        if (Auth::user()->account->contactCustomColumns()->where('name', $column['name'])->exists()) {
+            return Redirect::back()->with('error', 'Column already exists.');
+        } else {
 
-        return Redirect::back()->with('success', 'Column added.');
+            Auth::user()->account->contactCustomColumns()->create($column);
+
+            //send status 200 code
+            return response()->json([], 200);
+
+            return Redirect::back()->with('success', 'Column added.')->json([], 200);
+        }
     }
 
     public function updateCustomColumns(Contact $contact): RedirectResponse
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index cbb2ba59b..e1d1af761 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -28,7 +28,7 @@
               <div class="flex items-center justify-between mt-4">
                 <label for="type" class="block text-sm font-medium text-gray-700">Data Type</label>
                 <select id="type"
-                  class="mt-1 block w-1/2 py-2text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                  class="mt-1 block w-1/2 py-1 border-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                   <option>string</option>
                   <option>number</option>
                   <option>date</option>
@@ -110,7 +110,7 @@
                     <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
-                      }}</span>
+                        }}</span>
                     </th>
                   </tr>
                 </thead>
@@ -119,7 +119,7 @@
                     <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
-                      }}</span>
+                        }}</span>
                     </td>
                   </tr>
                 </tbody>

From a3072b5fff7110bbe1cdefc1894b545ca07836fb Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Tue, 20 Aug 2024 13:09:24 +0600
Subject: [PATCH 44/45] Remove Dead Code

---
 app/Http/Controllers/ContactsController.php | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index 68f06e0fc..a41185bb2 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -184,10 +184,7 @@ public function addColumn()
 
             Auth::user()->account->contactCustomColumns()->create($column);
 
-            //send status 200 code
-            return response()->json([], 200);
-
-            return Redirect::back()->with('success', 'Column added.')->json([], 200);
+            return Redirect::back()->with('success', 'Column added.');
         }
     }
 

From 96fed99d05b6f47b7349fd60807ccb13b22c21f0 Mon Sep 17 00:00:00 2001
From: ShoyebWritesCode <mdsoyeb@iut-dhaka.edu>
Date: Wed, 21 Aug 2024 10:45:04 +0600
Subject: [PATCH 45/45] Add Fixed Maximum Height for Preview Table

---
 resources/js/Pages/Contacts/Index.vue      | 62 ++++++++++-----------
 resources/js/Pages/Organizations/Index.vue | 63 +++++++++++-----------
 2 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index e1d1af761..df18137bc 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -57,35 +57,37 @@
             <button @click="handleCancel" class="absolute top-2 right-2 bg-transparent px-3 py-1 mr-2" title="Go Back">
               <font-awesome-icon icon="xmark" class="text-black" />
             </button>
+            <div class="overflow-y-auto max-h-64">
+              <table class="w-full table-auto border-collapse">
+                <thead>
+                  <tr>
+                    <th class="border font-bold text-left p-2">CSV Column</th>
+                    <th class="border font-bold text-left p-2">DB Column</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="csvColumn in csvColumns" :key="csvColumn" :class="{
+                    'bg-green-500': matchingColumn(csvColumn),
+                    'bg-yellow-500': !matchingColumn(csvColumn)
+                  }">
+                    <td class="border p-2">{{ csvColumn }}</td>
+                    <td class="border p-2 w-1/2">
+                      <select v-model="selectedDbColumns[csvColumn]"
+                        style="width: 120px; background-color:transparent;">
+                        <option v-if="matchingColumn(csvColumn)">
+                          {{ matchingColumn(csvColumn).name }}
+                        </option>
+                        <option v-else v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
+                          :value="dbColumn.name">
+                          {{ dbColumn.name }}
+                        </option>
+                      </select>
 
-            <table class="w-full table-auto border-collapse">
-              <thead>
-                <tr>
-                  <th class="border font-bold text-left p-2">CSV Column</th>
-                  <th class="border font-bold text-left p-2">DB Column</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="csvColumn in csvColumns" :key="csvColumn" :class="{
-                  'bg-green-500': matchingColumn(csvColumn),
-                  'bg-yellow-500': !matchingColumn(csvColumn)
-                }">
-                  <td class="border p-2">{{ csvColumn }}</td>
-                  <td class="border p-2 w-1/2">
-                    <select v-model="selectedDbColumns[csvColumn]" style="width: 120px; background-color:transparent;">
-                      <option v-if="matchingColumn(csvColumn)">
-                        {{ matchingColumn(csvColumn).name }}
-                      </option>
-                      <option v-else v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
-                        :value="dbColumn.name">
-                        {{ dbColumn.name }}
-                      </option>
-                    </select>
-
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
 
             <div class="flex justify-end mt-6">
               <button @click="handleCancel" class="btn-red px-4 py-2">Cancel</button>
@@ -110,7 +112,7 @@
                     <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
-                        }}</span>
+                      }}</span>
                     </th>
                   </tr>
                 </thead>
@@ -119,7 +121,7 @@
                     <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
-                        }}</span>
+                      }}</span>
                     </td>
                   </tr>
                 </tbody>
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index cdedad9b2..78acfd308 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -46,36 +46,37 @@
             <button @click="handleCancel" class="absolute top-2 right-2 bg-transparent px-3 py-1 mr-2" title="Go Back">
               <font-awesome-icon icon="xmark" class="text-black" />
             </button>
+            <div class="overflow-y-auto max-h-64">
+              <table class="w-full table-auto border-collapse">
+                <thead>
+                  <tr>
+                    <th class="border font-bold text-left p-2">CSV Column</th>
+                    <th class="border font-bold text-left p-2">DB Column</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="csvColumn in csvColumns" :key="csvColumn" :class="{
+                    'bg-green-500': matchingColumn(csvColumn),
+                    'bg-yellow-500': !matchingColumn(csvColumn)
+                  }">
+                    <td class="border p-2">{{ csvColumn }}</td>
+                    <td class="border p-2 w-1/2">
+                      <select v-model="selectedDbColumns[csvColumn]"
+                        style="width: 120px; background-color:transparent;">
+                        <option v-if="matchingColumn(csvColumn)">
+                          {{ matchingColumn(csvColumn).name }}
+                        </option>
+                        <option v-else v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
+                          :value="dbColumn.name">
+                          {{ dbColumn.name }}
+                        </option>
+                      </select>
 
-            <table class="w-full table-auto border-collapse">
-              <thead>
-                <tr>
-                  <th class="border font-bold text-left p-2">CSV Column</th>
-                  <th class="border font-bold text-left p-2">DB Column</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="csvColumn in csvColumns" :key="csvColumn" :class="{
-                  'bg-green-500': matchingColumn(csvColumn),
-                  'bg-yellow-500': !matchingColumn(csvColumn)
-                }">
-                  <td class="border p-2">{{ csvColumn }}</td>
-                  <td class="border p-2 w-1/2">
-                    <select v-model="selectedDbColumns[csvColumn]" style="width: 120px; background-color:transparent;">
-                      <option v-if="matchingColumn(csvColumn)">
-                        {{ matchingColumn(csvColumn).name }}
-                      </option>
-                      <option v-else v-for="dbColumn in availableDbColumns(csvColumn)" :key="dbColumn.name"
-                        :value="dbColumn.name">
-                        {{ dbColumn.name }}
-                      </option>
-                    </select>
-
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
             <div class="flex justify-end mt-6">
               <button @click="handleCancel" class="btn-red px-4 py-2">Cancel</button>
               <button @click="applyCsvChanges" class="ml-4 btn-green px-4 py-2">Continue</button>
@@ -99,7 +100,7 @@
                     <th v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b font-bold text-left p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         matchingColumn(csvColumn) ? matchingColumn(csvColumn).name : selectedDbColumns[csvColumn]
-                      }}</span>
+                        }}</span>
                     </th>
                   </tr>
                 </thead>
@@ -108,7 +109,7 @@
                     <td v-for="csvColumn in csvColumns" :key="csvColumn" class="border-b p-2">
                       <span v-if="selectedDbColumns[csvColumn] || matchingColumn(csvColumn)">{{
                         getValueForColumn(row, csvColumn) !== 'N/A' ? getValueForColumn(row, csvColumn) : ''
-                        }}</span>
+                      }}</span>
                     </td>
                   </tr>
                 </tbody>