diff --git a/app/Http/Controllers/BorrowedItem/BorrowedController.php b/app/Http/Controllers/BorrowedItem/BorrowedController.php
new file mode 100644
index 0000000..cb411f4
--- /dev/null
+++ b/app/Http/Controllers/BorrowedItem/BorrowedController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\BorrowedItem;
+
+use App\Http\Controllers\Controller;
+use App\Models\Borrowed_item;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class BorrowedController extends Controller
+{
+    public function Index()
+    {
+        $borrowedItem = Borrowed_item::all();
+
+        return Inertia::render('Admin/Borrowed_item/Index', [
+            'BorrowedItem' => $borrowedItem,
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Branch/BranchController.php b/app/Http/Controllers/Branch/BranchController.php
new file mode 100644
index 0000000..2b006b2
--- /dev/null
+++ b/app/Http/Controllers/Branch/BranchController.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Http\Controllers\Branch;
+
+use App\Http\Controllers\Controller;
+use App\Models\Branch;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class BranchController extends Controller
+{
+    public function Index()
+    {
+        $branch = Branch::all();
+
+        return Inertia::render('Admin/Branch/Index', [
+            'branch' => $branch,
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Admin/Branch/Create');
+    }
+
+    public function store(Request $request)
+    {
+        $branch = Branch::create([
+
+            // create a variable that will coordinated in my frontend form
+            'branch' => $request->branch,
+        ]);
+
+        // You can optionally return a response or redirect the user
+        // For example, redirect them to the index page or return a success message
+        return redirect()->route('branch.index')->with('success', 'Category created successfully');
+    }
+}
diff --git a/app/Http/Controllers/Categories/CategoriesController.php b/app/Http/Controllers/Categories/CategoriesController.php
new file mode 100644
index 0000000..5a860f2
--- /dev/null
+++ b/app/Http/Controllers/Categories/CategoriesController.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers\Categories;
+
+use App\Http\Controllers\Controller;
+use App\Models\Categories;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class CategoriesController extends Controller
+{
+    public function index()
+    {
+        // $product = Product::all();
+        // return Inertia::render('Admin/Management/Products/Index', compact('product'));
+
+        $categories = Categories::all();
+
+        return Inertia::render('Admin/Categories/Index', [
+            'categories' => $categories,
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Admin/Categories/Create');
+    }
+
+    public function store(Request $request)
+    {
+        $categories = categories::create([
+
+            // create a variable that will coordinated in my frontend form
+            'categories' => $request->categories,
+        ]);
+
+        // You can optionally return a response or redirect the user
+        // For example, redirect them to the index page or return a success message
+        return redirect()->route('categories.index')->with('success', 'Category created successfully');
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Equipment/EquipmentController.php b/app/Http/Controllers/Equipment/EquipmentController.php
new file mode 100644
index 0000000..b2f2e3e
--- /dev/null
+++ b/app/Http/Controllers/Equipment/EquipmentController.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers\Equipment;
+
+use App\Http\Controllers\Controller;
+use App\Models\Equipment;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class EquipmentController extends Controller
+{
+    public function index()
+    {
+        // $product = Product::all();
+        // return Inertia::render('Admin/Management/Products/Index', compact('product'));
+
+        $equipments = Equipment::all();
+
+        return Inertia::render('Admin/Equipment/Index', [
+            'equipments' => $equipments,
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Admin/Equipment/Create');
+    }
+
+    public function store(Request $request)
+    {
+        $equipments = Equipment::create([
+
+            // create a variable that will coordinated in my frontend form
+            'equipments' => $request->equipments,
+        ]);
+
+        // You can optionally return a response or redirect the user
+        // For example, redirect them to the index page or return a success message
+        return redirect()->route('equipment.index')->with('success', 'Category created successfully');
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Library/SettingController.php b/app/Http/Controllers/Library/SettingController.php
new file mode 100644
index 0000000..ed0d477
--- /dev/null
+++ b/app/Http/Controllers/Library/SettingController.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers\library;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class SettingController extends Controller
+{
+    public function index()
+    {
+        return Inertia::render('Admin/Library/Settings/Index');
+    }
+}
diff --git a/app/Http/Controllers/Management/ProductManagementController.php b/app/Http/Controllers/Management/ProductManagementController.php
new file mode 100644
index 0000000..2a0583c
--- /dev/null
+++ b/app/Http/Controllers/Management/ProductManagementController.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers\Management;
+
+use App\Http\Controllers\Controller;
+use App\Models\Product;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class ProductManagementController extends Controller
+{
+    public function index()
+    {
+        // $product = Product::all();
+        // return Inertia::render('Admin/Management/Products/Index', compact('product'));
+
+        $product = Product::all();
+
+        return Inertia::render('Admin/Management/Products/Index', [
+            'products' => $product,
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+
+        // i create a variable located my model named product same as the user
+
+        $product = Product::create([
+
+            // create a variable that will coordinated in my frontend form
+            'productName' => $request->productName,
+            'productId' => $request->productId,
+            'branch' => $request->branch,
+            'status' => $request->status,
+            'productDescription' => $request->productDescription,
+            'productFileUpload' => $request->productFileUpload,
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Management/UserManagementController.php b/app/Http/Controllers/Management/UserManagementController.php
new file mode 100644
index 0000000..5264f97
--- /dev/null
+++ b/app/Http/Controllers/Management/UserManagementController.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Controllers\Management;
+
+use App\Http\Controllers\Controller;
+use App\Models\User;
+use Illuminate\Validation\Rules;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Inertia\Inertia;
+
+class UserManagementController extends Controller
+{
+    public function index()
+    {
+        $users = User::all();
+
+        return Inertia::render('Admin/Management/User/Index', [
+            'users' => $users,
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Admin/Management/User/Create');
+    }
+
+
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'email' => 'required|string|email|max:255|unique:' . User::class,
+            'password' => ['required', 'confirmed', Rules\Password::defaults()],
+        ]);
+
+        $user = User::create([
+            'name' => $request->name,
+            'email' => $request->email,
+            'password' => Hash::make($request->password),
+        ]);
+
+        return redirect()->route('management.index')->with('success', 'Category created successfully');
+
+        // event(new Registered($user));
+
+        // Auth::login($user);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
index 873b4f7..29b52a2 100644
--- a/app/Http/Controllers/ProfileController.php
+++ b/app/Http/Controllers/ProfileController.php
@@ -24,6 +24,10 @@ public function edit(Request $request): Response
         ]);
     }
 
+    public function show()
+    {
+        return Inertia::render('Profile/Show');
+    }
     /**
      * Update the user's profile information.
      */
diff --git a/app/Http/Controllers/Qr/GenerateQrController.php b/app/Http/Controllers/Qr/GenerateQrController.php
new file mode 100644
index 0000000..ed6c466
--- /dev/null
+++ b/app/Http/Controllers/Qr/GenerateQrController.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers\Qr;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class GenerateQrController extends Controller
+{
+    public function index()
+    {
+        return Inertia::render('Admin/Qr/GenerateQr/Index');
+    }
+}
diff --git a/app/Http/Controllers/Qr/QrController.php b/app/Http/Controllers/Qr/QrController.php
new file mode 100644
index 0000000..220d1fb
--- /dev/null
+++ b/app/Http/Controllers/Qr/QrController.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Controllers\Qr;
+
+use App\Http\Controllers\Controller;
+use App\Models\Qrcode;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class QrController extends Controller
+{
+    public function index()
+    {
+        $qrcodes = Qrcode::all();
+
+        return Inertia::render('Admin/Qr/Index', [
+            'qrcodes' => $qrcodes,
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Admin/Qr/Create');
+    }
+
+    public function store(Request $request)
+    {
+        // Validate the request data
+        $validatedData = $request->validate([
+            'productName' => 'required',
+            'productId' => 'required',
+            'branch' => 'required',
+            'status' => 'required',
+            'qrDescription' => 'required',
+            'fileUpload' => 'required',
+            'qrcode' => 'required',
+        ]);
+
+        // Create the Qrcode model with the validated data
+        $product = Qrcode::create($validatedData);
+
+        return redirect()->route('qr.index')->with('success', 'Category created successfully');
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Storage/StorageController.php b/app/Http/Controllers/Storage/StorageController.php
new file mode 100644
index 0000000..90ef740
--- /dev/null
+++ b/app/Http/Controllers/Storage/StorageController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers\Storage;
+
+use App\Http\Controllers\Controller;
+use App\Models\Storage;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class StorageController extends Controller
+{
+    public function index()
+    {
+        // return Inertia::render('Admin/Storage/Index');
+
+
+        $storage = Storage::all();
+
+        return Inertia::render('Admin/Storage/Index', [
+            'storages' => $storage,
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Warranty/WarrantyController.php b/app/Http/Controllers/Warranty/WarrantyController.php
new file mode 100644
index 0000000..d6cf0aa
--- /dev/null
+++ b/app/Http/Controllers/Warranty/WarrantyController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers\Warranty;
+
+use App\Http\Controllers\Controller;
+use App\Models\Warranty;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class WarrantyController extends Controller
+{
+    public function index()
+    {
+        // $product = Product::all();
+        // return Inertia::render('Admin/Management/Products/Index', compact('product'));
+
+        $warranty = Warranty::all();
+
+        return Inertia::render('Admin/Warranty/Index', [
+            'warranty' => $warranty,
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/app/Models/Borrowed_item.php b/app/Models/Borrowed_item.php
new file mode 100644
index 0000000..e43dd4c
--- /dev/null
+++ b/app/Models/Borrowed_item.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Borrowed_item extends Model
+{
+    use HasFactory;
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+
+    //  i use fillable in my item that i need to be populated
+    protected $fillable = [
+        'borrowed_item',
+
+    ];
+}
diff --git a/app/Models/Branch.php b/app/Models/Branch.php
new file mode 100644
index 0000000..973d00e
--- /dev/null
+++ b/app/Models/Branch.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Branch extends Model
+{
+    use HasFactory;
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+
+    //  i use fillable in my item that i need to be populated
+    protected $fillable = [
+        'branch',
+
+    ];
+}
\ No newline at end of file
diff --git a/app/Models/Categories.php b/app/Models/Categories.php
new file mode 100644
index 0000000..4816d4e
--- /dev/null
+++ b/app/Models/Categories.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Categories extends Model
+{
+    use HasFactory;
+
+
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+
+    //  i use fillable in my item that i need to be populated
+    protected $fillable = [
+        'categories',
+
+    ];
+}
\ No newline at end of file
diff --git a/app/Models/Equipment.php b/app/Models/Equipment.php
new file mode 100644
index 0000000..0267e72
--- /dev/null
+++ b/app/Models/Equipment.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Equipment extends Model
+{
+    use HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+
+    //  i use fillable in my item that i need to be populated
+    protected $fillable = [
+        'equipments',
+    ];
+}
\ No newline at end of file
diff --git a/app/Models/Product.php b/app/Models/Product.php
new file mode 100644
index 0000000..6db4e6f
--- /dev/null
+++ b/app/Models/Product.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Product extends Model
+{
+    use HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+
+    //  i use fillable in my item that i need to be populated
+    protected $fillable = [
+        'productName',
+        'productId',
+        'branch',
+        'status',
+        'productDescription',
+        'productFileUpload',
+
+    ];
+
+}
diff --git a/app/Models/Qrcode.php b/app/Models/Qrcode.php
new file mode 100644
index 0000000..8083806
--- /dev/null
+++ b/app/Models/Qrcode.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Qrcode extends Model
+{
+    use HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+
+    //  i use fillable in my item that i need to be populated
+    protected $fillable = [
+        'productName',
+        'productId',
+        'branch',
+        'status',
+        'qrDescription',
+        'fileUpload',
+        'qrcode',
+        // 'status',
+        // 'productDescription',
+
+    ];
+}
diff --git a/app/Models/Storage.php b/app/Models/Storage.php
new file mode 100644
index 0000000..54a29db
--- /dev/null
+++ b/app/Models/Storage.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Storage extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/Warranty.php b/app/Models/Warranty.php
new file mode 100644
index 0000000..a322162
--- /dev/null
+++ b/app/Models/Warranty.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Warranty extends Model
+{
+    use HasFactory;
+}
diff --git a/database/migrations/2023_09_20_071116_create_products_table.php b/database/migrations/2023_09_20_071116_create_products_table.php
new file mode 100644
index 0000000..1089d40
--- /dev/null
+++ b/database/migrations/2023_09_20_071116_create_products_table.php
@@ -0,0 +1,33 @@
+<?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('productName');
+            $table->string('productId');
+            $table->string('branch');
+            $table->string('status')->default(true); // Default to true
+            $table->longText('productDescription');
+            $table->string('productFileUpload')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('products');
+    }
+};
diff --git a/database/migrations/2023_09_23_125944_create_storages_table.php b/database/migrations/2023_09_23_125944_create_storages_table.php
new file mode 100644
index 0000000..7ca5264
--- /dev/null
+++ b/database/migrations/2023_09_23_125944_create_storages_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('storages', function (Blueprint $table) {
+            $table->id();
+            $table->string('productName');
+            $table->integer('productId');
+            $table->string('itemName');
+            $table->boolean('status')->default(true);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('storages');
+    }
+};
diff --git a/database/migrations/2023_09_25_024820_create_qrcodes_table.php b/database/migrations/2023_09_25_024820_create_qrcodes_table.php
new file mode 100644
index 0000000..3f8cdc3
--- /dev/null
+++ b/database/migrations/2023_09_25_024820_create_qrcodes_table.php
@@ -0,0 +1,34 @@
+<?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('qrcodes', function (Blueprint $table) {
+            $table->id();
+            $table->string('productName')->nullable();
+            $table->string('productId')->nullable();
+            $table->string('branch')->nullable();
+            $table->string('status')->default(true); // Default to true
+            $table->longText('qrDescription')->nullable();
+            $table->string('fileUpload')->nullable();
+            $table->string('qrcode')->nullable(); // Add an image column
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('qrcodes');
+    }
+};
diff --git a/database/migrations/2023_10_02_064541_create_categories_table.php b/database/migrations/2023_10_02_064541_create_categories_table.php
new file mode 100644
index 0000000..14182dc
--- /dev/null
+++ b/database/migrations/2023_10_02_064541_create_categories_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('categories', function (Blueprint $table) {
+            $table->id();
+            $table->string('categories')->nullable();
+            $table->rememberToken();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('categories');
+    }
+};
\ No newline at end of file
diff --git a/database/migrations/2023_10_03_024857_create_equipment_table.php b/database/migrations/2023_10_03_024857_create_equipment_table.php
new file mode 100644
index 0000000..f5e8979
--- /dev/null
+++ b/database/migrations/2023_10_03_024857_create_equipment_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('equipment', function (Blueprint $table) {
+            $table->id();
+            $table->string('equipments')->nullable();
+            $table->rememberToken();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('equipment');
+    }
+};
\ No newline at end of file
diff --git a/database/migrations/2023_10_03_060621_create_branches_table.php b/database/migrations/2023_10_03_060621_create_branches_table.php
new file mode 100644
index 0000000..3de8663
--- /dev/null
+++ b/database/migrations/2023_10_03_060621_create_branches_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::create('branches', function (Blueprint $table) {
+            $table->id();
+            $table->string('branch')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('branches');
+    }
+};
\ No newline at end of file
diff --git a/database/migrations/2023_10_03_065006_create_warranty_table.php b/database/migrations/2023_10_03_065006_create_warranty_table.php
new file mode 100644
index 0000000..8efd49e
--- /dev/null
+++ b/database/migrations/2023_10_03_065006_create_warranty_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::create('warranties', function (Blueprint $table) {
+            $table->id();
+            $table->string('warranty')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('warranties');
+    }
+};
\ No newline at end of file
diff --git a/database/migrations/2023_10_13_013556_create_borrowed_item_table.php b/database/migrations/2023_10_13_013556_create_borrowed_item_table.php
new file mode 100644
index 0000000..3993dee
--- /dev/null
+++ b/database/migrations/2023_10_13_013556_create_borrowed_item_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::create('borrowed_items', function (Blueprint $table) {
+            $table->id();
+            $table->string('borrowed_item')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('borrowed_item');
+    }
+};
diff --git a/database/seeders/Borrowed_itemSeeder.php b/database/seeders/Borrowed_itemSeeder.php
new file mode 100644
index 0000000..1a50f70
--- /dev/null
+++ b/database/seeders/Borrowed_itemSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Borrowed_item;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Faker\Factory as FakerFactory;
+
+class Borrowed_itemSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run()
+    {
+        $faker = FakerFactory::create();
+
+        for ($i = 0; $i < 1; $i++) {
+            Borrowed_item::create([
+                'borrowed_item' => $faker->word,
+            ]);
+        }
+    }
+}
diff --git a/database/seeders/BranchSeeder.php b/database/seeders/BranchSeeder.php
new file mode 100644
index 0000000..8318680
--- /dev/null
+++ b/database/seeders/BranchSeeder.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Branch;
+use Illuminate\Database\Seeder;
+use Faker\Factory as FakerFactory;
+
+class BranchSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run()
+    {
+        $faker = FakerFactory::create();
+
+        for ($i = 0; $i < 1; $i++) {
+            Branch::create([
+                'branch' => $faker->word,
+            ]);
+        }
+    }
+}
\ No newline at end of file
diff --git a/database/seeders/CategoriesSeeder.php b/database/seeders/CategoriesSeeder.php
new file mode 100644
index 0000000..7225cd9
--- /dev/null
+++ b/database/seeders/CategoriesSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Categories;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Faker\Factory as FakerFactory;
+
+class CategoriesSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $faker = FakerFactory::create();
+
+        for ($i = 0; $i < 1; $i++) {
+            Categories::create([
+                'categories' => $faker->word(),
+            ]);
+        }
+    }
+}
\ No newline at end of file
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index a9f4519..87460aa 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -3,6 +3,8 @@
 namespace Database\Seeders;
 
 // use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+
+use App\Models\Branch;
 use Illuminate\Database\Seeder;
 
 class DatabaseSeeder extends Seeder
@@ -14,9 +16,27 @@ public function run(): void
     {
         // \App\Models\User::factory(10)->create();
 
-        // \App\Models\User::factory()->create([
-        //     'name' => 'Test User',
-        //     'email' => 'test@example.com',
-        // ]);
+        \App\Models\User::factory()->create([
+            'name' => 'Jhunriz',
+            'email' => 'jhunriz14@gmail.com',
+            'password' => '123456789'
+        ]);
+
+        $this->call([
+            ProductsTableSeeder::class,
+        ]);
+
+        $this->call([
+            StorageTableSeeder::class,
+        ]);
+
+        $this->call([
+            QrcodeTableSeeder::class,
+        ]);
+        $this->call([CategoriesSeeder::class,]);
+        $this->call([EquipmentSeeder::class,]);
+        $this->call([BranchSeeder::class,]);
+        $this->call([WarrantySeeder::class,]);
+        $this->call([Borrowed_itemSeeder::class,]);
     }
 }
diff --git a/database/seeders/EquipmentSeeder.php b/database/seeders/EquipmentSeeder.php
new file mode 100644
index 0000000..3f4e4b5
--- /dev/null
+++ b/database/seeders/EquipmentSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Equipment;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use faker\Factory as FakerFactory;
+
+class EquipmentSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $faker = FakerFactory::create();
+
+        for ($i = 0; $i < 1; $i++) {
+            Equipment::create([
+                'equipments' => $faker->word(),
+            ]);
+        }
+    }
+}
\ No newline at end of file
diff --git a/database/seeders/ProductsTableSeeder.php b/database/seeders/ProductsTableSeeder.php
new file mode 100644
index 0000000..aa8f5e8
--- /dev/null
+++ b/database/seeders/ProductsTableSeeder.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Product;
+use App\Models\User;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+
+use Faker\Factory as FakerFactory;
+
+class ProductsTableSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run()
+
+    {
+        $faker = FakerFactory::create();
+
+        for ($i = 0; $i < 1; $i++) {
+            Product::create([
+                'productName' => $faker->word(),
+                'productId' => $faker->randomNumber(),
+                'branch' => $faker->word(),
+                'status' => true,
+                'productDescription' => $faker->word(),
+                'productFileUpload' => $faker->imageUrl($width = 640, $height = 480),
+            ]);
+        }
+
+
+
+        // \App\Models\User::factory()->create([
+        //     'productName' => 'Product 1',
+        //     'productId' => 'PROD001',
+        //     'itemName' => 'Item 1',
+        //     'status' => true,
+        // ]);
+    }
+}
\ No newline at end of file
diff --git a/database/seeders/QrcodeTableSeeder.php b/database/seeders/QrcodeTableSeeder.php
new file mode 100644
index 0000000..20c16bb
--- /dev/null
+++ b/database/seeders/QrcodeTableSeeder.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Qrcode;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Faker\Factory as FakerFactory;
+
+class QrcodeTableSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $faker = FakerFactory::create();
+
+        for ($i = 0; $i < 1; $i++) {
+            Qrcode::create([
+                'productName' => $faker->word(),
+                'productId' => $faker->randomNumber(),
+                'branch' => $faker->word(),
+                'status' => true,
+                'qrDescription' => $faker->word(),
+                'fileUpload' => $faker->imageUrl($width = 640, $height = 480),
+                'qrcode' => $faker->imageUrl($width = 640, $height = 480), // Generate a fake image URL
+            ]);
+        }
+    }
+}
diff --git a/database/seeders/StorageTableSeeder.php b/database/seeders/StorageTableSeeder.php
new file mode 100644
index 0000000..5a312e2
--- /dev/null
+++ b/database/seeders/StorageTableSeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Storage;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+
+class StorageTableSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        for ($i = 0; $i < 10; $i++) {
+            DB::table('storages')->insert([
+                'productName' => \Faker\Factory::create()->word(),
+                'productId' => \Faker\Factory::create()->randomNumber(),
+                'itemName' => \Faker\Factory::create()->word(),
+                'status' => true,
+            ]);
+        }
+    }
+}
diff --git a/database/seeders/WarrantySeeder.php b/database/seeders/WarrantySeeder.php
new file mode 100644
index 0000000..0b1e5b7
--- /dev/null
+++ b/database/seeders/WarrantySeeder.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Warranty;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Faker\Factory as FakerFactory;
+
+class WarrantySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $faker = FakerFactory::create();
+
+        for ($i = 0; $i < 1; $i++) {
+            Warranty::create([
+                'warranty' => $faker->word,
+            ]);
+        }
+    }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 35927a5..02f60b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,15 @@
                 "@emotion/styled": "^11.11.0",
                 "@mui/icons-material": "^5.14.3",
                 "@mui/material": "^5.14.5",
-                "mui-datatables": "^4.3.0"
+                "@mui/x-charts": "^6.0.0-alpha.9",
+                "html2canvas": "^1.4.1",
+                "mui-datatables": "^4.3.0",
+                "notistack": "^3.0.1",
+                "qrcode.react": "^3.1.0",
+                "react-barcode": "^1.4.6",
+                "react-html5-camera-photo": "^1.5.11",
+                "react-qr-code": "^2.0.12",
+                "react-qr-reader": "^3.0.0-beta-1"
             },
             "devDependencies": {
                 "@inertiajs/react": "^1.0.0",
@@ -1228,6 +1236,38 @@
                 "react": "^17.0.0 || ^18.0.0"
             }
         },
+        "node_modules/@mui/x-charts": {
+            "version": "6.0.0-alpha.9",
+            "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-6.0.0-alpha.9.tgz",
+            "integrity": "sha512-2DVTbyxsm3g0D6kztQP9W4W9OOGeIQ/g6Ip6gjHj2wOOqkDB36bZxwVG/HlJuaVFBL001vI2VkYJYy+helw9gA==",
+            "dependencies": {
+                "@babel/runtime": "^7.22.11",
+                "clsx": "^2.0.0",
+                "d3-color": "^3.1.0",
+                "d3-scale": "^4.0.2",
+                "d3-shape": "^3.2.0",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.9.0",
+                "@emotion/styled": "^11.8.1",
+                "@mui/material": "^5.4.1",
+                "@mui/system": "^5.4.1",
+                "react": "^17.0.0 || ^18.0.0",
+                "react-dom": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1367,6 +1407,37 @@
                 "vite": "^4.2.0"
             }
         },
+        "node_modules/@zxing/browser": {
+            "version": "0.0.7",
+            "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.0.7.tgz",
+            "integrity": "sha512-AepzMgDnD6EjxewqmXpHJsi4S3Gw9ilZJLIbTf6fWuWySEcHBodnGu3p7FWlgq1Sd5QyfPhTum5z3CBkkhMVng==",
+            "optionalDependencies": {
+                "@zxing/text-encoding": "^0.9.0"
+            },
+            "peerDependencies": {
+                "@zxing/library": "^0.18.3"
+            }
+        },
+        "node_modules/@zxing/library": {
+            "version": "0.18.6",
+            "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz",
+            "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==",
+            "dependencies": {
+                "ts-custom-error": "^3.0.0"
+            },
+            "engines": {
+                "node": ">= 10.4.0"
+            },
+            "optionalDependencies": {
+                "@zxing/text-encoding": "~0.9.0"
+            }
+        },
+        "node_modules/@zxing/text-encoding": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+            "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+            "optional": true
+        },
         "node_modules/ansi-styles": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1477,6 +1548,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.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1728,6 +1807,14 @@
                 "node": ">=10"
             }
         },
+        "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",
@@ -1745,6 +1832,100 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
             "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
         },
+        "node_modules/d3-array": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+            "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+            "dependencies": {
+                "internmap": "1 - 2"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-color": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+            "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-format": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+            "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+            "dependencies": {
+                "d3-color": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-path": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+            "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+            "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+            "dependencies": {
+                "d3-array": "2.10.0 - 3",
+                "d3-format": "1 - 3",
+                "d3-interpolate": "1.2.0 - 3",
+                "d3-time": "2.1.1 - 3",
+                "d3-time-format": "2 - 4"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-shape": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+            "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+            "dependencies": {
+                "d3-path": "^3.1.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+            "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+            "dependencies": {
+                "d3-array": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time-format": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+            "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+            "dependencies": {
+                "d3-time": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1993,7 +2174,6 @@
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
             "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-            "dev": true,
             "hasInstallScript": true,
             "optional": true,
             "os": [
@@ -2073,6 +2253,14 @@
                 "node": ">=4"
             }
         },
+        "node_modules/goober": {
+            "version": "2.1.13",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz",
+            "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==",
+            "peerDependencies": {
+                "csstype": "^3.0.10"
+            }
+        },
         "node_modules/has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2129,6 +2317,18 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
+        "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/import-fresh": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2160,6 +2360,14 @@
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
             "dev": true
         },
+        "node_modules/internmap": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+            "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/is-arrayish": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -2232,6 +2440,66 @@
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
             "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
         },
+        "node_modules/jsbarcode": {
+            "version": "3.11.5",
+            "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.11.5.tgz",
+            "integrity": "sha512-zv3KsH51zD00I/LrFzFSM6dst7rDn0vIMzaiZFL7qusTjPZiPtxg3zxetp0RR7obmjTw4f6NyGgbdkBCgZUIrA==",
+            "bin": {
+                "auto.js": "bin/barcodes/CODE128/auto.js",
+                "Barcode.js": "bin/barcodes/Barcode.js",
+                "barcodes": "bin/barcodes",
+                "canvas.js": "bin/renderers/canvas.js",
+                "checksums.js": "bin/barcodes/MSI/checksums.js",
+                "codabar": "bin/barcodes/codabar",
+                "CODE128": "bin/barcodes/CODE128",
+                "CODE128_AUTO.js": "bin/barcodes/CODE128/CODE128_AUTO.js",
+                "CODE128.js": "bin/barcodes/CODE128/CODE128.js",
+                "CODE128A.js": "bin/barcodes/CODE128/CODE128A.js",
+                "CODE128B.js": "bin/barcodes/CODE128/CODE128B.js",
+                "CODE128C.js": "bin/barcodes/CODE128/CODE128C.js",
+                "CODE39": "bin/barcodes/CODE39",
+                "constants.js": "bin/barcodes/ITF/constants.js",
+                "defaults.js": "bin/options/defaults.js",
+                "EAN_UPC": "bin/barcodes/EAN_UPC",
+                "EAN.js": "bin/barcodes/EAN_UPC/EAN.js",
+                "EAN13.js": "bin/barcodes/EAN_UPC/EAN13.js",
+                "EAN2.js": "bin/barcodes/EAN_UPC/EAN2.js",
+                "EAN5.js": "bin/barcodes/EAN_UPC/EAN5.js",
+                "EAN8.js": "bin/barcodes/EAN_UPC/EAN8.js",
+                "encoder.js": "bin/barcodes/EAN_UPC/encoder.js",
+                "ErrorHandler.js": "bin/exceptions/ErrorHandler.js",
+                "exceptions": "bin/exceptions",
+                "exceptions.js": "bin/exceptions/exceptions.js",
+                "fixOptions.js": "bin/help/fixOptions.js",
+                "GenericBarcode": "bin/barcodes/GenericBarcode",
+                "getOptionsFromElement.js": "bin/help/getOptionsFromElement.js",
+                "getRenderProperties.js": "bin/help/getRenderProperties.js",
+                "help": "bin/help",
+                "index.js": "bin/renderers/index.js",
+                "index.tmp.js": "bin/barcodes/index.tmp.js",
+                "ITF": "bin/barcodes/ITF",
+                "ITF.js": "bin/barcodes/ITF/ITF.js",
+                "ITF14.js": "bin/barcodes/ITF/ITF14.js",
+                "JsBarcode.js": "bin/JsBarcode.js",
+                "linearizeEncodings.js": "bin/help/linearizeEncodings.js",
+                "merge.js": "bin/help/merge.js",
+                "MSI": "bin/barcodes/MSI",
+                "MSI.js": "bin/barcodes/MSI/MSI.js",
+                "MSI10.js": "bin/barcodes/MSI/MSI10.js",
+                "MSI1010.js": "bin/barcodes/MSI/MSI1010.js",
+                "MSI11.js": "bin/barcodes/MSI/MSI11.js",
+                "MSI1110.js": "bin/barcodes/MSI/MSI1110.js",
+                "object.js": "bin/renderers/object.js",
+                "options": "bin/options",
+                "optionsFromStrings.js": "bin/help/optionsFromStrings.js",
+                "pharmacode": "bin/barcodes/pharmacode",
+                "renderers": "bin/renderers",
+                "shared.js": "bin/renderers/shared.js",
+                "svg.js": "bin/renderers/svg.js",
+                "UPC.js": "bin/barcodes/EAN_UPC/UPC.js",
+                "UPCE.js": "bin/barcodes/EAN_UPC/UPCE.js"
+            }
+        },
         "node_modules/jsesc": {
             "version": "2.5.2",
             "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -2244,6 +2512,11 @@
                 "node": ">=4"
             }
         },
+        "node_modules/jslib-html5-camera-photo": {
+            "version": "3.3.4",
+            "resolved": "https://registry.npmjs.org/jslib-html5-camera-photo/-/jslib-html5-camera-photo-3.3.4.tgz",
+            "integrity": "sha512-qysjLnP4bud0+g0qs5uA/7i569x+6ID2ufgezf9XQ+BE3EvhYjz177vi9WXLEuq+V6C/WXEv73NUICvHm5VGmQ=="
+        },
         "node_modules/json-parse-even-better-errors": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -2524,6 +2797,35 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/notistack": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
+            "integrity": "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==",
+            "dependencies": {
+                "clsx": "^1.1.0",
+                "goober": "^2.0.33"
+            },
+            "engines": {
+                "node": ">=12.0.0",
+                "npm": ">=6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/notistack"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
+        "node_modules/notistack/node_modules/clsx": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+            "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/nprogress": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
@@ -2817,6 +3119,19 @@
             "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
             "dev": true
         },
+        "node_modules/qr.js": {
+            "version": "0.0.0",
+            "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+            "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+        },
+        "node_modules/qrcode.react": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
+            "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/qs": {
             "version": "6.11.2",
             "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
@@ -2871,6 +3186,18 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-barcode": {
+            "version": "1.4.6",
+            "resolved": "https://registry.npmjs.org/react-barcode/-/react-barcode-1.4.6.tgz",
+            "integrity": "sha512-56WCPqjgpExPVi5LgKOfxM6uSCB4Wd1r94jY2VEwkIdigPjLp8P9RyIBIyQmDraxtYGOHE0e4Uer4+QrmOIy7Q==",
+            "dependencies": {
+                "jsbarcode": "^3.8.0",
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/react-display-name": {
             "version": "0.2.5",
             "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
@@ -2911,6 +3238,18 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-html5-camera-photo": {
+            "version": "1.5.11",
+            "resolved": "https://registry.npmjs.org/react-html5-camera-photo/-/react-html5-camera-photo-1.5.11.tgz",
+            "integrity": "sha512-5OpdW66UmwKwd0ZHvy/U9tEZj19GrcG6RDRXjs1bFBgJoWzLJoJ7YNd8rmdrizV/6go/z9GrwoWMovqCUyaJgQ==",
+            "dependencies": {
+                "jslib-html5-camera-photo": "3.3.4"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/react-is": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -2921,6 +3260,52 @@
             "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
         },
+        "node_modules/react-qr-code": {
+            "version": "2.0.12",
+            "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.12.tgz",
+            "integrity": "sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==",
+            "dependencies": {
+                "prop-types": "^15.8.1",
+                "qr.js": "0.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.x || ^17.x || ^18.x",
+                "react-native-svg": "*"
+            },
+            "peerDependenciesMeta": {
+                "react-native-svg": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-qr-reader": {
+            "version": "3.0.0-beta-1",
+            "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz",
+            "integrity": "sha512-5HeFH9x/BlziRYQYGK2AeWS9WiKYZtGGMs9DXy3bcySTX3C9UJL9EwcPnWw8vlf7JP4FcrAlr1SnZ5nsWLQGyw==",
+            "dependencies": {
+                "@zxing/browser": "0.0.7",
+                "@zxing/library": "^0.18.3",
+                "rollup": "^2.67.2"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0"
+            }
+        },
+        "node_modules/react-qr-reader/node_modules/rollup": {
+            "version": "2.79.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+            "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
         "node_modules/react-refresh": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -3292,6 +3677,14 @@
                 "node": ">=14.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/thenify": {
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -3333,6 +3726,14 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/ts-custom-error": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+            "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/ts-interface-checker": {
             "version": "0.1.13",
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -3395,6 +3796,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/vite": {
             "version": "4.4.9",
             "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
diff --git a/package.json b/package.json
index 72ee7af..ce4c481 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,14 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.14.3",
         "@mui/material": "^5.14.5",
-        "mui-datatables": "^4.3.0"
+        "@mui/x-charts": "^6.0.0-alpha.9",
+        "html2canvas": "^1.4.1",
+        "mui-datatables": "^4.3.0",
+        "notistack": "^3.0.1",
+        "qrcode.react": "^3.1.0",
+        "react-barcode": "^1.4.6",
+        "react-html5-camera-photo": "^1.5.11",
+        "react-qr-code": "^2.0.12",
+        "react-qr-reader": "^3.0.0-beta-1"
     }
 }
diff --git a/resources/css/app.css b/resources/css/app.css
index b42ef0f..8a24077 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,3 +6,4 @@
     /* @apply w-full sm:max-w-md mt-6 px-6 py-4 shadow-lg overflow-hidden sm:rounded-lg */
     @apply rounded p-10 shadow-lg
 }
+
diff --git a/resources/js/Components/Alert.jsx b/resources/js/Components/Alert.jsx
new file mode 100644
index 0000000..8d3ef79
--- /dev/null
+++ b/resources/js/Components/Alert.jsx
@@ -0,0 +1,31 @@
+import React, { useCallback } from "react";
+import Button from "@mui/material/Button";
+import { SnackbarProvider, useSnackbar } from "notistack";
+
+function SnackbarExample() {
+    const { enqueueSnackbar } = useSnackbar();
+    const handleClickVariant = (variant) => () => {
+        // variant could be success, error, warning, info, or default
+        enqueueSnackbar("The user is Added!", { variant });
+    };
+
+    return (
+        <React.Fragment>
+            <Button
+                type="submit"
+                variant="contained"
+                onClick={handleClickVariant("success")}
+            >
+                Submit
+            </Button>
+        </React.Fragment>
+    );
+}
+
+export default function IntegrationNotistack() {
+    return (
+        <SnackbarProvider maxSnack={3}>
+            <SnackbarExample />
+        </SnackbarProvider>
+    );
+}
diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx
new file mode 100644
index 0000000..93343ba
--- /dev/null
+++ b/resources/js/Components/BarcodeGenerator.jsx
@@ -0,0 +1,109 @@
+import React, { useState, useRef } from "react";
+import Barcode from "react-barcode";
+import { Box, Button, TextField } from "@mui/material";
+import html2canvas from "html2canvas";
+
+const BarcodeGenerator = () => {
+    const [productName, setProductName] = useState("");
+    const barcodeRef = useRef(null);
+
+    const handleInputChange = (e) => {
+        setProductName(e.target.value);
+        const inputValue = event.target.value.replace(/\D/g, "").slice(0, 48);
+        setProductName(inputValue);
+    };
+
+    const downloadBarcode = () => {
+        if (barcodeRef.current) {
+            html2canvas(barcodeRef.current).then((canvas) => {
+                // Create an "a" element to trigger the download
+                const a = document.createElement("a");
+                a.href = canvas.toDataURL("image/png");
+                a.download = "barcode.png";
+                a.click();
+            });
+        }
+    };
+
+    const printBarcode = () => {
+        const barcodeCanvas = document.getElementById("barcode-canvas");
+        const printWindow = window.open("", "", "width=1000,height=1000");
+        printWindow.document.open();
+        printWindow.document.write(
+            "<html><head><title>Print</title></head><body>"
+        );
+        printWindow.document.write(barcodeCanvas.innerHTML);
+        printWindow.document.write("</body></html>");
+        printWindow.document.close();
+        printWindow.print();
+        printWindow.close();
+    };
+
+    return (
+        <div className="grid grid-col gap-2 items-center px-4 lg:px-24 justify-center h-screen lg:h-96 bg-fre shadow-md">
+            <div className="grid grid-col w-full justify-start gap-5">
+                <h1 className="text-2xl lg:text-3xl text-center font-bold mb-4">
+                    Generate Barcode
+                </h1>
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column", // Adjusted for smaller screens
+                        alignItems: "center",
+                        width: "100%",
+                    }}
+                >
+                    <div className="grid grid-col w-full">
+                        <TextField
+                            id="barcode-value-input"
+                            label="Barcode Value"
+                            variant="outlined"
+                            size="large"
+                            value={productName}
+                            fullWidth
+                            onChange={handleInputChange}
+                            type="text"
+                        />
+                    </div>
+                </Box>
+            </div>
+            <div>
+                <div
+                    ref={barcodeRef}
+                    id="barcode-canvas"
+                    className="flex justify-center border-gray-400 w-full" // Centered for smaller screens
+                >
+                    {productName && (
+                        <Barcode
+                            id="barcode-canvas"
+                            value={productName}
+                            width={3}
+                            height={60} // Adjusted for smaller screens
+                            canvas
+                        />
+                    )}
+                </div>
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 py-5 lg:py-10">
+                    <Button
+                        color="primary"
+                        variant="contained"
+                        onClick={downloadBarcode}
+                        fullWidth // Full width for smaller screens
+                    >
+                        Download
+                    </Button>
+                    <Button
+                        color="success"
+                        variant="contained"
+                        onClick={printBarcode}
+                        fullWidth // Full width for smaller screens
+                    >
+                        Print
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BarcodeGenerator;
diff --git a/resources/js/Components/BarcodeScanner.jsx b/resources/js/Components/BarcodeScanner.jsx
new file mode 100644
index 0000000..45b5e5b
--- /dev/null
+++ b/resources/js/Components/BarcodeScanner.jsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+
+export default function BarcodeScanner() {
+    const [decodedResult, setDecodedResult] = useState(null);
+
+    useEffect(() => {
+        const quaggaScript = document.createElement("script");
+        quaggaScript.src =
+            "https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js";
+
+        quaggaScript.onload = () => {
+            const html5QrcodeScanner = new Html5QrcodeScanner("qr-reader", {
+                fps: 10,
+                qrbox: 250,
+            });
+
+            function onScanSuccess(decodedText, decodedResult) {
+                setDecodedResult(decodedText); // Update the state with the scanned result
+            }
+
+            html5QrcodeScanner.render(onScanSuccess);
+        };
+
+        document.body.appendChild(quaggaScript);
+
+        return () => {
+            document.body.removeChild(quaggaScript);
+        };
+    }, []);
+
+    return (
+        <div>
+            <p>Decoded Result: {decodedResult}</p>
+            <div className="grid justify-center w-full" id="qr-reader"></div>
+        </div>
+    );
+}
diff --git a/resources/js/Components/BasicPie.jsx b/resources/js/Components/BasicPie.jsx
new file mode 100644
index 0000000..23ffd4c
--- /dev/null
+++ b/resources/js/Components/BasicPie.jsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { PieChart } from "@mui/x-charts/PieChart";
+
+export default function BasicPie() {
+    return (
+        <div className="mx-auto flex justify-center">
+            <PieChart
+                series={[
+                    {
+                        data: [
+                            { id: 0, value: 10, label: "series A" },
+                            { id: 1, value: 15, label: "series B" },
+                            { id: 2, value: 20, label: "series C" },
+                        ],
+                    },
+                ]}
+                width={400}
+                height={300}
+            />
+        </div>
+    );
+}
diff --git a/resources/js/Components/Card.jsx b/resources/js/Components/Card.jsx
new file mode 100644
index 0000000..098b14f
--- /dev/null
+++ b/resources/js/Components/Card.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+
+const ShippingCard = ({ title, count, icon }) => {
+    return (
+        <Card sx={{ minWidth: 275 }}>
+            <CardContent className="flex flex-cols-3 gap-4 items-center">
+                <Typography sx={{ fontSize: 24 }} color="primary" gutterBottom>
+                    {icon}
+                </Typography>
+                <div className="grid grid-col">
+                    <Typography variant="header" component="div">
+                        {title}
+                    </Typography>
+                    <Typography
+                        variant="button"
+                        sx={{ mb: 1.5 }}
+                        color="text.secondary"
+                    >
+                        {count}
+                    </Typography>
+                </div>
+            </CardContent>
+        </Card>
+    );
+};
+
+ShippingCard.propTypes = {
+    icon: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    count: PropTypes.string.isRequired,
+};
+
+export default ShippingCard;
diff --git a/resources/js/Components/Clock.jsx b/resources/js/Components/Clock.jsx
new file mode 100644
index 0000000..b7a64cf
--- /dev/null
+++ b/resources/js/Components/Clock.jsx
@@ -0,0 +1,42 @@
+import { Typography } from "@mui/material";
+import React, { useState, useEffect } from "react";
+
+function Clock() {
+    const [currentDateTime, setCurrentDateTime] = useState(new Date());
+
+    // Update the current date and time every second
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            setCurrentDateTime(new Date());
+        }, 1000);
+
+        // Clear the interval when the component unmounts
+        return () => clearInterval(intervalId);
+    }, []);
+    // clock
+
+    const options = {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+        timeZoneName: "short",
+    };
+
+    const formattedDateTime = currentDateTime.toLocaleDateString(
+        "en-US",
+        options
+    );
+
+    return (
+        <div>
+            <Typography variant="subtitle2">Current Date and Time</Typography>
+            <p>{formattedDateTime}</p>
+        </div>
+    );
+}
+
+export default Clock;
diff --git a/resources/js/Components/CustomBreadcrumbs.jsx b/resources/js/Components/CustomBreadcrumbs.jsx
new file mode 100644
index 0000000..3011bd5
--- /dev/null
+++ b/resources/js/Components/CustomBreadcrumbs.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+
+function handleClick(event) {
+    event.preventDefault();
+}
+
+export default function CustomBreadcrumbs({ items }) {
+    return (
+        <div role="presentation" onClick={handleClick}>
+            <Breadcrumbs aria-label="breadcrumb">
+                {items.map((item, index) => (
+                    <Link
+                        key={index}
+                        underline="hover"
+                        sx={{ display: "flex", alignItems: "center" }}
+                        color="inherit"
+                        href={item.url}
+                    >
+                        {item.icon}
+                        {item.text}
+                    </Link>
+                ))}
+            </Breadcrumbs>
+        </div>
+    );
+}
diff --git a/resources/js/Components/CustomSelect.jsx b/resources/js/Components/CustomSelect.jsx
new file mode 100644
index 0000000..c15c789
--- /dev/null
+++ b/resources/js/Components/CustomSelect.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+
+export default function MySelectComponent({
+    label,
+    value,
+    options,
+    onChange,
+    style,
+}) {
+    return (
+        <FormControl style={style} fullWidth size="small">
+            <InputLabel>{label}</InputLabel>
+            <Select value={value} label={label} onChange={onChange}>
+                {options.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Select>
+        </FormControl>
+    );
+}
diff --git a/resources/js/Components/CustomSpeedDial.jsx b/resources/js/Components/CustomSpeedDial.jsx
new file mode 100644
index 0000000..2136d0e
--- /dev/null
+++ b/resources/js/Components/CustomSpeedDial.jsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import SpeedDial from "@mui/material/SpeedDial";
+import SpeedDialIcon from "@mui/material/SpeedDialIcon";
+import SpeedDialAction from "@mui/material/SpeedDialAction";
+import ExpandLessSharpIcon from "@mui/icons-material/ExpandLessSharp";
+
+export default function CustomSpeedDial({ actions, openIcon }) {
+    return (
+        <Box sx={{ height: 320, transform: "translateZ(0px)", flexGrow: 1 }}>
+            <SpeedDial
+                ariaLabel="SpeedDial openIcon example"
+                sx={{ position: "absolute", bottom: 16, right: 16 }}
+                icon={<SpeedDialIcon openIcon={openIcon} />}
+            >
+                {actions.map((action) => (
+                    <SpeedDialAction
+                        key={action.name}
+                        icon={action.icon}
+                        tooltipTitle={action.name}
+                    />
+                ))}
+            </SpeedDial>
+        </Box>
+    );
+}
diff --git a/resources/js/Components/CustomizeSnackBar.jsx b/resources/js/Components/CustomizeSnackBar.jsx
new file mode 100644
index 0000000..39fa069
--- /dev/null
+++ b/resources/js/Components/CustomizeSnackBar.jsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import Stack from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+import Snackbar from "@mui/material/Snackbar";
+import MuiAlert from "@mui/material/Alert";
+
+const Alert = React.forwardRef(function Alert(props, ref) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
+export default function CustomizedSnackbars({
+    title,
+    color,
+    startIcon,
+    alertMessage,
+}) {
+    const [open, setOpen] = React.useState(false);
+
+    const handleClick = () => {
+        setOpen(true);
+    };
+
+    const handleClose = (event, reason) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+
+    // Your condition here (e.g., showSnackbar)
+    const showSnackbar = true; // Replace this with your condition
+
+    return (
+        <>
+            <Stack spacing={2} sx={{ width: "100%" }}>
+                <Button
+                    variant="contained"
+                    color={color}
+                    startIcon={startIcon}
+                    onClick={handleClick}
+                >
+                    {title}
+                </Button>
+            </Stack>
+            {showSnackbar && (
+                <Snackbar
+                    open={open}
+                    autoHideDuration={6000}
+                    onClose={handleClose}
+                >
+                    <Alert
+                        onClose={handleClose}
+                        severity="success"
+                        sx={{ width: "100%" }}
+                    >
+                        {alertMessage}
+                    </Alert>
+                </Snackbar>
+            )}
+        </>
+    );
+}
diff --git a/resources/js/Components/CustomizedSwitches.jsx b/resources/js/Components/CustomizedSwitches.jsx
new file mode 100644
index 0000000..67b23b2
--- /dev/null
+++ b/resources/js/Components/CustomizedSwitches.jsx
@@ -0,0 +1,74 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+
+const MaterialUISwitch = styled(Switch)(({ theme }) => ({
+    width: 62,
+    height: 34,
+    padding: 7,
+    "& .MuiSwitch-switchBase": {
+        margin: 1,
+        padding: 0,
+        transform: "translateX(6px)",
+        "&.Mui-checked": {
+            color: "#fff",
+            transform: "translateX(22px)",
+            "& .MuiSwitch-thumb:before": {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+                    "#fff"
+                )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+            },
+            "& + .MuiSwitch-track": {
+                opacity: 1,
+                backgroundColor:
+                    theme.palette.mode === "dark" ? "#8796A5" : "#aab4be",
+            },
+        },
+    },
+    "& .MuiSwitch-thumb": {
+        backgroundColor: theme.palette.mode === "dark" ? "#003892" : "#001e3c",
+        width: 32,
+        height: 32,
+        "&:before": {
+            content: "''",
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            left: 0,
+            top: 0,
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+            backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+                "#fff"
+            )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+        },
+    },
+    "& .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be",
+        borderRadius: 20 / 2,
+    },
+}));
+
+export default function CustomizedSwitches({ checked, onChange, label }) {
+    return (
+        <FormGroup>
+            <FormControlLabel
+                control={
+                    <MaterialUISwitch
+                        checked={checked}
+                        onChange={onChange}
+                        name="customized-switch"
+                    />
+                }
+                label={label}
+            />
+        </FormGroup>
+    );
+}
diff --git a/resources/js/Components/Darkmode.jsx b/resources/js/Components/Darkmode.jsx
new file mode 100644
index 0000000..e96cac7
--- /dev/null
+++ b/resources/js/Components/Darkmode.jsx
@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import Container from "@mui/material/Container";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import Switch from "@mui/material/Switch";
+
+function DarkModeToggle() {
+    const [darkMode, setDarkMode] = useState(false);
+
+    // Toggle the dark mode state
+    const toggleDarkMode = () => {
+        setDarkMode(!darkMode);
+    };
+
+    // Create a Material-UI theme with dark mode
+    const theme = createTheme({
+        palette: {
+            mode: darkMode ? "dark" : "light",
+        },
+    });
+
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <AppBar position="static">
+                <Toolbar>
+                    <Typography
+                        variant="h6"
+                        component="div"
+                        sx={{ flexGrow: 1 }}
+                    >
+                        Dark Mode Example
+                    </Typography>
+                    <IconButton color="inherit" onClick={toggleDarkMode}>
+                        {darkMode ? <Brightness7Icon /> : <Brightness4Icon />}
+                    </IconButton>
+                </Toolbar>
+            </AppBar>
+            <Container>
+                <Typography variant="h4" component="div" sx={{ my: 4 }}>
+                    Welcome to Dark Mode Example
+                </Typography>
+                <Typography variant="body1">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Nullam nec purus sed neque bibendum convallis.
+                </Typography>
+                {/* Add more content here */}
+            </Container>
+        </ThemeProvider>
+    );
+}
+
+export default DarkModeToggle;
diff --git a/resources/js/Components/FileUpload.jsx b/resources/js/Components/FileUpload.jsx
new file mode 100644
index 0000000..2868e25
--- /dev/null
+++ b/resources/js/Components/FileUpload.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+
+export default function FileUpload() {
+    const [selectedFile, setSelectedFile] = useState(null);
+
+    const handleFileChange = (event) => {
+        const file = event.target.files[0];
+
+        // Check if the selected file is a PDF
+        if (file && file.type === "application/pdf") {
+            setSelectedFile(file);
+        } else {
+            console.log("Please select a PDF file.");
+        }
+    };
+
+    const handleUpload = () => {
+        if (selectedFile) {
+            // Check if the file size is within the limit (20MB)
+            if (selectedFile.size <= 20 * 1024 * 1024) {
+                // Perform the upload operation, e.g., using Axios or fetch
+                console.log(`Uploading file: ${selectedFile.name}`);
+            } else {
+                console.log("File size exceeds the 20MB limit");
+            }
+        } else {
+            console.log("No file selected");
+        }
+    };
+
+    return (
+        <div className="grid grid-col gap-4">
+            <div className="grid grid-cols-2">
+                <input
+                    type="file"
+                    accept=".pdf" // Accept only PDF files
+                    onChange={handleFileChange}
+                    className="hidden"
+                    id="file-input"
+                />
+                <label htmlFor="file-input">
+                    <Button
+                        variant="contained"
+                        component="span"
+                        startIcon={<CloudUploadIcon />}
+                        color="primary"
+                    >
+                        Upload PDF
+                    </Button>
+                </label>
+                <span className="flex justify-start items-center">
+                    {selectedFile
+                        ? `Selected File: ${selectedFile.name}`
+                        : "No file selected"}
+                </span>
+            </div>
+            {/* <Button
+                variant="contained"
+                onClick={handleUpload}
+                disabled={!selectedFile}
+                className="ml-2"
+            >
+                Upload
+            </Button> */}
+        </div>
+    );
+}
diff --git a/resources/js/Components/InputField.jsx b/resources/js/Components/InputField.jsx
new file mode 100644
index 0000000..f2a460a
--- /dev/null
+++ b/resources/js/Components/InputField.jsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import { Typography } from "@mui/material";
+
+export default function InputField({
+    label,
+    variant,
+    id,
+    size,
+    type,
+    value,
+    onchange,
+    required,
+}) {
+    return (
+        <Box
+            component="form"
+            sx={{
+                maxWidth: "100%",
+            }}
+            noValidate
+            autoComplete="off"
+            focused
+        >
+            <TextField
+                fullWidth
+                size={size}
+                id={id}
+                label={label}
+                variant={variant}
+                type={type}
+                value={value}
+                onchange={onchange}
+                required={required}
+            />
+        </Box>
+    );
+}
diff --git a/resources/js/Components/Loader.jsx b/resources/js/Components/Loader.jsx
new file mode 100644
index 0000000..a80aade
--- /dev/null
+++ b/resources/js/Components/Loader.jsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+// import "./Loader.css"; // Import a CSS file for styling
+
+export default function Loader() {
+    const [isMoved, setIsMoved] = useState(false);
+
+    const handleMoveIcon = () => {
+        setIsMoved(!isMoved);
+    };
+
+    useEffect(() => {
+        // Load Lordicon script here
+        const script = document.createElement("script");
+        script.src = "https://cdn.lordicon.com/bhenfmcm.js";
+        script.async = true;
+        document.head.appendChild(script);
+
+        return () => {
+            // Clean up the script when the component unmounts
+            document.head.removeChild(script);
+        };
+    }, []);
+
+    return (
+        <div>
+            <Box
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                height="90vh"
+                onMouseEnter={handleMoveIcon}
+                onMouseLeave={handleMoveIcon}
+                className={isMoved ? "backdrop" : ""} // Add or remove the backdrop class based on mouse enter/leave
+            >
+                <lord-icon
+                    src="https://cdn.lordicon.com/uetqnvvg.json"
+                    trigger="loop"
+                    colors="primary:#3080e8,secondary:#16a9c7"
+                    stroke="70"
+                    state="loop"
+                    style={{ width: "250px", height: "250px" }}
+                />
+            </Box>
+        </div>
+    );
+}
diff --git a/resources/js/Components/MessageNotification.jsx b/resources/js/Components/MessageNotification.jsx
new file mode 100644
index 0000000..22f89cd
--- /dev/null
+++ b/resources/js/Components/MessageNotification.jsx
@@ -0,0 +1,98 @@
+import * as React from "react";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Divider from "@mui/material/Divider";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+export default function MessageNotification({ user }) {
+    return (
+        <List
+            sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
+        >
+            <ListItem alignItems="flex-start">
+                <ListItemAvatar>
+                    <Avatar alt="Anita" src="/static/images/avatar/1.jpg" />
+                </ListItemAvatar>
+                <ListItemText
+                    primary="Brunch this weekend?"
+                    secondary={
+                        <React.Fragment>
+                            <Typography
+                                sx={{ display: "inline" }}
+                                component="span"
+                                variant="body2"
+                                color="text.primary"
+                            >
+                                Ali Connors
+                            </Typography>
+                            {
+                                " — I'll be in your neighborhood doing errands this…"
+                            }
+                        </React.Fragment>
+                    }
+                />
+            </ListItem>
+            <Divider variant="inset" component="li" />
+            <ListItem alignItems="flex-start">
+                <ListItemAvatar>
+                    <Avatar
+                        alt="Travis Howard"
+                        src="/static/images/avatar/2.jpg"
+                    />
+                </ListItemAvatar>
+                <ListItemText
+                    primary="Summer BBQ"
+                    secondary={
+                        <React.Fragment>
+                            <Typography
+                                sx={{ display: "inline" }}
+                                component="span"
+                                variant="body2"
+                                color="text.primary"
+                            >
+                                to Scott, Alex, Jennifer
+                            </Typography>
+                            {" — Wish I could come, but I'm out of town this…"}
+                        </React.Fragment>
+                    }
+                />
+            </ListItem>
+            <Divider variant="inset" component="li" />
+            <ListItem alignItems="flex-start" divider>
+                <ListItemAvatar>
+                    <Avatar
+                        alt="Cindy Baker"
+                        src="/static/images/avatar/3.jpg"
+                    />
+                </ListItemAvatar>
+                <ListItemText
+                    primary="Oui Oui"
+                    secondary={
+                        <React.Fragment>
+                            <Typography
+                                sx={{ display: "inline" }}
+                                component="span"
+                                variant="body2"
+                                color="text.primary"
+                            >
+                                Sandra Adams
+                            </Typography>
+                            {
+                                " — Do you have Paris recommendations? Have you ever…"
+                            }
+                        </React.Fragment>
+                    }
+                />
+            </ListItem>
+            <div className="flex justify-center pt-5 px-3">
+                <Button color="primary" variant="contained" fullWidth>
+                    See more
+                </Button>
+            </div>
+        </List>
+    );
+}
diff --git a/resources/js/Components/Modal.jsx b/resources/js/Components/Modal.jsx
new file mode 100644
index 0000000..b0f7064
--- /dev/null
+++ b/resources/js/Components/Modal.jsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+import Backdrop from "@mui/material/Backdrop";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Fade from "@mui/material/Fade";
+import Button from "@mui/material/Button";
+import CloseIcon from "@mui/icons-material/Close";
+
+const style = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 600,
+    bgcolor: "background.paper",
+    borderRadius: 1,
+    boxShadow: 24,
+    p: 4,
+};
+
+// Define a media query for screens with a maximum width of 768px
+const responsiveStyle = {
+    "@media (max-width: 768px)": {
+        width: "100%",
+        height: "100%", // Adjust width for smaller screens
+        maxWidth: "none", // Remove the maximum width
+        borderRadius: 0, // Remove border radius
+        boxShadow: "none", // Remove box shadow
+        overflow: "auto", // Add overflow for scrolling
+    },
+};
+
+const finalStyle = { ...style, ...responsiveStyle };
+
+export default function ReusableModal({ content, title, icon, header }) {
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <div>
+            <Button
+                variant="contained"
+                onClick={handleOpen}
+                className="flex items-center w-full md:w-full lg:w-48"
+            >
+                {icon}
+                {title}
+            </Button>
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                open={open}
+                onClose={handleClose}
+                closeAfterTransition
+                slots={{ backdrop: Backdrop }}
+                slotProps={{
+                    backdrop: {
+                        timeout: 500,
+                    },
+                }}
+            >
+                <Fade in={open}>
+                    <Box sx={finalStyle}>
+                        <div className="flex justify-end">
+                            <CloseIcon onClick={handleClose} />
+                        </div>
+                        <div className="flex justify-center p-10">{header}</div>
+                        {content}
+                    </Box>
+                </Fade>
+            </Modal>
+        </div>
+    );
+}
diff --git a/resources/js/Components/QRCodeGenerator.jsx b/resources/js/Components/QRCodeGenerator.jsx
new file mode 100644
index 0000000..7b54fe1
--- /dev/null
+++ b/resources/js/Components/QRCodeGenerator.jsx
@@ -0,0 +1,160 @@
+import React, { useState } from "react";
+import QRCode from "qrcode.react";
+import { Box, Button, TextField } from "@mui/material";
+
+const QRCodeGenerator = () => {
+    const [ProductName, setProductName] = useState("");
+
+    const handleInputChange = (e) => {
+        setProductName(e.target.value);
+    };
+    const [Inventory, setInventory] = useState("");
+    const handleInventoryChange = (e) => {
+        setInventory(e.target.value);
+    };
+
+    const [Department, setDepartment] = useState("");
+    const handleDepartmentChange = (e) => {
+        setDepartment(e.target.value);
+    };
+
+    const [Purchase, setPurchase] = useState("");
+    const handlePurchaseChange = (e) => {
+        setPurchase(e.target.value);
+    };
+
+    const value =
+        "Product Name: " +
+        ProductName +
+        "\n" +
+        "Inventory: " +
+        Inventory +
+        "\n" +
+        "Department: " +
+        Department +
+        "\n" +
+        "Purchase. :" +
+        Purchase;
+
+    const DownloadButton = () => {
+        const handleDownload = () => {
+            const canvas = document.getElementById("qrcode-canvas");
+            const a = document.createElement("a");
+            a.href = canvas.toDataURL("image/png");
+            a.download = "qrcode.png";
+            a.click();
+        };
+
+        return (
+            <Button
+                onClick={handleDownload}
+                variant="contained"
+                color="primary"
+                disabled={!ProductName}
+            >
+                Download QR Code
+            </Button>
+        );
+    };
+
+    const PrintButton = () => {
+        const handlePrint = () => {
+            const printWindow = window.open("", "", "width=600,height=600");
+            printWindow.document.open();
+            printWindow.document.write(
+                "<html><head><title>QR Code</title></head><body>"
+            );
+            printWindow.document.write(
+                `<img src="${document
+                    .getElementById("qrcode-canvas")
+                    .toDataURL()}" alt="QR Code" />`
+            );
+            printWindow.document.write("</body></html>");
+            printWindow.document.close();
+            printWindow.print();
+            printWindow.close();
+        };
+
+        return (
+            <Button
+                onClick={handlePrint}
+                disabled={!ProductName}
+                variant="contained"
+                color="success"
+            >
+                Print QR Code
+            </Button>
+        );
+    };
+
+    return (
+        <div className="grid grid-col lg:grid-cols-2 gap-2 items-center lg:items-start px-4 justify-center lg:justify-start lg:px-24 py-24 lg:min-h-96  shadow-md">
+            <div className="grid grid-row justify-start gap-5">
+                <h1 className="text-2xl lg:text-3xl font-bold mb-4">
+                    QR Code Generator
+                </h1>
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column", // Adjust as needed for smaller screens
+                        alignItems: "center", // Adjust as needed for smaller screens
+                        width: "100%", // Adjusted for smaller screens
+                        maxWidth: "100%",
+                    }}
+                >
+                    <div className="grid grid-col gap-4 w-full">
+                        <TextField
+                            id="outlined-basic"
+                            label="Product Name"
+                            variant="outlined"
+                            size="small"
+                            value={ProductName}
+                            fullWidth
+                            onChange={handleInputChange}
+                        />
+                        <TextField
+                            id="outlined-basic"
+                            label="Product ID"
+                            variant="outlined"
+                            size="small"
+                            fullWidth
+                            value={Inventory}
+                            onChange={handleInventoryChange}
+                        />
+                        <TextField
+                            id="outlined-basic"
+                            label="Department"
+                            variant="outlined"
+                            size="small"
+                            fullWidth
+                            value={Department}
+                            onChange={handleDepartmentChange}
+                        />
+                        <TextField
+                            id="outlined-basic"
+                            label="Purchase Price"
+                            variant="outlined"
+                            size="small"
+                            fullWidth
+                            value={Purchase}
+                            onChange={handlePurchaseChange}
+                        />
+                    </div>
+                </Box>
+            </div>
+            <div className="mt-4">
+                <div className="flex justify-center rounded border-2 py-5 lg:py-10 border-gray-400">
+                    {ProductName && (
+                        <QRCode id="qrcode-canvas" size={128} value={value} />
+                    )}
+                </div>
+                <div className="mt-4 grid grid-cols-1 gap-2 lg:grid-cols-2">
+                    <DownloadButton />
+                    <PrintButton />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default QRCodeGenerator;
diff --git a/resources/js/Components/QRCodeScanner.jsx b/resources/js/Components/QRCodeScanner.jsx
new file mode 100644
index 0000000..31f7ad3
--- /dev/null
+++ b/resources/js/Components/QRCodeScanner.jsx
@@ -0,0 +1,124 @@
+import { Button, Typography } from "@mui/material";
+import React, { useEffect, useRef } from "react"; // Import useRef
+
+// import "./styles.css"; // Import your CSS file
+
+function QRCodeScanner() {
+    const videoRef = useRef(null); // Create a ref for the video element
+
+    useEffect(() => {
+        const qrcode = window.qrcode;
+
+        const canvasElement = document.getElementById("qr-canvas");
+        const canvas = canvasElement.getContext("2d");
+
+        const qrResult = document.getElementById("qr-result");
+        const outputData = document.getElementById("outputData");
+        const btnScanQR = document.getElementById("btn-scan-qr");
+
+        let scanning = false;
+
+        qrcode.callback = (res) => {
+            if (res) {
+                outputData.innerText = res;
+                scanning = false;
+
+                if (videoRef.current) {
+                    const stream = videoRef.current.srcObject;
+                    const tracks = stream.getTracks();
+
+                    tracks.forEach((track) => {
+                        track.stop();
+                    });
+                }
+
+                qrResult.hidden = false;
+                canvasElement.hidden = true;
+                btnScanQR.hidden = false;
+            }
+        };
+
+        btnScanQR.onclick = () => {
+            navigator.mediaDevices
+                .getUserMedia({ video: { facingMode: "environment" } })
+                .then(function (stream) {
+                    scanning = true;
+                    qrResult.hidden = true;
+                    btnScanQR.hidden = true;
+                    canvasElement.hidden = false;
+                    if (videoRef.current) {
+                        videoRef.current.setAttribute("playsinline", true);
+                        videoRef.current.srcObject = stream;
+                        videoRef.current.play();
+                        tick();
+                        scan();
+                    }
+                });
+        };
+
+        function tick() {
+            if (videoRef.current) {
+                canvasElement.width = 400; // Set your desired width here
+                canvasElement.height = 300; // Set your desired height here
+                canvas.drawImage(
+                    videoRef.current,
+                    0,
+                    0,
+                    canvasElement.width,
+                    canvasElement.height
+                );
+
+                scanning && requestAnimationFrame(tick);
+            }
+        }
+
+        function scan() {
+            try {
+                qrcode.decode();
+            } catch (e) {
+                setTimeout(scan, 300);
+            }
+        }
+    }, []);
+
+    function copy() {
+        // Get the text you want to copy
+        var copyText = document.getElementById("outputData");
+        var copied = copyText.textContent; // Remove .value here
+
+        // Copy the text inside the text field
+        navigator.clipboard.writeText(copied); // Remove .value here
+
+        // Alert the copied text
+        alert("Copied the text: " + copied);
+
+        console.log(copied);
+    }
+
+    return (
+        <div id="container">
+            <a id="btn-scan-qr">
+                <Button>Start</Button>
+            </a>
+
+            <canvas hidden id="qr-canvas"></canvas>
+
+            <div
+                id="qr-result"
+                className="grid grid-cols justify-start gap-2"
+                hidden
+            >
+                <b>Data:</b> <span id="outputData"></span>
+                <Button variant="contained" size="small" onClick={copy}>
+                    Copy
+                </Button>
+            </div>
+
+            <div className="flex justify-center items-center">
+                <video ref={videoRef} className="w-full"></video>
+            </div>
+        </div>
+    );
+}
+
+export default QRCodeScanner;
diff --git a/resources/js/Components/SkeletonColor.jsx b/resources/js/Components/SkeletonColor.jsx
new file mode 100644
index 0000000..e0f3ccc
--- /dev/null
+++ b/resources/js/Components/SkeletonColor.jsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import Skeleton from "@mui/material/Skeleton";
+import Box from "@mui/material/Box";
+
+export default function CustomSkeleton({
+    backgroundColor,
+    skeletonColor,
+    width,
+    height,
+}) {
+    return (
+        <Box
+            sx={{
+                bgcolor: backgroundColor || "#121212",
+                p: 8,
+                width: "100%",
+                display: "flex",
+                justifyContent: "center",
+            }}
+        >
+            <Skeleton
+                sx={{ bgcolor: skeletonColor || "grey.900" }}
+                variant="rectangular"
+                width={width || 210}
+                height={height || 118}
+            />
+        </Box>
+    );
+}
diff --git a/resources/js/Components/StackBar.jsx b/resources/js/Components/StackBar.jsx
new file mode 100644
index 0000000..22e7ca5
--- /dev/null
+++ b/resources/js/Components/StackBar.jsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { BarChart } from "@mui/x-charts/BarChart";
+
+export default function StackBars() {
+    const chartWidth = window.innerWidth > 768 ? 750 : window.innerWidth - 32;
+    const chartHeight = window.innerWidth > 768 ? 350 : 200;
+
+    return (
+        <div className="mx-auto flex justify-center">
+            <BarChart
+                series={[
+                    { data: [3, 4, 1, 6, 5], stack: "A", label: "series A1" },
+                    { data: [4, 3, 1, 5, 8], stack: "A", label: "series A2" },
+                    { data: [4, 2, 5, 4, 1], stack: "B", label: "series B1" },
+                    { data: [2, 8, 1, 3, 1], stack: "B", label: "series B2" },
+                    { data: [10, 6, 5, 8, 9], label: "series C1" },
+                ]}
+                width={chartWidth}
+                height={chartHeight}
+            />
+        </div>
+    );
+}
diff --git a/resources/js/Components/TabPanel.jsx b/resources/js/Components/TabPanel.jsx
new file mode 100644
index 0000000..3bb14e1
--- /dev/null
+++ b/resources/js/Components/TabPanel.jsx
@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            style={{ width: "100%" }} // Set the width to 100%
+            {...other}
+        >
+            {value === index && (
+                <Box sx={{ py: 5 }}>
+                    <Typography>{children}</Typography>
+                </Box>
+            )}
+        </div>
+    );
+}
+
+TabPanel.propTypes = {
+    children: PropTypes.node,
+    index: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired,
+};
+
+export default function VerticalTabs({ tabs }) {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    return (
+        <Box
+            sx={{
+                flexGrow: 1,
+                bgcolor: "background.paper",
+                display: "flex",
+                flexDirection: "column", // Stack tabs and content vertically on smaller screens
+                minHeight: "100vh", // Ensure the container takes up the full viewport height
+            }}
+        >
+            <Tabs
+                orientation="horizontal" // Change orientation to horizontal for smaller screens
+                variant="scrollable"
+                value={value}
+                onChange={handleChange}
+                aria-label="Horizontal tabs example"
+                sx={{ borderBottom: 1, borderColor: "divider" }}
+            >
+                {tabs.map((tab, index) => (
+                    <Tab key={index} label={tab.label} {...a11yProps(index)} />
+                ))}
+            </Tabs>
+            {tabs.map((tab, index) => (
+                <TabPanel key={index} value={value} index={index}>
+                    {tab.content}
+                </TabPanel>
+            ))}
+        </Box>
+    );
+}
+
+VerticalTabs.propTypes = {
+    tabs: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            content: PropTypes.node.isRequired,
+        })
+    ).isRequired,
+};
+
+function a11yProps(index) {
+    return {
+        id: `vertical-tab-${index}`,
+        "aria-controls": `vertical-tabpanel-${index}`,
+    };
+}
diff --git a/resources/js/Components/VerticalTabs.jsx b/resources/js/Components/VerticalTabs.jsx
new file mode 100644
index 0000000..2cd76b8
--- /dev/null
+++ b/resources/js/Components/VerticalTabs.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+
+function TabPanel({ children, value, index, ...other }) {
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box sx={{ p: 3 }}>
+                    <Typography>{children}</Typography>
+                </Box>
+            )}
+        </div>
+    );
+}
+
+TabPanel.propTypes = {
+    children: PropTypes.node,
+    index: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired,
+};
+
+function VerticalTabs({ tabs }) {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    return (
+        <Box
+            sx={{
+                flexGrow: 1,
+                bgcolor: "background.paper",
+                display: "flex",
+                height: 224,
+            }}
+        >
+            <Tabs
+                orientation="vertical"
+                variant="scrollable"
+                value={value}
+                onChange={handleChange}
+                aria-label="Vertical tabs example"
+                sx={{ borderRight: 1, borderColor: "divider" }}
+            >
+                {tabs.map((tab, index) => (
+                    <Tab key={index} label={tab.label} {...a11yProps(index)} />
+                ))}
+            </Tabs>
+            {tabs.map((tab, index) => (
+                <TabPanel key={index} value={value} index={index}>
+                    {tab.content}
+                </TabPanel>
+            ))}
+        </Box>
+    );
+}
+
+VerticalTabs.propTypes = {
+    tabs: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            content: PropTypes.node.isRequired,
+        })
+    ).isRequired,
+};
+
+function a11yProps(index) {
+    return {
+        id: `vertical-tab-${index}`,
+        "aria-controls": `vertical-tabpanel-${index}`,
+    };
+}
+
+export default VerticalTabs;
diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx
index b6f6f38..be20e47 100644
--- a/resources/js/Layouts/MainLayout.jsx
+++ b/resources/js/Layouts/MainLayout.jsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { useState, useEffect } from "react";
 import Drawer from "@mui/material/Drawer";
 import CssBaseline from "@mui/material/CssBaseline";
 import MuiAppBar from "@mui/material/AppBar";
@@ -14,8 +14,32 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
 import { Link, useForm } from "@inertiajs/react";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import SettingsApplicationsSharpIcon from "@mui/icons-material/SettingsApplicationsSharp";
+import DashboardSharpIcon from "@mui/icons-material/DashboardSharp";
+import QrCodeIcon from "@mui/icons-material/QrCode";
+import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner";
+import PostAddIcon from "@mui/icons-material/PostAdd";
+import ExpandMoreSharpIcon from "@mui/icons-material/ExpandMoreSharp";
+import CategoryIcon from "@mui/icons-material/Category";
+import { Logout, Settings } from "@mui/icons-material";
+import CustomSpeedDial from "@/Components/CustomSpeedDial";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import AbcSharpIcon from "@mui/icons-material/AbcSharp";
+import CustomizedSwitches from "@/Components/CustomizedSwitches";
+import QrCode2SharpIcon from "@mui/icons-material/QrCode2Sharp";
+import EmailIcon from "@mui/icons-material/Email";
+import MessageNotification from "@/Components/MessageNotification";
+import LoyaltyIcon from "@mui/icons-material/Loyalty";
+import Inventory2Icon from "@mui/icons-material/Inventory2";
+import SummarizeIcon from "@mui/icons-material/Summarize";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import StoreIcon from "@mui/icons-material/Store";
+import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
+import VerifiedUserIcon from "@mui/icons-material/VerifiedUser";
+import Clock from "@/Components/Clock";
 import {
     Avatar,
     Menu,
@@ -24,8 +48,10 @@ import {
     Box,
     styled,
     useTheme,
+    Collapse,
+    Badge,
+    Stack,
 } from "@mui/material";
-import { Logout, PersonAdd, Settings } from "@mui/icons-material";
 
 const drawerWidth = 240;
 
@@ -115,180 +141,624 @@ export default function MainLayout({ user, children }) {
         setAnchorEl(null);
     };
 
-    // End account avatar
+    // expand list dropdown in side nav
+    // start
+    const [expanded, setExpanded] = useState(false); // Initially expanded
+
+    const listSideNav = () => {
+        setExpanded(!expanded);
+    };
+    const [QrSideNav, setQrSideNav] = useState(false);
+
+    const toggleQrSideNav = () => {
+        setQrSideNav(!QrSideNav);
+    };
+
+    const [categories, setcategories] = useState(true); // Initially expanded
+
+    const categoriesSideNav = () => {
+        setcategories(!categories);
+    };
+    // end
+
+    const [Qr, setQr] = useState(false);
+
+    const generateQr = () => {
+        setQr(!Qr);
+    };
+
+    const [equipment, setequipment] = useState(false);
+
+    const equipmentSideNav = () => {
+        setequipment(!equipment);
+    };
+
+    const [Branch, setBranch] = useState(false);
+
+    const BranchSideNav = () => {
+        setBranch(!Branch);
+    };
+
+    // speed dial
+
+    const actions = [
+        {
+            icon: (
+                <Link href={route("generator.index")}>
+                    <QrCode2SharpIcon />
+                </Link>
+            ),
+            name: "QR-CODE",
+        },
+        {
+            icon: (
+                <Link href={route("qr.index")}>
+                    <AbcSharpIcon />
+                </Link>
+            ),
+            name: "BARCODE",
+        },
+    ];
+
+    // Initialize DarkMode state with a default value from localStorage if available
+    const [DarkMode, SetDarkMode] = useState(
+        localStorage.getItem("DarkMode") === "true"
+    );
+
+    // Function to toggle DarkMode and store the preference in localStorage
+    const toggleDarkMode = () => {
+        const newDarkMode = !DarkMode;
+        SetDarkMode(newDarkMode);
+        localStorage.setItem("DarkMode", newDarkMode);
+    };
+
+    // Create the theme based on DarkMode state
+    const darkTheme = createTheme({
+        palette: {
+            mode: DarkMode ? "dark" : "light",
+            primary: {
+                light: "#40c4ff",
+                main: "#00b0ff",
+                dark: "#01579b",
+                contrastText: "#fff",
+            },
+            secondary: {
+                main: "#00838f", // Change this to your secondary color
+            },
+            error: {
+                main: "#d50000", // Change this to your error
+                light: "#ff8a80",
+                dark: "#ff1744",
+            },
+            warning: {
+                main: "#ffff8d", // Change this to your warning
+                light: "#ffea00",
+                dark: "#ffd600",
+            },
+        },
+        typography: {
+            fontFamily: "Arial",
+            subtitle1: {
+                fontSize: 24,
+                fontWeight: "normal",
+                fontFamily: "arial",
+            },
+            subtitle2: {
+                fontSize: 16,
+                color: "#00b0ff",
+                fontFamily: "Segoe UI",
+            },
+            body1: {
+                fontWeight: 500,
+            },
+            header: {
+                fontWeight: "bold",
+                textTransform: "uppercase",
+            },
+            button: {
+                fontFamily: "Arial",
+            },
+        },
+    });
+
+    // active user
+
+    const StyledBadge = styled(Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "#44b700",
+            color: "#44b700",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            "&::after": {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                borderRadius: "50%",
+                animation: "ripple 1.2s infinite ease-in-out",
+                border: "1px solid currentColor",
+                content: '""',
+            },
+        },
+        "@keyframes ripple": {
+            "0%": {
+                transform: "scale(.8)",
+                opacity: 1,
+            },
+            "100%": {
+                transform: "scale(2.4)",
+                opacity: 0,
+            },
+        },
+    }));
+
+    const SmallAvatar = styled(Avatar)(({ theme }) => ({
+        width: 22,
+        height: 22,
+        border: `2px solid ${theme.palette.background.paper}`,
+    }));
+
+    // message notifications
+
+    // Email Dropdown message in layout
+
+    const [messageEl, setmessageEl] = useState(null);
+
+    const MessagehandleClick = (event) => {
+        setmessageEl(event.currentTarget);
+    };
+
+    const MessagehandleClose = () => {
+        setmessageEl(null);
+    };
 
     return (
-        <Box sx={{ display: "flex" }}>
-            <CssBaseline />
-
-            <AppBar position="fixed" open={open}>
-                <Toolbar>
-                    <IconButton
-                        color="inherit"
-                        aria-label="open drawer"
-                        onClick={handleDrawerOpen}
-                        edge="start"
-                        sx={{ mr: 2, ...(open && { display: "none" }) }}
-                    >
-                        <MenuIcon />
-                    </IconButton>
-                    <Typography variant="h6" noWrap component="div">
-                        Inventory Management System
-                    </Typography>
-                    <div style={{ flexGrow: 1 }}></div>
-
-                    {/* account menu start */}
-                    <Box
-                        sx={{
-                            display: "flex",
-                            alignItems: "center",
-                            textAlign: "center",
-                        }}
-                    >
-                        <Tooltip title="Account settings">
+        <ThemeProvider theme={darkTheme}>
+            <CssBaseline>
+                <Box sx={{ display: "flex" }}>
+                    <CssBaseline />
+                    <AppBar position="fixed" open={open} color="inherit">
+                        <Toolbar>
                             <IconButton
-                                onClick={handleClick}
-                                size="small"
-                                sx={{ ml: 2 }}
-                                aria-controls={
-                                    openAvatar ? "account-menu" : undefined
-                                }
-                                aria-haspopup="true"
-                                aria-expanded={openAvatar ? "true" : undefined}
+                                color="inherit"
+                                aria-label="open drawer"
+                                onClick={handleDrawerOpen}
+                                edge="start"
+                                sx={{ mr: 2, ...(open && { display: "none" }) }}
                             >
-                                <Avatar
-                                    alt={user.name}
-                                    src="/static/images/avatar/2.jpg"
-                                />
+                                <MenuIcon />
                             </IconButton>
-                        </Tooltip>
-                    </Box>
-                    <Menu
-                        anchorEl={anchorEl}
-                        id="account-menu"
-                        open={openAvatar}
-                        onClose={handleClose}
-                        onClick={handleClose}
-                        PaperProps={{
-                            elevation: 0,
-                            sx: {
-                                overflow: "visible",
-                                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-                                mt: 1.5,
-                                "& .MuiAvatar-root": {
-                                    width: 32,
-                                    height: 32,
-                                    ml: -0.5,
-                                    mr: 1,
-                                },
-                                "&:before": {
-                                    content: '""',
-                                    display: "block",
-                                    position: "absolute",
-                                    top: 0,
-                                    right: 14,
-                                    width: 10,
-                                    height: 10,
-                                    bgcolor: "background.paper",
-                                    transform: "translateY(-50%) rotate(45deg)",
-                                    zIndex: 0,
-                                },
+
+                            <Typography
+                                variant="inherit"
+                                noWrap
+                                component="div"
+                            >
+                                <Clock />
+                            </Typography>
+                            <div style={{ flexGrow: 1 }}></div>
+
+                            {/* account menu start */}
+                            <Box
+                                sx={{
+                                    display: "flex",
+                                    alignItems: "center",
+                                    textAlign: "center",
+                                }}
+                            >
+                                <div className="flex justify-center items-center">
+                                    <div>
+                                        <Tooltip title="Account settings">
+                                            <IconButton
+                                                onClick={MessagehandleClick}
+                                                size="medium"
+                                                sx={{ ml: 2 }}
+                                                aria-controls={
+                                                    messageEl
+                                                        ? "account-menu"
+                                                        : undefined
+                                                }
+                                                aria-haspopup="true"
+                                                aria-expanded={
+                                                    messageEl
+                                                        ? "true"
+                                                        : undefined
+                                                }
+                                            >
+                                                <Badge
+                                                    badgeContent={3}
+                                                    color="primary"
+                                                >
+                                                    <EmailIcon
+                                                        fontSize="medium"
+                                                        color="action"
+                                                    />
+                                                </Badge>
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Menu
+                                            id="account-menu"
+                                            anchorEl={messageEl}
+                                            open={Boolean(messageEl)}
+                                            onClose={MessagehandleClose}
+                                            PaperProps={{
+                                                elevation: 0,
+                                                sx: {
+                                                    overflow: "visible",
+                                                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
+                                                    mt: 1.5,
+                                                    "& .MuiAvatar-root": {
+                                                        width: 32,
+                                                        height: 32,
+                                                        ml: -0.0,
+                                                        mr: 2,
+                                                    },
+                                                    "&:before": {
+                                                        content: '""',
+                                                        display: "block",
+                                                        position: "absolute",
+                                                        top: 0,
+                                                        right: 14,
+                                                        width: 10,
+                                                        height: 10,
+                                                        bgcolor:
+                                                            "background.paper",
+                                                        transform:
+                                                            "translateY(-50%) rotate(45deg)",
+                                                        zIndex: 0,
+                                                    },
+                                                },
+                                            }}
+                                            transformOrigin={{
+                                                horizontal: "right",
+                                                vertical: "top",
+                                            }}
+                                            anchorOrigin={{
+                                                horizontal: "right",
+                                                vertical: "bottom",
+                                            }}
+                                        >
+                                            <MessageNotification />
+                                        </Menu>
+                                    </div>
+
+                                    <Tooltip title="Account settings">
+                                        <IconButton
+                                            onClick={handleClick}
+                                            size="medium"
+                                            sx={{ ml: 2 }}
+                                            aria-controls={
+                                                openAvatar
+                                                    ? "account-menu"
+                                                    : undefined
+                                            }
+                                            aria-haspopup="true"
+                                            aria-expanded={
+                                                openAvatar ? "true" : undefined
+                                            }
+                                        >
+                                            <Avatar
+                                                alt={user.name}
+                                                src="/static/images/avatar/2.jpg"
+                                            />
+                                        </IconButton>
+                                    </Tooltip>
+                                </div>
+                            </Box>
+                            <Menu
+                                anchorEl={anchorEl}
+                                id="account-menu"
+                                open={openAvatar}
+                                onClose={handleClose}
+                                onClick={handleClose}
+                                PaperProps={{
+                                    elevation: 0,
+                                    sx: {
+                                        overflow: "visible",
+                                        filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                                        mt: 0.5,
+                                        "& .MuiAvatar-root": {
+                                            width: 32,
+                                            height: 32,
+                                            ml: -0.5,
+                                            mr: 1,
+                                        },
+                                        "&:before": {
+                                            content: '""',
+                                            display: "block",
+                                            position: "absolute",
+                                            top: 0,
+                                            right: 23,
+                                            width: 10,
+                                            height: 10,
+                                            bgcolor: "background.paper",
+                                            transform:
+                                                "translateY(-50%) rotate(45deg)",
+                                            zIndex: 0,
+                                        },
+                                    },
+                                }}
+                                transformOrigin={{
+                                    horizontal: "right",
+                                    vertical: "top",
+                                }}
+                                anchorOrigin={{
+                                    horizontal: "right",
+                                    vertical: "bottom",
+                                }}
+                            >
+                                <MenuItem>
+                                    <Stack direction="row" spacing={2}>
+                                        <div className="flex justify-center items-center gap-5">
+                                            <StyledBadge
+                                                overlap="circular"
+                                                anchorOrigin={{
+                                                    vertical: "bottom",
+                                                    horizontal: "right",
+                                                }}
+                                                variant="dot"
+                                            >
+                                                <Avatar
+                                                    alt={user.name}
+                                                    src="/static/images/avatar/1.jpg"
+                                                />
+                                            </StyledBadge>
+                                            {user.name}
+                                        </div>
+                                    </Stack>
+                                </MenuItem>
+                                <MenuItem>
+                                    <CustomizedSwitches
+                                        checked={DarkMode}
+                                        onChange={toggleDarkMode}
+                                    />
+
+                                    <Typography
+                                        variant="overline"
+                                        onClick={toggleDarkMode}
+                                    >
+                                        {DarkMode
+                                            ? "Switch to Light Mode"
+                                            : "Switch to Dark Mode"}
+                                    </Typography>
+                                </MenuItem>
+                                <Divider />
+                                <Link href={route("profile.edit")}>
+                                    <MenuItem>
+                                        <ListItemIcon>
+                                            <Settings fontSize="small" />
+                                        </ListItemIcon>
+                                        Account Settings
+                                    </MenuItem>
+                                </Link>
+                                <MenuItem onClick={handleLogout}>
+                                    <ListItemIcon>
+                                        <Logout fontSize="small" />
+                                    </ListItemIcon>
+                                    Logout
+                                </MenuItem>
+                            </Menu>
+                            {/* account menu end */}
+                        </Toolbar>
+                    </AppBar>
+
+                    {/* breadCrumbs */}
+
+                    <Drawer
+                        sx={{
+                            width: drawerWidth,
+                            flexShrink: 0,
+                            "& .MuiDrawer-paper": {
+                                width: drawerWidth,
+                                boxSizing: "border-box",
                             },
                         }}
-                        transformOrigin={{
-                            horizontal: "right",
-                            vertical: "top",
-                        }}
-                        anchorOrigin={{
-                            horizontal: "right",
-                            vertical: "bottom",
-                        }}
+                        variant="persistent"
+                        anchor="left"
+                        open={open}
                     >
-                        <MenuItem>
-                            <Avatar /> {user.name}
-                        </MenuItem>
-                        <MenuItem>
-                            <Avatar /> My account
-                        </MenuItem>
+                        <DrawerHeader>
+                            <div className="ml-3 my-5">
+                                <Typography variant="subtitle">
+                                    Inventory Management System
+                                </Typography>
+                            </div>
+                            <IconButton onClick={handleDrawerClose}>
+                                {theme.direction === "ltr" ? (
+                                    <ChevronLeftIcon />
+                                ) : (
+                                    <ChevronRightIcon />
+                                )}
+                            </IconButton>
+                        </DrawerHeader>
                         <Divider />
-                        <MenuItem>
-                            <ListItemIcon>
-                                <PersonAdd fontSize="small" />
-                            </ListItemIcon>
-                            Add another account
-                        </MenuItem>
-                        <Link href={route("profile.edit")}>
-                            <MenuItem>
-                                <ListItemIcon>
-                                    <Settings fontSize="small" />
-                                </ListItemIcon>
-                                Settings
-                            </MenuItem>
-                        </Link>
-                        <MenuItem onClick={handleLogout}>
-                            <ListItemIcon>
-                                <Logout fontSize="small" />
-                            </ListItemIcon>
-                            Logout
-                        </MenuItem>
-                    </Menu>
-                    {/* account menu end */}
-                </Toolbar>
-            </AppBar>
-            <Drawer
-                sx={{
-                    width: drawerWidth,
-                    flexShrink: 0,
-                    "& .MuiDrawer-paper": {
-                        width: drawerWidth,
-                        boxSizing: "border-box",
-                    },
-                }}
-                variant="persistent"
-                anchor="left"
-                open={open}
-            >
-                <DrawerHeader>
-                    <IconButton onClick={handleDrawerClose}>
-                        {theme.direction === "ltr" ? (
-                            <ChevronLeftIcon />
-                        ) : (
-                            <ChevronRightIcon />
-                        )}
-                    </IconButton>
-                </DrawerHeader>
-                <Divider />
-                <List>
-                    <Link href={route("dashboard")}>
-                        <ListItem disablePadding>
-                            <ListItemButton>
-                                <ListItemIcon>
-                                    <InboxIcon />
-                                </ListItemIcon>
-                                <ListItemText primary="Dashboard" />
-                            </ListItemButton>
-                        </ListItem>
-                    </Link>
-                </List>
-                <Divider />
-
-                <List>
-                    <Link href={route("library.index")}>
-                        <ListItem disablePadding>
-                            <ListItemButton>
+                        <List>
+                            <Link href={route("dashboard")}>
+                                <ListItem disablePadding>
+                                    <ListItemButton>
+                                        <ListItemIcon>
+                                            <DashboardSharpIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Dashboard" />
+                                    </ListItemButton>
+                                </ListItem>
+                            </Link>
+                        </List>
+                        <Divider />
+
+                        {/* another sidenav list */}
+
+                        {/* start */}
+                        <List
+                            sx={{
+                                width: "100%",
+                                maxWidth: 360,
+                                bgcolor: "background.paper",
+                            }}
+                            component="nav"
+                            aria-labelledby="nested-list-subheader"
+                        >
+                            {/* categories start */}
+                            <Link href={route("categories.index")}>
+                                <ListItem disablePadding>
+                                    <ListItemButton>
+                                        <ListItemIcon>
+                                            <CategoryIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Category" />
+                                    </ListItemButton>
+                                </ListItem>
+                            </Link>
+
+                            {/* end categories */}
+
+                            {/* Equipment start */}
+                            <Link href={route("equipment.index")}>
+                                <ListItem disablePadding>
+                                    <ListItemButton>
+                                        <ListItemIcon>
+                                            <ConstructionIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Equipments" />
+                                    </ListItemButton>
+                                </ListItem>
+                            </Link>
+                            {/* Equipment End */}
+
+                            {/* Branch start */}
+                            <Link href={route("branch.index")}>
+                                <ListItem disablePadding>
+                                    <ListItemButton>
+                                        <ListItemIcon>
+                                            <StoreIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Branch" />
+                                    </ListItemButton>
+                                </ListItem>
+                            </Link>
+
+                            {/* end branch */}
+
+                            <Link href={route("borrowed_item.index")}>
+                                <ListItem disablePadding>
+                                    <ListItemButton>
+                                        <ListItemIcon>
+                                            <CompareArrowsIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Borrowed Item" />
+                                    </ListItemButton>
+                                </ListItem>
+                            </Link>
+
+                            {/* start of warranty list */}
+                            <List>
+                                <Link href={route("warranty.index")}>
+                                    <ListItem disablePadding>
+                                        <ListItemButton>
+                                            <ListItemIcon>
+                                                <LoyaltyIcon />
+                                            </ListItemIcon>
+                                            <ListItemText primary="Warranty List" />
+                                        </ListItemButton>
+                                    </ListItem>
+                                </Link>
+
+                                <Link href={route("products.index")}>
+                                    <ListItem disablePadding>
+                                        <ListItemButton>
+                                            <ListItemIcon>
+                                                <Inventory2Icon />
+                                            </ListItemIcon>
+                                            <ListItemText primary="Inventory" />
+                                        </ListItemButton>
+                                    </ListItem>
+                                </Link>
+
+                                <Link href={route("storage.index")}>
+                                    <ListItem disablePadding>
+                                        <ListItemButton>
+                                            <ListItemIcon>
+                                                <SummarizeIcon />
+                                            </ListItemIcon>
+                                            <ListItemText primary="Generate Reports" />
+                                        </ListItemButton>
+                                    </ListItem>
+                                </Link>
+                            </List>
+                            {/* End of warranty list */}
+                            <Link href={route("management.index")}>
+                                <ListItem disablePadding>
+                                    <ListItemButton>
+                                        <ListItemIcon>
+                                            <VerifiedUserIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Manage User" />
+                                    </ListItemButton>
+                                </ListItem>
+                            </Link>
+                        </List>
+                        {/* end */}
+                        <List>
+                            <ListItemButton onClick={generateQr}>
                                 <ListItemIcon>
-                                    <InboxIcon />
+                                    <QrCodeIcon />
                                 </ListItemIcon>
-                                <ListItemText primary="Settings" />
+                                <ListItemText primary="QR" />
+                                {Qr ? <ExpandLess /> : <ExpandMore />}
                             </ListItemButton>
-                        </ListItem>
-                    </Link>
-                </List>
-            </Drawer>
-            <Main open={open}>
-                <DrawerHeader />
-                {children}
-            </Main>
-        </Box>
+                            <Collapse in={Qr} timeout="auto" unmountOnExit>
+                                <Link href={route("qr.index")}>
+                                    <List component="div" disablePadding>
+                                        <ListItemButton sx={{ pl: 4 }}>
+                                            <ListItemIcon>
+                                                <PostAddIcon />
+                                            </ListItemIcon>
+                                            <ListItemText primary="Manage Records" />
+                                        </ListItemButton>
+                                    </List>
+                                </Link>
+                                <Link href={route("generator.index")}>
+                                    <ListItemButton sx={{ pl: 4 }}>
+                                        <ListItemIcon>
+                                            <QrCodeScannerIcon />
+                                        </ListItemIcon>
+                                        <ListItemText primary="Genarate QR" />
+                                    </ListItemButton>
+                                </Link>
+                            </Collapse>
+                        </List>
+
+                        <div className="absolute bottom-0 w-full">
+                            <List>
+                                <Link href={route("library.index")}>
+                                    <ListItem disablePadding>
+                                        <ListItemButton>
+                                            <ListItemIcon>
+                                                <SettingsApplicationsSharpIcon />
+                                            </ListItemIcon>
+                                            <ListItemText primary="Library Setting" />
+                                        </ListItemButton>
+                                    </ListItem>
+                                </Link>
+                            </List>
+                        </div>
+                    </Drawer>
+                    <Main open={open}>
+                        <DrawerHeader />
+
+                        <div className="sm:mx-5 md:mx-2 lg:mx-10">
+                            <div>{children}</div>
+
+                            <div className="lg:hidden block">
+                                <CustomSpeedDial
+                                    actions={actions}
+                                    openIcon={<ExpandMoreSharpIcon />}
+                                />
+                            </div>
+                        </div>
+                    </Main>
+                </Box>
+            </CssBaseline>
+        </ThemeProvider>
     );
 }
diff --git a/resources/js/Pages/Admin/Borrowed_item/Index.jsx b/resources/js/Pages/Admin/Borrowed_item/Index.jsx
new file mode 100644
index 0000000..92a1875
--- /dev/null
+++ b/resources/js/Pages/Admin/Borrowed_item/Index.jsx
@@ -0,0 +1,230 @@
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Avatar,
+    Box,
+    Card,
+    IconButton,
+    ListItem,
+    ListItemAvatar,
+    Menu,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+import MUIDataTable from "mui-datatables";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import { Link } from "@inertiajs/react";
+import InventorySharpIcon from "@mui/icons-material/InventorySharp";
+import AddIcon from "@mui/icons-material/Add";
+import SyncAltIcon from "@mui/icons-material/SyncAlt";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+export default function Index({ auth, mustVerifyEmail, status, BorrowedItem }) {
+    const columns = ["ID", "Borrowed Items", ""];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const [age, setAge] = React.useState("");
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    const [messageEl, setmessageEl] = useState(null);
+
+    const MessagehandleClick = (event) => {
+        setmessageEl(event.currentTarget);
+    };
+
+    const MessagehandleClose = () => {
+        setmessageEl(null);
+    };
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventorySharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Borrowed Items",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    const data = BorrowedItem.map((BorrowedItem) => [
+        BorrowedItem.id,
+        BorrowedItem.borrowed_item,
+        <div className="flex justify-end pr-5" key={BorrowedItem.id}>
+            <Tooltip title="Account settings">
+                <IconButton
+                    onClick={MessagehandleClick} // Make sure you have defined MessagehandleClick function
+                    size="medium"
+                    sx={{ ml: 2 }}
+                    aria-controls={messageEl ? "account-menu" : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={messageEl ? "true" : undefined}
+                >
+                    <MoreVertIcon />
+                </IconButton>
+            </Tooltip>
+        </div>,
+    ]);
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+
+            {/* account menu start */}
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    textAlign: "center",
+                }}
+            >
+                <div className="flex justify-center items-center">
+                    <div>
+                        <Menu
+                            id="account-menu"
+                            anchorEl={messageEl}
+                            open={Boolean(messageEl)}
+                            onClose={MessagehandleClose}
+                            PaperProps={{
+                                elevation: 0,
+                                sx: {
+                                    overflow: "visible",
+                                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
+                                    mt: 1.5,
+                                    "& .MuiAvatar-root": {
+                                        width: 32,
+                                        height: 32,
+                                        ml: -0.0,
+                                        mr: 2,
+                                    },
+                                    "&:before": {
+                                        content: '""',
+                                        display: "block",
+                                        position: "absolute",
+                                        top: 0,
+                                        right: 14,
+                                        width: 10,
+                                        height: 10,
+                                        bgcolor: "background.paper",
+                                        transform:
+                                            "translateY(-50%) rotate(45deg)",
+                                        zIndex: 0,
+                                    },
+                                },
+                            }}
+                            transformOrigin={{
+                                horizontal: "right",
+                                vertical: "top",
+                            }}
+                            anchorOrigin={{
+                                horizontal: "right",
+                                vertical: "bottom",
+                            }}
+                        >
+                            {/* <MessageNotification /> */}
+                            <Link href={route("branch.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <AddIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Create
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("branch.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <SyncAltIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Update
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("branch.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <DeleteForeverIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Delete
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                        </Menu>
+                    </div>
+                </div>
+            </Box>
+            <div className=" overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                <div className="sm:hidden">
+                    {/* Mobile View */}
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Borrowed Item</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            // You can apply the stickyHeader class if needed for mobile view
+                        />
+                    </Card>
+                </div>
+                <div className="hidden sm:block">
+                    {/* Desktop View */}
+
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Borrowed Item</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            stickyHeader
+                        />
+                    </Card>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Branch/Create.jsx b/resources/js/Pages/Admin/Branch/Create.jsx
new file mode 100644
index 0000000..f5c6ba2
--- /dev/null
+++ b/resources/js/Pages/Admin/Branch/Create.jsx
@@ -0,0 +1,295 @@
+import {
+    Button,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Paper,
+    TextField,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import { useRef, useState, useEffect } from "react";
+import { Link, useForm } from "@inertiajs/react";
+import MainLayout from "@/Layouts/MainLayout";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import { HomeRepairServiceOutlined } from "@mui/icons-material";
+import InventoryIcon from "@mui/icons-material/Inventory";
+import MySelectComponent from "@/Components/CustomSelect";
+import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
+import SettingsCellIcon from "@mui/icons-material/SettingsCell";
+
+function Create({ auth }) {
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const closeModal = () => {
+        setConfirmingUserDeletion(false);
+
+        reset();
+    };
+
+    // add alertmessage in form submit
+
+    const [showAlert, setShowAlert] = useState(true);
+
+    // Function to hide the alert after a specified duration (in milliseconds)
+    const hideAlertAfterDuration = (duration) => {
+        setTimeout(() => {
+            setShowAlert(false);
+        }, duration);
+    };
+
+    // Call the hideAlertAfterDuration function when showAlert becomes true
+    useEffect(() => {
+        if (showAlert) {
+            hideAlertAfterDuration(5000); // Auto-hide after 3 seconds
+        }
+    }, [showAlert]);
+    // submmit to store
+
+    const { data, setData, post, processing, errors, reset } = useForm({
+        branch: "",
+    });
+
+    useEffect(() => {
+        return () => {
+            reset("password", "password_confirmation");
+        };
+    }, []);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        post(route("branch.store"));
+
+        // Show the alert
+        setShowAlert(true);
+
+        // Reset the form or perform other actions
+        reset();
+    };
+
+    //  breadcrumbItems
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeRepairServiceOutlined
+                        sx={{ mr: 0.5 }}
+                        fontSize="inherit"
+                    />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeRepairServiceOutlined
+                        sx={{ mr: 0.5 }}
+                        fontSize="inherit"
+                    />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventoryIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Branch",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    // province option
+
+    const [selectedProvince, setselectedProvince] = useState("");
+
+    const handleProvinceChange = (event) => {
+        setselectedProvince(event.target.value);
+    };
+
+    const province_option = [
+        { value: "None", label: "None" },
+        { value: "Caloocan", label: "Caloocan" },
+        { value: "Manila", label: "Manila" },
+    ];
+
+    // City option
+
+    const [selectedCity, setselectedCity] = useState("");
+
+    const handleCityChange = (event) => {
+        setselectedCity(event.target.value);
+    };
+
+    const city_option = [
+        { value: "None", label: "None" },
+        { value: "Bagong Silang", label: "Bagong Silang" },
+        { value: "Tondo", label: "Tondo" },
+    ];
+
+    // Barangay option
+
+    const [selectedBarangay, setselectedBarangay] = useState("");
+
+    const handleBarangayChange = (event) => {
+        setselectedBarangay(event.target.value);
+    };
+
+    const Barangay_option = [
+        { value: "None", label: "None" },
+        { value: "176", label: "176" },
+        { value: "Quiapo", label: "Quiapo" },
+    ];
+
+    // choice of branch mobile
+
+    const [selectedValue, setSelectedValue] = useState("");
+
+    const handleSelectChange = (event) => {
+        setSelectedValue(event.target.value);
+    };
+
+    const branch_contact_option = [
+        { value: "Telephone", label: <LocalPhoneIcon /> },
+        { value: "Mobile", label: <SettingsCellIcon /> },
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <Paper elevation={5}>
+                <form onSubmit={handleSubmit} className="grid gap-2">
+                    <DialogTitle>
+                        <Typography variant="subtitle1">Branch</Typography>
+                    </DialogTitle>
+                    <DialogContent>
+                        <div className="grid grid-col gap-7 px-2">
+                            <div className="grid grid-col gap-5">
+                                <TextField
+                                    label="branch"
+                                    id="branch"
+                                    name="branch"
+                                    value={data.branch}
+                                    className="block w-full mt-1"
+                                    onChange={(e) =>
+                                        setData("branch", e.target.value)
+                                    }
+                                    required
+                                    fullWidth
+                                    helperText={errors.branch}
+                                    error={!!errors.branch}
+                                    size="small"
+                                />
+                                <Typography variant="inherit">
+                                    Address
+                                </Typography>
+                                <div className="grid grid-col gap-5 md:grid-cols-3">
+                                    <MySelectComponent
+                                        label="Select Province"
+                                        value={selectedProvince}
+                                        options={province_option}
+                                        onChange={handleProvinceChange}
+                                    />
+                                    <MySelectComponent
+                                        label="Select City"
+                                        value={selectedCity}
+                                        options={city_option}
+                                        onChange={handleCityChange}
+                                    />
+                                    <MySelectComponent
+                                        label="Select Barangay"
+                                        value={selectedBarangay}
+                                        options={Barangay_option}
+                                        onChange={handleBarangayChange}
+                                    />
+                                </div>
+                                <div className="grid grid-col gap-5 md:grid-cols-2 lg:grid-cols-2">
+                                    <TextField
+                                        label="House No/ Floor"
+                                        id="branch_floor"
+                                        name="branch_floor"
+                                        required
+                                        size="small"
+                                        fullWidth
+                                    />
+                                    <TextField
+                                        label="Street"
+                                        id="branch_street"
+                                        name="branch_street"
+                                        required
+                                        size="small"
+                                        fullWidth
+                                    />
+                                    <TextField
+                                        label="Zip Code"
+                                        id="branch_zipCode"
+                                        name="branch_zipCode"
+                                        required
+                                        size="small"
+                                    />
+                                </div>
+                            </div>
+                            <Typography variant="inherit">Contact</Typography>
+                            <div className="grid grid-col gap-7">
+                                <div className="flex gap-2">
+                                    <div className="shrink-0">
+                                        <MySelectComponent
+                                            label=""
+                                            value={selectedValue}
+                                            options={branch_contact_option}
+                                            onChange={handleSelectChange}
+                                        />
+                                    </div>
+                                    <div className="cols-span-4">
+                                        <TextField
+                                            label="Contact"
+                                            id="branch_contact"
+                                            name="branch_contact"
+                                            required
+                                            size="small"
+                                            type="number"
+                                        />
+                                    </div>
+                                </div>
+                                <div className="grid grid-col md:grid-cols-2">
+                                    <TextField
+                                        label="Email"
+                                        id="branch_email"
+                                        name="branch_email"
+                                        required
+                                        size="small"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <div className="px-7 py-5">
+                            <Button variant="" onClick={handleClose}>
+                                Cancel
+                            </Button>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                type="submit"
+                                disabled={processing}
+                            >
+                                Add Account
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </form>
+            </Paper>
+        </MainLayout>
+    );
+}
+
+export default Create;
diff --git a/resources/js/Pages/Admin/Branch/Index.jsx b/resources/js/Pages/Admin/Branch/Index.jsx
new file mode 100644
index 0000000..152118a
--- /dev/null
+++ b/resources/js/Pages/Admin/Branch/Index.jsx
@@ -0,0 +1,230 @@
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Avatar,
+    Box,
+    Card,
+    IconButton,
+    ListItem,
+    ListItemAvatar,
+    Menu,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+import MUIDataTable from "mui-datatables";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import { Link } from "@inertiajs/react";
+import InventorySharpIcon from "@mui/icons-material/InventorySharp";
+import AddIcon from "@mui/icons-material/Add";
+import SyncAltIcon from "@mui/icons-material/SyncAlt";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+export default function Index({ auth, mustVerifyEmail, status, branch }) {
+    const columns = ["ID", "Categories", ""];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const [age, setAge] = React.useState("");
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    const [messageEl, setmessageEl] = useState(null);
+
+    const MessagehandleClick = (event) => {
+        setmessageEl(event.currentTarget);
+    };
+
+    const MessagehandleClose = () => {
+        setmessageEl(null);
+    };
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventorySharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Branch",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    const data = branch.map((branch) => [
+        branch.id,
+        branch.branch,
+        <div className="flex justify-end pr-5" key={branch.id}>
+            <Tooltip title="Account settings">
+                <IconButton
+                    onClick={MessagehandleClick} // Make sure you have defined MessagehandleClick function
+                    size="medium"
+                    sx={{ ml: 2 }}
+                    aria-controls={messageEl ? "account-menu" : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={messageEl ? "true" : undefined}
+                >
+                    <MoreVertIcon />
+                </IconButton>
+            </Tooltip>
+        </div>,
+    ]);
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+
+            {/* account menu start */}
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    textAlign: "center",
+                }}
+            >
+                <div className="flex justify-center items-center">
+                    <div>
+                        <Menu
+                            id="account-menu"
+                            anchorEl={messageEl}
+                            open={Boolean(messageEl)}
+                            onClose={MessagehandleClose}
+                            PaperProps={{
+                                elevation: 0,
+                                sx: {
+                                    overflow: "visible",
+                                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
+                                    mt: 1.5,
+                                    "& .MuiAvatar-root": {
+                                        width: 32,
+                                        height: 32,
+                                        ml: -0.0,
+                                        mr: 2,
+                                    },
+                                    "&:before": {
+                                        content: '""',
+                                        display: "block",
+                                        position: "absolute",
+                                        top: 0,
+                                        right: 14,
+                                        width: 10,
+                                        height: 10,
+                                        bgcolor: "background.paper",
+                                        transform:
+                                            "translateY(-50%) rotate(45deg)",
+                                        zIndex: 0,
+                                    },
+                                },
+                            }}
+                            transformOrigin={{
+                                horizontal: "right",
+                                vertical: "top",
+                            }}
+                            anchorOrigin={{
+                                horizontal: "right",
+                                vertical: "bottom",
+                            }}
+                        >
+                            {/* <MessageNotification /> */}
+                            <Link href={route("branch.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <AddIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Create
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("branch.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <SyncAltIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Update
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("branch.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <DeleteForeverIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Delete
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                        </Menu>
+                    </div>
+                </div>
+            </Box>
+            <div className=" overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                <div className="sm:hidden">
+                    {/* Mobile View */}
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Branch</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            // You can apply the stickyHeader class if needed for mobile view
+                        />
+                    </Card>
+                </div>
+                <div className="hidden sm:block">
+                    {/* Desktop View */}
+
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Branch</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            stickyHeader
+                        />
+                    </Card>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Categories/Create.jsx b/resources/js/Pages/Admin/Categories/Create.jsx
new file mode 100644
index 0000000..017e92f
--- /dev/null
+++ b/resources/js/Pages/Admin/Categories/Create.jsx
@@ -0,0 +1,137 @@
+import {
+    Alert,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Paper,
+    Stack,
+    TextField,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import CustomSelect from "@/Components/CustomSelect";
+import { useRef, useState, useEffect } from "react";
+import { Link, useForm } from "@inertiajs/react";
+import AddSharpIcon from "@mui/icons-material/AddSharp";
+import MainLayout from "@/Layouts/MainLayout";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import { HomeRepairServiceOutlined } from "@mui/icons-material";
+import InventoryIcon from "@mui/icons-material/Inventory";
+
+function Create({ auth }) {
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    // submmit to store
+
+    const { data, setData, post, processing, errors, reset } = useForm({
+        categories: "",
+    });
+
+    useEffect(() => {
+        return () => {
+            reset("password", "password_confirmation");
+        };
+    }, []);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        post(route("categories.store"));
+
+        // Show the alert
+        setShowAlert(true);
+
+        // Reset the form or perform other actions
+        reset();
+    };
+
+    //  breadcrumbItems
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeRepairServiceOutlined
+                        sx={{ mr: 0.5 }}
+                        fontSize="inherit"
+                    />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeRepairServiceOutlined
+                        sx={{ mr: 0.5 }}
+                        fontSize="inherit"
+                    />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventoryIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Categories",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <Paper className="">
+                <form onSubmit={handleSubmit} className="grid gap-2">
+                    <DialogTitle>
+                        <Typography variant="subtitle1">Category</Typography>
+                    </DialogTitle>
+                    <DialogContent>
+                        <div className="grid grid-col gap-7 px-2">
+                            <div className="grid grid-col gap-5">
+                                <TextField
+                                    label="categories"
+                                    id="categories"
+                                    name="categories"
+                                    value={data.categories}
+                                    className="block w-full mt-1"
+                                    onChange={(e) =>
+                                        setData("categories", e.target.value)
+                                    }
+                                    required
+                                    fullWidth
+                                    helperText={errors.categories}
+                                    error={!!errors.categories}
+                                    size="small"
+                                />
+                            </div>
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <div className="px-6 py-5">
+                            <Button variant="" onClick={handleClose}>
+                                Cancel
+                            </Button>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                type="submit"
+                                disabled={processing}
+                            >
+                                Add Category
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </form>
+            </Paper>
+        </MainLayout>
+    );
+}
+
+export default Create;
diff --git a/resources/js/Pages/Admin/Categories/Index.jsx b/resources/js/Pages/Admin/Categories/Index.jsx
new file mode 100644
index 0000000..05c997c
--- /dev/null
+++ b/resources/js/Pages/Admin/Categories/Index.jsx
@@ -0,0 +1,258 @@
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Avatar,
+    Badge,
+    Box,
+    Card,
+    Grid,
+    IconButton,
+    List,
+    ListItem,
+    ListItemAvatar,
+    Menu,
+    MenuItem,
+    Paper,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+import MUIDataTable from "mui-datatables";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import { Link } from "@inertiajs/react";
+import InventorySharpIcon from "@mui/icons-material/InventorySharp";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { styled } from "@mui/material/styles";
+import AddIcon from "@mui/icons-material/Add";
+import SyncAltIcon from "@mui/icons-material/SyncAlt";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+
+export default function Index({ auth, mustVerifyEmail, status, categories }) {
+    const columns = ["ID", "Categories", ""];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventorySharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Categories",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    // crud
+
+    // Email Dropdown message in layout
+
+    const [messageEl, setmessageEl] = useState(null);
+
+    const MessagehandleClick = (event) => {
+        setmessageEl(event.currentTarget);
+    };
+
+    const MessagehandleClose = () => {
+        setmessageEl(null);
+    };
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const openAvatar = Boolean(anchorEl);
+
+    const [selectedValue, setSelectedValue] = useState("default"); // Default value
+
+    const handleChange = (newValue) => {
+        setSelectedValue(newValue); // Update the selected value
+    };
+
+    const crud = [
+        { value: "Add", label: "Add" },
+        { value: "Update", label: "Update" },
+        { value: "Delete", label: "Delete" },
+    ];
+
+    const Demo = styled("div")(({ theme }) => ({
+        backgroundColor: theme.palette.background.paper,
+    }));
+
+    const data = categories.map((category) => [
+        category.id,
+        category.categories,
+        <div className="flex justify-end pr-5" key={category.id}>
+            <Tooltip title="Account settings">
+                <IconButton
+                    onClick={MessagehandleClick} // Make sure you have defined MessagehandleClick function
+                    size="medium"
+                    sx={{ ml: 2 }}
+                    aria-controls={messageEl ? "account-menu" : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={messageEl ? "true" : undefined}
+                >
+                    <MoreVertIcon />
+                </IconButton>
+            </Tooltip>
+        </div>,
+    ]);
+
+    return (
+        <MainLayout user={auth.user}>
+            <div>
+                {/* account menu start */}
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        textAlign: "center",
+                    }}
+                >
+                    <div className="flex justify-center items-center">
+                        <div>
+                            <Menu
+                                id="account-menu"
+                                anchorEl={messageEl}
+                                open={Boolean(messageEl)}
+                                onClose={MessagehandleClose}
+                                PaperProps={{
+                                    elevation: 0,
+                                    sx: {
+                                        overflow: "visible",
+                                        filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
+                                        mt: 1.5,
+                                        "& .MuiAvatar-root": {
+                                            width: 32,
+                                            height: 32,
+                                            ml: -0.0,
+                                            mr: 2,
+                                        },
+                                        "&:before": {
+                                            content: '""',
+                                            display: "block",
+                                            position: "absolute",
+                                            top: 0,
+                                            right: 14,
+                                            width: 10,
+                                            height: 10,
+                                            bgcolor: "background.paper",
+                                            transform:
+                                                "translateY(-50%) rotate(45deg)",
+                                            zIndex: 0,
+                                        },
+                                    },
+                                }}
+                                transformOrigin={{
+                                    horizontal: "right",
+                                    vertical: "top",
+                                }}
+                                anchorOrigin={{
+                                    horizontal: "right",
+                                    vertical: "bottom",
+                                }}
+                            >
+                                {/* <MessageNotification /> */}
+                                <Link href={route("categories.create")}>
+                                    <ListItem>
+                                        <ListItemAvatar>
+                                            <Avatar>
+                                                <AddIcon />
+                                            </Avatar>
+                                        </ListItemAvatar>
+                                        <Typography variant="subtitle2">
+                                            Create
+                                        </Typography>
+                                    </ListItem>
+                                </Link>
+                                <Link href={route("categories.create")}>
+                                    <ListItem>
+                                        <ListItemAvatar>
+                                            <Avatar>
+                                                <SyncAltIcon />
+                                            </Avatar>
+                                        </ListItemAvatar>
+                                        <Typography variant="subtitle2">
+                                            Update
+                                        </Typography>
+                                    </ListItem>
+                                </Link>
+                                <Link href={route("categories.create")}>
+                                    <ListItem>
+                                        <ListItemAvatar>
+                                            <Avatar>
+                                                <DeleteForeverIcon />
+                                            </Avatar>
+                                        </ListItemAvatar>
+                                        <Typography variant="subtitle2">
+                                            Delete
+                                        </Typography>
+                                    </ListItem>
+                                </Link>
+                            </Menu>
+                        </div>
+                    </div>
+                </Box>
+            </div>
+
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+
+            <div className="overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                <Paper>
+                    <div className="sm:hidden">
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Categories</Typography>
+                        </div>
+                        {/* Mobile View */}
+                        <Card>
+                            <MUIDataTable
+                                data={data}
+                                columns={columns}
+                                options={options}
+                                size={"small"}
+                                // You can apply the stickyHeader class if needed for mobile view
+                            />
+                        </Card>
+                    </div>
+                    <div className="hidden sm:block">
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Categories</Typography>
+                        </div>
+                        {/* Desktop View */}
+                        <Card>
+                            <MUIDataTable
+                                data={data}
+                                columns={columns}
+                                options={options}
+                                size={"small"}
+                                stickyHeader
+                            />
+                        </Card>
+                    </div>
+                </Paper>
+            </div>
+            {/* end */}
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Dashboard/Index.jsx b/resources/js/Pages/Admin/Dashboard/Index.jsx
index 870e14b..9029ee3 100644
--- a/resources/js/Pages/Admin/Dashboard/Index.jsx
+++ b/resources/js/Pages/Admin/Dashboard/Index.jsx
@@ -1,42 +1,136 @@
+import ShippingCard from "@/Components/Card";
 import MainLayout from "@/Layouts/MainLayout";
-import { Typography } from "@mui/material";
+import { Card, Paper, Typography } from "@mui/material";
 import React from "react";
+import MUIDataTable from "mui-datatables";
+import StackBars from "@/Components/StackBar";
+import BasicPie from "@/Components/BasicPie";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import EastIcon from "@mui/icons-material/East";
+import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
+import CategoryIcon from "@mui/icons-material/Category";
+import HomeRepairServiceIcon from "@mui/icons-material/HomeRepairService";
+import { Link } from "@inertiajs/react";
 
-export default function Index({ auth, mustVerifyEmail, status }) {
+export default function Index({ auth, mustVerifyEmail, status, users }) {
+    // this variable data with the code .map is help determine the backend
+    const data = users.map((user) => [
+        user.id,
+        user.name,
+        user.email,
+        <div className="flex justify-end pr-5">
+            <Link href={route("dashboard")}>
+                <EastIcon />
+            </Link>
+        </div>, // Replace 'insert_icon_name_here' with the actual icon name
+    ]);
+
+    const columns = ["ID", "Name", "Email", ""];
+    // Now, you have a total of 108 rows in the `data` array.
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: "Home",
+            url: "/",
+        },
+        {
+            icon: <DashboardIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Administrator",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
     return (
         <MainLayout user={auth.user}>
-            {auth.user.email}
-            <Typography paragraph>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                Rhoncus dolor purus non enim praesent elementum facilisis leo
-                vel. Risus at ultrices mi tempus imperdiet. Semper risus in
-                hendrerit gravida rutrum quisque non tellus. Convallis convallis
-                tellus id interdum velit laoreet id donec ultrices. Odio morbi
-                quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-                adipiscing bibendum est ultricies integer quis. Cursus euismod
-                quis viverra nibh cras. Metus vulputate eu scelerisque felis
-                imperdiet proin fermentum leo. Mauris commodo quis imperdiet
-                massa tincidunt. Cras tincidunt lobortis feugiat vivamus at
-                augue. At augue eget arcu dictum varius duis at consectetur
-                lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-                sapien faucibus et molestie ac.
-            </Typography>
-            <Typography paragraph>
-                Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
-                ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
-                elementum integer enim neque volutpat ac tincidunt. Ornare
-                suspendisse sed nisi lacus sed viverra tellus. Purus sit amet
-                volutpat consequat mauris. Elementum eu facilisis sed odio
-                morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-                tincidunt ornare massa eget egestas purus viverra accumsan in.
-                In hendrerit gravida rutrum quisque non tellus orci ac.
-                Pellentesque nec nam aliquam sem et tortor. Habitant morbi
-                tristique senectus et. Adipiscing elit duis tristique
-                sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-                eleifend. Commodo viverra maecenas accumsan lacus vel facilisis.
-                Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
-            </Typography>
+            <CustomBreadcrumbs items={breadcrumbItems} />
+            <div className="grid grid-col py-10 md:gap-5 lg:grid-cols-3 gap-5 overflow-x-auto max-w-[370px] md:max-w-[100vh] lg:max-w-[100%]">
+                <ShippingCard
+                    icon={<PersonOutlineIcon fontSize="large" />}
+                    title="Item Returned"
+                    count="1"
+                />
+                <ShippingCard
+                    icon={<CategoryIcon fontSize="large" />}
+                    title="Item Borrowed"
+                    count="3"
+                />
+                <ShippingCard
+                    icon={<HomeRepairServiceIcon fontSize="large" />}
+                    title="Item Disposed"
+                    count="5"
+                />
+            </div>
+
+            <div className="grid grid-col lg:grid-cols-2 gap-5 py-6 max-w-[370px] md:max-w-[100vh] lg:max-w-[100%]">
+                <Card>
+                    <Typography paragraph>
+                        <StackBars />
+                    </Typography>
+                </Card>
+                <Card>
+                    <Typography paragraph>
+                        <BasicPie />
+                    </Typography>
+                </Card>
+            </div>
+
+            <div className="grid grid-col md:grid-cols-3 lg:grid-cols-3 gap-5">
+                <div className="py-6 lg:overflow-none md:overflow-x-auto max-w-[370px] md:max-w-[100vh] lg:max-w-[100%]">
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="header" className="py-2 px-1">
+                                Items Returned
+                            </Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                        />
+                    </Card>
+                </div>
+                <div className="py-6 lg:overflow-none md:overflow-x-auto max-w-[370px] md:max-w-[100vh] lg:max-w-[100%]">
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="header" className="py-2 px-1">
+                                Item Borrowed
+                            </Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                        />
+                    </Card>
+                </div>
+                <div className="py-6 lg:overflow-none md:overflow-x-auto max-w-[370px] md:max-w-[100vh] lg:max-w-[100%]">
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="header" className="py-2 px-1">
+                                Item Disposed
+                            </Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                        />
+                    </Card>
+                </div>
+            </div>
         </MainLayout>
     );
 }
diff --git a/resources/js/Pages/Admin/Equipment/Create.jsx b/resources/js/Pages/Admin/Equipment/Create.jsx
new file mode 100644
index 0000000..5076965
--- /dev/null
+++ b/resources/js/Pages/Admin/Equipment/Create.jsx
@@ -0,0 +1,199 @@
+import {
+    Button,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Paper,
+    TextField,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import { useRef, useState, useEffect } from "react";
+import { Link, useForm } from "@inertiajs/react";
+
+import MainLayout from "@/Layouts/MainLayout";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import { HomeRepairServiceOutlined } from "@mui/icons-material";
+import InventoryIcon from "@mui/icons-material/Inventory";
+import MySelectComponent from "@/Components/CustomSelect";
+
+function Create({ auth }) {
+    // test sample
+
+    const [region, setRegion] = React.useState("");
+
+    const regionChange = (event) => {
+        setRegion(event.target.value);
+    };
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const closeModal = () => {
+        setConfirmingUserDeletion(false);
+
+        reset();
+    };
+
+    // add alertmessage in form submit
+
+    const [showAlert, setShowAlert] = useState(true);
+
+    // Function to hide the alert after a specified duration (in milliseconds)
+    const hideAlertAfterDuration = (duration) => {
+        setTimeout(() => {
+            setShowAlert(false);
+        }, duration);
+    };
+
+    // Call the hideAlertAfterDuration function when showAlert becomes true
+    useEffect(() => {
+        if (showAlert) {
+            hideAlertAfterDuration(5000); // Auto-hide after 3 seconds
+        }
+    }, [showAlert]);
+    // submmit to store
+
+    const { data, setData, post, processing, errors, reset } = useForm({
+        equipments: "",
+    });
+
+    useEffect(() => {
+        return () => {
+            reset("password", "password_confirmation");
+        };
+    }, []);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        post(route("equipment.store"));
+
+        // Show the alert
+        setShowAlert(true);
+
+        // Reset the form or perform other actions
+        reset();
+    };
+
+    //  breadcrumbItems
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeRepairServiceOutlined
+                        sx={{ mr: 0.5 }}
+                        fontSize="inherit"
+                    />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeRepairServiceOutlined
+                        sx={{ mr: 0.5 }}
+                        fontSize="inherit"
+                    />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventoryIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Equipments",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    // choice of categories
+
+    const [selectedValue, setSelectedValue] = useState("");
+
+    const handleSelectChange = (event) => {
+        setSelectedValue(event.target.value);
+    };
+
+    const categories_option = [
+        { value: "None", label: "None" },
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <Paper className="">
+                <form onSubmit={handleSubmit} className="grid gap-2">
+                    <DialogTitle>
+                        <Typography variant="subtitle1">Equipments</Typography>
+                    </DialogTitle>
+                    <DialogContent>
+                        <div className="grid grid-col gap-7 px-2">
+                            <div className="grid grid-col gap-5">
+                                <TextField
+                                    label="Equipment"
+                                    id="Equipment"
+                                    name="Equipment"
+                                    value={data.equipments}
+                                    className="block w-full mt-1"
+                                    onChange={(e) => {
+                                        setData("equipments", e.target.value);
+                                    }}
+                                    required
+                                    fullWidth
+                                    helperText={errors.equipments}
+                                    error={!!errors.equipments}
+                                    size="small"
+                                />
+
+                                <TextField
+                                    label="Serial Number"
+                                    id="serial_number"
+                                    name="serial_number"
+                                    value={"Serial Number"}
+                                    className="block w-full mt-1"
+                                    // onChange={handleInputChange}
+                                    size="small"
+                                />
+
+                                <MySelectComponent
+                                    label="Select an Option"
+                                    value={selectedValue}
+                                    options={categories_option}
+                                    onChange={handleSelectChange}
+                                />
+                            </div>
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <div className="px-6 py-5">
+                            <Button variant="" onClick={handleClose}>
+                                Cancel
+                            </Button>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                type="submit"
+                                disabled={processing}
+                            >
+                                Add Equipment
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </form>
+            </Paper>
+        </MainLayout>
+    );
+}
+
+export default Create;
diff --git a/resources/js/Pages/Admin/Equipment/Index.jsx b/resources/js/Pages/Admin/Equipment/Index.jsx
new file mode 100644
index 0000000..4e34a09
--- /dev/null
+++ b/resources/js/Pages/Admin/Equipment/Index.jsx
@@ -0,0 +1,226 @@
+import ShippingCard from "@/Components/Card";
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Avatar,
+    Box,
+    Card,
+    IconButton,
+    ListItem,
+    ListItemAvatar,
+    Menu,
+    Paper,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+import MUIDataTable from "mui-datatables";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import { Link } from "@inertiajs/react";
+import InventorySharpIcon from "@mui/icons-material/InventorySharp";
+import AddIcon from "@mui/icons-material/Add";
+import SyncAltIcon from "@mui/icons-material/SyncAlt";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+export default function Index({ auth, mustVerifyEmail, status, equipments }) {
+    const [messageEl, setmessageEl] = useState(null);
+
+    const MessagehandleClick = (event) => {
+        setmessageEl(event.currentTarget);
+    };
+
+    const MessagehandleClose = () => {
+        setmessageEl(null);
+    };
+    const data = equipments.map((equipments) => [
+        equipments.id,
+        equipments.equipments,
+        <div className="flex justify-end pr-5" key={equipments.id}>
+            <Tooltip title="Account settings">
+                <IconButton
+                    onClick={MessagehandleClick} // Make sure you have defined MessagehandleClick function
+                    size="medium"
+                    sx={{ ml: 2 }}
+                    aria-controls={messageEl ? "account-menu" : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={messageEl ? "true" : undefined}
+                >
+                    <MoreVertIcon />
+                </IconButton>
+            </Tooltip>
+        </div>,
+    ]);
+
+    const columns = ["ID", "Categories", ""];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const [age, setAge] = React.useState("");
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventorySharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Equipments",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <div>
+                {/* account menu start */}
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        textAlign: "center",
+                    }}
+                >
+                    <div className="flex justify-center items-center">
+                        <div>
+                            <Menu
+                                id="account-menu"
+                                anchorEl={messageEl}
+                                open={Boolean(messageEl)}
+                                onClose={MessagehandleClose}
+                                PaperProps={{
+                                    elevation: 0,
+                                    sx: {
+                                        overflow: "visible",
+                                        filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
+                                        mt: 1.5,
+                                        "& .MuiAvatar-root": {
+                                            width: 32,
+                                            height: 32,
+                                            ml: -0.0,
+                                            mr: 2,
+                                        },
+                                        "&:before": {
+                                            content: '""',
+                                            display: "block",
+                                            position: "absolute",
+                                            top: 0,
+                                            right: 14,
+                                            width: 10,
+                                            height: 10,
+                                            bgcolor: "background.paper",
+                                            transform:
+                                                "translateY(-50%) rotate(45deg)",
+                                            zIndex: 0,
+                                        },
+                                    },
+                                }}
+                                transformOrigin={{
+                                    horizontal: "right",
+                                    vertical: "top",
+                                }}
+                                anchorOrigin={{
+                                    horizontal: "right",
+                                    vertical: "bottom",
+                                }}
+                            >
+                                {/* <MessageNotification /> */}
+                                <Link href={route("equipment.create")}>
+                                    <ListItem>
+                                        <ListItemAvatar>
+                                            <Avatar>
+                                                <AddIcon />
+                                            </Avatar>
+                                        </ListItemAvatar>
+                                        <Typography variant="subtitle2">
+                                            Create
+                                        </Typography>
+                                    </ListItem>
+                                </Link>
+                                <Link href={route("branch.create")}>
+                                    <ListItem>
+                                        <ListItemAvatar>
+                                            <Avatar>
+                                                <SyncAltIcon />
+                                            </Avatar>
+                                        </ListItemAvatar>
+                                        <Typography variant="subtitle2">
+                                            Update
+                                        </Typography>
+                                    </ListItem>
+                                </Link>
+                                <Link href={route("branch.create")}>
+                                    <ListItem>
+                                        <ListItemAvatar>
+                                            <Avatar>
+                                                <DeleteForeverIcon />
+                                            </Avatar>
+                                        </ListItemAvatar>
+                                        <Typography variant="subtitle2">
+                                            Delete
+                                        </Typography>
+                                    </ListItem>
+                                </Link>
+                            </Menu>
+                        </div>
+                    </div>
+                </Box>
+            </div>
+            <div className="overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                <Paper>
+                    <div className="sm:hidden">
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Equipments</Typography>
+                        </div>
+                        {/* Mobile View */}
+                        <Card>
+                            <MUIDataTable
+                                data={data}
+                                columns={columns}
+                                options={options}
+                                size={"small"}
+                                // You can apply the stickyHeader class if needed for mobile view
+                            />
+                        </Card>
+                    </div>
+                    <div className="hidden sm:block">
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Equipments</Typography>
+                        </div>
+                        {/* Desktop View */}
+                        <Card>
+                            <MUIDataTable
+                                data={data}
+                                columns={columns}
+                                options={options}
+                                size={"small"}
+                                stickyHeader
+                            />
+                        </Card>
+                    </div>
+                </Paper>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Library/Company/Index.jsx b/resources/js/Pages/Admin/Library/Company/Index.jsx
new file mode 100644
index 0000000..affb4c9
--- /dev/null
+++ b/resources/js/Pages/Admin/Library/Company/Index.jsx
@@ -0,0 +1,49 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import MUIDataTable from "mui-datatables";
+
+export default function Index({ genders }) {
+    const columns = ["Company Name", "Location"];
+
+    //   const data = genders.map((data) => [
+    //       data.gender,
+    //       data.isActive ? "Active" : "Inactive",
+    //   ]);
+
+    const data = [
+        ["EasyPC", "MAKATI CITY"],
+        ["ARK-PC", "CAMARIN CALOOCAN CITY"],
+        ["Tech Haven", "QUEZON CITY"],
+        ["Gadget Galaxy", "TAGUIG CITY"],
+        ["Digital Delights", "MANILA"],
+        ["PC Paradise", "PASAY CITY"],
+        ["ElectroTech", "MANDALUYONG CITY"],
+        ["Tech Trends", "PASIG CITY"],
+        ["Gizmo World", "QUEZON CITY"],
+        ["Future Fusion", "MARIKINA CITY"],
+        ["PC Powerhouse", "LAS PIÑAS CITY"],
+        ["Cyber Central", "PARAÑAQUE CITY"],
+        ["MegaBytes", "VALENZUELA CITY"],
+        ["Innovate IT", "ANTIPOLLO CITY"],
+        ["E-Tech Solutions", "SAN JUAN CITY"],
+        ["iGadget Hub", "MUNTINLUPA CITY"],
+    ];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    return (
+        <>
+            <MUIDataTable
+                title={"Company List"}
+                data={data}
+                columns={columns}
+                options={options}
+            />
+        </>
+    );
+}
diff --git a/resources/js/Pages/Admin/Library/Index.jsx b/resources/js/Pages/Admin/Library/Index.jsx
index ee525d0..ea6c4f5 100644
--- a/resources/js/Pages/Admin/Library/Index.jsx
+++ b/resources/js/Pages/Admin/Library/Index.jsx
@@ -1,39 +1,95 @@
 import MainLayout from "@/Layouts/MainLayout";
-import { Tab, Tabs, Typography } from "@mui/material";
-import React from "react";
+import { Box, Card, Tab, Tabs, Typography } from "@mui/material";
+import React, { useState } from "react";
 import Gender from "./Gender/Index";
 import Religion from "./Religion/Index";
+import Company from "./Company/Index";
+import Position from "./Position/Index";
+import SupervisedUserCircleSharpIcon from "@mui/icons-material/SupervisedUserCircleSharp";
+import ChangeCircleSharpIcon from "@mui/icons-material/ChangeCircleSharp";
+import ManageAccountsSharpIcon from "@mui/icons-material/ManageAccountsSharp";
+import MUIDataTable from "mui-datatables";
 
 export default function Index({ auth }) {
-    const [value, setValue] = React.useState("gender");
-
+    const [value, setValue] = useState("settings");
     const handleChange = (event, newValue) => {
         setValue(newValue);
     };
+
+    const [secondForm, setSecondForm] = useState("gender");
+    const handleChange1 = (event1, newValue1) => {
+        setSecondForm(newValue1);
+    };
+
+    const columns = ["Name", "Age", "Status"];
+    const data = [
+        // Data here...
+    ];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
     return (
         <MainLayout user={auth.user}>
-            <div className="card">
+            <div className="">
                 <Typography variant="h6" color="primary">
                     Settings Page
                 </Typography>
                 <Typography variant="caption">
-                    Add or update settings or global parameter
+                    Add or update settings or global parameters
                 </Typography>
-                <Tabs
-                    value={value}
-                    onChange={handleChange}
-                    textColor="primary"
-                    indicatorColor="primary"
-                    variant="scrollable"
-                    scrollButtons="auto"
-                >
-                    <Tab value="gender" label="Gender" />
-                    <Tab value="religion" label="Religion" />
-                </Tabs>
-
-                <div>
-                    {value === "gender" && <Gender />}
-                    {value === "religion" && <Religion />}
+                <div className="">
+                    {value === "settings" && (
+                        <div className="grid ">
+                            <div className="">
+                                <Tabs
+                                    value={secondForm}
+                                    onChange={handleChange1}
+                                    textColor="primary"
+                                    indicatorColor="primary"
+                                    variant="scrollable"
+                                    scrollButtons="auto"
+                                >
+                                    <Tab
+                                        value="gender"
+                                        label="Gender"
+                                        iconPosition="start"
+                                    />
+                                    <Tab
+                                        value="company List"
+                                        label="Company List"
+                                        iconPosition="start"
+                                    />
+                                    <Tab
+                                        value="position List"
+                                        label="Position List"
+                                        iconPosition="start"
+                                    />
+                                </Tabs>
+                            </div>
+                            <div className="">
+                                {secondForm === "gender" && (
+                                    <div className="">
+                                        <Gender />
+                                    </div>
+                                )}
+                                {secondForm === "company List" && (
+                                    <div className="">
+                                        <Company />
+                                    </div>
+                                )}
+                                {secondForm === "position List" && (
+                                    <div className="">
+                                        <Position />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
                 </div>
             </div>
         </MainLayout>
diff --git a/resources/js/Pages/Admin/Library/Position/Index.jsx b/resources/js/Pages/Admin/Library/Position/Index.jsx
new file mode 100644
index 0000000..8a43ed7
--- /dev/null
+++ b/resources/js/Pages/Admin/Library/Position/Index.jsx
@@ -0,0 +1,64 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import MUIDataTable from "mui-datatables";
+
+export default function Index({ genders }) {
+    const columns = ["Position", "Location"];
+
+    //   const data = genders.map((data) => [
+    //       data.gender,
+    //       data.isActive ? "Active" : "Inactive",
+    //   ]);
+
+    const data = [
+        ["Inventory Clerk", "MAKATI CITY"],
+        ["Sales Manager", "QUEZON CITY"],
+        ["Customer Service Representative", "MANILA"],
+        ["Software Developer", "TAGUIG CITY"],
+        ["Marketing Coordinator", "CEBU CITY"],
+        ["Accountant", "DAVAO CITY"],
+        ["Warehouse Supervisor", "PASIG CITY"],
+        ["HR Specialist", "MANDALUYONG CITY"],
+        ["Operations Manager", "PASAY CITY"],
+        ["Graphic Designer", "MUNTINLUPA CITY"],
+        ["Inventory Clerk", "MAKATI CITY"],
+        ["Sales Manager", "QUEZON CITY"],
+        ["Customer Service Representative", "MANILA"],
+        ["Software Developer", "TAGUIG CITY"],
+        ["Marketing Coordinator", "CEBU CITY"],
+        ["Accountant", "DAVAO CITY"],
+        ["Warehouse Supervisor", "PASIG CITY"],
+        ["HR Specialist", "MANDALUYONG CITY"],
+        ["Operations Manager", "PASAY CITY"],
+        ["Graphic Designer", "MUNTINLUPA CITY"],
+        ["Data Analyst", "QUEZON CITY"],
+        ["Product Manager", "MANILA"],
+        ["Frontend Developer", "TAGUIG CITY"],
+        ["Event Planner", "CEBU CITY"],
+        ["Financial Analyst", "DAVAO CITY"],
+        ["Logistics Coordinator", "PASIG CITY"],
+        ["Recruitment Specialist", "MANDALUYONG CITY"],
+        ["Restaurant Manager", "PASAY CITY"],
+        ["UI/UX Designer", "MUNTINLUPA CITY"],
+        ["Quality Assurance Tester", "QUEZON CITY"],
+        ["Marketing Manager", "MANILA"],
+    ];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    return (
+        <>
+            <MUIDataTable
+                title={"Position List"}
+                data={data}
+                columns={columns}
+                options={options}
+            />
+        </>
+    );
+}
diff --git a/resources/js/Pages/Admin/Library/Settings/Index.jsx b/resources/js/Pages/Admin/Library/Settings/Index.jsx
new file mode 100644
index 0000000..dc18cdc
--- /dev/null
+++ b/resources/js/Pages/Admin/Library/Settings/Index.jsx
@@ -0,0 +1,54 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Button, Tab, Tabs, TextField, Typography } from "@mui/material";
+import React from "react";
+
+export default function Index({ auth, user }) {
+    const [value, setValue] = React.useState("gender");
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+    return (
+        <MainLayout user={auth.user}>
+            <div className="grid justify-end ">
+                <Button variant="contained" color="primary">
+                    Save
+                </Button>
+            </div>
+            <div className="card">
+                <Typography variant="h6" color="primary">
+                    Settings Page
+                </Typography>
+
+                <div className="grid grid-col py-3">
+                    <Typography variant="body1">Username</Typography>
+                    <Typography variant="button">Jhunriz</Typography>
+                </div>
+
+                <div className="grid grid-cols-2 gap-10">
+                    <TextField
+                        id="filled-basic"
+                        label="Email"
+                        variant="outlined"
+                        required
+                    />
+                    <TextField
+                        id="filled-basic"
+                        label="Contact"
+                        variant="outlined"
+                    />
+                    <TextField
+                        id="filled-basic"
+                        label="First Name"
+                        variant="outlined"
+                    />
+                    <TextField
+                        id="filled-basic"
+                        label="Last Name"
+                        variant="outlined"
+                    />
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Management/Products/Create.jsx b/resources/js/Pages/Admin/Management/Products/Create.jsx
new file mode 100644
index 0000000..a6bb44a
--- /dev/null
+++ b/resources/js/Pages/Admin/Management/Products/Create.jsx
@@ -0,0 +1,315 @@
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    TextField,
+} from "@mui/material";
+import React from "react";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import CustomSelect from "@/Components/CustomSelect";
+import { useRef, useState, useEffect } from "react";
+import { useForm } from "@inertiajs/react";
+import AddSharpIcon from "@mui/icons-material/AddSharp";
+import FileUpload from "@/Components/FileUpload";
+import Alert from "@mui/material/Alert";
+import Stack from "@mui/material/Stack";
+
+function Create() {
+    // test sample
+
+    const [region, setRegion] = React.useState("");
+
+    const regionChange = (event) => {
+        setRegion(event.target.value);
+    };
+
+    const regions = [
+        { label: "None", value: "" },
+        { label: "Ten", value: 10 },
+        { label: "Twenty", value: 20 },
+        { label: "Thirty", value: 30 },
+    ];
+
+    // test
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const closeModal = () => {
+        setConfirmingUserDeletion(false);
+
+        reset();
+    };
+
+    // department sample
+
+    const [department, setDepartment] = React.useState("");
+
+    const departmentChange = (event) => {
+        setDepartment(event.target.value);
+    };
+
+    const departmentoptions = [
+        { label: "None", value: "" },
+        { label: "EasyPC", value: "EasyPC" },
+        { label: "Greenhills", value: "Greenhills" },
+        { label: "Gilmore", value: "Gilmore" },
+    ];
+
+    const [status, setStatus] = React.useState("");
+
+    const statusChange = (event) => {
+        setStatus(event.target.value);
+    };
+
+    const options = [
+        { label: "None", value: "" },
+        { label: "Active", value: "Active" },
+        { label: "Inactive", value: "Inactive" },
+        { label: "Deactivated", value: "Deactivated" },
+    ];
+
+    // add alertmessage in form submit
+
+    const [showAlert, setShowAlert] = useState(true);
+
+    // Function to hide the alert after a specified duration (in milliseconds)
+    const hideAlertAfterDuration = (duration) => {
+        setTimeout(() => {
+            setShowAlert(false);
+        }, duration);
+    };
+
+    // Call the hideAlertAfterDuration function when showAlert becomes true
+    useEffect(() => {
+        if (showAlert) {
+            hideAlertAfterDuration(5000); // Auto-hide after 3 seconds
+        }
+    }, [showAlert]);
+
+    // submmit to store
+
+    const { data, setData, post, processing, errors, reset } = useForm({
+        productName: "",
+        productId: "",
+        branch: "",
+        status: "",
+        productDescription: "",
+        productFileUpload: "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        post(route("products.store"));
+        // route is located ) web.php
+        setShowAlert(true);
+        reset();
+    };
+
+    // file upload
+
+    const [selectedFile, setSelectedFile] = useState(null);
+
+    const handleFileChange = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            // Check the file type
+            if (
+                file.type === "application/pdf" ||
+                file.type.startsWith(
+                    "application/vnd.openxmlformats-officedocument"
+                ) ||
+                file.type === "application/msword"
+            ) {
+                // Check the file size (50MB limit)
+                if (file.size <= 50 * 1024 * 1024) {
+                    setSelectedFile(file);
+                } else {
+                    alert("File size exceeds 50MB limit");
+                    event.target.value = null; // Clear the file input
+                }
+            } else {
+                alert(
+                    "Unsupported file type. Please select a PDF or document file."
+                );
+                event.target.value = null; // Clear the file input
+            }
+        }
+    };
+
+    const handleUpload = () => {
+        if (selectedFile) {
+            // You can perform the file upload logic here
+            console.log("Uploading file:", selectedFile);
+        } else {
+            console.log("No file selected");
+        }
+    };
+
+    return (
+        <div>
+            <div>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={handleClickOpen}
+                    startIcon={<AddSharpIcon />}
+                    className="w-full lg:w-40"
+                >
+                    Add Product
+                </Button>
+
+                <Dialog open={open} onClose={handleClose}>
+                    <form onSubmit={handleSubmit}>
+                        <DialogTitle>Add your products!</DialogTitle>
+                        <DialogContent>
+                            <div className="grid gap-5">
+                                <div className="grid grid-col gap-5">
+                                    <TextField
+                                        label="productName"
+                                        id="productName"
+                                        name="productName"
+                                        value={data.productName}
+                                        className="block w-full mt-1"
+                                        onChange={(e) =>
+                                            setData(
+                                                "productName",
+                                                e.target.value
+                                            )
+                                        }
+                                        required
+                                        fullWidth
+                                        helperText={errors.productName}
+                                        error={!!errors.productName}
+                                        size="small"
+                                    />
+
+                                    <TextField
+                                        label="productId"
+                                        id="productId"
+                                        name="productId"
+                                        value={data.productId}
+                                        className="block w-full mt-1"
+                                        onChange={(e) =>
+                                            setData("productId", e.target.value)
+                                        }
+                                        required
+                                        fullWidth
+                                        helperText={errors.productId}
+                                        error={!!errors.productId}
+                                        size="small"
+                                    />
+                                </div>
+                                <div className="grid grid-col md:grid-cols-2 lg:grid-cols-2 gap-2">
+                                    <CustomSelect
+                                        label="branch"
+                                        id="branch"
+                                        name="branch"
+                                        value={data.branch}
+                                        className="block w-full mt-1"
+                                        onChange={(e) =>
+                                            setData("branch", e.target.value)
+                                        }
+                                        required
+                                        fullWidth
+                                        helperText={errors.branch}
+                                        error={!!errors.branch}
+                                        size="small"
+                                        options={departmentoptions}
+                                    />
+                                    <CustomSelect
+                                        label="status"
+                                        id="status"
+                                        name="status"
+                                        value={data.status}
+                                        className="block w-full mt-1"
+                                        onChange={(e) =>
+                                            setData("status", e.target.value)
+                                        }
+                                        required
+                                        fullWidth
+                                        helperText={errors.status}
+                                        error={!!errors.status}
+                                        size="small"
+                                        options={options}
+                                    />
+                                </div>
+
+                                <div>
+                                    <textarea
+                                        className="rounded bg-inherit w-full"
+                                        label="productDescription"
+                                        placeholder="description"
+                                        id="productDescription"
+                                        name="productDescription"
+                                        value={data.productDescription}
+                                        onChange={(e) =>
+                                            setData(
+                                                "productDescription",
+                                                e.target.value
+                                            )
+                                        }
+                                        required
+                                        fullWidth
+                                        helperText={errors.productDescription}
+                                        error={!!errors.productDescription}
+                                        cols="62"
+                                        rows="10"
+                                    ></textarea>
+                                </div>
+
+                                <div>
+                                    <input
+                                        type="file"
+                                        id="productFileUpload"
+                                        name="productFileUpload"
+                                        accept=".pdf,.doc,.docx"
+                                        onChange={(e) => {
+                                            setData(
+                                                "productFileUpload",
+                                                e.target.value
+                                            );
+                                            handleFileChange(e); // Call your existing onChange handler
+                                        }}
+                                        required
+                                        fullWidth
+                                        helperText={errors.productFileUpload}
+                                        error={!!errors.productFileUpload}
+                                    />
+                                </div>
+                            </div>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button variant="" onClick={handleClose}>
+                                Cancel
+                            </Button>
+                            <Button
+                                variant="contained"
+                                color="success"
+                                type="submit"
+                                disabled={processing}
+                            >
+                                Add Product
+                            </Button>
+                        </DialogActions>
+                    </form>
+                </Dialog>
+            </div>
+        </div>
+    );
+}
+
+export default Create;
diff --git a/resources/js/Pages/Admin/Management/Products/Index.jsx b/resources/js/Pages/Admin/Management/Products/Index.jsx
new file mode 100644
index 0000000..9898f90
--- /dev/null
+++ b/resources/js/Pages/Admin/Management/Products/Index.jsx
@@ -0,0 +1,109 @@
+import MainLayout from "@/Layouts/MainLayout";
+import { Card, Typography } from "@mui/material";
+import React from "react";
+import MUIDataTable from "mui-datatables";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import { Link } from "@inertiajs/react";
+import InventorySharpIcon from "@mui/icons-material/InventorySharp";
+import EastIcon from "@mui/icons-material/East";
+
+export default function Index({ auth, mustVerifyEmail, status, products }) {
+    const data = products.map((product) => [
+        product.productName,
+        product.productId,
+        product.branch,
+        product.status,
+        product.productDescription,
+        product.productFileUpload,
+        <div className="flex justify-end pr-5">
+            <Link href={route("dashboard")}>
+                <EastIcon />
+            </Link>
+        </div>, // Replace 'insert_icon_name_here' with the actual icon name
+    ]);
+
+    const columns = [
+        "Product Name",
+        "Product ID",
+        "Branch",
+        "Status",
+        "Description",
+        "productFileUpload",
+        "",
+    ];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const [age, setAge] = React.useState("");
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventorySharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Inventory",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <div className="overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                <div className="sm:hidden">
+                    {/* Mobile View */}
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Inventory</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            // You can apply the stickyHeader class if needed for mobile view
+                        />
+                    </Card>
+                </div>
+                <div className="hidden sm:block">
+                    {/* Desktop View */}
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Inventory</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            stickyHeader
+                        />
+                    </Card>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Management/User/Create.jsx b/resources/js/Pages/Admin/Management/User/Create.jsx
new file mode 100644
index 0000000..542878c
--- /dev/null
+++ b/resources/js/Pages/Admin/Management/User/Create.jsx
@@ -0,0 +1,217 @@
+import {
+    Alert,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Paper,
+    Stack,
+    TextField,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import CustomSelect from "@/Components/CustomSelect";
+import { useRef, useState, useEffect } from "react";
+import { useForm } from "@inertiajs/react";
+import AddSharpIcon from "@mui/icons-material/AddSharp";
+import MainLayout from "@/Layouts/MainLayout";
+
+function Create({ auth }) {
+    // test sample
+
+    const [region, setRegion] = React.useState("");
+
+    const regionChange = (event) => {
+        setRegion(event.target.value);
+    };
+
+    const regions = [
+        { label: "None", value: "" },
+        { label: "Ten", value: 10 },
+        { label: "Twenty", value: 20 },
+        { label: "Thirty", value: 30 },
+    ];
+
+    // test
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const closeModal = () => {
+        setConfirmingUserDeletion(false);
+
+        reset();
+    };
+
+    // department sample
+
+    const [department, setDepartment] = React.useState("");
+
+    const DepartmentChange = (event) => {
+        setDepartment(event.target.value);
+    };
+
+    const departmentoption = [
+        { label: "None", value: "" },
+        { label: "IT", value: 10 },
+        { label: "Computer-Science", value: 20 },
+        { label: "IS", value: 30 },
+    ];
+
+    // add alertmessage in form submit
+
+    const [showAlert, setShowAlert] = useState(true);
+
+    // Function to hide the alert after a specified duration (in milliseconds)
+    const hideAlertAfterDuration = (duration) => {
+        setTimeout(() => {
+            setShowAlert(false);
+        }, duration);
+    };
+
+    // Call the hideAlertAfterDuration function when showAlert becomes true
+    useEffect(() => {
+        if (showAlert) {
+            hideAlertAfterDuration(5000); // Auto-hide after 3 seconds
+        }
+    }, [showAlert]);
+    // submmit to store
+
+    const { data, setData, post, processing, errors, reset } = useForm({
+        name: "",
+        email: "",
+        password: "",
+        password_confirmation: "",
+    });
+
+    useEffect(() => {
+        return () => {
+            reset("password", "password_confirmation");
+        };
+    }, []);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        post(route("management.store"));
+
+        // Show the alert
+        setShowAlert(true);
+
+        // Reset the form or perform other actions
+        reset();
+    };
+
+    return (
+        <MainLayout user={auth.user}>
+            <Paper>
+                <form onSubmit={handleSubmit} className="grid gap-2">
+                    <DialogTitle>
+                        <Typography variant="subtitle1">User</Typography>
+                    </DialogTitle>
+                    <DialogContent>
+                        <div className="grid grid-col gap-7 px-2">
+                            <div className="grid grid-col gap-5">
+                                <TextField
+                                    label="Name"
+                                    id="name"
+                                    name="name"
+                                    value={data.name}
+                                    className="block w-full mt-1"
+                                    onChange={(e) =>
+                                        setData("name", e.target.value)
+                                    }
+                                    required
+                                    fullWidth
+                                    helperText={errors.name}
+                                    error={!!errors.name}
+                                    size="small"
+                                />
+
+                                <TextField
+                                    label="Email address"
+                                    id="email"
+                                    type="email"
+                                    name="email"
+                                    value={data.email}
+                                    onChange={(e) =>
+                                        setData("email", e.target.value)
+                                    }
+                                    required
+                                    fullWidth
+                                    helperText={errors.email}
+                                    error={!!errors.email}
+                                    size="small"
+                                />
+
+                                <TextField
+                                    label="Password"
+                                    id="password"
+                                    type="password"
+                                    name="password"
+                                    value={data.password}
+                                    onChange={(e) =>
+                                        setData("password", e.target.value)
+                                    }
+                                    required
+                                    fullWidth
+                                    helperText={errors.password}
+                                    error={!!errors.password}
+                                    size="small"
+                                />
+
+                                <TextField
+                                    label="Confirm Password"
+                                    id="password_confirmation"
+                                    type="password"
+                                    name="password_confirmation"
+                                    value={data.password_confirmation}
+                                    onChange={(e) =>
+                                        setData(
+                                            "password_confirmation",
+                                            e.target.value
+                                        )
+                                    }
+                                    required
+                                    fullWidth
+                                    helperText={errors.password_confirmation}
+                                    error={!!errors.password_confirmation}
+                                    size="small"
+                                />
+                            </div>
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <div className="px-6 py-5">
+                            <Button variant="" onClick={handleClose}>
+                                Cancel
+                            </Button>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                type="submit"
+                                disabled={processing}
+                            >
+                                Add Account
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </form>
+            </Paper>
+        </MainLayout>
+    );
+}
+
+export default Create;
diff --git a/resources/js/Pages/Admin/Management/User/Index.jsx b/resources/js/Pages/Admin/Management/User/Index.jsx
new file mode 100644
index 0000000..3dccf5e
--- /dev/null
+++ b/resources/js/Pages/Admin/Management/User/Index.jsx
@@ -0,0 +1,299 @@
+import ShippingCard from "@/Components/Card";
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Autocomplete,
+    Avatar,
+    Box,
+    Button,
+    Card,
+    FormControl,
+    IconButton,
+    InputLabel,
+    ListItem,
+    ListItemAvatar,
+    Menu,
+    MenuItem,
+    Select,
+    Skeleton,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import MUIDataTable from "mui-datatables";
+import TransitionsModal from "@/Components/Modal";
+import ReusableModal from "@/Components/Modal";
+import AddSharpIcon from "@mui/icons-material/AddSharp";
+import BasicTextFields from "@/Components/InputField";
+import CustomizedSnackbars from "@/Components/CustomizeSnackBar";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import PersonIcon from "@mui/icons-material/Person";
+import GrainIcon from "@mui/icons-material/Grain";
+import { Link } from "@inertiajs/react";
+import Create from "./Create";
+import { useRef, useState } from "react";
+import { useForm } from "@inertiajs/react";
+import EastIcon from "@mui/icons-material/East";
+import AddIcon from "@mui/icons-material/Add";
+import SyncAltIcon from "@mui/icons-material/SyncAlt";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+export default function Index({ auth, mustVerifyEmail, status, users }) {
+    // this variable data with the code .map is help determine the backend
+
+    const columns = ["ID", "Name", "Email", ""];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <PersonIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "User",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    // test sample
+
+    const [region, setRegion] = React.useState("");
+
+    const regionChange = (event) => {
+        setRegion(event.target.value);
+    };
+
+    const regions = [
+        { label: "None", value: "" },
+        { label: "Ten", value: 10 },
+        { label: "Twenty", value: 20 },
+        { label: "Thirty", value: 30 },
+    ];
+
+    // test
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
+    const passwordInput = useRef();
+
+    const {
+        data1,
+        setData,
+        delete: destroy,
+        processing,
+        reset,
+        errors,
+    } = useForm({
+        password: "",
+    });
+
+    const confirmUserDeletion = () => {
+        setConfirmingUserDeletion(true);
+    };
+
+    const deleteUser = (e) => {
+        e.preventDefault();
+
+        const confirmation = window.confirm(
+            "Are you sure you want to delete your account?"
+        );
+        if (confirmation) {
+            destroy(route("profile.destroy"), {
+                preserveScroll: true,
+                onSuccess: () => closeModal(),
+                onError: () => passwordInput.current.focus(),
+                onFinish: () => reset(),
+            });
+        }
+    };
+
+    const closeModal = () => {
+        setConfirmingUserDeletion(false);
+
+        reset();
+    };
+
+    // department sample
+
+    const [department, setDepartment] = React.useState("");
+
+    const DepartmentChange = (event) => {
+        setDepartment(event.target.value);
+    };
+
+    const departmentoption = [
+        { label: "None", value: "" },
+        { label: "IT", value: 10 },
+        { label: "Computer-Science", value: 20 },
+        { label: "IS", value: 30 },
+    ];
+
+    const [messageEl, setmessageEl] = useState(null);
+
+    const MessagehandleClick = (event) => {
+        setmessageEl(event.currentTarget);
+    };
+
+    const MessagehandleClose = () => {
+        setmessageEl(null);
+    };
+
+    const data = users.map((user) => [
+        user.id,
+        user.name,
+        user.email,
+        <div className="flex justify-end pr-5" key={user.id}>
+            <Tooltip title="Account settings">
+                <IconButton
+                    onClick={MessagehandleClick} // Make sure you have defined MessagehandleClick function
+                    size="medium"
+                    sx={{ ml: 2 }}
+                    aria-controls={messageEl ? "account-menu" : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={messageEl ? "true" : undefined}
+                >
+                    <MoreVertIcon />
+                </IconButton>
+            </Tooltip>
+        </div>,
+    ]);
+
+    return (
+        <MainLayout user={auth.user}>
+            {/* account menu start */}
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    textAlign: "center",
+                }}
+            >
+                <div className="flex justify-center items-center">
+                    <div>
+                        <Menu
+                            id="account-menu"
+                            anchorEl={messageEl}
+                            open={Boolean(messageEl)}
+                            onClose={MessagehandleClose}
+                            PaperProps={{
+                                elevation: 0,
+                                sx: {
+                                    overflow: "visible",
+                                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
+                                    mt: 1.5,
+                                    "& .MuiAvatar-root": {
+                                        width: 32,
+                                        height: 32,
+                                        ml: -0.0,
+                                        mr: 2,
+                                    },
+                                    "&:before": {
+                                        content: '""',
+                                        display: "block",
+                                        position: "absolute",
+                                        top: 0,
+                                        right: 14,
+                                        width: 10,
+                                        height: 10,
+                                        bgcolor: "background.paper",
+                                        transform:
+                                            "translateY(-50%) rotate(45deg)",
+                                        zIndex: 0,
+                                    },
+                                },
+                            }}
+                            transformOrigin={{
+                                horizontal: "right",
+                                vertical: "top",
+                            }}
+                            anchorOrigin={{
+                                horizontal: "right",
+                                vertical: "bottom",
+                            }}
+                        >
+                            {/* <MessageNotification /> */}
+                            <Link href={route("management.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <AddIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Create
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("management.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <SyncAltIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Update
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("management.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <DeleteForeverIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Delete
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                        </Menu>
+                    </div>
+                </div>
+            </Box>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <div className="md:grid-cols-3 gap-5 overflow-x-auto max-w-[370px] lg:max-w-[100%]">
+                <Card>
+                    <div className="px-5 py-5 border-b-4 border-sky-500">
+                        <Typography variant="h6">User</Typography>
+                    </div>
+                    <MUIDataTable
+                        data={data}
+                        columns={columns}
+                        options={options}
+                    />
+                </Card>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Qr/Create.jsx b/resources/js/Pages/Admin/Qr/Create.jsx
new file mode 100644
index 0000000..7583fdd
--- /dev/null
+++ b/resources/js/Pages/Admin/Qr/Create.jsx
@@ -0,0 +1,336 @@
+import {
+    Button,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Paper,
+    TextField,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import CustomSelect from "@/Components/CustomSelect";
+import { useRef, useState } from "react";
+import { useForm } from "@inertiajs/react";
+import QRCode from "qrcode.react";
+import MainLayout from "@/Layouts/MainLayout";
+
+function Create({ auth }) {
+    const [formData, setFormData] = useState({
+        name: "",
+        email: "",
+    });
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...formData,
+            [name]: value,
+        });
+    };
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const closeModal = () => {
+        setConfirmingUserDeletion(false);
+
+        reset();
+    };
+
+    // department sample
+
+    const [department, setDepartment] = React.useState("");
+
+    const departmentChange = (event) => {
+        setDepartment(event.target.value);
+    };
+
+    const departmentoptions = [
+        { label: "None", value: "" },
+        { label: "EasyPC", value: "EasyPC" },
+        { label: "Greenhills", value: "Greenhills" },
+        { label: "Gilmore", value: "Gilmore" },
+    ];
+
+    const [status, setStatus] = React.useState("");
+
+    const statusChange = (event) => {
+        setStatus(event.target.value);
+    };
+
+    const options = [
+        { label: "None", value: "" },
+        { label: "Active", value: "Active" },
+        { label: "Inactive", value: "Inactive" },
+        { label: "Deactivated", value: "Deactivated" },
+    ];
+
+    // qrcode generator start
+
+    const [ProductName, setProductName] = useState("");
+
+    const handleInputChange = (e) => {
+        setProductName(e.target.value);
+    };
+    const [Product, setProduct] = useState("");
+    const handleProductChange = (e) => {
+        setProduct(e.target.value);
+    };
+
+    const [Branch, setBranch] = useState("");
+    const handleBranchChange = (e) => {
+        setBranch(e.target.value);
+    };
+
+    const result =
+        "Product Name: " +
+        ProductName +
+        "\n" +
+        "Inventory: " +
+        Product +
+        "Inventory: " +
+        Branch;
+
+    // submmit to store
+
+    const { data, setData, post, processing, errors, reset } = useForm({
+        productName: "",
+        productId: "",
+        branch: "",
+        status: "",
+        qrDescription: "",
+        fileUpload: "",
+        qrcode: "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        post(route("qr.store"));
+        // route is located ) web.php
+        // setShowAlert(true);
+        reset();
+    };
+
+    // file upload
+
+    const [selectedFile, setSelectedFile] = useState(null);
+
+    const handleFileChange = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            // Check the file type
+            if (
+                file.type === "application/pdf" ||
+                file.type.startsWith(
+                    "application/vnd.openxmlformats-officedocument"
+                ) ||
+                file.type === "application/msword"
+            ) {
+                // Check the file size (50MB limit)
+                if (file.size <= 50 * 1024 * 1024) {
+                    setSelectedFile(file);
+                } else {
+                    alert("File size exceeds 50MB limit");
+                    event.target.value = null; // Clear the file input
+                }
+            } else {
+                alert(
+                    "Unsupported file type. Please select a PDF or document file."
+                );
+                event.target.value = null; // Clear the file input
+            }
+        }
+    };
+
+    const handleUpload = () => {
+        if (selectedFile) {
+            // You can perform the file upload logic here
+            console.log("Uploading file:", selectedFile);
+        } else {
+            console.log("No file selected");
+        }
+    };
+    return (
+        <MainLayout user={auth.user}>
+            <Paper>
+                <form onSubmit={handleSubmit}>
+                    <div className="py-2">
+                        <DialogTitle>QRCODE Management</DialogTitle>
+                    </div>
+
+                    <DialogContent>
+                        <div className="grid grid-col gap-7 px-2">
+                            <div className="grid grid-col gap-5">
+                                <TextField
+                                    id="outlined-basic"
+                                    label="Product Name"
+                                    variant="outlined"
+                                    fullWidth
+                                    size="small"
+                                    required
+                                    value={data.productName}
+                                    className="block w-full mt-1"
+                                    onChange={(e) => {
+                                        setData("productName", e.target.value);
+                                        handleInputChange(e); // Call your existing onChange handler
+                                    }}
+                                    helperText={errors.productName}
+                                    error={!!errors.productName}
+                                />
+
+                                <TextField
+                                    id="outlined-basic"
+                                    label="productId"
+                                    variant="outlined"
+                                    fullWidth
+                                    size="small"
+                                    required
+                                    value={data.productId}
+                                    className="block w-full mt-1"
+                                    onChange={(e) => {
+                                        setData("productId", e.target.value);
+                                        handleProductChange(e); // Call your existing onChange handler
+                                    }}
+                                    helperText={errors.productId}
+                                    error={!!errors.productId}
+                                />
+                            </div>
+                            <div className="grid grid-col md:grid-cols-2 lg:grid-cols-2 gap-2">
+                                <CustomSelect
+                                    id="outlined-basic"
+                                    label="Branch"
+                                    variant="outlined"
+                                    fullWidth
+                                    size="small"
+                                    required
+                                    value={data.branch}
+                                    className="block w-full mt-1"
+                                    onChange={(e) => {
+                                        setData("branch", e.target.value);
+                                        handleBranchChange(e); // Call your existing onChange handler
+                                    }}
+                                    helperText={errors.branch}
+                                    error={!!errors.branch}
+                                    options={departmentoptions}
+                                />
+                                <CustomSelect
+                                    id="outlined-basic"
+                                    label="status"
+                                    variant="outlined"
+                                    fullWidth
+                                    size="small"
+                                    required
+                                    value={data.status}
+                                    className="block w-full mt-1"
+                                    onChange={(e) => {
+                                        setData("status", e.target.value);
+                                    }}
+                                    helperText={errors.status}
+                                    error={!!errors.status}
+                                    options={options}
+                                />
+                            </div>
+
+                            <div>
+                                <textarea
+                                    className="rounded bg-inherit w-full"
+                                    label="productDescription"
+                                    placeholder="description"
+                                    id="productDescription"
+                                    name="productDescription"
+                                    value={data.qrDescription}
+                                    onChange={(e) =>
+                                        setData("qrDescription", e.target.value)
+                                    }
+                                    required
+                                    fullWidth
+                                    helperText={errors.qrDescription}
+                                    error={!!errors.qrDescription}
+                                    cols="62"
+                                    rows="10"
+                                ></textarea>
+                            </div>
+
+                            <div className="" fullWidth>
+                                <h2 class="text-lg font-semibold">
+                                    File Upload
+                                </h2>
+                                <input
+                                    type="file"
+                                    id="fileUpload"
+                                    name="fileUpload"
+                                    accept=".pdf,.doc,.docx"
+                                    onChange={(e) => {
+                                        setData("fileUpload", e.target.value);
+                                        handleFileChange(e); // Call your existing onChange handler
+                                    }}
+                                    required
+                                    class="block w-full mt-1 p-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
+                                />
+                            </div>
+
+                            <div className="flex justify-center rounded border-2 py-5 lg:py-10 border-gray-400">
+                                {ProductName && (
+                                    <QRCode
+                                        value={result}
+                                        onChange={(e) => {
+                                            setData("qrcode", e.target.value);
+                                            handleProductChange(e); // Call your existing onChange handler
+                                        }}
+                                        helperText={errors.qrcode}
+                                        error={!!errors.qrcode}
+                                        size={128}
+                                    />
+                                )}
+                            </div>
+
+                            <div>
+                                <Typography variant="body1">
+                                    <TextField
+                                        id="outlined-basic"
+                                        variant="standard"
+                                        fullWidth
+                                        size="small"
+                                        required
+                                        value={result}
+                                        onChange={(e) => {
+                                            setData("qrcode", e.target.value);
+                                            handleProductChange(e); // Call your existing onChange handler
+                                        }}
+                                        helperText={errors.qrcode}
+                                        error={!!errors.qrcode}
+                                    />
+                                </Typography>
+                            </div>
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <div className="px-6 py-5">
+                            <Button variant="" onClick={handleClose}>
+                                Cancel
+                            </Button>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                type="submit"
+                                disabled={processing}
+                            >
+                                Add Product
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </form>
+            </Paper>
+        </MainLayout>
+    );
+}
+
+export default Create;
diff --git a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx
new file mode 100644
index 0000000..5d253f0
--- /dev/null
+++ b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx
@@ -0,0 +1,145 @@
+import ShippingCard from "@/Components/Card";
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Autocomplete,
+    Avatar,
+    Button,
+    Card,
+    FormControl,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import MUIDataTable from "mui-datatables";
+import TransitionsModal from "@/Components/Modal";
+import ReusableModal from "@/Components/Modal";
+import AddSharpIcon from "@mui/icons-material/AddSharp";
+import BasicTextFields from "@/Components/InputField";
+import QRCodeGenerator from "@/Components/QRCodeGenerator";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import WhatshotIcon from "@mui/icons-material/Whatshot";
+import GrainIcon from "@mui/icons-material/Grain";
+import { Link } from "@inertiajs/react";
+import VerticalTabs from "@/Components/TabPanel";
+import BarcodeGenerator from "@/Components/BarcodeGenerator";
+import QRCodeScanner from "@/Components/QRCodeScanner";
+import BarcodeScanner from "@/Components/BarcodeScanner";
+import QrCodeSharpIcon from "@mui/icons-material/QrCodeSharp";
+import CropFreeIcon from "@mui/icons-material/CropFree";
+import QrCode2SharpIcon from "@mui/icons-material/QrCode2Sharp";
+
+export default function Index({ auth, mustVerifyEmail, status }) {
+    const columns = ["Product Name", "Product ID", "Status"];
+
+    const data = [
+        ["Lenovo laptop", "ABC1234", "Active"],
+        ["Lenovo PC", "ABC4321", "Pending"],
+    ];
+
+    const data1 = [
+        ["Lenovo laasdfasdfptop", "ABC1234", "Active"],
+        ["Lenovo PC", "ABC4321", "Pending"],
+    ];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const [age, setAge] = React.useState("");
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <QrCode2SharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "QR",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    // Define an array of tab objects with label and content properties
+    const tabs = [
+        {
+            label: (
+                <Typography variant="button" display="block" gutterBottom>
+                    Barcode
+                </Typography>
+            ),
+            content: (
+                <div className="">
+                    <div className="flex justify-center py-10">
+                        <ReusableModal
+                            icon={<CropFreeIcon />}
+                            title={"Scan"}
+                            content={
+                                <div className="flex flex-col gap-10 ">
+                                    <BarcodeScanner />
+                                </div>
+                            }
+                        />
+                    </div>
+                    <Card>
+                        <BarcodeGenerator />
+                    </Card>
+                </div>
+            ),
+        },
+        {
+            label: (
+                <Typography variant="button" display="block" gutterBottom>
+                    QR-Code
+                </Typography>
+            ),
+            content: (
+                <div className="">
+                    <div className="flex justify-center py-10">
+                        <ReusableModal
+                            icon={<QrCodeSharpIcon />}
+                            title={"Scan QR"}
+                            content={
+                                <div className="flex flex-col gap-10 ">
+                                    <QRCodeScanner />
+                                </div>
+                            }
+                        />
+                    </div>
+                    <Card>
+                        <QRCodeGenerator />
+                    </Card>
+                </div>
+            ),
+        },
+        // Add more tabs as needed
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <VerticalTabs tabs={tabs} />
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Qr/Index.jsx b/resources/js/Pages/Admin/Qr/Index.jsx
new file mode 100644
index 0000000..d9e957e
--- /dev/null
+++ b/resources/js/Pages/Admin/Qr/Index.jsx
@@ -0,0 +1,210 @@
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Avatar,
+    Box,
+    Card,
+    IconButton,
+    ListItem,
+    ListItemAvatar,
+    Menu,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+import MUIDataTable from "mui-datatables";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import { Link } from "@inertiajs/react";
+import QrCode2SharpIcon from "@mui/icons-material/QrCode2Sharp";
+import EastIcon from "@mui/icons-material/East";
+import AddIcon from "@mui/icons-material/Add";
+import SyncAltIcon from "@mui/icons-material/SyncAlt";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+export default function Index({ auth, mustVerifyEmail, qrcodes }) {
+    const [messageEl, setmessageEl] = useState(null);
+
+    const MessagehandleClick = (event) => {
+        setmessageEl(event.currentTarget);
+    };
+
+    const MessagehandleClose = () => {
+        setmessageEl(null);
+    };
+
+    const data = qrcodes.map((qrcode) => [
+        qrcode.productName,
+        qrcode.productId,
+        qrcode.branch,
+        qrcode.status,
+        qrcode.qrDescription,
+        qrcode.fileUpload,
+        qrcode.qrcode,
+        <div className="flex justify-end pr-5" key={qrcode.id}>
+            <Tooltip title="Account settings">
+                <IconButton
+                    onClick={MessagehandleClick} // Make sure you have defined MessagehandleClick function
+                    size="medium"
+                    sx={{ ml: 2 }}
+                    aria-controls={messageEl ? "account-menu" : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={messageEl ? "true" : undefined}
+                >
+                    <MoreVertIcon />
+                </IconButton>
+            </Tooltip>
+        </div>, // Replace 'insert_icon_name_here' with the actual icon name
+    ]);
+
+    const columns = [
+        "Product Name",
+        "Product ID",
+        "Branch",
+        "Status",
+        "Description",
+        "fileUpload",
+        "qrcode",
+        "",
+    ];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <QrCode2SharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "QR",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            {/* account menu start */}
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    textAlign: "center",
+                }}
+            >
+                <div className="flex justify-center items-center">
+                    <div>
+                        <Menu
+                            id="account-menu"
+                            anchorEl={messageEl}
+                            open={Boolean(messageEl)}
+                            onClose={MessagehandleClose}
+                            PaperProps={{
+                                elevation: 0,
+                                sx: {
+                                    overflow: "visible",
+                                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
+                                    mt: 1.5,
+                                    "& .MuiAvatar-root": {
+                                        width: 32,
+                                        height: 32,
+                                        ml: -0.0,
+                                        mr: 2,
+                                    },
+                                    "&:before": {
+                                        content: '""',
+                                        display: "block",
+                                        position: "absolute",
+                                        top: 0,
+                                        right: 14,
+                                        width: 10,
+                                        height: 10,
+                                        bgcolor: "background.paper",
+                                        transform:
+                                            "translateY(-50%) rotate(45deg)",
+                                        zIndex: 0,
+                                    },
+                                },
+                            }}
+                            transformOrigin={{
+                                horizontal: "right",
+                                vertical: "top",
+                            }}
+                            anchorOrigin={{
+                                horizontal: "right",
+                                vertical: "bottom",
+                            }}
+                        >
+                            {/* <MessageNotification /> */}
+                            <Link href={route("qr.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <AddIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Create
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("qr.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <SyncAltIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Update
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                            <Link href={route("qr.create")}>
+                                <ListItem>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <DeleteForeverIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <Typography variant="subtitle2">
+                                        Delete
+                                    </Typography>
+                                </ListItem>
+                            </Link>
+                        </Menu>
+                    </div>
+                </div>
+            </Box>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <div className="overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                <Card>
+                    <div className="px-5 py-5 border-b-4 border-sky-500">
+                        <Typography variant="h6">QRCode</Typography>
+                    </div>
+                    <MUIDataTable
+                        data={data}
+                        columns={columns}
+                        options={options}
+                    />
+                </Card>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Storage/Index.jsx b/resources/js/Pages/Admin/Storage/Index.jsx
new file mode 100644
index 0000000..9211a0d
--- /dev/null
+++ b/resources/js/Pages/Admin/Storage/Index.jsx
@@ -0,0 +1,124 @@
+import ShippingCard from "@/Components/Card";
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Autocomplete,
+    Avatar,
+    Button,
+    Card,
+    FormControl,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField,
+} from "@mui/material";
+import React from "react";
+import MUIDataTable from "mui-datatables";
+import TransitionsModal from "@/Components/Modal";
+import ReusableModal from "@/Components/Modal";
+import AddSharpIcon from "@mui/icons-material/AddSharp";
+import BasicTextFields from "@/Components/InputField";
+import CustomizedSnackbars from "@/Components/CustomizeSnackBar";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import WhatshotIcon from "@mui/icons-material/Whatshot";
+import GrainIcon from "@mui/icons-material/Grain";
+import { Link } from "@inertiajs/react";
+import VerticalTabs from "@/Components/TabPanel";
+import WidgetsIcon from "@mui/icons-material/Widgets";
+import EastIcon from "@mui/icons-material/East";
+
+export default function Index({ auth, mustVerifyEmail, storages }) {
+    const data = storages.map((storage) => [
+        // storage.id,
+        storage.productName,
+        storage.productId,
+        storage.itemName,
+        storage.status,
+        <EastIcon />,
+    ]);
+    const columns = [
+        "Product Name",
+        "Product ID",
+        // "Item Name",
+        "Quantity Needed",
+        "Status",
+        "",
+    ];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const [age, setAge] = React.useState("");
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <WidgetsIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Storage",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    // Define an array of tab objects with label and content properties
+    const tabs = [
+        {
+            label: "Desktop",
+            content: (
+                <div className="py-6 overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                    <Card>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                        />
+                    </Card>
+                </div>
+            ),
+        },
+        {
+            label: "Laptops",
+            content: (
+                <div className="py-6 overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                    <Card>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                        />
+                    </Card>
+                </div>
+            ),
+        },
+        // Add more tabs as needed
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            {/* Pass the tabs array to the VerticalTabs component */}
+            <VerticalTabs tabs={tabs} />
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Warranty/Index.jsx b/resources/js/Pages/Admin/Warranty/Index.jsx
new file mode 100644
index 0000000..8ea6c31
--- /dev/null
+++ b/resources/js/Pages/Admin/Warranty/Index.jsx
@@ -0,0 +1,116 @@
+import ShippingCard from "@/Components/Card";
+import MainLayout from "@/Layouts/MainLayout";
+import {
+    Autocomplete,
+    Avatar,
+    Button,
+    Card,
+    FormControl,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import MUIDataTable from "mui-datatables";
+import TransitionsModal from "@/Components/Modal";
+import ReusableModal from "@/Components/Modal";
+import AddSharpIcon from "@mui/icons-material/AddSharp";
+import BasicTextFields from "@/Components/InputField";
+import CustomizedSnackbars from "@/Components/CustomizeSnackBar";
+import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
+import HomeIcon from "@mui/icons-material/Home";
+import WhatshotIcon from "@mui/icons-material/Whatshot";
+import GrainIcon from "@mui/icons-material/Grain";
+import { Link } from "@inertiajs/react";
+import InventorySharpIcon from "@mui/icons-material/InventorySharp";
+import EastIcon from "@mui/icons-material/East";
+
+export default function Index({ auth, mustVerifyEmail, status, warranty }) {
+    const data = warranty.map((warranty) => [
+        warranty.id,
+        warranty.warranty,
+        <div className="flex justify-end pr-5">
+            <Link href={route("dashboard")}>
+                <EastIcon />
+            </Link>
+        </div>, // Replace 'insert_icon_name_here' with the actual icon name
+    ]);
+
+    const columns = ["ID", "Warranties", ""];
+
+    const options = {
+        filterType: "checkBox",
+        elevation: 0,
+        responsive: "standard",
+        selectableRows: false,
+    };
+
+    const [age, setAge] = React.useState("");
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    const breadcrumbItems = [
+        {
+            icon: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+            text: <Link href={route("dashboard")}>Home</Link>,
+            url: (
+                <Link href={route("dashboard")}>
+                    <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                </Link>
+            ),
+        },
+        {
+            icon: <InventorySharpIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
+            text: "Branch",
+            url: "/material-ui/getting-started/installation/",
+        },
+    ];
+
+    return (
+        <MainLayout user={auth.user}>
+            <div className="pb-10">
+                <CustomBreadcrumbs items={breadcrumbItems} />
+            </div>
+            <div className="overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
+                <div className="sm:hidden">
+                    {/* Mobile View */}
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Warranty List</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            // You can apply the stickyHeader class if needed for mobile view
+                        />
+                    </Card>
+                </div>
+                <div className="hidden sm:block">
+                    {/* Desktop View */}
+                    <Card>
+                        <div className="px-5 py-5 border-b-4 border-sky-500">
+                            <Typography variant="h6">Warranty List</Typography>
+                        </div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                            size={"small"}
+                            stickyHeader
+                        />
+                    </Card>
+                </div>
+            </div>
+        </MainLayout>
+    );
+}
diff --git a/resources/js/Pages/Profile/Edit.jsx b/resources/js/Pages/Profile/Edit.jsx
index 144aa1a..eb0dce4 100644
--- a/resources/js/Pages/Profile/Edit.jsx
+++ b/resources/js/Pages/Profile/Edit.jsx
@@ -3,7 +3,20 @@ import React from "react";
 import UpdateProfile from "./Partials/UpdateProfile";
 import UpdatePassword from "./Partials/UpdatePassword";
 import DeleteAccount from "./Partials/DeleteAccount";
-import { Avatar, IconButton, Typography, Tabs, Tab } from "@mui/material";
+import {
+    Avatar,
+    IconButton,
+    Typography,
+    Tabs,
+    Tab,
+    Box,
+    Badge,
+    Stack,
+} from "@mui/material";
+import SupervisedUserCircleSharpIcon from "@mui/icons-material/SupervisedUserCircleSharp";
+import ChangeCircleSharpIcon from "@mui/icons-material/ChangeCircleSharp";
+import ManageAccountsSharpIcon from "@mui/icons-material/ManageAccountsSharp";
+import { styled } from "@mui/material/styles";
 
 export default function Edit({ auth }) {
     const [value, setValue] = React.useState("personalInformation");
@@ -11,26 +24,62 @@ export default function Edit({ auth }) {
     const handleChange = (event, newValue) => {
         setValue(newValue);
     };
+
+    // active avatar
+
+    const StyledBadge = styled(Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "#44b700",
+            color: "#44b700",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            "&::after": {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                borderRadius: "50%",
+                animation: "ripple 1.2s infinite ease-in-out",
+                border: "1px solid currentColor",
+                content: '""',
+            },
+        },
+        "@keyframes ripple": {
+            "0%": {
+                transform: "scale(.8)",
+                opacity: 1,
+            },
+            "100%": {
+                transform: "scale(2.4)",
+                opacity: 0,
+            },
+        },
+    }));
+
+    const SmallAvatar = styled(Avatar)(({ theme }) => ({
+        width: 22,
+        height: 22,
+        border: `2px solid ${theme.palette.background.paper}`,
+    }));
+
     return (
         <MainLayout user={auth.user}>
-            <div className="grid gap-4 lg:grid-cols-3 lg:grid align-center">
-                <div className="card">
-                    <center>
-                        <IconButton sx={{ width: 100, height: 100 }}>
-                            <Avatar
-                                alt={auth.user.name}
-                                src="/static/images/avatar/2.jpg"
-                            />
-                        </IconButton>
-                        <Typography variant="h6" color="initial">
-                            {auth.user.name}
-                        </Typography>
-                        <Typography variant="body2" color="initial">
-                            {auth.user.email}
-                        </Typography>
-                    </center>
+            <div className="grid gap-4 lg:grid-cols-3 lg:align-center sm:grid-cols-1">
+                <div className="card text-center">
+                    <IconButton sx={{ width: 100, height: 100 }}>
+                        <Avatar
+                            alt={auth.user.name}
+                            src="/static/images/avatar/2.jpg"
+                        />
+                    </IconButton>
+                    <Typography variant="h6" color="inherit">
+                        {auth.user.name}
+                    </Typography>
+                    <Typography variant="body2" color="inherit">
+                        {auth.user.email}
+                    </Typography>
                 </div>
-                <div className="col-span-2 card">
+                <div className="lg:col-span-2 card">
                     <Tabs
                         value={value}
                         onChange={handleChange}
diff --git a/resources/js/Pages/Profile/Partials/DeleteAccount.jsx b/resources/js/Pages/Profile/Partials/DeleteAccount.jsx
index c37f35b..11dd760 100644
--- a/resources/js/Pages/Profile/Partials/DeleteAccount.jsx
+++ b/resources/js/Pages/Profile/Partials/DeleteAccount.jsx
@@ -9,6 +9,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import { Typography } from "@mui/material";
+import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
 
 export default function DeleteAccount({ className = "" }) {
     const [open, setOpen] = React.useState(false);
@@ -63,20 +64,39 @@ export default function DeleteAccount({ className = "" }) {
 
     return (
         <>
-            <div className="mb-5">
-                <Typography variant="h6" sx={{ textTransform: "uppercase" }}>
-                    Delete Account
-                </Typography>
-                <Typography variant="body2">
-                    Once your account is deleted, all of its resources and data
-                    will be permanently deleted. Before deleting your account,
-                    please download any data or information that you wish to
-                    retain.
-                </Typography>
+            <div className="grid grid-rows-2">
+                <div className="mb-5">
+                    <Typography
+                        variant="h6"
+                        sx={{ textTransform: "uppercase" }}
+                    >
+                        Delete Account
+                    </Typography>
+                    <Typography variant="body2">
+                        Once your account is deleted, all of its resources and
+                        data will be permanently deleted. Before deleting your
+                        account, please download any data or information that
+                        you wish to retain.
+                    </Typography>
+                </div>
+                <div className="grid justify-start items-end">
+                    {/* <CustomizedSnackbars
+                        onClick={handleClickOpen}
+                        title={"Delete Account"}
+                        color={"error"}
+                        startIcon={<DeleteSharpIcon />}
+                    /> */}
+                    <Button
+                        variant="contained"
+                        color="error"
+                        onClick={handleClickOpen}
+                        startIcon={<DeleteSharpIcon />}
+                    >
+                        Delete Account
+                    </Button>
+                </div>
             </div>
-            <Button variant="contained" color="error" onClick={handleClickOpen}>
-                Delete Account
-            </Button>
+
             <Dialog open={open} onClose={handleClose}>
                 <form onSubmit={deleteUser}>
                     <DialogTitle>
@@ -109,7 +129,7 @@ export default function DeleteAccount({ className = "" }) {
                         </Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button variant="outlined" onClick={handleClose}>
+                        <Button variant="contained" onClick={handleClose}>
                             Cancel
                         </Button>
                         <Button variant="contained" color="error" type="submit">
diff --git a/resources/js/Pages/Profile/Partials/UpdatePassword.jsx b/resources/js/Pages/Profile/Partials/UpdatePassword.jsx
index 3e17db7..55ca27d 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePassword.jsx
+++ b/resources/js/Pages/Profile/Partials/UpdatePassword.jsx
@@ -55,7 +55,7 @@ export default function UpdatePassword() {
                 </Typography>
             </div>
 
-            <form onSubmit={updatePassword} className="grid gap-2">
+            <form onSubmit={updatePassword} className="grid gap-2 py-10">
                 <TextField
                     label="Current Password"
                     type="password"
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx
index f24923a..40c59ea 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx
+++ b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx
@@ -1,14 +1,18 @@
-import { useForm, usePage } from '@inertiajs/react';
+import { useForm, usePage } from "@inertiajs/react";
 import { Button, Typography, TextField } from "@mui/material";
 
-
-export default function UpdateProfile({ mustVerifyEmail, status, className = '' }) {
+export default function UpdateProfile({
+    mustVerifyEmail,
+    status,
+    className = "",
+}) {
     const user = usePage().props.auth.user;
 
-    const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({
-        name: user.name,
-        email: user.email,
-    });
+    const { data, setData, patch, errors, processing, recentlySuccessful } =
+        useForm({
+            name: user.name,
+            email: user.email,
+        });
 
     const handleSubmit = (e) => {
         e.preventDefault();
@@ -32,7 +36,7 @@ export default function UpdateProfile({ mustVerifyEmail, status, className = ''
                 </Typography>
             </div>
             <form onSubmit={handleSubmit}>
-                <div className="grid gap-2 lg:grid-cols-2">
+                <div className="grid gap-10 lg:grid-col py-10">
                     <div>
                         <TextField
                             id="name"
@@ -72,30 +76,6 @@ export default function UpdateProfile({ mustVerifyEmail, status, className = ''
                     </Button>
                 </div>
             </form>
-
-            {/* {mustVerifyEmail && user.email_verified_at === null && (
-                        <div>
-                            <p className="mt-2 text-sm text-gray-800">
-                                Your email address is unverified.
-                                <Link
-                                    href={route("verification.send")}
-                                    method="post"
-                                    as="button"
-                                    className="text-sm text-gray-600 underline rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                                >
-                                    Click here to re-send the verification
-                                    email.
-                                </Link>
-                            </p>
-
-                            {status === "verification-link-sent" && (
-                                <div className="mt-2 text-sm font-medium text-green-600">
-                                    A new verification link has been sent to
-                                    your email address.
-                                </div>
-                            )}
-                        </div>
-                    )} */}
         </>
     );
 }
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index f23e9ff..764e8ed 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,23 +1,29 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        {{-- <title inertia>{{ config('app.name', 'Laravel') }}</title> --}}
-        <title>Inventory Management System</title>
-
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
-
-        <!-- Scripts -->
-        @routes
-        @viteReactRefresh
-        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
-        @inertiaHead
-    </head>
-    <body class="font-sans antialiased">
-        @inertia
-    </body>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{-- <title inertia>{{ config('app.name', 'Laravel') }}</title> --}}
+    <title>Inventory Management System</title>
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
+
+
+
+    <!-- Scripts -->
+    @routes
+    @viteReactRefresh
+    @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
+    @inertiaHead
+</head>
+
+<body class="font-sans antialiased">
+    @inertia
+</body>
+
 </html>
diff --git a/routes/web.php b/routes/web.php
index 985f9b1..90918d4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,11 +1,27 @@
 <?php
 
+use App\Http\Controllers\Borrowed_item;
+use App\Http\Controllers\Borrowed_itemController;
+use App\Http\Controllers\BorrowedItem\BorrowedController;
+use App\Http\Controllers\Branch\BranchController;
+use App\Http\Controllers\Categories\CategoriesController;
+use App\Http\Controllers\Dashboard\DashboardController;
+use App\Http\Controllers\Equipment\EquipmentController;
 use App\Http\Controllers\Library\GenderController;
 use App\Http\Controllers\Library\LibraryController;
+use App\Http\Controllers\library\SettingController;
+use App\Http\Controllers\Management\ProductManagementController;
+use App\Http\Controllers\Management\UserManagementController;
 use App\Http\Controllers\ProfileController;
+use App\Http\Controllers\Qr\GenerateQrController;
+use App\Http\Controllers\Qr\QrController;
+use App\Http\Controllers\Storage\StorageController;
+use App\Http\Controllers\Warranty\WarrantyController;
+use App\Models\User;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
+use SebastianBergmann\CodeCoverage\Report\Html\Dashboard;
 
 /*
 |--------------------------------------------------------------------------
@@ -35,16 +51,43 @@
     Route::middleware('auth')->group(function () {
 
         Route::get('/', function () {
-            return Inertia::render('Admin/Dashboard/Index');
+            $users = User::all();
+            return Inertia::render('Admin/Dashboard/Index', [
+                'users' => $users,
+            ]);
         })->name('dashboard');
 
+        // Route::resource('/Dashboard', DashboardController::class);
+
 
 
         // library
         Route::resource('/library', LibraryController::class);
 
 
+        // Management
+        Route::resource('/management', UserManagementController::class);
+        Route::resource("/categories", CategoriesController::class);
+        Route::resource('/products', ProductManagementController::class);
+        Route::resource('/equipment', EquipmentController::class);
+        Route::resource('/branch', BranchController::class);
+        Route::resource('/warranty', WarrantyController::class);
+        Route::resource('/borrowed_item', BorrowedController::class);
+        // create a post that located at ProductManagementController
+
+        // Qr code
+        Route::resource('/qr', QrController::class);
+        Route::resource('/generator', GenerateQrController::class);
+
+        // storage
+
+        Route::resource('/storage', StorageController::class);
 
+        // Setting navigationbar
+        Route::resource('/settings', SettingController::class);
+
+
+        // Route::resource('/profile', ProfileController::class);
 
 
 
@@ -52,11 +95,10 @@
         Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
         Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
     });
-
 });
 
 
 
 
 
-require __DIR__.'/auth.php';
+require __DIR__ . '/auth.php';
diff --git a/tailwind.config.js b/tailwind.config.js
index 19ae3e3..7776665 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,19 +1,20 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-import forms from '@tailwindcss/forms';
+import defaultTheme from "tailwindcss/defaultTheme";
+import forms from "@tailwindcss/forms";
 
 /** @type {import('tailwindcss').Config} */
 export default {
+    darkMode: "class",
     content: [
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
-        './storage/framework/views/*.php',
-        './resources/views/**/*.blade.php',
-        './resources/js/**/*.jsx',
+        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
+        "./storage/framework/views/*.php",
+        "./resources/views/**/*.blade.php",
+        "./resources/js/**/*.jsx",
     ],
 
     theme: {
         extend: {
             fontFamily: {
-                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
+                sans: ["Figtree", ...defaultTheme.fontFamily.sans],
             },
         },
     },