diff --git a/app/Events/CustomColumnsUpdated.php b/app/Events/CustomColumnsUpdated.php
new file mode 100644
index 00000000..88567c9c
--- /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 fb612aca..a41185bb 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -3,6 +3,8 @@
 namespace App\Http\Controllers;
 
 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;
@@ -10,6 +12,7 @@
 use Illuminate\Validation\Rule;
 use Inertia\Inertia;
 use Inertia\Response;
+use App\Events\CustomColumnsUpdated;
 
 class ContactsController extends Controller
 {
@@ -17,19 +20,22 @@ 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()
                 ->filter(Request::only('search', 'trashed'))
                 ->paginate(10)
                 ->withQueryString()
-                ->through(fn ($contact) => [
+                ->through(fn($contact) => [
                     'id' => $contact->id,
                     'name' => $contact->name,
                     'phone' => $contact->phone,
                     'city' => $contact->city,
                     'deleted_at' => $contact->deleted_at,
                     'organization' => $contact->organization ? $contact->organization->only('name') : null,
+                    'additional_data' => $contact->additional_data,
                 ]),
         ]);
     }
@@ -90,6 +96,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'),
         ]);
     }
 
@@ -101,7 +110,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'],
@@ -129,4 +138,71 @@ 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.');
+    }
+
+    public function addColumn()
+    {
+        $column = Request::validate([
+            'name' => ['required', 'max:50'],
+            'type' => ['required', 'in:string,number,date'],
+        ]);
+
+        if (Auth::user()->account->contactCustomColumns()->where('name', $column['name'])->exists()) {
+            return Redirect::back()->with('error', 'Column already exists.');
+        } else {
+
+            Auth::user()->account->contactCustomColumns()->create($column);
+
+            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']]
+                );
+            }
+        }
+
+        event(new CustomColumnsUpdated($contact, $columns));
+
+        return Redirect::back()->with('success', 'Contact updated.');
+    }
 }
diff --git a/app/Http/Controllers/InvoicesController.php b/app/Http/Controllers/InvoicesController.php
new file mode 100644
index 00000000..0d4124c3
--- /dev/null
+++ b/app/Http/Controllers/InvoicesController.php
@@ -0,0 +1,118 @@
+<?php
+
+namespace App\Http\Controllers;
+
+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 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
+{
+    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()
+                ->has('contacts')
+                ->get()
+                ->map
+                ->only('id', 'name'),
+            'products' => Product::all(['id', 'name', 'price', 'quantity']),
+        ]);
+    }
+
+    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)
+    {
+        $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,
+        ]);
+
+        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,
+        ]);
+    }
+
+    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/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index db3402e8..fb60267d 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -3,31 +3,49 @@
 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) : [];
+
+        $allColumns = Organization::allColumns();
+
+        $columnsToSelect = array_intersect($allColumns, $visibleColumns);
+
+        if (!in_array('id', $columnsToSelect)) {
+            $columnsToSelect[] = 'id';
+        }
+
+        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)
+                ->paginate(25)
                 ->withQueryString()
-                ->through(fn ($organization) => [
-                    'id' => $organization->id,
-                    'name' => $organization->name,
-                    'phone' => $organization->phone,
-                    'city' => $organization->city,
-                    'deleted_at' => $organization->deleted_at,
-                ]),
+                ->through(
+                    fn($organization) =>
+                    $organization->only($columnsToSelect)
+                ),
         ]);
     }
 
@@ -104,4 +122,49 @@ 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();
+    }
+
+    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/app/Http/Controllers/ProductsController.php b/app/Http/Controllers/ProductsController.php
new file mode 100644
index 00000000..31ba90f6
--- /dev/null
+++ b/app/Http/Controllers/ProductsController.php
@@ -0,0 +1,74 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Product;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Redirect;
+use Inertia\Inertia;
+use Inertia\Response;
+use Illuminate\Http\Request;
+
+
+class ProductsController extends Controller
+{
+    public function index(Request $request): Response
+    {
+        $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(Request $request): RedirectResponse
+    {
+        $validateData = $request->validate([
+            'name' => ['required', 'max:50'],
+            'description' => ['required', 'max:255'],
+            'price' => ['required', 'numeric'],
+            'quantity' => ['required', 'numeric'],
+        ]);
+
+        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/app/Http/Controllers/ReportsController.php b/app/Http/Controllers/ReportsController.php
index 57a978a4..32148da5 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/app/Listeners/UpdateAdditionalData.php b/app/Listeners/UpdateAdditionalData.php
new file mode 100644
index 00000000..b5762fd4
--- /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/Models/Account.php b/app/Models/Account.php
index c3fdce6f..885dbad5 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/app/Models/Contact.php b/app/Models/Contact.php
index 98411794..ffb75579 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
new file mode 100644
index 00000000..d2b216c3
--- /dev/null
+++ b/app/Models/ContactCustomColumns.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Model;
+
+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/app/Models/ContactsCustomData.php b/app/Models/ContactsCustomData.php
new file mode 100644
index 00000000..549b3613
--- /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/app/Models/Invoice.php b/app/Models/Invoice.php
new file mode 100644
index 00000000..a30d8730
--- /dev/null
+++ b/app/Models/Invoice.php
@@ -0,0 +1,22 @@
+<?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'];
+
+    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/app/Models/InvoiceItem.php b/app/Models/InvoiceItem.php
new file mode 100644
index 00000000..9b840d5f
--- /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/app/Models/Organization.php b/app/Models/Organization.php
index fd5647bf..b3ac58e5 100644
--- a/app/Models/Organization.php
+++ b/app/Models/Organization.php
@@ -17,6 +17,31 @@ public function resolveRouteBinding($value, $field = null)
         return $this->where($field ?? 'id', $value)->withTrashed()->firstOrFail();
     }
 
+    public static function allColumns(): array
+    {
+        return [
+            'name',
+            'phone',
+            'city',
+            'email',
+            'address',
+            'region',
+            'country',
+            'postal_code',
+            'deleted_at'
+        ];
+    }
+
+    public static function defaultColumns(): array
+    {
+        return [
+            'name',
+            'phone',
+            'city',
+            'email'
+        ];
+    }
+
     public function contacts(): HasMany
     {
         return $this->hasMany(Contact::class);
@@ -25,7 +50,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/app/Models/Product.php b/app/Models/Product.php
new file mode 100644
index 00000000..e0077388
--- /dev/null
+++ b/app/Models/Product.php
@@ -0,0 +1,18 @@
+<?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'];
+
+    public function resolveRouteBinding($value, $field = null)
+    {
+        return $this->where($field ?? 'id', $value)->firstOrFail();
+    }
+}
diff --git a/app/Models/Settings.php b/app/Models/Settings.php
new file mode 100644
index 00000000..f916cbda
--- /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/app/Providers/EventServiceProvider.php b/app/Providers/EventServiceProvider.php
new file mode 100644
index 00000000..3da6727d
--- /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 38b258d1..86f5297a 100644
--- a/bootstrap/providers.php
+++ b/bootstrap/providers.php
@@ -2,4 +2,5 @@
 
 return [
     App\Providers\AppServiceProvider::class,
+    App\Providers\EventServiceProvider::class,
 ];
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 00000000..110f7f03
--- /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/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 00000000..92477952
--- /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');
+    }
+};
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 00000000..bbd9888c
--- /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/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 00000000..9a66efec
--- /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/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 00000000..01452fd0
--- /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/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 00000000..30cd88c8
--- /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');
+    }
+};
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 00000000..b7ac49c0
--- /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 00000000..814644ad
--- /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 00000000..8f5b8cf5
--- /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');
+    }
+};
diff --git a/package-lock.json b/package-lock.json
index 490a24aa..739d4dd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,18 @@
     "packages": {
         "": {
             "name": "pingcrm",
+            "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",
+                "papaparse": "^5.4.1",
+                "vue-draggable-next": "^2.2.1",
+                "vuedraggable": "^4.1.0",
+                "ziggy-js": "^2.3.0"
+            },
             "devDependencies": {
                 "@inertiajs/vue3": "^1.0.15",
                 "@popperjs/core": "^2.11.0",
@@ -50,7 +62,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"
             },
@@ -58,6 +69,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",
@@ -482,6 +504,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",
@@ -620,8 +692,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",
@@ -889,6 +960,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",
@@ -912,7 +989,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",
@@ -925,7 +1001,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"
@@ -935,7 +1010,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",
@@ -952,7 +1026,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"
@@ -962,7 +1035,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"
             }
@@ -971,7 +1043,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"
@@ -981,7 +1052,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",
@@ -992,7 +1062,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"
@@ -1004,8 +1073,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",
@@ -1102,8 +1170,18 @@
         "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/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",
@@ -1143,10 +1221,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.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",
@@ -1159,6 +1236,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 +1317,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 +1385,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",
@@ -1363,7 +1484,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"
             },
@@ -1386,6 +1506,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",
@@ -1400,6 +1531,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",
@@ -1415,8 +1554,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",
@@ -1471,7 +1609,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"
             }
@@ -1500,6 +1637,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",
@@ -1522,7 +1665,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"
             },
@@ -1551,6 +1693,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",
@@ -1793,8 +1940,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",
@@ -1860,6 +2006,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",
@@ -1925,7 +2076,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 +2111,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",
@@ -2154,6 +2303,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",
@@ -2340,6 +2511,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",
@@ -2451,7 +2639,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"
             },
@@ -2485,7 +2672,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 +2680,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"
             },
@@ -2544,7 +2729,6 @@
             "version": "3.3.7",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
             "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -2689,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",
@@ -2759,11 +2948,16 @@
                 "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",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-            "dev": true
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
         },
         "node_modules/picomatch": {
             "version": "2.3.1",
@@ -2799,7 +2993,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",
@@ -2984,8 +3177,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",
@@ -3031,6 +3223,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",
@@ -3052,6 +3253,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",
@@ -3088,6 +3294,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",
@@ -3243,15 +3458,29 @@
                 "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",
             "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-            "dev": true,
             "engines": {
                 "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",
@@ -3446,6 +3675,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",
@@ -3509,6 +3747,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",
@@ -3624,6 +3870,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",
@@ -3702,7 +3956,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",
@@ -3719,6 +3972,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",
@@ -3743,6 +4005,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",
@@ -3887,6 +4165,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 69da4712..10f1661c 100644
--- a/package.json
+++ b/package.json
@@ -27,5 +27,17 @@
         "uuid": "^8.3.2",
         "vite": "^5.2.7",
         "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",
+        "papaparse": "^5.4.1",
+        "vue-draggable-next": "^2.2.1",
+        "vuedraggable": "^4.1.0",
+        "ziggy-js": "^2.3.0"
     }
 }
diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index 9527d728..b52b1c1f 100644
--- a/resources/css/buttons.css
+++ b/resources/css/buttons.css
@@ -2,6 +2,22 @@
   @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-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/Contacts/Edit.vue b/resources/js/Pages/Contacts/Edit.vue
index fb1019d2..a02f8146 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/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index 27b666ce..df18137b 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,147 @@
           <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 @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-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>
+                  <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>
+        <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>
+            <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>
+
+                    </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>
+
+            </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">
@@ -22,35 +160,41 @@
           <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">
             <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 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" />
+            <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
@@ -72,6 +216,8 @@ 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'
+import { get } from 'lodash'
 
 export default {
   components: {
@@ -85,6 +231,8 @@ export default {
   props: {
     filters: Object,
     contacts: Object,
+    organizations: Object,
+    additionalColumns: Object,
   },
   data() {
     return {
@@ -92,6 +240,19 @@ export default {
         search: this.filters.search,
         trashed: this.filters.trashed,
       },
+      showModal: false,
+      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 +267,112 @@ 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('/contacts/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()
+    },
+
+    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);
+        }
+      });
+
+    },
+
+    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>
diff --git a/resources/js/Pages/Invoices/Create.vue b/resources/js/Pages/Invoices/Create.vue
new file mode 100644
index 00000000..b8a92075
--- /dev/null
+++ b/resources/js/Pages/Invoices/Create.vue
@@ -0,0 +1,190 @@
+<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="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">
+            <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" 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>
+          </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.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>
+                </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'
+import html2pdf from 'html2pdf.js'
+
+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: []
+      }),
+      contacts: [],
+      addedProducts: [],
+    }
+  },
+  computed: {
+    availableProducts() {
+      return this.products.filter(product => !this.addedProducts.some(p => p.id === product.id))
+    },
+    totalAmount() {
+      return this.addedProducts.reduce((total, product) => total + (product.price * product.quantity0), 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, quantity0: 1 })
+          this.form.product_id = null
+        }
+      }
+    },
+    addedProducts: {
+      handler(newProducts) {
+        this.form.added_products = newProducts
+      },
+      deep: true
+    }
+  },
+  methods: {
+    async handleSubmit() {
+      this.form.number = this.generateRandomString(8)
+      this.form.amount = this.totalAmount;
+
+      try {
+        await this.form.post('/invoices')
+        this.addedProducts = []
+      } catch (error) {
+        console.error('Failed to create invoice:', error)
+      }
+    },
+    removeProduct(index) {
+      this.addedProducts.splice(index, 1)
+    },
+
+    generateRandomString(length) {
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      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));
+      }
+      return result;
+    }
+
+  }
+}
+</script>
diff --git a/resources/js/Pages/Invoices/Index.vue b/resources/js/Pages/Invoices/Index.vue
new file mode 100644
index 00000000..fe432af3
--- /dev/null
+++ b/resources/js/Pages/Invoices/Index.vue
@@ -0,0 +1,136 @@
+<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>
+          </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_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" />
+              </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 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: {
+    Head,
+    Icon,
+    Link,
+    Pagination,
+    SearchFilter,
+    InvoiceContent,
+    LoadingButton,
+  },
+  props: {
+    invoices: Object,
+  },
+  layout: Layout,
+  data() {
+    return {
+      search: '',
+      localcontact: null,
+      localinvoice: null,
+      isPdfGeneration: true,
+    }
+  },
+  watch: {
+    search(newSearch) {
+      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
+    },
+  },
+
+
+
+}
+</script>
diff --git a/resources/js/Pages/Invoices/View.vue b/resources/js/Pages/Invoices/View.vue
new file mode 100644
index 00000000..47dc34e6
--- /dev/null
+++ b/resources/js/Pages/Invoices/View.vue
@@ -0,0 +1,69 @@
+<template>
+  <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
+    </loading-button>
+  </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 html2pdf from 'html2pdf.js'
+import InvoiceContent from '@/Shared/Content.vue'
+
+export default {
+  components: {
+    Head,
+    Link,
+    LoadingButton,
+    SelectInput,
+    TextInput,
+    InvoiceContent,
+  },
+  layout: Layout,
+  props: {
+    invoice: Object,
+    contact: Object,
+  },
+  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.$el;
+      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>
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 9fc263fa..78acfd30 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,156 @@
           <option value="only">Only Trashed</option>
         </select>
       </search-filter>
-      <Link class="btn-indigo" href="/organizations/create">
-        <span>Create</span>
-        <span class="hidden md:inline">&nbsp;Organization</span>
-      </Link>
+      <div>
+        <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">
+          <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" :disabled="column.disabled" />
+                <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>
+
+        <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>
+            <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>
+
+                    </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>
+
+            </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>
+            <!-- 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>
+
+        <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  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">
+    <div class="bg-white rounded-md shadow overflow-x-auto max-h-96">
       <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>
+        <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 sticky top-0 z-10">
+                <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">
-            <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>
-            </td>
-            <td class="border-t">
-              <Link class="flex items-center px-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-                {{ organization.city }}
+          <tr v-for="organization in organizations.data" :key="organization.id"
+            class="hover:bg-gray-100 focus-within:bg-gray-100 text-sm">
+            <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[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 class="border-t">
-              <Link class="flex items-center px-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-                {{ organization.phone }}
-              </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" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
               </Link>
             </td>
           </tr>
@@ -60,7 +176,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'
@@ -68,6 +184,9 @@ 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'
+import Papa from 'papaparse'
+import { data } from 'autoprefixer'
 
 export default {
   components: {
@@ -76,11 +195,13 @@ export default {
     Link,
     Pagination,
     SearchFilter,
+    draggable,
   },
   layout: Layout,
   props: {
     filters: Object,
     organizations: Object,
+    visibleColumns: Array,
   },
   data() {
     return {
@@ -88,6 +209,22 @@ export default {
         search: this.filters.search,
         trashed: this.filters.trashed,
       },
+      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 },
+        { 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') || 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') },
+      ],
+      csvColumns: [],
+      selectedDbColumns: {},
+      csvData: []
     }
   },
   watch: {
@@ -102,6 +239,134 @@ export default {
     reset() {
       this.form = mapValues(this.form, () => null)
     },
+    isVisible(columnName) {
+      return this.columns.find(column => column.name === columnName).visible
+    },
+    applyChanges() {
+      this.showModal = false;
+
+      const selectedColumns = this.columns
+        .filter(column => column.visible)
+        .map(column => column.name);
+
+
+      this.$inertia.post('/organizations/column', {
+        columns: selectedColumns,
+      });
+    },
+    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];
+          }
+        }
+        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();
+    },
+
+
+    //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);
+      }
+    },
+
+
   },
+
 }
 </script>
diff --git a/resources/js/Pages/Products/Create.vue b/resources/js/Pages/Products/Create.vue
new file mode 100644
index 00000000..690ba368
--- /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/Edit.vue b/resources/js/Pages/Products/Edit.vue
new file mode 100644
index 00000000..49c06862
--- /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
new file mode 100644
index 00000000..1dc75225
--- /dev/null
+++ b/resources/js/Pages/Products/Index.vue
@@ -0,0 +1,85 @@
+<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" />
+      </div>
+      <!-- Create Button -->
+      <Link class="btn-indigo" href="/products/create">
+      <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="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">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 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" />
+              </Link>
+            </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 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/resources/js/Pages/Reports/Index.vue b/resources/js/Pages/Reports/Index.vue
index e464089c..b7ee6712 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 00000000..5363b466
--- /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/Content.vue b/resources/js/Shared/Content.vue
new file mode 100644
index 00000000..c260932f
--- /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">Unit Price</th>
+          <th class="pb-4 pt-6 px-6">Quantity</th>
+          <th class="pb-4 pt-6 px-6">Product Total</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 35db91a3..439b1ac3 100644
--- a/resources/js/Shared/Icon.vue
+++ b/resources/js/Shared/Icon.vue
@@ -1,13 +1,48 @@
 <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-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>
+
+
+  <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>
 
+
 <script>
 export default {
   props: {
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 5c6217b1..1bf54359 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>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 36569465..1aab5c53 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -24,6 +24,19 @@
         <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 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/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
index 7eb3e644..72c56681 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>
+
diff --git a/resources/js/app.js b/resources/js/app.js
index b69157cd..f1341cc3 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 , faGripVertical, faPlus, faFileImport, faArrowLeft, faXmark, faFileExport} from '@fortawesome/free-solid-svg-icons'
+
+library.add(faTableCells,faGripVertical,faPlus,faFileImport,faArrowLeft,faXmark, faFileExport)
 
 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)
   },
 })
diff --git a/routes/web.php b/routes/web.php
index c59b3da5..ea6676b5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,6 +7,8 @@
 use App\Http\Controllers\OrganizationsController;
 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;
 
 /*
@@ -99,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'])
@@ -121,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');
@@ -129,6 +139,15 @@
     ->name('contacts.restore')
     ->middleware('auth');
 
+
+Route::post('contacts/import-csv', [ContactsController::class, 'importCsv'])
+    ->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'])
@@ -140,3 +159,50 @@
 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');
+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');
+
+
+// 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('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');
+
+//Column Visibility
+Route::post('organizations/column', [OrganizationsController::class, 'saveColumnVisibility'])
+    ->name('organizations.column')
+    ->middleware('auth');
diff --git a/vite.config.js.timestamp-1723199851105-ab65d091ab93f.mjs b/vite.config.js.timestamp-1723199851105-ab65d091ab93f.mjs
new file mode 100644
index 00000000..e0eb56ed
--- /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